/* ==========================================================================
   Responsive overrides — about-us.aspx, product-listing.aspx (and shared
   header/footer, reused by any page that links this file)
   Breakpoints: 1366, 1200, 1199, 992, 767, 567
   Loaded after assets/style.css to override cleanly.
   ========================================================================== */


img{
    max-width:100%;
}

/* Root cause of the horizontal overflow across this page: style.css defines
   .container with a fixed width:1400px instead of max-width, so it never
   shrinks below 1400px and clips/cuts every section on smaller screens. */
.container{
    width:100%;
    max-width:1400px;
    box-sizing:border-box;
    padding-left:20px;
    padding-right:20px;
}

@media(max-width:567px){
    .container{
        padding-left:16px;
        padding-right:16px;
    }
}

*{
    box-sizing:border-box;
}

/* ---------- Header / Nav (match Default.aspx mobile pill offset) ---------- */

@media(max-width:1366px){
    .site-header-container{
        padding-left:24px;
        padding-right:24px;
    }
}

@media(min-width:992px) and (max-width:1200px){
    .site-nav-links{
        gap:18px;
    }
    .site-nav-link{
        font-size:16px;
    }
    .site-nav-cta{
        padding:12px 22px;
        font-size:12px;
    }
}

/* Tablet + mobile — same floating pill header as Default.aspx */
@media(max-width:991px){
    .site-header{
        position:absolute;
        top:0;
        left:0;
        right:0;
        width:100%;
        z-index:100;
        background:transparent!important;
        border-bottom:none!important;
        box-shadow:none!important;
        backdrop-filter:none!important;
        -webkit-backdrop-filter:none!important;
        padding-top:12px;
    }

    .site-header.is-scrolled{
        background:transparent!important;
        border-bottom:none!important;
        box-shadow:none!important;
    }

    .site-header-container{
        padding-left:16px;
        padding-right:16px;
    }

    .site-header-row{
        height:auto;
        min-height:0;
        padding:6px 10px 6px 14px;
        gap:12px;
        background:rgba(255,255,255,.9);
        border-radius:40px;
        backdrop-filter:blur(12px);
        -webkit-backdrop-filter:blur(12px);
        box-shadow:0 8px 28px rgba(0,0,0,.08);
        border:1px solid rgba(255,255,255,.55);
    }

    .site-logo-img,
    .site-header.is-scrolled .site-logo-img{
        height:40px!important;
        max-width:170px;
        width:auto;
        object-fit:contain;
    }

    .site-nav-toggle{
        display:inline-flex;
        flex-direction:row;
        align-items:center;
        justify-content:center;
        width:auto;
        height:38px;
        padding:8px 14px;
        border-radius:22px;
        background:#242d62;
        border:none;
        cursor:pointer;
        margin-left:auto;
        gap:6px;
        z-index:110;
    }

    .site-menu-btn .site-menu-label,
    .site-menu-btn .site-menu-icon{
        display:inline-flex !important;
        align-items:center;
        width:auto !important;
        height:auto !important;
        background:transparent !important;
        border-radius:0 !important;
        transform:none !important;
        opacity:1 !important;
    }

    .site-menu-label{
        font-size:11px;
        font-weight:700;
        line-height:1;
        letter-spacing:0.04em;
        text-transform:uppercase;
        color:#fff;
        white-space:nowrap;
    }

    .site-menu-icon{
        line-height:0;
    }

    .site-menu-icon svg{
        display:block;
        width:18px;
        height:6px;
        color:#fff;
    }

    .site-header{
        z-index:1000;
    }

    .site-nav-links{
        display:none !important;
    }

    .abt-breadcrumb{
        padding-top:110px;
        padding-bottom:70px;
    }
}

