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

.right-side {
    flex: 0 !important;
}
@media (max-width: 991px) {
    body , html{
    overflow-x:hidden;
}
    /* Force 3 columns in 1 row using Grid */
    .top-bar-inner {
        display: grid !important;
        grid-template-columns: 1fr 2fr 1fr !important;   /* Logo | Tagline | Right */
        align-items: center !important;
        gap: 10px !important;
    }

    /* Logo - Column 1 */
    .top-bar .logo {
        justify-self: start;
        margin-bottom:0px !important;
    }
    
    .top-bar .logo img {
        height: 48px !important;
        max-width: 130px;
    }

    /* Tagline - Column 2 */
    .top-bar .tagline {
        justify-self: center;
        padding: 0 5px !important;
    }
    
    .top-bar .tagline p {
        font-size: 0.82rem !important;
        line-height: 1.25;
        margin: 0;
    }

    /* Right Side - Column 3 */
    .top-bar .right-side {
        justify-self: end;
        gap: 8px;
    }

    .fa-linkedin{
        display: none !important;
    }

    /* Hamburger */
    #openMenuBtn {
        font-size: 2rem !important;
        padding: 4px !important;
    }

    /* Reduce overall padding */
    .top-bar {
        padding-top: 10px !important;
        padding-bottom: 10px !important;
    }
}

/* Very small phones */
@media (max-width: 576px) {
    .top-bar-inner {
        grid-template-columns: 1fr 1.8fr 0.8fr !important;
        gap: 8px;
    }
    
    .top-bar .logo img {
        height: 44px !important;
    }
    
    .top-bar .tagline p {
        font-size: 0.76rem !important;
    }
}



/* ====================== MOBILE SPECIFIC ====================== */
@media (max-width: 991px) {
    .menu-link {
        font-size: 25px !important;        /* Smaller text on mobile */
        padding: 3px 10px;
    }
    
    .menu-list li {
        margin: 0px 0 !important;
    }
    
    .menu-content {
        padding: 25px 15px 40px;
    }
    
    .close-btn {
        top: -18px;
        right: 18px;
        font-size: 15px;
    }
}

/* Very Small Screens */
@media (max-width: 480px) {
    .menu-link {
        font-size: 25px !important;
        padding: 5px 8px;
    }
    
    .menu-content {
        padding: 20px 15px 50px;
    }
}
.main-mobile{
    display:none;
}
.faster-mobile-12{
    display:none !important;
}


@media(max-width:767px){
.main-mobile {
    display: flex !important;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 20px !important;
    gap: 25px;
}
  .xg-content h1{
        font-size: 40px !important;
    }
.main-mobile-h2 {
    font-size: 48px !important;
    line-height: 52px !important;
    color: black !important;
    text-align: center !important;
    font-weight: 600;
    margin: 0 0 10px 0;
}

.mobile-hoodie-img {
    width: 100% !important;
    height: auto !important;
    max-width: 420px !important;
    display: block;
    border-radius: 12px;
    will-change: transform;
    transform-origin: center center;
}
.faster-mobile-12 {
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        width: 100%;
    }

    /* Stronger selector so it wins */
    h6.faster-mobile-h2 {
        color: #1e4890 !important;
        font-size: 24px !important;
        font-weight: 600 !important;
        margin: 0 !important;
        text-align: center;
        white-space: nowrap;
    }
.hero{
    display:none !important;
}
.faster-mobile h6{
            font-size: 50px !important;
            font-weight: 600 !important;
            text-transform: uppercase !important;
            color: white !important;
            -webkit-text-stroke: 3.5px #2150a0 !important;
            letter-spacing: 0px !important;
            white-space: nowrap !important;
            display: inline-block !important;
            transform: translateX(150%) !important;
            transition: transform 1s cubic-bezier(0.4, 0, 0.2, 1) !important;
            line-height:80px !important;
        }
        .faster-mobile h6{
            transform: translateX(0) !important;
        }
         .faster-mobile {
            background: transparent !important;
            padding-top: 20px !important;
            position: relative !important;
            overflow: hidden !important;
            border-top: 1px solid #e2e8f0 !important;
            border-bottom: 1px solid #e2e8f0 !important;
        }
.faster-text {
            font-size: 45px !important;
            font-weight: 800 !important;
            text-transform: uppercase;
            color: #ffffff;
            -webkit-text-stroke: 1.5px #2150a0 !important;
            letter-spacing: 0px;
                        white-space: normal !important;

            display: inline-block;
            transform: translateX(150%);
            transition: transform 1s cubic-bezier(0.4, 0, 0.2, 1);
            line-height:60px !important;
        }
        
/*   .products-section{*/
/*    position: relative !important;*/
/*    height: 540px !important;*/
/*}*/

/*.products-sticky-wrapper{*/
/*    position: sticky !important;*/
/*    top: 0 !important;*/
/*    height: 500px !important;*/
/*    overflow: hidden !important;*/
/*    background:transparent !important;*/
/*}*/

/*.slider-wrapper{*/
/*    width: 100% !important;*/
/*    height: 500px !important;*/
/*    overflow: hidden !important;*/
/*    object-fit: cover;*/
    
/*}*/

/*.products-slider{*/
/*    display: flex !important;*/
/*    align-items: center !important;*/
/*    height: 100% !important;*/
/*    will-change: transform !important;*/
/*    object-fit: cover;*/

/*}*/
/*.products-header h2{*/
/*    font-size: 25px  !important;*/
/*            font-weight: 800 !important;*/
/*}*/


.who-we-are-section{
    position: relative !important;
    height: 340px !important;
}

.who-sticky-wrapper{
    position: sticky !important;
    top: 0 !important;
    min-height: 300px !important;   /* IMPORTANT instead of height */
    background: transparent !important;
    overflow: visible !important;   /* IMPORTANT */
}

.who-we-are-section .container{
    height: 340px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
}

.who-title{
    font-size: 40px !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing:1px !important;
    color: black !important;
    line-height: 80px !important;
    margin-top: 20px !important;
    margin-bottom: 0px !important;
    z-index: 2 !important;
}

.company-image{
    width: 100% !important;
    max-width: 500px !important;
    height: auto !important;        /* ensure no cropping */
    object-fit: contain !important;
    opacity: 1 !important;
    transition: opacity 0.1s linear !important;
}
.headlogo h2{
     font-size: 30px !important;
    font-weight: 800 !important;
    line-height: 30px !important;
}
.headlogo img{
     height: 45px !important; width: auto !important; max-width: 140px !important;
}




}
/* ====================== MOBILE SAMPLING SECTION - LIKE IMAGE ====================== */



