:root {
    /* Color Palette */
    --color-bg: #1A1A1A; /* Dark charcoal background */
    --color-text-dark: #111111; /* For text on yellow-ish cards */
    --color-text-light: #FFFFFF; /* For text on blue-magenta card */
    --color-btn-arrow-dark: #1A1A1A; 
    --color-btn-arrow-light: #FF2FD3; /* Hot pink arrow for light btn */

    /* Typography */
    --font-family: 'Inter', sans-serif;
    --font-weight-title: 800; /* Extra bold */
    --font-weight-subtitle: 400; /* Regular */
    --font-weight-desc: 600; /* Semibold */

    /* Card Sizing & Spacing */
    --card-width: 320px;
    --card-height: 480px;
    --card-border-radius: 28px;
    --card-padding: 25px;
    --gap-base: 12px;
    
    /* Circle graphics */
    --text-main: #ffffff;
    --text-blue: #70b0ff;
    --text-cyan: #22f3e8;
    --font-family: Inter, sans-serif;
}



body {
  background-color: #212121; /* Replace with your color */
  margin: 0;                /* Removes browser default white margins */
  min-height: 100dvh;       /* Ensures background covers full screen height */
      font-family: var(--font-family);
        background-color: #212121;
  background-image: url('main_images/house-bg.jpg');
  background-position: center;
  background-repeat: no-repeat;
  background-size: min(100%, 1500px) auto;
}

html, body {
      height: 100%;
      scroll-behavior: smooth;
      scroll-snap-type: y mandatory;
      overflow-y: mandatory;
      margin: 0;
  	  padding: 0;
  width: 100%;
  max-width: 100vw;
  /* Standard global horizontal scroll prevention */

}    

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }
 
a {text-decoration:none;}
  
  .section {
      min-height: 100dvh;
      min-height: 100vh;
      width: 100%;
      
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      border:0px red solid;
    }
    
 .section-2 {

      
      width: 100%;
      
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      border:0px red solid;
    }
    
 
    
/* --- Position Decorative Arrows Out of Document Flow --- */
#dotted-arrow-1 {
width:10%; height:auto;
  position: absolute;
  top: 15%;
  left: 5%;
  pointer-events: none; /* Prevents arrows from blocking clicks */
  z-index: 1;
}

#dotted-arrow-2 {
width:10%; height:auto;
  position: absolute;
  bottom: 15%;
  right: 5%;
  pointer-events: none;
  z-index: 1;
}


  .full-screen {
  min-height: 100dvh;
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
  position: relative; /* Essential for flex anchoring */
  
  display: flex;
  flex-direction: column;
  justify-content: space-between; /* Pins #top to top, bottom to bottom, center to middle */
  align-items: center;
  
  box-sizing: border-box;

}

  .next-screen {
  
    width: 100%;
    background-color: #212121;
    color: white;
    max-width:1440px;
    margin: 0 auto;
    
    /* Centering content inside */
    display: flex;
    flex-direction: column;
	min-height: 100dvh; /* Or any fixed height, e.g., height: 500px */
	min-height: 100vh;
    box-sizing: border-box;
    position:relative;

  }


#side_menu {position:absolute; top:0; right:0; width:250px; height:100%; background: #222222; z-index:1095; display:none; text-align:right; border: 0px white solid;


}
#close_menu {width:100%; height:auto; text-align:right;}
#close {margin-top:15px; margin-right:15px;}



