/* =========================
   CLAROID PHARMACEUTICALS
   Responsive homepage CSS
   ========================= */

:root{
  --primary-color:#51ac33;
  --secondary-color:#005292;
  --navy:#06385d;
  --deep:#032f4f;
  --blue:#0a527d;
  --teal:#16b68b;
  --teal-dark var(--primary-color);
  --pale:#edf8fa;
  --text:#173e5b;
  --muted:#658096;
  --white:#fff;
  --line:#d9e8ed;
  --container:1240px;
  --ease:cubic-bezier(.2,.7,.2,1);
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:Inter,Arial,sans-serif;color:var(--text);background:#fff;overflow-x:hidden}
body.menu-open{overflow:hidden}
img{display:block;width:100%;object-fit:cover}
a{text-decoration:none;color:inherit}
button{font:inherit}
.container {
    width: 100%;
    max-width: 1600px;
    margin: 0 auto;
}
.section-pad{padding:78px 0}
.eyebrow{display:block;font-size:32px;font-weight:700;letter-spacing:2.6px;margin-bottom:14px}
.eyebrow.light{color:#d9edf5}
h1,h2,h3{font-family:Manrope,Inter,sans-serif;font-weight:500;line-height:1.05}
h2{font-size:39px;letter-spacing:-1.3px}
p{line-height:1.65; font-size: 16px; margin-bottom: 10px;}

/* PRELOADER */
.preloader{position:fixed;inset:0;background:#fff;z-index:9999;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:18px;transition:.7s var(--ease)}
.preloader.hide{opacity:0;visibility:hidden}
.loader-logo{display:flex;align-items:center;gap:10px;color:var(--navy);font-size:24px;letter-spacing:1px}
.loader-logo span{background:var(--teal);color:white;border-radius:50%;width:35px;height:35px;display:grid;place-items:center;font-size:13px}
.loader-line{width:160px;height:2px;background:#e6eef1;overflow:hidden}
.loader-line i{display:block;width:45%;height:100%;background:var(--teal);animation:loader 1.1s infinite ease-in-out}
/* =========================
   PRELOADER FIX
========================= */

#preloader {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100vh;
    z-index: 99999;
    background: #ffffff;
}

#preloader.hide {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.5s ease, visibility 0.5s ease;
}
@keyframes loader{0%{transform:translateX(-100%)}100%{transform:translateX(330%)}}



/* =========================================================
   CLAROID PHARMACEUTICALS
   PERFECT RESPONSIVE HEADER
   ========================================================= */

.site-header{
    position:fixed;
    top:0;
    left:0;
    right:0;
    width:100%;
    height:78px;
    display:flex;
    align-items:center;
    padding:0 5%;
    background:#fff;
    z-index:9999;
    border-bottom:1px solid transparent;
    transition:height .35s var(--ease),box-shadow .35s var(--ease),border-color .35s var(--ease);
}
.site-header.scrolled{
    height:78px;
    box-shadow:0 8px 30px rgba(0,50,80,.10);
    border-color:#e8eef1;
}
.site-header .brand{
    width:100px;
    min-width:100px;
    display:flex;
    align-items:center;
    position:relative;
    z-index:10001;
}
.site-header .brand img{
    width:100%;
    height:auto;
    object-fit:contain;
}
.site-header .main-nav{
    height:100%;
    flex:1;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:30px;
    margin-left:35px;
}
.site-header .main-nav > a,
.site-header .nav-link{
    position:relative;
    height:100%;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:7px;
    padding:0;
    border:0;
    outline:none;
    background:transparent;
    color:#111;
    font-size:15px;
    font-weight:600;
    white-space:nowrap;
    cursor:pointer;
    text-decoration:none;
}
.site-header .main-nav > a::after,
.site-header .nav-link::after{
    content:"";
    position:absolute;
    left:50%;
    bottom:0;
    width:0;
    height:3px;
    border-radius:5px;
    background:#51ac33;
    transform:translateX(-50%);
    transition:width .3s ease;
}
.site-header .main-nav > a:hover::after,
.site-header .main-nav > a.active::after,
.site-header .nav-item:hover > .nav-link::after,
.site-header .nav-item.open > .nav-link::after{
    width:28px;
}
.site-header .nav-item{
    position:static;
    height:100%;
    display:flex;
    align-items:center;
}
.site-header .nav-chevron{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    color:#087f70;
    font-size:12px;
    transition:transform .3s ease;
}
.site-header .nav-item:hover .nav-chevron,
.site-header .nav-item.open .nav-chevron{
    transform:rotate(180deg);
}

/* DESKTOP MEGA MENU */
.site-header .mega-menu{
    position:absolute;
    top:78px;
    left:0;
    width:100%;
    background:#fff;
    border-top:1px solid #e7eef1;
    border-bottom:1px solid #dce8ec;
    box-shadow:0 20px 50px rgba(0,40,65,.14);
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transform:translateY(10px);
    transition:opacity .25s ease,transform .3s ease,visibility .25s ease;
    z-index:9998;
}
@media (min-width:992px){
    .site-header .nav-item:hover > .mega-menu,
    .site-header .nav-item.open > .mega-menu{
        opacity:1;
        visibility:visible;
        pointer-events:auto;
        transform:translateY(0);
    }
}
.site-header .mega-inner{
    width:min(1240px,calc(100% - 60px));
    margin:0 auto;
    padding:35px 0 40px;
}
.site-header .mega-columns{
    display:grid;
    gap:35px;
    align-items:start;
}
.site-header .mega-about .mega-columns{
    grid-template-columns:260px;
}
.site-header .investor-columns{
    grid-template-columns:repeat(5,minmax(0,1fr));
    gap:30px;
}
.site-header .mega-column{
    display:flex;
    flex-direction:column;
    align-items:stretch;
}
.site-header .mega-column > a{
    position:relative;
    display:block;
    width:100%;
    padding:10px 0;
    color:#31586e;
    font-size:14px;
    font-weight:500;
    border-bottom:1px solid #edf3f5;
    transition:color .25s ease,padding-left .25s ease;
}
.site-header .mega-column > a::before{
    content:"";
    position:absolute;
    left:0;
    top:50%;
    width:0;
    height:1px;
    background:#51ac33;
    transform:translateY(-50%);
    transition:width .25s ease;
}
.site-header .mega-column > a:hover{
    color:#087f70;
    padding-left:14px;
}
.site-header .mega-column > a:hover::before{width:7px;}
.site-header .mega-group-title{
    margin-bottom:7px;
    padding-bottom:9px;
    color:#005292;
    font-family:Manrope,Inter,sans-serif;
    font-size:16px;
    font-weight:700;
    border-bottom:2px solid #e1eff1;
}

/* HEADER CTA */
.site-header .header-actions{
    display:flex;
    align-items:center;
    margin-left:25px;
}
.site-header a.main-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:11px 23px;
    background:#005292;
    color:#fff;
    border-radius:30px;
    font-size:14px;
    font-weight:600;
    white-space:nowrap;
    transition:background .3s ease,transform .3s ease,box-shadow .3s ease;
}
.site-header a.main-btn:hover{
    background:#51ac33;
    transform:translateY(-2px);
    box-shadow:0 8px 20px rgba(81,172,51,.22);
}

/* HAMBURGER */
.site-header .menu-toggle{
    display:none;
    width:42px;
    height:42px;
    padding:7px;
    margin-left:auto;
    border:0;
    outline:none;
    background:transparent;
    cursor:pointer;
    position:relative;
    z-index:10001;
}
.site-header .menu-toggle span{
    display:block;
    width:100%;
    height:2px;
    margin:6px 0;
    background:#06385d;
    border-radius:3px;
    transition:transform .3s ease,opacity .2s ease;
}
.site-header .menu-toggle.active span:nth-child(1){transform:translateY(8px) rotate(45deg);}
.site-header .menu-toggle.active span:nth-child(2){opacity:0;}
.site-header .menu-toggle.active span:nth-child(3){transform:translateY(-8px) rotate(-45deg);}

/* TABLET */
@media (max-width:1200px){
    .site-header{padding:0 3%;}
    .site-header .main-nav{gap:18px;margin-left:20px;}
    .site-header .main-nav > a,
    .site-header .nav-link{font-size:14px;}
    .site-header .header-actions{margin-left:15px;}
    .site-header a.main-btn{padding:10px 17px;font-size:13px;}
}

/* MOBILE / TABLET */
@media (max-width:991px){
    .site-header,
    .site-header.scrolled{
        height:72px;
        padding:0 22px;
    }
    .site-header .brand{width:100px;min-width:100px;}
    .site-header .header-actions{display:none;}
    .site-header .menu-toggle{display:block;}
    .site-header .main-nav{
        position:fixed;
        top:80px;
        right:0;
        bottom:0;
        left:0;
        width:100%;
        height:calc(100vh - 72px);
        display:block;
        margin:0;
        padding:10px 24px 40px;
        background:#fff;
        overflow-y:auto;
        overflow-x:hidden;
        -webkit-overflow-scrolling:touch;
        transform:translateX(100%);
        transition:transform .4s cubic-bezier(.2,.7,.2,1);
        box-shadow:-10px 0 35px rgba(0,0,0,.08);
        z-index:9997;
    }
    .site-header .main-nav.open{transform:translateX(0);}
    .site-header .main-nav > a,
    .site-header .nav-link{
        width:100%;
        min-height:56px;
        height:auto;
        display:flex;
        align-items:center;
        justify-content:space-between;
        padding:17px 0;
        border-bottom:1px solid #edf2f4;
        font-size:15px;
        color:#173e5b;
    }
    .site-header .main-nav > a::after,
    .site-header .nav-link::after{display:none;}
    .site-header .nav-item{
        display:block;
        height:auto;
        width:100%;
        border-bottom:1px solid #edf2f4;
    }
    .site-header .nav-item .nav-link{border-bottom:0;}
    .site-header .nav-chevron{font-size:15px;margin-right:4px;}

    /* MOBILE DROPDOWN */
    .site-header .mega-menu{
        position:static;
        width:100%;
        max-height:0;
        overflow:hidden;
        opacity:1;
        visibility:visible;
        pointer-events:auto;
        transform:none;
        border:0;
        box-shadow:none;
        background:#f7fbfc;
        transition:max-height .4s ease;
    }
    .site-header .nav-item.open > .mega-menu{max-height:1200px;}
    .site-header .mega-inner{
        width:100%;
        padding:8px 0 18px;
    }
    .site-header .mega-columns,
    .site-header .investor-columns,
    .site-header .mega-about .mega-columns{
        display:block;
    }
    .site-header .mega-column{
        width:100%;
        margin-bottom:8px;
    }
    .site-header .mega-column > a{
        padding:12px 10px;
        font-size:13px;
    }
    .site-header .mega-column > a:hover{padding-left:18px;}
    .site-header .mega-group-title{
        margin-top:8px;
        padding:10px;
        font-size:14px;
    }
}

/* SMALL MOBILE */
@media (max-width:560px){
    .site-header{padding:0 17px;}
    .site-header .brand{width:82px;min-width:82px;}
    .site-header .main-nav{padding-left:20px;padding-right:20px;}
    .site-header .main-nav > a,
    .site-header .nav-link{font-size:14px;}
}

/* FIX FOR ABOUT US DROPDOWN WIDTH */
@media (min-width:992px){
    .site-header .mega-menu.mega-about{
        width:300px;
        left:auto;
        right:auto;
    }
}

/* HERO */
.hero{height:720px;position:relative;display:flex;align-items:center;margin-top:78px;overflow:hidden;background:#174b67}
.hero-bg{position:absolute;inset:0;background-image:url("https://images.unsplash.com/photo-1576091160399-112ba8d25d1d?auto=format&fit=crop&w=2200&q=90");background-size:cover;background-position:center right;transform:scale(1.04);animation:heroZoom 9s ease-out forwards}
.hero-overlay{position:absolute;inset:0;background:linear-gradient(90deg,rgba(3,46,71,.95) 0%,rgba(3,55,80,.82) 34%,rgba(5,62,86,.18) 67%,rgba(0,35,58,.08))}
@keyframes heroZoom{to{transform:scale(1)}}
.hero-content{position:relative;z-index:2;color:#fff}
.hero-copy{max-width:600px;padding-top:22px}
.hero h1{font-size:54px;letter-spacing:-2px;margin-bottom:19px}
.hero h1 span{color:#d7f5ef}
.hero p{font-size:15px;max-width:500px;color:#e6f2f6;margin-bottom:28px}
.hero-buttons{display:flex;gap:14px;flex-wrap:wrap}
.btn{display:inline-flex;align-items:center;gap:13px;padding:14px 22px;border-radius:28px;font-size:16px;font-weight:600;transition:.35s var(--ease);border:1px solid transparent}
.btn b{font-size:16px;font-weight:400}
.btn-primary{background:var(--teal);color:#fff;box-shadow:0 9px 25px rgba(8,161,124,.2)}
.btn-primary:hover{background:#19c79a;transform:translateY(-3px);box-shadow:0 14px 30px rgba(8,161,124,.3)}
.btn-outline{border-color:rgba(255,255,255,.6);color:#fff;background:rgba(255,255,255,.03)}
.btn-outline:hover{background:#fff;color:var(--navy);transform:translateY(-3px)}
.hero-scroll{position:absolute;bottom:-270px;left:0;font-size:16px;opacity:.9;display:flex;gap:10px;align-items:center}
.hero-scroll span{font-size:9px;letter-spacing:1.5px;text-transform:uppercase}
.hero-number{position:absolute;right:3.5%;top:50%;transform:translateY(-50%);color:#fff;display:flex;flex-direction:column;gap:13px;align-items:center;font-size:9px}
.hero-number i{width:1px;height:62px;background:rgba(255,255,255,.6)}

/* PURPOSE */
.purpose{background:linear-gradient(100deg,#fff 0%,#f2fbfc 100%)}
.purpose-grid{display:grid;grid-template-columns:1.05fr 1fr;gap:58px;align-items:center}
.purpose-image{height:440px;position:relative;overflow:hidden}
.purpose-image img{height:100%;transition:1s var(--ease)}
.purpose-image:hover img{transform:scale(1.05)}
.image-shape{position:absolute;right:-2px;top:0;width:120px;height:100%;background:linear-gradient(90deg,transparent,#edf8fa);clip-path:polygon(65% 0,100% 0,100% 100%,0 100%)}
.purpose-copy{padding-right:65px;border-left:1px solid #54a6a0;padding-left:23px}
.purpose-copy h2{color:#07528a;margin-bottom:18px}
.text-link{font-size:16px;font-weight:700;color:var(--primary-color);display:inline-flex;gap:10px;align-items:center}
.text-link span{font-size:17px;transition:.3s}
.text-link:hover span{transform:translateX(5px)}

/* STATS */
.stats{padding:40px 0 34px;background:#fff}
.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);margin-top:18px}
.stat{position:relative;padding:9px 26px;display:grid;grid-template-columns:80px auto auto;grid-template-rows:auto auto;align-items:center;border-right:1px solid #8f8f8f;}
.stat:last-child{border-right:0}
.stat-icon{width:50px;height:50px;border:1px solid #cbe2eb;border-radius:50%;display:grid;place-items:center;color:#0b6595;font-size:19px;grid-row:1/3;margin-right:7px}
.stat strong{font-size:50px;color:#29a100}
.stat em{font-style:normal;font-weight:700;font-size:16px;color:#124f79;margin-left:3px}
.stat p{grid-column:2/4;line-height:1.35}
/* PRODUCT BANNER*/
.product-banner{height:310px;position:relative;overflow:hidden;color:#fff}
.product-banner-bg{position:absolute;inset:0;background:url("../images/product-banner.jpg") center/cover;transition:1.2s var(--ease)}
.product-banner:hover .product-banner-bg{transform:scale(1.04)}
.product-banner-overlay{position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,51,78,.96),rgba(0,53,77,.65) 45%,rgba(0,52,74,.28))}
.product-banner-content{height:100%;position:relative;display:flex;align-items:center;justify-content:space-between}
.product-banner h2{font-size:34px}
.product-tabs{display:flex;flex-direction:column;gap:17px;width:180px}
.product-tabs a{display:flex;justify-content:space-between;border-bottom:1px solid rgba(255,255,255,.22);padding-bottom:10px;font-size:18px}
.product-tabs span{color:#20c49a}
.circle-arrow{display:grid;place-items:center;width:31px;height:31px;border:1px solid #fff;border-radius:50%;font-size:17px;margin-top:25px;transition:.3s}
.circle-arrow:hover{background:#fff;color:var(--navy);transform:rotate(-35deg)}

/*CAPABILITIES*/
.capabilities{padding-bottom:65px}
.cap-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;margin-top:20px}
.cap-card{height:280px;position:relative;overflow:hidden;border-radius:3px;color:#fff}
.cap-card img{height:100%;transition:1s var(--ease)}
.cap-card:hover img{transform:scale(1.08)}
.cap-overlay{position:absolute;inset:0;background:linear-gradient(0deg,rgba(2,49,76,.92),rgba(3,49,74,.08) 70%)}
.cap-card div{position:absolute;left:20px;right:20px;bottom:18px}
.cap-card small{display:block;font-size:24px;letter-spacing:1.7px;margin-bottom:4px}
.cap-card strong{font-size:16px;font-weight:500}
.cap-card b{float:right;width:34px;height:34px;border:1px solid rgba(255,255,255,.7);border-radius:50%;display:grid;place-items:center;font-weight:400}

/* REACH */
.global-reach{position: relative;}
.reach-grid{display:grid;grid-template-columns:1fr 1.4fr .6fr;align-items:center;gap:28px}
.reach-copy h2{color:#0c5585;margin-bottom:17px}
.map-area{height:250px;position:relative;display:grid;place-items:center;color:#acd7df;text-align:center}
.world-map{font-family:Manrope;font-weight:700;letter-spacing:6px;font-size:32px;line-height:1.3;opacity:.7}
.route{position:absolute;height:1px;background:#45b6a5;transform-origin:left center;border-top:1px dashed #45b6a5}
.route-1{width:170px;transform:rotate(21deg);left:40%;top:43%}
.route-2{width:130px;transform:rotate(-26deg);left:44%;top:51%}
.route-3{width:110px;transform:rotate(39deg);left:48%;top:55%}
.pin{position:absolute;width:7px;height:7px;background:#11a77f;border:2px solid #d6f6ee;border-radius:50%;box-shadow:0 0 0 4px rgba(17,167,127,.12);animation:pulse 2s infinite}
.p1{left:46%;top:42%}.p2{left:57%;top:48%}.p3{left:52%;top:65%}.p4{left:66%;top:59%}
@keyframes pulse{50%{box-shadow:0 0 0 9px rgba(17,167,127,0)}}
.key-markets ul{list-style:none;margin-top:10px}
.key-markets li{font-size:18px;margin:7px 0}

/* QUALITY + PORTFOLIO */
.quality-portfolio{display:grid;grid-template-columns:.9fr 1.1fr;min-height:420px}
.quality-block{position:relative;overflow:hidden;color:#fff}
.quality-bg{position:absolute;inset:0;background:url("https://images.unsplash.com/photo-1535223289827-42f1e9919769?auto=format&fit=crop&w=1400&q=85") center/cover}
.quality-overlay{position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,62,70,.93),rgba(5,87,83,.53))}
.quality-content{position:relative;padding:62px 8%}
.quality-content h2{font-size:32px;margin-bottom:14px}
.quality-content p{font-size:16px;max-width:390px;color:#e4f1f0;margin-bottom:22px}
.portfolio{background:#f7fbfc;padding:45px 6%}
.portfolio-head h3{font-size:16px;color:#0b4c79;margin-top:3px}
.portfolio-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:19px}
.medicine-card{background:#fff;border:1px solid #e1edf0;border-radius:5px;padding:11px;transition:.35s var(--ease)}
.medicine-card:hover{transform:translateY(-7px);box-shadow:0 15px 35px rgba(14,67,91,.1)}
.medicine-img{height:170px;background:#f2f6f7;overflow:hidden;border-radius:3px;margin-bottom:10px}
.medicine-img img{height:100%;mix-blend-mode:multiply;transition:.5s}
.medicine-card:hover img{transform:scale(1.06)}
.medicine-card h4{font-size:16px;}
.medicine-card p{font-size:14px;margin-top:4px}

/* FINAL CTA */
.final-cta{height:275px;position:relative;color:#fff;overflow:hidden}
.final-bg{position:absolute;inset:0;background:url("../images/client-handshake.png") center/cover}
.final-overlay{position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,65,91,.94),rgba(0,72,94,.66),rgba(0,53,73,.25))}
.final-content{position:relative;padding-top:40px}
.final-content h2{font-size:31px;margin-bottom:8px}
.final-content p{font-size:16px;color:#dcebef;margin-bottom:17px}

/* FOOTER */
footer{background:#023450;color:#d6e5eb;padding:36px 0 42px}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1.2fr 1.1fr 1fr;gap:28px}
.brand-footer{margin-bottom:35px}
.footer-brand>p{font-size:16px;}
footer h5{font-size:20px;color:#fff;margin-bottom:11px}
footer>div a, footer .footer-grid>div>a{font-size:16px;margin:6px 0;transition:.2s}
footer a:hover{color:#4ee1bb}
.socials{display:flex;gap:8px}
.socials a{display:grid!important;place-items:center;width:35px;height:35px;border:1px solid #557c8c;border-radius:5px;margin:0!important}
.footer-tag{font-size:14px; margin-top:24px}
.back-top{position:fixed;right:20px;bottom:20px;width:42px;height:42px;border-radius:50%;border:0;background:var(--teal);color:#fff;z-index:800;cursor:pointer;opacity:0;visibility:hidden;transform:translateY(10px);transition:.3s}
.back-top.show{opacity:1;visibility:visible;transform:none}

/* REVEAL ANIMATIONS */
.reveal,.reveal-left,.reveal-right{opacity:0;transition:1s var(--ease)}
.reveal{transform:translateY(35px)}
.reveal-left{transform:translateX(-45px)}
.reveal-right{transform:translateX(45px)}
.visible{opacity:1;transform:none}


@media(max-width:850px){
  .site-header{height:70px;padding:0 22px}
  .header-actions{margin-left:auto;margin-right:14px}
  .menu-toggle{display:block;z-index:1002}
  .main-nav{position:fixed;inset:70px 0 0;background:#fff;display:flex;flex-direction:column;justify-content:flex-start;align-items:flex-start;padding:28px 25px;gap:0;transform:translateX(100%);transition:.45s var(--ease);box-shadow:-10px 0 30px rgba(0,0,0,.08)}
  .main-nav.open{transform:translateX(0)}
  .main-nav a{width:100%;padding:16px 0;border-bottom:1px solid #edf2f4;font-size:13px}
  .main-nav a:after{left:0;transform:none}
  .main-nav a.active:after{width:25px}
  .menu-toggle.active span:nth-child(1){transform:translateY(8px) rotate(45deg)}
  .menu-toggle.active span:nth-child(2){opacity:0}
  .menu-toggle.active span:nth-child(3){transform:translateY(-8px) rotate(-45deg)}
  .hero{height:650px;margin-top:70px}
  .hero h1{font-size:43px}
  .purpose-grid,.reach-grid{grid-template-columns:1fr}
  .purpose-copy{padding:20px 0 0;border-left:0;border-top:1px solid #54a6a0}
  .purpose-image{height:290px}
  .stats-grid{grid-template-columns:repeat(3,1fr);gap:10px}
  .stat:nth-child(3){border-right:0}.stat:nth-child(n+4){margin-top:12px}
  .cap-grid{grid-template-columns:1fr}
  .cap-card{height:250px}
  .reach-grid{gap:10px}
  .map-area{height:200px;order:3}
  .key-markets{order:2}
  .quality-portfolio{grid-template-columns:1fr}
  .quality-block{min-height:350px}
  .portfolio-grid{grid-template-columns:repeat(3,1fr)}
  .footer-grid{grid-template-columns:repeat(3,1fr)}
  .footer-brand{grid-column:1/-1}
}
@media(max-width:560px){
  .container{width:calc(100% - 34px)}
  .brand-text strong{font-size:16px}
  .brand{min-width:auto}
  .header-actions{display:none}
  .hero{height:640px}
  .hero h1{font-size:36px;letter-spacing:-1.3px}
  .hero p{font-size:13px}
  .hero-number{display:none}
  .hero-scroll{bottom:-245px}
  h2{font-size:31px}
  .section-pad{padding:55px 0}
  .stats-grid{grid-template-columns:1fr 1fr}
  .stat{border-right:0;border-bottom:1px solid #e3edf0;padding:14px 5px; grid-template-columns: 60px auto auto;}
  .stat:last-child{grid-column:1/-1}
  .product-banner{height:390px}
  .product-banner-content{align-items:flex-start;padding-top:45px;flex-direction:column;justify-content:flex-start}
  .product-tabs{margin-top:32px;width:100%}
  .portfolio{padding:38px 17px}
  .portfolio-grid{grid-template-columns:1fr}
  .medicine-img{height:150px}
  .final-cta{height:310px}
  .footer-grid{grid-template-columns:1fr 1fr;gap:25px}
  .footer-brand{grid-column:1/-1}
  
}
/* =========================
   HERO SLIDER
========================= */

.hero-slider {
    position: relative;
    width: 100%;
    height: 800px;
    min-height: 650px;
    overflow: hidden;
    background: #111;
}

.hero-slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    visibility: hidden;
    transition: opacity 1s ease, visibility 1s ease;
}

.hero-slide.active {
    opacity: 1;
    visibility: visible;
    z-index: 2;
}


/* VIDEO */

.hero-slide img {
    position: absolute;
    inset: 0;

    width: 100%;
    height: 100%;

    object-fit: cover;
}


/* DARK OVERLAY */

.hero-overlay {
    position: absolute;
    inset: 0;

    background:
       linear-gradient(90deg,rgba(3,46,71,.95) 0%,rgba(3,55,80,.82) 34%,rgba(5,62,86,.18) 67%,rgba(0,35,58,.08));

    z-index: 1;
}


/* CONTENT */

.hero-content {
    position: relative;
    z-index: 3;

    width: min(1200px, 90%);
    height: 100%;

    margin: auto;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
}


/* SUBTITLE */

.hero-subtitle {
    display: block;

    font-size: 14px;
    font-weight: 600;
    letter-spacing: 3px;

    color: #fff;

    margin-bottom: 20px;

    opacity: 0;
    transform: translateY(30px);
}


/* HEADING */

.hero-content h1 {
    margin: 0;
    max-width: 900px;
    color: #fff;
    font-size: 70px;
    line-height: 80px;
    font-weight: 700;
    opacity: 0;
    transform: translateY(50px);
}

.hero-content h1 strong {
    font-weight: 800;
}


/* DESCRIPTION */

.hero-content p {
    max-width: 600px;

    margin: 30px 0;

    color: rgba(255,255,255,.85);

    font-size: 18px;
    line-height: 1.7;

    opacity: 0;
    transform: translateY(30px);
}


/* BUTTON */

.hero-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: 15px 32px;

    background: #fff;
    color: #111;

    text-decoration: none;

    font-size: 15px;
    font-weight: 600;

    border-radius: 50px;

    transition: .3s;

    opacity: 0;
    transform: translateY(30px);
}

.hero-btn:hover {
    background: #111;
    color: #fff;
    transform: translateY(-3px);
}


/* =========================
   SLIDE TEXT ANIMATION
========================= */

.hero-slide.active .hero-subtitle {
    animation: slideUp .8s .2s forwards;
}

.hero-slide.active h1 {
    animation: slideUp 1s .35s forwards;
}

.hero-slide.active p {
    animation: slideUp .8s .55s forwards;
}

.hero-slide.active .hero-btn {
    animation: slideUp .8s .7s forwards;
}


@keyframes slideUp {

    to {
        opacity: 1;
        transform: translateY(0);
    }

}


/* =========================
   ARROWS
========================= */

.slider-arrow {
    position: absolute;

    top: 50%;
    transform: translateY(-50%);

    width: 55px;
    height: 55px;

    border: 1px solid rgba(255,255,255,.4);

    border-radius: 50%;

    background: rgba(0,0,0,.25);

    color: #fff;

    font-size: 20px;

    cursor: pointer;

    z-index: 10;

    transition: .3s;
}

.slider-arrow:hover {
    background: #fff;
    color: #111;
}

.slider-arrow.prev {
    left: 30px;
}

.slider-arrow.next {
    right: 30px;
}


/* =========================
   DOTS
========================= */

.slider-dots {
    position: absolute;

    bottom: 40px;
    left: 50%;

    transform: translateX(-50%);

    display: flex;
    gap: 10px;

    z-index: 10;
}

.dot {
    width: 35px;
    height: 4px;

    padding: 0;
    border: 0;

    background: rgba(255,255,255,.4);

    cursor: pointer;

    transition: .4s;
}

.dot.active {
    width: 60px;
    background: #fff;
}


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

@media (max-width: 768px) {

    .hero-slider {
        height: 750px;
        min-height: 650px;
    }

    .hero-content {
        width: 88%;
    }

    .hero-content h1 {
        font-size: clamp(42px, 12vw, 65px);
    }

    .hero-content p {
        font-size: 16px;
        line-height: 1.6;
    }

    .slider-arrow {
        width: 42px;
        height: 42px;
        font-size: 16px;
    }

    .slider-arrow.prev {
        left: 15px;
    }

    .slider-arrow.next {
        right: 15px;
    }

    .slider-dots {
        bottom: 25px;
    }

}

.bg-shape-1 {
    position: absolute;
    right: -80px;
    bottom: 0;
    width: 70%;
    background-position: right;
    background-size: contain;
    height: 70%;
    background-repeat: no-repeat;
    z-index: -1;
    opacity: 0.3;
}
/* =========================================
   ABOUT US - IMAGE + CONTENT
========================================= */

.about-section {
    width: 100%;
    display: grid;
    grid-template-columns: 50% 50%;
    background: #f5fafb;
}

/* LEFT IMAGE */
.about-image {
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.about-image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    transition: transform 0.8s ease;
}

.about-section:hover .about-image img {
    transform: scale(1.04);
}

/* RIGHT CONTENT */
.about-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 30px 8%;
    background: #f5fafb;
}

.about-eyebrow {
    display: inline-block;
    color: var(--primary-color);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 2.5px;
    margin-bottom: 18px;
}

.about-content h2 {
    max-width: 620px;
    font-size: 42px;
    font-weight: 500;
    line-height: 1.12;
    letter-spacing: -1.5px;
    margin: 0 0 22px;
}

.about-content h2 strong {
    display: block;
    color: var(--primary-color);
    font-weight: 600;
}

.about-content > p {
    max-width: 610px;
    font-size: 16px;
    line-height: 1.8;
    margin-bottom: 14px;
}

/* POINTS */
.about-points {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 25px;
    max-width: 650px;
    margin: 22px 0 28px;
}

.about-point {
    display: flex;
    gap: 13px;
    align-items: flex-start;
}

.about-point > span {
    flex: 0 0 34px;
    width: 34px;
    height: 34px;
    border: 1px solid #9ed5cc;
    border-radius: 50%;
    display: grid;
    place-items: center;
    color: var(--primary-color);
    font-size: 10px;
    font-weight: 700;
}

.about-point h4 {
    margin: 2px 0 5px;
    color: var(--secondary-color);
    font-size: 14px;
    font-weight: 700;
}

.about-point p {
    color: #6c8492;
    font-size: 11px;
    line-height: 1.6;
    margin: 0;
}

/* BUTTON */
.about-btn {
    width: fit-content;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 13px 22px;
    border-radius: 30px;
    background: var(--secondary-color);
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    transition: all 0.3s ease;
}

.about-btn span {
    font-size: 17px;
    transition: transform 0.3s ease;
}

.about-btn:hover {
    background: var(--primary-color);
    color: #fff;
    transform: translateY(-3px);
}

.about-btn:hover span {
    transform: translateX(5px);
}


/* =========================================
   TABLET
========================================= */

@media (max-width: 900px) {

    .about-section {
        grid-template-columns: 45% 55%;
        min-height: 540px;
    }

    .about-image {
        min-height: 540px;
    }

    .about-content {
        padding: 50px 6%;
    }

    .about-content h2 {
        font-size: 32px;
    }

    .about-content > p {
        font-size: 12px;
    }

    .about-points {
        gap: 15px;
    }
}


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

@media (max-width: 650px) {

    .about-section {
        display: block;
    }

    .about-image {
        width: 100%;
        height: 330px;
        min-height: 330px;
    }

    .about-content {
        padding: 45px 25px 50px;
    }

    .about-content h2 {
        font-size: 30px;
        letter-spacing: -1px;
    }

    .about-content > p {
        font-size: 13px;
        line-height: 1.7;
    }

    .about-points {
        grid-template-columns: 1fr;
        gap: 18px;
        margin: 20px 0 25px;
    }
}
.globe {
    position: absolute;
    width: 100%;
    height: 100%;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    z-index: -1;
    opacity: 0.3;
}
.key-markets ul {
  list-style: none;
  padding-left: 0px;
}
.key-markets ul li i {
    color: #005292;
    padding-right: 10px;
}
.footer-logo {
    width: 100px;
    background: #fff;
    padding: 10px;
    border-radius: 10px;
    margin-bottom: 10px;
}
p.f-desc {
    font-size: 16px;
}
.footer-box .inner h4 {
    padding-bottom: 10px;
}
.footer-bottom {text-align: center;background-color: #002e47;padding: 20px;}

.footer-bottom p, a {color: #fff;}

@media screen and (max-width:1399px) {
  .hero-slider{
    height: 650px;
  }
  .site-header{
    padding: 10px 20px;
  }
  .main-nav{
    gap: 15px;
  }
  .container {
    width: 100%;
    max-width: 1260px;
    margin: 0 auto;
  }
  .eyebrow{
    font-size: 24px;
  }
  .medicine-img{
    height: 110px;
  }
  footer>div a, footer .footer-grid>div>a{
    font-size: 14px;
  }
.footer-box .inner p {
    font-size: 14px;
}
.hero-content h1{
  font-size: 50px;
  line-height: 60px;
}
.about-content h2{
    font-size: 32px;
  }
  .about-image{
    height: 470px;
  }
  .about-image img{
    object-fit: cover;
  }
}

@media screen and (max-width: 1199px) {
  .stat strong {
    font-size: 24px;
  }
  .stat p{
    font-size: 14px;
  }
  .about-content h2{
    font-size: 32px;
  }
}
.loader-logo{
  width: 150px;
}
/* =========================================
   VIDEO HERO SECTION
========================================= */

.hero-video {
    position: relative;
    width: 100%;
    height: 680px;
    margin-top: 78px;
    overflow: hidden;
    display: flex;
    align-items: center;
    background: #06385d;
}

/* BACKGROUND VIDEO */
.hero-video-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
}

/* DARK / BLUE OVERLAY */
.hero-video-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;

    background:
        linear-gradient(
            90deg,
            rgba(2, 43, 67, .94) 0%,
            rgba(3, 55, 80, .82) 35%,
            rgba(3, 55, 80, .40) 65%,
            rgba(3, 55, 80, .12) 100%
        );
}

/* CONTENT */
.hero-video-content {
    position: relative;
    z-index: 2;
}

.hero-text {
    max-width: 650px;
    color: #fff;
    padding-top: 20px;
}

.hero-video .hero-subtitle {
    display: inline-block;
    margin-bottom: 20px;

    font-size: 11px;
    font-weight: 700;
    letter-spacing: 3px;
    color: #65d5b5;
}

.hero-video h1 {
    margin: 0 0 22px;

    font-family: Manrope, Inter, sans-serif;
    font-size: 48px;
    font-weight: 400;
    line-height: 60px;
    letter-spacing: -2.5px;
    color: #fff;
}

.hero-video h1 strong {
    color: #6bd8ba;
    font-weight: 600;
}

.hero-video p {
    max-width: 540px;
    margin-bottom: 32px;

    color: rgba(255,255,255,.82);
    font-size: 15px;
    line-height: 1.8;
}

/* BUTTONS */
.hero-buttons {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
}

.hero-btn {
    display: inline-flex;
    align-items: center;
    gap: 14px;

    padding: 14px 24px;
    border-radius: 30px;

    background: #12a982;
    color: #fff;

    font-size: 12px;
    font-weight: 700;

    transition: .35s ease;
}

.hero-btn span {
    font-size: 18px;
    transition: .3s ease;
}

.hero-btn:hover {
    background: #fff;
    color: var(--secondary-color);
    transform: translateY(-3px);
}

.hero-btn:hover span {
    transform: translateX(5px);
}

.hero-btn-outline {
    display: inline-flex;
    align-items: center;
    padding: 13px 23px;
    border: 1px solid rgba(255,255,255,.55);
    border-radius: 30px;
    color: #fff;
    background: rgba(255,255,255,.05);
    font-size: 16px;
    font-weight: 600;

    transition: .35s ease;
}

.hero-btn-outline:hover {
    background: #fff;
    border-color: #fff;
    color: var(--secondary-color);
    transform: translateY(-3px);
}

/* SCROLL INDICATOR */
.hero-video .hero-scroll {
    position: absolute;
    z-index: 3;

    left: 5%;
    bottom: 32px;

    display: flex;
    align-items: center;
    gap: 12px;

    color: rgba(255,255,255,.8);

    font-size: 9px;
    letter-spacing: 2px;
}

.hero-video .hero-scroll i {
    display: block;
    width: 45px;
    height: 1px;
    background: rgba(255,255,255,.7);

    position: relative;
    overflow: hidden;
}

.hero-video .hero-scroll i::after {
    content: "";
    position: absolute;
    left: -100%;
    top: 0;
    width: 100%;
    height: 100%;
    background: #65d5b5;

    animation: scrollLine 2s infinite ease-in-out;
}

@keyframes scrollLine {
    0% {
        left: -100%;
    }

    50% {
        left: 0;
    }

    100% {
        left: 100%;
    }
}


/* =========================================
   TABLET
========================================= */

@media (max-width: 900px) {

    .hero-video {
        height: 680px;
        min-height: 600px;
    }

    .hero-text {
        max-width: 560px;
    }

    .hero-video h1 {
        font-size: 50px;
    }
}


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

@media (max-width: 650px) {

    .hero-video {
        height: 650px;
        min-height: 600px;
        margin-top: 70px;
    }

    .hero-video-bg {
        object-position: 65% center;
    }

    .hero-video-overlay {
        background:
            linear-gradient(
                90deg,
                rgba(2,43,67,.94),
                rgba(3,55,80,.65)
            );
    }

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

    .hero-text {
        padding: 20px 10px;
    }

    .hero-video .hero-subtitle {
        font-size: 9px;
        letter-spacing: 2px;
    }

    .hero-video h1 {
        font-size: 38px;
        line-height: 46px;
        letter-spacing: -1.5px;
    }

    .hero-video p {
        font-size: 13px;
        line-height: 1.7;
    }

    .hero-buttons {
        gap: 10px;
    }

    .hero-btn,
    .hero-btn-outline {
        font-size: 11px;
        padding: 12px 18px;
    }

    .hero-video .hero-scroll {
        left: 25px;
        bottom: 22px;
    }
}
section.page-banner {background-size: cover;padding: 180px 0px;background-position: center;position: relative;z-index: 1;}

.page-banner-content {
    text-align: center;
    position: relative;
}

section.page-banner:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgb(0 82 146 / 50%);
    z-index: 0;
}

.page-banner-content h1 {
    color: #fff;
    font-size: 48px;
    font-weight: 700;
}

/* =========================================================
   CLAROID INNER PAGES
   Master layout for pages such as Our Story
   Keep this CSS in css/style.css - no separate inner CSS.
   ========================================================= */

.inner-story{background:#fff}

.story-intro{padding:90px 0 80px;background:#fff}
.story-intro-grid{display:grid;grid-template-columns:1fr 1fr;gap:70px;align-items:center}
.story-intro-image{position:relative;overflow:hidden;border-radius:4px;background:#eef6f7;aspect-ratio:4/3}
.story-intro-image img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}
.story-intro-image:hover img{transform:scale(1.04)}
.story-intro-copy{padding-right:25px}
.story-eyebrow{display:inline-block;color:var(--primary-color);font-size:11px;font-weight:700;letter-spacing:2.5px;text-transform:uppercase;margin-bottom:16px}
.story-intro-copy h2{color:var(--secondary-color);font-size:42px;line-height:1.12;margin:0 0 20px}
.story-intro-copy h2 strong{color:var(--primary-color);font-weight:600}
.story-intro-copy p{color:#587384;font-size:16px;line-height:1.85;margin-bottom:15px}

.story-statement{padding:78px 0;background:#f4fafb}
.story-statement-box{max-width:980px;margin:auto;text-align:center}
.story-statement-box h2{color:var(--secondary-color);font-size:38px;line-height:1.2;margin-bottom:18px}
.story-statement-box p{color:#637d8c;max-width:820px;margin:0 auto;font-size:16px;line-height:1.8}

.story-milestones{padding:90px 0;background:#fff}
.story-section-head{max-width:720px;margin:0 auto 50px;text-align:center}
.story-section-head .story-eyebrow{margin-bottom:12px}
.story-section-head h2{color:var(--secondary-color);font-size:40px;margin-bottom:14px}
.story-section-head p{color:#6a8290;font-size:15px}

.story-timeline{position:relative;max-width:1050px;margin:0 auto}
.story-timeline:before{content:"";position:absolute;left:50%;top:0;bottom:0;width:1px;background:#cfe2e7;transform:translateX(-50%)}
.story-milestone{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:60px;margin-bottom:42px}
.story-milestone:last-child{margin-bottom:0}
.story-milestone:nth-child(odd) .story-milestone-content{grid-column:1;text-align:right;padding-right:25px}
.story-milestone:nth-child(even) .story-milestone-content{grid-column:2;text-align:left;padding-left:25px}
.story-year{color:var(--primary-color);font-family:Manrope,Inter,sans-serif;font-size:30px;font-weight:700;line-height:1;margin-bottom:8px}
.story-milestone-content h3{color:var(--secondary-color);font-size:20px;line-height:1.3;margin-bottom:8px;font-weight:600}
.story-milestone-content p{color:#6b8290;font-size:14px;line-height:1.7;margin:0}
.story-dot{position:absolute;left:50%;top:4px;width:13px;height:13px;border-radius:50%;background:var(--primary-color);border:3px solid #fff;box-shadow:0 0 0 1px #9ed5cc;transform:translateX(-50%);z-index:2}

.story-cta{padding:75px 0;background:linear-gradient(110deg,#043b5b,#075b79);color:#fff}
.story-cta-inner{display:flex;align-items:center;justify-content:space-between;gap:35px}
.story-cta h2{color:#fff;font-size:34px;margin:0 0 10px}
.story-cta p{color:rgba(255,255,255,.78);max-width:650px;margin:0}
.story-cta .about-btn{flex:0 0 auto;background:#12a982}
.story-cta .about-btn:hover{background:#fff;color:var(--secondary-color)}

@media(max-width:900px){
    .story-intro{padding:65px 0}
    .story-intro-grid{grid-template-columns:1fr;gap:40px}
    .story-intro-copy{padding-right:0}
    .story-intro-copy h2{font-size:34px}
    .story-milestone{gap:35px}
    .story-milestone:nth-child(odd) .story-milestone-content,
    .story-milestone:nth-child(even) .story-milestone-content{padding-left:20px;padding-right:20px}
    .story-cta-inner{align-items:flex-start;flex-direction:column}
}

@media(max-width:650px){
    section.page-banner{padding:145px 0 115px}
    .page-banner-content h1{font-size:38px}
    .story-intro{padding:50px 0}
    .story-intro-grid{gap:30px}
    .story-intro-image{aspect-ratio:4/3}
    .story-intro-copy h2{font-size:30px}
    .story-intro-copy p{font-size:14px;line-height:1.75}
    .story-statement{padding:55px 0}
    .story-statement-box h2{font-size:29px}
    .story-statement-box p{font-size:14px}
    .story-milestones{padding:55px 0}
    .story-section-head{margin-bottom:35px}
    .story-section-head h2{font-size:31px}
    .story-timeline{padding-left:28px}
    .story-timeline:before{left:6px;transform:none}
    .story-milestone{display:block;margin-bottom:30px}
    .story-milestone:nth-child(odd) .story-milestone-content,
    .story-milestone:nth-child(even) .story-milestone-content{padding:0 0 0 18px;text-align:left}
    .story-dot{left:0;top:3px;transform:translateX(-50%)}
    .story-year{font-size:25px}
    .story-milestone-content h3{font-size:18px}
    .story-milestone-content p{font-size:13px}
    .story-cta{padding:55px 0}
    .story-cta h2{font-size:29px}
    .story-cta p{font-size:14px}
}

/* =========================================================
   OUR LEADERSHIP PAGE
========================================================= */

.leadership-banner {
    background-position: center center;
    background-size: cover;
}


/* =========================================================
   LEADERSHIP INTRO
========================================================= */

.leadership-intro {
    background: #ffffff;
        padding: 60px 0px;
}

.leadership-intro .inner-title {
    max-width: 520px;
}

.leadership-intro .inner-copy {
    margin-bottom: 18px;
}


/* =========================================================
   LEADERSHIP TEAM SECTION
========================================================= */

.leadership-team {
    background: #f4fafb;
  padding: 60px 0px;
}


/* =========================================================
   LEADERSHIP PROFILE
========================================================= */

.leadership-profile {
    position: relative;
    background: #ffffff;
    border: 1px solid #dcebed;
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 28px;

    box-shadow:
        0 8px 30px rgba(7, 82, 138, 0.05);

    transition:
        transform 0.4s ease,
        box-shadow 0.4s ease;
}

.leadership-profile:hover {
    transform: translateY(-5px);

    box-shadow:
        0 20px 45px rgba(7, 82, 138, 0.10);
}


/* =========================================================
   LEFT VISUAL PANEL
========================================================= */

.leader-visual {
    position: relative;
    height: 100%;
    min-height: 330px;
    padding: 40px;
    padding-bottom: 0px;
    color: #ffffff;
    background:
      #bfe3ff
}


/* Decorative circle */

.leader-visual::before {
    content: "";

    position: absolute;

    width: 280px;
    height: 280px;

    right: -150px;
    top: -120px;

    border: 1px solid rgba(255, 255, 255, 0.12);

    border-radius: 50%;
}


/* Bottom decorative circle */

.leader-visual::after {
    content: "";

    position: absolute;

    width: 230px;
    height: 230px;

    right: -100px;
    bottom: -120px;

    border: 1px solid rgba(255, 255, 255, 0.12);

    border-radius: 50%;
}


/* =========================================================
   NUMBER
========================================================= */

.leader-number {
    position: absolute;

    top: 24px;
    right: 30px;

    z-index: 2;

    font-family: "Manrope", sans-serif;

    font-size: 58px;
    font-weight: 700;

    line-height: 1;

    color: rgba(255, 255, 255, 0.13);
}


/* =========================================================
   LEADER ICON
========================================================= */

.leader-icon {
    position: relative;
    z-index: 3;

    width: 82px;
    height: 82px;

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

    margin-bottom: 25px;

    border-radius: 50%;

    font-size: 30px;

    color: #ffffff;

    border: 1px solid rgba(255, 255, 255, 0.30);

    background: rgba(255, 255, 255, 0.07);

    backdrop-filter: blur(5px);

    transition: 0.4s ease;
}

.leadership-profile:hover .leader-icon {
    transform: scale(1.08) rotate(4deg);

    background: rgba(255, 255, 255, 0.13);
}


/* =========================================================
   DESIGNATION
========================================================= */

.leader-visual > span {
    position: relative;
    z-index: 3;

    display: inline-block;

    font-size: 10px;

    font-weight: 800;

    letter-spacing: 2px;

    line-height: 1.6;

    color: #a9eadc;
}


/* =========================================================
   CONTENT
========================================================= */

.leader-content {
    height: 100%;

    padding: 42px 45px;

    display: flex;
    flex-direction: column;
    justify-content: center;
}


/* =========================================================
   BADGE
========================================================= */

.leader-content .badge-soft {
    width: fit-content;

    max-width: 100%;

    margin-bottom: 4px;

    line-height: 1.5;
}


/* =========================================================
   DIRECTOR NAME
========================================================= */

.leader-content h3 {
    margin-top: 15px;
    margin-bottom: 20px;
    font-family: "Manrope", sans-serif;
    font-size: 30px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.5px;
    color: #07528a;
}
/* =========================================================
   PROFILE TEXT
========================================================= */
.leader-content p {
    margin-bottom: 17px;
    line-height: 1.8;
}
/* =========================================================
   LEADERSHIP VALUES
========================================================= */
.leadership-values {
    background: #ffffff;
    padding: 60px 0px;
}
.leadership-values .inner-title {
    max-width: 540px;
}

/* =========================================================
   VALUE CARDS
========================================================= */
.leadership-values .inner-card {
    min-height: 205px;
    padding: 28px;
    background: #ffffff;
    border: 1px solid #dcebed;
    border-radius: 7px;
    transition: all 0.35s ease;
}
.leadership-values .inner-card:hover {
    transform: translateY(-6px);
    border-color: #a8ded4;
    box-shadow: 0 18px 35px rgba(7, 82, 138, 0.08);
}

/* =========================================================
   VALUE ICON
========================================================= */
.leadership-values .inner-card .icon {
    width: 62px;
    height: 62px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 18px;
    border-radius: 50%;
    color: var(--primary-color);
    background: #eaf8f4;
    font-size: 30px;
    transition: 0.35s ease;
}
.leadership-values .inner-card:hover .icon {
    color: #ffffff;
    background: var(--primary-color);
    transform: scale(1.08);
}

/* =========================================================
   VALUE TITLE
========================================================= */

.leadership-values .inner-card h3 {
    margin-bottom: 10px;
    font-family: "Manrope", sans-serif;
    font-size: 19px;
    font-weight: 700;
    color: #07528a;
}

/* =========================================================
   VALUE TEXT
========================================================= */
.leadership-values .inner-card p {
    margin: 0;
    font-size: 16px;
    line-height: 1.7;
}
/* =========================================================
   CTA
========================================================= */

.page-cta {
    position: relative;
    padding: 75px 0;
    overflow: hidden;
    background: var(--primary-color);
    color: #ffffff;
}

.page-cta::before {
    content: "";
    position: absolute;
    width: 500px;
    height: 500px;
    right: -150px;
    top: -250px;
    border-radius: 50%;
    background:
    radial-gradient(
        circle,
        rgba(22, 182, 139, 0.20),
        transparent 65%
    );
}

.page-cta .container {
    position: relative;
    z-index: 2;
}

.page-cta h2 {
    margin-bottom: 15px;
    font-family: "Manrope", sans-serif;
    font-size: clamp(30px, 4vw, 46px);
    font-weight: 600;
    line-height: 1.15;
    letter-spacing: -1px;
}

.page-cta p {
    max-width: 700px;
    margin-bottom: 0;
    font-size: 15px;
    line-height: 1.7;
    color: #d3e5eb;
}


/* =========================================================
   CTA BUTTON
========================================================= */

.btn-inner {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 13px 24px;
    border: 0;
    border-radius: 50px;
    background: #005292;
    color: #ffffff;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s ease;
}

.btn-inner:hover {
    color: #ffffff;
    background: #62b546;
    transform: translateY(-3px);
    box-shadow:
        0 10px 25px rgba(0, 0, 0, 0.15);
}
.btn-inner i {
    transition: transform 0.3s ease;
}
.btn-inner:hover i {
    transform: translateX(4px);
}

/* =========================================================
   SCROLL REVEAL
========================================================= */
.reveal,
.reveal-left,
.reveal-right {
    opacity: 0;
    transition:
        opacity 0.8s ease,
        transform 0.8s ease;
}
.reveal {
    transform: translateY(30px);
}

.reveal-left {
    transform: translateX(-40px);
}

.reveal-right {
    transform: translateX(40px);
}

.reveal.visible,
.reveal-left.visible,
.reveal-right.visible {
    opacity: 1;

    transform: translate(0);
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 991px) {

    .leadership-profile {
        margin-bottom: 24px;
    }

    .leader-visual {
        min-height: 240px;

        padding: 35px;
    }

    .leader-content {
        padding: 35px;
    }

    .leader-content h3 {
        font-size: 27px;
    }

    .leader-content p {
        font-size: 14px;
    }

    .leadership-values .inner-card {
        min-height: 190px;
    }

}


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

@media (max-width: 767px) {

    .leadership-banner {
        min-height: 280px;

        background-position: center;
    }


    .leader-visual {
        min-height: 210px;

        padding: 30px;
    }


    .leader-number {
        top: 20px;
        right: 22px;

        font-size: 48px;
    }


    .leader-icon {
        width: 68px;
        height: 68px;

        font-size: 25px;

        margin-bottom: 18px;
    }


    .leader-content {
        padding: 28px 24px;
    }


    .leader-content h3 {
        margin-top: 12px;

        font-size: 25px;

        line-height: 1.25;
    }


    .leader-content p {
        font-size: 14px;

        line-height: 1.75;
    }


    .leader-content .badge-soft {
        font-size: 9px;

        letter-spacing: 0.8px;
    }


    .leadership-values .inner-card {
        min-height: auto;

        padding: 24px;
    }


    .page-cta {
        padding: 55px 0;
    }


    .page-cta h2 {
        font-size: 30px;
    }


    .page-cta .btn-inner {
        margin-left: 0 !important;

        margin-top: 12px;
    }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 480px) {

    .leader-visual {
        min-height: 190px;

        padding: 25px;
    }


    .leader-number {
        font-size: 42px;
    }


    .leader-content {
        padding: 24px 18px;
    }


    .leader-content h3 {
        font-size: 23px;
    }


    .leader-content p {
        font-size: 13.5px;

        line-height: 1.7;
    }


    .leadership-intro .inner-title {
        font-size: 32px;
    }


    .leadership-values .inner-title {
        font-size: 32px;
    }

}

.leader-img img {
    aspect-ratio: 1/1;
    object-position: center top;
}
/* =========================================================
   CONTACT PAGE
========================================================= */

.contact-banner {
    background-image:
        linear-gradient(
            90deg,
            rgba(3, 47, 74, .92),
            rgba(3, 67, 91, .65),
            rgba(3, 55, 76, .25)
        ),
        url("images/about-banner.webp");

    background-size: cover;
    background-position: center center;
}


/* =========================================================
   CONTACT INTRO
========================================================= */

.contact-intro {
    padding: 90px 0;
    background: #ffffff;
}

.contact-intro-content {
    padding-right: 35px;
}


/* EMAIL HIGHLIGHT */

.contact-highlight {
    min-height: 150px;

    padding: 30px 35px;

    display: flex;
    align-items: center;

    gap: 22px;

    border: 1px solid #dcebed;
    border-radius: 8px;

    background:
        linear-gradient(
            135deg,
            #f1fafb 0%,
            #ffffff 100%
        );

    box-shadow:
        0 15px 40px rgba(7, 82, 138, .06);

    transition: .35s ease;
}

.contact-highlight:hover {
    transform: translateY(-5px);

    box-shadow:
        0 20px 45px rgba(7, 82, 138, .10);
}


.contact-highlight-icon {
    width: 65px;
    height: 65px;

    flex: 0 0 65px;

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

    border-radius: 50%;

    background: #e4f7f2;

    color: #078f70;

    font-size: 23px;
}


.contact-highlight span {
    display: block;

    margin-bottom: 7px;

    color: #718894;

    font-size: 10px;

    font-weight: 800;

    letter-spacing: 2px;
}


.contact-highlight a {
    display: inline-block;

    color: #07528a;

    font-family: "Manrope", sans-serif;

    font-size: 20px;

    font-weight: 700;

    text-decoration: none;

    word-break: break-word;
}


.contact-highlight a:hover {
    color: #078f70;
}



/* =========================================================
   MAIN CONTACT
========================================================= */

.contact-main {
    padding: 90px 0;

    background: #f4fafb;
}



/* =========================================================
   CONTACT INFORMATION
========================================================= */

.contact-info-wrapper {
    padding-right: 30px;
}
.contact-info-wrapper h2 {
    margin: 8px 0 18px;
    line-height: 1.1;
    font-weight: 600;
    letter-spacing: -1.5px;
}
.contact-info-wrapper > p {
    max-width: 470px;
    margin-bottom: 35px;
    line-height: 1.8;
}

/* =========================================================
   CONTACT INFORMATION ITEM
========================================================= */
.contact-info-item {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 22px 0;
    border-bottom: 1px solid #dce8eb;
}
.contact-info-item:last-child {
    border-bottom: 0;
}
.contact-info-icon {
    width: 47px;
    height: 47px;
    flex: 0 0 47px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #e5f7f2;
    color: #078f70;
    font-size: 17px;
}
.contact-info-item span {
    display: block;
    margin-bottom: 6px;
    color: #62b546;
    font-size: 16px;
    font-weight: 800;
    letter-spacing: 1.7px;
}
.contact-info-item p,
.contact-info-item a {
    margin: 0;
    font-size: 16px;
    line-height: 1.7;
    text-decoration: none;
    color: var(--text);
}
.contact-info-item a:hover {
    color: #078f70;
}

/* =========================================================
   FORM CARD
========================================================= */

.contact-form-card {
    padding: 42px;
    border: 1px solid #dcebed;
    border-radius: 8px;
    background: #ffffff;
    box-shadow:
        0 18px 50px rgba(7, 82, 138, .07);
}

.contact-form-card h2 {
    margin: 8px 0;
    color: #07528a;
    font-family: "Manrope", sans-serif;
    font-size: 32px;
    font-weight: 700;
    padding-bottom: 15px;
}
.contact-form-heading p {
    margin: 0;
    color: #718795;
    font-size: 14px;
    line-height: 1.7;
}

/* =========================================================
   FORM ELEMENTS
========================================================= */
.contact-label {
    display: none;
    margin-bottom: 7px;
    color: #31586e;
    font-size: 12px;
    font-weight: 700;
}
.contact-control {
    width: 100%;
    min-height: 50px;
    padding: 12px 15px;
    border: 1px solid #d6e5e9 !important;
    border-radius: 5px !important;
    background: #fbfdfe !important;
    color: #31586e;
    font-size: 16px;
    box-shadow: none !important;
    transition: .25s ease;
}
.contact-control::placeholder {
    color: #a1b1b9;
}
textarea.contact-control {
    min-height: 145px;
    resize: vertical;
}
.contact-control:focus {
    border-color: #16b68b !important;
    background: #ffffff !important;
    box-shadow:
        0 0 0 3px rgba(22, 182, 139, .08) !important;
}

/* =========================================================
   SUBMIT BUTTON
========================================================= */

.contact-submit {
    min-width: 155px;
    padding: 14px 26px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    border: 0;
    border-radius: 50px;
    background: #005292;
    color: #ffffff;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: .3s ease;
}

.contact-submit:hover {
    background: #62b546;
    transform: translateY(-3px);
    box-shadow:
        0 10px 25px rgba(0, 0, 0, .13);
}

.contact-submit i {
    transition: .3s ease;
}
.contact-submit:hover i {
    transform: translateX(5px);
}

/* =========================================================
   SERVICE SECTION
========================================================= */

.contact-services {
    padding: 90px 0;
    background: #ffffff;
}

.contact-service-card {
    height: 100%;
    padding: 30px 27px;
    border: 1px solid #dcebed;
    border-radius: 7px;
    background: #ffffff;
    transition: .35s ease;
}


.contact-service-card:hover {
    transform: translateY(-7px);
    border-color: #b8e2d8;
    box-shadow:
        0 18px 38px rgba(7, 82, 138, .08);
}



/* SERVICE ICON */

.service-icon {
    width: 55px;
    height: 55px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
    border-radius: 50%;
    background: #e9f8f4;
    color: #078f70;
    font-size: 20px;
    transition: .35s ease;
}

.contact-service-card:hover .service-icon {
    background: #078f70;
    color: #ffffff;
    transform: scale(1.08);
}

/* SERVICE TITLE */
.contact-service-card h3 {
    margin-bottom: 10px;
    color: #07528a;
    font-family: "Manrope", sans-serif;
    font-size: 20px;
    font-weight: 700;
}

/* SERVICE TEXT */

.contact-service-card p {
    min-height: 70px;
    margin-bottom: 18px;
    color: #6b8492;
    font-size: 13px;
    line-height: 1.7;
}

/* SERVICE LINK */

.contact-service-card a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #078f70;
    font-size: 12px;
    font-weight: 700;
    text-decoration: none;
}

.contact-service-card a i {
    transition: .3s ease;
}
.contact-service-card a:hover i {
    transform: translateX(5px);
}

/* =========================================================
   CTA
========================================================= */

.contact-cta {
    padding: 75px 0;
}
/* =========================================================
   REVEAL ANIMATION
========================================================= */

.reveal,
.reveal-left,
.reveal-right {
    opacity: 0;

    transition:
        opacity .8s ease,
        transform .8s ease;
}
.reveal {
    transform: translateY(30px);
}


.reveal-left {
    transform: translateX(-40px);
}


.reveal-right {
    transform: translateX(40px);
}


.reveal.visible,
.reveal-left.visible,
.reveal-right.visible {
    opacity: 1;

    transform: translate(0);
}



/* =========================================================
   TABLET
========================================================= */

@media (max-width: 991px) {
    .contact-intro {
        padding: 70px 0;
    }
    .contact-main {
        padding: 70px 0;
    }


    .contact-services {
        padding: 70px 0;
    }


    .contact-intro-content {
        padding-right: 0;
    }


    .contact-info-wrapper {
        padding-right: 0;
    }


    .contact-form-card {
        padding: 35px;
    }

}



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

@media (max-width: 767px) {
    .contact-banner {
        min-height: 280px;
        background-position: center center;
    }
    .contact-intro {
        padding: 55px 0;
    }
    .contact-main {
        padding: 55px 0;
    }
    .contact-services {
        padding: 55px 0;
    }
    .contact-highlight {
        padding: 25px;
        gap: 15px;
    }
    .contact-highlight-icon {
        width: 55px;
        height: 55px;
        flex-basis: 55px;
        font-size: 20px;
    }
    .contact-highlight a {
        font-size: 17px;
    }
    .contact-form-card {
        padding: 28px 22px;
    }
    .contact-form-card h2 {
        font-size: 27px;
    }
    .contact-info-wrapper h2 {
        font-size: 34px;
    }
}
/* =========================================================
   SMALL MOBILE
========================================================= */
@media (max-width: 480px) {
    .contact-highlight {
        align-items: flex-start;
    }
    .contact-highlight a {
        font-size: 15px;
    }
    .contact-info-item {
        gap: 12px;
    }
    .contact-info-icon {
        width: 42px;
        height: 42px;
        flex-basis: 42px;
    }
    .contact-form-card {
        padding: 23px 17px;
    }
    .contact-submit {
        width: 100%;
    }
    .contact-service-card {
        padding: 25px 22px;
    }
}

/* =========================================================
   LIFE @ CLAROID
   ========================================================= */

.life-banner{
    background-position:center center;
}


/* =========================================================
   INTRO
   ========================================================= */

.life-intro{
    background:#fff;
    padding: 60px 0px;
}

.life-intro .inner-title{
    color:var(--secondary-color);
}

.life-intro .inner-copy{
    color:var(--muted);
}



/* =========================================================
   GALLERY SECTION
   ========================================================= */

.life-gallery-section{
    background:#f7fbfc;
    overflow:hidden;
    padding: 60px 0px;
}

.life-gallery-section > .container{
    position:relative;
}



/* =========================================================
   GALLERY BLOCK
   ========================================================= */

.life-gallery-block{
    position:relative;

    background:#fff;

    border:1px solid var(--line);

    border-radius:8px;

    padding:28px;

    margin-bottom:34px;

    box-shadow:0 12px 40px rgba(3,47,79,.045);

    overflow:hidden;
}

.life-gallery-block:last-child{
    margin-bottom:0;
}



/* =========================================================
   GALLERY HEADING
   ========================================================= */

.gallery-heading{
    display:flex;

    align-items:flex-end;

    justify-content:space-between;

    gap:20px;

    margin-bottom:22px;

    padding-bottom:18px;

    border-bottom:1px solid var(--line);
}

.gallery-heading h3{
    color:var(--secondary-color);

    font-size:27px;

    line-height:1.15;

    font-weight:600;

    margin:0;

    letter-spacing:-.6px;
}

.gallery-kicker{
    display:block;

    color:var(--primary-color);

    font-size:10px;

    font-weight:800;

    letter-spacing:2px;

    text-transform:uppercase;

    margin-bottom:8px;
}

.gallery-counter{
    width:42px;

    height:42px;

    flex:0 0 42px;

    display:grid;

    place-items:center;

    border-radius:50%;

    background:rgba(81,172,51,.08);

    color:var(--primary-color);

    font-size:13px;

    font-weight:700;
}



/* =========================================================
   SWIPER
   ========================================================= */

.lifeSwiper{
    position:relative;

    width:100%;

    overflow:hidden;

    padding:0 0 48px;
}

.lifeSwiper .swiper-wrapper{
    align-items:stretch;
}

.lifeSwiper .swiper-slide{
    height:auto;
}



/* =========================================================
   IMAGE CARD
   ========================================================= */

.life-image{
    position:relative;

    width:100%;

    height:300px;

    overflow:hidden;

    background:#edf3f5;

    border-radius:5px;

    cursor:pointer;
}

.life-image img{
    width:100%;

    height:100%;

    object-fit:cover;

    object-position:center;

    transition:
        transform .8s var(--ease),
        filter .5s ease;
}

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

    filter:brightness(.82);
}



/* =========================================================
   IMAGE OVERLAY
   ========================================================= */

.image-overlay{
    position:absolute;

    inset:0;

    display:flex;

    align-items:center;

    justify-content:center;

    background:rgba(3,47,79,.22);

    opacity:0;

    transition:.35s ease;

    pointer-events:none;
}

.life-image:hover .image-overlay{
    opacity:1;
}

.image-overlay span{
    width:52px;

    height:52px;

    display:grid;

    place-items:center;

    border-radius:50%;

    background:#fff;

    color:var(--secondary-color);

    font-size:17px;

    box-shadow:0 8px 25px rgba(0,0,0,.15);

    transform:scale(.7);

    transition:.35s var(--ease);
}

.life-image:hover .image-overlay span{
    transform:scale(1);
}



/* =========================================================
   SWIPER ARROWS
   ========================================================= */

.lifeSwiper .life-prev,
.lifeSwiper .life-next{
    width:42px;

    height:42px;

    top:auto;

    bottom:0;

    margin:0;

    border-radius:50%;

    background:#fff;

    border:1px solid var(--line);

    color:var(--secondary-color);

    transition:.3s var(--ease);
}

.lifeSwiper .life-prev{
    left:auto;

    right:54px;
}

.lifeSwiper .life-next{
    right:0;
}

.lifeSwiper .life-prev:hover,
.lifeSwiper .life-next:hover{
    background:var(--secondary-color);

    border-color:var(--secondary-color);

    color:#fff;

    transform:translateY(-2px);
}

.lifeSwiper .life-prev:after,
.lifeSwiper .life-next:after{
    font-size:13px;

    font-weight:700;
}



/* =========================================================
   SWIPER PAGINATION
   ========================================================= */

.lifeSwiper .life-pagination{
    left:0;

    right:auto;

    width:auto;

    bottom:14px;

    display:flex;

    align-items:center;

    gap:5px;
}

.lifeSwiper .swiper-pagination-bullet{
    width:7px;

    height:7px;

    margin:0 !important;

    background:var(--secondary-color);

    opacity:.18;

    transition:.3s ease;
}

.lifeSwiper .swiper-pagination-bullet-active{
    width:24px;

    border-radius:10px;

    background:var(--primary-color);

    opacity:1;
}



/* =========================================================
   FANCYBOX CUSTOMIZATION
   ========================================================= */

.fancybox__container{
    --fancybox-bg:rgba(3,47,79,.96);
}

.fancybox__caption{
    font-family:Inter,Arial,sans-serif;

    font-size:14px;
}

.fancybox__toolbar{
    background:transparent;
}

.fancybox__toolbar button{
    border-radius:50%;
}



/* =========================================================
   PAGE CTA
   ========================================================= */

.life-gallery-section + .page-cta{
    margin-top:0;
}



/* =========================================================
   REVEAL
   ========================================================= */

.life-gallery-block.reveal{
    transition:
        opacity 1s var(--ease),
        transform 1s var(--ease);
}



/* =========================================================
   TABLET
   ========================================================= */

@media(max-width:991px){

    .life-gallery-block{
        padding:22px;
    }

    .life-image{
        height:270px;
    }

    .gallery-heading h3{
        font-size:24px;
    }

}



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

@media(max-width:767px){

    .life-gallery-block{
        padding:16px;

        border-radius:6px;

        margin-bottom:22px;
    }

    .gallery-heading{
        align-items:flex-start;

        margin-bottom:17px;

        padding-bottom:14px;
    }

    .gallery-heading h3{
        font-size:21px;

        line-height:1.25;
    }

    .gallery-kicker{
        font-size:8px;
        letter-spacing:1.6px;
        margin-bottom:6px;
    }
    .gallery-counter{
        width:36px;
        height:36px;
        flex-basis:36px;
        font-size:11px;
    }
    .life-image{
        height:270px;
    }
    .lifeSwiper{
        padding-bottom:45px;
    }
    .lifeSwiper .life-prev,
    .lifeSwiper .life-next{
        width:38px;
        height:38px;
    }
    .lifeSwiper .life-prev{
        right:48px;
    }
    .lifeSwiper .life-next{
        right:0;
    }
    .lifeSwiper .life-prev:after,
    .lifeSwiper .life-next:after{
        font-size:11px;
    }
}

/* =========================================================
   SMALL MOBILE
   ========================================================= */
@media(max-width:480px){
    .life-image{
        height:230px;
    }
    .life-gallery-block{
        padding:13px;
    }
    .gallery-heading h3{
        font-size:19px;
    }
}

/* =========================================================
   OUR BUSINESS PAGE
   ========================================================= */


/* =========================================================
   BUSINESS HERO
   ========================================================= */

.business-hero{
    height:420px;
    position:relative;
    overflow:hidden;
    display:flex;
    align-items:center;
    margin-top:78px;
    color:#fff;
}

.business-hero-bg{
    position:absolute;
    inset:0;
    background:
        url("../images/business-bg.webp")
        center/cover no-repeat;
    transform:scale(1.04);
    animation:businessHeroZoom 8s ease-out forwards;
}
@keyframes businessHeroZoom{
    to{
        transform:scale(1);
    }
}
.business-hero-overlay{
    position:absolute;
    inset:0;
    background:
        linear-gradient(
            90deg,
            rgba(2,50,77,.94) 0%,
            rgba(3,65,91,.80) 42%,
            rgba(2,58,84,.35) 72%,
            rgba(0,40,65,.18) 100%
        );
}
.business-hero-content{
    position:relative;
    z-index:2;
    max-width:650px;
    padding-top:20px;
}
.business-breadcrumb{
    display:flex;

    gap:9px;

    align-items:center;

    font-size:12px;

    color:rgba(255,255,255,.88);

    margin-bottom:15px;
}


.business-breadcrumb a{
    color:#fff;

    transition:.25s ease;
}


.business-breadcrumb a:hover{
    color:var(--primary-color);
}


.business-eyebrow{
    display:block;

    color:var(--primary-color);

    font-size:10px;

    font-weight:800;

    letter-spacing:2.8px;

    margin-bottom:8px;
}


.business-hero h1{
    font-family:Manrope,Inter,sans-serif;

    font-size:48px;

    line-height:1.08;

    letter-spacing:-1.5px;

    font-weight:700;

    color:#fff;

    margin:0 0 14px;
}


.business-hero p{
    max-width:560px;

    font-size:15px;

    line-height:1.65;

    color:rgba(255,255,255,.90);

    margin:0;
}



/* =========================================================
   PRODUCTS
   ========================================================= */

.business-products{
    background:#fff;

    padding-top:60px;

    padding-bottom:60px;
}


.business-products .inner-title{
    color:var(--secondary-color);

    font-size:34px;

    line-height:1.13;
}


.business-text-link{
    display:inline-flex;
    align-items:center;
    gap:10px;
    color:var(--primary-color);
    font-size:16px;
    font-weight:700;
    margin-top:8px;
    transition:.3s ease;
}


.business-text-link i{
    transition:.3s ease;
}


.business-text-link:hover{
    color:var(--secondary-color);
}


.business-text-link:hover i{
    transform:translateX(5px);
}



/* =========================================================
   PRODUCT CARD
   ========================================================= */

.business-product-card{
    background:#fff;

    border:1px solid #dfeaed;

    border-radius:4px;

    overflow:hidden;

    height:100%;

    transition:
        transform .45s var(--ease),
        box-shadow .45s var(--ease),
        border-color .3s ease;
}


.business-product-card:hover{
    transform:translateY(-8px);

    border-color:rgba(81,172,51,.35);

    box-shadow:
        0 18px 40px rgba(3,47,79,.10);
}


.business-product-image{
    height:200px;

    overflow:hidden;

    background:#f2f7f8;
}


.business-product-image img{
    width:100%;

    height:100%;

    object-fit:cover;

    transition:.7s var(--ease);
}


.business-product-card:hover
.business-product-image img{
    transform:scale(1.07);
}


.business-product-content{
    padding:13px 15px 16px;
}


.business-product-content h3{
    color:var(--secondary-color);

    font-size:24px;

    font-weight:700;

    margin-bottom:5px;
}


.business-product-content p{
    color:var(--muted);
    font-size:13px;
    line-height:1.45;
    min-height:38px;
    margin-bottom:8px;
}


.business-product-content a{
    display:inline-flex;
    align-items:center;
    gap:9px;
    color:var(--primary-color);
    font-size:16px;
    font-weight:700;
}


.business-product-content a i{
    transition:.3s ease;
}


.business-product-content a:hover i{
    transform:translateX(5px);
}



/* =========================================================
   MANUFACTURING
   ========================================================= */

.business-manufacturing{
    background:#edf7fa;
    padding:58px 0;
}
.business-manufacturing .inner-title{
    color:var(--secondary-color);
    font-size:34px;
    line-height:1.12;
    margin-bottom:18px;
}
.business-manufacturing .inner-copy{
    font-size:16px;
    line-height:1.65;
}

/* =========================================================
   MANUFACTURING CARD
   ========================================================= */
.manufacturing-card{
    background:#fff;
    border:1px solid #d7e8ed;
    border-radius:6px;
    overflow:hidden;
    box-shadow:
        0 12px 35px rgba(3,47,79,.06);
}
.manufacturing-image{
    height:300px;
    overflow:hidden;
}

.manufacturing-image img{
    width:100%;
    height:100%;
    object-fit:cover;
    transition:1s var(--ease);
}

.manufacturing-card:hover
.manufacturing-image img{
    transform:scale(1.035);
}

/* =========================================================
   MANUFACTURING STATS
   ========================================================= */

.manufacturing-stats{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    border-top:1px solid #dcebed;
}
.manufacturing-stat{
    min-height:88px;
    display:flex;
    align-items:center;
    gap:12px;
    padding:13px 17px;
    border-right:1px solid #dcebed;
}

.manufacturing-stat:last-child{
    border-right:0;
}

.manufacturing-stat-icon{
    width:38px;
    height:38px;
    flex:0 0 38px;
    border:2px solid var(--secondary-color);
    border-radius:50%;
    display:grid;
    place-items:center;
    color:var(--secondary-color);
    font-size:15px;
}

.manufacturing-stat strong{
    display:block;
    color:var(--primary-color);
    font-family:Manrope,Inter,sans-serif;
    font-size:18px;
    line-height:1.1;
    font-weight:700;
    margin-bottom:3px;
}
.manufacturing-stat span{
    display:block;
    color:var(--secondary-color);
    font-size:16px;
    font-weight:700;
    margin-bottom:2px;
}
.manufacturing-stat small{
    display:block;
    color:var(--muted);
    font-size:16px;
    line-height:1.3;
}
/* =========================================================
   MANUFACTURING JOURNEY
   ========================================================= */
.business-journey{
    background:#f7fbfc;
    padding-top:65px;
    padding-bottom:65px;
}
.business-journey .inner-title{
    color:var(--secondary-color);
    font-size:32px;
    line-height:1.1;
}
.business-journey .inner-copy{
    font-size:16px;
    line-height:1.55;
}
/* =========================================================
   VIDEO
   ========================================================= */
.journey-video{
    position:relative;
    width:100%;
    height:295px;
    margin-top:20px;
    overflow:hidden;
    border-radius:4px;
    background:#0b3d58;
}
.journey-video video{
    width:100%;
    height:100%;
    object-fit:cover;
}
.video-play-icon{
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
    width:48px;
    height:48px;
    border-radius:50%;
    display:grid;
    place-items:center;
    background:var(--secondary-color);
    color:#fff;
    font-size:15px;
    cursor:pointer;
    box-shadow:
        0 8px 25px rgba(0,0,0,.2);

    transition:.35s ease;
}
.video-play-icon:hover{
    background:var(--primary-color);
    transform:translate(-50%,-50%) scale(1.08);
}
.video-play-icon.hide{
    opacity:0;
    pointer-events:none;
}

/* =========================================================
   PROCESS
   ========================================================= */
.manufacturing-process{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:0;
}
.process-item{
    position:relative;
    min-height:235px;
    padding:4px 17px 15px;
    border-right:1px solid #dce8eb;
    transition:.35s ease;
}
.process-item:nth-child(3n){
    border-right:0;
}
.process-item:nth-child(n+4){
    padding-top:18px;
    border-top:1px solid #dce8eb;
}
.process-item.process-active{
    background:#fff;
    box-shadow:
        0 10px 30px rgba(3,47,79,.06);
    transform:translateY(-4px);
}
.process-image{
    width:80px;
    height:80px;
    border-radius:50%;
    overflow:hidden;
    margin-bottom:10px;
    border:2px solid #d9e9ed;
    transition:.45s var(--ease);
}

.process-item:hover .process-image{
    border-color:var(--primary-color);
    transform:scale(1.05);
}

.process-image img{
    width:100%;
    height:100%;
    object-fit:cover;
}
.process-number{
    display:block;
    color:var(--primary-color);
    font-size:10px;
    font-weight:800;
    letter-spacing:1px;
    margin-bottom:4px;
}
.process-item h3{
    color:var(--secondary-color);
    font-size:18px;
    font-weight:700;
    line-height:1.2;
    margin-bottom:6px;
}

.process-item p{
    color:var(--muted);
    font-size:10px;
    line-height:1.5;
    margin:0;
}

/* =========================================================
   GLOBAL PRESENCE
   ========================================================= */
.business-global{
    position:relative;
    overflow:hidden;
    padding:60px 0;
    background:#eef8fb;
}
.business-global .inner-title{
    color:var(--secondary-color);
    font-size:34px;
    line-height:1.08;
}
.business-global .inner-copy{
    font-size:14px;
    line-height:1.65;
    max-width:480px;
}

.market-title{
    display:flex;
    align-items:center;
    gap:9px;
    margin-top:18px;
    color:var(--primary-color);
    font-size:11px;
    font-weight:800;
    letter-spacing:1.2px;
}
.market-title i{
    font-size:25px;
}
.market-list{
    display:flex;
    flex-wrap:wrap;
    gap:5px 15px;
    margin-top:10px;
    max-width:430px;
}
.market-list span{
    color:var(--secondary-color);
    font-size:12px;
    font-weight:600;
    position:relative;
}
.market-list span:not(:last-child)::after{
    content:"|";
    margin-left:15px;
    color:#8bb6c5;
}
/* =========================================================
   MAP
   ========================================================= */
.business-map{
    position:relative;
    width:100%;
    min-height:390px;
    display:flex;
    align-items:center;
    justify-content:center;
}
.business-map > img{
    width:100%;
    max-width:720px;
    height:auto;
    object-fit:contain;
    opacity:.95;
}
.map-pin{
    position:absolute;
    display:flex;
    align-items:center;
    gap:7px;
    color:var(--secondary-color);
    font-size:12px;
    font-weight:700;
    white-space:nowrap;
}

.map-pin span{
    width:7px;
    height:7px;
    background:var(--primary-color);
    border:2px solid #fff;
    border-radius:50%;
    box-shadow:
        0 0 0 4px rgba(81,172,51,.15);
    animation:mapPulse 2s infinite;
}
@keyframes mapPulse{
    50%{
        box-shadow:
            0 0 0 8px rgba(81,172,51,0);
    }
}

.pin-ghana{
    left:42%;
    top:35%;
}
.pin-nigeria{
    left:39%;
    top:43%;
}
.pin-yemen{
    left:67%;
    top:31%;
}
.pin-kenya{
    left:68%;
    top:45%;
}
.pin-rwanda{
    left:64%;
    top:52%;
}
.pin-tanzania{
    left:62%;
    top:59%;
}
.pin-zanzibar{
    left:67%;
    top:65%;
}

/* =========================================================
   THREE STRENGTHS
   ========================================================= */
.business-strengths{
    background:#fff;
    padding:38px 0 45px;
}
.strength-heading{
    text-align:center;
    margin-bottom:12px;
}
.strength-card{
    min-height:125px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    text-align:center;
    border-right:1px solid #dce8eb;
    transition:.35s ease;
}
.col-lg-4:last-child .strength-card{
    border-right:0;
}
.strength-card:hover{
    background:#f7fbfc;
    transform:translateY(-4px);
}
.strength-icon{
    width:60px;
    height:60px;
    display:grid;
    place-items:center;
    color:var(--secondary-color);
    font-size:60px;
    margin-bottom:8px;
}
.strength-card > span{
    color:var(--secondary-color);
    font-size:20px;
    font-weight:800;
    letter-spacing:2px;
    margin-bottom:3px;
}

.strength-card h3{
    color:var(--muted);
    font-size:16px;
    font-weight:500;
    margin:0;
}

/* =========================================================
   AMBITION
   ========================================================= */
.business-ambition{
    min-height:315px;
    position:relative;
    display:flex;
    align-items:center;
    overflow:hidden;
    color:#fff;
}

.business-ambition-bg{
    position:absolute;
    inset:0;
    background:
        url("../images/ambition-bg.png")
        center/cover no-repeat;
    transition:1s var(--ease);
}
.business-ambition:hover
.business-ambition-bg{
    transform:scale(1.025);
}

.business-ambition-overlay{
    position:absolute;
    inset:0;
    background:
        linear-gradient(
            90deg,
            rgba(0,66,91,.95),
            rgba(0,71,92,.72) 48%,
            rgba(0,55,75,.15)
        );
}

.business-ambition .container{
    position:relative;
    z-index:2;
}

.business-ambition h2{
    color:#fff;
    font-size:35px;
    line-height:1.13;
    margin:5px 0 20px;
}
.business-buttons{
    display:flex;
    align-items:center;
    gap:12px;
    flex-wrap:wrap;
}

.business-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    padding:11px 22px;
    border-radius:30px;
    font-size:14px;
    font-weight:700;
    transition:.35s ease;
}

.business-btn.primary{
    background:var(--primary-color);
    color:#fff;
}

.business-btn.primary:hover{
    background:var(--secondary-color);
    color:#fff;
    transform:translateY(-3px);
}
.business-btn.outline{
    border:1px solid rgba(255,255,255,.8);
    color:#fff;
    background:rgba(255,255,255,.03);
}

.business-btn.outline:hover{
    background:#fff;
    color:var(--secondary-color);
    transform:translateY(-3px);
}

/* =========================================================
   PAGE PARAGRAPH SIZE
   ========================================================= */

.business-products p,
.business-manufacturing p,
.business-journey p,
.business-global p{
    font-size:16px;
}
.business-product-content p,
.process-item p{
    font-size:16px;
}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media(max-width:991px){
    .business-hero{
        height:400px;
        margin-top:70px;
    }
    .business-hero h1{
        font-size:42px;
    }
    .business-products{
        padding:50px 0;
    }
    .business-product-image{
        height:175px;
    }
    .business-manufacturing{
        padding:50px 0;
    }
    .manufacturing-image{
        height:280px;
    }
    .manufacturing-process{
        margin-top:25px;
    }
    .business-map{
        min-height:330px;
        margin-top:25px;
    }
    .business-global{
        padding:50px 0;
    }
    .business-ambition h2{
        font-size:32px;
    }
}

/* =========================================================
   MOBILE
   ========================================================= */
@media(max-width:767px){
    .business-hero{
        height:470px;
        margin-top:70px;
        align-items:center;
    }
    .business-hero-bg{
        background-position:
            65% center;
    }
    .business-hero-overlay{
        background:
            linear-gradient(
                90deg,
                rgba(2,50,77,.96),
                rgba(2,57,82,.82)
            );
    }

    .business-hero-content{
        max-width:100%;
    }
    .business-hero h1{
        font-size:36px;
        line-height:1.08;
        letter-spacing:-1px;
    }
    .business-hero p{
        font-size:13px;
        max-width:450px;
    }
    .business-products{
        padding:45px 0;
    }

    .business-products .inner-title,
    .business-manufacturing .inner-title,
    .business-global .inner-title{
        font-size:30px;
    }
    .business-product-image{
        height:190px;
    }
    .business-manufacturing{
        padding:45px 0;
    }
    .manufacturing-image{
        height:230px;
    }
    .manufacturing-stats{
        grid-template-columns:1fr;
    }
    .manufacturing-stat{
        border-right:0;
        border-bottom:1px solid #dcebed;
    }
    .manufacturing-stat:last-child{
        border-bottom:0;
    }
    .business-journey{
        padding:45px 0;
    }
    .journey-video{
        height:210px;
    }
    .manufacturing-process{
        grid-template-columns:1fr 1fr;
        margin-top:30px;
    }
    .process-item{
        min-height:220px;
        border-right:1px solid #dce8eb;
    }
    .process-item:nth-child(3n){
        border-right:1px solid #dce8eb;
    }
    .process-item:nth-child(2n){
        border-right:0;
    }
    .process-item:nth-child(n+3){
        border-top:1px solid #dce8eb;
    }
    .process-item:nth-child(n+4){
        padding-top:18px;
    }
    .business-global{
        padding:45px 0;
    }
    .business-map{
        min-height:270px;
    }
    .map-pin{
        font-size:9px;
        gap:4px;
    }
    .map-pin span{
        width:6px;
        height:6px;
    }
    .pin-ghana{
        left:36%;
    }
    .pin-nigeria{
        left:33%;
    }
    .pin-yemen{
        left:68%;
    }
    .pin-kenya{
        left:67%;
    }
    .pin-rwanda{
        left:62%;
    }
    .pin-tanzania{
        left:59%;
    }
    .pin-zanzibar{
        left:65%;
    }
    .business-strengths{
        padding:30px 0;
    }
    .strength-card{
        border-right:0;
        border-bottom:1px solid #dce8eb;
        min-height:115px;
    }
    .col-lg-4:last-child .strength-card{
        border-bottom:0;
    }
    .business-ambition{
        min-height:370px;
    }
    .business-ambition h2{
        font-size:29px;
    }
    .business-buttons{
        gap:8px;
    }
    .business-btn{
        padding:10px 18px;
        font-size:11px;
    }
    /*
       Mobile paragraph size
    */

    .business-products p,
    .business-manufacturing p,
    .business-journey p,
    .business-global p{
        font-size:13px;
    }
}

/* =========================================================
   SMALL MOBILE
   ========================================================= */

@media(max-width:480px){
    .business-hero{
        height:450px;
    }
    .business-hero h1{
        font-size:31px;
    }
    .business-hero p{
        font-size:12px;
    }
    .business-product-image{
        height:180px;
    }
    .manufacturing-image{
        height:210px;
    }
    .process-item{
        min-height:215px;
        padding-left:11px;
        padding-right:11px;
    }
    .process-image{
        width:70px;
        height:70px;
    }
    .process-item h3{
        font-size:12px;
    }
    .process-item p{
        font-size:9px;
    }
    .business-map{
        min-height:220px;
    }
    .business-ambition{
        min-height:390px;
    }
    .business-ambition h2{
        font-size:26px;
    }
}


/* =========================================================
   REGULATION 46 DISCLOSURE
========================================================= */

.regulation-disclosure-section {
    padding: 60px 0;
    background: #fff;
}

.regulation-disclosure-section .section-heading {
    max-width: 900px;
    margin: 0 auto;
}

.regulation-disclosure-section .section-eyebrow {
    display: inline-block;
    margin-bottom: 12px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--primary-color);
}

.regulation-disclosure-section .section-heading h1 {
    margin-bottom: 15px;
    font-size: clamp(30px, 4vw, 46px);
    line-height: 1.15;
    font-weight: 700;
    color: #17313a;
}

.regulation-disclosure-section .section-heading p {
    max-width: 760px;
    margin: 0 auto;
    color: var(--muted);
    font-size: 15px;
    line-height: 1.8;
}


/* TABLE */

.disclosure-table-wrap {
    margin-top: 45px;
    border: 1px solid var(--line);
    border-radius: 16px;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 12px 35px rgba(25, 55, 65, 0.06);
}

.disclosure-table {
    margin: 0;
    width: 100%;
    border-color: #2a7d0d;
}

.disclosure-table thead th {
    padding: 18px 20px;
    background: #005292;
    border-bottom: 1px solid var(--line);
    color: #fff;
    font-size: 20px;
    font-weight: 700;
    vertical-align: middle;
}

.disclosure-table tbody td {
    padding: 19px 20px;
    color: #000;
    font-size: 16px;
    line-height: 1.65;
    vertical-align: middle;
}

.disclosure-table tbody tr:last-child td {
    border-bottom: 0;
}

.disclosure-table tbody tr {
    transition: all 0.25s ease;
}

.disclosure-table tbody tr:hover {
    background: #f9fcfa;
}

.disclosure-table tbody td:first-child {
    color: var(--primary-color);
    font-weight: 700;
    text-align: center;
}


/* LINKS */

.disclosure-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--primary-color);
    font-size: 16px;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
    transition: all 0.25s ease;
}

.disclosure-link i {
    font-size: 16px;
}

.disclosure-link:hover {
    color: var(--secondary-color);
    transform: translateX(3px);
}


/* MULTIPLE LINKS */

.disclosure-multi-links {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 18px;
}

.disclosure-multi-links a {
    position: relative;
    color: var(--primary-color);
    font-size: 16px;
    font-weight: 700;
    text-decoration: none;
    transition: all 0.25s ease;
}

.disclosure-multi-links a:not(:last-child)::after {
    content: "|";
    position: absolute;
    right: -12px;
    color: #b8c8cc;
}

.disclosure-multi-links a:hover {
    color: var(--secondary-color);
}


/* NA */

.disclosure-na {
    display: inline-block;
    padding: 5px 13px;
    border-radius: 30px;
    background: #f1f4f5;
    color: #667c85;
    font-size: 16px;
    font-weight: 700;
}
.disclosure-table tbody tr:nth-child(even) td {
    background-color: #c9e6fb;
}
.disclo
.disclosure-table tbody tr:nth-child(odd) td {
    background-color: #ecf7ff;
}


/* MOBILE */

@media (max-width: 767px) {

    .regulation-disclosure-section {
        padding: 60px 0;
    }

    .regulation-disclosure-section .section-heading {
        text-align: left;
    }

    .regulation-disclosure-section .section-heading p {
        margin-left: 0;
    }

    .disclosure-table-wrap {
        border-radius: 12px;
        border: 0;
        box-shadow: none;
        overflow: visible;
    }

    .disclosure-table {
        display: block;
    }

    .disclosure-table thead {
        display: none;
    }

    .disclosure-table tbody {
        display: block;
    }

    .disclosure-table tbody tr {
        display: grid;
        grid-template-columns: 45px 1fr;
        margin-bottom: 15px;
        padding: 18px;
        border: 1px solid var(--line);
        border-radius: 12px;
        background: #fff;
        box-shadow: 0 8px 22px rgba(25, 55, 65, 0.05);
    }

    .disclosure-table tbody tr:hover {
        background: #fff;
    }

    .disclosure-table tbody td {
        display: block;
        padding: 5px 0;
        border: 0;
        font-size: 13px;
    }

    .disclosure-table tbody td:first-child {
        grid-row: span 2;
        text-align: left;
        font-size: 14px;
        padding-top: 3px;
    }

    .disclosure-table tbody td:nth-child(2) {
        grid-column: 2;
        color: #314b54;
        font-weight: 600;
    }

    .disclosure-table tbody td:nth-child(3) {
        grid-column: 2;
        padding-top: 10px;
    }

    .disclosure-multi-links {
        gap: 7px 15px;
    }

}

@media (max-width: 480px) {

    .regulation-disclosure-section .section-heading h1 {
        font-size: 28px;
    }

    .regulation-disclosure-section .section-heading p {
        font-size: 13px;
    }

    .disclosure-table tbody tr {
        grid-template-columns: 35px 1fr;
        padding: 15px;
    }

}
/* =========================================================
   PRODUCT CATEGORY TABS
========================================================= */

.product-catalog-section {
    background: #fff;
}

.product-category-tabs {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    padding: 50px 0;
}

.product-category-tab {
    min-height: 76px;
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 12px 18px;
    border: 1px solid #d9e7ec;
    border-radius: 8px;
    background: #fff;
    text-align: left;
    cursor: pointer;
    transition: .3s ease;
}

.product-category-tab:hover {
    transform: translateY(-3px);
    border-color: #9dd8ca;
    box-shadow: 0 10px 25px rgba(0, 70, 100, .08);
}

.product-category-tab.active {
    background: #f0faf7;
    border-color: #9bdacb;
    box-shadow: inset 0 -3px 0 var(--primary-color);
}

.category-tab-img {
    width: 75px;
    height: 55px;
    flex: 0 0 75px;
}

.category-tab-img img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.product-category-tab > div:nth-child(2) {
    flex: 1;
}

.product-category-tab strong {
    display: block;
    color: #191919;
    font-size: 24px;
    margin-bottom: 4px;
}

.product-category-tab.active strong {
    color: #087c61;
}

.product-category-tab span {
    display: block;
    color: #617b86;
    font-size: 16px;
}

.product-category-tab > i {
    color: #0873a9;
}

.product-category-tab.active > i {
    color: var(--primary-color);
}


/* =========================================================
   CATEGORY INTRO
========================================================= */

.product-category-intro {
    background: #f4fafc;
    overflow: hidden;
}

.category-intro-inner {
    min-height: 190px;
    position: relative;
    display: flex;
    align-items: center;
}

.category-intro-content {
    position: relative;
    z-index: 2;
    width: 55%;
    padding: 35px 0;
}

.category-intro-content > span {
    display: block;
    margin-bottom: 8px;
    color: var(--primary-color);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 2px;
}

.category-intro-content h2 {
    max-width: 560px;
    margin: 0 0 10px;
    color: var(--secondary-color);
    font-size: clamp(27px, 3vw, 38px);
    line-height: 1.15;
}

.category-intro-content p {
    max-width: 580px;
    margin: 0;
    font-size: 16px;
    line-height: 1.7;
}

.category-intro-image {
    position: absolute;
    right: 0;
    top: 0;
    width: 55%;
    height: 100%;
}

.category-intro-image::before {
    content: "";
    position: absolute;
    z-index: 2;
    left: -80px;
    top: -40px;
    width: 150px;
    height: 280px;
    background: linear-gradient(
        135deg,
        transparent 35%,
        rgba(81,172,51,.35) 36%,
        rgba(81,172,51,.35) 43%,
        transparent 44%
    );
    transform: skewX(-20deg);
}

.category-intro-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}


/* =========================================================
   FILTER
========================================================= */

.product-filter-row {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr 1fr .6fr;
    gap: 14px;
    padding: 25px 0 15px;
}

.product-search-box {
    height: 50px;
    display: flex;
    align-items: center;
    padding: 0 14px;
    border: 1px solid #d9e7ec;
    border-radius: 7px;
}

.product-search-box i {
    margin-right: 10px;
    color: #0874a9;
    font-size: 13px;
}

.product-search-box input {
    width: 100%;
    height: 100%;
    border: 0;
    outline: 0;
    font-size: 16px;
    color: #365f70;
}

.product-filter-row select {
    height: 50px;
    padding: 0 12px;
    border: 1px solid #d9e7ec;
    border-radius: 7px;
    color: #365f70;
    background: #fff;
    font-size: 16px;
    outline: none;
}


/* =========================================================
   RESULT COUNT
========================================================= */

.product-result-info {
    padding: 5px 0 20px;
    color: #708891;
    font-size: 12px;
}

.product-result-info strong {
    color: var(--secondary-color);
}


/* =========================================================
   PRODUCT CARD
========================================================= */

.product-grid {
    padding-bottom: 70px;
}

.product-card {
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid #dbe7ec;
    border-radius: 9px;
    background: #fff;
    transition: .35s ease;
}

.product-card:hover {
    transform: translateY(-5px);
    border-color: #a8d8ce;
    box-shadow: 0 15px 35px rgba(15, 70, 100, .10);
}


/* IMAGE */

.product-card-image {
    height: 210px;
    padding: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #eef6f9;
    overflow: hidden;
}

.product-card-image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    transition: .4s ease;
}

.product-card:hover .product-card-image img {
    transform: scale(1.04);
}


/* BODY */

.product-card-body {
    flex: 1;
    padding: 18px;
}

.product-brand {
    margin-bottom: 4px;
    color: var(--primary-color);
    font-size: 14px;
    font-weight: 800;
    letter-spacing: 1.2px;
    text-transform: uppercase;
}

.product-card-body h3 {
    margin: 0 0 15px;
    color: var(--secondary-color);
    font-size: 24px;
    line-height: 1.3;
    font-weight: 700;
}


/* DETAILS */

.product-details {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 9px;
    padding: 12px 0;
    border-top: 1px solid #edf2f4;
    border-bottom: 1px solid #edf2f4;
}

.product-details div {
    min-width: 0;
}

.product-details span {
    display: block;
    margin-bottom: 3px;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .5px;
}

.product-details strong {
    display: block;
    font-size: 16px;
    line-height: 1.35;
}


/* DESCRIPTION */

.product-description {
    min-height: 62px;
    margin: 13px 0 0;
    color: #607b86;
    font-size: 16px;
    line-height: 1.65;
}


/* VIEW */

.product-view-link {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin-top: 15px;
    color: #0875ae;
    font-size: 16px;
    font-weight: 700;
    text-decoration: none;
}

.product-view-link i {
    transition: .25s ease;
}

.product-view-link:hover {
    color: var(--primary-color);
}

.product-view-link:hover i {
    transform: translateX(4px);
}


/* NO PRODUCT */

.no-products {
    padding: 60px 20px 90px;
    text-align: center;
}

.no-products i {
    margin-bottom: 15px;
    color: #9aafb6;
    font-size: 35px;
}

.no-products h3 {
    margin-bottom: 5px;
    color: #315d6d;
    font-size: 20px;
}

.no-products p {
    margin: 0;
    color: #78909a;
    font-size: 13px;
}


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

@media (max-width: 991px) {

    .product-category-tabs {
        grid-template-columns: 1fr;
    }

    .product-filter-row {
        grid-template-columns: 1fr 1fr;
    }

    .category-intro-content {
        width: 60%;
    }

    .category-intro-image {
        width: 50%;
    }

}


@media (max-width: 767px) {

    .product-category-tabs {
        gap: 10px;
    }

    .product-category-tab {
        min-height: 68px;
    }

    .category-intro-inner {
        display: block;
    }

    .category-intro-content {
        width: 100%;
        padding: 35px 0 25px;
    }

    .category-intro-image {
        position: relative;
        width: 100%;
        height: 220px;
    }

    .category-intro-image::before {
        display: none;
    }

    .product-filter-row {
        grid-template-columns: 1fr;
    }

    .product-card-image {
        height: 230px;
    }

}
/* =========================================================
   IPO FILINGS - SHARED PAGE CSS
   Use this ONE CSS file for:
   - ipo-filings.php
   - industry-report.php
   - offer-documents.php
   - material-contracts-documents.php
   ========================================================= */

/* ---------- MAIN IPO FILINGS PAGE ---------- */
.ipo-page{
    background:#f7faf9;
    padding:80px 0 100px;
}

.ipo-intro{
    max-width:760px;
    margin:0 auto 48px;
    text-align:center;
}

.ipo-kicker{
    display:inline-flex;
    align-items:center;
    gap:9px;
    color:#62b546;
    font-size:13px;
    font-weight:700;
    letter-spacing:1.6px;
    text-transform:uppercase;
    margin-bottom:13px;
}

.ipo-intro h2{
    font-family:Manrope,sans-serif;
    font-size:38px;
    line-height:1.18;
    color:#173c34;
    margin:0 0 14px;
    font-weight:700;
}

.ipo-intro p{
    color:#687a75;
    font-size:16px;
    line-height:1.8;
    margin:0;
}

.ipo-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:24px;
}

.ipo-card{
    position:relative;
    background:#fff;
    border:1px solid #e4ece9;
    border-radius:20px;
    padding:30px;
    min-height:270px;
    box-shadow:0 12px 35px rgba(20,62,52,.06);
    transition:.3s ease;
    overflow:hidden;
}

.ipo-card:before{
    content:"";
    position:absolute;
    left:0;
    top:0;
    width:100%;
    height:4px;
    background:#85d6b0;
}

.ipo-card:hover{
    transform:translateY(-6px);
    box-shadow:0 18px 45px rgba(20,62,52,.11);
}

.ipo-icon{
    width:56px;
    height:56px;
    border-radius:15px;
    background:#e9f8f1;
    color:#62b546;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:22px;
    margin-bottom:22px;
}

.ipo-card h3{
    font-family:Manrope,sans-serif;
    color:#173c34;
    font-size:21px;
    margin:0 0 12px;
    font-weight:700;
}

.ipo-card p{
    color:#73827e;
    font-size:14px;
    line-height:1.7;
    margin:0 0 23px;
}

.ipo-btn{
    display:inline-flex;
    align-items:center;
    gap:9px;
    text-decoration:none;
    color:#62b546;
    font-size:14px;
    font-weight:700;
    transition:.2s ease;
}

.ipo-btn i{
    transition:.2s ease;
}

.ipo-btn:hover{
    color:#0d674d;
}

.ipo-btn:hover i{
    transform:translateX(4px);
}


/* ---------- DOCUMENT INNER PAGES ---------- */
.docs-page{
    background:#f7faf9;
    padding:70px 0 100px;
}

.docs-head{
    max-width:850px;
    margin:0 auto 38px;
    text-align:center;
}

.docs-kicker{
    color:#62b546;
    text-transform:uppercase;
    letter-spacing:1.5px;
    font-weight:700;
    font-size:12px;
    margin-bottom:12px;
}

.docs-head h2{
    font-family:Manrope,sans-serif;
    color:#173c34;
    font-size:36px;
    line-height:1.2;
    margin:0 0 12px;
    font-weight:700;
}

.docs-head p{
    color:#71817c;
    line-height:1.8;
    margin:0;
}


/* ---------- BACK TO IPO FILINGS ---------- */
.back-link{
    display:inline-flex;
    align-items:center;
    gap:8px;
    text-decoration:none;
    color:#62b546;
    font-size:14px;
    font-weight:700;
    margin-bottom:25px;
    transition:.2s ease;
}

.back-link:hover{
    color:#0d674d;
}

.back-link i{
    transition:.2s ease;
}

.back-link:hover i{
    transform:translateX(-3px);
}


/* ---------- DOCUMENT BOX ---------- */
.doc-panel{
    background:#fff;
    border:1px solid #e3ece8;
    border-radius:20px;
    padding:10px;
    box-shadow:0 12px 35px rgba(20,62,52,.06);
    max-width:950px;
    margin:0 auto;
}

.doc-row{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
    padding:22px 24px;
    border-bottom:1px solid #edf2f0;
}

.doc-row:last-child{
    border-bottom:0;
}

.doc-left{
    display:flex;
    align-items:center;
    gap:16px;
    min-width:0;
}

.doc-file{
    width:48px;
    height:48px;
    border-radius:13px;
    background:#edf9f4;
    color:#62b546;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:19px;
    flex:0 0 auto;
}

.doc-title{
    font-weight:700;
    color:#23453e;
    font-size:15px;
    line-height:1.5;
    margin:0 0 4px;
}

.doc-meta{
    font-size:12px;
    color:#8a9995;
    margin:0;
}

.doc-link{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    border:1px solid #d8e8e2;
    border-radius:9px;
    padding:10px 15px;
    text-decoration:none;
    color:#62b546;
    background:#fff;
    font-size:13px;
    font-weight:700;
    white-space:nowrap;
    transition:.2s ease;
}

.doc-link:hover{
    background:#62b546;
    color:#fff;
    border-color:#62b546;
}


/* ---------- INNER PAGE SUB HEADINGS ---------- */
.subsection{
    font-family:Manrope,sans-serif;
    color:#173c34;
    font-size:22px;
    line-height:1.3;
    font-weight:700;
    max-width:950px;
    margin:0 auto 15px;
}


/* ---------- OPTIONAL MULTIPLE DOCUMENT LIST ---------- */
.disclosure-multi-links{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
}

.disclosure-multi-links a{
    display:inline-flex;
    align-items:center;
    gap:7px;
    padding:9px 13px;
    border-radius:8px;
    background:#edf9f4;
    color:#62b546;
    text-decoration:none;
    font-size:13px;
    font-weight:700;
    transition:.2s ease;
}

.disclosure-multi-links a:hover{
    background:#62b546;
    color:#fff;
}


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

    .ipo-grid{
        grid-template-columns:1fr 1fr;
    }

    .ipo-card{
        min-height:250px;
    }

}

@media (max-width:767px){

    .ipo-page{
        padding:55px 0 70px;
    }

    .ipo-intro{
        margin-bottom:35px;
    }

    .ipo-intro h2{
        font-size:30px;
    }

    .ipo-grid{
        grid-template-columns:1fr;
        gap:18px;
    }

    .ipo-card{
        min-height:auto;
        padding:25px;
    }

    .docs-page{
        padding:50px 0 70px;
    }

    .docs-head h2{
        font-size:30px;
    }

    .docs-head p{
        font-size:14px;
    }

}

@media (max-width:600px){

    .doc-panel{
        padding:6px;
        border-radius:16px;
    }

    .doc-row{
        align-items:flex-start;
        padding:17px 10px;
        gap:12px;
    }

    .doc-left{
        gap:11px;
    }

    .doc-file{
        width:42px;
        height:42px;
        border-radius:11px;
        font-size:16px;
    }

    .doc-title{
        font-size:14px;
    }

    .doc-meta{
        font-size:11px;
    }

    .doc-link{
        padding:9px 10px;
        font-size:11px;
    }

    .doc-link i{
        display:none;
    }

    .subsection{
        font-size:20px;
    }

}
/* Shared CSS - Group Companies pages */
.group-page {
  background: #f7faf9;
  padding: 75px 0 100px;
}
.group-head {
  max-width: 820px;
  margin: 0 auto 45px;
  text-align: center;
}
.group-kicker {
  display: inline-flex;
  gap: 8px;
  color: #62b546;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  margin-bottom: 12px;
}
.group-head h2 {
  font-family: Manrope, sans-serif;
  color: #173c34;
  font-size: 38px;
  line-height: 1.2;
  margin: 0 0 13px;
  font-weight: 700;
}
.group-head p {
  color: #71817c;
  line-height: 1.8;
  margin: 0;
}
.company-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}
.company-card {
  position: relative;
  background: #fff;
  border: 1px solid #e2ebe8;
  border-radius: 22px;
  padding: 30px;
  box-shadow: 0 12px 35px rgba(20, 62, 52, 0.06);
  transition: 0.3s;
  overflow: hidden;
}
.company-card:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 4px;
  background: #62b546;
}
.company-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 18px 42px rgba(20, 62, 52, 0.1);
}
.company-icon {
  width: 58px;
  height: 58px;
  border-radius: 16px;
  background: #e9f8f1;
  color: #62b546;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  margin-bottom: 20px;
}
.company-card h3 {
  font-family: Manrope, sans-serif;
  color: #173c34;
  font-size: 21px;
  line-height: 1.4;
  margin: 0 0 10px;
}
.company-card p {
  color: #778680;
  font-size: 14px;
  line-height: 1.7;
  margin: 0 0 22px;
}
.company-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #62b546;
  text-decoration: none;
  font-size: 14px;
  font-weight: 700;
}
.company-btn:hover {
  color: #0d674d;
}
.company-btn i {
  transition: 0.2s;
}
.company-btn:hover i {
  transform: translateX(4px);
}
.docs-page {
  background: #f7faf9;
  padding: 65px 0 100px;
}
.inner-head {
  max-width: 850px;
  margin: 0 auto 35px;
  text-align: center;
}
.inner-head h2 {
  font-family: Manrope, sans-serif;
  color: #173c34;
  font-size: 34px;
  line-height: 1.25;
  margin: 0 0 12px;
}
.inner-head p {
  color: #71817c;
  line-height: 1.8;
  margin: 0;
}
.back-link {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  color: #62b546;
  text-decoration: none;
  font-size: 14px;
  font-weight: 700;
  margin-bottom: 25px;
}
.back-link:hover {
  color: #0d674d;
}
.report-panel {
  max-width: 950px;
  margin: auto;
  background: #fff;
  border: 1px solid #e2ebe8;
  border-radius: 20px;
  padding: 8px;
  box-shadow: 0 12px 35px rgba(20, 62, 52, 0.06);
}
.report-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 20px 22px;
  border-bottom: 1px solid #edf2f0;
}
.report-row:last-child {
  border-bottom: 0;
}
.report-left {
  display: flex;
  align-items: center;
  gap: 15px;
  min-width: 0;
}
.pdf-icon {
  width: 48px;
  height: 48px;
  border-radius: 13px;
  background: #edf9f4;
  color: #62b546;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  flex: 0 0 auto;
}
.report-title {
  font-weight: 700;
  color: #23453e;
  font-size: 14px;
  line-height: 1.5;
  margin: 0 0 4px;
}
.report-meta {
  font-size: 11px;
  color: #8a9995;
  margin: 0;
}
.view-pdf {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid #d8e8e2;
  border-radius: 9px;
  padding: 10px 14px;
  color: #62b546;
  text-decoration: none;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}
.view-pdf:hover {
  background: #62b546;
  color: #fff;
  border-color: #62b546;
}
.company-label {
  display: inline-block;
  margin-bottom: 10px;
  color: #62b546;
  text-transform: uppercase;
  letter-spacing: 1.4px;
  font-size: 11px;
  font-weight: 700;
}
@media (max-width: 767px) {
  .group-page,
  .docs-page {
    padding: 50px 0 70px;
  }
  .group-head h2 {
    font-size: 30px;
  }
  .company-grid {
    grid-template-columns: 1fr;
  }
  .company-card {
    padding: 25px;
  }
  .inner-head h2 {
    font-size: 29px;
  }
  .report-row {
    align-items: flex-start;
    padding: 16px 10px;
  }
  .report-left {
    gap: 10px;
  }
  .pdf-icon {
    width: 42px;
    height: 42px;
    font-size: 16px;
  }
  .view-pdf {
    padding: 9px 10px;
    font-size: 11px;
  }
  .view-pdf i {
    display: none;
  }
}
.mega-columns.single-columns {
    grid-template-columns: repeat(1,1fr);
}