.circle-container-mobile {
    width: 170px !important;
    height: 170px !important;
    margin: 0 auto 25px !important;
    border: 10px solid #2150a0 !important;
    border-radius: 50% !important;
    overflow: hidden !important;
    box-shadow: 0 10px 30px rgba(33,80,160,0.2) !important;
}

.circle-container-mobile img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}

.mobile-title {
    font-size: 22px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    color: #1e2937 !important;
    margin-bottom: 15px !important;
    line-height: 1.3 !important;
    font-family: 'Poppins', sans-serif !important;
    text-align:center !important;
}

.mobile-desc {
    font-size: 14.5px !important;
    line-height: 1.55 !important;
    color: #334155 !important;
    max-width: 380px !important;
    margin: 0 auto !important;
    font-weight: 400 !important;
    font-family: 'Poppins', sans-serif !important;
        text-align:center !important;

}

/* Hide on Desktop */
#samplingMobile {
    display: none !important;
}
@media (max-width: 991px) {
    #samplingMobile {
        display: block !important;
    }
    
    .mobile-advantage-item {
        margin-bottom: 0px !important;
        padding:10px 0px !important;
    }
    .sc-wrapper {
       
        margin: 0px auto !important;
    
    }
    .circle-container-mobile {
        width: 160px !important;
        height: 160px !important;
    }
    
    .mobile-title {
        font-size: 21px !important;
    }
    
    .u9-logo{
     font-size: 40px !important;
    font-weight: 800 !important;
    line-height: 30px !important;
}
.u9-logo img{
     height: 45px !important; width: auto !important; max-width: 140px !important;
}
.sc-left-col h2{
     font-size: 20px !important;
    font-weight: 600 !important;
    line-height: 30px !important;
}
.sc-left-col{
    padding:none !important;
}
.sc-left-col p{
     font-size: 13px !important;
   
}
.everything h2{
        font-size: 30px !important;
    font-weight: 800 !important;
    line-height: 40px !important;
    margin-top:50px !important;
}
.xg-sustainability-wrap{
    position:relative !important;
    width:90% !important;
    height:200px !important;
    min-height:500px !important;
    overflow:hidden !important;
    background:#000 !important;
    display:flex !important;
    align-items:center !important;
    padding:40px 0px !important;
    box-sizing:border-box !important;
}
.left-content3{
    width:100% !important;
    padding:10px 10px !important;
}
.left-content3 p{
    font-size:13px !important;
    line-height:19px !important;
    color:#222 !important;
    margin-top:10px !important;
    
    font-weight:400 !important;
}

}



/* Very Small Screen */
@media(max-width:480px) {
    .circle-container-mobile {
        width: 145px !important;
        height: 145px !important;
    }
    
    .mobile-title {
        font-size: 19px !important;
    }
    
    .mobile-desc {
        font-size: 14px !important;
    }
    .saplemainhide{
    display:none !important;
}
}