.menu_item {width:100%; height:auto; font-size:clamp(18px, 7vw, 23px); font-family: "Inter", sans-serif; font-weight: 300; letter-spacing: 0em; color:#FFFFFF; padding-left:25px; text-align:left; line-height: 75px;}
.menu_item a {color:#FFFFFF; text-decoration: none;}

.menu_item a:link {color: #FFFFFF; text-decoration: none;}
.menu_item a:visited {color: #FFFFFF; text-decoration: none;}
.menu_item a:hover {color:#FF7400; text-decoration: none;}
.menu_item a:active {color:#FFFFFF; text-decoration: none;}
.border_b {width:100%; height:1px; background: #89867e;}

.menu_ux {position: relative; top:25%; transform: translateY(-25%);}

#top{width:100%; height:auto; display:block; border:0px red solid; position:relative;}
  
.align-top {
    display: flex;
    justify-content: space-between;
	align-items: center;
	width: 100%;
	height:auto;
	border:0px red solid;
  }
  
  .left-group {
    display: flex;
    align-items: center;
    gap: 0px; /* Space between the left image and text */
  }

#menu{margin:15px; border:0px;}

  .align-center {
  margin-top: auto;
  margin-bottom: auto;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
}

  .align-bottom {
    /* Auto margin on top pushes this item to the very bottom */
    margin-top: auto;
    margin-bottom: 0;
    margin-left:auto;
    margin-right:auto;
    border:0px white solid;
	display: grid;
  place-items: center;
  
  }
  
#house-top-text 
  {
  font-family: "Inter", sans-serif;
  font-weight: 900; /* Inter Black */
  font-size: clamp(59px, 5vw, 60px);
  letter-spacing: -0.05em;
  line-height: 75px;
  white-space: nowrap;
  color: white;
  display: inline-flex;
  align-items: center;
  margin-top:0px;
  margin-bottom:0px;
    background: transparent;
  -webkit-text-fill-color: currentColor;
}


#house-bottom-text 
  {
  font-family: "Inter", sans-serif;
  font-weight: 900; /* Inter Black */
  font-size: clamp(18px, 7vw, 20px);
  letter-spacing: 0em;
  line-height: 25px;
  white-space: nowrap;
  color: white;
  display: inline-flex;
  align-items: center;
  margin-top:0px;
  margin-bottom:0px;
    background: transparent;
  -webkit-text-fill-color: currentColor;
}


#orange-house{width:70%; height:auto;}


.house-cover{border: #FFFFFF solid 0px;
display: grid;
  place-items: center; /* Centers both horizontally and vertically */
  text-align: center;
}

#house {border: red solid 0px;}


 #scroll-btn:focus-visible,
#scroll-btn-2:focus-visible, 
  
  
/* Arrow Button Styling */
    .scroll-arrow {
      background: transparent;
      border: none;
      color: white;
      cursor: pointer;
      font-size: 2.5rem;
      position: absolute;
      bottom: 2rem;
      transition: transform 0.2s ease;
        max-width: 80px;
        z-index:5555;
      
      /* Gentle bouncing animation */
      animation: bounce 2s infinite;
    }

    .scroll-arrow:hover {
      transform: scale(1.2);
    }

    @keyframes bounce {
      0%, 20%, 50%, 80%, 100% {
        transform: translateY(0);
      }
      40% {
        transform: translateY(-10px);
      }
      60% {
        transform: translateY(-5px);
      }
    }  
  
  
#km-logo{margin:15px; margin-right:10px; width:79px; height:auto;}  
  
#name 
  {
  font-family: "Inter", sans-serif;
  font-weight: 800; /* Inter Black */
  font-size: clamp(18px, 5vw, 20px);
  letter-spacing: -0.02em;
  line-height: 25px;
  white-space: nowrap;
  color: white;
  display: inline-flex;
  align-items: center;
  margin-top:0px;
  margin-bottom:0px;
    background: transparent;
  -webkit-text-fill-color: currentColor;
} 

#some-space {display:none;}
  
@media only screen and (max-width:800px) 
{ 
  
  #bottom-section{
  
  display: flex;
  flex-direction: column;    /* Items stacked top-to-bottom */
  
  align-items: center;
  min-height: 100%;
    /* Handles both horizontal and vertical centering */
  border:0px yellow solid;
  
  }
  
  
  #orange-house{width:55%; height:auto;}
  #house-top-text {font-size:45px; line-height:65px;}
  #some-space {display:block;}
  #space-box-top {align-self: center; justify-self: center; border:0px red solid;
  
    margin-top:0px;
  margin-bottom:0px;
  }
  

.next-screen{display: grid;
  place-items: center;
  margin-top:0;
  }


} 
  
.show-up {opacity: 0;
    transform: translateY(40px);
    transition:
        opacity 0.8s ease,
        transform 0.8s ease;
        
    border: solid, black, 0px;

}

.show-up.show {
    opacity: 1;
    transform: translateY(0);
} 

.show-down {opacity: 0;
    transform: translateY(-40px);
    transition:
        opacity 0.8s ease,
        transform 0.8s ease;
        
    border: solid, black, 0px;

}

.show-down.show {
    opacity: 1;
    transform: translateY(0);
} 

#space-box-top{width: 90%;
height:auto;
  display: flex;
  justify-content: center;
  align-self: center;
  gap: 20px;
 background: transparent;
  -webkit-text-fill-color: currentColor;
  margin-top:0px;
  margin-bottom:0px;

}


#footer{width:100%; height:auto; max-width:1440px; margin: 0 auto;
  justify-content: center;
  display: grid;
  grid-template-areas: "stack"; /* Defines a single area */ 
  border: 0px red solid;
	padding-bottom: 55px;
	background-color:#212121;

  }



#logo-bottom #space-box-bottom{
  grid-area: stack; /* Places both elements in the exact same grid space */
}

#logo-bottom{
width:70px; height:auto;
z-index: 2; /* Sits over bottom-element */
  align-self: center; /* Vertical alignment */
  justify-self: center; /* Horizontal alignment */

}

#space-box-bottom{width: 90%;
height:50px;
  display: flex;
  justify-content: center;
  justify-self: center;
  gap: 45px;
 background: transparent;
  -webkit-text-fill-color: currentColor;
  margin-top:0px;
  border: 0px white solid;

}



