/*=========================================
HEADER & NAVIGATION RESPONSIVE
=========================================*/

/* Large desktop refinement */
@media(max-width:1199px){

    .navbar-nav .nav-link{
        font-size:14px;
        margin-left:16px;
    }

    .navbar-brand img{
        height:72px;
    }

}

/* Tablet & below – collapse to mobile menu */
@media(max-width:991px){

    .navbar{
        padding:10px 0;
        min-height:auto;
    }

    .navbar-brand img{
        height:64px;
    }

    .navbar-collapse{
        background:#ffffff;
        margin-top:12px;
        padding:16px 20px;
        border-radius:10px;
        border:1px solid rgba(11,47,91,.08);
        box-shadow:0 12px 30px rgba(0,0,0,.08);
    }

    .navbar-nav{
        align-items:stretch !important;
        gap:2px;
    }

    .navbar-nav .nav-item{
        width:100%;
    }

    .navbar-nav .nav-link{
        display:block;
        margin:0;
        padding:12px 4px !important;
        font-size:15px;
        border-bottom:1px solid rgba(11,47,91,.06);
    }

    .navbar-nav .nav-item:last-child .nav-link{
        border-bottom:none;
    }

    .navbar-nav .nav-link::after{
        display:none;
    }

    .navbar-nav .quote-btn{
        display:inline-block;
        width:auto;
        margin-top:10px;
        text-align:center;
    }

}

/* Small tablet & mobile */
@media(max-width:767px){

    .navbar-brand img{
        height:56px;
    }

    .navbar{
        padding:8px 0;
    }

}

/* Small mobile */
@media(max-width:480px){

    .navbar-brand img{
        height:48px;
    }

    .navbar-toggler{
        padding:4px 8px;
    }

    .navbar-nav .nav-link{
        font-size:14px;
        padding:11px 4px !important;
    }

}


@media (max-width:768px){

    .top-bar{
        display:none;
    }

}

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

@media(max-width:1199px){

    .hero{
        padding:80px 0;
    }

    .hero h1{
        font-size:48px;
    }

}

@media(max-width:991px){

    .hero{
        text-align:center;
        padding:70px 0 60px;
    }

    .hero-content{
        max-width:100%;
    }

    .hero h1{
        font-size:40px;
    }

    .hero p{
        margin-left:auto;
        margin-right:auto;
    }

    .hero-buttons{
        justify-content:center;
        flex-wrap:wrap;
    }

    .hero-image{
        margin-top:40px;
        max-width:520px;
        margin-left:auto;
        margin-right:auto;
    }

}

@media(max-width:767px){

    .hero{
        padding:60px 0 50px;
    }

    .hero-subtitle{
        font-size:12px;
        padding:7px 16px;
        letter-spacing:1.5px;
        margin-bottom:20px;
    }

    .hero h1{
        font-size:34px;
        line-height:1.2;
        margin-bottom:18px;
    }

    .hero p{
        font-size:15px;
        line-height:1.75;
        margin-bottom:28px;
    }

    .hero-buttons{
        gap:12px;
    }

    .hero-btn,
    .hero-btn-outline{
        padding:12px 24px;
        font-size:14.5px;
    }

    .hero-image{
        margin-top:32px;
        max-width:420px;
    }

}

@media(max-width:480px){

    .hero h1{
        font-size:28px;
    }

    .hero p{
        font-size:14.5px;
    }

    .hero-btn,
    .hero-btn-outline{
        width:100%;
        padding:12px 20px;
    }

}

/*=========================================
CONTENT SECTIONS RESPONSIVE
About · Why Choose Us · Services · Industries
Process · Clients · Testimonials · CTA · Footer
=========================================*/

/* --- Large desktop refinements --- */
@media(max-width:1199px){

    .section-title,
    .about-section h2{
        font-size:36px;
    }

    .about-section,
    .why-section,
    .services-section,
    .industries-section,
    .process-section,
    .clients-section,
    .testimonial-section,
    .cta-section{
        padding:80px 0;
    }

    .cta-box h2{
        font-size:38px;
    }

    .cta-box{
        padding:60px 40px;
    }

    .client-grid{
        grid-template-columns:repeat(4,1fr);
    }

}

/* --- Tablets --- */
@media(max-width:991px){

    .section-title,
    .about-section h2{
        font-size:32px;
    }

    .about-section,
    .why-section,
    .services-section,
    .industries-section,
    .process-section,
    .clients-section,
    .testimonial-section,
    .cta-section{
        padding:70px 0;
    }

    /* About – stack image and content, keep experience-box safely inside */
    .about-image{
        margin-bottom:40px;
        max-width:560px;
        margin-left:auto;
        margin-right:auto;
    }

    .about-features{
        margin-top:24px;
    }

    .experience-box{
        right:0;
        bottom:20px;
        padding:20px 24px;
    }

    .experience-box h2{
        font-size:28px;
    }

    /* Cards stack to 2 columns via bootstrap; tighten padding */
    .why-box,
    .service-card,
    .industry-card,
    .process-card,
    .process-box,
    .testimonial-card,
    .vision-box,
    .why-card,
    .value-box,
    .career-box{
        padding:34px 24px;
    }

    .cta-box{
        padding:55px 32px;
    }

    .cta-box h2{
        font-size:34px;
    }

    .cta-buttons{
        gap:14px;
    }

    /* Clients grid → 3 columns */
    .client-grid{
        grid-template-columns:repeat(3,1fr);
        gap:20px;
    }

    /* Industries image cards */
    .industry-image-card img{
        height:240px;
    }

    .industry-overlay h4{
        font-size:22px;
    }

    /* Footer – stack columns nicely */
    .footer{
        padding:60px 0 20px;
    }

    .footer > .container > .row > [class*="col-"]{
        margin-bottom:34px;
    }

    .footer-logo{
        height:70px;
    }

}