@media(max-width:767px){
    .site-header{
        padding-top:10px;
    }

    .site-header-container{
        padding-left:12px;
        padding-right:12px;
    }

    .site-header-row{
        padding:6px 8px 6px 12px;
        gap:10px;
        border-radius:36px;
    }

    .site-logo-img,
    .site-header.is-scrolled .site-logo-img{
        height:36px!important;
        max-width:min(200px,58vw);
    }

    .site-nav-toggle{
        width:auto;
        height:40px;
        padding:8px 12px;
        border-radius:20px;
    }

    .site-menu-label{
        font-size:11px;
    }

    .abt-breadcrumb{
        padding-top:96px;
        padding-bottom:60px;
    }
}

@media(max-width:567px){
    .site-header{
        padding-top:8px;
    }

    .site-header-container{
        padding-left:10px;
        padding-right:10px;
    }

    .site-header-row{
        padding:5px 8px 5px 12px;
        gap:8px;
        border-radius:32px;
    }

    .site-logo-img,
    .site-header.is-scrolled .site-logo-img{
        height:32px!important;
        max-width:min(180px,62vw);
    }

    .site-nav-toggle{
        width:auto;
        height:38px;
        padding:8px 12px;
        border-radius:18px;
    }

    .site-nav-links{
        display:none !important;
    }

    .abt-breadcrumb{
        padding-top:88px;
        padding-bottom:50px;
    }
}

/* ---------- Breadcrumb / Hero ---------- */

@media(max-width:1199px){
    .abt-breadcrumb h1{
        font-size:44px;
        line-height:52px;
    }
    .abt-purpose-grid {
        grid-template-columns: repeat(2, 1fr);
        }
}

@media(max-width:992px){
    .abt-breadcrumb h1{
        font-size:36px;
        line-height:44px;
    }
    .abt-breadcrumb p{
        font-size:16px;
        line-height:26px;
    }
}

@media(max-width:767px){
    .abt-breadcrumb h1{
        font-size:30px;
        line-height:38px;
    }
}

@media(max-width:567px){
    .abt-breadcrumb h1{
        font-size:26px;
        line-height:34px;
    }
    .abt-breadcrumb-nav{
        font-size:13px;
    }
}

/* ---------- Who We Are (Manufacturing Excellence) ---------- */

@media(max-width:1199px){
    .who-we-are-layout{
        grid-template-columns:minmax(0, 0.95fr) minmax(0, 1.1fr);
        gap:40px;
    }
    .who-we-are-image > img{
        max-height:480px;
    }
    .abt-ceo-badge {
    position: absolute;
    left: 30px;
    }
        .abt-purpose-grid {
        grid-template-columns: repeat(2, 1fr);
        }
}

@media(max-width:992px){
    .who-we-are-layout{
        grid-template-columns:1fr;
        gap:32px;
    }
    .who-we-are-image{
        height:auto;
    }
    .who-we-are-image > img{
        max-height:400px;
    }
    .who-we-are-content h3{
        font-size:30px;
        line-height:38px;
    }
}

@media(max-width:767px){
    .who-we-are-section{
        padding:60px 0;
    }
    .who-we-are-image > img{
        max-height:100%;
    }
    .who-we-are-content h3{
        font-size:26px;
        line-height:34px;
    }
    .who-we-are-content p{
        font-size:15px;
        line-height:26px;
    }
}

@media(max-width:567px){
    .who-we-are-image > img{
        max-height:100%;
    }
    .who-we-are-content h3{
        font-size:22px;
        line-height:30px;
    }
}

/* ---------- CEO Section ---------- */

@media(max-width:1199px){
    .abt-ceo-wrapper{
        gap:40px;
    }
}

@media(max-width:992px){
    .abt-ceo-wrapper{
        grid-template-columns:1fr;
        gap:36px;
    }
    .abt-ceo-image{
        order:-1;
    }
    .abt-ceo-sign h4 {
        font-size: 18px;
        margin-top: 20px;
        color: #0A192F;
        margin-bottom: 8px;
    }
}

