:root{/* Font Family */
    --font-primary:'DM Sans',sans-serif;/* Font Weights */
    --fw-light:300;--fw-regular:400;--fw-medium:500;--fw-semibold:600;--fw-bold:700;/* Responsive Font Sizes */
    --fs-hero:clamp(3rem,7vw,6.875rem);/* 48px - 110px */
    --fs-h1:clamp(2.125rem,4vw,3.75rem);/* 34px - 60px */
    --fs-h2:clamp(1.70rem,3vw,2.875rem);/* 28px - 46px */
    --fs-h3:clamp(1.375rem,2.2vw,2.125rem);/* 22px - 34px */
    --fs-h4:clamp(1.5rem,2vw,1.625rem);/* 18px - 26px */
    --fs-body:clamp(0.9375rem,15px,1.125rem);/* 15px - 18px */
    --fs-small:clamp(0.8125rem,1vw,0.9375rem);/* 13px - 15px */
    --fs-xs:0.75rem;/* 12px */
    --lh-tight:1;
    --lh-heading:1.1;
    --lh-body:1.3;
     --w-30:30%;
      --w-40:40%;
     --w-50:50%;
     --w-60:60%;
     --w-70:70%;
    --w-75:75%;
    --w-80:80%;
    --w-85:85%;
    --w-90:90%;
    --w-95:95%;
}
.w-60{width:var(--w-60);}
.w-70{width:var(--w-70);}
.w-75{width:var(--w-75);}
.w-80{width:var(--w-80);}
.w-85{width:var(--w-85);}
.w-90{width:var(--w-90);}
.w-95{width:var(--w-95);}

@media (max-width:767.98px){
    .w-75,
    .w-80,
      .w-85,
    .w-90,
    .w-95{
        width:100% !important;
    }
}

    /* =========================
   PADDING
========================= */

/* All */
.p-10 { padding: 10px; }
.p-20 { padding: 20px; }
.p-30 { padding: 30px; }
.p-40 { padding: 40px; }
.p-50 { padding: 50px; }
.p-60 { padding: 60px; }
.p-70 { padding: 70px; }
.p-80 { padding: 80px; }
.p-90 { padding: 90px; }
.p-100 { padding: 100px; }

/* Top */
.pt-10 { padding-top: 10px; }
.pt-135Per { padding-top: 13.5%; }
.pt-20 { padding-top: 20px; }
.pt-30 { padding-top: 30px; }
.pt-40 { padding-top: 40px; }
.pt-40Per { padding-top: 40%; }
.pt-50 { padding-top: 50px; }
.pt-60 { padding-top: 60px; }
.pt-70 { padding-top: 70px; }
.pt-80 { padding-top: 80px; }
.pt-90 { padding-top: 90px; }
.pt-100 { padding-top: 100px; }

/* Bottom */
.pb-10 { padding-bottom: 10px; }
.pb-20 { padding-bottom: 20px; }
.pb-30 { padding-bottom: 30px; }
.pb-40 { padding-bottom: 40px; }
.pb-50 { padding-bottom: 50px; }
.pb-60 { padding-bottom: 60px; }
.pb-70 { padding-bottom: 70px; }
.pb-80 { padding-bottom: 80px; }
.pb-90 { padding-bottom: 90px; }
.pb-100 { padding-bottom: 100px; }

/* Left */
.ps-10 { padding-left: 10px; }
.ps-20 { padding-left: 20px; }
.ps-30 { padding-left: 30px; }
.ps-40 { padding-left: 40px; }
.ps-50 { padding-left: 50px; }
.ps-60 { padding-left: 60px; }
.ps-70 { padding-left: 70px; }
.ps-80 { padding-left: 80px; }
.ps-90 { padding-left: 90px; }
.ps-100 { padding-left: 100px; }

/* Right */
.pe-10 { padding-right: 10px; }
.pe-20 { padding-right: 20px; }
.pe-30 { padding-right: 30px; }
.pe-40 { padding-right: 40px; }
.pe-50 { padding-right: 50px; }
.pe-60 { padding-right: 60px; }
.pe-70 { padding-right: 70px; }
.pe-80 { padding-right: 80px; }
.pe-90 { padding-right: 90px; }
.pe-100 { padding-right: 100px; }

/* X */
.px-10 { padding-left: 10px; padding-right: 10px; }
.px-20 { padding-left: 20px; padding-right: 20px; }
.px-30 { padding-left: 30px; padding-right: 30px; }
.px-40 { padding-left: 40px; padding-right: 40px; }
.px-50 { padding-left: 50px; padding-right: 50px; }
.px-60 { padding-left: 60px; padding-right: 60px; }
.px-70 { padding-left: 70px; padding-right: 70px; }
.px-80 { padding-left: 80px; padding-right: 80px; }
.px-90 { padding-left: 90px; padding-right: 90px; }
.px-100 { padding-left: 100px; padding-right: 100px; }

/* Y */
.py-10 { padding-top: 10px; padding-bottom: 10px; }
.py-20 { padding-top: 20px; padding-bottom: 20px; }
.py-30 { padding-top: 30px; padding-bottom: 30px; }
.py-40 { padding-top: 40px; padding-bottom: 40px; }
.py-50 { padding-top: 50px; padding-bottom: 50px; }
.py-60 { padding-top: 60px; padding-bottom: 60px; }
.py-70 { padding-top: 70px; padding-bottom: 70px; }
.py-80 { padding-top: 80px; padding-bottom: 80px; }
.py-90 { padding-top: 90px; padding-bottom: 90px; }
.py-100 { padding-top: 100px; padding-bottom: 100px; }


/* =========================
   MARGIN
========================= */

/* All */
.m-10 { margin: 10px; }
.m-20 { margin: 20px; }
.m-30 { margin: 30px; }
.m-40 { margin: 40px; }
.m-50 { margin: 50px; }
.m-60 { margin: 60px; }
.m-70 { margin: 70px; }
.m-80 { margin: 80px; }
.m-90 { margin: 90px; }
.m-100 { margin: 100px; }

