@media (min-width: 48rem) {
  .carousel-track {
    overflow: visible;
    scroll-snap-type: none;
    padding: 0;
  }

  .carousel-track .card {
    flex: unset;
    width: 100%;
    scroll-snap-align: none;
  }

  .carousel-indicators {
    display: none;
  }

	.tech-container{
		 display:grid;
		 grid-template-column: 1fr 1fr 1fr;
		 max-width:800px;
		 grid-template-areas:
		 "first first second"
	     "third third  second";
	}

	.tech-container .card:first-child{
		   grid-area:first;
	}

	.tech-container .card:nth-child(2){
		 grid-area:second;
	}

	.tech-container .card:last-child{
		 grid-area:third;
	}

	
	.service-container{
		display: grid;
		grid-template-columns: 1fr 1fr 1fr;
		max-width:800px;
		grid-template-areas:
		 "first first second"
		 "third  fourth fourth";
	}


	.service-container .card:first-child{
		   grid-area:first;
	}

	.service-container .card:nth-child(2){
		   grid-area:second;
	}

	.service-container .card:nth-child(3){
		    grid-area:third;
	}

	.service-container .card:last-child{
		  grid-area:fourth;
	}
	

.portfolio-container {
    display: grid;
    /* 3 Columns: Each ~315px wide at 1000px max-width */
    grid-template-columns: 1.3fr 1fr 1.3fr; 
    gap: var(--space-24);
    max-width: 800px; 
    grid-template-areas: 
        "first first second"
        "third fourth fourth"
        "last  last   last";
}
	.portfolio-container .card {
    height: 100%; 
    margin: 0;
    position: relative; /* Keeps your text-on-image positioning working */
	}

/* 2. THE CONDITIONAL PSEUDO-CLASSES */

/* Card 1: Starmedical (The Top Header) */
.portfolio-container .card:first-child { 
    grid-area: first; 
}

/* Card 2: Yumix (The Top-Right 'Single' Cell) */
.portfolio-container .card:nth-child(2) { 
    grid-area: second; 
}

/* Card 3: Moores (The Middle-Left 'Single' Cell) */
.portfolio-container .card:nth-child(3) { 
    grid-area: third; 
}

/* Card 4: Wearix (The Middle-Right Banner) */
.portfolio-container .card:nth-child(4) { 
    grid-area: fourth; 
}

/* Card 5: Renovix (The Big Bottom Footer) */
.portfolio-container .card:last-child { 
    grid-area: last; 
}
	
	
	

  
  .hero-container,
  .about-container {
    gap: var(--space-48);
   /* padding: var(--space-32) var(--space-24);*/
    text-align: left;
    align-items: flex-start;
  }

  .hero-btn-container {
    flex-direction: row;
    justify-content: flex-start;
    gap: var(--space-16);
  }

 

  .cta-btn-container {
    flex-direction: row;
    justify-content: center;
    gap: var(--space-16);
  }

	.nav-btn-container{
		 flex-direction:row;
	}
}

@media(min-width:850px){
	.hamburger-btn {
	    display: none;
    }

  .brand-logo {
    white-space: nowrap;
  }

  .nav-links-container {
    display: flex;
    flex-direction: row;
    align-items: center;
    box-shadow: none;
    height: auto;
    position: static;
    padding: 0;
    background-color: transparent;
	  background: none;
  backdrop-filter: none;
  -webkit-backdrop-filter:none;
	  border-bottom:none;
  }

  

  .nav-btn-container {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    border-top: 0;
    margin: 0;
    padding: 0;
    width: fit-content;
    gap: var(--space-16);
    flex-shrink: 0;
  }
	
  /* 1. Teleport the container to the top middle */
  .mobile-bottom-nav {
    position: fixed; 
    top: 38px; /* Tweak this until it lines up with your Kofy logo */
    left: 50%;
    transform: translate(-50%, -50%);
    
    /* Turn off the mobile styles */
    bottom: auto; 
    width: auto;
    background: transparent;
    backdrop-filter: none;
    box-shadow: none;
    z-index: 1001; /* Ensure it stays above your hero canvas */
  }

  /* 2. Force the links into a horizontal row */
  .nav-link-groups {
    display: flex;
    flex-direction: row; /* This is the magic line that makes it a row */
	  justify-content:space-around;
	  align-items: center;
	  /* Adds breathing room between the links */
  }

  /* 3. Style the individual links for a clean desktop look */
  .nav-links {
    display: flex;
    flex-direction: row; /* Puts the icon and text side-by-side */
    align-items: center;
    gap: 0.5rem;
    color: var(--text-color); /* Make sure this matches your theme */
    text-decoration: none;
    
  }
	

  .hero-heading,
  .hero-paragraph {
    text-align: left;
  }

  .hero-container {
    padding-bottom: clamp(4rem, 8vw, 8rem);
  }

 .contact-description{
		  max-width:none;
	  }

	.resume-btn-container .btn-primary{
		  align-items:center;
		  display:block;
	  }
	  

.footer-container {
    flex-direction: row;
    justify-content: space-between;
    gap: var(--space-32);
	  }
}


@media (min-width: 62rem) {

	  
  .hero-container,
  .about-container {
    flex-direction: row;
    justify-content: space-between;
    gap: clamp(3rem, 8vw, 6rem);
    padding: 0;  
    text-align: left;
	max-width:var(--container-width-xl);
  }


	.hero-img-container,.about-img-container{
		 flex-shrink:0;
	} 
	
}