@media(max-width:767px){
    .abt-ceo-section{
        padding-bottom:60px;
        padding-top:0px;
    }
    .abt-ceo-content h2{
        font-size:28px;
        line-height:36px;
    }
    .abt-ceo-photo{
        height:320px;
    }
    .abt-ceo-photo img{
        height:100%;
        object-fit:cover;
    }
}

@media(max-width:567px){
    .abt-ceo-content h2{
        font-size:24px;
        line-height:32px;
    }
    .abt-ceo-badge{
        left:16px;
        bottom:16px;
        padding:12px 18px;
    }
    .abt-ceo-photo{
        height:260px;
    }
    .abt-ceo-photo img{
        height:100%;
    }
}

/* ---------- Vision / Mission (Purpose) ---------- */

@media(max-width:992px){
    .abt-purpose-grid{
        grid-template-columns:1fr;
        gap:24px;
    }
}

@media(max-width:767px){
    .abt-purpose-section{
        padding:60px 0;
    }
    .abt-heading h2{
        font-size:28px;
        line-height:36px;
    }
    .abt-heading p{
        font-size:15px;
        line-height:26px;
    }
    .abt-purpose-grid{
        grid-template-columns:1fr;
        gap:24px;
    }
}

@media(max-width:567px){
    .abt-purpose-card{
        padding:28px 20px;
    }
    .abt-heading h2{
        font-size:24px;
        line-height:32px;
    }
}

/* ---------- Quality & Certification (Swiper) ---------- */

@media(max-width:992px){
    .certification-card{
        height:360px;
    }
}

@media(max-width:767px){
    .quality-certification-section{
        padding:60px 0;
    }
    .cert-nav{
        display:none;
    }
    .certification-card{
        height:550px;
        padding:16px;
    }
}

@media(max-width:567px){
    .certification-card{
        height:450px;
        padding:14px;
    }
}

/* ---------- Quality Testing Timeline ---------- */

/* style.css's mobile rule (.qt-timeline-number{right:24px; left:auto!important})
   loses to the higher-specificity desktop rule .qt-right-card .qt-timeline-number
   {right:auto} for right-side cards — right stays auto while left is forced
   auto too, so the badge has no edge to pin to and floats out of place.
   Pin both sides explicitly on the same selector to win. */
@media(max-width:991px){
    .qt-timeline-number,
    .qt-right-card .qt-timeline-number{
        top:24px!important;
        right:24px!important;
        left:auto!important;
        transform:none!important;
    }
}

@media(max-width:767px){
    .qt-timeline-section{
        padding:60px 0;
    }
    .qt-timeline-content h4{
        font-size:18px;
    }
}

/* ---------- Industries ---------- */

@media(max-width:1199px){
    .industries-section{
        height:520px;
    }

    .industriesSwiper .industry-card{
        height:420px;
    }

    .industriesSwiper .industry-card h3{
        font-size:30px;
        line-height:36px;
    }
}

/* Below 991px cards stack. The desktop design overlays white text directly
   on the photo using a gradient that's dark at the bottom / light at the
   top (built for bottom-anchored text). A stacked mobile card can't rely on
   that gradient, so instead of overlaying text on the image at all, each
   card becomes: photo on top, solid-background caption band below — this
   keeps the title/paragraph readable no matter how bright the photo is. */