.container-for-boxes {
  display: flex;
  width: 100%;
  padding:0;
  margin:0;
}

.side {
  flex: 1; /* Both sides grow evenly to fill remaining space */
  background-color: #e2e8f0;
  padding: 0rem;
  background: transparent;
  -webkit-text-fill-color: currentColor;
  
  display: grid;
  align-content: center;   /* Vertically centers grid items */
  /* align-items: center; */ /* Use this if you want items aligned within their own rows */

}

.middle {
  flex: 0 0 auto; /* Don't grow or shrink relative to flex ratio; size strictly by content */
  background-color: #3b82f6;
  color: white;
  padding: 2rem;
  padding-top:0;
  padding-bottom:0;
  white-space: nowrap; /* Keeps middle text on one line if you want it strictly expanding sideways */
  background: transparent;
  -webkit-text-fill-color: currentColor;
    align-content: center; 
}

.selected-line{width:100%; height:1px;}

#space-box{width: 80%;
height: 100%;
position:absolute;
top:215%;
left: 50%;
      margin-left: -40%;

z-index:777;
  display: flex;
  justify-content: center;
  gap: 20px;
  margin-bottom:100px;
  
  background: transparent;
  -webkit-text-fill-color: currentColor;

}

#menu-bottom{

font-size: clamp(18px, 6vw, 20px);
    font-family: "Inter", sans-serif; font-weight: 400; letter-spacing: -0.03em;
    padding-right: 0.04em;
       
	position: relative;
  	display: inline-block;
  	word-spacing: 20px;

}

#selected-work-ux-index
{
font-size: clamp(25px, 6vw, 40px);
    font-family: "Inter", sans-serif; font-weight: 900; letter-spacing: -0.03em;
    padding-right: 0.04em;
       
	position: relative;
  	display: inline-block;
  	padding-bottom: 4px; /* spacing between text and underline */
       
       
     /* Step 1: Set the gradient as the background */
  background-image: linear-gradient(90deg, #FEBD2B, #FF0AC4);
  
  /* Step 2: Clip the background to the text area */
  -webkit-background-clip: text; /* For Chrome, Safari, and Edge */
          background-clip: text; /* Standard property for Firefox and others */
  
  /* Step 3: Make the text transparent so the background is visible */
  -webkit-text-fill-color: transparent; /* For Chrome, Safari, and Edge */
          text-fill-color: transparent; /* Standard property */
          color: transparent; /* Fallback for older browsers (can sometimes cause issues) */

  /* Optional: Set a fallback color for very old browsers */
  background-color: #f32170;
}

.scene {
  width: 100%;
  height:80%;
  border: red solid 0px;
  position: relative;
  perspective: 1000px;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 300px;
}

#bottom-center {
  width: 50%;
  height: 545px;
  border: red solid 0px;
  position: relative;
  margin-top: 25px;
  
  /* Initial off-screen state */
  transform: rotateY(90deg) rotateX(-20deg) translateZ(150px);
  
  /* Bounce transition for showing/hiding */
  transition: transform 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  
  transform-style: preserve-3d;
  will-change: transform;
}

#bottom-center.show {
  transform: rotateY(0deg) rotateX(0deg) translateZ(0px);
}



