@media(max-width:1024px){
  .services-grid{grid-template-columns:repeat(3,1fr)}
  .project-grid{grid-template-columns:repeat(2,1fr)}
  .why-grid,.tc-grid{grid-template-columns:1fr}
  .why-items{grid-template-columns:repeat(3,1fr)}
}

@media(max-width:768px){
  .topbar-inner{flex-direction:column;gap:5px;text-align:center}
  .menu-toggle{display:block}
  .nav{position:absolute;top:100%;left:0;width:100%;background:#050505;display:none;flex-direction:column;align-items:flex-start;padding:20px;border-top:1px solid rgba(255,255,255,.12)}
  .nav.active{display:flex}
  .nav a,.nav button{width:100%;text-align:left}
  .logo img{width:54px;height:54px}
  .logo strong{font-size:20px}

  .hero{height:620px}
  .hero-one{background-image:url('https://images.unsplash.com/photo-1600566752355-35792bedcfea?auto=format&fit=crop&w=900&q=80')}
  .hero-two{background-image:url('https://images.unsplash.com/photo-1600607687920-4e2a09cf159d?auto=format&fit=crop&w=900&q=80')}
  .slide:before{background:linear-gradient(180deg,rgba(0,0,0,.82),rgba(0,0,0,.5),rgba(0,0,0,.9))}
  .hero-content{margin:auto;width:92%;text-align:left}
  .hero h1{font-size:36px}
  .slider-arrow{width:38px;height:38px;font-size:28px}
  .prev{left:12px}.next{right:12px}

  .about-grid,.stats{grid-template-columns:1fr}
  .stats{grid-column:auto}
  .section-head{display:block}
  .section-head .btn-small{margin-top:16px}
  .services-grid{grid-template-columns:1fr}
  .service-card img{height:190px}
  .project-grid{grid-template-columns:1fr}
  .why-items{grid-template-columns:1fr}
  .process-grid{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr}
  .about-content h2,.section-head h2,.why h2,.process h2,.testimonial h2{font-size:29px}
}

@media(max-width:480px){
  .hero h1{font-size:31px}
  .hero-actions{
  display:flex;
  flex-direction:row;
  gap:10px;
}

.hero-actions a,
.hero-actions button{
  width:auto;
  flex:1;
  text-align:center;
  padding:12px 10px;
  font-size:13px;
}
  .section{padding:55px 0}
}

@media(max-width:1024px){
  .project-track .project{min-width:calc(50% - 9px)}
}
@media(max-width:768px){
  .nav-dropdown{width:100%}
  .dropdown-menu{
  position:static;
  width:100%;
  display:none;
  background:#11161b;
  margin-top:8px;
}

.nav-dropdown.open .dropdown-menu{
  display:block;
}
  .project-track .project{min-width:100%}
}
@media(max-width:768px){

  .topbar{
    display:none !important;
  }

  .nav-dropdown .dropdown-menu{
    display:none !important;
  }

  .nav-dropdown.open .dropdown-menu{
    display:block !important;
  }

  .nav-dropdown .dropdown-link{
    width:100%;
    display:flex !important;
    justify-content:space-between;
    align-items:center;
  }

  .nav-dropdown.open .dropdown-link span{
    transform:rotate(180deg);
  }
}


/* Final mobile menu fix */
@media(max-width:768px){
  .topbar{
    display:none !important;
  }

  .nav{
    max-height: calc(100vh - 80px);
    overflow-y: auto;
  }

  .nav-dropdown{
    width:100% !important;
  }

  .nav-dropdown .dropdown-link{
    width:100%;
    display:flex !important;
    justify-content:space-between;
    align-items:center;
  }

  .nav-dropdown .dropdown-menu{
    display:none !important;
    position:static !important;
    width:100% !important;
    background:#11161b;
    margin-top:8px;
  }

  .nav-dropdown.open .dropdown-menu{
    display:block !important;
  }

  .nav-dropdown.open .dropdown-link span{
    transform:rotate(180deg);
  }
}


/* ===== Final mobile overflow fix ===== */
@media(max-width:768px){
  html, body{
    width:100% !important;
    max-width:100vw !important;
    overflow-x:hidden !important;
  }

  .container{
    width:92% !important;
    max-width:92% !important;
    overflow:hidden;
  }

  .hero-content{
    width:92% !important;
    max-width:92% !important;
    margin:0 auto !important;
  }

  .nav,
  .dropdown-menu,
  .project-slider,
  .project-track,
  .footer,
  .footer-grid{
    max-width:100% !important;
    overflow-x:hidden !important;
  }

  .project-track .project{
    min-width:100% !important;
    max-width:100% !important;
  }

  .copyright-flex{
    flex-direction:column !important;
    text-align:center !important;
  }

  .copyright-flex span{
    white-space:normal !important;
  }
}