@media(max-width:991px){
    .industries-wrapper{
        padding:60px 16px;
    }

    .industries-nav{
        display:none;
    }

    .industriesSwiper .industry-card{
        height:380px;
    }

    .industriesSwiper .industry-card h3{
        font-size:26px;
        line-height:32px;
    }

    .industriesSwiper .industry-overlay{
        padding:28px;
    }

    .industriesSwiper .industry-overlay p{
        font-size:16px;
        line-height:26px;
    }

    .industries-section{
        flex-direction:column;
        height:auto;
        gap:16px;
    }

    .industries-section .industry-card,
    .industries-section .industry-card.active{
        width:100%!important;
        height:auto!important;
        display:flex;
        flex-direction:column;
        flex:none;
    }

    .industries-section .industry-card img{
        position:static;
        width:100%;
        height:280px;
        object-fit:cover;
    }

    .industries-section .industry-card::before{
        display:none;
    }

    .industries-section .industry-overlay{
        position:static;
        inset:auto;
        padding:22px 22px 24px;
        background:#0A192F;
    }

    .industries-section .industry-icon{
        position:static;
        margin-bottom:14px;
        width:40px;
        height:40px;
        font-size:16px;
        transform:none;
    }

    .industries-section .industry-overlay h3,
    .industries-section .industry-card:not(.active) h3{
        position:static!important;
        left:auto!important;
        bottom:auto!important;
        transform:none!important;
        writing-mode:initial!important;
        white-space:normal!important;
        text-align:left;
        font-size:22px;
        line-height:1.25;
        margin-bottom:10px;
    }

    .industries-section .industry-overlay p,
    .industries-section .industry-card:not(.active) p{
        display:block!important;
        opacity:1!important;
        transform:none!important;
        position:static;
        max-width:none;
        color:rgba(255,255,255,.75);
        font-size:15px;
        line-height:24px;
    }

    .industries-section .industry-overlay a{
        opacity:1;
        transform:none;
        position:static;
    }
}

@media(max-width:768px){
    .industry-card:not(.active) h3,
    .industries-section .industry-card:not(.active) h3,
    .industries-section .industry-overlay h3,
    .industriesSwiper .industry-card:not(.active) h3,
    .industriesSwiper .industry-card h3{
        font-size:22px;
        font-weight:600;
        letter-spacing:-0.5px;
        position:absolute;
        bottom:120px;
        left:5%;
        white-space:nowrap;
        margin:0;
        transform:none;
        writing-mode:initial;
        line-height:normal;
    }

    .industriesSwiper .industry-overlay{
        position:absolute;
        inset:0;
        padding:0;
        background:transparent;
    }

    .industriesSwiper .industry-card::before{
        display:block;
    }
}

@media(max-width:567px){
    .industriesSwiper .industry-card{
        height:340px;
    }

    .industriesSwiper .industry-card h3{
        font-size:22px;
        line-height:28px;
    }

    .industriesSwiper .industry-overlay{
        padding:22px;
    }

    .industries-section .industry-card img{
        height:220px;
    }
    .industries-section .industry-overlay{
        padding:18px 18px 20px;
    }
    .industries-section .industry-overlay h3{
        font-size:19px;
    }
    .industries-section .industry-overlay p{
        font-size:14px;
        line-height:22px;
    }
}

/* ---------- Disable hover-only motion on touch/mobile ----------
   A tap on a touch device fires :hover with no matching "unhover" event
   until the user taps elsewhere, so scale/translateY hover effects built
   for desktop mouse-over get stuck mid-transform on phones. Below 991px
   (and on any touch pointer) these are neutralized site-wide. */
@media(max-width:991px), (hover:none){
    .industry-card:hover img,
    .who-we-are-image:hover img,
    .abt-ceo-photo:hover img,
    .abt-purpose-card:hover,
    .certification-card:hover,
    .qt-timeline-card:hover,
    .industry-item:hover,
    .industry-item:hover img,
    .premium-card:hover,
    .bls-product-card:hover,
    .bls-gallery-card:hover,
    .ei-card:hover,
    .scroll-top-btn:hover,
    .abt-infra-card:hover,
    .abt-infra-card:hover .abt-infra-image img,
    .abt-card:hover,
    .stack-card:hover img,
    .bls-stack-card:hover,
    .bls-trust-pill:hover,
    .industry-pill:hover,
    .client-logo-card:hover img{
        transform:none!important;
        box-shadow:revert;
    }
}
/* .bls-highlights-row is display:flex in style.css (not grid) — override
   with flex-wrap/flex-basis, not grid-template-columns, or items keep
   their wide intrinsic basis and overflow the viewport. */

