: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;
}



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);
}

html, body {
      height: 100%;
      scroll-behavior: smooth;
      scroll-snap-type: y mandatory;
      overflow-y: mandatory;
    }

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

  .full-screen {
  
    width: 100%;
    height: 100%;
    background-color: #212121;
    color: white;
    max-width:1440px;
    
    /* Centering content inside */
    display: flex;
    flex-direction: column;
	min-height: 100dvh; /* Or any fixed height, e.g., height: 500px */
    box-sizing: border-box;
    
    /* Background image settings */
    background-image: url('main_images/house-bg.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
  }

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

  }


#side_menu {position:fixed; 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 {
    /* Auto margins top and bottom force this item into the exact vertical middle */
    margin-top: auto;
    margin-bottom: auto;
  }

  .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-arrow{display: block;
  margin-left: auto;
  margin-right: auto;
  margin-bottom:15px;
  
  max-width: 100%; /* Keeps it responsive */
  height: auto;}
  
  
  
/* 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;
      
      /* 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 */
  justify-content: flex-start;/* Pins elements to the TOP */
  align-items: center;
  min-height: 80%;
    /* 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; display: block;
  justify-content: center;
  display: grid;
  grid-template-areas: "stack"; /* Defines a single area */ 
  border: 0px red solid;
	padding-bottom: 55px;

  }



#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: 100dvh;
  border: red solid 0px;
  position: relative;
  perspective: 1000px;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 300px;
}

#bottom-center {
  width: 50%;
  height: 80%;
  border: red solid 0px;
  position: relative;
  margin-top: 5px;
  
  /* 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 {
    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;
    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%;

    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%;
    background-image: linear-gradient(to bottom right, #FFE600, #3CFF1F);
    color: var(--color-text-dark);
}

.card--cyan-magenta {
	position:absolute;
	top: 47.5%;
	left:37%;
    height:53%;
    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 */
}


/* 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-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: 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 */
}

.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%; height: auto; 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:block;}
 .next-screen{display:block; margin-top:0px;}
.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: 575px){
.align-bottom{display:none;}
}


#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)
{
.next-screen{width:100%; height: auto; margin:0px; padding:0px; display:inline;}
.section{width:100%; height: auto; margin:0px; padding:0px; display:block;}
.section-2{width:100%; height: auto; 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;
	}

	#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 */
}