/* --- Card Base Styles --- */
.card {

    height: var(--card-height);
    border-radius: var(--card-border-radius);
    padding: var(--card-padding);
    box-sizing: border-box; /* Crucial for padding */
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    border:0;
}
.card-2 {
    width: 25%;
    height: var(--card-height);
    border-radius: var(--card-border-radius);
    padding: var(--card-padding);
    box-sizing: border-box; /* Crucial for padding */
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    flex:1;
    border:0;
}

.card-3 {
	width:90%;
    height: auto;
    border-radius: var(--card-border-radius);
    padding: var(--card-padding);
    border:0;
    margin: 0 auto;
    

}


#ux-box-arrow{
	display: inline-block;
      transition: transform 0.6s ease-in-out;
      transform-origin: center center;
      will-change: transform;
      cursor: pointer;

}

#ux-box-arrow-2{
	display: inline-block;
      transition: transform 0.6s ease-in-out;
      transform-origin: center center;
      will-change: transform;
      cursor: pointer;

}


#portfolio-box-arrow{
	display: inline-block;
      transition: transform 0.6s ease-in-out;
      transform-origin: center center;
      will-change: transform;
      cursor: pointer;
      height:100%;

}

#portfolio-box-arrow-2{
	display: inline-block;
      transition: transform 0.6s ease-in-out;
      transform-origin: center center;
      will-change: transform;
      cursor: pointer;
      height:100%;

}

#software-box-arrow{
	display: inline-block;
      transition: transform 0.6s ease-in-out;
      transform-origin: center center;
      will-change: transform;
      cursor: pointer;

}

#software-box-arrow-2{
	display: inline-block;
      transition: transform 0.6s ease-in-out;
      transform-origin: center center;
      will-change: transform;
      cursor: pointer;

}



/* Specific Card Gradients & Text Colors */
.card--yellow-red {
width: 35%;
    max-height:430px;
    background-image: linear-gradient(to bottom right, #FFF600, #EA168C);
    color: var(--color-text-dark);
}

.card--yellow-green {
	position:absolute;
	top: 10%;
	left:37%;
    height:35%;
    max-height:188px;
    background-image: linear-gradient(to bottom right, #FFE600, #3CFF1F);
    color: var(--color-text-dark);
}

.card--cyan-magenta {
	position:absolute;
	bottom: 0px;
	left:37%;
    height:53%; width:auto;
    min-height:217px;
    max-height:284px;
    background-image: linear-gradient(to bottom right, #00EBFF, #FF00FF);
    color: var(--color-text-light);
}

/* --- Typography Inside Cards --- */
.card__header {
    margin-bottom: calc(var(--gap-base) * 2);
}

.card__header-green {
    margin-bottom: 3%;
}

.card__title {

    font-size: clamp(35px, 4vw, 40px);
    font-family: 'Inter', sans-serif;
    letter-spacing: -0.05em;
    font-weight: var(--font-weight-title);
    margin: 0 0 var(--gap-base) 0;
    text-transform: uppercase;
}

/* Specific styling for the title on the last card */
.card__title--light {
    color: var(--color-text-light);
}

.card__subtitle {
    font-size: clamp(25px, 4vw, 25px);
    font-weight:200;
    margin: 0;
    line-height: 1.8;
    margin-top:-20px;
}

/* Specific styling for the subtitle on the last card */
.card__subtitle--light {
    color: var(--color-text-light);
}

/* Description Text at the Bottom */
.card__content {
    display: flex;
    align-items: flex-end;
    gap: 24px; /* Space between text and button */
	padding-bottom:3%;
}

.card__content-purple {
    display: flex;
    align-items: flex-end;
    gap: 24px; /* Space between text and button */
	padding-bottom:3%;
}

/* Description Text at the Bottom */
.card__content-green {
    display: flex;
    
    justify-content: flex-end; /* Aligns child items to the right horizontally */
  	align-items: center;
    
    gap: 20px; /* Space between text and button */
    margin-bottom:0%;
    padding:0;
    border:0px red solid;
    position:absolute; right:2%; bottom:10%;
}


.card__description {
    font-size: 13px;
    line-height: 1.5;
    margin: 0;
    opacity: 0.8; /* Make description a bit less prominent */
}

.card__description-purple {
    font-size: 13px;
    line-height: 1.5;
    margin: 0;
    opacity: 0.8; /* Make description a bit less prominent */
    width:85%; height:auto;
    border:0px solid red;
}

.card__description-green {
    font-size: 13px;
    line-height: 1.5;
    margin: 0;
    opacity: 0.8; /* Make description a bit less prominent */
    text-align:right;
    width:55%;
    
}

.card__description--light {
    color: var(--color-text-light);
}

/* --- Button Styling --- */
.card__button {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    border: 0px black solid;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    flex-shrink: 0; /* Prevent button from shrinking */
}

.card__button-green {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    border: none;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    flex-shrink: 0; /* Prevent button from shrinking */
    padding:0;
}


#bottom-center-vertical {
  transform: rotateY(90deg) rotateX(20deg) translateZ(50px);
  
  /* Swapped 'ease' for an elastic bezier curve */
  transition: transform 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

#bottom-center-vertical.show {
  transform: rotateY(0deg);
}


    
.ux-btn {width:100%; height:auto;}

.card__button:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.3);
}

