/*==================================
RESPONSIVE
==================================*/

/* Tablet / small laptop */
@media (max-width:1180px){
  .process-grid{grid-template-columns:repeat(2,1fr);}
  .tech-grid{grid-template-columns:repeat(2,1fr);}
  .record-grid{grid-template-columns:repeat(2,1fr);}
  .sector-grid{grid-template-columns:repeat(2,1fr);}
  .gallery-grid{grid-template-columns:repeat(2,1fr);}
  .timeline-track{grid-template-columns:repeat(3,1fr);row-gap:50px;}
  .timeline-track::before{display:none;}
}

@media (max-width:991px){
  .header{padding:0 20px;}
  .navbar{
    position:fixed;top:0;right:-100%;
    width:min(320px,85%);height:100vh;
    background:var(--navy);
    padding:110px 30px 30px;
    transition:.4s;
    box-shadow:-10px 0 40px rgba(0,0,0,.3);
  }
  .navbar.active{right:0;}
  .navbar ul{flex-direction:column;gap:26px;}
  .menu-btn{display:block;}
  .nav-right .btn.primary{display:none;}

  .hero-content{grid-template-columns:1fr;text-align:center;gap:50px;padding:50px 0;}
  .hero p{margin:0 auto 36px;}
  .hero-buttons{justify-content:center;}

  .about-container{grid-template-columns:1fr;gap:40px;}
  .about-banner{height:320px;}
  .why-grid{grid-template-columns:1fr;}
  .engage-grid{grid-template-columns:1fr;gap:50px;}
  .cta-grid{grid-template-columns:1fr;gap:50px;}
  .cta-left p{margin-left:auto;margin-right:auto;}
}

@media (max-width:768px){
  .topbar{display:none;}
  .header{top:0;}
  .hero{padding-top:88px;}
  .track-record{background-attachment:scroll;}
  .nav{height:72px;}
  .logo{font-size:20px;}
  .navbar{top:0;padding-top:100px;}

  .section{padding:80px 0;}
  .section-heading{margin-bottom:44px;}

  .hero{padding-top:72px;min-height:auto;}
  .hero h1{font-size:38px;}
  .stats{grid-template-columns:1fr 1fr;}

  .process-grid{grid-template-columns:1fr;}
  .tech-grid{grid-template-columns:1fr;}
  .record-grid{grid-template-columns:1fr 1fr;}
  .sector-grid{grid-template-columns:1fr;}
  .gallery-grid{grid-template-columns:1fr;gap:16px;}
  .gallery-item{height:230px;}
  .gallery-item::after{opacity:1;background:linear-gradient(180deg,transparent 50%,rgba(10,24,48,.8) 100%);}
  .gallery-item span{opacity:1;transform:translateY(0);}
  .about-banner{height:260px;border-radius:18px;}
  .about-banner-badge{left:18px;bottom:18px;padding:14px 18px;gap:12px;}
  .about-banner-badge i{width:38px;height:38px;font-size:15px;}
  .about-banner-badge strong{font-size:19px;}
  .about-banner-badge span{font-size:11.5px;}
  .hero-photo{object-position:center 30%;}
  .timeline-track{grid-template-columns:1fr;gap:36px;}
  .timeline-track .tl-step{text-align:left;display:flex;flex-direction:column;padding-left:70px;position:relative;}
  .timeline-track .tl-num{position:absolute;left:0;top:0;margin:0;width:52px;height:52px;font-size:17px;}

  .ongoing-banner{flex-direction:column;align-items:flex-start;}

  .hero-buttons{flex-direction:column;align-items:stretch;}
  .hero-buttons .btn{justify-content:center;}

  .footer-grid{grid-template-columns:1fr;text-align:center;gap:40px;}
  .footer .contact-line{justify-content:center;}
  .footer .logo{justify-content:center;}

  .social-row{justify-content: center;}

  .contact-card{padding:32px 26px;}
  .cta-actions{flex-direction:column;}

  .float-stack{right:16px;bottom:16px;}
  .fab{width:52px;height:52px;font-size:21px;}
  .fab.top{width:42px;height:42px;font-size:16px;}
}

@media (max-width:480px){
  .container{width:92%;}
  .hero h1{font-size:32px;letter-spacing:-1px;}
  .hero-tag{font-size:11px;letter-spacing:2px;}
  .hero p{font-size:15.5px;}
  .hero-photo{object-position:center 25%;}
  .stats{grid-template-columns:1fr 1fr;gap:12px;}
  .stat-card{padding:20px 16px;}
  .stat-card h2{font-size:28px;}

  .section-heading h2{font-size:26px;}
  .about-text{padding:30px 24px;}
  .about-text h3{font-size:22px;}

  .about-banner{height:auto;border-radius:16px;box-shadow:none;}
  .about-banner img{height:200px;}
  .about-banner::after{display:none;}
  .about-banner-badge{
    position:static;margin-top:14px;
    background:var(--navy);border:none;backdrop-filter:none;
    border-radius:12px;justify-content:flex-start;
  }

  .gallery-item{height:200px;}

  .why-card{flex-direction:column;}
  .step-row{flex-direction:column;gap:10px;}

  .record-grid{grid-template-columns:1fr;}
  .record-card h2{font-size:32px;}

  .commercial-panel{padding:32px 24px;}
  .contact-card{padding:26px 20px;}
}