@media(max-width:1199px){
    .bls-highlights-row{
        flex-wrap:wrap;
        row-gap:40px;
    }
    .bls-highlight-item{
        flex:0 0 50%;
        max-width:50%;
    }
    .bls-highlight-item::after{
        display:none!important;
    }
}

@media(max-width:767px){
    .bls-highlights-section{
        padding:60px 0;
    }

    .bls-highlight-item{
        flex:0 0 100%;
        max-width:100%;
    }
}

@media(max-width:567px){
    .bls-highlight-icon{
        width:48px;
        height:48px;
        font-size:18px;
    }
    .bls-highlights-row p{
        font-size:14px;
        line-height:22px;
    }
}

/* ---------- Footer ---------- */

@media(max-width:992px){
    .footer-grid{
        grid-template-columns:repeat(2,1fr);
        gap:32px;
    }
}

@media(max-width:567px){
    .site-footer-inner{
        padding:48px 20px 24px;
    }
    .footer-grid{
        grid-template-columns:1fr;
        gap:28px;
    }
    .footer-bottom-inner{
        flex-direction:column;
        gap:12px;
        text-align:center;
    }
}

/* ---------- Generic section heading (shared) ---------- */

@media(max-width:767px){
    .section-heading h2{
        font-size:28px;
        line-height:36px;
    }
    .section-heading p{
        font-size:15px;
        line-height:26px;
    }
}

@media(max-width:567px){
    .section-heading h2{
        font-size:24px;
        line-height:32px;
    }
}

/* ---------- Product Listing page ---------- */

/* Grid tracks default to min-width:auto, so a track can refuse to shrink
   below its content's intrinsic size and push the row wider than the
   viewport. min-width:0 lets both columns shrink and wrap normally. */
.bls-product-row > .bls-product-image,
.bls-product-row > .bls-product-content{
    min-width:0;
}

@media(max-width:1366px){
    .bls-products-page{
        padding:90px 0;
    }
}

@media(max-width:1199px){
    .bls-product-row{
        gap:50px;
    }
    .bls-product-content h3{
        font-size:26px;
    }
}

@media(max-width:992px){
    .bls-products-page{
        padding:70px 0;
    }
    .bls-product-row,
    .bls-product-row.reverse{
        grid-template-columns:1fr;
        gap:40px;
        margin-bottom:50px;
    }
    .bls-product-row.reverse .bls-product-image,
    .bls-product-row.reverse .bls-product-content{
        order:initial;
    }
    .bls-product-image{
        padding:30px;
        min-height:auto;
    }
}

@media(max-width:767px){
    .bls-products-page{
        padding:60px 0;
    }
    .bls-product-row,
    .bls-product-row.reverse{
        margin-bottom:56px;
    }
    .bls-product-image{
        padding:24px;
        min-height:auto;
    }
    .bls-product-image img{
        max-height:280px;
    }
    .bls-product-content h3{
        font-size:24px;
        line-height:1.25;
    }
    .bls-product-content p{
        font-size:16px;
        line-height:1.7;
    }
    .bls-feature-list{
        gap:10px;
    }
    .bls-feature-list span{
        padding:9px 16px;
        font-size:14px;
    }
    .bls-btn{
        padding:14px 30px;
    }
}

@media(max-width:567px){
    .bls-product-image{
        padding:18px;
        border-radius:20px;
    }
    .bls-product-image img{
        max-height:220px;
    }
    .bls-product-tag{
        padding:8px 16px;
        font-size:12px;
    }
    .bls-product-content h3{
        font-size:21px;
    }
    .bls-product-content p{
        font-size:15px;
        line-height:1.6;
    }
    .bls-feature-list{
        gap:8px;
        margin-bottom:20px;
    }
    .bls-feature-list span{
        padding:7px 14px;
        font-size:13px;
    }
    .bls-btn{
        width:100%;
        padding:14px 20px;
    }
}

