.body {
  font-family: poppins, serif;
    overflow: auto;
    margin: 0;
    padding: 0;
    height: 100%;
    text-align: left;
    background-color: #002B5B; /*or f0f0f0*/
    color: #F4F4F4;
    background-image: url('../images/background1.jpg');
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: 100% 100%;
/*    display: flex;*/
    justify-content: center; /* Center horizontally */
    align-items: center; /* Center vertically */
	overflow-x: hidden;
}

/*temp... in future.css*/


.cook_effects, .back_effects {
  position: fixed;
  top: 0; left: 0;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  pointer-events: none;
  z-index: -1;
  clip-path: inset(0 0 0 0);
}
.cook_effects{
	z-index: 2000;
}
		.titan-panel-glow {
			box-shadow: 0 0 80px rgba(0, 123, 255, 0.15);
			transition: box-shadow 0.8s ease-in-out;
		}
			@keyframes titanGlowPulse {
				0% {
					box-shadow: 0 0 0px rgba(0, 123, 255, 0.05);
				}
				50% {
					box-shadow: 0 0 80px rgba(0, 123, 255, 0.4);
				}
				100% {
					box-shadow: 0 0 0px rgba(0, 123, 255, 0.05);
				}
			}

			.titan-panel-pulse {
				animation: titanGlowPulse 4s ease-in-out infinite;
			}

.titan-bg-pulse {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 1200px;
    height: 1200px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(0, 123, 255, 0.5) 0%, rgba(0, 0, 0, 0) 80%);
    animation: titan-pulse-glow 10s infinite ease-in-out;
    pointer-events: none;
    z-index: 0;
  overflow: hidden;
}

@keyframes titan-pulse-glow {
    0% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 0.3;
    }
    50% {
        transform: translate(-50%, -50%) scale(1.5);
        opacity: 0.1;
    }
    100% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 0.3;
    }
}

.tb-bg-clouds {
  position: fixed;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
z-index: 0;
  overflow: hidden;
}

.tb-cloud {
  position: absolute;
  border-radius: 50%;
  opacity: 0.4;
  background: radial-gradient(ellipse at center, rgba(60, 60, 160, 0.5), transparent 70%);
  animation-timing-function: ease-in-out;
z-index: 0;
  overflow: hidden;
}



.cloud-1 {
  width: 600px; height: 600px;
  top: 10%; left: -30%;
  animation: drift1 30s infinite;
  background: radial-gradient(ellipse at center, rgba(60, 60, 160, 0.45), transparent 75%);
z-index: 0;
  overflow: hidden;
}

.cloud-2 {
  width: 500px; height: 500px;
  top: 50%; left: -40%;
  animation: drift2 45s infinite;
  background: radial-gradient(ellipse at center, rgba(80, 120, 200, 0.3), transparent 75%);
z-index: 0;
  overflow: hidden;
}

.cloud-3 {
  width: 700px; height: 700px;
  top: 80%; left: -35%;
  animation: drift3 60s infinite;
  background: radial-gradient(ellipse at center, rgba(40, 100, 190, 0.35), transparent 75%);
z-index: 0;
  overflow: hidden;
}



@keyframes drift1 {
  0% { transform: translateX(0); opacity: 0.35; }
  50% { transform: translateX(120vw); opacity: 0.5; }
  100% { transform: translateX(0); opacity: 0.35; }
}

@keyframes drift2 {
  0% { transform: translateX(0); opacity: 0.3; }
  50% { transform: translateX(100vw); opacity: 0.45; }
  100% { transform: translateX(0); opacity: 0.3; }
}

@keyframes drift3 {
  0% { transform: translateX(0); opacity: 0.25; }
  50% { transform: translateX(140vw); opacity: 0.4; }
  100% { transform: translateX(0); opacity: 0.25; }
}


.tb-bg-pulse {
  position: fixed; left:50%; top:50%;
  width:1200px; height:1200px;
  margin:-600px 0 0 -600px;
  border: 20px solid transparent;
  border-radius: 50%;
  animation: tb-pulse 4s ease-out infinite;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}
@keyframes tb-pulse {
  0%  { transform: scale(0.1); opacity: 0.1; border-color: rgba(0,170,255,0.02); }
  70% { transform: scale(1.0);   opacity: 0.2; border-color: rgba(0,170,255,0.05); }
  100%{ transform: scale(1.1); opacity: 0; }
}