.card__button-green:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.3);
}

.card__icon {
    font-size: 24px;
    color: var(--color-btn-arrow-dark); /* Arrow color on dark button */
}

/* White button variant for the last card */
.card__button--light {
    background-color: var(--color-text-light);
}

.card__button--light .card__icon {
    color: var(--color-btn-arrow-light); /* Pink arrow color on white button */
}


#bottom-center-vertical{display:none;}

@media only screen and (max-width:1400px) 
{ 
  #bottom-center{width:60%;}

} 

@media only screen and (max-width:1120px) 
{ 
  #bottom-center{width:70%;}

} 

@media only screen and (max-width:930px) 
{ 

  #space-box-top {margin-top:0px; margin-bottom:0px;}
  #bottom-center{width:80%;}

} 
@media only screen and (max-width:745px) 
{ 
  #bottom-center{width:90%;}
  .card--yellow-green {
    width:63%;}
    
.card__description-green {
    width:45%;
    }

} 

@media (max-width: 800px){

.card__title {font-size: clamp(20px, 4vw, 25px);}
.card__subtitle {font-size: clamp(18px, 4vw, 20px);}

}


@media (max-width: 700px){
	
	#bottom-center-vertical{
	width:60%;
	display: grid;
	justify-content: center;
  	border:0px red solid;
	}
	
.next-screen{width:100%; height: auto; margin:0px; padding:0px; display:inline;}
.section-2{width:100%; min-height: 100dvh; min-height: 100vh; margin:0px; padding:0px; display:inline;}		
#bottom-section{width:100%; border:0px yellow solid;}
.scene {display:none;}	
#space-box-top{margin-top:45px; margin-bottom:45px; margin-left: auto; margin-right: auto;}	

}



@media (max-height: 600px){
.card__header-green {
    margin-bottom: -3%;
	}

}


@media (max-height: 470px){

/*.full-screen{
 
     display: flex;
    flex-direction: column;
    justify-content: center; 
    align-items: center;
	min-height: 100dvh; 
	min-height: 100vh;
    box-sizing: border-box;
 
 } */

.section {display:block;}
.section-2 {display:block;}
#space-box-top{justify-self: center; align-self: center;}
#bottom-center-vertical{justify-self: center;}
#bottom-center-horizontal{justify-self: center;}



}



@media (max-height: 550px){

#bottom-section {background-color:#212121;}
#space-box-top {background-color:#212121;}

.align-bottom{

    margin-top: auto;
    margin-bottom: 0;
    border:0px red solid;}
    
.scroll-arrow {

      position: absolute;
      bottom: 0rem;
	}

.align-top {
position:absolute; top:0px;
border:0px red solid;

  }
	
.align-center
{
  position:absolute; top:0px;
  border:0px solid yellow;
 margin-top: 75px;
  margin-bottom: auto;
  display: flex;
  width: 100%;

	}
		
}

@media (max-height: 450px){
.align-bottom{display:none;}
#bottom-section, .section-2, .next-screen{z-index:5555; position:absolute; background-color:#212121;}
}


#bottom-center-horizontal
{display:none}

.card-2 {
width: 33%;
height: 100%;
flex: 1;             /* Makes all 3 divs take up equal width */
}


@media (max-height: 550px){
.card__content-purple{
border:0px red solid;

    display: flex;
    align-items: flex-end;
    gap:5px; /* Space between text and button */
    padding-bottom:20px;



	}
}