/* Top */
.mt--20 { margin-top: -20px; }
.mt--40 { margin-top: -40px; }
 .ml--40{
    margin-left: -40px;
 }
  .ml--50Per{
    margin-left: -50%;
 }
.mt--60 { margin-top: -60px; }
.mt--100 { margin-top: -100px; }
.mt--10Per { margin-top: -10%; }
.mt-0 { margin-top: 0px !important; }
.mt-10 { margin-top: 10px; }
.mt-20 { margin-top: 20px; }
.mt-30 { margin-top: 30px; }
.mt-40 { margin-top: 40px; }
.mt-50 { margin-top: 50px; }
.mt-60 { margin-top: 60px; }
.mt-70 { margin-top: 70px; }
.mt-80 { margin-top: 80px; }
.mt-90 { margin-top: 90px; }
.mt-100 { margin-top: 100px; }

/* Bottom */
.mb--40 { margin-bottom: -40px; }
.mb-10 { margin-bottom: 10px; }
.mb-20 { margin-bottom: 20px; }
.mb-30 { margin-bottom: 30px; }
.mb-40 { margin-bottom: 40px; }
.mb-50 { margin-bottom: 50px; }
.mb-60 { margin-bottom: 60px; }
.mb-70 { margin-bottom: 70px; }
.mb-80 { margin-bottom: 80px; }
.mb-90 { margin-bottom: 90px; }
.mb-100 { margin-bottom: 100px; }

/* Left */
.ms--10 { margin-left: -10px; }

.ms-10 { margin-left: 10px; }
.ms-20 { margin-left: 20px; }
.ms-30 { margin-left: 30px; }
.ms-40 { margin-left: 40px; }
.ms-50 { margin-left: 50px; }
.ms-60 { margin-left: 60px; }
.ms-70 { margin-left: 70px; }
.ms-80 { margin-left: 80px; }
.ms-90 { margin-left: 90px; }
.ms-100 { margin-left: 100px; }

/* Right */
.me-10 { margin-right: 10px; }
.me-20 { margin-right: 20px; }
.me-30 { margin-right: 30px; }
.me-40 { margin-right: 40px; }
.me-50 { margin-right: 50px; }
.me-60 { margin-right: 60px; }
.me-70 { margin-right: 70px; }
.me-80 { margin-right: 80px; }
.me-90 { margin-right: 90px; }
.me-100 { margin-right: 100px; }

/* X */
.mx-10 { margin-left: 10px; margin-right: 10px; }
.mx-20 { margin-left: 20px; margin-right: 20px; }
.mx-30 { margin-left: 30px; margin-right: 30px; }
.mx-40 { margin-left: 40px; margin-right: 40px; }
.mx-50 { margin-left: 50px; margin-right: 50px; }
.mx-60 { margin-left: 60px; margin-right: 60px; }
.mx-70 { margin-left: 70px; margin-right: 70px; }
.mx-80 { margin-left: 80px; margin-right: 80px; }
.mx-90 { margin-left: 90px; margin-right: 90px; }
.mx-100 { margin-left: 100px; margin-right: 100px; }

/* Y */
.my-10 { margin-top: 10px; margin-bottom: 10px; }
.my-20 { margin-top: 20px; margin-bottom: 20px; }
.my-30 { margin-top: 30px; margin-bottom: 30px; }
.my-40 { margin-top: 40px; margin-bottom: 40px; }
.my-50 { margin-top: 50px; margin-bottom: 50px; }
.my-60 { margin-top: 60px; margin-bottom: 60px; }
.my-70 { margin-top: 70px; margin-bottom: 70px; }
.my-80 { margin-top: 80px; margin-bottom: 80px; }
.my-90 { margin-top: 90px; margin-bottom: 90px; }
.my-100 { margin-top: 100px; margin-bottom: 100px; }