.tb-bg-orbs {
  position: fixed;
  top:0; left:0;
  width:100%; height:100%;
  pointer-events:none;
  overflow:hidden;
  z-index:0;
filter: blur(5px);
}
.tb-bg-orbs span {
  position:absolute;
  background: rgba(0,170,255,0.2);
  border-radius: 50%;
  animation: tb-orb-move 20s linear infinite;
  overflow: hidden;

}

.tb-bg-orbs .orb {
  position: absolute;
  background: rgba(0, 170, 255, 0.2);
  border-radius: 50%;
  animation: tb-orb-move 22s linear infinite;
  left: var(--x);
  top: var(--y);
  overflow: hidden;
}


.orb1 {
  --x: 25vw;
  --y: 10vh;
  --x2: 70vw;
  --y2: 80vh;
  width: 150px;
  height: 150px;
  animation-delay: 0s;
  overflow: hidden;
}

.orb2 {
  --x: 80vw;
  --y: 5vh;
  --x2: 10vw;
  --y2: 60vh;
  width: 180px;
  height: 180px;
  animation-delay: 5s;
}

.orb3 {
  --x: 20vw;
  --y: 70vh;
  --x2: 90vw;
  --y2: 10vh;
  width: 120px;
  height: 120px;
  animation-delay: 2s;
  overflow: hidden;
}

.orb4 {
  --x: 5vw; --y: 80vh;
  --x2: 95vw; --y2: 10vh;
  width: 140px; height: 140px;
  animation-delay: 7s;
  overflow: hidden;


}

.orb5 {
  --x: 90vw;
  --y: 90vh;
  --x2: 30vw;
  --y2: 1vh;
  width: 170px; height: 170px;
  animation-delay: 3s;
  overflow: hidden;
}
.orb6 {
  --x: 20vw; --y: 60vh;
  --x2: 80vw; --y2: 30vh;
  width: 220px; height: 220px;
  animation-delay: 9s;
  overflow: hidden;
}


@keyframes tb-orb-move {
  0% {
    transform: translate(0, 0) scale(0.8);
    opacity: 0;
  }
  20% {
    opacity: 0.3;
  }
  100% {
    transform: translate(calc(var(--x2) - var(--x)), calc(var(--y2) - var(--y))) scale(1.3);
    opacity: 0;
  }
}



.tb-cloud, .tb-bg-pulse, .orb {
  will-change: transform, opacity;
}





/*end of temp*/





  #contents {
        visibility: hidden;
        opacity: 0;
        width: 0; /* Start with 0 width */
        height: auto; /* Allow natural height growth */
        overflow: hidden;
        transition: all 1.5s ease;
    }

    #contents.expanded {
        visibility: visible;
        opacity: 1;
        width: 95%; /* Full width for the content */
		max-width:1400px;
		background-color: rgba(0, 0, 0, 0.5);
		border-radius: 25px;
    }

.fadeout {
  opacity: 0;
  transform: scale(3);
  transition: all 1s ease-in-out;
}

.bracket-expanded {
  opacity: 1;
 /* height: auto;  Optional: or allow JS to set dynamically */
}


	
/* Orbits: */
	/* Orbit Containers (Control Rotation) */
	.orbit-container {
		position: absolute;
		width: 0;
		height: 0;
		top: 50%;
		left: 50%;
		animation: rotate-orbit 4s linear infinite;
	z-index: 10;
	}
	.orbit-container:nth-child(2) { animation-duration: 5s; }
	.orbit-container:nth-child(3) { animation-duration: 6s; }
	/* Orbiting Orbs */
	.orb {
		position: absolute;
		width: 15px;
		height: 15px;
		background-color: white;
		border-radius: 50%;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%) translateX(100px); /* Start at correct position */
		box-shadow: 0 0 10px 2px rgba(255, 255, 255, 0.6); /* Trail Effect */
	z-index: 10;
	}
	.orbit-container:nth-child(2) .orb {
		transform: translate(-50%, -50%) translateX(80px);
	z-index: 10;
	}
	.orbit-container:nth-child(3) .orb {
		transform: translate(-50%, -50%) translateX(120px);
	z-index: 10;
	}
	/* Rotation of orbit containers (Creates Elliptical Motion) */
	@keyframes rotate-orbit {
		0% { transform: translate(-50%, -50%) rotate(0deg); }
		100% { transform: translate(-50%, -50%) rotate(360deg); }
	}
	