@media (max-height: 500px)
{
.next-screen{width:100%; margin:0px; padding:0px; display:inline;}
.section{width:100%; min-height: 100dvh; min-height: 100vh; margin:0px; padding:0px;}
.section-2{width:100%; min-height: 100dvh; min-height: 100vh; margin:0px; padding:0px; display:inline;}		
#bottom-section{width:100%; border:0px yellow solid;}
.scene {display:none;}	
#space-box-top{margin-top:45px; margin-bottom:45px; margin-left: auto; margin-right: auto;}	
	
	#bottom-center-horizontal{
 display: grid;
  grid-template-columns: repeat(3, 1fr); /* Forces 3 equal-width columns */
  gap: 20px;                             /* Space between cards */
  max-width: 90%;
  margin: 0 auto;
  height:auto; width:100%;
  border:red solid 0px;
  background-color: #212121;
	}

	#bottom-center{display:none;}
	#bottom-center-vertical{display:none;}

	.card--yellow-red-h {
	display: flex;
  flex-direction: column;
  justify-content: space-between; /* Pushes the button/arrow to the bottom */
  
  height: 100%; width:auto;           /* Stretches card to fill the row height */
  padding: 30px 24px;
  border-radius: 28px;
  box-sizing: border-box;
	}
	
	
	.card--yellow-green-h{
	display: flex;
  flex-direction: column;
  justify-content: space-between; /* Pushes the button/arrow to the bottom */
  
  height: 100%;            /* Stretches card to fill the row height */
  width:auto;
  padding: 30px 24px;
  border-radius: 28px;
  box-sizing: border-box;
	}
	
	.card--cyan-magenta-h{
	display: flex;
  flex-direction: column;
  justify-content: space-between; /* Pushes the button/arrow to the bottom */
  
  height: 100%;            /* Stretches card to fill the row height */
  width:auto;
  padding: 30px 24px;
  border-radius: 28px;
  box-sizing: border-box;
	}
	
}

.card--yellow-red-h {
    background-image: linear-gradient(to bottom right, #FFF600, #EA168C);
    color: var(--color-text-dark);
    
}

.card--yellow-green-h {
    background-image: linear-gradient(to bottom right, #FFE600, #3CFF1F);
    color: var(--color-text-dark);
}

.card--cyan-magenta-h {

    background-image: linear-gradient(to bottom right, #00EBFF, #FF00FF);
    color: var(--color-text-light);
}


.js-rotate {
      transform: rotate(360deg);
    }

@media only screen and (max-width:650px){

	#bottom-center-horizontal{display:none;}
	#bottom-center{display:none;}


	#bottom-center-vertical{display:block;
	width:90%;
	display: grid;
  place-items: center;
	}
	
	.next-screen{height:auto;}

.card__title {font-size: clamp(40px, 4vw, 55px);}
.card__subtitle {font-size: clamp(22px, 4vw, 35px);
font-weight:300;
}


	#space-box-top{
	  margin-top:0px;
	}
	
	
}


.widen {width:20%;
    transition: width 0.8s ease;}

.widen.show {
    width:73%;
}


.highten {height:20%;
    transition: height 0.8s ease;}

.highten.show {
    height:80%;
}

.widen-2 {width:20%;
    transition: width 0.8s ease;}

.widen-2.show {
    width:40%;
}


/* 1. Unvisited link */
#menu-bottom a{
  color: #FFFFFF;          /* Modern blue color */
  text-decoration: none;   /* Removes default underline */
  font-weight: 500;
  transition: color 0.2s;  /* Smooth color change on hover */
}

/* 2. Visited link (pages the user has already visited) */
a:visited {
  color: #FFFFFF;          /* Purple */
}

/* 3. Hover state (when the mouse moves over the link) */
#menu-bottom a:hover {
  color: #90FF4F;          /* Darker blue */
  text-decoration: underline; /* Re-add underline on hover */
}

/* 4. Active state (the moment the link is being clicked) */
a:active {
  color: #FFFFFF;          /* Darkest blue */
}


.circle-gr{width:80%;
border:0px solid yellow; background-color:#212121;
display: flex;
      justify-content: center;
      align-items: center;
      }