/* ---------- Product detail pages (container-liner, flexitank, fibc, etc.) ---------- */

/* Specs sidebar removed — detail content stays full width (col-12). */
.ftd-overview-grid-main,
.ftd-overview-spec-section .row{
    display:block;
    
}

.ftd-overview-left{
    width:100%;
    max-width:100%;
}

/* style.css hardcodes .ftd-overview-img-container to width:800px;height:400px
   — a fixed pixel box that overflows any viewport under 800px wide. Make it
   fluid at every breakpoint below that. */
.ftd-overview-img-container{
    width:100%;
    max-width:100%;
    height:auto;
    aspect-ratio:2/1;
    margin-bottom:30px
}

.ftd-overview-img-container img{
    width:100%;
    height:100%;
    object-fit:contain;
}

@media(max-width:1366px){
    .ftd-overview-spec-section{
        padding:80px 0;
    }
}

@media(max-width:1199px){
    .ftd-overview-grid-main{
        gap:40px;
    }
    .ftd-overview-left h2{
        font-size:32px;
        line-height:38px;
    }
}

@media(max-width:992px){
    .ftd-overview-spec-section{
        padding:60px 0;
    }
}

@media(max-width:767px){
    .ftd-overview-left h2{
        font-size:26px;
        line-height:32px;
    }
    .ftd-overview-left>p{
        font-size:16px;
        line-height:1.8;
    }
    .ftd-feature-card{
        padding:26px 18px;
    }
    .ftd-spec-card th,
    .ftd-spec-card td{
        padding:14px 18px;
        font-size:14px;
    }
    .ftd-spec-header h3{
        font-size:20px;
    }
}

@media(max-width:567px){
    .ftd-overview-left h2{
        font-size:22px;
        line-height:28px;
    }
    .ftd-feature-grid{
        gap:14px;
    }
    .ftd-spec-card th,
    .ftd-spec-card td{
        padding:12px 14px;
        font-size:13px;
    }
}

/* ---------- Contact Us / Career & Contacts pages ---------- */

@media(max-width:1366px){
    .contact-getintouch-section{
        padding:80px 0;
    }
}

@media(max-width:1200px){
    .gt-layout{
        gap:50px;
    }
    .gt-layout.contacts-gt-row{
        gap:50px;
    }
    .gt-info h2{
        font-size:36px;
        line-height:44px;
    }
    .gt-form-card{
        padding:36px;
    }
    .site-header.is-scrolled .site-logo-img {
        height: 45px !important;
    }
}

@media(max-width:992px){
    .contact-getintouch-section{
        padding:60px 0;
    }
    .gt-layout{
        grid-template-columns:1fr;
        gap:40px;
    }
    .gt-layout.contacts-gt-row{
        grid-template-columns:1fr;
        gap:40px;
    }
    .gt-map{
        height:380px;
    }
    .gt-detail-item{
        gap:16px;
    }
}

@media(max-width:767px){
    .gt-info h2{
        font-size:28px;
        line-height:36px;
    }
    .gt-info>p{
        font-size:15px;
        line-height:1.8;
    }
    .gt-form-card{
        padding:28px;
    }
    .gt-form-card h3{
        font-size:22px;
    }
    .gt-detail-icon{
        width:48px;
        height:48px;
        font-size:16px;
    }
    .gt-detail-text h4{
        font-size:17px;
    }
    .gt-cta-btn{
        width:100%;
        justify-content:center;
    }
    .gt-map-full{
        height:280px;
    }
}

@media(max-width:567px){
    .contact-getintouch-section{
        padding:50px 0;
    }
    .gt-info h2{
        font-size:24px;
        line-height:32px;
    }
    .gt-map{
        height:260px;
    }
    .gt-form-card{
        padding:22px;
    }
    .gt-form-card h3{
        font-size:20px;
    }
    .gt-form-submit{
        width:100%;
        justify-content:center;
    }
}