#circle {
    width: 100px;
    height: 100px;
    background: radial-gradient(circle at 30% 30%, #00aaff, #004488);
    color: #fff;
    font-size: 17px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    cursor: pointer;
    transition: all 1s ease;
    box-shadow: inset 0 0 5px rgba(255, 255, 255, 0.2),
                inset 0 0 10px rgba(255, 255, 255, 0.1),
                0 0 10px rgba(0, 123, 255, 0.4),
                0 0 20px rgba(0, 123, 255, 0.3);
    border: 2px solid #00ccff;
    font-weight: bold;
    text-shadow: 0 0 5px #000;
    z-index: 10;
    position: relative;
/*	will-change: transform;*/
}

#circle:hover {
    background: radial-gradient(circle at 30% 30%, #33ccff, #0055aa);
    box-shadow: inset 0 0 10px rgba(255, 255, 255, 0.3),
                0 0 15px rgba(0, 170, 255, 0.7),
                0 0 30px rgba(0, 170, 255, 0.5);
    transform: scale(1.05);
    z-index: 100;
}

/* Parent container with all 4 lines */
.circle-wrapper {
    position: relative;
/*    display: inline-block; */
    z-index: 1;
		display: flex;
		flex-direction: column;
		align-items: center;
	}


/* Horizontal glow beams */
.circle-wrapper::before,
.circle-wrapper::after {
    content: '';
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    height: 6px;
    width: 200px;
    background: linear-gradient(to right, transparent, rgba(0, 140, 220, 0.8), transparent);
    z-index: 0;
}

.circle-wrapper::before {
    left: 395px;
}

.circle-wrapper::after {
    right: 400px;
}

/* Vertical glow beams */
.circle-wrapper .vline {
    content: '';
    position: absolute;
    width: 5px;
    height: 180px;
    left: 50%;
    transform: translateX(-50%);
    background: linear-gradient(to bottom, transparent, rgba(0, 140, 220, 0.8), transparent);
    z-index: 0;
}

.circle-wrapper .vline.top {
    top: 0px;
}

.circle-wrapper .vline.bottom {
    bottom: 0px;
}
	

.circle-wrapper.hide-glow::before,
.circle-wrapper.hide-glow::after {
    display: none;
}



.rev_list {
  position: relative;
  padding: 20px 50px; /* Gives space for the side bars */
}