/* Container for graphic */
    .circle-container {
      position: relative;
      width: 600px;
      height: 600px;
      display: flex;
      justify-content: center;
      align-items: center;
      z-index: 2; /* Keeps circle above decorative background arrows */
  margin: 0 auto;
    }

    /* SVG Circle Background with Gradient */
    .circle-svg {
      position: absolute;
      width: 70%;
      height: 70%;
      transform: rotate(-90deg); /* Adjust gradient direction */
    }

    /* Center Text Block */
    .center-content {
      position: absolute;
      text-align: center;
      z-index: 2;
      width: 260px;
    }

    .center-content h1 {
      font-size: 2.2rem;
      font-weight: 800;
      line-height: 1.1;
      letter-spacing: -0.5px;
      color: var(--text-main);
    }

    .gradient-underline {
      height: 8px;
      width: 180px;
      margin: 16px auto 0;
      border-radius: 3px;
      background: linear-gradient(90deg, #ffe600 0%, #ff6b35 50%, #e02485 100%);
    }

/* --- Keyframe Animations --- */
@keyframes rotateClockwise {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@keyframes counterRotate {
  /* Starts by canceling out the item's initial angle, keeping it 100% horizontal */
  from { 
    transform: rotate(calc(-1 * var(--angle))); 
  }
  /* Spins backward as the ring spins forward to stay horizontal at all times */
  to { 
    transform: rotate(calc(-1 * var(--angle) - 360deg)); 
  }
}

/* --- Outer Rotator Layer --- */
.labels-rotator {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  animation: rotateClockwise 60s linear infinite;
}

/* --- Ray wrapper (Positions pivot point on the exact 210px ring radius) --- */
.label-wrapper {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  transform: rotate(var(--angle)) translate(210px);
}

/* --- Label Box (Stays level & guarantees 4px gap) --- */
.label-box {
  display: flex;
  justify-content: center;
  align-items: center;
  white-space: nowrap;
  animation: counterRotate 60s linear infinite;
  
  /* 
    4px padding pushes text away from the ring center 
    so it maintains a strict 4px gap no matter where it orbits 
  */
  padding: 4px; 
}

/* --- Font Styling --- */
.label-text {
  font-size: 1.15rem;
  color: #13C6F3;
  line-height: 1.25;
  text-align: center;
  font-weight: 700;
  
  /* Adds a 7px black border around the letters */
  -webkit-text-stroke: 7px #212121;
  
  /* Keeps corners smooth and readable */
  paint-order: stroke fill;
}

.label-box.highlight .label-text {
  color: var(--text-cyan);
  font-weight: 800;
  font-size: 1.4rem;
}

/* --- Positions around the 360° circle --- */
.pos-top          { --angle: -90deg; }
.pos-top-right    { --angle: -45deg; }
.pos-right        { --angle: 0deg; }
.pos-bottom-right { --angle: 45deg; }
.pos-bottom       { --angle: 90deg; }
.pos-bottom-left  { --angle: 135deg; }
.pos-left         { --angle: 180deg; }
.pos-top-left     { --angle: 225deg; }





/* =========================================================
   MOBILE RESPONSIVE LAYOUT (< 565px)
   ========================================================= */

.mobile-card {
  display: none;
}

@media (max-width: 900px) {
  

  .circle-container {
    position: relative;
    /* Reduced max width slightly so long label text fits comfortably inside edges */
    width: min(320px, 50vw); 
    aspect-ratio: 1 / 1;
    margin: 0 auto;
  }

  .circle-container svg {
    width: 100% !important;
    height: 100% !important;
  }

  /* Keep label sizes sharp & compact */
  .label-text {
    font-size: 1rem;
    line-height: 1.15;
  }

  .label-box {
    padding: 2px 4px;
  }
}




@media (max-width: 600px) {

#dotted-arrow-1{display:none;}
#dotted-arrow-2{display:none;}

  /* Hide Desktop Graphic */
  .circle-container {
    display: none !important;
  }

  /* Show Mobile Card */
  .mobile-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    width: 80%;
    padding: 40px 24px;
    border-radius: 32px;
    background: #181818;
    box-sizing: border-box;
    margin: 40px auto;
    
    /* VERY IMPORTANT: Allows glows to sit 50% outside the card */
    overflow: visible; 
    
    /* Gradient Border */
    border: 2px solid transparent;
    background-image: 
      linear-gradient(#181818, #181818), 
      linear-gradient(135deg, #34e8e0 0%, #3b82f6 30%, #a855f7 70%, #ec4899 100%);
    background-origin: border-box;
    background-clip: padding-box, border-box;
  }

  /* --- GLOW SPOTS (Positioned on the 2px border line) --- */
  
  /* Left Border Glow */
  .mobile-card::before {
    content: '';
    position: absolute;
    /* Centers the glow directly over the 2px left border line */
    left: -2px; 
    top: 60px;
    width: 50px;
    height: 90px;
    
    /* Centers the anchor point so half is inside, half is outside */
    transform: translate(-50%, 0); 
    filter: blur(14px);
    border-radius: 50%;
    pointer-events: none;
    
    /* Animates position + matching gradient color */
    animation: moveAndColorGlowLeft 8s ease-in-out infinite alternate;
  }

  /* Right Border Glow */
  .mobile-card::after {
    content: '';
    position: absolute;
    /* Centers the glow directly over the 2px right border line */
    right: -2px; 
    top: 60px;
    width: 50px;
    height: 90px;
    
    /* Centers the anchor point so half is inside, half is outside */
    transform: translate(50%, 0); 
    filter: blur(14px);
    border-radius: 50%;
    pointer-events: none;
    
    /* Animates position + matching gradient color */
    animation: moveAndColorGlowRight 8s ease-in-out infinite alternate;
  }

  /* --- Header Styling --- */
  .mobile-header {
    text-align: center;
    margin-bottom: 32px;
  }

  .mobile-header h2 {
    font-size: 2.1rem;
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -0.5px;
    color: #ffffff;
  }

  /* --- List Styling --- */
  .mobile-list {
    list-style: none;
    padding: 0;
    margin: 0;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 18px;
  }

  .mobile-list li {
    font-size: 1.15rem;
    font-weight: 700;
    color: #38bdf8;
    display: flex;
    align-items: center;
    line-height: 1.3;
  }

  .mobile-list li::before {
    content: '';
    display: inline-block;
    width: 7px;
    height: 7px;
    background-color: #38bdf8;
    border-radius: 50%;
    margin-right: 14px;
    flex-shrink: 0;
  }
}

/* =========================================================
   SYNCHRONIZED POSITION & DYNAMIC COLOR ANIMATIONS
   ========================================================= */

/* LEFT GLOW: Moves Top -> Bottom (Colors: Cyan -> Blue -> Purple) */
@keyframes moveAndColorGlowLeft {
  0% {
    transform: translate(-50%, 0px);
    background: radial-gradient(circle, rgba(52, 232, 224, 0.9) 0%, rgba(52, 232, 224, 0) 70%);
  }
  50% {
    background: radial-gradient(circle, rgba(59, 130, 246, 0.9) 0%, rgba(59, 130, 246, 0) 70%);
  }
  100% {
    transform: translate(-50%, 310px);
    background: radial-gradient(circle, rgba(168, 85, 247, 0.9) 0%, rgba(168, 85, 247, 0) 70%);
  }
}

/* RIGHT GLOW: Moves Bottom -> Top (Colors: Pink -> Purple -> Blue) */
@keyframes moveAndColorGlowRight {
  0% {
    transform: translate(50%, 310px);
    background: radial-gradient(circle, rgba(236, 72, 153, 0.9) 0%, rgba(236, 72, 153, 0) 70%);
  }
  50% {
    background: radial-gradient(circle, rgba(168, 85, 247, 0.9) 0%, rgba(168, 85, 247, 0) 70%);
  }
  100% {
    transform: translate(50%, 0px);
    background: radial-gradient(circle, rgba(59, 130, 246, 0.9) 0%, rgba(59, 130, 246, 0) 70%);
  }
}


#bottom-section-3, 
.section-3 {
background-color:#212121;
  position: relative;
  width: 100%;
  max-width: 100vw;
  
  /* Use padding instead of strict 100vh if content overflows */
  padding: 60px 0;
  min-height: auto; 
  height: auto !important; /* Overrides any height: 100vh set earlier */
  
  display: flex;
  justify-content: center;
  align-items: center;
  
  /* CRITICAL: Disables internal vertical scrollbars completely */
  overflow-x: hidden;
  overflow-y: visible !important; 
  overflow: hidden !important;
}

@media (max-height: 450px){
#bottom-section-3 {display:none;}
}