/* --- Mobile landscape / small tablets --- */
@media(max-width:767px){

    .section-title,
    .about-section h2{
        font-size:28px;
    }

    .section-subtitle{
        font-size:12px;
        letter-spacing:1.5px;
    }

    .about-section,
    .why-section,
    .services-section,
    .industries-section,
    .process-section,
    .clients-section,
    .testimonial-section,
    .cta-section,
    .contact-section,
    .about-intro,
    .vision-section,
    .values-section,
    .strength-section,
    .why-about,
    .why-industries,
    .careers-section,
    .application-section,
    .gallery-section{
        padding:60px 0;
    }

    .about-section p,
    .about-intro p,
    .why-box p,
    .service-card p,
    .industry-card p,
    .process-card p,
    .process-box p,
    .testimonial-card p{
        font-size:14.5px;
        line-height:1.75;
    }

    .feature-item{
        font-size:15px;
    }

    .experience-box{
        position:static;
        margin:20px auto 0;
        display:inline-block;
    }

    /* CTA compresses on phones */
    .cta-box{
        padding:44px 24px;
        border-radius:12px;
    }

    .cta-box h2{
        font-size:26px;
        line-height:1.25;
        margin-bottom:18px;
    }

    .cta-box p{
        font-size:14.5px;
        margin-bottom:28px;
    }

    .cta-buttons{
        gap:12px;
    }

    .cta-call,
    .cta-quote{
        padding:13px 26px;
        font-size:14.5px;
    }

    .cta-features{
        gap:16px 22px;
        margin-top:30px;
    }

    /* Client grid → 2 columns */
    .client-grid{
        grid-template-columns:repeat(2,1fr);
        gap:16px;
        margin-top:40px;
    }

    .client-box{
        height:110px;
        padding:20px;
    }

    .client-box img{
        width:100px;
    }

    /* Industry image card */
    .industry-image-card img{
        height:210px;
    }

    .industry-overlay{
        padding:18px;
    }

    .industry-overlay h4{
        font-size:20px;
    }

    /* Testimonial */
    .testimonial-card{
        padding:30px 22px;
    }

    .testimonial-card p{
        line-height:1.75;
    }

    /* Process */
    .step-number,
    .process-number{
        width:36px;
        height:36px;
        top:14px;
        right:14px;
        font-size:14px;
    }

    /* Footer */
    .footer{
        padding:50px 0 18px;
        text-align:left;
    }

    .footer h4{
        margin-bottom:18px;
        font-size:17px;
    }

    .footer-logo{
        height:60px;
    }

    .footer-social a{
        width:40px;
        height:40px;
    }

    .footer hr{
        margin:32px 0 14px;
    }

    .footer-bottom{
        font-size:13.5px;
    }

}

/* --- Small mobile --- */
@media(max-width:480px){

    .section-title,
    .about-section h2{
        font-size:24px;
        line-height:1.25;
    }

    .why-box,
    .service-card,
    .industry-card,
    .process-card,
    .process-box,
    .testimonial-card,
    .vision-box,
    .why-card,
    .value-box,
    .career-box{
        padding:28px 20px;
    }

    .why-box i,
    .service-card i,
    .industry-card i,
    .process-card i,
    .process-box i{
        font-size:40px;
        margin-bottom:16px;
    }

    .why-box h4,
    .service-card h4,
    .industry-card h4,
    .process-card h4,
    .process-box h4,
    .testimonial-card h5{
        font-size:17px;
    }

    /* Client grid single column */
    .client-grid{
        grid-template-columns:repeat(2,1fr);
        gap:14px;
    }

    .cta-buttons{
        flex-direction:column;
        align-items:stretch;
    }

    .cta-call,
    .cta-quote{
        width:100%;
    }

}

/*=========================================
BUG FIXES – FINAL PRODUCTION PASS
=========================================*/

/* Fix 1: Ensure [data-aos] elements never remain invisible on mobile.
   On narrow screens AOS animations are dropped so content is visible
   immediately (no scroll trigger needed). Desktop keeps full animation. */
@media (max-width:767px){
    [data-aos]{
        opacity:1 !important;
        transform:none !important;
        transition:none !important;
    }
}

/* Fix 2: Prevent circular icon distortion on mobile.
   Icons inside flex containers with fixed w/h but no flex-shrink can
   compress into ovals when siblings claim more space. */
.contact-info > p > i,
.contact-item i,
.footer-social a,
.step-number,
.process-number,
.whatsapp-float,
.call-float,
#scrollTopBtn{
    flex-shrink:0;
    aspect-ratio:1 / 1;
}


/*=========================================
ABOUT FEATURES – responsive grid
=========================================*/

/* Mobile: stack feature items into a single column with proper spacing */
@media (max-width:575px){
    .about-features{
        grid-template-columns:1fr;
        row-gap:12px;
    }
}