.rev_list::before,
.rev_list::after {
  content: '';
  position: absolute;
  top: 10px;
  bottom: 10px;
  width: 5px;
  background: linear-gradient(to bottom, #00ccff, #0066ff);
  border-radius: 2px;
}

.rev_list::before {
  left: 0;
}

.rev_list::after {
  right: 0;
}
	
	
.glass_panel {
  background: rgba(0, 0, 0, 0.45); /* Subtle dark layer */
  border-radius: 15px;
  padding: 25px;
  margin: 30px auto;
  width: 90%;
  max-width: 1100px;
  backdrop-filter: blur(6px); /* Modern glass effect */
  box-shadow: 0 0 20px rgba(0,0,0,0.2);
  border: 1px solid rgba(255, 255, 255, 0.1);
}
.glass_panel::before {
  content: '';
  position: absolute;
  left: -15px;
  top: 15px;
  height: calc(100% - 30px);
  width: 5px;
  background: linear-gradient(to bottom, #00ccff, #0066ff);
  border-radius: 2px;
}
.glass_panel.no-before::before {
  display: none;
  content: none; /* just in case */
}
	
.right_panel::after {
  content: '';
  position: absolute;
  right: -15px;
  top: 15px;
  height: calc(100% - 30px);
  width: 5px;
  background: linear-gradient(to bottom, #00ccff, #0066ff);
  border-radius: 2px;
}
.light_panel_glow {
  box-shadow: inset 0 0 5px rgba(0, 255, 255, 0.2), 0 0 10px rgba(0, 123, 255, 0.1);
}




/*pretext:*/
	.pretext{
		width:90%;
		margin: 0 auto;
		display: flex; 
		flex-direction: column;
	}
	

/*start build button*/	

	.bracket {
		width: 2%;
		background-color: #6194cb;
		min-height: 100px; /* Default minimum height */
		opacity: 0; /* Initially hidden */
		transition: opacity 1s ease, transform 1s ease;
	}

	.left-bracket {
		border-radius: 0 10px 10px 0;
		float: left;
		margin: 0%;
		margin-top: 75px;
	}

	.right-bracket {
		border-radius: 10px 0 0 10px;
		float: right;
		margin: 5%;
		margin-top: 75px;
	}
		.midright{
		float:right;
			padding-left:1%;
			padding-right:1%;
			display:inline-block;	
			margin-top: 10px;
			display:inline-block;
background-color: rgba(0, 0, 0, 0.5);
border-radius: 30px;
		}
		
		
.farright {
    position: fixed;
top: 40px;
    height: 98vh;
    display: block;
    overflow-y: auto;
    padding: 1%;
    padding-top: 50px;
    border-left: 1px solid #ccc;
	
	z-index:100;
}
.farright::after {
    content: "";
    display: block;
    height: 50px;
	
	  bottom: 0;
  background:
    url('../images/tblogo.png') center top no-repeat,
    linear-gradient(rgba(255,255,255,0), rgba(255,255,255,1));
 /* background-size: 250px auto, 100% 300px;*/
  background-size: contain;
   background-position: center center;
  opacity: 0.16;
  pointer-events: none;

	
	
}
		.farright p{
			display: block;
			text-indent: -20px;
			padding-left: 20px;
		}

		
	/* Thin scrollbar */
/* Sleek, visible scrollbar for dark themes */
.farright::-webkit-scrollbar {
    width: 10px; /* Slightly wider for better usability */
}

.farright::-webkit-scrollbar-track {
    background: #1e1e2f; /* Deep navy for smooth contrast */
    border-radius: 6px;
    box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
}

.farright::-webkit-scrollbar-thumb {
    background: linear-gradient(to bottom, #6194cb, #2a72cc); /* Soft glowing blue */
    border-radius: 6px;
    box-shadow: inset 0 0 3px rgba(255, 255, 255, 0.3);
    transition: background 0.3s, box-shadow 0.3s;
}

.farright::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(to bottom, #3399ff, #1f60b0);
    box-shadow: inset 0 0 6px rgba(255, 255, 255, 0.4);
}		
		
		
		


	.midleft{
		width:18%;
		max-height:500px;
		display:inline-block;
		margin-top:11vh;
			padding-top:1%;
			padding-left:0.1%;
			padding-right:1%;
background-color: rgba(0, 0, 0, 0.5);
border-radius: 30px;
	}
	
.builddescription {
    background: rgba(0, 0, 0, 0.5); /* Subtle dark transparency */
    border-left: 5px solid gold; /* Stylish accent */
    padding: 15px 20px;
    margin: 15px auto;
	width:80%;
    max-width: 700px;
    color: #f8f8f8;
    font-style: italic;
    font-size: 1.1rem;
    line-height: 1.6;
    font-family: poppins, sans-serif;
    box-shadow: 0 0 10px rgba(255, 215, 0, 0.2);
    transition: opacity 0.3s ease;
}

.sbs{
	display:flex;
}


.social-btn {
  width: 30%;
  max-width: 250px;
  min-width: 150px;
  padding:1%;
  margin-right:2%;
  background: none;
  cursor: pointer;
  display: inline-block;
border-radius: 10px;
margin-top:2px !important;
margin-bottom:2px !important;
  
}

.google-icon,
.github-icon {
  width: 100%;       /* Make image fill the button */
  height: auto;      /* Maintain aspect ratio */
  display: block;
  margin: 0 auto;
border-radius: 15px;
}



/* Mobile: disable fixed attachment for small/touch screens */
@media (pointer: coarse) {
  body {
    background-attachment: scroll !important;
    background-size: 100% 85% !important;
    background-repeat: repeat-y !important;
  }
}


@media (min-width: 1401px) {
/*	.wideback{
		margin-right:14%;
	}*/

	
	#contents.expanded{
		max-width: 1000px;
	}
	
	.logosmall{
/*		transform: translate(-50px, 0) !important; */
	}
		.midleft{
			width:19% !important;
			max-height:500px;
			display:inline-block;
		}
			
.topmargin {
    margin-top: 2%;
}

		.midright{
			width:52%;
		}


	.farright {
		right: 0px;
		width: 14%;
		padding-bottom: 50px;
		padding-left:0.5%;

	}
	.farright::after {
		padding-bottom: 320px; /* ✅ Extra space at the bottom */
		
	}

	.farright p{
		font-size: clamp(14px, 0.9vw, 20px);
	}
	.farright h2{
		font-size: clamp(16px, 1.3vw, 30px) !important;
	}
	
	.fr_btn_or{
		margin: 0.2vw !important;
		
		padding: 0.1vw 0.4vw !important;
	}
	
	.icons{
		max-width: 70px;
		margin-left: 0.7vw;
	}
	
	
	
	
		#myBtn{
			right:20%;
		}
	.right-bracket{
		margin-right:0%;
	}	
	.left-bracket{
		margin-right:14%;
	}	
	
	
	.hidebtn{
		display:none;
	}
	
	.leftorright{display:none;}

.glass_panel {
padding-left:2%;
padding-right:2%;
}


}



@media (max-width: 1401px) {
		.midleft{
			margin-left:3vw;
		}
		.customise-after, .configmargin{
			margin:0 auto;
		}
		.con_build_h2 {
			margin-left:5vw;
		}

		.midright{
			width:62%;
		}

	.farright {
		right: -100vw; /* ✅ Starts off-screen */
		width: auto;
		max-width:100%;
		background: #0e161e;
		transition: right 0.5s ease-in-out; /* ✅ Smooth slide-in effect */
	}

	.farright.active {
		right: 0; /* ✅ Slides into view */
	}


	.farright::after {
		padding-bottom: 450px; /* ✅ Extra space at the bottom */
	}

			.farright p{
				font-size: clamp(12px, 1.3vw, 18px) !important;
			}
			.farright h2{
				font-size: clamp(18px, 2.1vw, 25px) !important;
			}

			

	.farright .button{
		display: inline-block;
	/*    display: flex; ✅ Allows full control over centering */
		justify-content: center; /* ✅ Centers horizontally */
		align-items: center; /* ✅ Centers vertically */
		text-align: center; /* ✅ Ensures inline text is centered */
	   /* height: 100%;  ✅ Ensures the button takes full height */
		cursor:pointer;

		}


		#myBtn{
			right:20%;
		}
}


@media (max-width: 787px) {

	.midleft{
		margin-left:6vw;
		width:10%;
		background: none;
	}

.btnfix{
	margin-left: -80px;
}
}




/*	.farright{
		padding: 3%;
	}
}*/
	
@media (max-width: 515px) {

.circle-wrapper::before {
    left: 190px;
}

.circle-wrapper::after {
    right: 190px;
}

.midright { margin-right: 4%;}



#switchtobuynow2 .button, #addtobasket1 .button, #showfullspec .button {
	padding: 4px 4px;
    margin: 20px 3px;
    font-size: 12.5px;
}

/*


.sbs{margin-left: 0px;}
	
*/

.left-bracket { margin: 0.5%;}
.right-bracket { margin: 0.5%;}

.selection-buttons {
    margin: 15px;
	margin-left: 50px;
	}
.rev_list {
  position: relative;
  padding: 10px 25px; /* Gives space for the side bars */
}


#circle {

    background: #0072aa;
    box-shadow: box-shadow: none !important;

    border: 2px solid #00ccff;

/*	will-change: transform;*/
}