/* Line Heights */
    
 @font-face {
    font-family: 'DM Sans';
    src: url('../font/DMSans/variable/dm-sans-latin-wght-normal.woff2') format('woff2');
    font-weight: 100 1000;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'DM Sans';
    src: url('../font/DMSans/variable/dm-sans-latin-wght-italic.woff2') format('woff2');
    font-weight: 100 1000;
    font-style: italic;
    font-display: swap;
}
.row>* {
margin-top: 20px !important;
}
.row {
margin-top: -10px !important;
}
:root{
    --font-primary: 'DM Sans', sans-serif;
}
.h5, h5 {
    font-size: 1.15rem;
}
.h-90{
height: 90%;
}
.line16{
line-height: 1.6;
}
.line1{
line-height: 1;
}
.line085{
line-height: 0.85 !important;
}
html,body{overflow-y:overlay}
html{scroll-behavior:smooth}
body{font-family:var(--font-primary);font-size:var(--fs-body);line-height:var(--lh-body);font-weight:400;}
/* Chrome */::-webkit-scrollbar{width:5px}
::-webkit-scrollbar-track{background:transparent;margin:0}
::-webkit-scrollbar-thumb{background:#dc2126;border-radius:50px;border:0 solid transparent;background-clip:padding-box}
img{max-width:100%}
/* Demo Header */
header{background:#fff;padding:20px 40px;display:flex;justify-content:space-between;align-items:center;border-bottom: 2px solid #000;    margin-bottom: -1px;}
.logo{max-width:350px}
.menu-btn{background:none;border:none;color:#fff;font-size:36px}
/* Overlay */
.mega-menu{position:fixed;inset:0;background:#4866AD;transform:translateY(-100%);opacity:1;visibility:hidden;transition:transform .75s cubic-bezier(.22,1,.36,1),visibility 0s linear .75s;will-change:transform;z-index:9999}
.mega-menu.show{transform:translateY(0);visibility:visible;transition:transform .75s cubic-bezier(.22,1,.36,1)}
/* Close */
.close-menu{position:absolute;right:40px;top:35px;border:none;background:none;color:#fff;font-size:48px}
/* Watermark */
.watermark{position:absolute;left:-80px;bottom:-100px;font-size:700px;font-weight:bold;color:rgba(255,255,255,.06);line-height:.8;pointer-events:none}
.watermark>img{height:60vh;position:fixed;bottom:0;left:0}
/* Content */
.menu-content{padding:100px 0;position:relative;z-index:2}
.menu-title{color:#fff;font-size:32px;font-weight:700;margin-bottom:20px}
.menu-list{list-style:none;padding:0;margin:0}
.menu-list li{border-bottom:1px dashed rgba(255,255,255,.45)}
.menu-list li a{color:#fff;text-decoration:none;display:block;padding:11px 0;transition:.35s}
.menu-list li a:hover{color:#b8ddff;padding-left:12px}
.download-btn{margin-top:35px;display:inline-block;padding:14px 34px;border-radius:50px;background:#5d9fd0;color:#fff;text-decoration:none;transition:.3s}
.download-btn:hover{background:#fff;color:#0d67a9}
.header-right{
    display:flex;
    align-items:center;
    gap:20px;
}

.report-title{
    color:#4866ad;
    font-size:18px;
    font-weight:400;
    white-space:nowrap;
}
/* Responsive */
@media(max-width:991px){.menu-title{margin-top:40px}.watermark{font-size:350px}}
.menu-toggle{width:45px;height:45px;background:none;border:0;position:relative;z-index:10001;cursor:pointer;}
.menu-toggle span{position:absolute;width:32px;height:3px;background:#4866ad;left:6px;transition:.4s cubic-bezier(.68,-0.55,.27,1.55)}
.menu-toggle span:nth-child(1){top:12px}
.menu-toggle span:nth-child(2){top:21px}
.menu-toggle span:nth-child(3){top:30px}
/* Cross */
.menu-toggle.active span:nth-child(1){transform:rotate(45deg);top:21px}
.menu-toggle.active span:nth-child(2){opacity:0;transform:translateX(-20px)}
.menu-toggle.active span:nth-child(3){transform:rotate(-45deg);top:21px}
.menu-toggle.active>span{background:#fff}
.border-primary{
    border-color:#4866ad !important;
}

.eight-column-grid{
    display:grid;
    grid-template-columns:repeat(8,1fr);
    gap:0;
    width:100%;
}

.grid-item{
    background:#f4f4f4;
    text-align:center;
    overflow:hidden;
    position:relative;
}

.grid-item img{
    width:100%;
    display:block;
    transition:transform .6s cubic-bezier(.22,1,.36,1);
    will-change:transform;
    scale: 1.01;
}
.grid-item:hover img{
    transform:scale(1.08) rotate(1deg);
}
@media (max-width: 575.98px){
    .eight-column-grid{
        grid-template-columns: repeat(4, 1fr);
    }
}
/* Hero */
.fs-hero{font-size:var(--fs-hero);line-height:var(--lh-tight);font-weight:300}
/* H1 */
.fs-h1{font-size:var(--fs-h1);line-height:var(--lh-heading);font-weight:300}
/* H2 */
.fs-h2{font-size:var(--fs-h2);line-height:1.2;font-weight:500;letter-spacing: -0.85px;}
/* H3 */
.fs-h3{font-size:var(--fs-h3);line-height:1.2;font-weight:500}
/* H4 */
.fs-h4{font-size:var(--fs-h4);line-height:1.3;font-weight:600}
/* Body */
.fs-body{font-size:var(--fs-body);line-height:1.4}
/* Small */
.fs-small{font-size:var(--fs-small);line-height:1.5}
/* Caption */
.fs-caption{font-size:var(--fs-xs);text-transform:uppercase;letter-spacing:2px}
.smile-banner{background:#dc2126;padding:45px 15px;text-align:center}
.smile-subtitle{display:block;color:#fff;font-size:20px;font-weight:500;line-height:1.2;margin-bottom:8px}
.white-text{margin:0;color:#fff;}
.hero-title span{
    display:inline-block;
    opacity:0;
    transform:translateY(80px);
}

.hero-title.animate span{
    animation:letterReveal .8s forwards;
}

@keyframes letterReveal{
    to{
        opacity:1;
        transform:translateY(0);
    }
}
.redColor{
     color: #ff4c4c;
}
.blueColor{
    color: #4866ad;
}
.blueBack{
    background-color: #4866ad;
    color: #fff;
}
 
.bgDarkRed{
     background-color: #dc2126;
    color: #fff;
}

.violetBack{
background-color: #776aac;
 color: #fff;
}
.lightBlueBack{
background-color: #e6ecf7;
}
 .fw-regular{
    font-weight: 400;
 }
 .bi-arrow-right::before{
        font-weight: 900 !important;
        padding-left: 1px;
 }
 .read-more-btn{

    display:inline-flex;

    align-items:center;

    gap:10px;

    text-decoration:none;

    color:#4B67B2;

    text-transform:uppercase;

    letter-spacing:.18em;

    font-weight:700;

    overflow:hidden;
z-index: 9;
}

.circle{

    width:35px;

    height:35px;

    border-radius:50%;

    background:#F03A43;

    display:flex;

    align-items:center;

    justify-content:center;

    color:#fff;

    position:relative;

    overflow:hidden;

    transition:.45s cubic-bezier(.22,1,.36,1);

}

.circle::before{

    content:"";

    position:absolute;

    inset:0;

    background:#4866ad;

    transform:translateX(-100%);

    transition:.45s;

}

.circle i{

    position:relative;

    z-index:2;

    transition:.45s;

}

.read-more-btn:hover .circle{

    transform:scale(1.08) rotate(360deg);

}

.read-more-btn:hover .circle::before{

    transform:translateX(0);

}

.read-more-btn:hover .circle i{

    color:#ffffff;

    transform:translateX(3px);

}

.label{

    position:relative;

}

.label::after{

    content:"";
    position:absolute;
    left:0;
    bottom:-4px;
    width:0;
    height:1px;
    background:#4B67B2;
    transition:.45s;
}

.read-more-btn:hover .label::after{

    width:100%;

}

.read-more-btn:hover{

    letter-spacing:.22em;
    color: #dc2126;
}

.product-slider-section{
    padding:50px 0;
    
}

.product-slider-title{
    text-align:center;
    font-size:60px;
    font-weight:700;
    color:#4f67b3;
    margin-bottom:50px;
}

.product-card{
   
   
    overflow:hidden;
    transition:0.4s;
}

.product-card img{
    width:100%;
    display:block;
    border-radius: 10px;
}

.product-card:hover{
        border-radius: 10px;
    transform:translateY(20px);
}

.product-swiper{
    padding-bottom:50px;
}

.swiper-pagination-bullet{
    width:8px;
    height:8px;
    background:#d0d0d0;
    opacity:1;
    border-radius:50px;

    transform:scale(1);

    transition:
        width 0.4s ease,
        background 0.4s ease,
        transform 0.4s ease;
}

.swiper-pagination-bullet-active{
    width:38px;
    background:#4f67b3;

    transform:scale(1.05);
}  
 
/* Slider Container */
.sustainability-slider .slider-wrapper {
    display: flex;
    gap: 15px; /* Clean spacing between tabs */
    height: 550px; /* Adjust this height based on your banner proportions */
    width: 100%;
    background-color: #fff; /* Branding consistency fallback */
    padding: 15px;
    border-radius: 25px;
}

/* Individual Slide */
.sustainability-slider .slide {
    position: relative;
    flex: 0 0 60px; /* Width of the collapsed strip */
    /* border-radius: 15px; */
    overflow: hidden;
    cursor: pointer;
    background-color: #fff;
    transition: all 0.6s cubic-bezier(0.25, 1, 0.5, 1); /* Smooth, professional easing */
}

/* Expanded Active Slide */
.sustainability-slider .slide.active {
    flex: 1 1 0; /* Expands to fill available space */
    cursor: pointer;
}

/* Image Setup */
.sustainability-slider .slide img {
    width: 100%;
    height: 100%;
    object-fit: fill;
    object-position: left center;
    display: block;
    
}

/* Positioning for Strips and Banners */
.sustainability-slider .strip,
.sustainability-slider .banner {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transition: opacity 0.4s ease-in-out;
}

/* When slide is NOT active: Hide Banner, Show Strip */
.sustainability-slider .slide:not(.active) .banner {
    opacity: 0;
    pointer-events: none;
}
.sustainability-slider .slide:not(.active) .strip {
    opacity: 1;
}

/* When slide IS active: Show Banner, Hide Strip */
.sustainability-slider .slide.active .banner {
    opacity: 1;
}
.sustainability-slider .slide.active .strip {
    opacity: 0;
    pointer-events: none;
}

.sustainability-slider .slide{
    flex: 0 0 60px;
    min-width:60px;
    max-width:60px;
    
}

.sustainability-slider .slide.active{
    flex:1 1 auto;
    max-width:none;
}
/* Mobile Responsiveness */
@media (max-width: 991px) {
    .sustainability-slider .slider-wrapper {
        flex-direction: column; /* Stacks vertically on mobile */
        height: 700px; 
    }
    .sustainability-slider .slide {
        flex: 0 0 60px; /* Height of the collapsed strip on mobile */
    }
}


 
.hero-banner{
    position:relative;
    overflow:hidden;
}

.banner-img{
    width:100%;
    display:block;
}

.overText{
    position:absolute;
    left: 28.5%;
    top: 54%;
    width:16.5%;
     pointer-events:none;
   transform:translate(calc(-50% - 150vw), -50%);
    transition:transform 1.2s cubic-bezier(.22,1,.36,1);
}
.overText.show{
    transform:translate(-50%, -50%);
   
}
/* Wrapper */
/* ===========================
   Wrapper
=========================== */

.envWrap{
    position:relative;
}

/* ===========================
   Card
=========================== */

.envCard{
    position:relative;
    overflow:hidden;
    background:#A3ED8E;
    border-top-right-radius:30px;
    cursor:pointer;
    isolation:isolate;
}

/* Wave Animation */

.envCard::before{
    content:"";
    position:absolute;

    width:90px;
    height:90px;

    right:-5px;
    bottom:-35px;

    border-radius:50%;

    background:radial-gradient(circle,
        #4866ad 0%,
        #4866ad 58%,
        rgba(72,102,173,.92) 72%,
        rgba(72,102,173,0) 100%
    );

    transform:scale(0);
    transition:transform .85s cubic-bezier(.22,1,.36,1);

    will-change:transform;
    z-index:0;
}

.envWrap:hover .envCard::before{
    transform:scale(15);
}

/* Image */

.envCard img{
    position:relative;
    display:block;
    width:100%;
    transition:filter .45s ease;
    backface-visibility:hidden;
    z-index:2;
}

.envWrap:hover .envCard img{
    filter:brightness(0) invert(1);
}

/* ===========================
   Floating Button
=========================== */

.envBtn{
    position:absolute;
    right:20px;
    bottom:-15px;
    z-index:100;
}

.envArrowBtn{
    width:35px;
    height:35px;

    display:flex;
    align-items:center;
    justify-content:center;

    background:#fff;
    border:2px solid #222;
    border-radius:50%;

    color:#222;
    text-decoration:none;

    box-shadow:0 8px 20px rgba(0,0,0,.12);

    transition:
        background .35s ease,
        color .35s ease,
        border-color .35s ease,
        transform .35s cubic-bezier(.22,1,.36,1),
        box-shadow .35s ease;
}

.envArrowBtn i{
    font-size:16px;
     display:inline-block;
       transition:transform .6s cubic-bezier(.22,1,.36,1);
}

/* Card Hover */

.envWrap:hover .envArrowBtn{
    background:#4866ad;
    color:#fff;
    border-color:#fff;
    box-shadow:0 14px 35px rgba(72,102,173,.35);
}

.envWrap:hover .envArrowBtn i{
    transform:translateX(1px) rotate(360deg);
}

/* Button Hover */

.envArrowBtn:hover{
    transform:translateY(-3px) scale(1.06);
}

.envArrowBtn:hover i{
    transform:translateX(6px) rotate(360deg);
}
 .nav-pagination{
    display:flex;
    width:100%;
    border:1px solid #ddd;
    overflow:hidden;
}

.nav-block{
    flex:1;
    display:flex;
    align-items:center;
    background:#fff;
}

.nav-btn{
    width:58px;
    height:58px;
    background:#d3d3d3;
    color:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    text-decoration:none;
    flex-shrink:0;
    transition:.45s cubic-bezier(.22,1,.36,1);
}

.nav-btn i{
    font-size:26px;
    display:inline-block;
    transition:.45s cubic-bezier(.22,1,.36,1);
}

.nav-item{
    flex:1;
    height:58px;
    display:flex;
    align-items:center;
    padding:0 20px;
    text-decoration:none;
    color:#8b8b8b;
    font-weight:500;
    transition:.45s cubic-bezier(.22,1,.36,1);
        background: #e6e6e6;
}

.left-text{
    justify-content:flex-start;
    border-right:1px solid #e8e8e8;
}

.right-text{
    justify-content:flex-end;
}

/* ===========================
   Premium Hover
=========================== */

.nav-block:hover .nav-btn{
    background:#4866ad;
    transform:scale(1.05);
}

.nav-block:hover .nav-btn i{
    transform:translateX(4px) rotate(360deg);
}

.nav-block:first-child:hover .nav-btn i{
    transform:translateX(-4px) rotate(-360deg);
}

.nav-block:hover .nav-item{
    color:#4866ad;
    background:#f7f9ff;
}

.nav-block:hover .nav-item.left-text{
    padding-left:28px;
}

.nav-block:hover .nav-item.right-text{
    padding-right:28px;
}

/* Underline Animation */

.nav-item{
    position:relative;
}

.nav-item::after{
    content:"";
    position:absolute;
    left:20px;
    bottom:12px;
    width:0;
    height:2px;
    background:#4866ad;
    transition:.45s ease;
}

.right-text::after{
    left:auto;
    right:20px;
}

.nav-block:hover .nav-item::after{
    width:70px;
}
.bgGreen{
    background: #A3ED8E;
}
.info-card{
    position: relative;
    background: #4f68b6;
    color: #fff;
    padding: 20px 22px 20px 24px;
    border-radius: 0 40px 0 0;
    overflow: hidden;
}

/* Left Red Strip */
.info-card::before{
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 6px;
    height: 100%;
    background: #ff1d25;
}

.info-card p{
    margin: 0;
    font-family: "DM Sans", sans-serif;
    font-size: 18px;
    line-height: 1.35;
    font-weight: 700;
    color: #fff;
}


.env-focus-row{
    display:grid;
    grid-template-columns:repeat(5,1fr);
    gap:30px;
    align-items:start;
}

.focus-item img{
    width:100%;
    height:auto;
    display:block;
     transition: transform .6s cubic-bezier(.22,1,.36,1);
    will-change: transform;
}

.focus-item:hover img{
    transform: scale(1.06);
}
/* Laptop */
@media (max-width:1199px){
    .env-focus-row{
        grid-template-columns:repeat(3,1fr);
    }
}

/* Tablet */
@media (max-width:991px){
    .env-focus-row{
        grid-template-columns:repeat(3,1fr);
    }
}

/* Mobile */
@media (max-width:767px){
    .env-focus-row{
              grid-template-columns:repeat(1,1fr);
    }
}

.rightCenter{
        position: absolute;
    right: 0px;
    bottom: 0px;
}
.leftBottomOutside{
       position: absolute;
    left: -50px;
    bottom: 10%;
    height: auto;
    width: 100px;
}
.rightBottomOutside{
      position: absolute;
    right: -49px;
    bottom: 10%;
    height: auto;
    width: 100px;
}
.leftBottom{
   position: absolute;
    left: 0px;
    bottom: 0px;
     width: 50px;
     height: auto;
}
.optBlueStrip{
   position: absolute;
    right: 15%;
    top: 0px;
    width: 25%;
    z-index: -1;
}
.optTit{
        position: absolute;
    z-index: 1;
    top: 0;
    left: 0;
    width: 98%;
}
.popup1{
        position: absolute;
    top: 26.5%;
    left: 37%;
    max-width: 26%;
}
.popup2{
        position: absolute;
       bottom: -25%;
       right: 10%;
    max-width: 50%;
}
.popup3{
      position: absolute;
          top: -15%;
    right: 20%;
    max-width: 50%;
}
.popup4{
     position: absolute;
    bottom: 0%;
    right: 13%;
    max-width: 14%;
}
.popup5{
    position: absolute;
    top: 5%;
    left: -30%;
    max-width: 55%;
}
.popup6{
   position: absolute;
    bottom: -55%;
    left: 8%;
    max-width: 65%;
}
.popup7{
   position: absolute;
    bottom: 38%;
    right: 11%;
    max-width: 11%;
}
.popup8 {
    position: absolute;
    top: 2%;
    right: 9%;
    max-width: 40%;
}
.popup9 {
    position: absolute;
    bottom: -20%;
    left: -10%;
    max-width: 47%;
}
.popup10 {
    position: absolute;
    top: 0%;
    right: 0%;
    max-width: 35%;
 
}
.popup11 {
   
    position: absolute;
    bottom: -10%;
    left: 8%;
    max-width: 45%; 
}

.popup12 {
   
      position: absolute;
    bottom: -20%;
    right: 19%;
    max-width: 15%;
    z-index: -1;
}

.popup13 {
    position: absolute;
 bottom: -7%;
    right: 10%;
    max-width: 40%;
}
.popup14     {
    position: absolute;
 bottom: -7%;
    left: 0%;
    max-width: 40%;
}
.popup15 {
    position: absolute;
    bottom: 5%;
    left: -10%;
    max-width: 25%;
}
.popup16 {
    position: absolute;
      top: -6%;
    right: -21%;
    max-width: 54%;
}
.popup17 {
    position: absolute;
    top: 35%;
    left: -26%;
    max-width: 44%;
}

.popup18 {
    position: absolute;
    bottom: 0%;
    left: -6%;
    max-width: 54%;
}
.popup19 {
      position: absolute;
    width: 60%;
    right: 10%;
    top: -140px;
      
}
.popup20 {
    position: absolute;
    top: -51%;
    left: 17%;
    max-width: 40%;
    z-index: -1;
}
.popup21 {
  position: absolute;
    top: 18%;
    right: 6%;
    max-width: 12%;
    z-index: 1;
}
.popup22 {
 
    position: absolute;
    top: 15%;
    right: 0%;
    max-width: 25%;
    z-index: 1;

}
.img-scale{
    transition: transform 1s cubic-bezier(.22,.61,.36,1);
}

.img-scale:hover{
    transform: scale(1.06);
}

.popupmove{
    animation: floatImage 2s ease-in-out infinite;
    display: inline-block;
}

@keyframes floatImage {
    0% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-15px);
    }
    100% {
        transform: translateY(0);
    }
}
.border-yellow {
    border-color: #FFD400 !important;
}
.bgEnergy{
background-image: url(../images/Environmental-Stewardship/Optimize/3.png);
background-position: right top;
background-repeat: no-repeat;
    background-size: 21.2%;
}
 .bgoutimg{
background-image: url(../images/Empowered-Communities/Outperform/1.png);
background-position: left top+10px;
background-repeat: no-repeat;
    background-size:cover;
    border-top-left-radius: 30px;
     border-bottom-left-radius: 30px;
         margin-bottom: -10px;
 }
.bgCommunity{
background-image: url(../images/Empowered-Communities/Optimize/2.png);
background-position: right top;
background-repeat: no-repeat;
    background-size: 21.2%; 
}

.bgRound{
background-image: url(../images/Empowered-Communities/Optimize/bg.png);
background-position: center center;
background-repeat: no-repeat;
    background-size: cover; 
}
 

.bgSustain{
background-image: url(../images/Environmental-Stewardship/Optimize/8.png);
background-position: right top;
background-repeat: no-repeat;
    background-size: 24.6%;
}
 
.bgOutperform{
       background-image: url(../images/Environmental-Stewardship/Outperform/bg.png);
    background-position: top left;
    background-repeat: no-repeat;
    background-size: cover;
    border-radius: 30px;
}
.bgoutPerformimg{
    background-image: url(../images/Empowered-Communities/Outperform/4.png);
    background-position: top right;
    background-repeat: no-repeat;
    background-size: cover;
    border-radius: 30px;
  
}
.bgCasestudy{
    background-image: url(../images/Environmental-Stewardship/Optimize/CaseStudyBg.svg);
background-position: top center;
background-repeat: no-repeat;
    background-size: contain;
}
.bgCasestudy1{
    background-image: url(../images/Science-Backed-Products/Optimize/bg.png);
background-position: top center;
background-repeat: no-repeat;
    background-size: contain;
}
.radius30{
    border-radius: 30px;
}
.radius20{
    border-radius: 15px;
}
.radiusLeft30{
    border-top-left-radius: 30px;
    border-bottom-left-radius: 30px;
}
.radiusRight30{
    border-top-right-radius: 30px;
    border-bottom-right-radius: 30px;
}
.radiusTop30{
    border-top-left-radius: 30px;
    border-top-right-radius: 30px;
}

.radiusBottom30{
    border-bottom-left-radius: 30px;
    border-bottom-right-radius: 30px;
}


.CenterBottom{
        position: absolute;
    left: 20%;
    bottom: 10%;
    width: 350px;
    height: auto;
}
.stepNo{
      width: 45px;
    height: 60px;
    background: #4A67B3;
    border-radius: 24px;
    color: #fff;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
}
.mar--75Per{
    margin-bottom: -75%;
}
.bggreyBlue{
    background-color: #c8d5ec;
}
.bgwhiteBlue{
    background-color: #edeff8;
}
.bgLightBlue{
    background-color: #9cdff7;
}
.bgLightPink{
    background-color: #ffd3a3;
}
.bgWhitePink{
    background-color: #fef9e3;
}
.bgOffLightPink{
    background-color: #f0dac9;
}
.pink{
    background-color: #ffc7c8;
}
.bgYellow{
    background-color: #fbe06a;
}
 
.leftFloatGroup img{
    display:block;
    animation: floatLeftRight 4s ease-in-out infinite;
    will-change: transform;
}

/* Thoda natural lagne ke liye delay */
.leftFloatGroup img:nth-child(2){
    animation-delay:.3s;
}
.leftFloatGroup img:nth-child(3){
    animation-delay:.6s;
}
.leftFloatGroup img:nth-child(4){
    animation-delay:.9s;
}
.leftFloatGroup img:nth-child(5){
    animation-delay:1.2s;
}

@keyframes floatLeftRight{
    0%{
        transform:translateX(0);
    }
    50%{
        transform:translateX(-30px);
    }
    100%{
        transform:translateX(0);
    }
    
}
.policy-divider{
    width:1px;
    height:55px;
    background:#000;
}

.mt-reset > *{
    margin-top: 0 !important;
}
.leader-card{
    background:#fff;
    overflow:hidden;
}

.leader-card img{
    width:100%;
    display:block;
}

.leader-info{
    border-top:3px solid #e31b23;
    border-bottom:1px solid #e31b23;
    padding:15px 0;
}

.leader-info h5{
    margin:0;
    color:#e31b23;
    font-size:18px;
    font-weight:700;
}

.leader-info p{
    margin:2px 0 0;
    color:#333;
    font-size:14px;
}
.redColor{
    color: #e31b23;
}
.bulletCol>li{
    margin-bottom: 05px;
}
.bottomCenter{
    position: absolute;
       left: 36%;
    bottom: -5%;
    width: 28%;
}
.bgscience{
    background-image: url(../images/Science-Backed-Products/Optimize/5.png);
    background-position: top right;
    background-repeat: no-repeat;
    background-size: cover;
    min-height: 350px;
}
.bgScienceOpt{
      background-image: url(../images/Sustainable-Sourcing/Optimize/1.png);
    background-position: top right;
    background-repeat: no-repeat;
    background-size: contain;
}
.bgSusImg{
     background-image: url(../images/Sustainable-Sourcing/Optimize/4.png);
    background-position: bottom right;
    background-repeat: no-repeat;
    background-size: contain;
}
.bgRightExcel{
       background-image: url(../images/Empower-to-Excel/Organize/1.png);
    background-position: top right;
    background-repeat: no-repeat;
    background-size: contain;
}
.bgEmpower{
     background-image: url(../images/Empower-to-Excel/Organize/bg.png);
    background-position: top right;
    background-repeat: no-repeat;
    background-size: cover;
}
.rightBottomimg{
     position: absolute;
    bottom: -12%;
    right: 4%;
    width: 70%;
}

.rightBottomimg1 {
    position: absolute;
        bottom: -13%;
    right: 1%;
    width: 48%;
}

.rightBottomimg2 {
    position: absolute;
        bottom: -13%;
    right: 1%;
    width: 40%;
}
.leftTopLot{
  position: absolute;
        left: 13%;
    top: 0;
    width: 40%;
}
xsmall{
    font-size: .675em;
    margin-top: -20px;
}
 

.leftTopText{
    position: absolute;
    left: 50px;
    top: 50px;
}
.leftBottomText{
    position: absolute;
    left: 50px;
    bottom: 50px;
}
.sticky-img{
        position: sticky;
    position: -webkit-sticky;
    top:100px;
}

.bottomRight{
        position: absolute;
    right: 0;
    bottom: -80px;
    width: 50%;
}
 

#leftWrapper{
    position:relative;
}

#leftImage{
    width:100%;
    box-sizing:border-box;
}

#leftImage.fixed{
    position:fixed;
    top:0px;
    z-index:100;
}

#leftImage.bottom{
    position:absolute;
    bottom:0;
    left:0;
}

#leftImage img{
    display:block;
    width:100%;
}

@media(max-width:991px){

#leftImage,
#leftImage.fixed,
#leftImage.bottom{
    position:relative;
    top:auto;
    left:auto;
    bottom:auto;
    width:100% !important;
}

}


.p-100I30{
    padding: 100px;
    padding-bottom: 0px;
}

.p-40I20{
    padding: 40px;
}

.p-40I10{
    padding: 40px;
}

.p-50I10{
     padding: 50px;
    
}
.p-50I20{
     padding: 50px;
    
}


.p-80I20 {
    padding: 80px;
    
}

.fottxt{
    margin-top: -120px !important;z-index: 1;position: relative;
}

.responsive-border{
    border-bottom:3px solid var(--bs-primary);
}


@media (min-width:768px){

   .mtm-10{
margin-top: 10px !important;
   }
    .responsive-border{
        border-bottom:0;
        border-right:3px solid var(--bs-primary);
    }
}

.mbm-100{
    margin-bottom: -100px;
}
@media (max-width: 768px) {

    .mbm-100{
         margin-bottom: 0px;
    }
.fottxt{
    margin-top: 0px !important;
}



    header{
        padding:10px 20px;
    }
    .logo {
    max-width: 260px;
}
 
.menu-content {
    padding: 0px 30px;
}
.mega-menu {
    overflow-y: auto;
    overflow-x: hidden;
      padding-bottom: 100px;
}
.smile-subtitle{
        font-size: 16px;
    font-weight: 400;
    line-height: 1;
    margin-bottom: 3px;
}
.smile-banner{
        padding: 30px 15px;
}
.h2M{
    font-size: 2.1rem !important;
}
 .pbm-20{
    padding-bottom: 20px !important;
 }
  .ptm-0{
    padding-top: 0px !important;
 }
  .ptm-20{
    padding-top: 20px !important;
 }
   .ptm-40{
    padding-top: 40px !important;
 }
   .ptm-30{
    padding-top: 30px !important;
 }
 
  .pbm-50{
    padding-bottom: 50px !important;
 }
   .psm-0{
    padding-left: 0px !important;
 }
   .psm-15{
    padding-left: 15px !important;
 }
    .psm-30{
    padding-left: 30px !important;
 }
.h-90 {
    height: auto;
}
.pm-0{
    padding: 0px !important;
}
.mm-0{
    margin: 0px !important;
}
 
.psm-15{
padding-left: 15px;
}
.psm-10{
padding-left: 10px;
}

html,
body{
    overflow-x: hidden;
    width: 100%;
}

img,
video{
    max-width: 100%;
    height: auto;
}

.container,
.container-fluid,
.row{
    max-width: 100%;
}
 


.row{
    margin-left:0 !important;
    margin-right:0 !important;
}
.pxm-30 { padding-left: 30px !important; padding-right: 30px !important; }
.pxm-15 { padding-left: 15px !important; padding-right: 15px !important; }
.p-100I30{

    padding: 0px;
    padding-top: 60px;
 
}

.p-I30{

      padding: 30px;
    padding-bottom: 40px;
     
}

.p-I0{

      padding: 0px;
   
     
}

.p-40I20{
    padding: 20px;
    padding-bottom: 40px;
}
.p-40I10{
     padding: 10px;
    padding-bottom: 40px;
}
.p-50I10{
     padding: 10px;
    padding-bottom: 20px;
}
.p-50I20{
     padding: 25px;
    padding-bottom: 40px;
}

.casestudyHead{
    margin-left: 30px;
    width: 140px !important;
}
.max120{
        max-width: 100px;
}
.msmm-15{
    margin-left: -15px;
}
.bgEnergy,.bgSustain,.bgScienceOpt,.bgRightExcel,.bgCommunity
{
background-image: none;
}
 .pxm-0 { padding-left: 0px !important; padding-right: 0px !important; }

 .p-80I20 {
    padding: 0px;
    padding-top: 60px;
    padding-bottom: 40px;
}
.mm150{
    max-width: 150px;
}

}















@media (max-width: 576px) {
    .leftTopText{
    left: 20px;
    top: 20px;
    }
    .leftTopText>h2{
        font-size: 1.8rem !important;
    }
     .mtm-50{
margin-top: -50px !important;
   }
    .w-sm-50{
width: 50% !important;
    }
    .w-sm-70{
width: 70% !important;
    }
   .radiusM30{
border-radius: 30px !important;
   }
.wid70M{
    width: 70% !important;
}
.focus-item img{
    justify-self: center;
}

.wid90M{
    width: 90%;
}
    .ptMO30{
padding-top: 30px;
    }

       .ptMO0{
padding-top: 0px !important;
    }
   .overText{
        width: 36.5%;
            top: 36%;
}
.mtm-5{
    margin-top: 5px !important;
}
.product-slider-section {
    padding: 80px 0;
}
.menu-list li a{
       padding: 8px 0;
    
    font-size: 17px; 
}
.menu-title{
        font-size: 25px;
        margin-bottom: 10px;
}
.watermark>img{
    display: none;
}
.nav-btn i {
    font-size: 21px;
}
.nav-btn {
    width: 30px;
}
.nav-block:first-child:hover .nav-btn i{
    transform: translateX(0px) rotate(-360deg);
}
 
.nav-item {
    padding: 0 10px;
}
.nav-block:hover .nav-item.right-text {
    padding-right: 10px;
}
.right-text{
        text-align: end;
}
.nav-pagination{
    font-size: 12px;
}
.g-1,.g-2,.g-3,.g-4,.g-5{
    --bs-gutter-y: 0;
    --bs-gutter-x: 0;
}
.w-70{
    width: 100% !important;
}

}

.pbD0{
padding-bottom: 0px !important;
}
/* 
.table-responsive-custom{
    width:100%;
    overflow-x:auto;
    overflow-y:hidden;
     overscroll-behavior-x:contain;
    padding-bottom:35px;
}

 
@media (min-width:992px){
    .table-responsive-custom{
            overscroll-behavior-x:contain;
    }

    .financial-table{
        width:100% !important;
        min-width:100%;
    }
}

 
@media (max-width:991px){

    .table-responsive-custom{
          overflow-x:auto;
    overflow-y:hidden;
     overscroll-behavior-x:contain;
    }

    
    .financial-table{
        width:900px;
        min-width:900px;
    }

   
    .table-w-400{width:400px !important;min-width:400px !important;}
    .table-w-500{width:500px !important;min-width:500px !important;}
    .table-w-600{width:600px !important;min-width:600px !important;}
    .table-w-700{width:700px !important;min-width:700px !important;}
    .table-w-800{width:800px !important;min-width:800px !important;}
    .table-w-900{width:900px !important;min-width:900px !important;}
    .table-w-1000{width:1000px !important;min-width:1000px !important;}
    .table-w-1100{width:1100px !important;min-width:1100px !important;}
 
    .table-responsive-custom::-webkit-scrollbar{
        height:6px;
    }
}
.scale150 .sustainability-slider .slide img{
    object-fit: contain;
    height: 83%;
}

.table-responsive-custom{
    position:relative;
}

.table-responsive-custom::after{
    content:"← Swipe →";
   position:sticky;
    right:10px;
    float:right;
    bottom:5px;
    font-size:12px;
    background:rgba(255,255,255,.9);
    padding:2px 8px;
    border-radius:20px;
    pointer-events:none;
}

@media (min-width:992px){
    .table-responsive-custom::after{
        display:none;
    }
} */


.table-responsive-custom{
    width:100%;
    overflow-x:auto;
    overflow-y:hidden;
    overscroll-behavior-x:contain;
    position:relative;
    padding-bottom:0px;
}

/* Desktop */
@media (min-width:992px){
    .financial-table{
        width:100% !important;
        min-width:100%;
    }

    .table-responsive-custom::after{
        display:none;
    }
}

/* Mobile & Tablet */
@media (max-width:991px){

    /* Default */
    .financial-table{
        width:900px;
        min-width:900px;
        padding-bottom:15px;
    }

    /* Custom Width Classes */
    .table-w-400{width:400px !important;min-width:400px !important;}
    .table-w-500{width:500px !important;min-width:500px !important;}
    .table-w-600{width:600px !important;min-width:600px !important;}
    .table-w-700{width:700px !important;min-width:700px !important;}
    .table-w-800{width:800px !important;min-width:800px !important;}
    .table-w-900{width:900px !important;min-width:900px !important;}
    .table-w-1000{width:1000px !important;min-width:1000px !important;}
    .table-w-1100{width:1100px !important;min-width:1100px !important;}

    /* Android/Desktop Chromium */
    .table-responsive-custom::-webkit-scrollbar{
        height:6px;
    }
}

.scale150 .sustainability-slider .slide img{
    object-fit:contain;
    height:83%;
}

.table-responsive-custom::after{
    content:"← Swipe →";
    position:sticky;
    float:right;
    right:10px;
    bottom:5px;
    font-size:12px;
    background:rgba(255,255,255,.9);
    padding:2px 8px;
    border-radius:20px;
    pointer-events:none;
}

.ida-note{
   
    font-size:14px;
    font-style:italic;
}