@media (min-width: 768px) and (max-width: 1024px){
    .main-mobile {
    display: flex !important;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 20px !important;
    gap: 25px;
}

.main-mobile-h2 {
    font-size: 48px !important;
    line-height: 52px !important;
    color: black !important;
    text-align: center !important;
    font-weight: 600;
    margin: 0 0 10px 0;
}

.mobile-hoodie-img {
    width: 100% !important;
    height: auto !important;
    max-width: 420px !important;
    display: block;
    border-radius: 12px;
    will-change: transform;
    transform-origin: center center;
}
.faster-mobile-12 {
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        width: 100%;
    }
.hero{
    display:none !important;
}
 .faster-text {
            font-size: 45px !important;
            font-weight: 800 !important;
            text-transform: uppercase;
            color: #ffffff;
            -webkit-text-stroke: 1.5px #2150a0 !important;
            letter-spacing: 0px;
            white-space: nowrap;
            display: inline-block;
            transform: translateX(150%);
            transition: transform 1s cubic-bezier(0.4, 0, 0.2, 1);
            line-height:80px;
        }
        
         .products-section{
    position: relative !important;
    height: 540px !important;
}

.products-sticky-wrapper{
    position: sticky !important;
    top: 0 !important;
    height: 500px !important;
    overflow: hidden !important;
    background:transparent !important;
}

.slider-wrapper{
    width: 100% !important;
    height: 500px !important;
    overflow: hidden !important;
    object-fit: cover;
    
}

.products-slider{
    display: flex !important;
    align-items: center !important;
    height: 100% !important;
    will-change: transform !important;
    object-fit: cover;

}
.products-header h2{
    font-size: 50px  !important;
            font-weight: 800 !important;
}
.who-we-are-section{
    position: relative !important;
    height: 600px !important;
}

.who-sticky-wrapper{
    position: sticky !important;
    top: 0 !important;
    min-height: 300px !important;   /* IMPORTANT instead of height */
    background: transparent !important;
    overflow: visible !important;   /* IMPORTANT */
}

.who-we-are-section .container{
    height: 340px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
}

.who-title{
    font-size: 40px !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing:1px !important;
    color: black !important;
    line-height: 80px !important;
    margin-top: 20px !important;
    margin-bottom: 0px !important;
    z-index: 2 !important;
}
.saplemainhide{
    margin-top:70px !important;
}
    
    .advantage-item{
            margin-top:0px !important;

    }
    .left-column .advantage-item .align-items-start{
        justify-content: end !important;
    }
    .antomy2{
        margin-top: 200px !important;
    }
    .first2{
        margin-top:-350px !important;
    }
    .data2{
        margin-top:200px !important;
        margin-bottom:50px !important;
    }
    .setwidth{
        width:480px !important;
    }
   #samplingMobile{
        display:none !important;
    }
     .u9-logo {
            font-size: 70px !important;
            font-weight: 800;
            letter-spacing: -2px;
            color: black;
            line-height: 80px;
            font-family:"FF Good Pro";
        }
        .u9-logo img {
    height: 65px !important;}
    .sc-left-col {
  padding: 0px !important;
  justify-content: center !important;
}
.process-container {
        grid-template-columns: repeat(2, 1fr) !important;
        max-width: 600px !important;
    }
    
    .process-item-mobile {
        text-align: center !important; /* looks cleaner in 2 columns */
    }
    .xg-content h1{
        font-size: 80px !important;
    }
    .main-title2{
        font-size:50px !important;
    }
    .left-content4{
    align-items:center !important;
    text-align: center;
}
.left-content4 h2{
font-size: 25px;
    line-height: 36px;
    text-transform: uppercase;
    font-family: poppins !important;
    font-weight: 700;
 
}
.mob{
 
    display:flex !important;
}
.xg-client-bottom{
    display:none !important;
}
.xg-client-box{
        background:#fff;
    border:1px solid #cfcfcf;
    height:200px !important;
    display:flex;
    align-items:center;
    justify-content:center;
    transition:0.3s ease;
    position:relative;
    border:1.5px solid black !important;
}

.xg-client-grid{
    display:grid;
    grid-template-columns:repeat(4, 1fr) !important;
    gap:20px !important;
    max-width:1200px;
    margin:0 auto;
    justify-content:center !important;
    padding:0px 20px !important;
}
    
    .xg-grid-mobile {
       grid-template-columns:repeat(4, 1fr) !important;
    gap:20px !important;

    }
      .xg-compliance-section-mobile {
            display: block !important;
        }
        
        /* Hide original desktop slider on mobile */
        .xg-compliance-section {
            display: none !important;
        }
}
/* Make the container a grid */
.process-container {
    display: grid !important;
    gap: 25px !important;
}