.logo {
  opacity: 0.99; /* subtle enough to be invisible, but keeps it on the radar */
}




}




@media (max-width: 380px) {

/*
.midleft {
        margin-left: 0.5vw;
		margin-top: 7vh;
}
.midright {
	width: 70%;
}
*/
#switchtobuynow2 .button, #addtobasket1 .button, #showfullspec .button {
	padding: 2px 2px;
    margin: 20px 1px;
    font-size: 12px;
}



.subtext, .after-config-text, .pre-price-anchor, .after-config-sub {
    font-size: clamp(14px, 1.5vw, 20px);
    line-height: 1.6;
    color: #e0e0e0;
}
	
	
	.logosmall{ width:150px;}
	/* site should work as low as 300px (tested to 270) */
	.con_build_h2 {
    margin: 1.5vw;
	max-width: 98vw;
}
	.pretext{
		width: 99%; /* or less */
	}
	.wrapper{ 
		padding: 40px 1px; /* or more than 1px */
		width: 100%; /* or less */
	}
	.glass_panel{
		padding: 10px; /* or more */
	}
	
	/* config page only */
	.bracket{
		width: 2px;
	}
.left-bracket {
    margin: 1%;
}
.right-bracket {
    margin: 1%;
}
#contents.expanded{
	width: 95%; 
}

.icons {
    min-width: 35px;
}

.selection-buttons {
    margin-left: 25px;
	gap: 2px;
}
.selection-button {
	margin: 2px;
	padding: 5px 3px;
	font-size: 0.9em;
}
.builddescription{
	    font-size: 0.9rem;
}
.textright{
	margin-right:2%;
}

.tot{
	font-size: clamp(12px, 3vw, 35px);
}
.parts {
    width: 40%;
}
.h1 {
    font-size: clamp(11px, 1.5vw, 36px);
}

.button{
	font-size: 11px;
}
#members-bar{
font-size: clamp(9px, 1.6vw, 17px);
padding-right: 0px;
}
#myBtn {
        right: 10%;
		font-size: 12px;
		padding: 12px;
    }
#switchtobuynow1 {
/*	margin-left: 70px;*/
}

}