@font-face {
    font-family: 'Sohographics';
    src: url('/assets/fonts/soho-gothic-pro.woff2') format('woff2'),
         url('/assets/fonts/soo-ghotic.woff2') format('woff2'),
         url('/assets/fonts/soooho.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}


body {
    font-family: 'Sohographics', sans-serif;
}






/* ----- RESET & GLOBAL ----- */
        * { margin:0; padding:0; box-sizing:border-box; }
        html { scroll-behavior:smooth; }
        body {
            font-family: 'Soho Gothic Pro', 'Soho Gothic', 'Poppins', sans-serif !important;
            background: #f5f8fe; color:#1a2b3e; overflow-x:hidden;
            line-height: 1.5;
        }

        /* ----- CURSOR (premium) ----- */
        .cursor { width:8px; height:8px; background:#009BFF; border-radius:50%; position:fixed; pointer-events:none; z-index:9999; transform:translate(-50%,-50%); }
        .cursor-follower { width:40px; height:40px; border:1.5px solid rgba(0,155,255,0.3); border-radius:50%; position:fixed; pointer-events:none; z-index:9998; transform:translate(-50%,-50%); transition:0.15s; }
        @media (max-width:768px){ .cursor, .cursor-follower{ display:none; } }

        /* ----- FULL NAVBAR (white, black text, with hamburger for mobile) ----- */
        .navbar {
            position: fixed; top:0; width:100%; padding:0.8rem 2rem; z-index:1000;
            background:white; box-shadow:0 4px 20px rgba(0,0,0,0.02); transition:0.3s;
        }
        .navbar.scrolled { box-shadow:0 6px 25px rgba(0,0,0,0.05); padding:0.5rem 2rem; }
        .nav-container { max-width:1400px; margin:0 auto; display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; }
        .logo-area { flex-shrink:0; }
        .nav-logo{
    height:80px;
    width:auto;
    transition:0.2s;
}
        .nav-logo:hover{ transform:scale(1.02); }

        /* desktop menu */
        .nav-menu { display:flex; align-items:center; }
        .nav-links { display:flex; gap:2rem; align-items:center; flex-wrap:wrap; }
        .nav-link, .dropdown-btn {
            background:none; border:none; color:#1e2f40; font-weight:500; font-size:1rem;
            letter-spacing:0.02em; padding:0.4rem 0; cursor:pointer; transition:color 0.2s;
            text-decoration:none; display:flex; align-items:center; gap:6px; white-space:nowrap;
        }
        .nav-link:hover, .dropdown-btn:hover { color:#009BFF; }
        .nav-link.active { color:#009BFF; border-bottom:2px solid #009BFF; }
        .dropdown { position:relative; }
        .dropdown-content {
            position:absolute; top:120%; left:-20px; background:white; border-radius:16px;
            padding:0.8rem 0; min-width:220px; box-shadow:0 20px 35px -8px rgba(0,0,0,0.1);
            opacity:0; visibility:hidden; transition:0.2s; z-index:10;
        }
        .dropdown:hover .dropdown-content { opacity:1; visibility:visible; top:100%; }
        .dropdown-content a {
            display:flex; align-items:center; gap:12px; padding:0.7rem 1.5rem; color:#1e2f40;
            text-decoration:none; font-weight:400; transition:0.2s;
        }
        .dropdown-content a:hover { background:#f0f5fc; color:#009BFF; }
        .desktop-get-in-touch {
            background:#009BFF; border-radius:50px; padding:0.6rem 1.8rem; color:white;
            font-weight:500; text-decoration:none; display:flex; align-items:center; gap:8px;
            transition:0.3s; white-space:nowrap; font-size:0.95rem;
        }
        .desktop-get-in-touch:hover { background:#007acc; transform:translateY(-2px); box-shadow:0 8px 15px rgba(0,0,0,0.1); }

        /* mobile header & hamburger */
        .mobile-header { display:none; align-items:center; gap:1rem; }
        .hamburger { display:flex; flex-direction:column; gap:5px; cursor:pointer; }
        .hamburger span { width:25px; height:2px; background:#1e2f40; transition:0.3s; }
        .mobile-get-in-touch-btn { background:#009BFF; color:white; padding:0.5rem 1.2rem; border-radius:40px; text-decoration:none; font-size:0.9rem; display:flex; align-items:center; gap:6px; }
        .mobile-menu {
            display:block; position:fixed; top:70px; left:0; width:100%; background:white; padding:1.5rem;
            box-shadow:0 20px 30px rgba(0,0,0,0.1); transform:translateX(-100%); transition:0.3s; z-index:999;
            max-height:80vh; overflow-y:auto;
        }
        .mobile-menu.active { transform:translateX(0); }
        .mobile-links a, .mobile-dropdown-btn {
            display:block; padding:0.8rem; color:#1e2f40; text-decoration:none; font-weight:500;
            border-bottom:1px solid #eee; width:100%; text-align:left; background:none; border:none;
            font-size:1rem;
        }
        .mobile-dropdown { border-bottom:1px solid #eee; }
        .mobile-dropdown-btn { display:flex; justify-content:space-between; align-items:center; }
        .mobile-dropdown-content { display:none; padding-left:1.5rem; background:#f9f9fc; }
        .mobile-dropdown-content.show { display:block; }
        .mobile-dropdown-content a { display:block; padding:0.6rem 0.8rem; color:#1e2f40; text-decoration:none; }

       /* Laptop / small desktop */
@media (max-width:1200px){
    .nav-logo{
        height:72px !important;
    }
}

/* Tablet */
@media (max-width:992px){
    .nav-logo{
        height:69px !important;
    }
}

/* Mobile */
@media (max-width:768px){
    .nav-logo{
        height:63px !important;
    }
}

/* Small phones */
@media (max-width:480px){
    .nav-logo{
        height:57px !important;
    }
}
        
        @media (min-width:901px){ .mobile-header, .mobile-menu { display:none !important; } }
        @media (max-width:900px){ .nav-menu, .desktop-get-in-touch { display:none; } .mobile-header { display:flex; } }

        /* ----- HERO (background image, static headline) button #009BFF ----- */
        .hero {
            position: relative; min-height: 90vh; display: flex; align-items: center;
            background: url('https://www.uib.no/sites/w3.uib.no/files/styles/content_main/public/media/colourbox19597622.png?itok=v-wbU2m9') center/cover no-repeat;
            background-color: #0b2d45; isolation: isolate; color: white; padding: 8rem 1rem 4rem;
        }
        .hero::before {
            content: ''; position: absolute; inset: 0;
            background: radial-gradient(circle at 30% 40%, rgba(15, 55, 95, 0.6) 0%, rgba(8, 30, 55, 0.75) 90%);
            z-index: 0;
        }
        .hero-content { max-width: 1000px; margin: 0 auto; position: relative; z-index: 3; text-align: center; width: 100%; }
        .hero-label { font-size:0.95rem; text-transform:uppercase; letter-spacing:6px; color:#d0e5ff; margin-bottom:1rem; text-shadow:0 2px 8px rgba(0,0,0,0.5); animation:fadeUp 0.8s forwards; }
        .hero-headline-static { font-size:clamp(2.8rem, 10vw, 6rem); font-weight:700; line-height:1.2; color:white; text-shadow:0 10px 30px rgba(0,40,70,0.7); margin:0.5rem 0; }
        .hero-description { font-size:1.2rem; margin:1.8rem 0 2.2rem; opacity:0; transform:translateY(30px); animation:fadeUp 0.8s 0.6s forwards; color:rgba(255,255,255,0.9); max-width:700px; margin-left:auto; margin-right:auto; }
        .hero-cta { display:flex; justify-content:center; opacity:0; transform:translateY(30px); animation:fadeUp 0.8s 0.8s forwards; }
        .btn-luxury { padding:1rem 2.8rem; border-radius:60px; font-weight:600; font-size:1.1rem; text-decoration:none; display:inline-flex; align-items:center; gap:12px; transition:0.3s; border:1.5px solid transparent; box-shadow:0 10px 25px -5px rgba(0,0,0,0.3); }
        .btn-primary-lux { background:#009BFF; color:white; border:1px solid #7fc9ff; } 
        .btn-primary-lux:hover { background:#007acc; transform:translateY(-3px); box-shadow:0 20px 30px -8px #005f99; }
        .glare-effect { position:relative; overflow:hidden; }
        .glare-effect::after { content:''; position:absolute; top:-50%; left:-60%; width:200%; height:200%; background:linear-gradient(115deg, rgba(255,255,255,0) 10%, rgba(255,255,255,0.4) 30%, rgba(255,255,255,0) 50%); transform:rotate(20deg); transition:left 0.5s; pointer-events:none; }
        .glare-effect:hover::after { left:100%; transition:left 0.6s ease; }
        @keyframes slideUpFade { 0%{ opacity:0; transform:translateY(70px); } 100%{ opacity:1; transform:translateY(0); } }
        @keyframes fadeUp { 0%{ opacity:0; transform:translateY(30px); } 100%{ opacity:1; transform:translateY(0); } }

        /* ----- MARQUEE (unchanged) ----- */
        .infinite-marquee { background:#0a2538; border-block:1px solid #2d4b66; padding:0.8rem 0; overflow:hidden; }
        .marquee-track { display:flex; width:max-content; animation:scrollMarquee 25s linear infinite; }
        .marquee-item { display:flex; align-items:center; gap:1.5rem; padding-right:1.5rem; color:#c4deff; font-weight:500; text-transform:uppercase; letter-spacing:1px; font-size:0.9rem; }
        .marquee-item i { font-size:0.4rem; color:#608bbf; }
        @keyframes scrollMarquee { 0%{ transform:translateX(0); } 100%{ transform:translateX(-50%); } }

        /* ----- SERVICES-MASTERPIECE (full content, colourful) ----- */
        .services-masterpiece { padding: 8rem 8%; background: linear-gradient(135deg, #f0fff8, #fbeffb, #ecf5ff); }
        .section-master { font-size: 4rem; font-weight: 700; margin-bottom: 5rem; font-family: "Space Grotesk", sans-serif; position: relative; background: linear-gradient(145deg, #aa4e8a, #3b8f9b, #c96b4d); -webkit-background-clip: text; background-clip: text; color: transparent; }
        .section-master::after { content: ''; position: absolute; bottom: -15px; left: 0; width: 180px; height: 5px; background: linear-gradient(90deg, #da6bb0, #5fb3c2, #f09b6d); border-radius: 4px; }
        .service-grid-master { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2.5rem; perspective: 1000px; }
        .service-master-card { background: white; padding: 3rem 2.5rem; border-radius: 60px 30px 60px 30px; box-shadow: 0 40px 70px -25px rgba(100, 120, 150, 0.5); transition: 0.6s cubic-bezier(0.23, 1, 0.32, 1); transform-style: preserve-3d; transform: rotateY(0deg) scale(1); border: 1px solid #d0b0f0; text-align: left; }
        .service-master-card:nth-child(1) { border-color: #f9b8d4; box-shadow: 0 40px 70px -25px #d46e9b; }
        .service-master-card:nth-child(2) { border-color: #a8e0cf; box-shadow: 0 40px 70px -25px #3fa386; }
        .service-master-card:nth-child(3) { border-color: #f9d9b0; box-shadow: 0 40px 70px -25px #d48d4b; }
        .service-master-card:hover { transform: rotateY(5deg) scale(1.05) translateZ(30px); border-color: #ffaec9; box-shadow: 0 60px 90px -20px #9f6f8b; }
        .service-icon-master { font-size: 4rem; margin-bottom: 2rem; filter: drop-shadow(0 10px 10px rgba(0,0,0,0.1)); display: inline-block; transition: transform 0.5s ease; }
        .service-master-card:nth-child(1) .service-icon-master { color: #d45396; }
        .service-master-card:nth-child(2) .service-icon-master { color: #2f9e7a; }
        .service-master-card:nth-child(3) .service-icon-master { color: #e07c3a; }
        .service-master-card:hover .service-icon-master { animation: rotateOnHover 0.8s ease-in-out; }
        .service-master-card:nth-child(2):hover .service-icon-master { animation: rotateOnHover 0.8s ease-in-out reverse; }
        @keyframes rotateOnHover { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
        .service-master-card h3 { font-size: 2.5rem; font-weight: 600; margin-bottom: 1.5rem; color: #1d4e44; }
        .service-master-card:nth-child(1) h3 { color: #a13d6b; }
        .service-master-card:nth-child(2) h3 { color: #1f7059; }
        .service-master-card:nth-child(3) h3 { color: #b35f2e; }
        .service-master-card p { font-size: 1.1rem; line-height: 1.7; color: #3b5f5a; }

        /* ----- STATS CRYSTAL (full stats) ----- */
  .stats-crystal {
    background: #0a2a26;
    padding: 6rem 8%;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2rem;
}


/* stat item */
/* CARD */
.stat-crystal-item {
    text-align: center;
    padding: 2.5rem 2rem;
    border-radius: 18px;

    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.08);

    backdrop-filter: blur(8px);
    transition: transform .3s ease, box-shadow .3s ease;
}




/* HOVER EFFECT (desktop) */
.stat-crystal-item:hover {
    transform: translateY(-6px);
    box-shadow: 0 20px 40px rgba(0,0,0,0.35);
}

/* NUMBER */
.stat-number-crystal {
    font-size: 3.5rem;
    font-weight: 700;
    color: #c3ddff;
    text-shadow: 0 0 18px #5c90c0;
}

/* LABEL */
.stat-label-crystal {
    color: #aac2df;
    letter-spacing: 1.2px;
    margin-top: .5rem;
    font-size: .95rem;
}



/* ---------- Tablet ---------- */
@media (max-width: 1024px) {
    .stats-crystal {
        grid-template-columns: repeat(2, 1fr);
        gap: 2.5rem;
    }

    .stat-number-crystal {
        font-size: 3.2rem;
    }
}


/* -------- TABLET -------- */
@media (max-width: 1024px) {

    .stats-crystal{
        grid-template-columns: repeat(2, 1fr);
        padding: 5rem 6%;
    }

}


/* -------- MOBILE -------- */
@media (max-width: 600px) {

    .stats-crystal{
        grid-template-columns: repeat(2, 1fr);
        padding: 3.5rem 1.5rem;
        gap: 1.2rem;
    }

    .stat-crystal-item{
        padding: 2rem 1rem;
        border-radius: 16px;
    }

    .stat-number-crystal{
        font-size: 2.4rem;
    }

    .stat-label-crystal{
        font-size: .8rem;
        letter-spacing: 1px;
    }

}
 /* ----- RIVOLT SCROLL UNIQUE – updated palette: aqua/sky/mint, deep teal accents ----- */
        #rivolt-scroll-unique {
            width:100%; max-width:1300px; margin:2rem auto;
            /* new background: very light aqua blue → soft sky blue → light mint green */
            background: linear-gradient(145deg, #d7f0f5, #c0e5f2, #c2f0e0);
            background-size: 200% 200%;
            border-radius: 4rem 2rem 4rem 2rem;
            /* box shadow: deep muted teal-blue #306070 */
            box-shadow: 0 25px 45px -12px #306070, inset 0 1px 4px rgba(255,255,255,0.8);
            padding: 4rem 2rem; overflow: hidden; position: relative;
            animation: rivoltLightBreath 13s ease-in-out infinite alternate;
            /* border: soft turquoise #7dc4d0 */
            border: 1px solid #7dc4d0;
            backdrop-filter: blur(1px);
            font-family: 'Segoe UI', 'Inter', system-ui, sans-serif; box-sizing: border-box;
        }
        #rivolt-scroll-unique::before {
            content: ""; position: absolute; inset: 0;
            background: radial-gradient(circle at 30% 40%, rgba(255,255,240,0.35) 0%, transparent 35%),
                        radial-gradient(circle at 85% 70%, rgba(210,240,225,0.5) 0%, transparent 45%),
                        repeating-linear-gradient(45deg, rgba(200,225,210,0.1) 0px, rgba(200,225,210,0.1) 2px, transparent 2px, transparent 10px);
            pointer-events: none; z-index: 0; animation: rivoltBgShift 18s infinite alternate;
        }
        .rivolt-scroll-container {
            position: relative; z-index: 5; display: flex; flex-wrap: nowrap;
            overflow: hidden; mask-image: linear-gradient(to right, transparent 0%, black 10%, black 90%, transparent 100%);
            -webkit-mask-image: linear-gradient(to right, transparent 0%, black 10%, black 90%, transparent 100%);
            padding: 1.5rem 0; flex-direction: column; gap: 0;
        }
        .rivolt-word-track {
            display: flex; flex-wrap: nowrap; gap: 2.5rem 4rem; width: max-content; padding-right: 2rem;
            align-items: center; animation: rivoltScrollWords 38s linear infinite; margin-bottom: 1.2rem;
        }
        .rivolt-word-track:last-child {
            animation: rivoltScrollWords 32s linear infinite reverse; margin-bottom: 0;
        }
        .rivolt-word-track span {
            display: inline-block; white-space: nowrap; transition: all 0.2s ease;
            /* default text: deep ocean blue #15557c */
            color: #15557c;
            font-weight: 400; letter-spacing: -0.02em; opacity: 0.85;
            /* text shadow: light glowing blue #9fd3f0 (unchanged but fits new scheme) */
            text-shadow: 2px 4px 12px #9fd3f0;
            animation: rivoltSubtleGlow 4s infinite alternate;
            flex-shrink: 0; font-size: 2rem;
        }
        /* --- apply new color rules per nth-child (keeping original structure) --- */
        .rivolt-word-track span:nth-child(7n+1) {
            font-size: 2.2rem; font-weight: 600; font-style: italic; transform: rotate(0.5deg) skewX(-2deg);
            /* strong teal green #1d7a6b */
            color: #1d7a6b;
            text-transform: uppercase; letter-spacing: 0.12em;
        }
        .rivolt-word-track span:nth-child(7n+2) {
            font-size: 3.4rem; font-weight: 250; font-family: 'Georgia', serif; transform: rotate(-0.8deg) scale(1.1);
            /* every 3rd? actually 7n+2 now: royal blue #1d4491 */
            color: #1d4491;
            text-decoration: underline wavy rgba(60,100,70,0.3); text-underline-offset: 10px;
        }
        .rivolt-word-track span:nth-child(7n+3) {
            font-size: 1.8rem; font-weight: 800; text-transform: lowercase; font-variant: small-caps;
            transform: rotate(1deg) translateY(-4px);
            /* strong teal green again (or keep as #1d7a6b? but spec says every 3rd word = royal blue? we follow mapping:
               7n+3 -> royal blue #1d4491 – but spec: "Every 3rd Word color: #1d4491 – royal blue" so yes */
            color: #1d4491;
            background: rgba(250,255,245,0.25);
            padding: 0.2rem 0.6rem; border-radius: 60% 40% 50% 50%;
        }
        .rivolt-word-track span:nth-child(7n+4) {
            font-size: 4rem; font-weight: 200; font-style: normal; transform: rotate(-1.2deg) skewY(1deg);
            /* default ocean blue #15557c can be used, but we can also apply medium teal – spec says default #15557c, odd words #1d7a6b, every 3rd #1d4491, so 7n+4 keep default */
            color: #15557c;
            text-shadow: 4px 4px 0 rgba(170,210,170,0.4); letter-spacing: -0.03em;
        }
        .rivolt-word-track span:nth-child(7n+5) {
            font-size: 2.7rem; font-weight: 500; font-family: 'Courier New', monospace;
            transform: scale(1.2) rotate(0.3deg);
            /* could be default or teal – but odd words: yes n+5 is odd? we use #1d7a6b (strong teal green) */
            color: #1d7a6b;
            border-bottom: 3px dotted #5f8b70; line-height: 1.2;
        }
        .rivolt-word-track span:nth-child(7n+6) {
            font-size: 2.1rem; font-weight: 400; transform: rotate(2deg) translateY(6px);
            /* royal blue? pattern: 7n+6 keep #1d4491? spec says every 3rd word royal, let's mix: 6th of pattern = every 3rd? better follow spec: odd #1d7a6b, every 3rd #1d4491, rest default #15557c. but we want variation. use #15557c default for 7n+6, but also add background */
            color: #15557c;
            background: linear-gradient(145deg, transparent, rgba(190,220,190,0.4));
            padding: 0.25rem 1rem; border-radius: 40% 20% 40% 20%;
        }
        .rivolt-word-track span:nth-child(7n+7) {
            font-size: 3.8rem; font-weight: 700; font-style: italic; transform: rotate(-0.2deg) scaleX(0.9);
            /* strong teal green for odd (7n+7 is odd) */
            color: #1d7a6b;
            text-transform: uppercase; -webkit-text-stroke: 1px rgba(80,140,100,0.3);
        }
        /* rivolt-special: gradient deep teal → emerald green, with bright aqua glow */
        .rivolt-word-track .rivolt-special {
            font-size: 3.6rem; font-weight: 800;
            background: linear-gradient(135deg, #1f7a8c, #369b7a);
            -webkit-background-clip: text; background-clip: text; color: transparent;
            /* special glow: #7fc9e0 */
            text-shadow: 0 0 15px #7fc9e0, 2px 6px 12px rgba(30,70,40,0.3);
            padding: 0 0.8rem; margin: 0 0.5rem; transform: scale(1.1) rotate(-0.5deg);
            letter-spacing: 2px; font-family: 'Trebuchet MS','Quicksand',sans-serif; position: relative;
        }
        @keyframes rivoltScrollWords { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }
        /* updated background breath to match new palette (light aqua variations) */
        @keyframes rivoltLightBreath {
            0% { background: linear-gradient(145deg, #d7f0f5, #c0e5f2, #c2f0e0); background-size: 200% 200%; background-position: 0% 30%; }
            50% { background: linear-gradient(145deg, #c5ecf2, #b4ddea, #b8eedd); background-size: 200% 200%; background-position: 70% 60%; }
            100% { background: linear-gradient(145deg, #def5fa, #caecf5, #cdf5e8); background-size: 200% 200%; background-position: 100% 20%; }
        }
        @keyframes rivoltBgShift { 0% { opacity: 0.4; transform: scale(1); } 100% { opacity: 1; transform: scale(1.02); } }
        /* subtle glow still using light blue #9fd3f0 but override for specials */
        @keyframes rivoltSubtleGlow {
            0% { text-shadow: 2px 4px 10px rgba(90,160,180,0.2); }
            100% { text-shadow: 6px 8px 18px #7fc9e0; }
        }
        .rivolt-word-track span:hover {
            transform: scale(1.2) rotate(0deg) translateY(-4px); opacity: 1;
            color: #1d4491; /* royal blue hover accent */
            text-shadow: 0 0 12px #b3e4f0; z-index: 10;
        }
        #rivolt-scroll-unique:hover {
            /* box shadow with deep muted teal-blue */
            box-shadow: 0 30px 55px -12px #306070, inset 0 1px 6px #fff;
        }
        /* rivolt-footer-note omitted as requested */
        /* ----- ENHANCED CIRCULAR ECONOMY (full content) ----- */
        .economy-gallery {
            display: grid; grid-template-columns: 1fr 1fr; max-width: 1200px; margin: 6rem auto; gap: 3rem; padding: 0 2rem; align-items: center;
            background: linear-gradient(145deg, #f8fff0, #eaf2fd); border-radius: 80px 30px 80px 30px; padding: 4rem 3rem;
        }
        .gallery-text h2 {
            font-size: 3.5rem; font-weight: 700; margin-bottom: 1.5rem;
            background: linear-gradient(145deg, #0b5f6b, #9b4f7c, #c86b3a);
            -webkit-background-clip: text; background-clip: text; color: transparent;
        }
        .gallery-text p { font-size: 1.2rem; color: #2d5a68; margin-bottom: 2rem; }
        .fanciful-btn {
            background: linear-gradient(145deg, #2b7380, #ac5f8b); color: white; padding: 1rem 2.8rem; border-radius: 60px; font-weight: 600;
            text-decoration: none; display: inline-flex; align-items: center; gap: 12px; transition: 0.3s; overflow: hidden; position: relative;
            box-shadow: 0 12px 25px -8px #3d6170;
        }
        .fanciful-btn:hover { transform: translateY(-3px); box-shadow: 0 20px 30px -8px #1f4757; }
        .gallery-visual { display: flex; justify-content: center; }
        .mature-icon { font-size: 7rem; color: #268f96; filter: drop-shadow(0 20px 20px #b7cedf); animation: rotateInfinity 14s infinite linear; }
        @keyframes rotateInfinity { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }



      /*NEW PREMIUM GALLERY */
.lux-gallery {
  position: relative;
  overflow: hidden;
  padding: 30px 0;
  background:
 
    radial-gradient(120% 120% at 50% 0%,
      rgba(255,255,255,0.18),
      rgba(8,129,209,0.95)),
    linear-gradient(180deg, #0881D1, #055a96);
}

/* Track */
.lux-track {
  display: flex;
  gap: 70px;
  padding: 0 14vw;
  will-change: transform;
}

/* Items */
.lux-item {
  flex: 0 0 460px;
  height: 350px; /* reduced height */
  border-radius: 26px;
  overflow: hidden;
  background: rgba(255,255,255,0.06);
  backdrop-filter: blur(16px);
  box-shadow: 0 40px 90px rgba(0,0,0,0.35);
  transform: scale(0.88);
  transition: transform 0.9s cubic-bezier(.22,.61,.36,1);
  position: relative;
}

/* Dynamic light reflection */
.lux-item::after {
  content: "";
  position: absolute;
  inset: -40%;
  background: linear-gradient(
    120deg,
    transparent 40%,
    rgba(255,255,255,0.25),
    transparent 60%
  );
  transform: translateX(-100%);
  transition: transform 1.6s ease;
}

.lux-item.active::after {
  transform: translateX(100%);
}

.lux-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Active center */
.lux-item.active {
  transform: scale(1);
}

/* Caption */
.lux-item figcaption {
  position: absolute;
  bottom: 28px;
  left: 28px;
  right: 28px;
  font-size: 18px;
  font-weight: 500;
  letter-spacing: 0.4px;
  color: white;
  opacity: 0;
  transform: translateY(18px);
  transition: all 0.8s cubic-bezier(.22,.61,.36,1);
}

.lux-item.active figcaption {
  opacity: 1;
  transform: translateY(0);
}

/* Glassy navigation */
.lux-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 64px;
  height: 64px;
  border-radius: 50%;
  border: none;
  cursor: pointer;
  background: rgba(255,255,255,0.18);
  backdrop-filter: blur(18px);
  color: white;
  font-size: 34px;
  box-shadow: 0 10px 40px rgba(0,0,0,0.35);
  transition: transform .4s ease, background .4s ease;
  z-index: 10;
}

.lux-nav:hover {
  transform: translateY(-50%) scale(1.1);
  background: rgba(255,255,255,0.28);
}

.lux-nav.prev { left: 40px; }
.lux-nav.next { right: 40px; }

/* Mobile */
@media (max-width: 768px) {
  .lux-item {
    flex: 0 0 78vw;
    height: 400px;
  }
}









       /* =====================================
   INFOGRAPHIC MARINE SECTION
===================================== */
/* =========================================
   OCEAN1 SECTION (FULL CLEAN BUILD)
========================================= */

.ocean1-section {
  position: relative;
  padding: 110px 0;
  background: linear-gradient(135deg, #eaf6f8 0%, #f7fbfc 100%);
  font-family: "Soho Gothic Pro", sans-serif;
  overflow: hidden;
  overflow-x: hidden;
}

/* GRID */
.ocean1-grid {
  max-width: 1350px;
  margin: auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
}

/* LEFT CONTENT */
.ocean1-content h3 {
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 3px;
  color: #0a3f52;
  margin-bottom: 15px;
}

.ocean1-content h2 {
  font-size: clamp(36px, 4vw, 52px);
  font-weight: 800;
  line-height: 1.15;
  margin-bottom: 30px;
  color: #032c3a;
}

.ocean1-content p {
  font-size: 18px;
  line-height: 1.7;
  max-width: 520px;
  color: #355a66;
  margin-bottom: 40px;
}

.ocean1-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 32px;
  border-radius: 50px;
  background: linear-gradient(135deg,#00c6a7,#007b6f);
  color: white;
  font-weight: 700;
  text-decoration: none;
  transition: 0.3s ease;
}

.ocean1-btn:hover {
  transform: translateY(-4px);
  box-shadow: 0 15px 40px rgba(0,0,0,0.2);
}

/* =========================================
   INFOGRAPHIC LAYOUT
========================================= */

.ocean1-right {
  display: flex;
  justify-content: center;
}

.ocean1-visual {
  position: relative;
  width: 650px;
  height: 650px;
}

/* CENTER CIRCLE */
.ocean1-water-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 320px;
  height: 320px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: linear-gradient(145deg,#0f5c75,#042c3a);
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 0 40px 80px rgba(0,0,0,0.25);
  z-index: 3;
}

.ocean1-water-icon::before {
  content: "";
  position: absolute;
  inset: -60px;
  border-radius: 50%;
  border: 2px dashed #00a896;
  animation: ocean1-spin 25s linear infinite;
}

@keyframes ocean1-spin {
  to { transform: rotate(360deg); }
}

.ocean1-pulse-ring {
  position: absolute;
  width: 340px;
  height: 340px;
  border-radius: 50%;
  border: 2px solid rgba(0,212,177,0.5);
  animation: ocean1-pulse 2s ease-out infinite;
  pointer-events: none;
}

@keyframes ocean1-pulse {
  0% { transform: scale(1); opacity: 0.7; }
  100% { transform: scale(1.3); opacity: 0; }
}

.ocean1-section {
  opacity: 0;
  transform: translateY(80px);
  transition: 1.2s ease;
}

.ocean1-section.visible {
  opacity: 1;
  transform: translateY(0);
}

/* =========================================
   STAT CARDS
========================================= */

.ocean1-stat {
  position: absolute;
  width: 230px;
  padding: 28px;
  border-radius: 20px;
  background: rgba(255,255,255,0.65);
  backdrop-filter: blur(14px);
  border: 1px solid rgba(255,255,255,0.4);
  box-shadow: 0 25px 60px rgba(0,0,0,0.08);
  text-align: center;
  opacity: 0;
  transform: translateY(40px);
  transition: 0.4s ease;
  z-index: 5;
}

.ocean1-stat i {
  font-size: 34px;
  margin-bottom: 12px;
  color: #00a896;
}

.ocean1-stat h4 {
  font-size: 24px;
  font-weight: 800;
  margin-bottom: 6px;
  color: #032c3a;
}

.ocean1-stat span {
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: #6c8c95;
}

/* POSITIONING */

.ocean1-stat-top {
  top: 8%;
  left: 30%;
  transform: translate(-50%, 0);
}

.ocean1-stat-right {
  top: 50%;
  right: -20px;
  transform: translateY(-50%);
}

.ocean1-stat-bottom {
  bottom: 8%;
  left: 20%;
  transform: translate(-50%, 0);
}

/* Reveal Animation */
.ocean1-stat.reveal {
  animation: ocean1-statReveal 0.8s ease forwards;
}

.ocean1-stat.reveal:nth-of-type(1){ animation-delay: .2s; }
.ocean1-stat.reveal:nth-of-type(2){ animation-delay: .5s; }
.ocean1-stat.reveal:nth-of-type(3){ animation-delay: .8s; }

@keyframes ocean1-statReveal {
  to {
    opacity: 1;
    transform: translate(0,0);
  }
}

/* Hover ring reaction */
.ocean1-visual:hover .ocean1-water-icon::before {
  animation-duration: 8s;
  border-color: #00d4b1;
}

.ocean1-visual:hover .ocean1-water-icon {
  box-shadow: 0 0 60px rgba(0,212,177,0.4);
}

/* =========================================
   UNDERWATER CORE SYSTEM
========================================= */

.ocean1-core {
  position: relative;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  overflow: hidden;
  filter: url(#waterDistortion);
  transition: transform 0.3s ease;
  transform-style: preserve-3d;
}

.ocean1-ocean {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 30%, #0f5c75, #042c3a);
}

.ocean1-light-rays {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% -20%, rgba(255,255,255,0.25), transparent 60%);
  animation: ocean1-raysMove 8s ease-in-out infinite;
  pointer-events: none;
}

@keyframes ocean1-raysMove {
  0% { transform: translateY(-10px); opacity: 0.7; }
  50% { transform: translateY(10px); opacity: 0.9; }
  100% { transform: translateY(-10px); opacity: 0.7; }
}

/* =========================================
   FLOATING PLASTIC BOTTLES
========================================= */

.ocean1-bottle {
  position: absolute;
  width: 14px;
  height: 34px;
  background: rgba(255,255,255,0.85);
  border-radius: 6px 6px 4px 4px;
  opacity: 0.85;
  animation: ocean1-floatBottle 10s linear infinite;
}

.ocean1-bottle::before {
  content: "";
  position: absolute;
  top: -6px;
  left: 3px;
  width: 8px;
  height: 8px;
  background: rgba(255,255,255,0.9);
  border-radius: 2px;
}

.ocean1-bottle1 { left: 30px; animation-delay: 0s; }
.ocean1-bottle2 { left: 90px; animation-delay: 3s; }
.ocean1-bottle3 { left: 150px; animation-delay: 6s; }

@keyframes ocean1-floatBottle {
  0% { bottom: -40px; transform: rotate(0deg); opacity: 0; }
  15% { opacity: 1; }
  100% { bottom: 220px; transform: rotate(180deg); opacity: 0; }
}

/* =========================================
   WATER BUBBLES
========================================= */

.ocean1-bubble {
  position: absolute;
  bottom: -20px;
  width: 10px;
  height: 10px;
  background: rgba(255,255,255,0.6);
  border-radius: 50%;
  animation: ocean1-bubbleRise 8s linear infinite;
}

.ocean1-bubble1 { left: 40px; animation-delay: 1s; }
.ocean1-bubble2 { left: 70px; animation-delay: 2s; }
.ocean1-bubble3 { left: 120px; animation-delay: 3s; }
.ocean1-bubble4 { left: 150px; animation-delay: 4s; }
.ocean1-bubble5 { left: 100px; animation-delay: 5s; }

@keyframes ocean1-bubbleRise {
  0% { transform: translateY(0) scale(0.5); opacity: 0; }
  20% { opacity: 1; }
  100% { transform: translateY(-220px) scale(1.2); opacity: 0; }
}

/* EXTRA BUBBLES ON HOVER */
.ocean1-water-icon:hover .ocean1-bubble {
  animation-duration: 4s;
  transform: scale(1.4);
}

/* DARK MODE */
body.dark-mode .ocean1-section {
  background: linear-gradient(135deg, #041f27 0%, #062e39 100%);
}

body.dark-mode .ocean1-content h2,
body.dark-mode .ocean1-stat h4 {
  color: #ffffff;
}

body.dark-mode .ocean1-content p,
body.dark-mode .ocean1-stat span {
  color: #b9d4db;
}

body.dark-mode .ocean1-stat {
  background: rgba(10,30,36,0.65);
  border: 1px solid rgba(0,255,204,0.2);
}

/* RESPONSIVE */
@media (max-width: 1024px) {
  .ocean1-grid {
    grid-template-columns: 1fr;
    gap: 60px;
  }

  .ocean1-visual {
    width: 700px;
    height: 700px;
  }

  .ocean1-water-icon {
    width: 240px;
    height: 240px;
  }

  .ocean1-water-icon::before {
    inset: -40px;
  }
}

/* Depth variation */
.ocean1-bubble:nth-child(odd) {
  filter: blur(2px);
  opacity: 0.5;
  transform: scale(0.8);
}














        /* ----- FOOTER with arrow toggles hiding submenus ----- */
        .footer-portal { background:#0a1828; color:#e0e9f5; padding:4rem 2rem 2rem; }
        .footer-grid-portal { display:grid; grid-template-columns:repeat(4,1fr); max-width:1300px; margin:0 auto; gap:2rem; }
        .footer-col h4 { color:white; font-weight:500; margin-bottom:1.5rem; font-size:1.2rem; border-left:3px solid #009BFF; padding-left:1rem; }
        .footer-col ul { list-style:none; }
        .footer-col li { margin-bottom:0.7rem; }
        .footer-col a { color:#c2d6f0; text-decoration:none; transition:0.2s; display:inline-flex; align-items:center; gap:8px; }
        .footer-col a:hover { color:white; transform:translateX(4px); }
        .footer-submenu { display:none; margin:0.3rem 0 0.5rem 1.4rem; list-style:none; border-left:1px dashed #3d5f7a; padding-left:1rem; }
        .footer-submenu.show { display:block; }
        .footer-submenu li { margin-bottom:0.3rem; }
        .footer-submenu a { font-size:0.9rem; color:#9fbad9; }
        .footer-toggle {
            cursor:pointer; display:flex; align-items:center; gap:8px; color:#c2d6f0;
            transition:0.2s; margin-bottom:0.5rem;
        }
        .footer-toggle:hover { color:white; }
        .footer-toggle i { transition:transform 0.2s; font-size:1rem; }
        .footer-toggle.open i { transform:rotate(90deg); }
        .footer-logo p { font-size:0.9rem; color:#9fb5d0; line-height:1.5; }
        .copyright-portal { text-align:center; padding-top:2rem; font-size:0.9rem; color:#6d8eb0; border-top:1px solid #1d3144; margin-top:2rem; }

        /* responsive */
        @media (max-width:1024px){
            .footer-grid-portal { grid-template-columns:repeat(2,1fr); }
            .service-grid-master { grid-template-columns:1fr; }
            .stats-crystal { grid-template-columns:1fr 1fr; }
            .economy-gallery { grid-template-columns:1fr; }
            .marine-grid { grid-template-columns:1fr; }
        }
        @media (max-width:640px){
            .footer-grid-portal { grid-template-columns:1fr; }
            .gallery-container { width:100%; }
            .arrow-left { left:0; } .arrow-right { right:0; }
        }












        /* picture perfect section /*


      /* SOHO GOTHIC PRO */
@font-face {
    font-family: "Soho Gothic Pro";
    src: url("./fonts/SohoGothicPro-Regular.woff2") format("woff2");
    font-weight: 400;
}
@font-face {
    font-family: "Soho Gothic Pro";
    src: url("./fonts/SohoGothicPro-Bold.woff2") format("woff2");
    font-weight: 700;
}

.impact-exact {
    display: flex;
    width: 100%;
    min-height: 520px;
    font-family: "Soho Gothic Pro", sans-serif;
}

/* LEFT SIDE (WIDER) */
.impact-left {
    width: 60%;
    background: #7c004f;
    padding: 50px 90px 120px 90px;
    position: relative;
    color: white;
    overflow: hidden;
}

/* RIGHT SIDE (SMALLER) */
.impact-right {
    width: 40%;
    background: #e8dde4;
    padding: 70px 80px;
    display: flex;
    align-items: center;
}

.impact-right {
    display: flex;
    align-items: center;
    justify-content: center;
}

.right-inner {
    max-width: 380px;
}



/* DIVERTING BLOCK */
.diverting-block {
    position: relative;
    z-index: 1;
}

.diverting-block span {
    font-size: 46px;
    font-weight: 700;
    color: #ff9900;
}

.diverting-block h2 {
    font-size: 28px;
    line-height: 1.4;
    font-weight: 400;
    margin-left: 50px;
}

/* Vertical Line + Recycle */
.vertical-line {
    position: absolute;
    left: 0;
    top: 0;
    height: 120px;
    border-left: 2px solid #ffffff;
}

.vertical-line i {
    position: absolute;
    top: -35px;
    left: -16px;
    font-size: 30px;
    color: white;
    animation: rotateIcon 6s linear infinite;
}

/* TRANSFORMING BLOCK */
.transforming-block {
    position: relative;
    margin-top: 25px;
    max-width: 520px;
}


.transforming-block h3 {
    font-size: 36px;
    font-weight: 400;
    line-height: 1.5;
}

/* BASELINE ICON ROW */
.impact-icons-line {
    position: absolute;
    bottom: 40px;
    left: 90px;
    right: 90px;
    display: flex;
    justify-content: space-between;
   align-items: center;   /* important */
    border-bottom: 4px solid #ff9900;
    padding-bottom: 0;     /* remove extra space */
}


.impact-icons-line::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -2px;
    height: 4px;
    background-image: radial-gradient(circle, #ff9900 3px, transparent 3px);
    background-size: 80px 4px;  /* spacing between dots */
    background-repeat: repeat-x;
    opacity: 0.4;  /* subtle */
}


.impact-left,
.impact-right {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}

.impact-exact.visible .impact-left,
.impact-exact.visible .impact-right {
    opacity: 1;
    transform: translateY(0);
}



.icon i {
    font-size: 56px;
    color: #ff9900;
}


.icon i,
.right-icons i {
    transition: transform 0.3s ease, opacity 0.3s ease;
}

.icon i:hover,
.right-icons i:hover {
    transform: translateY(-4px);
    opacity: 0.85;
}


/* Truck slight motion */
.truck i {
    animation: truckMove 6s ease-in-out infinite;
}

@keyframes truckMove {
    0%   { transform: translateX(0); }
    40%  { transform: translateX(12px); }
    45%  { transform: translateX(10px); }  /* slight pull back */
    50%  { transform: translateX(14px); }  /* tiny bounce forward */
    55%  { transform: translateX(12px); }
    100% { transform: translateX(0); }
}


/* RIGHT SIDE */
.circle-icon {
    border: 2px solid #9b7a91;
    border-radius: 50%;
    width: 70px;
    height: 70px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.circle-icon i {
    font-size: 30px;
    color: #9b7a91;
}

.right-inner h2 {
    margin: 30px 0;
    font-size: 34px;
    font-weight: 400;
    color: #9b7a91;
    line-height: 1.5;
}

.right-icons {
    display: flex;
    gap: 40px;
    font-size: 40px;
    color: #7c004f;
}

.right-icons i {
    animation: float 4s ease-in-out infinite;
}

.right-icons i:nth-child(2) { animation-delay: .5s; }
.right-icons i:nth-child(3) { animation-delay: 1s; }
.right-icons i:nth-child(4) { animation-delay: 1.5s; }

/* ANIMATIONS */
@keyframes rotateIcon {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

@keyframes truckMove {
    0%,100% { transform: translateX(0); }
    50% { transform: translateX(8px); }
}

@keyframes float {
    0%,100% { transform: translateY(0); }
    50% { transform: translateY(-8px); }
}

/* MOBILE */
@media (max-width: 992px) {
    .impact-exact {
        flex-direction: column;
    }

    .impact-left,
    .impact-right {
        width: 100%;
        padding: 50px 30px;
        position: relative;
    }

    .transforming-block {
        position: relative;
        top: auto;
        right: auto;
        margin-top: 40px;
    }

    .impact-icons-line {
        position: relative;
        left: 0;
        right: 0;
        margin-top: 40px;
    }
}






/* modified polished css for sustainable sect/*

/* ===============================
   GLOBAL FONT
================================= */
#sf26_sustainable_section,
#sf26_sustainable_section * {
  font-family: "Soho Gothic Pro", sans-serif;
}

/* ===============================
   SECTION REFINEMENT
================================= */
#sf26_sustainable_section {
  background-color: #cfe1e6;
  min-height: 100vh;
  display: flex;
  align-items: stretch;
  padding: 0;
  overflow: hidden;
}



#sf26_left {
  padding-top: 40px;
  padding-bottom: 40px;
}

#sf26_stats {
  padding-top: 60px;
  padding-bottom: 60px;
}




#sf26_left,
#sf26_stats {
  display: flex;
  flex-direction: column;
 justify-content: center;
transform: translateY(-20px);
  padding: 0 20px;
}


#sf26_grid {
  width: 100%;
  max-width: 1350px;
  margin-left: auto;
  margin-right: 0;
  display: grid;
  grid-template-columns: 1.1fr 1fr 1fr;
  gap: 40px;
  align-items: stretch;
  min-height: 100vh;
}






#sf26_image {
  position: relative;
  margin-right: -80px;
  display: flex;
}

#sf26_image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}







/* ===============================
   TYPOGRAPHY (FLUID SCALING)
================================= */
#sf26_heading {
  font-size: clamp(34px, 4vw, 56px);
  font-weight: 800;
  letter-spacing: 1px;
  margin-bottom: 25px;
  color: gray !important;
}




#sf26_text {
  font-size: clamp(16px, 1.4vw, 19px);
  line-height: 1.7;
  max-width: 520px;
}

/* ===============================
   PREMIUM BUTTON ULTRA
================================= */
#sf26_btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 14px 32px;
  border-radius: 60px;
  background: linear-gradient(135deg,#0f3c3f,#1b6d70);
  color: #fff;
  font-weight: 700;
  text-decoration: none;
  overflow: hidden;
  transition: 0.4s ease;
  box-shadow: 0 10px 30px rgba(0,0,0,0.15);
}

#sf26_btn:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 40px rgba(0,0,0,0.25);
}

/* LIGHT SWEEP */
#sf26_glare {
  position: absolute;
  top: 0;
  left: -100%;
  width: 50%;
  height: 100%;
  background: linear-gradient(120deg, transparent, rgba(255,255,255,0.5), transparent);
  transform: skewX(-20deg);
}

#sf26_btn:hover #sf26_glare {
  animation: sf26_sweep 1.2s ease;
}

@keyframes sf26_sweep {
  from { left: -100%; }
  to { left: 200%; }
}

/* ===============================
   STATS CARD GLASS DEPTH
================================= */
.sf26_stat_box {
  display: flex;
  gap: 20px;
  padding: 25px;
  border-radius: 16px;
  background: rgba(255,255,255,0.7);
  backdrop-filter: blur(8px);
  box-shadow: 0 10px 30px rgba(0,0,0,0.08);
  transition: 0.4s ease;
}

.sf26_stat_box:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 40px rgba(0,0,0,0.12);
}

.sf26_number {
  font-size: clamp(28px, 2.5vw, 38px);
  font-weight: 800;
}

/* ===============================
   IMAGE PARALLAX DEPTH
================================= */
#sf26_image {
  position: relative;
  overflow: hidden;
}

#sf26_image img {
  width: 100%;
  transition: transform 1.2s ease;
}

#sf26_image:hover img {
  transform: scale(1.05);
}

/* ===============================
   SCROLL REVEAL
================================= */
.sf26_reveal {
  opacity: 0;
  transform: translateY(60px);
  transition: all 1s ease;
}

.sf26_reveal.active {
  opacity: 1;
  transform: translateY(0);
}

/* ===============================
   MOBILE RESPONSIVE
================================= */
@media (max-width: 1024px) {

  #sf26_grid {
    grid-template-columns: 1fr;
    gap: 60px;
  }

  #sf26_sustainable_section {
    padding: 90px 20px;
  }

  #sf26_text {
    max-width: 100%;
  }

}








/* marine map */





/* SECTION WRAPPER */


#sf26_image {
  position: relative;
  margin-right: -80px; /* pushes image to section edge */
  display: flex;
  align-items: stretch;
}

#sf26_image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}



#sf26_stats {
  display: flex;
  flex-direction: column;
  gap: 25px;
}

/* GRID */
#sf26_grid {
  max-width: 1350px;
  margin-left: auto;
  margin-right: 0; /* allow right breakout */
  display: grid;
  grid-template-columns: 1.1fr 1fr 1fr;
  gap: 1px;
  align-items: stretch;
}

/* LEFT COLUMN FIX */
#sf26_left {
  padding: 120px 60px 120px 0; /* restores vertical breathing room */
  display: flex;
  flex-direction: column;
  justify-content: center; /* vertical centering like image */
}

/* HEADING */
#sf26_heading {
  font-size: 56px; /* larger like screenshot */
  font-weight: 800;
  color: #0f3c3f;
  line-height: 1.05;
  margin-bottom: 40px;
}

/* PARAGRAPH */
#sf26_text {
  font-size: 22px;
  line-height: 1.7;
  color: #2c4e53;
  margin-bottom: 45px;
  max-width: 580px;
}

/* GRID */
#sf26_grid {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr 1fr;
  align-items: stretch;
}

/* LEFT SIDE */
#sf26_left {
  padding-right: 60px;
}

#sf26_heading {
  font-size: 42px;
  font-weight: 800;
  color: #0f3c3f;
  line-height: 1.1;
  margin-bottom: 30px;
}

#sf26_text {
  font-size: 20px;
  line-height: 1.7;
  color: #2c4e53;
  margin-bottom: 35px;
}

/* FANCY BUTTON */
#sf26_btn {
  position: relative;
  display: inline-flex; /* ensures natural width */
  align-items: center;
  justify-content: center;
  gap: 12px;

  padding: 14px 32px;
  width: auto;              /* prevents full width */
  max-width: fit-content;   /* extra safety */

  background: linear-gradient(135deg, #0f3c3f, #1b6d70);
  color: #fff;
  text-decoration: none;
  font-weight: 600;
  border-radius: 50px;
  overflow: hidden;
  transition: all 0.4s ease;
  box-shadow: 0 6px 18px rgba(0,0,0,0.15);
}

/* Prevent flex parent stretching */
#sf26_left a {
  align-self: flex-start; /* keeps it normal width */
}

#sf26_btn:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 28px rgba(0,0,0,0.25),
              0 0 20px rgba(27,109,112,0.6);
}

#sf26_arrow {
  display: flex;
  align-items: center;
  transition: transform 0.3s ease;
}

#sf26_btn:hover #sf26_arrow {
  transform: translateX(6px);
}

#sf26_glare {
  position: absolute;
  top: 0;
  left: -75%;
  width: 50%;
  height: 100%;
  background: linear-gradient(
    120deg,
    rgba(255,255,255,0.1),
    rgba(255,255,255,0.6),
    rgba(255,255,255,0.1)
  );
  transform: skewX(-25deg);
  transition: 0.8s;
}

#sf26_btn:hover #sf26_glare {
  left: 130%;
}

.sf26_icon svg {
  width: 44px;
  height: 44px;
}
/* CENTER STATS (Touch Top & Bottom) */
#sf26_stats {
  background: #f2f4f5;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.sf26_stat_box {
  padding: 40px 30px;
  border-bottom: 1px solid #d8d8d8;
  display: flex;
  gap: 20px;
}

.sf26_stat_box:last-child {
  border-bottom: none;
}

.sf26_icon {
  font-size: 36px;
}

.sf26_small {
  font-size: 16px;
  margin-bottom: 8px;
}

.sf26_number {
  font-size: 52px;
  font-weight: 800;
  line-height: 1;
}

.sf26_label {
  display: inline-block;
  font-size: 14px;
  font-weight: 700;
  padding: 4px 10px;
  margin-top: 8px;
  letter-spacing: 1px;
}

.sf26_desc {
  font-size: 15px;
  margin-top: 6px;
}

/* COLORS */
.sf26_green { color: #b7d52a; }
.sf26_yellow { background: #d7e96a; }

.sf26_purple_text { color: #7a1b6d; }
.sf26_purple_bg { background: #7a1b6d; color: #fff; }

.sf26_blue_text { color: #1d9ed8; }
.sf26_blue_bg { background: #1d9ed8; color: #fff; }

/* IMAGE BLEEDS TO EDGE */
#sf26_image {
  margin-right: -6%;
}

#sf26_image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* MOBILE */
@media (max-width: 1024px) {
  #sf26_grid {
    grid-template-columns: 1fr;
  }

  #sf26_left {
    padding-right: 6%;
    margin-bottom: 40px;
    
  }

  #sf26_image {
    margin-right: 0;
    height: 400px;
  }

  .sf26_number {
    font-size: 36px;
  }
}








/* CIRCULAR INFOGRAPH NXT SECTION */

#qx41inf_section {
  background: #ffffff;
  padding: 160px 0;
  font-family: 'Segoe UI', sans-serif;
  overflow: hidden;
}

/* MAIN TITLE */
#qx41inf_main_title {
  text-align: center;
  max-width: 900px;
  margin: 0 auto 80px auto;
  font-size: 26px;
  font-weight: 600;
  color: #1f2a30;
}

/* WRAPPER */
#qx41inf_wrapper {
  max-width: 1350px;
  margin: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 100px; /* more balanced */
}




/* Side panels width refined */
#qx41inf_left_content,
#qx41inf_right_content {
  width: 320px;
}



#qx41inf_main_title {
  font-size: clamp(22px, 3vw, 34px);
  font-weight: 700;
  line-height: 1.4;
}

#qx41inf_left_content h3,
#qx41inf_right_content h3 {
  font-size: clamp(18px, 2vw, 24px);
  font-weight: 700;
}

#qx41inf_left_content p,
#qx41inf_right_content p {
  font-size: clamp(15px, 1.6vw, 18px);
  line-height: 1.6;
}

#qx41inf_big_number {
  font-size: clamp(44px, 5vw, 60px);
  font-weight: 800;
}












.qx41inf_reveal {
  opacity: 0;
  transform: translateY(60px);
  transition: all 1s ease;
}

.qx41inf_reveal.active {
  opacity: 1;
  transform: translateY(0);
}









/* COLOR TITLES */
.qx41inf_energy { color: #7b1b6e; }
.qx41inf_emission { color: #1e88e5; }
.qx41inf_oil { color: #9ccc1a; }

/* BIG NUMBER */
#qx41inf_big_number {
  font-size: 60px;
  color: #7b1b6e;
  margin: 25px 0 10px;
}

/* RING */
#qx41inf_ring_wrap {
  position: relative;
  width: 520px;
  height: 520px;
  animation: qx41inf_float 8s ease-in-out infinite alternate;
}

@keyframes qx41inf_float {
  from { transform: rotate(-2deg); }
  to { transform: rotate(2deg); }
}

#qx41inf_orange_ring {
  position: absolute;
  width: 100%;
  height: 100%;
  background: #f57c00;
  border-radius: 50%;
}

#qx41inf_white_underlay {
  position: absolute;
  width: 84%;
  height: 84%;
  top: 8%;
  left: 8%;
  background: white;
  border-radius: 50%;
  box-shadow: 0 30px 70px rgba(0,0,0,0.25);
}

/* INNER CIRCLE */
#qx41inf_circle {
  position: absolute;
  width: 74%;
  height: 74%;
  top: 13%;
  left: 13%;
  border-radius: 50%;
  overflow: hidden;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
}

.qx41inf_quad {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 40px;
  transition: 0.4s ease;
}

.qx41inf_purple { background: #7b1b6e; }
.qx41inf_blue { background: #1e88e5; }
.qx41inf_green { background: #9ccc1a; }
.qx41inf_darkpurple { background: #6a005f; }

/* HOVER GLOW */
.qx41inf_quad:hover {
  filter: brightness(1.1);
  box-shadow: inset 0 0 40px rgba(255,255,255,0.6);
}

/* CENTER LOGO */
#qx41inf_center_logo {
  position: absolute;
  width: 150px;
  height: 150px;
  background: white;
  border-radius: 50%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

#qx41inf_logo_overlay {
  position: absolute;
  width: 100%;
  height: 100%;
  background: white;
  opacity: 0.3;
}

/* MOBILE */
@media (max-width: 1024px) {

  #qx41inf_wrapper {
    flex-direction: column;
    gap: 60px;
    text-align: center;
  }

  #qx41inf_ring_wrap {
    width: 90%;
    height: auto;
    aspect-ratio: 1/1;
  }

}






/*readaudjment of center */








#qx41inf_section {
  font-family: "Soho Gothic Pro", sans-serif;
   padding: 110px 0; /* reduced from 160px */
}

/* TITLE */
#qx41inf_main_title {
  font-family: "Soho Gothic Pro", sans-serif;
  font-size: 34px;
  font-weight: 700;
  text-align: center;
  max-width: 1000px;
    margin: 0 auto 50px auto; /* reduced gap */
  line-height: 1.4;
}

/* RING CONTAINER */
#qx41inf_ring_container {
  position: relative;
  width: 540px;
  height: 540px;
  flex-shrink: 0;
}

/* ROTATION ONLY ON BACKGROUND */
#qx41inf_ring_rotating {
  width: 100%;
  height: 100%;
  position: absolute;
  animation: qx41inf_subtle_rotate 20s linear infinite;
}
@keyframes qx41inf_subtle_rotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

#qx41inf_ring_rotating {
  animation: qx41inf_subtle_rotate 60s linear infinite;
}







/*add life to orange*/
#qx41inf_orange_ring {
  animation: qx41inf_pulse 6s ease-in-out infinite;
}

@keyframes qx41inf_pulse {
  0% { box-shadow: 0 0 0 rgba(245,124,0,0.4); }
  50% { box-shadow: 0 0 40px rgba(245,124,0,0.35); }
  100% { box-shadow: 0 0 0 rgba(245,124,0,0.4); }
}


/*elevation*/
.qx41inf_quad {
  transition: transform 0.4s ease, box-shadow 0.4s ease;
}

.qx41inf_quad:hover {
  transform: scale(1.05);
  box-shadow: inset 0 0 50px rgba(255,255,255,0.6);
}








#qx41inf_section {
  padding: 100px 0;
}

/* PERFECT CIRCLE */
#qx41inf_orange_ring {
  width: 100%;
  height: 100%;
  background: #f57c00;
  border-radius: 50%;
  position: absolute;
}

/* WHITE UNDERLAY (reduced gap = thicker ring) */
#qx41inf_white_underlay {
  position: absolute;
  width: 80%;
  height: 80%;
  top: 10%;
  left: 10%;
  background: white;
  border-radius: 50%;
  box-shadow: 0 35px 80px rgba(0,0,0,0.25);
}

/* INNER GRID */
/* INNER COLOR CIRCLE */
#qx41inf_circle {
  position: absolute;
  width: 70%;
  height: 70%;
  top: 15%;
  left: 15%;
  border-radius: 50%;
  overflow: hidden;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
}

.qx41inf_quad {
  display: flex;
  align-items: center;
  justify-content: center;
  transition: 0.4s ease;
}

.qx41inf_quad:hover {
  box-shadow: inset 0 0 50px rgba(255,255,255,0.6);
}

.qx41inf_purple { background: #7b1b6e; }
.qx41inf_blue { background: #1e88e5; }
.qx41inf_green { background: #9ccc1a; }
.qx41inf_darkpurple { background: #6a005f; }

/* SVG ICONS PURE WHITE */
.qx41inf_icon_svg {
  width: 48px;
  height: 48px;
  stroke: white;
  fill: none;
  stroke-width: 2;
}

/* CENTER TEXT STYLE (NOT ROTATING) */
#qx41inf_ring_center_text {
  position: absolute;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-family: "Soho Gothic Pro", sans-serif;
  text-align: center;
}

.qx41inf_big_metric {
  font-size: 72px;
  font-weight: 800;
  color: #1f2a30;
  line-height: 1;
}

.qx41inf_metric_label {
  font-size: 28px;
  font-weight: 700;
  margin-top: 8px;
}

.qx41inf_metric_sub {
  font-size: 24px;
  font-weight: 700;
  margin-top: 4px;
}

/* LEFT & RIGHT TEXT BIGGER */
#qx41inf_left_content,
#qx41inf_right_content {
  font-family: "Soho Gothic Pro", sans-serif;
}

#qx41inf_left_content h3,
#qx41inf_right_content h3 {
  font-size: 24px;
  font-weight: 700;
}

#qx41inf_left_content p,
#qx41inf_right_content p {
  font-size: 18px;
  line-height: 1.6;
}

/* BIG COUNTER */
#qx41inf_big_number {
  font-size: 60px;
  font-weight: 800;
  margin: 12px 0 4px 0; /* tighter */
  line-height: 1;
}

#qx41inf_powered {
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 1px;
  margin-top: 0;
}

#qx41inf_powered span {
  display: block;
  font-size: 14px;
  margin-top: 2px;
}





#qx41inf_center_logo_static {
  position: absolute;
  width: 170px;
  height: 170px;
  background: white;
  border-radius: 50%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  box-shadow: 0 20px 40px rgba(0,0,0,0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 5;
}

#qx41inf_center_logo_static img {
  width: 95px;
}


/* =====================================
CIRCULAR ECONOMY SECTION
PREFIX: ceco_
===================================== */

#ceco_section {
  padding: 160px 8%;
  background: radial-gradient(circle at 30% 20%, #112b46, #081520 70%);
  color: white;
  overflow: hidden;
  position: relative;
}

#ceco_wrapper {
  max-width: 1300px;
  margin: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 100px;
  flex-wrap: wrap;
}

/* LEFT CONTENT */

#ceco_left {
  flex: 1;
  min-width: 340px;
}

#ceco_eyebrow {
  text-transform: uppercase;
  letter-spacing: 3px;
  font-size: 12px;
  opacity: .6;
}

#ceco_headline {
  font-size: 52px;
  margin: 20px 0;
  line-height: 1.1;
}

#ceco_gradient {
  background: linear-gradient(90deg,#00e0b8,#3a86ff);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

#ceco_description {
  max-width: 550px;
  opacity: .85;
  line-height: 1.7;
  margin-bottom: 50px;
}

#ceco_impact_stack {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.ceco_impact_item {
  padding-left: 20px;
  border-left: 2px solid rgba(255,255,255,0.2);
  opacity: .7;
  transition: .4s ease;
}

.ceco_impact_item:hover {
  opacity: 1;
  transform: translateX(8px);
}

/* RIGHT SIDE ORBIT */

#ceco_right {
  flex: 1;
  min-width: 400px;
  display: flex;
  justify-content: center;
}

/* ORBIT CONTAINER */

#ceco_orbit_scene {
  position: relative;
  width: 420px;
  height: 420px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ORBIT RING */

#ceco_orbit_ring {
  position: absolute;
  width: 320px;
  height: 320px;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,0.2);
}

/* ORBIT GLOW */

#ceco_orbit_glow {
  position: absolute;
  width: 320px;
  height: 320px;
  border-radius: 50%;
  box-shadow: 0 0 60px rgba(0,224,184,0.35);
}

/* CENTER CORE */

#ceco_orbit_core {
  position: absolute;
  width: 190px;
  height: 190px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-weight: 600;
  font-size: 20px;
  background: rgba(255,255,255,0.06);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255,255,255,0.15);
}

/* ORBIT NODES */

.ceco_orbit_node {
  position: absolute;
  padding: 10px 18px;
  background: rgba(255,255,255,0.08);
  backdrop-filter: blur(14px);
  border-radius: 30px;
  font-size: 14px;
  border: 1px solid rgba(255,255,255,0.2);
  white-space: nowrap;
  transition: .3s ease;
}

.ceco_orbit_node:hover {
  background: rgba(255,255,255,0.15);
  transform: scale(1.05);
}

/* NODE POSITIONS */

#ceco_node_collect {
  top: 35px;
  left: 50%;
  transform: translateX(-50%);
}

#ceco_node_process {
  right: 35px;
  top: 50%;
  transform: translateY(-50%);
}

#ceco_node_manufacture {
  bottom: 35px;
  left: 50%;
  transform: translateX(-50%);
}

#ceco_node_reinvest {
  left: 35px;
  top: 50%;
  transform: translateY(-50%);
}

/* PARTICLE CANVAS */

#ceco_particles {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

/* RESPONSIVE */

@media (max-width:1000px){

#ceco_wrapper{
  flex-direction: column;
  text-align: center;
}

#ceco_right{
  margin-top: 60px;
}

#ceco_description{
  margin-left:auto;
  margin-right:auto;
}

}

@media (max-width:600px){

#ceco_headline{
  font-size: 38px;
}

#ceco_orbit_scene{
  width: 320px;
  height: 320px;
}

#ceco_orbit_ring,
#ceco_orbit_glow{
  width: 260px;
  height: 260px;
}

#ceco_orbit_core{
  width: 150px;
  height: 150px;
  font-size: 16px;
}

}



























/*COMPANY PG */


   
        body {
            font-family: 'Soho Gothic Pro', 'Soho', 'Gotham', 'Montserrat', system-ui, sans-serif;
            background-color: #ffffff;
            color: #1a2e40;
            line-height: 1.5;
            font-weight: 400;
            overflow-x: hidden;
        }

        /* primary premium color: #0881D1 */
        .section-tag {
            color: #0881D1;
            font-weight: 500;
            letter-spacing: 2px;
            font-size: 0.85rem;
            text-transform: uppercase;
            display: inline-block;
            background: rgba(8, 129, 209, 0.1);
            padding: 0.3rem 1.3rem;
            
            border-radius: 40px;
            margin-bottom: 1.2rem;
            backdrop-filter: blur(4px);
            border: 1px solid rgba(8,129,209,0.3);
        }

        h1, h2, h3 {
            font-weight: 600;
            line-height: 1.2;
            letter-spacing: -0.01em;
        }

        h2 {
            font-size: clamp(2rem, 5vw, 2.8rem);
            margin-bottom: 1.5rem;
            color: #0c2535;
        }

        .mission-content h2{
          color: gray !important;
        }

        p {
            color: #2d4a60;
            font-size: 1.1rem;
            font-weight: 400;
            margin-bottom: 1rem;
        }

        /* -------- scroll animations (reveal) -------- */
        .reveal {
            opacity: 0;
            transform: translateY(30px);
            transition: opacity 1s ease, transform 1s ease;
        }
        .reveal.active {
            opacity: 1;
            transform: translateY(0);
        }

        /* -------- HERO with background image (premium overlay) -------- */
        .about-hero {
            position: relative;
            min-height: 100vh;
            display: flex;
        
            align-items: center;
            justify-content: flex-start;
            padding: 5rem 1.5rem;
            background-color: #0f2635;
            background-image: url('https://images.unsplash.com/photo-1532996122724-e3c354a0b15b?q=80&w=2070&auto=format&fit=crop');
            background-size: cover;
            background-position: center 25%;
            isolation: isolate;
        }

        .about-hero::before {
            content: '';
            position: absolute;
            inset: 0;
            background: linear-gradient(115deg, #02131f 0%, rgba(8,129,209,0.7) 75%, rgba(8,129,209,0.3) 100%);
            z-index: 1;
            pointer-events: none;
        }

        .about-hero-content {
            position: relative;
            z-index: 3;
            max-width: 750px;
            
            color: white;
            text-shadow: 0 4px 20px rgba(0,0,0,0.3);
            width: 100%;
            animation: floatIn 1.2s ease-out;
        }

        @keyframes floatIn {
            0% { opacity: 0; transform: translateY(40px); }
            100% { opacity: 1; transform: translateY(0); }
        }

        .about-hero-label {
            font-size: 0.85rem;
            letter-spacing: 4px;
            background: rgba(255,255,255,0.15);
            backdrop-filter: blur(12px);
            display: inline-block;
            padding: 0.5rem 1.5rem;
            border-radius: 60px;
            margin-bottom: 1.8rem;
            border: 1px solid rgba(255,255,255,0.3);
            color: white;
            font-weight: 500;
        }

        .about-hero h1 {
            font-size: clamp(2.8rem, 13vw, 5.2rem);
            font-weight: 700;
            margin-bottom: 1.3rem;
            line-height: 1.1;
            color: white;
        }

        .about-hero-glow {
            background: linear-gradient(145deg, #ffffff, #b2e0ff, #0881D1);
            -webkit-background-clip: text;
            background-clip: text;
            -webkit-text-fill-color: transparent;
            text-shadow: 0 0 30px #0881D1;
        }

        .about-hero p {
            font-size: 1.25rem;
            color: rgba(255,255,255,0.95);
            max-width: 600px;
        }

        /* -------- MISSION (animated floating illustration) -------- */
        .mission-section {
            padding: 5rem 1.5rem;
            background: #f2f8ff;
            position: relative;
            overflow: hidden;
        }
        .mission-section::before {
            content: '';
            position: absolute;
            width: 400px;
            height: 400px;
            background: radial-gradient(circle, rgba(8,129,209,0.1) 0%, transparent 70%);
            top: -100px;
            right: -100px;
            border-radius: 50%;
            z-index: 0;
        }

        .mission-container {
            display: flex;
            flex-direction: column;
            gap: 3rem;
            max-width: 1300px;
            margin: 0 auto;
            position: relative;
            z-index: 2;
        }
        @media (min-width: 900px) {
            .mission-container { flex-direction: row; align-items: center; }
        }

        .mission-content h2 {
            border-left: 8px solid #0881D1;
            padding-left: 1.5rem;
        }

        .illustration-badge {
            display: flex;
            gap: 0.8rem;
            margin: 2rem 0 1rem;
        }
        .icon-bubble {
            background: white;
            border-radius: 50%;
            width: 55px;
            height: 55px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 2rem;
            box-shadow: 0 15px 25px -8px #0881D1;
            border: 2px solid #0881D1;
            animation: bounce 4s infinite;
        }
        .icon-bubble:nth-child(2) { animation-delay: 0.4s; }
        .icon-bubble:nth-child(3) { animation-delay: 0.8s; }
        @keyframes bounce {
            0%,100%{ transform: translateY(0); }
            50%{ transform: translateY(-10px); }
        }

        .circular-visual {
            flex: 1;
            display: flex;
            justify-content: center;
            align-items: center;
            position: relative;
            min-height: 300px;
        }
        .floating-pet {
            position: relative;
            width: 240px;
            height: 240px;
            background: rgba(8,129,209,0.1);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            animation: softPulse 6s infinite alternate;
        }
        @keyframes softPulse {
            0% { box-shadow: 0 0 0 0 rgba(8,129,209,0.3); transform: scale(1); }
            100% { box-shadow: 0 0 0 30px rgba(8,129,209,0); transform: scale(1.02); }
        }
        .floating-pet svg {
            width: 160px;
            height: 160px;
            filter: drop-shadow(0 10px 15px #0881D180);
        }

        /* ---------- COUNTERS (animated on scroll) ---------- */
        .counters-section {
            padding: 5rem 1.5rem;
            background: linear-gradient(125deg, #0881D1, #3fa9f0);
            color: white;
        }
        .counters-grid {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            gap: 3rem;
            max-width: 1100px;
            margin: 0 auto;
        }
        .counter-item {
            text-align: center;
            flex: 1 1 180px;
            transform: scale(1);
            transition: transform 0.3s;
        }
        .counter-item:hover { transform: scale(1.05); }
        .counter-number {
            font-size: clamp(3.5rem, 10vw, 5rem);
            font-weight: 700;
            line-height: 1;
            color: white;
            text-shadow: 0 5px 20px rgba(0,0,0,0.2);
            margin-bottom: 0.3rem;
        }
        .counter-label {
            font-size: 1.2rem;
            font-weight: 400;
            text-transform: uppercase;
            letter-spacing: 2px;
            color: rgba(255,255,255,0.9);
        }



        


























        

        /* ---------- INFOGRAPHICS (illustrated cards with micro-animations) ---------- */
        .infographics-section {
            padding: 5rem 1.5rem;
            background: white;
        }
        .infographics-grid {
            display: grid;
            grid-template-columns: 1fr;
            gap: 2rem;
            max-width: 1300px;
            margin: 0 auto;
        }
        @media (min-width: 600px) { .infographics-grid { grid-template-columns: repeat(2,1fr); } }
        @media (min-width: 1000px) { .infographics-grid { grid-template-columns: repeat(3,1fr); } }

        .infographic-card {
            background: #f6fcff;
            border-radius: 40px;
            padding: 2.2rem 1.8rem;
            box-shadow: 0 30px 40px -18px rgba(8,129,209,0.4);
            border: 1px solid rgba(8,129,209,0.25);
            transition: all 0.3s ease;
            position: relative;
            overflow: hidden;
        }
        .infographic-card::after {
            content: '';
            position: absolute;
            inset: 0;
            background: linear-gradient(145deg, transparent, rgba(8,129,209,0.02));
            pointer-events: none;
        }
        .infographic-card:hover {
            transform: translateY(-12px) scale(1.01);
            box-shadow: 0 40px 55px -15px #0881D1;
            border-color: #0881D1;
        }
        .infographic-icon {
            display: flex;
            gap: 0.3rem;
            margin-bottom: 1.5rem;
        }
        .infographic-icon svg {
            width: 70px;
            height: 70px;
            filter: drop-shadow(0 8px 12px #0881D140);
            transition: transform 0.4s;
        }
        .infographic-card:hover svg { transform: rotate(5deg) scale(1.05); }

        .infographic-stats {
            display: flex;
            gap: 2rem;
            border-top: 2px dashed #0881D1;
            padding-top: 1.5rem;
            margin-top: 1rem;
        }
        .stat-value { font-size: 2rem; font-weight: 700; color: #0881D1; }

        

        /* ---------- CIRCULAR ECONOMY (animated illustration) ---------- */
        .circular-economy-section {
            background: #e5f0fc;
            padding: 5rem 1.5rem;
            position: relative;
            overflow: hidden;
        }



        .circular-content  h2 { color: gray !important;}
        .circular-container {
            display: flex;
            flex-direction: column;
            gap: 3rem;
            max-width: 1300px;
            margin: 0 auto;
            position: relative;
            z-index: 2;
        }
        @media (min-width: 900px) { .circular-container { flex-direction: row; align-items: center; } }

        .spinning-loop {
            width: 280px;
            height: 280px;
            margin: 0 auto;
            position: relative;
            animation: rotate 18s linear infinite;
        }
        .loop-svg {
            width: 100%;
            height: 100%;
        }
        .pulse-dot {
            position: absolute;
            width: 20px;
            height: 20px;
            background: #0881D1;
            border-radius: 50%;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            animation: pulse 2s infinite;
        }
        @keyframes pulse { 0% { opacity: 0.6; transform: translate(-50%, -50%) scale(1); } 100% { opacity: 0; transform: translate(-50%, -50%) scale(2.5); } }

        .circular-highlight {
            background: rgba(8,129,209,0.1);
            padding: 2rem;
            border-radius: 50px;
            border-left: 8px solid #0881D1;
            backdrop-filter: blur(4px);
        }

        /* ---------- VALUES (illustrated) ---------- */
        .values-section {
            padding: 5rem 1.5rem;
            background: white;
        }
        .values-grid {
            display: grid;
            grid-template-columns: 1fr;
            gap: 2.5rem;
            max-width: 1300px;
            margin: 2rem auto 0;
        }
        @media (min-width: 600px) { .values-grid { grid-template-columns: repeat(2,1fr); } }
        @media (min-width: 1000px) { .values-grid { grid-template-columns: repeat(3,1fr); } }

        .value-card {
            background: #ffffff;
            border-radius: 40px;
            padding: 2.5rem 1.8rem;
            box-shadow: 0 25px 40px -18px #0881D1;
            border: 1px solid rgba(8,129,209,0.25);
            text-align: center;
            transition: 0.3s;
            position: relative;
        }
        .value-card:hover { background: #f2faff; transform: scale(1.02) translateY(-8px); }
        .value-icon {
            width: 90px;
            height: 90px;
            background: linear-gradient(135deg, #0881D1, #5fb9ff);
            border-radius: 30% 70% 70% 30% / 30% 55% 45% 70%; /* organic shape */
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto 1.8rem;
            font-size: 2.6rem;
            color: white;
            box-shadow: 0 20px 25px -10px #0881D1;
            animation: morph 8s infinite alternate;
        }
        @keyframes morph {
            0% { border-radius: 30% 70% 70% 30% / 30% 55% 45% 70%; }
            100% { border-radius: 70% 30% 45% 55% / 60% 40% 60% 40%; }
        }

        /* ---------- responsive extras ---------- */
        @media (max-width: 480px) {
            .about-hero p { font-size: 1rem; }
            .counter-label { font-size: 0.9rem; }
        }

        /* simple illustration inner */
        .cls-1 { fill: none; stroke: #0881D1; stroke-width: 3; stroke-dasharray: 5 5; }
        .cls-2 { fill: #0881D1; }





      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      

      
      
        /*SRATEGY PG */

       

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Soho Gothic Pro', 'Soho', 'Gotham', 'Montserrat', system-ui, sans-serif;
            background: #ffffff;
            color: #e5eaef;
            line-height: 1.5;
            overflow-x: hidden;
        }

        /* primary premium color: #0881D1 */
        .section-tag {
            color: #0881D1;
            font-weight: 500;
            letter-spacing: 2px;
            font-size: 0.85rem;
            text-transform: uppercase;
            display: inline-block;
            background: rgba(8, 129, 209, 0.1);
            padding: 0.3rem 1.3rem;
            border-radius: 40px;
            margin-bottom: 1.2rem;
            backdrop-filter: blur(4px);
            border: 1px solid rgba(8,129,209,0.3);
        }

        h1, h2, h3 {
            font-weight: 600;
            line-height: 1.2;
            letter-spacing: -0.01em;
        }

        h2 {
            font-size: clamp(2rem, 5vw, 2.8rem);
            margin-bottom: 1.5rem;
            color: #ffffff !important;
        }

        p {
            color: #2d4a60;
            font-size: 1.1rem;
            margin-bottom: 1rem;
        }

        /* scroll reveal */
        .reveal {
            opacity: 0;
            transform: translateY(30px);
            transition: opacity 0.9s ease, transform 0.9s ease;
        }
        .reveal.active {
            opacity: 1;
            transform: translateY(0);
        }

        /* ----- STRATEGY HERO (INCREASED TOP SPACING FOR NAVBAR) ----- */
        #strategy-hero-section {
            position: relative;
            min-height: 100vh;
            display: flex;
            align-items: center;
            padding: 8rem 1.5rem 4rem 1.5rem; /* Increased top padding from 4rem to 8rem */
            /* PLASTIC BACKGROUND IMAGE */
            background-image: url('https://lamor-servd.transforms.svdcdn.com/production/general/plastics3.jpg?w=1300&q=100&auto=format&fit=crop&dm=1707399681&s=9d7a01b29abb260a411514294624c584');
            background-size: cover;
            background-position: center 30%;
            background-repeat: no-repeat;
            overflow: hidden;
            isolation: isolate;
        }

        /* Sophisticated multi-layer overlay */
        #strategy-hero-section::before {
            content: '';
            position: absolute;
            inset: 0;
            background: linear-gradient(
                115deg,
                rgba(2, 30, 47, 0.97) 0%,
                rgba(8, 129, 209, 0.8) 45%,
                rgba(8, 129, 209, 0.4) 75%,
                rgba(255, 255, 255, 0.1) 100%
            );
            z-index: 1;
            pointer-events: none;
        }

        /* Subtle second overlay for extra dimension */
        #strategy-hero-section::after {
            content: '';
            position: absolute;
            inset: 0;
            background: radial-gradient(circle at 70% 40%, transparent 30%, rgba(0,20,40,0.3) 100%);
            z-index: 1;
            pointer-events: none;
        }

        #strategy-floating-shapes {
            position: absolute;
            inset: 0;
            z-index: 2;
        }
        .strategy-shape {
            position: absolute;
            background: rgba(8,129,209,0.25);
            border-radius: 50%;
            filter: blur(60px);
            animation: floatShape 14s infinite alternate;
        }
        #strategy-shape1 { width: 300px; height: 300px; top: -50px; right: -50px; background: #0881D1; }
        #strategy-shape2 { width: 400px; height: 400px; bottom: -100px; left: -100px; background: #1f9be0; opacity: 0.2; animation-duration: 18s; }
        #strategy-shape3 { width: 200px; height: 200px; top: 40%; left: 30%; background: #60b9ff; opacity: 0.2; animation-duration: 12s; }
        @keyframes floatShape {
            0% { transform: translate(0,0) scale(1); }
            100% { transform: translate(40px, -30px) scale(1.2); }
        }

        #strategy-hero-content {
            position: relative;
            z-index: 10;
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            gap: 3rem;
            max-width: 1300px;
            margin: 0 auto;
            width: 100%;
        }
        #strategy-hero-text {
            flex: 1 1 400px;
            color: white;
            text-shadow: 0 4px 30px rgba(0,0,0,0.6);
        }
        #strategy-hero-label {
            font-size: 0.9rem;
            letter-spacing: 4px;
            background: rgba(255,255,255,0.18);
            backdrop-filter: blur(10px);
            display: inline-block;
            padding: 0.5rem 1.5rem;
            border-radius: 60px;
            margin-bottom: 1.8rem;
            border: 1px solid rgba(255,255,255,0.35);
            color: white;
            font-weight: 500;
            box-shadow: 0 4px 20px rgba(0,0,0,0.2);
        }
        #strategy-hero-text h1 {
            font-size: clamp(2.8rem, 10vw, 5rem);
            font-weight: 700;
            margin-bottom: 1.3rem;
            color: white;
            text-shadow: 0 4px 35px rgba(0,0,0,0.7);
        }
        .strategy-hero-glow {
            background: linear-gradient(145deg, #ffffff, #c0e4ff, #0881D1);
            -webkit-background-clip: text;
            background-clip: text;
            -webkit-text-fill-color: transparent;
            text-shadow: 0 0 50px #0881D1;
        }
        #strategy-hero-text p {
            color: rgba(255,255,255,0.95);
            font-size: 1.2rem;
            max-width: 600px;
            text-shadow: 0 2px 15px rgba(0,0,0,0.5);
        }
        #strategy-hero-visual {
            flex: 1 1 300px;
            display: flex;
            justify-content: center;
        }
        #strategy-hero-illustration {
            background: rgba(255,255,255,0.08);
            backdrop-filter: blur(12px);
            border-radius: 60px;
            padding: 2.5rem;
            border: 1px solid rgba(255,255,255,0.25);
            box-shadow: 0 30px 60px -20px rgba(0,0,0,0.5);
        }
        .strategy-growth-icon {
            position: relative;
            width: 240px;
            height: 240px;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .strategy-chart-base {
            display: flex;
            align-items: flex-end;
            gap: 15px;
            height: 150px;
        }
        .strategy-bar {
            width: 35px;
            background: linear-gradient(to top, #0881D1, #a0d8ff);
            border-radius: 20px 20px 4px 4px;
            animation: barRise 2s ease-out infinite alternate;
            transform-origin: bottom;
            box-shadow: 0 0 20px #0881D1;
        }
        .strategy-bar1 { height: 80px; animation-delay: 0.1s; }
        .strategy-bar2 { height: 120px; animation-delay: 0.2s; }
        .strategy-bar3 { height: 160px; animation-delay: 0.3s; }
        @keyframes barRise {
            0% { transform: scaleY(0.9); opacity: 0.9; }
            100% { transform: scaleY(1.1); opacity: 1; }
        }
        .strategy-arrow-up {
            position: absolute;
            top: 20px;
            right: 20px;
            font-size: 3rem;
            color: #ffffff;
            animation: arrowBounce 1.5s infinite;
            filter: drop-shadow(0 0 15px #0881D1);
        }
        @keyframes arrowBounce {
            0%,100%{ transform: translateY(0); }
            50%{ transform: translateY(-15px); }
        }
        .strategy-dots {
            position: absolute;
            bottom: 20px;
            left: 20px;
            display: flex;
            gap: 10px;
        }
        .strategy-dot {
            width: 12px;
            height: 12px;
            background: white;
            border-radius: 50%;
            opacity: 0.9;
            animation: pulseDot 2s infinite;
            box-shadow: 0 0 15px #0881D1;
        }
        .strategy-dot2 { animation-delay: 0.4s; }
        .strategy-dot3 { animation-delay: 0.8s; }
        @keyframes pulseDot { 0%{ opacity: 0.4; transform: scale(1); } 100%{ opacity: 1; transform: scale(1.3); } }

        /* ----- MISSION (premium quote with infographic feel) ----- */
        #strategy-mission-section {
            padding: 5rem 1.5rem;
            background: linear-gradient(135deg, #f2f8ff 0%, #ffffff 100%);
            position: relative;
            overflow: hidden;
        }
        #strategy-mission-section::before {
            content: '';
            position: absolute;
            width: 600px;
            height: 600px;
            background: radial-gradient(circle, rgba(8,129,209,0.05) 0%, transparent 70%);
            top: -200px;
            right: -200px;
            border-radius: 50%;
        }
        #strategy-mission-container {
            max-width: 1000px;
            margin: 0 auto;
            background: white;
            border-radius: 80px 20px 80px 20px;
            padding: 3.5rem 3rem;
            box-shadow: 0 50px 80px -30px #0881D1;
            border: 2px solid #0881D1;
            transition: transform 0.3s;
            position: relative;
            z-index: 2;
            backdrop-filter: blur(10px);
        }
        #strategy-mission-container:hover { transform: scale(1.02) translateY(-5px); }
        #strategy-mission-quote {
            font-size: 1.6rem;
            line-height: 1.6;
            color: #1a4055;
            font-weight: 400;
            text-align: center;
            position: relative;
            font-weight: 500;
        }
        #strategy-mission-quote::before {
            content: '“';
            font-size: 6rem;
            color: #0881D1;
            opacity: 0.2;
            position: absolute;
            left: -30px;
            top: -40px;
            font-family: serif;
        }
        #strategy-mission-quote::after {
            content: '”';
            font-size: 6rem;
            color: #0881D1;
            opacity: 0.2;
            position: absolute;
            right: -30px;
            bottom: -60px;
            font-family: serif;
        }

        /* ----- INFographic STATS BANNER (NEW PREMIUM SECTION) ----- */
        #strategy-infographic-stats {
            padding: 4rem 1.5rem;
            background: white;
        }
        .infographic-stats-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 2rem;
            max-width: 1300px;
            margin: 0 auto;
        }
        @media (max-width: 900px) { .infographic-stats-grid { grid-template-columns: repeat(2, 1fr); } }
        @media (max-width: 500px) { .infographic-stats-grid { grid-template-columns: 1fr; } }
        .infographic-stat-card {
            background: linear-gradient(145deg, #f9fcff, #ffffff);
            border-radius: 40px;
            padding: 2.5rem 1.5rem;
            text-align: center;
            box-shadow: 0 25px 40px -18px #0881D1;
            border: 1px solid rgba(8,129,209,0.2);
            transition: 0.3s;
            position: relative;
            overflow: hidden;
        }
        .infographic-stat-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 6px;
            background: linear-gradient(90deg, #90028d, #e26eff8b, #90028d);
        }
        .infographic-stat-card:hover { transform: translateY(-10px); box-shadow: 0 40px 60px -20px #0881D1; }
        .infographic-stat-number {
            font-size: 3.8rem;
            font-weight: 700;
            color: #d14808;
            line-height: 1;
            margin-bottom: 0.5rem;
            text-shadow: 0 5px 15px rgba(8,129,209,0.3);
        }
        .infographic-stat-label {
            font-size: 1.1rem;
            text-transform: uppercase;
            letter-spacing: 2px;
            color: #1e4f6e;
            font-weight: 500;
        }
        .infographic-stat-icon {
            font-size: 2.2rem;
            color: #d18108;
            margin-bottom: 1rem;
            opacity: 0.7;
        }
/* =================================================
STRATEGIC OBJECTIVES SECTION
================================================= */

#strategy-objectives-section{
padding:5rem 1.5rem;
background:#f6fbff;
position:relative;
}

#strategy-objectives-header{
text-align:center;
margin-bottom:3rem;
}

#strategy-objectives-header h2{
color:#003a6e !important;
}

/* GRID */

#strategy-objectives-grid{
display:grid;
grid-template-columns:1fr;
gap:2.5rem;
max-width:1300px;
margin:0 auto;
}

@media (min-width:600px){
#strategy-objectives-grid{
grid-template-columns:repeat(2,1fr);
}
}

@media (min-width:1000px){
#strategy-objectives-grid{
grid-template-columns:repeat(4,1fr);
}
}

/* CARDS */

.strategy-objective-card{
background:white;
border-radius:50px;
padding:2.5rem 1.8rem;
box-shadow:0 30px 50px -25px #0881D1;
border:1px solid rgba(8,129,209,0.25);
transition:.4s;
text-align:center;
position:relative;
overflow:hidden;
}

.strategy-objective-card:hover{
transform:translateY(-15px);
box-shadow:0 45px 70px -25px #0881D1;
}

.strategy-objective-card::after{
content:'';
position:absolute;
bottom:0;
left:0;
width:100%;
height:5px;
background:linear-gradient(90deg,transparent,#0881D1,transparent);
transform:translateX(-100%);
transition:transform .6s;
}

.strategy-objective-card:hover::after{
transform:translateX(100%);
}

/* ICON */

.strategy-objective-icon{
width:110px;
height:110px;
background:linear-gradient(145deg,#0881D110,#0881D105);
border-radius:40% 60% 40% 60%;
display:flex;
align-items:center;
justify-content:center;
margin:0 auto 1.8rem;
font-size:3rem;
color:#0881D1;
border:2px dashed #0881D1;
animation:morphShape 8s infinite alternate;
}

@keyframes morphShape{
0%{border-radius:40% 60% 40% 60%;transform:rotate(0deg);}
100%{border-radius:60% 40% 60% 40%;transform:rotate(5deg);}
}

/* TEXT */

.strategy-objective-content h3{
font-size:2rem;
margin-bottom:.8rem;
color:#0c2535 !important;
}

.strategy-objective-content p{
color:#346a88;
font-size:1rem;
line-height:1.6;
}

/* =================================================
CONTINENTAL EXPANSION SECTION
================================================= */

#strategy-growth-section{

padding:130px 20px;

background:
radial-gradient(circle at 25% 30%, rgba(0,180,255,.15), transparent 45%),
radial-gradient(circle at 75% 70%, rgba(255,140,0,.15), transparent 40%),
linear-gradient(140deg,#071b34,#0c2340);

color:#ffffff;

}

/* GRID */

.growth-wrapper{

max-width:1300px;
margin:auto;

display:grid;
grid-template-columns:1fr 1fr;
gap:100px;

align-items:center;

}

/* TEXT */

.strategy-tag{
font-size:12px;
letter-spacing:2px;
color:#3dd5ff;
font-weight:600;
}

.strategy-growth-content h2{
font-size:42px;
margin:10px 0 20px;
font-weight:700;
}

.strategy-growth-content p{
max-width:500px;
opacity:.85;
margin-bottom:30px;
line-height:1.6;
}

/* FEATURE LIST */

.growth-features{
list-style:none;
padding:0;
margin:0;
}

.growth-features li{
display:flex;
align-items:center;
gap:10px;
margin-bottom:12px;
}

/* =================================================
GLOBE VISUAL PANEL
================================================= */

.globe-panel{

width:360px;
height:360px;

border-radius:28px;

background:rgba(255,255,255,0.06);
backdrop-filter:blur(18px);

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

box-shadow:
0 35px 70px rgba(0,0,0,.55),
inset 0 0 40px rgba(255,255,255,.05);

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

}

.globe-container{
position:relative;
width:320px;
height:320px;
}

/* GLOBE */

.globe{

width:240px;
height:240px;

border-radius:50%;

background:
radial-gradient(circle at 35% 35%,#27d1ff,#003a6e);

box-shadow:
0 0 80px rgba(0,180,255,.6),
inset -25px -25px 60px rgba(0,0,0,.65);

position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);

animation:globeRotate 28s linear infinite;

}

/* AFRICA HIGHLIGHT */
.globe-africa{

position:absolute;

width:40%;
height:55%;

background:#ffffff;

clip-path:polygon(
45% 0%,65% 10%,75% 30%,70% 45%,
85% 65%,65% 100%,40% 90%,30% 65%,
20% 40%,30% 15%
);

top:20%;
left:30%;

filter:drop-shadow(0 0 15px #00ffd5);

}


/* CONNECTION LINES */

.africa-connections{

position:absolute;
width:320px;
height:320px;

top:0;
left:0;

}

.link{

stroke:#00eaff;
stroke-width:2;

stroke-dasharray:6;
stroke-dashoffset:100;

opacity:.7;

animation:lineMove 3s linear infinite;

}

@keyframes lineMove{
to{stroke-dashoffset:0;}
}

/* NODES */

.node{

position:absolute;

width:12px;
height:12px;

background:#00eaff;
border-radius:50%;

box-shadow:0 0 20px #00eaff;

animation:pulseNode 2s infinite;

}

.n1{top:90px;left:230px;}
.n2{top:110px;left:110px;}
.n3{bottom:70px;left:190px;}
.n4{top:180px;right:40px;}

@keyframes pulseNode{

0%{transform:scale(.8);opacity:.7;}
50%{transform:scale(1.4);opacity:1;}
100%{transform:scale(.8);opacity:.7;}

}

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

@media (max-width:900px){

@media (max-width:900px){

.growth-wrapper{
grid-template-columns:1fr;
gap:60px;
}

.strategy-growth-content{
text-align:left;
}

.strategy-growth-content p{
margin:0;
}

}
.globe-panel{
width:280px;
height:280px;
margin:auto;
}

.globe-container{
width:240px;
height:240px;
}

.globe{
width:180px;
height:180px;
}

}

/* SMALL PHONES */

@media (max-width:500px){

.strategy-objective-icon{
width:85px;
height:85px;
font-size:2.2rem;
}

.strategy-objective-content h3{
font-size:1.6rem;
}

}

        
        /* ----- CLIENTS SECTION (premium infographic cards) ----- */
        #strategy-clients-section {
            padding: 5rem 1.5rem;
            background: linear-gradient(135deg, #f0f8ff, #ffffff);
        }
        #strategy-clients-header h2 { color: #003a6e !important;}
        #strategy-clients-header { text-align: center; margin-bottom: 3rem; }
        #strategy-clients-grid {
            display: grid;
            grid-template-columns: 1fr;
            gap: 2.5rem;
            max-width: 1200px;
            margin: 0 auto;
        }
        
        @media (min-width: 600px) { #strategy-clients-grid { grid-template-columns: repeat(2,1fr); } }
        @media (min-width: 1000px) { #strategy-clients-grid { grid-template-columns: repeat(3,1fr); } }
        .strategy-client-card {
            background: white;
            border-radius: 50px;
            padding: 3rem 2rem;
            text-align: center;
            box-shadow: 0 40px 60px -25px #0881D1;
            border: 1px solid rgba(8,129,209,0.2);
            transition: 0.4s;
            position: relative;
            overflow: hidden;
        }
        .strategy-client-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 8px;
            background: linear-gradient(90deg, #0881D1, #6ec3ff, #0881D1);
        }
        .strategy-client-card:hover { 
            transform: translateY(-15px) scale(1.02);
            box-shadow: 0 50px 80px -25px #0881D1;
            border-color: #0881D1;
        }
        .strategy-client-icon {
            width: 120px;
            height: 120px;
            background: linear-gradient(145deg, #0881D110, #0881D105);
            border-radius: 50% 30% 50% 30%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto 2rem;
            font-size: 3.5rem;
            color: #0881D1;
            animation: clientMorph 10s infinite alternate;
            border: 2px dotted #0881D1;
        }
        @keyframes clientMorph {
            0% { border-radius: 50% 30% 50% 30%; transform: rotate(0deg); }
            50% { border-radius: 30% 50% 30% 50%; transform: rotate(5deg); }
            100% { border-radius: 40% 60% 40% 60%; transform: rotate(-5deg); }
        }
        .strategy-client-card h3 { font-size: 2.1rem; margin-bottom: 1rem; color: #0c2535; }
        .strategy-client-card p { color: #346a88; font-size: 1.1rem; }

        /* responsive */
        @media (max-width: 480px) {
            #strategy-hero-section { padding: 7rem 1rem 3rem 1rem; }
            #strategy-hero-text h1 { font-size: 2.5rem; }
            #strategy-mission-quote { font-size: 1.2rem; }
            .infographic-stat-number { font-size: 2.8rem; }
        }




        /*PET FLAKES  PG*/
 * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Soho Gothic Pro', 'Soho', 'Gotham', 'Montserrat', system-ui, sans-serif;
            background: #ffffff;
            color: #1a2e40;
            line-height: 1.5;
            overflow-x: hidden;
        }

        /* primary premium color: #0881D1 */
        .section-tag {
            color: #0881D1;
            font-weight: 500;
            letter-spacing: 2px;
            font-size: 0.85rem;
            text-transform: uppercase;
            display: inline-block;
            background: rgba(8, 129, 209, 0.1);
            padding: 0.3rem 1.3rem;
            border-radius: 40px;
            margin-bottom: 1.2rem;
            backdrop-filter: blur(4px);
            border: 1px solid rgba(8,129,209,0.3);
        }

        h1, h2, h3 {
            font-weight: 600;
            line-height: 1.2;
            letter-spacing: -0.01em;
        }

        h2 {
            font-size: clamp(2rem, 5vw, 2.8rem);
            margin-bottom: 1.5rem;
            color: #0c2535;
        }

        p {
            color: #2d4a60;
            font-size: 1.1rem;
            margin-bottom: 1rem;
        }

        /* scroll reveal */
        .reveal {
            opacity: 0;
            transform: translateY(30px);
            transition: opacity 0.9s ease, transform 0.9s ease;
        }
        .reveal.active {
            opacity: 1;
            transform: translateY(0);
        }

        /* ----- FLAKES HERO (with image placeholder & increased top spacing) ----- */
        .flakes-hero {
            position: relative;
            min-height: 100vh;
            display: flex;
            align-items: center;
            padding: 8rem 1.5rem 4rem 1.5rem; /* Top spacing 8rem for navbar */
            /* IMAGE PLACEHOLDER - REPLACE WITH YOUR ACTUAL IMAGE URL */
            background-image: url('../assets/img/flk.jpg'); /* Temporary demo image - replace this line */
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
            overflow: hidden;
            isolation: isolate;
        }

        /* Premium overlay matching previous pages */
        .flakes-hero::before {
            content: '';
            position: absolute;
            inset: 0;
            background: linear-gradient(115deg, rgba(2,30,47,0.97) 0%, rgba(8,129,209,0.8) 45%, rgba(8,129,209,0.4) 75%, rgba(255,255,255,0.1) 100%);
            z-index: 1;
            pointer-events: none;
        }

        .flakes-hero::after {
            content: '';
            position: absolute;
            inset: 0;
            background: radial-gradient(circle at 70% 40%, transparent 30%, rgba(0,20,40,0.3) 100%);
            z-index: 1;
            pointer-events: none;
        }

        .floating-shapes {
            position: absolute;
            inset: 0;
            z-index: 2;
        }
        .shape {
            position: absolute;
            background: rgba(8,129,209,0.25);
            border-radius: 50%;
            filter: blur(60px);
            animation: floatShape 14s infinite alternate;
        }
        .shape1 { width: 300px; height: 300px; top: -50px; right: -50px; background: #0881D1; }
        .shape2 { width: 400px; height: 400px; bottom: -100px; left: -100px; background: #1f9be0; opacity: 0.2; animation-duration: 18s; }
        .shape3 { width: 200px; height: 200px; top: 40%; left: 30%; background: #60b9ff; opacity: 0.2; animation-duration: 12s; }
        @keyframes floatShape {
            0% { transform: translate(0,0) scale(1); }
            100% { transform: translate(40px, -30px) scale(1.2); }
        }

        .flakes-hero-content {
            position: relative;
            z-index: 10;
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            gap: 3rem;
            max-width: 1300px;
            margin: 0 auto;
            width: 100%;
        }

        .hero-text {
            flex: 1 1 400px;
            color: white;
            text-shadow: 0 4px 30px rgba(0,0,0,0.6);
        }

        .hero-label {
            font-size: 0.9rem;
            letter-spacing: 4px;
            background: rgba(255,255,255,0.18);
            backdrop-filter: blur(10px);
            display: inline-block;
            padding: 0.5rem 1.5rem;
            border-radius: 60px;
            margin-bottom: 1.8rem;
            border: 1px solid rgba(255,255,255,0.35);
            color: white;
            font-weight: 500;
            box-shadow: 0 4px 20px rgba(0,0,0,0.2);
        }

        .hero-text h1 {
            font-size: clamp(3rem, 12vw, 5.5rem);
            font-weight: 700;
            margin-bottom: 1.3rem;
            color: white;
            text-shadow: 0 4px 35px rgba(0,0,0,0.7);
        }

        .hero-glow {
            background: linear-gradient(145deg, #ffffff, #c0e4ff, #0881D1);
            -webkit-background-clip: text;
            background-clip: text;
            -webkit-text-fill-color: transparent;
            text-shadow: 0 0 50px #0881D1;
        }

        .hero-text p {
            color: rgba(255,255,255,0.95);
            font-size: 1.2rem;
            max-width: 600px;
            text-shadow: 0 2px 15px rgba(0,0,0,0.5);
        }

        .hero-visual {
            flex: 1 1 300px;
            display: flex;
            justify-content: center;
        }

        .flakes-image-container {
            background: rgba(255,255,255,0.08);
            backdrop-filter: blur(12px);
            border-radius: 60px;
            padding: 2rem;
            border: 1px solid rgba(255,255,255,0.25);
            box-shadow: 0 30px 60px -20px rgba(0,0,0,0.5);
            width: 100%;
            max-width: 400px;
        }

        /* Custom PET Flakes Animated Icon */
        #pet-flakes-icon {
            width: 100%;
            aspect-ratio: 1/1;
            position: relative;
        }

        .pet-flakes-container {
            position: relative;
            width: 100%;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .flake-group {
            position: relative;
            width: 120px;
            height: 120px;
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 5;
        }

        .central-flake {
            width: 100px;
            height: 100px;
            background: linear-gradient(145deg, #ffffff, #e0f0ff);
            border-radius: 30% 70% 40% 60%;
            animation: morphFlake 6s infinite alternate;
            box-shadow: 0 0 30px rgba(255,255,255,0.5);
            border: 2px solid #0881D1;
        }

        .pet-label {
            position: absolute;
            font-size: 1.8rem;
            font-weight: 700;
            color: #0881D1;
            text-shadow: 0 0 20px rgba(8,129,209,0.5);
            letter-spacing: 2px;
        }

        .floating-flake {
            position: absolute;
            background: rgba(255,255,255,0.6);
            backdrop-filter: blur(4px);
            border-radius: 30% 70% 40% 60%;
            border: 1px solid rgba(255,255,255,0.8);
            animation: floatFlake 8s infinite alternate;
        }

        .flake1 { width: 30px; height: 30px; top: 10%; left: 10%; animation-duration: 4s; }
        .flake2 { width: 25px; height: 25px; top: 70%; left: 15%; animation-duration: 5s; animation-delay: 0.5s; }
        .flake3 { width: 35px; height: 35px; top: 20%; right: 15%; animation-duration: 4.5s; animation-delay: 1s; }
        .flake4 { width: 20px; height: 20px; bottom: 15%; right: 20%; animation-duration: 5.5s; animation-delay: 1.5s; }
        .flake5 { width: 28px; height: 28px; top: 50%; left: 5%; animation-duration: 4.2s; animation-delay: 0.2s; }
        .flake6 { width: 22px; height: 22px; bottom: 30%; left: 25%; animation-duration: 4.8s; animation-delay: 0.8s; }
        .flake7 { width: 32px; height: 32px; top: 15%; right: 5%; animation-duration: 5.2s; animation-delay: 1.2s; }
        .flake8 { width: 18px; height: 18px; bottom: 5%; left: 40%; animation-duration: 4.3s; animation-delay: 0.3s; }

        @keyframes floatFlake {
            0% { transform: translate(0,0) rotate(0deg) scale(1); opacity: 0.3; }
            100% { transform: translate(20px, -20px) rotate(180deg) scale(1.2); opacity: 0.8; }
        }

        @keyframes morphFlake {
            0% { border-radius: 30% 70% 40% 60%; transform: rotate(0deg); }
            100% { border-radius: 60% 40% 60% 40%; transform: rotate(10deg); }
        }

        .sparkle {
            position: absolute;
            width: 6px;
            height: 6px;
            background: white;
            border-radius: 50%;
            filter: blur(2px);
            animation: sparkle 2s infinite;
        }
        .sparkle1 { top: 30%; left: 30%; animation-delay: 0s; }
        .sparkle2 { top: 60%; right: 30%; animation-delay: 0.5s; }
        .sparkle3 { bottom: 30%; left: 40%; animation-delay: 1s; }
        .sparkle4 { bottom: 40%; right: 20%; animation-delay: 1.5s; }
        @keyframes sparkle { 0%{ opacity: 0; transform: scale(0); } 50%{ opacity: 1; transform: scale(1.5); } 100%{ opacity: 0; transform: scale(0); } }

        .particle {
            position: absolute;
            width: 4px;
            height: 4px;
            background: #0881D1;
            border-radius: 50%;
            animation: particle 3s infinite;
        }
        .particle1 { top: 20%; left: 60%; animation-delay: 0.2s; }
        .particle2 { top: 70%; left: 70%; animation-delay: 0.7s; }
        .particle3 { top: 40%; left: 20%; animation-delay: 1.2s; }
        .particle4 { top: 80%; left: 30%; animation-delay: 1.7s; }
        .particle5 { top: 50%; left: 80%; animation-delay: 2.2s; }
        @keyframes particle { 0%{ transform: translate(0,0); opacity: 0; } 50%{ transform: translate(20px, -20px); opacity: 1; } 100%{ transform: translate(40px, -40px); opacity: 0; } }

        /* ----- PURITY QUOTE (premium) ----- */
        .purity-section {
            padding: 4rem 1.5rem;
            background: linear-gradient(135deg, #e8f1fa, #ffffff);
        }
        .purity-container {
            max-width: 1000px;
            margin: 0 auto;
            background: rgba(255,255,255,0.9);
            backdrop-filter: blur(10px);
            border-radius: 80px 20px 80px 20px;
            padding: 3rem 2.5rem;
            box-shadow: 0 50px 80px -30px #0881D1;
            border: 2px solid #0881D1;
        }
        .purity-quote {
            font-size: 1.8rem;
            line-height: 1.5;
            color: #1a4055;
            font-weight: 500;
            text-align: center;
            position: relative;
        }
        .purity-quote::before, .purity-quote::after {
            content: '"';
            font-size: 4rem;
            color: #0881D1;
            opacity: 0.2;
            position: absolute;
        }
        .purity-quote::before { left: -20px; top: -20px; }
        .purity-quote::after { right: -20px; bottom: -40px; }

        /* ----- SPECIFICATIONS (infographic cards) ----- */
        .specs-section {
            padding: 4rem 1.5rem;
            background: linear-gradient(145deg, #f0f9ff, #e3f0fa);
        }
        .specs-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 2rem;
            max-width: 1000px;
            margin: 0 auto;
        }
        @media (max-width: 700px) { .specs-grid { grid-template-columns: repeat(2, 1fr); } }
        @media (max-width: 450px) { .specs-grid { grid-template-columns: 1fr; } }
        .spec-card {
            background: rgba(255,255,255,0.8);
            backdrop-filter: blur(8px);
            border-radius: 40px;
            padding: 2.5rem 1.5rem;
            text-align: center;
            box-shadow: 0 25px 40px -18px #0881D1;
            border: 1px solid rgba(8,129,209,0.25);
            transition: 0.3s;
        }
        .spec-card:hover { transform: translateY(-10px); box-shadow: 0 40px 60px -20px #0881D1; }
        .spec-icon {
            font-size: 2.5rem;
            color: #0881D1;
            margin-bottom: 1.2rem;
        }
        .spec-value {
            font-size: 2.2rem;
            font-weight: 700;
            color: #0c2535;
            margin-bottom: 0.3rem;
        }
        .spec-label {
            font-size: 1rem;
            text-transform: uppercase;
            letter-spacing: 1px;
            color: #1e4f6e;
        }

        /* ----- KEY FEATURES (from product overview) ----- */
        .features-section {
            padding: 4rem 1.5rem;
            background: white;
        }
        .features-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 2rem;
            max-width: 1300px;
            margin: 2rem auto 0;
        }
        @media (max-width: 900px) { .features-grid { grid-template-columns: repeat(2, 1fr); } }
        @media (max-width: 500px) { .features-grid { grid-template-columns: 1fr; } }
        .feature-card {
            background: #f9fdff;
            border-radius: 40px;
            padding: 2rem 1.5rem;
            text-align: center;
            box-shadow: 0 20px 30px -15px #0881D1;
            border: 1px solid rgba(8,129,209,0.2);
            transition: 0.3s;
        }
        .feature-card:hover { transform: translateY(-8px); background: white; }
        .feature-icon {
            font-size: 2.2rem;
            color: #0881D1;
            margin-bottom: 1rem;
        }
        .feature-number {
            font-size: 2.5rem;
            font-weight: 700;
            color: #0881D1;
            line-height: 1;
            margin-bottom: 0.3rem;
        }
        .feature-label {
            font-size: 1rem;
            text-transform: uppercase;
            letter-spacing: 1px;
            color: #1e4f6e;
        }

        /* ----- PROCESS SECTION (animated steps) ----- */
        .process-section {
            padding: 5rem 1.5rem;
            background: linear-gradient(145deg, #021e2f, #0f3850);
            color: white;
        }
        .process-section .section-header h2 { color: white; }
        .process-steps {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            gap: 1rem;
            max-width: 1200px;
            margin: 3rem auto 0;
        }
        .process-step {
            flex: 1 1 140px;
            text-align: center;
            position: relative;
        }
        .step-icon {
            width: 80px;
            height: 80px;
            background: rgba(8,129,209,0.2);
            border: 2px solid #0881D1;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto 1rem;
            font-size: 2rem;
            color: #0881D1;
            animation: stepPulse 2s infinite;
        }
        @keyframes stepPulse { 0%{ box-shadow: 0 0 0 0 #0881D1; } 50%{ box-shadow: 0 0 20px 5px #0881D1; } }
        .step-label {
            font-size: 1rem;
            font-weight: 500;
            color: white;
        }
        .step-arrow {
            position: absolute;
            right: -15px;
            top: 30px;
            font-size: 1.5rem;
            color: #0881D1;
        }
        @media (max-width: 700px) { .step-arrow { display: none; } }

        /* ----- APPLICATIONS SECTION (cards with images) ----- */
        .applications-section {
            padding: 5rem 1.5rem;
            background: white;
        }
        .applications-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 2rem;
            max-width: 1300px;
            margin: 2rem auto 0;
        }
        @media (max-width: 1000px) { .applications-grid { grid-template-columns: repeat(2, 1fr); } }
        @media (max-width: 600px) { .applications-grid { grid-template-columns: 1fr; } }
        .application-card {
            background: white;
            border-radius: 40px;
            overflow: hidden;
            box-shadow: 0 30px 40px -20px #0881D1;
            border: 1px solid rgba(8,129,209,0.2);
            transition: 0.4s;
        }
        .application-card:hover { transform: translateY(-15px); box-shadow: 0 40px 60px -20px #0881D1; }
        .application-image {
            height: 200px;
            overflow: hidden;
        }
        .application-image img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.6s;
        }
        .application-card:hover .application-image img { transform: scale(1.1); }
        .application-content {
            padding: 1.8rem 1.5rem;
            position: relative;
        }
        .application-content h3 {
            font-size: 1.5rem;
            margin-bottom: 0.8rem;
            color: #0c2535;
        }
        .application-content p {
            font-size: 0.95rem;
            color: #346a88;
            margin-bottom: 1rem;
        }
        .application-icon {
            font-size: 2rem;
            color: #0881D1;
            opacity: 0.5;
            text-align: right;
        }

        /* ----- USES GRID (versatile applications) ----- */
        .uses-section {
            padding: 5rem 1.5rem 8rem 1.5rem;
            background: linear-gradient(145deg, #f0f8ff, #e6f0fa);
        }
        .uses-grid {
            display: grid;
            grid-template-columns: repeat(8, 1fr);
            gap: 1.5rem;
            max-width: 1300px;
            margin: 2rem auto 0;
        }
        @media (max-width: 1000px) { .uses-grid { grid-template-columns: repeat(4, 1fr); } }
        @media (max-width: 500px) { .uses-grid { grid-template-columns: repeat(2, 1fr); } }
        .use-item {
            background: rgba(255,255,255,0.8);
            backdrop-filter: blur(8px);
            border-radius: 30px;
            padding: 1.5rem 1rem;
            text-align: center;
            border: 1px solid rgba(8,129,209,0.2);
            transition: 0.3s;
        }
        .use-item:hover {
            transform: translateY(-8px);
            background: white;
            border-color: #0881D1;
            box-shadow: 0 20px 30px -15px #0881D1;
        }
        .use-icon {
            font-size: 2rem;
            color: #0881D1;
            margin-bottom: 0.8rem;
        }
        .use-item span {
            font-size: 0.9rem;
            font-weight: 500;
            color: #1e4f6e;
        }

        /* ----- BENEFITS SECTION (from text content) ----- */
        .benefits-section {
            padding: 5rem 1.5rem;
            background: white;
        }
        .benefits-container {
            display: flex;
            flex-wrap: wrap;
            gap: 3rem;
            max-width: 1300px;
            margin: 2rem auto 0;
        }
        .benefits-content {
            flex: 1 1 400px;
        }
        .benefits-highlight {
            background: #f0f9ff;
            border-radius: 40px;
            padding: 2rem;
            border-left: 8px solid #0881D1;
        }
        .benefits-highlight p {
            font-size: 1.2rem;
            font-weight: 500;
            color: #0c2535;
        }
        .benefits-grid {
            flex: 1 1 400px;
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 1.5rem;
        }
        .benefit-card {
            background: #f9fdff;
            border-radius: 30px;
            padding: 2rem 1.5rem;
            border: 1px solid rgba(8,129,209,0.2);
        }
        .benefit-number {
            font-size: 2.5rem;
            font-weight: 700;
            color: #0881D1;
            margin-bottom: 0.5rem;
        }
        .benefit-label {
            font-size: 1.1rem;
            font-weight: 500;
            color: #0c2535;
            margin-bottom: 0.5rem;
        }
        .benefit-desc {
            font-size: 0.9rem;
            color: #346a88;
        }



        /*additional css */
/* ============================
   PET FLAKES PREMIUM (PFP)
============================= */


.pfp-container{
  width:90%;
  max-width:1200px;
  margin:auto;
  padding:80px 0;
}

/* HERO */
#pfp-hero-section{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:50px;
}

#pfp-hero-text{
  flex:1 1 500px;
}

#pfp-hero-text h1{
  font-size:48px;
  font-weight:700;
  margin-bottom:20px;
}

.pfp-highlight{
  color:#ff7a00;
}

#pfp-hero-text p{
  font-size:18px;
  line-height:1.7;
  opacity:0.85;
}

#pfp-hero-image-wrapper{
  flex:1 1 450px;
}

#pfp-hero-image{
  width:100%;
  border-radius:20px;
  box-shadow:0 30px 60px rgba(0,0,0,0.15);
  animation:pfp-float 6s ease-in-out infinite;
}

@keyframes pfp-float{
  0%,100%{transform:translateY(0);}
  50%{transform:translateY(-15px);}
}

/* GRID */
.pfp-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:50px;
  align-items:center;
}

/* FEATURE PANEL */
#pfp-features-panel{
  background:rgba(255,122,0,0.07);
  border:2px solid rgba(255,122,0,0.3);
  border-radius:20px;
  padding:40px;
  backdrop-filter:blur(12px);
  box-shadow:0 20px 40px rgba(0,0,0,0.08);
}

#pfp-features-panel h2{
  color:#ff7a00 !important;
  margin-bottom:30px;
}

.pfp-feature-item{
  display:flex;
  gap:20px;
  margin-bottom:25px;
  transition:0.4s ease;
}

.pfp-feature-item:hover{
  transform:translateX(8px);
}

.pfp-feature-icon{
  width:50px;
  height:50px;
  background:#ff7a00;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#fff;
  font-weight:600;
  box-shadow:0 10px 20px rgba(255,122,0,0.4);
}

/* APPLICATIONS */
#pfp-applications-box{
  background:#f8fafc;
  border-radius:20px;
  padding:40px;
  box-shadow:0 20px 40px rgba(0,0,0,0.05);
}

#pfp-applications-box h2{
  color:#ff7a00 !important;
  margin-bottom:20px;
}

#pfp-applications-box p{
  line-height:1.7;
  opacity:0.85;
}

/* FOOTER */
#pfp-footer{
  text-align:center;
  padding:40px 0;
  background:#0f172a;
  color:#fff;
  margin-bottom: 0 !important;
    padding-bottom: 0 !important;
  font-size:14px;
}


/* RESPONSIVE */
@media(max-width:900px){
  .pfp-grid{
    grid-template-columns:1fr;
  }

  #pfp-hero-section{
    flex-direction:column;
  }

  #pfp-hero-text h1{
    font-size:34px;
  }
}












/*BALES PG */


body{
    background:#f5f7f6;
    color:#2d2d2d;
}

.wrapper{
    max-width:1200px;
    margin:auto;
    padding:50px 20px;
}

/* TOP SECTION */
.top-section{
    display:grid;
    grid-template-columns:1.1fr 1fr;
    gap:50px;
    align-items:start;
}

.product-header{
    display:flex;
    align-items:center;
    gap:15px;
    margin-bottom:20px;
}

.product-icon{
    width:55px;
    height:55px;
    border:3px solid #16a34a;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    color:#16a34a;
    font-size:26px;
    font-weight:600;
}

.product-header h1{
    color:#16a34a;
    font-size:32px;
    font-weight:700;
}

.section-title{
    font-size:20px;
    font-weight:600;
    margin:25px 0 15px;
}

.description p{
    line-height:1.8;
    margin-bottom:15px;
    color:#555;
}

/* SPEC BOX */
.spec-box{
    background:#eaf6ee;
    border:3px solid #16a34a;
    border-radius:20px;
    padding:35px;
}


.spec-box h2{
    color: gray !important;
}

.applications h2 {
  color: gray !important;
}


.integrity-header h2 {
  color: gray !important;
}

.section-header h2 {
  color: gray !important;
}

/*additional bale pg */

 * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Soho Gothic Pro', 'Soho', 'Gotham', 'Montserrat', system-ui, sans-serif;
            background: #ffffff;
            color: #1a2e40;
            line-height: 1.5;
            overflow-x: hidden;
        }

        /* primary premium color: #0881D1 with orange blend #F97316 */
        .section-tag {
            color: #F97316; /* Orange */
            font-weight: 500;
            letter-spacing: 2px;
            font-size: 0.85rem;
            text-transform: uppercase;
            display: inline-block;
            background: rgba(249, 115, 22, 0.1); /* Orange with opacity */
            padding: 0.3rem 1.3rem;
            border-radius: 40px;
            margin-bottom: 1.2rem;
            backdrop-filter: blur(4px);
            border: 1px solid rgba(249, 115, 22, 0.3);
        }

        h1, h2, h3 {
            font-weight: 600;
            line-height: 1.2;
            letter-spacing: -0.01em;
        }




        h2 {
            font-size: clamp(2rem, 5vw, 2.8rem);
            margin-bottom: 1.5rem;
            color: #0c2535;
        }

        p {
            color: #2d4a60;
            font-size: 1.1rem;
            margin-bottom: 1rem;
        }

        /* scroll reveal */
        .reveal {
            opacity: 0;
            transform: translateY(30px);
            transition: opacity 0.9s ease, transform 0.9s ease;
        }
        .reveal.active {
            opacity: 1;
            transform: translateY(0);
        }

        /* ----- PET BALES HERO (with orange blend) ----- */
        .bales-hero {
            position: relative;
            min-height: 100vh;
            display: flex;
            align-items: center;
            padding: 8rem 1.5rem 4rem 1.5rem;
            background-image: url('../assets/img/by.jpg');
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
            overflow: hidden;
            isolation: isolate;
        }

        /* Premium overlay with orange blend */
        .bales-hero::before {
            content: '';
            position: absolute;
            inset: 0;
            background: linear-gradient(115deg, 
                rgba(2,30,47,0.97) 0%, 
                rgba(249, 115, 22, 0.8) 45%, /* Orange */
                rgba(8,129,209,0.4) 75%, 
                rgba(255,255,255,0.1) 100%);
            z-index: 1;
            pointer-events: none;
        }

        .bales-hero::after {
            content: '';
            position: absolute;
            inset: 0;
            background: radial-gradient(circle at 70% 40%, transparent 30%, rgba(249,115,22,0.2) 100%);
            z-index: 1;
            pointer-events: none;
        }

        .floating-shapes {
            position: absolute;
            inset: 0;
            z-index: 2;
        }
        .shape {
            position: absolute;
            background: rgba(249, 115, 22, 0.25); /* Orange shapes */
            border-radius: 50%;
            filter: blur(60px);
            animation: floatShape 14s infinite alternate;
        }
        .shape1 { width: 300px; height: 300px; top: -50px; right: -50px; background: #F97316; }
        .shape2 { width: 400px; height: 400px; bottom: -100px; left: -100px; background: #fdba74; opacity: 0.2; animation-duration: 18s; }
        .shape3 { width: 200px; height: 200px; top: 40%; left: 30%; background: #F97316; opacity: 0.2; animation-duration: 12s; }
        @keyframes floatShape {
            0% { transform: translate(0,0) scale(1); }
            100% { transform: translate(40px, -30px) scale(1.2); }
        }

        .bales-hero-content {
            position: relative;
            z-index: 10;
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            gap: 3rem;
            max-width: 1300px;
            margin: 0 auto;
            width: 100%;
        }

        .hero-text {
            flex: 1 1 400px;
            color: white;
            text-shadow: 0 4px 30px rgba(0,0,0,0.6);
        }

        .hero-label {
            font-size: 0.9rem;
            letter-spacing: 4px;
            background: rgba(255,255,255,0.18);
            backdrop-filter: blur(10px);
            display: inline-block;
            padding: 0.5rem 1.5rem;
            border-radius: 60px;
            margin-bottom: 1.8rem;
            border: 1px solid rgba(255,255,255,0.35);
            color: white;
            font-weight: 500;
            box-shadow: 0 4px 20px rgba(0,0,0,0.2);
        }

        .hero-text h1 {
            font-size: clamp(3rem, 12vw, 5.5rem);
            font-weight: 700;
            margin-bottom: 1.3rem;
            color: white;
            text-shadow: 0 4px 35px rgba(0,0,0,0.7);
        }

        .hero-glow {
            background: linear-gradient(145deg, #ffffff, #fed7aa, #F97316); /* Orange gradient */
            -webkit-background-clip: text;
            background-clip: text;
            -webkit-text-fill-color: transparent;
            text-shadow: 0 0 50px #F97316;
        }

        .hero-text p {
            color: rgba(255,255,255,0.95);
            font-size: 1.2rem;
            max-width: 600px;
            text-shadow: 0 2px 15px rgba(0,0,0,0.5);
        }

        .hero-visual {
            flex: 1 1 300px;
            display: flex;
            justify-content: center;
        }

        .bales-image-container {
            background: rgba(255,255,255,0.08);
            backdrop-filter: blur(12px);
            border-radius: 60px;
            padding: 2rem;
            border: 1px solid rgba(255,255,255,0.25);
            box-shadow: 0 30px 60px -20px rgba(0,0,0,0.5);
            width: 100%;
            max-width: 400px;
        }

        /* Custom Animated PET Bales Icon with orange */
        #pet-bales-icon {
            width: 100%;
            aspect-ratio: 1/1;
            position: relative;
        }

        .bales-container {
            position: relative;
            width: 100%;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .bale-stack {
            position: relative;
            width: 180px;
            height: 180px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: flex-end;
            gap: 5px;
            z-index: 5;
        }

        .bale {
            position: relative;
            width: 140px;
            height: 45px;
            background: linear-gradient(145deg, #ffffff, #fff7ed); /* Light orange tint */
            border-radius: 12px;
            border: 2px solid #F97316; /* Orange border */
            box-shadow: 0 5px 15px rgba(249,115,22,0.3);
            animation: baleFloat 4s infinite alternate;
            transform-origin: center;
        }

        .bale-bottom { animation-delay: 0s; }
        .bale-middle { animation-delay: 0.2s; width: 150px; }
        .bale-top { animation-delay: 0.4s; width: 130px; }

        @keyframes baleFloat {
            0% { transform: translateY(0) scale(1); }
            100% { transform: translateY(-5px) scale(1.02); }
        }

        .bale-strap {
            position: absolute;
            background: #F97316; /* Orange straps */
            opacity: 0.6;
        }

        .strap-vertical {
            width: 4px;
            height: 40px;
            top: 2px;
            left: 20px;
        }

        .strap-vertical2 {
            width: 4px;
            height: 40px;
            top: 2px;
            right: 20px;
        }

        .strap-horizontal {
            height: 4px;
            width: 100%;
            top: 20px;
            left: 0;
        }

        .bale-label {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            font-size: 0.8rem;
            font-weight: 700;
            color: #F97316; /* Orange text */
            text-shadow: 0 0 10px rgba(249,115,22,0.5);
        }

        .bale-particle {
            position: absolute;
            width: 4px;
            height: 4px;
            background: #F97316; /* Orange particles */
            border-radius: 50%;
            animation: particleFloat 3s infinite;
        }
        .particle1 { top: 20%; left: 10%; animation-delay: 0s; }
        .particle2 { top: 70%; right: 15%; animation-delay: 0.5s; }
        .particle3 { top: 40%; left: 80%; animation-delay: 1s; }
        .particle4 { top: 80%; left: 30%; animation-delay: 1.5s; }
        .particle5 { top: 30%; right: 25%; animation-delay: 2s; }
        .particle6 { top: 60%; left: 50%; animation-delay: 2.5s; }
        @keyframes particleFloat {
            0% { transform: translate(0,0); opacity: 0.3; }
            50% { transform: translate(15px, -15px); opacity: 0.8; }
            100% { transform: translate(30px, -30px); opacity: 0; }
        }

        .bale-glow {
            position: absolute;
            inset: 0;
            background: radial-gradient(circle at 50% 50%, rgba(249,115,22,0.2), transparent 70%);
            animation: glowPulse 3s infinite;
        }
        @keyframes glowPulse {
            0% { opacity: 0.3; transform: scale(1); }
            50% { opacity: 0.7; transform: scale(1.1); }
            100% { opacity: 0.3; transform: scale(1); }
        }

        /* ----- BALES TYPES SECTION (with orange) ----- */
        .types-section {
            padding: 5rem 1.5rem;
            background: linear-gradient(135deg, #fff7ed, #ffffff); /* Light orange gradient */
        }
        .types-container {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 2.5rem;
            max-width: 1000px;
            margin: 0 auto;
        }
        @media (max-width: 700px) { .types-container { grid-template-columns: 1fr; } }
        .type-card {
            background: rgba(255,255,255,0.9);
            backdrop-filter: blur(10px);
            border-radius: 50px;
            padding: 3rem 2rem;
            text-align: center;
            box-shadow: 0 40px 60px -25px #F97316;
            border: 1px solid rgba(249,115,22,0.2);
            transition: 0.4s;
        }




         .type-card  h2 {
            color: grey !important;
        }

        .type-card:hover {
            transform: translateY(-15px);
            box-shadow: 0 50px 80px -25px #F97316;
            border-color: #F97316;
        }
        .type-icon {
            font-size: 3.5rem;
            color: #F97316; /* Orange icon */
            margin-bottom: 1.5rem;
            animation: iconPulse 2s infinite;
        }
        @keyframes iconPulse {
            0% { transform: scale(1); }
            50% { transform: scale(1.1); }
            100% { transform: scale(1); }
        }
        .type-card h2 {
            font-size: 2.2rem;
            margin-bottom: 1rem;
            color: #0c2535;
        }
        .type-card p {
            color: #2d4a60;
            font-size: 1rem;
        }

        /* ----- PROCESS QUOTE (with orange) ----- */
        .process-quote-section {
            padding: 4rem 1.5rem;
            background: white;
        }
        .quote-container {
            max-width: 1000px;
            margin: 0 auto;
            background: linear-gradient(145deg, #fff7ed, #ffffff);
            border-radius: 80px 20px 80px 20px;
            padding: 3rem 2.5rem;
            box-shadow: 0 50px 80px -30px #F97316;
            border: 2px solid #F97316; /* Orange border */
        }
        .process-quote {
            font-size: 1.8rem;
            line-height: 1.5;
            color: #1a4055;
            font-weight: 500;
            text-align: center;
            position: relative;
        }
        .process-quote::before, .process-quote::after {
            content: '"';
            font-size: 4rem;
            color: #F97316; /* Orange quotes */
            opacity: 0.2;
            position: absolute;
        }
        .process-quote::before { left: -20px; top: -20px; }
        .process-quote::after { right: -20px; bottom: -40px; }

        /* ----- DENSITY SPECS (with orange) ----- */
        .density-section {
            padding: 4rem 1.5rem;
            background: linear-gradient(145deg, #fff7ed, #ffe6cc);
        }
        .density-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 2rem;
            max-width: 1000px;
            margin: 2rem auto 0;
        }
        @media (max-width: 700px) { .density-grid { grid-template-columns: repeat(2, 1fr); } }
        @media (max-width: 450px) { .density-grid { grid-template-columns: 1fr; } }
        .density-card {
            background: rgba(255,255,255,0.8);
            backdrop-filter: blur(8px);
            border-radius: 40px;
            padding: 2.5rem 1.5rem;
            text-align: center;
            box-shadow: 0 25px 40px -18px #F97316;
            border: 1px solid rgba(249,115,22,0.25);
            transition: 0.3s;
        }
        .density-card:hover { transform: translateY(-10px); box-shadow: 0 40px 60px -20px #F97316; }
        .density-icon {
            font-size: 2.5rem;
            color: #F97316; /* Orange icon */
            margin-bottom: 1.2rem;
        }
        .density-value {
            font-size: 2.2rem;
            font-weight: 700;
            color: #0c2535;
            margin-bottom: 0.3rem;
        }
        .density-label {
            font-size: 1rem;
            text-transform: uppercase;
            letter-spacing: 1px;
            color: #1e4f6e;
        }

        /* ----- INTEGRITY SECTION (with orange accents) ----- */
        .integrity-section {
            padding: 5rem 1.5rem;
            background: white;
        }
        .integrity-container {
            max-width: 1300px;
            margin: 0 auto;
        }
        .integrity-header {
            text-align: center;
            margin-bottom: 3rem;
        }
        .integrity-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 2.5rem;
        }
        @media (max-width: 900px) { .integrity-grid { grid-template-columns: repeat(2, 1fr); } }
        @media (max-width: 600px) { .integrity-grid { grid-template-columns: 1fr; } }
        .integrity-card {
            background: #fff7ed; /* Light orange background */
            border-radius: 40px;
            padding: 2.5rem 2rem;
            box-shadow: 0 30px 50px -25px #F97316;
            border: 1px solid rgba(249,115,22,0.2);
            transition: 0.4s;
            position: relative;
            overflow: hidden;
        }
        .integrity-card:hover {
            transform: translateY(-12px);
            box-shadow: 0 45px 70px -25px #F97316;
            border-color: #F97316;
        }
        .integrity-number {
            font-size: 5rem;
            font-weight: 700;
            color: rgba(249,115,22,0.1); /* Orange number */
            position: absolute;
            top: 10px;
            right: 20px;
            line-height: 1;
        }
        .integrity-card h3 {
            font-size: 1.8rem;
            margin-bottom: 1rem;
            color: #0c2535;
            position: relative;
            z-index: 2;
        }
        .integrity-card p {
            color: #2d4a60;
            position: relative;
            z-index: 2;
        }

        /* ----- KEY POINTS GRID (with orange blend) ----- */
        .keypoints-section {
            padding: 4rem 1.5rem;
            background: linear-gradient(145deg, #021e2f, #0f3850);
            color: white;
        }
        .keypoints-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 2rem;
            max-width: 1300px;
            margin: 0 auto;
        }
        @media (max-width: 900px) { .keypoints-grid { grid-template-columns: repeat(2, 1fr); } }
        @media (max-width: 500px) { .keypoints-grid { grid-template-columns: 1fr; } }
        .keypoint-card {
            background: rgba(255,255,255,0.05);
            backdrop-filter: blur(8px);
            border: 1px solid rgba(249,115,22,0.4); /* Orange border */
            border-radius: 40px;
            padding: 2.5rem 1.8rem;
            transition: 0.4s;
        }
        .keypoint-card:hover {
            background: rgba(249,115,22,0.2); /* Orange hover */
            transform: translateY(-10px);
            border-color: #F97316;
        }
        .keypoint-icon {
            font-size: 2.5rem;
            color: #F97316; /* Orange icon */
            margin-bottom: 1.2rem;
        }
        .keypoint-content h3 {
            color: white;
            font-size: 1.5rem;
            margin-bottom: 0.8rem;
        }
        .keypoint-content p {
            color: rgba(255,255,255,0.8);
            font-size: 0.95rem;
        }

        /* ----- COMPRESSION SECTION (with orange) ----- */
        #compression-section-unique {
            padding: 5rem 1.5rem;
            background: white;
        }
        #compression-container-unique {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            gap: 3rem;
            max-width: 1300px;
            margin: 0 auto;
        }
        #compression-visual-unique {
            flex: 1 1 400px;
            display: flex;
            justify-content: center;
        }
        #compression-svg-container-unique {
            background: #fff7ed; /* Light orange background */
            border-radius: 60px;
            padding: 2rem;
            box-shadow: 0 30px 50px -25px #F97316;
            border: 1px solid rgba(249,115,22,0.2);
        }
        #compression-svg-unique {
            width: 300px;
            height: 300px;
        }
        .outer-ring-unique {
            stroke: #F97316; /* Orange stroke */
            animation: dashOffsetUnique 3s ease-in-out infinite alternate;
        }
        @keyframes dashOffsetUnique {
            0% { stroke-dashoffset: 0; }
            100% { stroke-dashoffset: 20; }
        }
        .weight-plate-unique {
            fill: #F97316; /* Orange fill */
            animation: weightPulse 2s infinite alternate;
        }
        @keyframes weightPulse {
            0% { opacity: 0.3; transform: scaleY(1); }
            100% { opacity: 0.6; transform: scaleY(1.1); }
        }
        .bale-core-unique {
            fill: #fff7ed;
            stroke: #F97316; /* Orange stroke */
            animation: balePulse 2s infinite alternate;
        }
        @keyframes balePulse {
            0% { transform: scale(1); }
            100% { transform: scale(1.02); }
        }
        .compression-arrow-unique {
            fill: #F97316; /* Orange arrows */
            animation: arrowMove 1.5s infinite alternate;
        }
        @keyframes arrowMove {
            0% { transform: translateY(0); }
            100% { transform: translateY(-5px); }
        }
        #compression-content-unique {
            flex: 1 1 400px;
        }
        #compression-content-unique h3 {
            font-size: 2rem;
            color: #0c2535;
            margin-bottom: 1rem;
        }
        #compression-content-unique p {
            color: #2d4a60;
            font-size: 1.1rem;
        }

        /* ----- SPACING FOR BOTTOM ----- */
        /* Removed body::after to eliminate bottom gap */




































        /* HEALTH PG */


         @font-face {
            font-family: 'Soho Gothic Pro';
            src: local('Soho Gothic Pro'), local('SohoGothicPro-Regular'), 
                 url('https://fonts.cdnfonts.com/s/15961/SohoGothicPro-Regular.woff') format('woff');
            font-weight: 400;
            font-display: swap;
        }
        @font-face {
            font-family: 'Soho Gothic Pro';
            src: local('Soho Gothic Pro Bold'), local('SohoGothicPro-Bold'),
                 url('https://fonts.cdnfonts.com/s/15961/SohoGothicPro-Bold.woff') format('woff');
            font-weight: 700;
            font-display: swap;
        }
        @font-face {
            font-family: 'Soho Gothic Pro';
            src: local('Soho Gothic Pro Medium'), local('SohoGothicPro-Medium'),
                 url('https://fonts.cdnfonts.com/s/15961/SohoGothicPro-Medium.woff') format('woff');
            font-weight: 500;
            font-display: swap;
        }

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Soho Gothic Pro', 'Soho', 'Gotham', 'Montserrat', system-ui, sans-serif;
            background: #ffffff;
            color: #1a2e40;
            line-height: 1.5;
            overflow-x: hidden;
        }

        /* Premium color palette: #0881D1 (primary blue), Orange (#F97316), Purple (#8B5CF6), Teal (#14B8A6) */
        :root {
            --primary-blue: #0881D1;
            --primary-blue-dark: #0665a3;
            --primary-blue-light: #4DA8FF;
            --primary-blue-soft: #E6F0FF;
            
            --accent-orange: #F97316;
            --accent-orange-dark: #EA580C;
            --accent-orange-light: #FB923C;
            --accent-orange-soft: #FFF3E6;
            
            --accent-purple: #8B5CF6;
            --accent-purple-light: #A78BFA;
            --accent-purple-soft: #EDE9FE;
            
            --accent-teal: #14B8A6;
            --accent-teal-light: #2DD4BF;
            --accent-teal-soft: #CCFBF1;
            
            --slate-dark: #1E293B;
            --slate-medium: #475569;
            --slate-light: #F8FAFC;
            
            --success-green: #10B981;
        }

        h1, h2, h3 {
            font-weight: 600;
            line-height: 1.2;
            letter-spacing: -0.01em;
        }

        h2 {
            font-size: clamp(2rem, 5vw, 2.8rem);
            margin-bottom: 1.5rem;
            color: var(--slate-dark);
        }

        p {
            color: var(--slate-medium);
            font-size: 1.1rem;
            margin-bottom: 1rem;
        }

        /* scroll reveal */
        .reveal {
            opacity: 0;
            transform: translateY(30px);
            transition: opacity 0.9s ease, transform 0.9s ease;
        }
        .reveal.active {
            opacity: 1;
            transform: translateY(0);
        }

        .section-tag {
            color: var(--primary-blue);
            font-weight: 500;
            letter-spacing: 2px;
            font-size: 0.85rem;
            text-transform: uppercase;
            display: inline-block;
            background: rgba(8, 129, 209, 0.1);
            padding: 0.3rem 1.3rem;
            border-radius: 40px;
            margin-bottom: 1.2rem;
            backdrop-filter: blur(4px);
            border: 1px solid rgba(8, 129, 209, 0.3);
        }

        /* ----- HEALTH & SAFETY HERO (with background image) ----- */
        #hs-safety-hero {
            position: relative;
            min-height: 100vh;
            display: flex;
            align-items: center;
            padding: 8rem 1.5rem 4rem 1.5rem;
            /* HERO BACKGROUND IMAGE - REPLACE WITH YOUR IMAGE URL */
            background-image: url('../assets/img/health.jpg');
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
            overflow: hidden;
            isolation: isolate;
        }

        /* Premium overlay with blue-orange-purple gradient */
        #hs-safety-hero::before {
            content: '';
            position: absolute;
            inset: 0;
            background: linear-gradient(115deg, 
                rgba(8, 129, 209, 0.9) 0%,
                rgba(249, 115, 22, 0.7) 40%,
                rgba(139, 92, 246, 0.6) 80%);
            z-index: 1;
            pointer-events: none;
        }

        #hs-safety-hero::after {
            content: '';
            position: absolute;
            inset: 0;
            background: radial-gradient(circle at 70% 30%, transparent 30%, rgba(0,0,0,0.3) 100%);
            z-index: 1;
            pointer-events: none;
        }

        #hs-floating-shapes {
            position: absolute;
            inset: 0;
            z-index: 2;
        }
        .hs-shape {
            position: absolute;
            border-radius: 50%;
            filter: blur(80px);
            animation: hsFloat 20s infinite alternate;
        }
        #hs-shape1 { width: 500px; height: 500px; top: -200px; right: -150px; background: var(--accent-orange); opacity: 0.4; }
        #hs-shape2 { width: 600px; height: 600px; bottom: -250px; left: -200px; background: var(--primary-blue); opacity: 0.3; animation-duration: 25s; }
        #hs-shape3 { width: 400px; height: 400px; top: 30%; left: 40%; background: var(--accent-purple); opacity: 0.25; animation-duration: 18s; }
        @keyframes hsFloat {
            0% { transform: translate(0,0) scale(1); }
            100% { transform: translate(70px, -50px) scale(1.4); }
        }

        #hs-safety-hero-content {
            position: relative;
            z-index: 10;
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            gap: 3rem;
            max-width: 1300px;
            margin: 0 auto;
            width: 100%;
        }

        #hs-hero-text {
            flex: 1 1 400px;
            color: white;
        }

        #hs-hero-label {
            font-size: 0.9rem;
            letter-spacing: 4px;
            background: rgba(255,255,255,0.15);
            backdrop-filter: blur(10px);
            display: inline-block;
            padding: 0.5rem 1.5rem;
            border-radius: 60px;
            margin-bottom: 1.8rem;
            border: 1px solid rgba(255,255,255,0.3);
            color: white;
            font-weight: 500;
        }

        #hs-hero-text h1 {
            font-size: clamp(3rem, 12vw, 5.2rem);
            font-weight: 700;
            margin-bottom: 1.3rem;
            color: white;
            text-shadow: 0 4px 30px rgba(0,0,0,0.3);
        }

        .hs-hero-glow {
            background: linear-gradient(145deg, #ffffff, var(--accent-orange-light), var(--accent-orange));
            -webkit-background-clip: text;
            background-clip: text;
            -webkit-text-fill-color: transparent;
            text-shadow: 0 0 40px var(--accent-orange);
        }

        #hs-hero-text p {
            color: rgba(255,255,255,0.95);
            font-size: 1.2rem;
            max-width: 600px;
        }

        #hs-hero-visual {
            flex: 1 1 300px;
            display: flex;
            justify-content: center;
        }

        #hs-visual-container {
            background: rgba(255,255,255,0.08);
            backdrop-filter: blur(12px);
            border-radius: 60px;
            padding: 2rem;
            border: 1px solid rgba(255,255,255,0.2);
            box-shadow: 0 30px 60px -20px rgba(0,0,0,0.5);
            width: 100%;
            max-width: 400px;
        }

        #hs-safety-icon {
            width: 100%;
            aspect-ratio: 1/1;
            position: relative;
        }

        .hs-icon-container {
            position: relative;
            width: 100%;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .hs-shield-glow-bg {
            position: absolute;
            width: 160px;
            height: 160px;
            background: radial-gradient(circle, var(--accent-orange) 0%, transparent 70%);
            border-radius: 50%;
            animation: shieldPulse 3s infinite;
        }

        .hs-shield-main {
            position: relative;
            width: 140px;
            height: 140px;
            background: linear-gradient(145deg, var(--primary-blue), var(--accent-purple));
            clip-path: path('M70,0 L130,30 L130,90 L70,140 L10,90 L10,30 L70,0');
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 5;
            animation: shieldFloat 4s infinite alternate;
            box-shadow: 0 20px 40px rgba(0,0,0,0.4);
        }

        .hs-shield-emblem {
            width: 60px;
            height: 60px;
            background: linear-gradient(145deg, var(--accent-orange), var(--accent-orange-dark));
            clip-path: path('M30,0 L55,15 L55,45 L30,60 L5,45 L5,15 L30,0');
            opacity: 0.9;
            box-shadow: 0 0 20px var(--accent-orange);
        }

        .hs-protection-ring {
            position: absolute;
            width: 190px;
            height: 190px;
            border: 3px dashed var(--accent-orange);
            border-radius: 50%;
            animation: ringRotate 12s linear infinite;
        }

        .hs-safety-element {
            position: absolute;
            font-size: 1.8rem;
            color: white;
            animation: elementFloat 5s infinite alternate;
            filter: drop-shadow(0 0 10px currentColor);
        }
        .hs-element1 { top: 10%; left: 10%; animation-delay: 0s; color: var(--accent-orange); }
        .hs-element2 { top: 15%; right: 15%; animation-delay: 0.5s; color: var(--accent-purple); }
        .hs-element3 { bottom: 20%; left: 15%; animation-delay: 1s; color: var(--primary-blue-light); }
        .hs-element4 { bottom: 10%; right: 20%; animation-delay: 1.5s; color: var(--accent-teal); }
        .hs-element5 { top: 40%; right: 5%; animation-delay: 2s; color: white; }
        .hs-element6 { bottom: 30%; left: 5%; animation-delay: 2.5s; color: var(--accent-orange-light); }

        .hs-particle {
            position: absolute;
            width: 6px;
            height: 6px;
            background: white;
            border-radius: 50%;
            animation: particleDrift 4s infinite;
        }
        .hs-particle1 { top: 30%; left: 20%; animation-delay: 0s; background: var(--accent-orange); }
        .hs-particle2 { top: 60%; right: 30%; animation-delay: 0.8s; background: var(--accent-purple); }
        .hs-particle3 { bottom: 40%; left: 40%; animation-delay: 1.6s; background: var(--primary-blue); }
        .hs-particle4 { top: 70%; left: 70%; animation-delay: 2.4s; background: var(--accent-teal); }
        .hs-particle5 { bottom: 20%; right: 40%; animation-delay: 3.2s; background: var(--accent-orange-light); }
        .hs-particle6 { top: 40%; right: 60%; animation-delay: 4s; background: var(--accent-purple-light); }

        @keyframes shieldPulse {
            0% { transform: scale(0.8); opacity: 0.3; }
            50% { transform: scale(1.2); opacity: 0.7; }
            100% { transform: scale(0.8); opacity: 0.3; }
        }
        @keyframes shieldFloat {
            0% { transform: translateY(0); }
            100% { transform: translateY(-12px); }
        }
        @keyframes ringRotate {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }
        @keyframes elementFloat {
            0% { transform: translate(0,0) rotate(0deg); }
            100% { transform: translate(15px, -20px) rotate(15deg); }
        }
        @keyframes particleDrift {
            0% { transform: translate(0,0); opacity: 0; }
            50% { opacity: 1; transform: translate(40px, -40px); }
            100% { opacity: 0; transform: translate(80px, -80px); }
        }

        /* ----- COMMITMENT SECTION (blue-orange blend) ----- */
        #hs-commitment-section {
            padding: 5rem 1.5rem;
            background: linear-gradient(145deg, white, var(--primary-blue-soft));
        }


           #hs-commitment-section h2 {
            color: grey !important;
        }
        
        #hs-commitment-container {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            gap: 4rem;
            max-width: 1300px;
            margin: 0 auto;
        }
        #hs-commitment-content {
            flex: 1 1 400px;
        }
        #hs-commitment-quote {
            background: white;
            border-radius: 40px;
            padding: 2rem;
            border-left: 8px solid var(--accent-orange);
            box-shadow: 0 30px 40px -20px var(--accent-orange);
            margin-top: 2rem;
        }
        #hs-commitment-visual {
            flex: 1 1 400px;
            display: flex;
            justify-content: center;
        }
        #hs-safety-gif {
            width: 100%;
            max-width: 500px;
            border-radius: 40px;
            overflow: hidden;
            box-shadow: 0 40px 60px -20px var(--primary-blue);
            border: 4px solid var(--primary-blue);
        }
        #hs-safety-gif img {
            width: 100%;
            height: auto;
            display: block;
            transition: transform 0.6s;
        }
        #hs-safety-gif:hover img { transform: scale(1.05); }

        /* ----- ZERO LTI SECTION (orange-purple blend) ----- */
        /* SECTION BACKGROUND */

/* SECTION BACKGROUND */

#zx9-lti-section{
    padding:120px 20px;
    background:
    radial-gradient(circle at 20% 30%, rgba(255,120,0,0.25), transparent 40%),
    radial-gradient(circle at 80% 70%, rgba(120,80,255,0.25), transparent 40%),
    linear-gradient(140deg,#0b1433,#1a0f38);
    position:relative;
}

/* WRAPPER */

.zx9-lti-wrapper{
    max-width:900px;
    margin:auto;
    text-align:center;
}

/* CARD */

.zx9-lti-card{
    padding:80px 50px;
    border-radius:30px;
    background:rgba(255,255,255,0.05);
    backdrop-filter:blur(20px);
    border:1px solid rgba(255,255,255,0.15);
    box-shadow:
    0 40px 80px rgba(0,0,0,0.6),
    inset 0 0 60px rgba(255,255,255,0.04);
}

/* COUNTER */

.zx9-lti-counter{
    font-size:110px;
    font-weight:900;
    line-height:1;
    background:linear-gradient(45deg,#ff7a00,#9b6bff);
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
    text-shadow:0 0 40px rgba(255,120,0,0.4);
}

.zx9-percent{
    font-size:40px;
}

/* TITLE */

.zx9-lti-title{
    font-size:34px;
    margin-top:15px;
    font-weight:600;
    color:white;
}

/* TEXT */

.zx9-lti-text{
    margin:20px auto 50px;
    max-width:550px;
    opacity:0.85;
    font-size:17px;
    color:white;
}

/* ICON SYSTEM */

.zx9-lti-icon-system{
    width:220px;
    height:220px;
    margin:auto;
    position:relative;
}

/* MAIN ICON */

.zx9-main-icon{
    width:80px;
    height:80px;
    background:linear-gradient(45deg,#ff7a00,#9b6bff);
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:36px;
    color:white;
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
    box-shadow:0 0 40px rgba(255,120,0,0.7);
    animation:pulseIcon 3s infinite;
}

/* ROTATING RINGS */

.zx9-ring{
    position:absolute;
    border-radius:50%;
    border:2px dashed rgba(255,255,255,0.3);
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
}

.ring1{
    width:170px;
    height:170px;
    animation:spin 12s linear infinite;
}

.ring2{
    width:210px;
    height:210px;
    border-color:#ff7a00;
    animation:spinReverse 16s linear infinite;
}

/* ANIMATIONS */

@keyframes spin{
    from{transform:translate(-50%,-50%) rotate(0)}
    to{transform:translate(-50%,-50%) rotate(360deg)}
}

@keyframes spinReverse{
    from{transform:translate(-50%,-50%) rotate(360deg)}
    to{transform:translate(-50%,-50%) rotate(0)}
}

@keyframes pulseIcon{
    0%{box-shadow:0 0 30px rgba(255,120,0,0.5);}
    50%{box-shadow:0 0 60px rgba(255,120,0,0.9);}
    100%{box-shadow:0 0 30px rgba(255,120,0,0.5);}
}

/* MOBILE */

@media (max-width:768px){

.zx9-lti-counter{
    font-size:80px;
}

.zx9-lti-card{
    padding:60px 25px;
}

}

        /* ----- OBJECTIVES GRID (multicolor cards) ----- */
        #hs-objectives-section {
            padding: 5rem 1.5rem;
            background: white;
        }
        #hs-objectives-header {
            text-align: center;
            margin-bottom: 3rem;
        }


        h2 {color: grey !important;}
        #hs-objectives-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 2rem;
            max-width: 1300px;
            margin: 0 auto;
        }
        @media (max-width: 1000px) { #hs-objectives-grid { grid-template-columns: repeat(2, 1fr); } }
        @media (max-width: 600px) { #hs-objectives-grid { grid-template-columns: 1fr; } }
        .hs-objective-card {
            background: white;
            border-radius: 40px;
            padding: 2.5rem 1.8rem;
            text-align: center;
            box-shadow: 0 30px 50px -25px var(--slate-dark);
            border: 1px solid rgba(8, 129, 209, 0.2);
            transition: 0.4s;
            position: relative;
            overflow: hidden;
        }
        .hs-objective-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 6px;
            background: linear-gradient(90deg, var(--primary-blue), var(--accent-orange), var(--accent-purple));
        }
        .hs-objective-card:hover {
            transform: translateY(-12px);
            box-shadow: 0 40px 70px -25px var(--primary-blue);
        }
        .hs-objective-icon {
            width: 90px;
            height: 90px;
            background: var(--primary-blue-soft);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto 1.5rem;
            font-size: 2.5rem;
            color: var(--primary-blue);
            transition: 0.3s;
        }
        .hs-objective-card:hover .hs-objective-icon {
            background: linear-gradient(145deg, var(--primary-blue), var(--accent-purple));
            color: white;
        }
        .hs-objective-card h3 {
            font-size: 1.8rem;
            margin-bottom: 0.8rem;
            color: var(--slate-dark);
        }
        .hs-objective-card p {
            color: var(--slate-medium);
        }

        /* ----- PILLARS SECTION (orange-purple blend) ----- */
        #hs-pillars-section {
            padding: 5rem 1.5rem;
            background: linear-gradient(145deg, var(--slate-light), white);
        }
        #hs-pillars-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 2.5rem;
            max-width: 1300px;
            margin: 2rem auto 0;
        }
        @media (max-width: 900px) { #hs-pillars-grid { grid-template-columns: repeat(2, 1fr); } }
        @media (max-width: 600px) { #hs-pillars-grid { grid-template-columns: 1fr; } }
        .hs-pillar-card {
            background: white;
            border-radius: 40px;
            padding: 3rem 2rem;
            text-align: center;
            box-shadow: 0 30px 50px -25px var(--accent-orange);
            border: 1px solid rgba(249, 115, 22, 0.2);
            transition: 0.4s;
            position: relative;
            overflow: hidden;
        }
        .hs-pillar-card::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            height: 6px;
            background: linear-gradient(90deg, var(--accent-orange), var(--accent-purple), var(--primary-blue));
        }
        .hs-pillar-card:hover {
            transform: translateY(-12px);
            box-shadow: 0 40px 70px -25px var(--accent-purple);
            border-color: var(--accent-purple);
        }
        .hs-pillar-icon {
            font-size: 3.5rem;
            background: linear-gradient(145deg, var(--accent-orange), var(--accent-purple));
            -webkit-background-clip: text;
            background-clip: text;
            -webkit-text-fill-color: transparent;
            margin-bottom: 1.5rem;
            animation: pillarFloat 3s infinite alternate;
        }
        @keyframes pillarFloat {
            0% { transform: translateY(0); }
            100% { transform: translateY(-10px); }
        }
        .hs-pillar-card h3 {
            font-size: 2rem;
            margin-bottom: 1rem;
            color: var(--slate-dark);
        }
        .hs-pillar-card p {
            color: var(--slate-medium);
        }

        /* ----- TRAINING SECTION (blue-teal blend) ----- */
        #hs-training-section {
            padding: 5rem 1.5rem;
            background: white;
        }
        #hs-training-container {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            gap: 4rem;
            max-width: 1300px;
            margin: 0 auto;
        }
        #hs-training-visual {
            flex: 1 1 400px;
            display: flex;
            justify-content: center;
        }
        #hs-training-gif {
            width: 100%;
            max-width: 500px;
            border-radius: 40px;
            overflow: hidden;
            box-shadow: 0 40px 60px -20px var(--primary-blue);
            border: 4px solid var(--primary-blue);
        }
        #hs-training-gif img {
            width: 100%;
            height: auto;
            display: block;
        }
        #hs-training-content {
            flex: 1 1 400px;
        }
        #hs-training-features {
            list-style: none;
            margin-top: 2rem;
        }
        #hs-training-features li {
            margin: 1.2rem 0;
            font-size: 1.2rem;
            display: flex;
            align-items: center;
        }
        #hs-training-features i {
            color: var(--success-green);
            margin-right: 15px;
            font-size: 1.4rem;
            background: rgba(16, 185, 129, 0.1);
            padding: 8px;
            border-radius: 50%;
        }

        /* ----- EMERGENCY RESPONSE (orange-purple badges) ----- */
        #hs-responsive-section {
            padding: 5rem 1.5rem;
            background: linear-gradient(145deg, var(--slate-light), white);
        }
        #hs-responsive-container {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            gap: 4rem;
            max-width: 1300px;
            margin: 0 auto;
        }
        #hs-responsive-content {
            flex: 1 1 400px;
        }
        .hs-emergency-badge {
            display: inline-block;
            background: linear-gradient(145deg, var(--accent-orange-soft), var(--accent-purple-soft));
            color: var(--slate-dark);
            padding: 0.8rem 1.5rem;
            border-radius: 60px;
            margin: 0.5rem 0.5rem 0 0;
            font-weight: 500;
            border: 1px solid var(--accent-orange);
            transition: 0.3s;
        }
        .hs-emergency-badge:hover {
            transform: translateY(-3px);
            box-shadow: 0 10px 20px -10px var(--accent-purple);
        }
        #hs-responsive-visual {
            flex: 1 1 400px;
            display: flex;
            justify-content: center;
        }
        #hs-emergency-gif {
            width: 100%;
            max-width: 500px;
            border-radius: 40px;
            overflow: hidden;
            box-shadow: 0 40px 60px -20px var(--accent-purple);
            border: 4px solid var(--accent-purple);
        }
        #hs-emergency-gif img {
            width: 100%;
            height: auto;
            display: block;
        }

        /* ----- BOTTOM SPACING ----- */
        /* Removed body::after to eliminate bottom gap */

       /* animation for countdown */

@keyframes zx9-pulseRing {
    0% { transform: scale(1); }
    50% { transform: scale(1.1); filter: drop-shadow(0 0 40px var(--accent-orange)); }
    100% { transform: scale(1); }
}

.zx9-zero-celebration {
    animation: zeroCelebrate 1s ease-in-out infinite;
}

@keyframes zeroCelebrate {
    0% { transform: scale(1); filter: brightness(1); }
    50% { transform: scale(1.2); filter: brightness(1.3); }
    100% { transform: scale(1); filter: brightness(1); }
}

.zx9-count-animation {
    animation: countPop 0.5s ease;
}

@keyframes countPop {
    0% { transform: scale(1); }
    50% { transform: scale(1.2); }
    100% { transform: scale(1); }
}


/* additional styling zero */


/* SVG PROGRESS RING */

.zx9-progress-svg{
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%) rotate(-90deg);
}

.zx9-progress-bg{
    fill:none;
    stroke:rgba(255,255,255,0.1);
    stroke-width:6;
}

.zx9-progress-bar{
    fill:none;
    stroke:url(#grad);
    stroke:#ff7a00;
    stroke-width:6;
    stroke-linecap:round;
    stroke-dasharray:597;
    stroke-dashoffset:597;
    transition:stroke-dashoffset .15s linear;
}


/* DIGITAL COUNTER STYLE */

.zx9-lti-counter{
    font-family: "Orbitron", monospace;
    letter-spacing:4px;
}


/* ICON LIGHT EFFECT */

.zx9-orbit{
    transition:all .4s ease;
    opacity:.5;
}

.zx9-orbit.active{
    opacity:1;
    color:#ff7a00;
    transform:scale(1.2);
    box-shadow:0 0 20px rgba(255,120,0,.8);
}


/* COUNTER FONT */

.zx9-lti-counter{
    font-family: "Orbitron", monospace;
}

.zx9-number{
    letter-spacing:4px;
}

.zx9-percent{
    font-size:40px;
    margin-left:2px;
}



/* fix isseu with animated icon */

/* ORBIT ICONS POSITION FIX */

.zx9-orbit{
    position:absolute;
    width:36px;
    height:36px;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:18px;
    color:white;
    border-radius:50%;
}

/* TOP */
.orbit1{
    top:-10px;
    left:50%;
    transform:translateX(-50%);
}

/* RIGHT */
.orbit2{
    right:-10px;
    top:50%;
    transform:translateY(-50%);
}

/* BOTTOM */
.orbit3{
    bottom:-10px;
    left:50%;
    transform:translateX(-50%);
}

/* LEFT */
.orbit4{
    left:-10px;
    top:50%;
    transform:translateY(-50%);
}












/* ORBIT RING CONTAINER */

.zx9-orbit-ring{
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
    border-radius:50%;
    border:2px dashed rgba(255,255,255,0.25);
    pointer-events:none;
}

/* ORBIT SIZES */

.zx9-ring1{
    width:200px;
    height:200px;
    animation:zx9-spin 20s linear infinite;
}

.zx9-ring2{
    width:240px;
    height:240px;
    border-color:#ff7a00;
    animation:zx9-spinReverse 28s linear infinite;
}

/* ORBIT ICON BASE */

.zx9-orbit{
    position:absolute;
    width:40px;
    height:40px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    color:white;
    background:rgba(255,255,255,0.08);
    backdrop-filter:blur(6px);
    z-index:5; /* ABOVE circle */
}

/* ICON POSITIONS */

.orbit1{
    top:-20px;
    left:50%;
    transform:translateX(-50%);
}

.orbit2{
    right:-20px;
    top:50%;
    transform:translateY(-50%);
}

.orbit3{
    bottom:-20px;
    left:50%;
    transform:translateX(-50%);
}

.orbit4{
    left:-20px;
    top:50%;
    transform:translateY(-50%);
}

/* ROTATION ANIMATION */

@keyframes zx9-spin{
    from{transform:translate(-50%,-50%) rotate(0deg);}
    to{transform:translate(-50%,-50%) rotate(360deg);}
}

@keyframes zx9-spinReverse{
    from{transform:translate(-50%,-50%) rotate(360deg);}
    to{transform:translate(-50%,-50%) rotate(0deg);}
}






.zx9-progress-svg{
z-index:1;
}

.zx9-main-icon{
z-index:6;
}

        /*ENVIRONMENT */


@font-face {
            font-family: 'Soho Gothic Pro';
            src: local('Soho Gothic Pro'), local('SohoGothicPro-Regular'), 
                 url('https://fonts.cdnfonts.com/s/15961/SohoGothicPro-Regular.woff') format('woff');
            font-weight: 400;
            font-display: swap;
        }
        @font-face {
            font-family: 'Soho Gothic Pro';
            src: local('Soho Gothic Pro Bold'), local('SohoGothicPro-Bold'),
                 url('https://fonts.cdnfonts.com/s/15961/SohoGothicPro-Bold.woff') format('woff');
            font-weight: 700;
            font-display: swap;
        }
        @font-face {
            font-family: 'Soho Gothic Pro';
            src: local('Soho Gothic Pro Medium'), local('SohoGothicPro-Medium'),
                 url('https://fonts.cdnfonts.com/s/15961/SohoGothicPro-Medium.woff') format('woff');
            font-weight: 500;
            font-display: swap;
        }

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Soho Gothic Pro', 'Soho', 'Gotham', 'Montserrat', 'Space Grotesk', system-ui, sans-serif;
            background: #ffffff;
            color: #1a2e40;
            line-height: 1.5;
            overflow-x: hidden;
        }

        /* Premium Color Palette with Blue Reflections */
        :root {
            --primary-blue: #0881D1;
            --primary-blue-dark: #0665a3;
            --primary-blue-light: #4DA8FF;
            --primary-blue-soft: #E6F0FF;
            
            --accent-teal: #14B8A6;
            --accent-teal-light: #2DD4BF;
            --accent-teal-soft: #CCFBF1;
            
            --accent-green: #2E8B57;
            --accent-green-light: #6BAA75;
            --accent-green-soft: #E8F3E9;
            
            --accent-sky: #38BDF8;
            --accent-sky-light: #7DD3FC;
            --accent-sky-soft: #E0F2FE;
            
            --slate-dark: #1E293B;
            --slate-medium: #475569;
            --slate-light: #F8FAFC;
            
            --water-blue: #3B82F6;
            --sun-yellow: #F59E0B;
            --energy-yellow: #f1c40f;
        }

        h1, h2, h3 {
            font-weight: 600;
            line-height: 1.2;
            letter-spacing: -0.01em;
        }

        h2 {
            font-size: clamp(2rem, 5vw, 2.8rem);
            margin-bottom: 1.5rem;
            color: var(--slate-dark);
        }

        p {
            color: var(--slate-medium);
            font-size: 1.1rem;
            margin-bottom: 1rem;
        }

      

        /* ----- ENVIRONMENT HERO with JPEG image + blue overlay ----- */
        #env-hero-section {
            position: relative;
            min-height: 100vh;
            display: flex;
            align-items: center;
            padding: 8rem 1.5rem 4rem 1.5rem;
            /* JPEG HERO IMAGE - REPLACE WITH YOUR JPEG PATH */
            background-image: url('https://images.unsplash.com/photo-1470071459604-3b5ec3a7fe05?q=80&w=1948&auto=format&fit=crop');
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
            overflow: hidden;
            isolation: isolate;
        }

        /* Blue gradient overlay */
        #env-hero-section::before {
            content: '';
            position: absolute;
            inset: 0;
            background: linear-gradient(115deg, 
                rgba(8, 129, 209, 0.85) 0%,
                rgba(20, 184, 166, 0.6) 50%,
                rgba(56, 189, 248, 0.4) 100%);
            z-index: 1;
            pointer-events: none;
        }

        /* Floating shapes with blue hues */
        #env-floating-shapes {
            position: absolute;
            inset: 0;
            z-index: 2;
        }
        .env-shape {
            position: absolute;
            border-radius: 50%;
            filter: blur(80px);
            animation: envFloat 20s infinite alternate;
        }
        #env-shape1 { width: 500px; height: 500px; top: -200px; right: -150px; background: var(--primary-blue); opacity: 0.4; }
        #env-shape2 { width: 600px; height: 600px; bottom: -250px; left: -200px; background: var(--accent-teal); opacity: 0.3; animation-duration: 25s; }
        #env-shape3 { width: 400px; height: 400px; top: 30%; left: 40%; background: var(--accent-sky); opacity: 0.25; animation-duration: 18s; }
        @keyframes envFloat {
            0% { transform: translate(0,0) scale(1); }
            100% { transform: translate(70px, -50px) scale(1.4); }
        }

        #env-hero-content {
            position: relative;
            z-index: 10;
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            gap: 3rem;
            max-width: 1300px;
            margin: 0 auto;
            width: 100%;
        }

        #env-hero-text {
            flex: 1 1 400px;
            color: white;
        }

        #env-hero-label {
            font-size: 0.9rem;
            letter-spacing: 4px;
            background: rgba(255,255,255,0.15);
            backdrop-filter: blur(10px);
            display: inline-block;
            padding: 0.5rem 1.5rem;
            border-radius: 60px;
            margin-bottom: 1.8rem;
            border: 1px solid rgba(255,255,255,0.3);
            color: white;
            font-weight: 500;
        }

        #env-hero-text h1 {
            font-size: clamp(3rem, 12vw, 5.2rem);
            font-weight: 700;
            margin-bottom: 1.3rem;
            color: white;
            text-shadow: 0 4px 30px rgba(0,0,0,0.3);
        }

        .env-hero-glow {
            background: linear-gradient(145deg, #ffffff, var(--primary-blue-light), var(--primary-blue));
            -webkit-background-clip: text;
            background-clip: text;
            -webkit-text-fill-color: transparent;
            text-shadow: 0 0 40px var(--primary-blue);
        }

        #env-hero-text p {
            color: rgba(255,255,255,0.95);
            font-size: 1.2rem;
            max-width: 600px;
        }

        #env-hero-visual {
            flex: 1 1 300px;
            display: flex;
            justify-content: center;
        }

        #env-hero-illustration {
            background: rgba(255,255,255,0.08);
            backdrop-filter: blur(12px);
            border-radius: 60px;
            padding: 2rem;
            border: 1px solid rgba(255,255,255,0.2);
            box-shadow: 0 30px 60px -20px rgba(0,0,0,0.5);
            width: 100%;
            max-width: 400px;
        }

        .env-planet-protector {
            position: relative;
            width: 100%;
            aspect-ratio: 1/1;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .env-earth-core {
            width: 140px;
            height: 140px;
            background: linear-gradient(145deg, var(--primary-blue), var(--accent-teal));
            border-radius: 50%;
            box-shadow: 0 0 40px var(--primary-blue);
            position: relative;
            z-index: 5;
            animation: earthRotate 20s linear infinite;
        }

        .env-protection-shield {
            position: absolute;
            width: 180px;
            height: 180px;
            border: 3px solid var(--primary-blue-light);
            border-radius: 50%;
            animation: shieldPulse 3s infinite;
            z-index: 10;
        }

        .env-protection-ring {
            position: absolute;
            width: 220px;
            height: 220px;
            border: 2px dashed var(--accent-sky);
            border-radius: 50%;
            animation: ringRotate 15s linear infinite;
            z-index: 6;
        }

        .env-orbiting-leaf {
            position: absolute;
            font-size: 2rem;
            animation: orbitLeaf 10s linear infinite;
        }
        .env-leaf1 { animation-delay: 0s; color: var(--accent-green); }
        .env-leaf2 { animation-delay: 2.5s; color: var(--primary-blue-light); }
        .env-leaf3 { animation-delay: 5s; color: var(--accent-teal); }
        .env-leaf4 { animation-delay: 7.5s; color: var(--accent-sky); }
        @keyframes orbitLeaf {
            0% { transform: rotate(0deg) translateX(120px) rotate(0deg); }
            100% { transform: rotate(360deg) translateX(120px) rotate(-360deg); }
        }

        .env-water-droplet {
            position: absolute;
            width: 10px;
            height: 15px;
            background: var(--water-blue);
            border-radius: 50% 50% 50% 0;
            transform: rotate(-45deg);
            animation: dropletFall 4s infinite;
        }
        .env-droplet1 { top: 20%; left: 30%; animation-delay: 0s; }
        .env-droplet2 { top: 60%; right: 25%; animation-delay: 2s; }
        @keyframes dropletFall {
            0% { transform: translateY(0) rotate(-45deg); opacity: 1; }
            100% { transform: translateY(80px) rotate(-45deg); opacity: 0; }
        }

        @keyframes earthRotate {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }
        @keyframes shieldPulse {
            0% { transform: scale(1); opacity: 0.6; }
            50% { transform: scale(1.1); opacity: 1; }
            100% { transform: scale(1); opacity: 0.6; }
        }
        @keyframes ringRotate {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }

        /* ----- COMMITMENT QUOTE (with blue accent) ----- */
        #env-commitment-section {
            padding: 4rem 1.5rem;
            background: linear-gradient(135deg, white, var(--primary-blue-soft));
        }
        #env-commitment-container {
            max-width: 1000px;
            margin: 0 auto;
            background: white;
            border-radius: 80px 20px 80px 20px;
            padding: 3rem 2.5rem;
            box-shadow: 0 50px 80px -30px var(--primary-blue);
            border: 2px solid var(--primary-blue);
            text-align: center;
        }
        #env-commitment-quote {
            font-size: 1.8rem;
            line-height: 1.5;
            color: var(--slate-dark);
            font-weight: 500;
            position: relative;
        }
        #env-commitment-quote::before {
            content: '"';
            font-size: 4rem;
            color: var(--primary-blue);
            opacity: 0.2;
            position: absolute;
            left: -20px;
            top: -20px;
        }

        /* ----- ENVIRONMENTAL PILLARS (with blue icons) ----- */
        #env-pillars-section {
            padding: 5rem 1.5rem;
            background: white;
        }
        #env-pillars-header {
            text-align: center;
            margin-bottom: 3rem;
        }


         #env-pillars-header h2 {
          color: grey !important;
        }
        #env-pillars-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 2rem;
            max-width: 1300px;
            margin: 0 auto;
        }
        @media (max-width: 1000px) { #env-pillars-grid { grid-template-columns: repeat(2, 1fr); } }
        @media (max-width: 600px) { #env-pillars-grid { grid-template-columns: 1fr; } }
        .env-pillar-card {
            background: white;
            border-radius: 40px;
            padding: 2.5rem 1.8rem;
            text-align: center;
            box-shadow: 0 30px 50px -25px var(--primary-blue);
            border: 1px solid rgba(8, 129, 209, 0.2);
            transition: 0.4s;
            position: relative;
            overflow: hidden;
        }
        .env-pillar-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 6px;
            background: linear-gradient(90deg, var(--primary-blue), var(--accent-teal), var(--accent-sky));
        }
        .env-pillar-card:hover {
            transform: translateY(-12px);
            box-shadow: 0 40px 70px -25px var(--primary-blue);
        }
        .env-pillar-icon {
            width: 90px;
            height: 90px;
            background: var(--primary-blue-soft);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto 1.5rem;
            font-size: 2.5rem;
            color: var(--primary-blue);
            transition: 0.3s;
            animation: iconFloat 3s infinite alternate;
        }
        @keyframes iconFloat {
            0% { transform: translateY(0); }
            100% { transform: translateY(-8px); }
        }
        .env-pillar-card:hover .env-pillar-icon {
            background: var(--primary-blue);
            color: white;
        }
        .env-pillar-card h3 {
            font-size: 1.5rem;
            margin-bottom: 1rem;
            color: var(--slate-dark);
        }
        .env-pillar-card p {
            color: var(--slate-medium);
            font-size: 0.95rem;
        }

        /* ----- ENVIRONMENTAL COMMITMENTS (with blue tags) ----- */
        #env-commitments-section {
            padding: 5rem 1.5rem;
            background: linear-gradient(145deg, var(--slate-light), white);
        }
        #env-commitments-header {
            text-align: center;
            max-width: 800px;
            margin: 0 auto 3rem;
        }

        #env-commitments-header h2{ color: grey !important;}
        #env-commitments-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 2rem;
            max-width: 1300px;
            margin: 0 auto;
        }
        @media (max-width: 1000px) { #env-commitments-grid { grid-template-columns: repeat(2, 1fr); } }
        @media (max-width: 600px) { #env-commitments-grid { grid-template-columns: 1fr; } }
        .env-commitment-card {
            background: white;
            border-radius: 40px;
            padding: 2.5rem 2rem;
            box-shadow: 0 30px 50px -25px var(--primary-blue);
            border: 1px solid rgba(8, 129, 209, 0.2);
            transition: 0.4s;
            position: relative;
            overflow: hidden;
        }
        .env-commitment-card:hover {
            transform: translateY(-10px);
            box-shadow: 0 40px 70px -25px var(--primary-blue);
            border-color: var(--primary-blue);
        }
        .env-commitment-icon {
            font-size: 2.8rem;
            color: var(--primary-blue);
            margin-bottom: 1.2rem;
        }
        .env-commitment-card h3 {
            font-size: 1.5rem;
            margin-bottom: 0.8rem;
            color: var(--slate-dark);
        }
        .env-commitment-card p {
            color: var(--slate-medium);
            font-size: 0.95rem;
            margin-bottom: 1.5rem;
        }
        .env-commitment-tag {
            display: inline-block;
            background: var(--primary-blue-soft);
            color: var(--primary-blue);
            padding: 0.3rem 1rem;
            border-radius: 40px;
            font-size: 0.8rem;
            font-weight: 600;
        }

        /* ----- WASTE MANAGEMENT SECTION (with blue bin) ----- */
        #env-waste-section {
            padding: 5rem 1.5rem;
            background: white;
        }
        #env-waste-container {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            gap: 4rem;
            max-width: 1300px;
            margin: 0 auto;
        }
        #env-waste-content {
            flex: 1 1 400px;
        }


        #env-waste-content h2 {
            color: grey !important;
        }
        #env-waste-features {
            list-style: none;
            margin-top: 2rem;
        }
        #env-waste-features li {
            margin: 1rem 0;
            font-size: 1.1rem;
            display: flex;
            align-items: center;
        }
        #env-waste-features i {
            color: var(--primary-blue);
            margin-right: 15px;
            font-size: 1.3rem;
        }
        #env-waste-visual {
            flex: 1 1 400px;
            display: flex;
            justify-content: center;
        }
        #env-waste-illustration {
            background: var(--primary-blue-soft);
            border-radius: 60px;
            padding: 2rem;
            width: 100%;
            max-width: 400px;
            border: 2px solid var(--primary-blue);
        }
        .env-recycling-bin {
            width: 100%;
            aspect-ratio: 1/1;
            position: relative;
        }
        .env-bin-container {
            position: relative;
            width: 100%;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .env-bin-body {
            width: 160px;
            height: 160px;
            background: linear-gradient(145deg, var(--primary-blue), var(--accent-teal));
            border-radius: 20px 20px 40px 40px;
            position: relative;
            animation: binFloat 3s infinite alternate;
        }
        .env-bin-lid {
            width: 180px;
            height: 30px;
            background: linear-gradient(145deg, var(--accent-sky), var(--primary-blue-light));
            border-radius: 20px 20px 0 0;
            position: absolute;
            top: 20px;
            animation: lidOpen 4s infinite alternate;
            transform-origin: left;
        }
        .env-recycling-symbol {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            font-size: 3rem;
            color: white;
            text-shadow: 0 0 20px rgba(255,255,255,0.5);
            animation: spinSlow 8s linear infinite;
        }
        .env-waste-items {
            position: absolute;
            bottom: 10px;
            display: flex;
            gap: 10px;
        }
        .env-waste-item {
            width: 20px;
            height: 30px;
            background: var(--accent-green);
            border-radius: 5px;
            animation: itemFloat 2s infinite alternate;
        }
        .env-item1 { animation-delay: 0s; }
        .env-item2 { animation-delay: 0.5s; }
        .env-item3 { animation-delay: 1s; }
        @keyframes binFloat {
            0% { transform: translateY(0); }
            100% { transform: translateY(-10px); }
        }
        @keyframes lidOpen {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(15deg); }
        }
        @keyframes spinSlow {
            0% { transform: translate(-50%, -50%) rotate(0deg); }
            100% { transform: translate(-50%, -50%) rotate(360deg); }
        }
        @keyframes itemFloat {
            0% { transform: translateY(0); }
            100% { transform: translateY(-5px); }
        }

        /* ----- ENERGY & WATER SECTION (with original yellow and blue) ----- */
        #env-energy-section {
            padding: 5rem 1.5rem;
            background: linear-gradient(145deg, var(--slate-light), white);
        }
        #env-energy-container {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            gap: 4rem;
            max-width: 1300px;
            margin: 0 auto;
        }
        #env-energy-visual {
            flex: 1 1 400px;
            display: flex;
            justify-content: center;
        }
        #env-energy-illustration svg {
            width: 300px;
            height: 300px;
        }
        .env-energy-pulse {
            animation: energyPulse 2s infinite alternate;
        }
        .env-water-wave {
            animation: waterWave 3s infinite alternate;
        }
        @keyframes energyPulse {
            0% { r: 40; opacity: 0.3; }
            100% { r: 50; opacity: 0.6; }
        }
        @keyframes waterWave {
            0% { d: path('M200 130 Q210 140 200 150 Q190 160 200 170'); }
            100% { d: path('M200 130 Q215 145 200 155 Q185 165 200 170'); }
        }
        #env-energy-content {
            flex: 1 1 400px;
        }


        #env-energy-content  h2{
            color:  grey !important;
        }
        #env-energy-stats {
            display: flex;
            gap: 2rem;
            margin-top: 2rem;
        }
        .env-energy-stat {
            background: white;
            border-radius: 40px;
            padding: 2rem;
            text-align: center;
            flex: 1;
            box-shadow: 0 20px 30px -15px var(--primary-blue);
        }
        .env-energy-stat i {
            font-size: 2.5rem;
            margin-bottom: 0.5rem;
        }
        .env-energy-stat:first-child i {
            color: var(--energy-yellow); /* Yellow for energy */
        }
        .env-energy-stat:last-child i {
            color: var(--water-blue); /* Blue for water */
        }
        .env-stat-number {
            font-size: 2.5rem;
            font-weight: 700;
            color: var(--slate-dark);
            line-height: 1;
            margin-bottom: 0.3rem;
        }
        .env-stat-label {
            color: var(--slate-medium);
            font-size: 0.9rem;
        }

        /* ----- EMPLOYEE ENGAGEMENT SECTION (with blue figures) ----- */
        #env-employee-section {
            padding: 5rem 1.5rem;
            background: white;
        }
        #env-employee-container {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            gap: 4rem;
            max-width: 1300px;
            margin: 0 auto;
        }
        #env-employee-content {
            flex: 1 1 400px;
        }



        #env-employee-content  h2{
            color: grey !important;
        }
        #env-employee-visual {
            flex: 1 1 400px;
            display: flex;
            justify-content: center;
        }
        #env-employee-illustration {
            background: var(--primary-blue-soft);
            border-radius: 60px;
            padding: 2rem;
            width: 100%;
            max-width: 400px;
        }
        .env-employee-icon {
            position: relative;
            width: 100%;
            aspect-ratio: 1/1;
        }
        .env-employee-circle {
            position: absolute;
            width: 200px;
            height: 200px;
            border: 3px dashed var(--primary-blue);
            border-radius: 50%;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            animation: circleRotate 20s linear infinite;
        }
        .env-employee-figure {
            position: absolute;
            width: 40px;
            height: 40px;
            background: var(--primary-blue);
            border-radius: 50% 50% 40% 40%;
            animation: figureFloat 3s infinite alternate;
        }
        .env-figure1 { top: 20%; left: 30%; animation-delay: 0s; }
        .env-figure2 { top: 60%; right: 25%; animation-delay: 0.5s; }
        .env-figure3 { bottom: 20%; left: 40%; animation-delay: 1s; }
        .env-figure4 { top: 40%; right: 30%; animation-delay: 1.5s; }
        .env-connection-line {
            position: absolute;
            height: 2px;
            background: linear-gradient(90deg, transparent, var(--primary-blue-light), transparent);
            animation: linePulse 3s infinite;
        }
        .env-line1 { width: 80px; top: 30%; left: 30%; transform: rotate(45deg); }
        .env-line2 { width: 80px; top: 50%; right: 30%; transform: rotate(-45deg); }
        .env-line3 { width: 100px; bottom: 20%; left: 50%; transform: translateX(-50%); }
        .env-employee-badge {
            position: absolute;
            font-size: 1.5rem;
            animation: badgeFloat 2s infinite alternate;
        }
        .env-badge1 { top: 10%; right: 20%; animation-delay: 0s; color: var(--primary-blue); }
        .env-badge2 { bottom: 15%; left: 15%; animation-delay: 0.7s; color: var(--accent-teal); }
        .env-badge3 { top: 50%; left: 10%; animation-delay: 1.4s; color: var(--accent-sky); }
        @keyframes circleRotate {
            0% { transform: translate(-50%, -50%) rotate(0deg); }
            100% { transform: translate(-50%, -50%) rotate(360deg); }
        }
        @keyframes figureFloat {
            0% { transform: translateY(0); }
            100% { transform: translateY(-10px); }
        }
        @keyframes linePulse {
            0% { opacity: 0.2; }
            50% { opacity: 0.8; }
            100% { opacity: 0.2; }
        }
        @keyframes badgeFloat {
            0% { transform: translateY(0) rotate(0deg); }
            100% { transform: translateY(-8px) rotate(5deg); }
        }

        /* ----- BOTTOM SPACING ----- */
        /* Removed body::after to eliminate bottom gap */

        /* Counter animation */
        .env-counter-animate {
            animation: countPop 0.5s ease;
        }
        @keyframes countPop {
            0% { transform: scale(1); }
            50% { transform: scale(1.2); color: var(--primary-blue); }
            100% { transform: scale(1); }
        }






        /*COMMUNUTY */


         @font-face {
            font-family: 'Soho Gothic Pro';
            src: local('Soho Gothic Pro'), local('SohoGothicPro-Regular'), 
                 url('https://fonts.cdnfonts.com/s/15961/SohoGothicPro-Regular.woff') format('woff');
            font-weight: 400;
            font-display: swap;
        }
        @font-face {
            font-family: 'Soho Gothic Pro';
            src: local('Soho Gothic Pro Bold'), local('SohoGothicPro-Bold'),
                 url('https://fonts.cdnfonts.com/s/15961/SohoGothicPro-Bold.woff') format('woff');
            font-weight: 700;
            font-display: swap;
        }
        @font-face {
            font-family: 'Soho Gothic Pro';
            src: local('Soho Gothic Pro Medium'), local('SohoGothicPro-Medium'),
                 url('https://fonts.cdnfonts.com/s/15961/SohoGothicPro-Medium.woff') format('woff');
            font-weight: 500;
            font-display: swap;
        }

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Soho Gothic Pro', 'Soho', 'Gotham', 'Montserrat', 'Space Grotesk', system-ui, sans-serif;
            background: #ffffff;
            color: #1a2e40;
            line-height: 1.5;
            overflow-x: hidden;
        }

        /* Premium Color Palette with Blue Blend */
        :root {
            --primary-warm: #E27D60;
            --primary-warm-dark: #C45D4A;
            --primary-warm-light: #F0A18B;
            --primary-warm-soft: #FCE9E4;
            
            --primary-blue: #0881D1;
            --primary-blue-dark: #0665a3;
            --primary-blue-light: #4DA8FF;
            --primary-blue-soft: #E6F0FF;
            
            --accent-coral: #E8A87C;
            --accent-coral-light: #F2C4A0;
            --accent-coral-soft: #FFF0E0;
            
            --accent-teal: #41B3A3;
            --accent-teal-light: #6DCDC0;
            --accent-teal-soft: #D6F0EC;
            
            --accent-gold: #F4D03F;
            --accent-gold-light: #F7DC6F;
            --accent-gold-soft: #FEF9E7;
            
            --slate-dark: #2C3E50;
            --slate-medium: #5D6D7E;
            --slate-light: #F8F9F9;
            
            --handshake-green: #2E8B57;
        }

        h1, h2, h3 {
            font-weight: 600;
            line-height: 1.2;
            letter-spacing: -0.01em;
        }

        h2 {
            font-size: clamp(2rem, 5vw, 2.8rem);
            margin-bottom: 1.5rem;
            color: var(--slate-dark);
        }

        p {
            color: var(--slate-medium);
            font-size: 1.1rem;
            margin-bottom: 1rem;
        }

        /* scroll reveal */
        .reveal {
            opacity: 0;
            transform: translateY(30px);
            transition: opacity 0.9s ease, transform 0.9s ease;
        }
        .reveal.active {
            opacity: 1;
            transform: translateY(0);
        }

        .section-tag {
            color: var(--primary-blue);
            font-weight: 500;
            letter-spacing: 2px;
            font-size: 0.85rem;
            text-transform: uppercase;
            display: inline-block;
            background: rgba(8, 129, 209, 0.1);
            padding: 0.3rem 1.3rem;
            border-radius: 40px;
            margin-bottom: 1.2rem;
            backdrop-filter: blur(4px);
            border: 1px solid rgba(8, 129, 209, 0.3);
        }

        /* ----- COMMUNITY HERO with blue blend and animated icon ----- */
        #community-hero-section {
            position: relative;
            min-height: 100vh;
            display: flex;
            align-items: center;
            padding: 8rem 1.5rem 4rem 1.5rem;
            background-image: url('../assets/img/purpose-bg\ \(1\).png');
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
            overflow: hidden;
            isolation: isolate;
        }

        /* Blue-coral gradient overlay */
        #community-hero-section::before {
            content: '';
            position: absolute;
            inset: 0;
            background: linear-gradient(115deg, 
                rgba(8, 129, 209, 0.85) 0%,
                rgba(226, 125, 96, 0.7) 40%,
                rgba(65, 179, 163, 0.5) 80%);
            z-index: 1;
            pointer-events: none;
        }

        #community-floating-shapes {
            position: absolute;
            inset: 0;
            z-index: 2;
        }
        .community-shape {
            position: absolute;
            border-radius: 50%;
            filter: blur(70px);
            animation: communityFloat 20s infinite alternate;
        }
        #community-shape1 { width: 500px; height: 500px; top: -200px; right: -150px; background: var(--primary-blue); opacity: 0.4; }
        #community-shape2 { width: 600px; height: 600px; bottom: -250px; left: -200px; background: var(--primary-warm); opacity: 0.3; animation-duration: 25s; }
        #community-shape3 { width: 400px; height: 400px; top: 30%; left: 40%; background: var(--accent-teal); opacity: 0.25; animation-duration: 18s; }
        @keyframes communityFloat {
            0% { transform: translate(0,0) scale(1); }
            100% { transform: translate(70px, -50px) scale(1.4); }
        }

        #community-hero-content {
            position: relative;
            z-index: 10;
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            gap: 3rem;
            max-width: 1300px;
            margin: 0 auto;
            width: 100%;
        }

        #community-hero-text {
            flex: 1 1 400px;
            color: white;
        }

        #community-hero-label {
            font-size: 0.9rem;
            letter-spacing: 4px;
            background: rgba(255,255,255,0.15);
            backdrop-filter: blur(10px);
            display: inline-block;
            padding: 0.5rem 1.5rem;
            border-radius: 60px;
            margin-bottom: 1.8rem;
            border: 1px solid rgba(255,255,255,0.3);
            color: white;
            font-weight: 500;
        }

        #community-hero-text h1 {
            font-size: clamp(3rem, 12vw, 5.2rem);
            font-weight: 700;
            margin-bottom: 1.3rem;
            color: white;
            text-shadow: 0 4px 30px rgba(0,0,0,0.3);
        }

        .community-hero-glow {
            background: linear-gradient(145deg, #ffffff, var(--primary-blue-light), var(--primary-blue));
            -webkit-background-clip: text;
            background-clip: text;
            -webkit-text-fill-color: transparent;
            text-shadow: 0 0 40px var(--primary-blue);
        }

        #community-hero-text p {
            color: rgba(255,255,255,0.95);
            font-size: 1.2rem;
            max-width: 600px;
        }

        #community-hero-visual {
            flex: 1 1 300px;
            display: flex;
            justify-content: center;
        }

        #community-hero-illustration {
            background: rgba(255,255,255,0.08);
            backdrop-filter: blur(12px);
            border-radius: 60px;
            padding: 2rem;
            border: 1px solid rgba(255,255,255,0.2);
            box-shadow: 0 30px 60px -20px rgba(0,0,0,0.5);
            width: 100%;
            max-width: 400px;
        }

        /* Animated Community Icon */
        .community-animated-icon {
            position: relative;
            width: 100%;
            aspect-ratio: 1/1;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .community-circle-base {
            width: 140px;
            height: 140px;
            background: linear-gradient(145deg, var(--primary-blue), var(--primary-warm));
            border-radius: 50%;
            animation: pulseBase 3s infinite;
            box-shadow: 0 0 40px var(--primary-blue);
        }

        .community-people {
            position: absolute;
            width: 100%;
            height: 100%;
        }

        .community-person {
            position: absolute;
            width: 40px;
            height: 40px;
            background: white;
            border-radius: 50% 50% 40% 40%;
            animation: personFloat 3s infinite alternate;
            box-shadow: 0 5px 15px rgba(0,0,0,0.2);
        }

        .person1 { top: 30%; left: 20%; animation-delay: 0s; }
        .person2 { top: 50%; right: 25%; animation-delay: 0.5s; }
        .person3 { bottom: 25%; left: 40%; animation-delay: 1s; }
        .person4 { top: 40%; right: 30%; animation-delay: 1.5s; }

        .community-connection {
            position: absolute;
            height: 2px;
            background: linear-gradient(90deg, transparent, white, transparent);
            animation: connectionPulse 3s infinite;
        }

        .conn1 { width: 80px; top: 40%; left: 25%; transform: rotate(45deg); }
        .conn2 { width: 80px; top: 45%; right: 25%; transform: rotate(-45deg); }
        .conn3 { width: 100px; bottom: 30%; left: 30%; transform: rotate(30deg); }

        .community-heart {
            position: absolute;
            font-size: 2rem;
            color: white;
            animation: heartFloat 2s infinite;
            filter: drop-shadow(0 0 10px var(--primary-warm));
        }

        .heart1 { top: 15%; right: 20%; animation-delay: 0s; }
        .heart2 { bottom: 15%; left: 15%; animation-delay: 1s; }

        .community-handshake {
            position: absolute;
            font-size: 2.5rem;
            color: white;
            animation: handshakeRotate 6s infinite;
            filter: drop-shadow(0 0 15px var(--accent-gold));
        }

        @keyframes pulseBase {
            0% { transform: scale(1); opacity: 0.8; }
            50% { transform: scale(1.1); opacity: 1; }
            100% { transform: scale(1); opacity: 0.8; }
        }

        @keyframes personFloat {
            0% { transform: translateY(0); }
            100% { transform: translateY(-10px); }
        }

        @keyframes connectionPulse {
            0% { opacity: 0.2; }
            50% { opacity: 0.8; }
            100% { opacity: 0.2; }
        }

        @keyframes heartFloat {
            0% { transform: translateY(0) scale(1); }
            50% { transform: translateY(-8px) scale(1.2); }
            100% { transform: translateY(0) scale(1); }
        }

        @keyframes handshakeRotate {
            0% { transform: rotate(0deg); }
            25% { transform: rotate(10deg); }
            75% { transform: rotate(-10deg); }
            100% { transform: rotate(0deg); }
        }

        /* ----- COMMUNITY COMMITMENT SECTION (with DEFAULT warm icons) ----- */
        #community-commitment-section {
            padding: 5rem 1.5rem;
            background: linear-gradient(135deg, white, var(--primary-blue-soft), var(--primary-warm-soft));
        }
        #community-commitment-container {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            gap: 4rem;
            max-width: 1300px;
            margin: 0 auto;
        }
        #community-commitment-content {
            flex: 1 1 400px;
        }
        #community-commitment-highlight {
            background: white;
            border-radius: 40px;
            padding: 2rem;
            border-left: 8px solid var(--primary-blue);
            box-shadow: 0 30px 40px -20px var(--primary-blue);
            margin-top: 2rem;
        }
        #community-commitment-visual {
            flex: 1 1 400px;
            display: flex;
            justify-content: center;
        }
        .community-icon-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 1.5rem;
            width: 100%;
            max-width: 400px;
        }
        .community-icon-item {
            background: white;
            border-radius: 30px;
            padding: 2rem 1.5rem;
            text-align: center;
            box-shadow: 0 20px 30px -15px var(--primary-warm);
            border: 1px solid rgba(226, 125, 96, 0.2);
            animation: iconFloat 3s infinite alternate;
        }
        .community-icon-item:nth-child(1) { animation-delay: 0s; }
        .community-icon-item:nth-child(2) { animation-delay: 0.5s; }
        .community-icon-item:nth-child(3) { animation-delay: 1s; }
        .community-icon-item:nth-child(4) { animation-delay: 1.5s; }
        .community-icon-item i {
            font-size: 3rem;
            color: var(--primary-warm); /* DEFAULT warm color */
            margin-bottom: 0.5rem;
        }
        .community-icon-item span {
            font-size: 1rem;
            font-weight: 500;
            color: var(--slate-dark);
        }
        @keyframes iconFloat {
            0% { transform: translateY(0); }
            100% { transform: translateY(-10px); }
        }

        /* ----- KEY POLICIES GRID (with blue blend) ----- */
        #policies-grid-section {
            padding: 5rem 1.5rem;
            background: white;
        }
        #policies-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 2rem;
            max-width: 1300px;
            margin: 2rem auto 0;
        }
        @media (max-width: 1000px) { #policies-grid { grid-template-columns: repeat(2, 1fr); } }
        @media (max-width: 600px) { #policies-grid { grid-template-columns: 1fr; } }
        .policy-card {
            background: white;
            border-radius: 40px;
            padding: 2.5rem 2rem;
            box-shadow: 0 30px 50px -25px var(--primary-blue);
            border: 1px solid rgba(8, 129, 209, 0.2);
            transition: 0.4s;
            position: relative;
            overflow: hidden;
        }
        .policy-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 6px;
            background: linear-gradient(90deg, var(--primary-blue), var(--primary-warm), var(--accent-teal));
        }
        .policy-card:hover {
            transform: translateY(-12px);
            box-shadow: 0 40px 70px -25px var(--primary-blue);
        }
        .policy-icon {
            width: 80px;
            height: 80px;
            background: var(--primary-blue-soft);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 0 1.5rem;
            font-size: 2.2rem;
            color: var(--primary-blue);
            transition: 0.3s;
        }
        .policy-card:hover .policy-icon {
            background: linear-gradient(145deg, var(--primary-blue), var(--primary-warm));
            color: white;
        }
        .policy-card h3 {
            font-size: 1.5rem;
            margin-bottom: 0.8rem;
            color: var(--slate-dark);
        }
        .policy-card p {
            color: var(--slate-medium);
            font-size: 0.95rem;
            margin-bottom: 1.5rem;
        }
        .policy-tag {
            display: inline-block;
            background: var(--primary-blue-soft);
            color: var(--primary-blue);
            padding: 0.3rem 1rem;
            border-radius: 40px;
            font-size: 0.8rem;
            font-weight: 600;
        }

        /* ----- OPPORTUNITIES SECTION (with blue counters) ----- */
      #opportunities-section {
    padding: 140px 8%;
    background: #0B4870;
    color: #ffffff;
}

.opportunities-grid {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: 80px;
    align-items: center;
}

/* LEFT SIDE */

.section-label {
    text-transform: uppercase;
    letter-spacing: 2px;
    font-size: 12px;
    color: #c6a85b;
    display: inline-block;
    margin-bottom: 20px;
}

.op-left h2 {
    font-size: 48px;
    font-weight: 600;
    margin-bottom: 25px;
    color: #007acc;
}

.lead-text {
    color: #9ca3af;
    line-height: 1.8;
    margin-bottom: 60px;
    max-width: 500px;
}

/* METRICS */

.op-metrics {
    display: flex;
    flex-direction: column;
    gap: 50px;
}

.metric-row {
    display: flex;
    align-items: center;
    gap: 25px;
}

.metric-line {
    width: 3px;
    height: 60px;
    background: linear-gradient(to bottom, #c6a85b, transparent);
}

.metric-content h3 {
    font-size: 42px;
    margin: 0;
    color: #ffffff;
}

.metric-content p {
    margin: 5px 0 0;
    color: #9ca3af;
    font-size: 14px;
}

/* RIGHT SIDE INFOGRAPHIC */

.infographic-panel {
    border: 1px solid rgba(255,255,255,0.08);
    padding: 50px;
    background: #003D66;
}

.timeline {
    position: relative;
    padding-left: 30px;
}

.timeline::before {
    content: "";
    position: absolute;
    left: 8px;
    top: 0;
    bottom: 0;
    width: 1px;
    background: rgba(255,255,255,0.15);
}

.timeline-item {
    position: relative;
    margin-bottom: 50px;
    opacity: 0;
    transform: translateY(20px);
    transition: 0.8s ease;
}

.timeline-item:last-child {
    margin-bottom: 0;
}

.timeline-item .dot {
    position: absolute;
    left: -30px;
    top: 5px;
    width: 12px;
    height: 12px;
    background: #c6a85b;
}

.timeline-item h4 {
    margin: 0 0 8px;
    font-weight: 500;
}

.timeline-item p {
    margin: 0;
    color: #9ca3af;
    font-size: 14px;
}

/* REVEAL ACTIVE */
.timeline-item.active {
    opacity: 1;
    transform: translateY(0);
}

/* RESPONSIVE */
@media(max-width: 992px){
    .opportunities-grid {
        grid-template-columns: 1fr;
    }
}

        /* ----- DISPUTE RESOLUTION SECTION (with blue accent) ----- */
        #dispute-section {
    padding: 100px 8%;
    background: linear-gradient(135deg, #f5f9ff, #ffffff);
}

.dispute-wrapper {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 60px;
    flex-wrap: wrap;
}

.dispute-content {
    flex: 1;
    max-width: 550px;
}

.section-badge {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 6px 14px;
    background: rgba(8, 129, 209, 0.1);
    color: #0881D1;
    border-radius: 50px;
    font-weight: 600;
    margin-bottom: 20px;
}

.badge-icon {
    width: 18px;
    height: 18px;
}

.dispute-content h2 {
    font-size: 42px;
    margin-bottom: 15px;
    color: #1a1a1a;
}

.dispute-content p {
    color: #666;
    margin-bottom: 40px;
    line-height: 1.7;
}

.dispute-features {
    display: flex;
    flex-direction: column;
    gap: 25px;
}

.feature-item {
    display: flex;
    gap: 20px;
    align-items: flex-start;
}

.feature-icon {
    width: 50px;
    height: 50px;
    border-radius: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
}

.feature-icon svg {
    width: 24px;
    height: 24px;
}

.blue { background: linear-gradient(135deg, #0881D1, #4DA3E6); }
.orange { background: linear-gradient(135deg, #E27D60, #f7a889); }
.green { background: linear-gradient(135deg, #2ecc71, #6dd5a3); }

.feature-text h4 {
    margin: 0 0 5px;
    font-size: 18px;
    color: #111;
}

.feature-text p {
    margin: 0;
    font-size: 14px;
    color: #666;
}

/* INFOGRAPHIC CARD */
.dispute-visual {
    flex: 1;
    display: flex;
    justify-content: center;
}

.infographic-card {
    background: rgba(255,255,255,0.8);
    backdrop-filter: blur(12px);
    padding: 40px;
    border-radius: 20px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.08);
    width: 100%;
    max-width: 400px;
}

.infographic-card h3 {
    margin-bottom: 30px;
    font-size: 20px;
}

.progress-step {
    margin-bottom: 25px;
}

.progress-step span {
    display: block;
    font-size: 14px;
    margin-bottom: 8px;
    font-weight: 500;
}

.progress-bar {
    height: 8px;
    background: #eee;
    border-radius: 10px;
    overflow: hidden;
}

.fill {
    height: 100%;
    border-radius: 10px;
}

.fill1 { width: 100%; background: #0881D1; }
.fill2 { width: 75%; background: #E27D60; }
.fill3 { width: 50%; background: #2ecc71; }

/* Responsive */
@media(max-width: 992px){
    .dispute-wrapper {
        flex-direction: column;
        text-align: center;
    }

    .feature-item {
        justify-content: center;
        text-align: left;
    }
}

        /* ----- MONITORING SECTION (with blue chart) ----- */
        
        /* ----- BOTTOM SPACING ----- */
        /* Removed body::after to eliminate bottom gap */

        /* Counter animation */
        .counter-animate {
            animation: countPop 0.5s ease;
        }
        @keyframes countPop {
            0% { transform: scale(1); }
            50% { transform: scale(1.2); color: var(--primary-blue); }
            100% { transform: scale(1); }
        }

/* =====================================================
   FINAL FIX: REMOVE ALL BOTTOM GAPS FROM ALL PAGES
   ===================================================== */
body::after {
    display: none !important;
    height: 0 !important;
    content: none !important;
}

.footer-portal {
    margin-bottom: 0 !important;
}

section:last-of-type {
    margin-bottom: 0;
}









/* SUSTAINABILITY */


@font-face {
            font-family: 'Soho Gothic Pro';
            src: local('Soho Gothic Pro'), local('SohoGothicPro-Regular'), 
                 url('https://fonts.cdnfonts.com/s/15961/SohoGothicPro-Regular.woff') format('woff');
            font-weight: 400;
            font-display: swap;
        }
        @font-face {
            font-family: 'Soho Gothic Pro';
            src: local('Soho Gothic Pro Bold'), local('SohoGothicPro-Bold'),
                 url('https://fonts.cdnfonts.com/s/15961/SohoGothicPro-Bold.woff') format('woff');
            font-weight: 700;
            font-display: swap;
        }
        @font-face {
            font-family: 'Soho Gothic Pro';
            src: local('Soho Gothic Pro Medium'), local('SohoGothicPro-Medium'),
                 url('https://fonts.cdnfonts.com/s/15961/SohoGothicPro-Medium.woff') format('woff');
            font-weight: 500;
            font-display: swap;
        }

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Soho Gothic Pro', 'Soho', 'Gotham', 'Montserrat', 'Space Grotesk', system-ui, sans-serif;
            background: #ffffff;
            color: #1a2e40;
            line-height: 1.5;
            overflow-x: hidden;
        }

        /* Premium Ocean-Inspired Color Palette */
        :root {
            --ocean-deep: #0A6E6E;
            --ocean-primary: #1ABC9A;
            --ocean-light: #9BF0DE;
            --ocean-soft: #E0F7F2;
            
            --coral-accent: #FF7F6B;
            --coral-light: #FFB6A3;
            --coral-soft: #FFF0ED;
            
            --sunset-gold: #F4D03F;
            --sunset-light: #F7DC6F;
            --sunset-soft: #FEF9E7;
            
            --slate-dark: #2C3E50;
            --slate-medium: #5D6D7E;
            --slate-light: #F8F9F9;
            
            --sand-beige: #F8F3E6;
        }

        h1, h2, h3 {
            font-weight: 600;
            line-height: 1.2;
            letter-spacing: -0.01em;
        }

        h2 {
            font-size: clamp(2rem, 5vw, 2.8rem);
            margin-bottom: 1.5rem;
            color: var(--slate-dark);
        }

        p {
            color: var(--slate-medium);
            font-size: 1.1rem;
            margin-bottom: 1rem;
        }

        /* scroll reveal */
        .reveal-sus {
            opacity: 0;
            transform: translateY(30px);
            transition: opacity 0.9s ease, transform 0.9s ease;
        }
        .reveal-sus.active {
            opacity: 1;
            transform: translateY(0);
        }

        .section-tag-sus {
            color: var(--ocean-primary);
            font-weight: 500;
            letter-spacing: 2px;
            font-size: 0.85rem;
            text-transform: uppercase;
            display: inline-block;
            background: rgba(26, 188, 156, 0.1);
            padding: 0.3rem 1.3rem;
            border-radius: 40px;
            margin-bottom: 1.2rem;
            backdrop-filter: blur(4px);
            border: 1px solid rgba(26, 188, 156, 0.3);
        }

        /* ----- SUSTAINABILITY HERO with background image ----- */
        #sus-hero-unique {
            position: relative;
            min-height: 100vh;
            display: flex;
            align-items: center;
            padding: 8rem 1.5rem 4rem 1.5rem;
            /* HERO BACKGROUND IMAGE - REPLACE WITH YOUR IMAGE URL */
            background-image: url('../assets/img/plastic-bottle.jpg');
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
            overflow: hidden;
            isolation: isolate;
        }

        #sus-hero-unique::before {
            content: '';
            position: absolute;
            inset: 0;
            background: linear-gradient(115deg, 
                rgba(10, 110, 110, 0.9) 0%,
                rgba(26, 188, 156, 0.7) 40%,
                rgba(255, 127, 107, 0.5) 80%);
            z-index: 1;
            pointer-events: none;
        }

        #sus-floating-shapes-unique {
            position: absolute;
            inset: 0;
            z-index: 2;
        }
        .sus-shape-unique {
            position: absolute;
            border-radius: 50%;
            filter: blur(70px);
            animation: susFloatUnique 20s infinite alternate;
        }
        #sus-shape1-unique { width: 500px; height: 500px; top: -200px; right: -150px; background: var(--ocean-deep); opacity: 0.4; }
        #sus-shape2-unique { width: 600px; height: 600px; bottom: -250px; left: -200px; background: var(--coral-accent); opacity: 0.3; animation-duration: 25s; }
        #sus-shape3-unique { width: 400px; height: 400px; top: 30%; left: 40%; background: var(--sunset-gold); opacity: 0.25; animation-duration: 18s; }
        @keyframes susFloatUnique {
            0% { transform: translate(0,0) scale(1); }
            100% { transform: translate(70px, -50px) scale(1.4); }
        }

        #sus-hero-content-unique {
            position: relative;
            z-index: 10;
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            gap: 3rem;
            max-width: 1300px;
            margin: 0 auto;
            width: 100%;
        }

        #sus-hero-text-unique {
            flex: 1 1 400px;
            color: white;
        }

        #sus-hero-label-unique {
            font-size: 0.9rem;
            letter-spacing: 4px;
            background: rgba(255,255,255,0.15);
            backdrop-filter: blur(10px);
            display: inline-block;
            padding: 0.5rem 1.5rem;
            border-radius: 60px;
            margin-bottom: 1.8rem;
            border: 1px solid rgba(255,255,255,0.3);
            color: white;
            font-weight: 500;
        }

        #sus-hero-text-unique h1 {
            font-size: clamp(3rem, 12vw, 5.2rem);
            font-weight: 700;
            margin-bottom: 1.3rem;
            color: white;
            text-shadow: 0 4px 30px rgba(0,0,0,0.3);
        }

        .sus-hero-glow-unique {
            background: linear-gradient(145deg, #ffffff, var(--ocean-light), var(--ocean-primary));
            -webkit-background-clip: text;
            background-clip: text;
            -webkit-text-fill-color: transparent;
            text-shadow: 0 0 40px var(--ocean-primary);
        }

        #sus-hero-text-unique p {
            color: rgba(255,255,255,0.95);
            font-size: 1.2rem;
            max-width: 600px;
        }

        #sus-hero-visual-unique {
            flex: 1 1 300px;
            display: flex;
            justify-content: center;
        }

        #sus-ocean-illustration-unique {
            background: rgba(255,255,255,0.08);
            backdrop-filter: blur(12px);
            border-radius: 60px;
            padding: 1.5rem; /* REDUCED from 2rem to 1.5rem */
            border: 1px solid rgba(255,255,255,0.2);
            box-shadow: 0 30px 60px -20px rgba(0,0,0,0.5);
            width: 100%;
            max-width: 350px; /* REDUCED from 400px to 350px */
            position: relative;
        }

        .sus-wave-animation-unique {
            animation: waveMoveUnique 4s infinite alternate;
        }
        @keyframes waveMoveUnique {
            0% { d: path('M0,150 Q50,130 100,150 T200,150 T300,150'); }
            100% { d: path('M0,150 Q50,170 100,150 T200,150 T300,150'); }
        }

        .sus-vision-icon-unique {
            position: relative;
            width: 100%;
            aspect-ratio: 1/1;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-top: 0.5rem; /* REDUCED from 1rem to 0.5rem */
        }

        .sus-globe-core-unique {
            width: 80px; /* REDUCED from 100px to 80px */
            height: 80px; /* REDUCED from 100px to 80px */
            background: linear-gradient(145deg, var(--ocean-primary), var(--coral-accent));
            border-radius: 50%;
            animation: globePulseUnique 3s infinite;
            box-shadow: 0 0 40px var(--ocean-primary);
        }

        .sus-globe-ring-unique {
            position: absolute;
            width: 110px; /* REDUCED from 140px to 110px */
            height: 110px; /* REDUCED from 140px to 110px */
            border: 2px dashed var(--ocean-light);
            border-radius: 50%;
            animation: ringRotateUnique 15s linear infinite;
        }
        .sus-globe-ring-unique:nth-child(3) { 
            width: 140px; /* REDUCED from 180px to 140px */
            height: 140px; /* REDUCED from 180px to 140px */
            animation-direction: reverse; 
        }

        .sus-leaf-icon-unique {
            position: absolute;
            font-size: 1.5rem; /* REDUCED from 2rem to 1.5rem */
            animation: leafFloatUnique 4s infinite alternate;
        }
        .sus-leaf1-unique { top: 15%; right: 15%; animation-delay: 0s; color: var(--ocean-primary); }
        .sus-leaf2-unique { bottom: 15%; left: 15%; animation-delay: 1s; color: var(--coral-accent); }
        .sus-leaf3-unique { top: 25%; left: 25%; animation-delay: 2s; color: var(--sunset-gold); }

        .sus-droplet-unique {
            position: absolute;
            width: 8px; /* REDUCED from 10px to 8px */
            height: 12px; /* REDUCED from 15px to 12px */
            background: var(--ocean-light);
            border-radius: 50% 50% 50% 0;
            transform: rotate(-45deg);
            animation: dropletFallUnique 4s infinite;
        }
        .sus-droplet1-unique { top: 35%; left: 20%; animation-delay: 0s; }
        .sus-droplet2-unique { top: 55%; right: 25%; animation-delay: 2s; }

        @keyframes globePulseUnique {
            0% { transform: scale(1); opacity: 0.8; }
            50% { transform: scale(1.1); opacity: 1; }
            100% { transform: scale(1); opacity: 0.8; }
        }
        @keyframes ringRotateUnique {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }
        @keyframes leafFloatUnique {
            0% { transform: translateY(0) rotate(0deg); }
            100% { transform: translateY(-8px) rotate(8deg); }
        }
        @keyframes dropletFallUnique {
            0% { transform: translateY(0) rotate(-45deg); opacity: 1; }
            100% { transform: translateY(40px) rotate(-45deg); opacity: 0; }
        }

        /* ----- STATS SECTION (infographic cards) ----- */
        #sus-stats-section-unique {
            padding: 5rem 1.5rem;
            background: linear-gradient(135deg, white, var(--ocean-soft));
        }
        #sus-stats-grid-unique {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 2rem;
            max-width: 1000px;
            margin: 0 auto;
        }
        @media (max-width: 700px) { #sus-stats-grid-unique { grid-template-columns: repeat(2, 1fr); } }
        @media (max-width: 450px) { #sus-stats-grid-unique { grid-template-columns: 1fr; } }
        .sus-stat-card-unique {
            background: white;
            border-radius: 40px;
            padding: 2.5rem 1.5rem;
            text-align: center;
            box-shadow: 0 30px 50px -25px var(--ocean-primary);
            border: 1px solid rgba(26, 188, 156, 0.2);
            transition: 0.4s;
        }
        .sus-stat-card-unique:hover {
            transform: translateY(-10px);
            box-shadow: 0 40px 70px -25px var(--ocean-primary);
        }
        .sus-stat-icon-unique {
            font-size: 3rem;
            color: var(--ocean-primary);
            margin-bottom: 1rem;
        }
        .sus-stat-number-unique {
            font-size: 3.5rem;
            font-weight: 700;
            color: var(--slate-dark);
            line-height: 1;
            margin-bottom: 0.3rem;
        }
        .sus-stat-label-unique {
            color: var(--slate-medium);
            font-size: 1rem;
            text-transform: uppercase;
            letter-spacing: 1px;
        }

        /* ----- CHALLENGE SECTION (new icon) ----- */
        #sus-challenge-section-unique {
            padding: 5rem 1.5rem;
            background: white;
        }
        #sus-challenge-container-unique {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            gap: 4rem;
            max-width: 1300px;
            margin: 0 auto;
        }
        #sus-challenge-content-unique {
            flex: 1 1 400px;
        }
        #sus-challenge-highlight-unique {
            background: var(--ocean-soft);
            border-radius: 40px;
            padding: 2rem;
            border-left: 8px solid var(--coral-accent);
            margin-top: 2rem;
        }
        #sus-challenge-visual-unique {
            flex: 1 1 400px;
            display: flex;
            justify-content: center;
        }
        #sus-plastic-illustration-unique {
            background: var(--ocean-soft);
            border-radius: 60px;
            padding: 2rem;
            width: 100%;
            max-width: 400px;
            position: relative;
        }
        .sus-challenge-icon-unique {
            position: relative;
            width: 100%;
            aspect-ratio: 1/1;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .sus-recycle-symbol-unique {
            font-size: 5rem;
            color: var(--ocean-primary);
            animation: recycleSpinUnique 6s linear infinite;
        }
        .sus-warning-triangle-unique {
            position: absolute;
            font-size: 3rem;
            color: var(--coral-accent);
            top: 20%;
            right: 20%;
            animation: warningPulseUnique 2s infinite;
        }
        .sus-plastic-bottle-unique {
            position: absolute;
            width: 30px;
            height: 50px;
            background: linear-gradient(145deg, var(--coral-accent), var(--coral-light));
            border-radius: 5px 5px 15px 15px;
            animation: bottleFloatUnique 3s infinite alternate;
        }
        .sus-plastic-bottle-unique:nth-child(3) { top: 30%; left: 20%; animation-delay: 0s; }
        .sus-plastic-bottle-unique:nth-child(4) { bottom: 30%; right: 25%; animation-delay: 1s; }
        .sus-plastic-bottle-unique:nth-child(5) { top: 50%; left: 40%; animation-delay: 1.5s; }
        @keyframes recycleSpinUnique {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }
        @keyframes warningPulseUnique {
            0% { transform: scale(1); opacity: 0.8; }
            50% { transform: scale(1.2); opacity: 1; }
            100% { transform: scale(1); opacity: 0.8; }
        }
        @keyframes bottleFloatUnique {
            0% { transform: translateY(0); }
            100% { transform: translateY(-10px); }
        }

        /* ----- VISION SECTION (new icon) ----- */
        #sus-vision-section-unique {
            padding: 5rem 1.5rem;
            background: linear-gradient(145deg, var(--slate-light), white);
        }
        #sus-vision-container-unique {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            gap: 4rem;
            max-width: 1300px;
            margin: 0 auto;
        }
        #sus-vision-visual-unique {
            flex: 1 1 400px;
            display: flex;
            justify-content: center;
        }
        #sus-vision-illustration-unique {
            background: var(--ocean-soft);
            border-radius: 60px;
            padding: 2rem;
            width: 100%;
            max-width: 400px;
        }
        .sus-vision-icon-new-unique {
            position: relative;
            width: 100%;
            aspect-ratio: 1/1;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .sus-mountain-icon-unique {
            font-size: 5rem;
            color: var(--ocean-primary);
            animation: mountainFloatUnique 4s infinite alternate;
        }
        .sus-sun-icon-unique {
            position: absolute;
            font-size: 3rem;
            color: var(--sunset-gold);
            top: 10%;
            right: 20%;
            animation: sunPulseUnique 3s infinite;
        }
        .sus-tree-icon-unique {
            position: absolute;
            font-size: 2.5rem;
            color: var(--ocean-deep);
            bottom: 20%;
            left: 20%;
            animation: treeFloatUnique 3s infinite alternate;
        }
        .sus-tree-icon-unique:nth-child(4) { bottom: 15%; right: 20%; left: auto; animation-delay: 0.5s; }
        @keyframes mountainFloatUnique {
            0% { transform: translateY(0); }
            100% { transform: translateY(-10px); }
        }
        @keyframes sunPulseUnique {
            0% { transform: scale(1); }
            50% { transform: scale(1.2); }
            100% { transform: scale(1); }
        }
        @keyframes treeFloatUnique {
            0% { transform: translateY(0); }
            100% { transform: translateY(-8px); }
        }
        #sus-vision-content-unique {
            flex: 1 1 400px;
        }

        /* ----- PILLARS SECTION ----- */
        #sus-pillars-section-unique {
            padding: 5rem 1.5rem;
            background: white;
        }
        #sus-pillars-header-unique {
            text-align: center;
            margin-bottom: 3rem;
        }
        #sus-pillars-grid-unique {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 2.5rem;
            max-width: 1200px;
            margin: 0 auto;
        }
        @media (max-width: 900px) { #sus-pillars-grid-unique { grid-template-columns: repeat(2, 1fr); } }
        @media (max-width: 600px) { #sus-pillars-grid-unique { grid-template-columns: 1fr; } }
        .sus-pillar-card-unique {
            background: white;
            border-radius: 40px;
            padding: 3rem 2rem;
            text-align: center;
            box-shadow: 0 30px 50px -25px var(--ocean-primary);
            border: 1px solid rgba(26, 188, 156, 0.2);
            transition: 0.4s;
            position: relative;
            overflow: hidden;
        }
        .sus-pillar-card-unique::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 6px;
            background: linear-gradient(90deg, var(--ocean-primary), var(--coral-accent), var(--sunset-gold));
        }
        .sus-pillar-card-unique:hover {
            transform: translateY(-12px);
            box-shadow: 0 40px 70px -25px var(--ocean-primary);
        }
        .sus-pillar-icon-unique {
            width: 100px;
            height: 100px;
            background: var(--ocean-soft);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto 1.5rem;
            font-size: 3rem;
            color: var(--ocean-primary);
            transition: 0.3s;
        }
        .sus-pillar-card-unique:hover .sus-pillar-icon-unique {
            background: linear-gradient(145deg, var(--ocean-primary), var(--coral-accent));
            color: white;
        }
        .sus-pillar-card-unique h3 {
            font-size: 1.8rem;
            margin-bottom: 1rem;
            color: var(--slate-dark);
        }
        .sus-pillar-card-unique p {
            color: var(--slate-medium);
        }

        /* ----- JOURNEY SECTION (new icon) ----- */
        #sus-journey-section-unique {
            padding: 5rem 1.5rem;
            background: var(--slate-light);
        }
        #sus-journey-container-unique {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            gap: 4rem;
            max-width: 1300px;
            margin: 0 auto;
        }
        #sus-journey-content-unique {
            flex: 1 1 400px;
        }
        #sus-journey-features-unique {
            list-style: none;
            margin-top: 2rem;
        }
        #sus-journey-features-unique li {
            margin: 1rem 0;
            font-size: 1.1rem;
            display: flex;
            align-items: center;
        }
        #sus-journey-features-unique i {
            color: var(--ocean-primary);
            margin-right: 15px;
            font-size: 1.3rem;
        }
        #sus-journey-visual-unique {
            flex: 1 1 400px;
            display: flex;
            justify-content: center;
        }
        #sus-journey-illustration-unique {
            background: var(--ocean-soft);
            border-radius: 60px;
            padding: 2rem;
            width: 100%;
            max-width: 400px;
        }
        .sus-journey-icon-unique {
            position: relative;
            width: 100%;
            aspect-ratio: 1/1;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .sus-compass-icon-unique {
            font-size: 5rem;
            color: var(--ocean-primary);
            animation: compassSpinUnique 8s linear infinite;
        }
        .sus-path-marker-journey-unique {
            position: absolute;
            width: 15px;
            height: 15px;
            background: var(--coral-accent);
            border-radius: 50%;
            animation: markerJourneyUnique 3s infinite;
        }
        .sus-marker1-unique { top: 20%; left: 30%; animation-delay: 0s; }
        .sus-marker2-unique { top: 50%; right: 25%; animation-delay: 0.5s; }
        .sus-marker3-unique { bottom: 25%; left: 40%; animation-delay: 1s; }
        .sus-marker4-unique { top: 40%; right: 30%; animation-delay: 1.5s; }
        .sus-arrow-path-unique {
            position: absolute;
            font-size: 2rem;
            color: var(--sunset-gold);
            animation: arrowBounceUnique 2s infinite;
        }
        .sus-arrow1-unique { top: 30%; left: 20%; }
        .sus-arrow2-unique { bottom: 30%; right: 20%; }
        @keyframes compassSpinUnique {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }
        @keyframes markerJourneyUnique {
            0% { transform: scale(1); opacity: 0.6; }
            50% { transform: scale(1.5); opacity: 1; }
            100% { transform: scale(1); opacity: 0.6; }
        }
        @keyframes arrowBounceUnique {
            0% { transform: translateX(0); }
            50% { transform: translateX(10px); }
            100% { transform: translateX(0); }
        }

        /* ----- CULTURE SECTION (new icon) ----- */
        #sus-culture-section-unique {
            padding: 5rem 1.5rem;
            background: white;
        }
        #sus-culture-container-unique {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            gap: 4rem;
            max-width: 1300px;
            margin: 0 auto;
        }
        #sus-culture-visual-unique {
            flex: 1 1 400px;
            display: flex;
            justify-content: center;
        }
        #sus-culture-illustration-unique {
            background: var(--ocean-soft);
            border-radius: 60px;
            padding: 2rem;
            width: 100%;
            max-width: 400px;
        }
        .sus-culture-icon-unique {
            position: relative;
            width: 100%;
            aspect-ratio: 1/1;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .sus-hands-icon-unique {
            font-size: 5rem;
            color: var(--ocean-primary);
            animation: handsFloatUnique 4s infinite alternate;
        }
        .sus-people-circles-unique {
            position: absolute;
            width: 100%;
            height: 100%;
        }
        .sus-person-circle-unique {
            position: absolute;
            width: 40px;
            height: 40px;
            background: var(--coral-accent);
            border-radius: 50%;
            animation: personPulseUnique 3s infinite;
        }
        .sus-person1-unique { top: 20%; left: 20%; animation-delay: 0s; }
        .sus-person2-unique { top: 60%; right: 20%; animation-delay: 0.5s; }
        .sus-person3-unique { bottom: 20%; left: 40%; animation-delay: 1s; }
        .sus-person4-unique { top: 40%; right: 30%; animation-delay: 1.5s; }
        .sus-connection-line-unique {
            position: absolute;
            height: 2px;
            background: linear-gradient(90deg, transparent, var(--ocean-light), transparent);
            animation: linePulseUnique 3s infinite;
        }
        .sus-line1-unique { width: 80px; top: 30%; left: 25%; transform: rotate(45deg); }
        .sus-line2-unique { width: 80px; top: 50%; right: 25%; transform: rotate(-45deg); }
        .sus-line3-unique { width: 100px; bottom: 25%; left: 30%; transform: rotate(30deg); }
        @keyframes handsFloatUnique {
            0% { transform: translateY(0); }
            100% { transform: translateY(-10px); }
        }
        @keyframes personPulseUnique {
            0% { transform: scale(1); opacity: 0.7; }
            50% { transform: scale(1.2); opacity: 1; }
            100% { transform: scale(1); opacity: 0.7; }
        }
        @keyframes linePulseUnique {
            0% { opacity: 0.2; }
            50% { opacity: 0.8; }
            100% { opacity: 0.2; }
        }
        #sus-culture-content-unique {
            flex: 1 1 400px;
        }

        /* ----- CTA SECTION ----- */
        #sus-cta-section-unique {
            padding: 5rem 1.5rem;
            background: linear-gradient(145deg, var(--ocean-deep), var(--ocean-primary));
            color: white;
            text-align: center;
        }
        #sus-cta-container-unique {
            max-width: 700px;
            margin: 0 auto;
        }
        #sus-cta-container-unique h2 {
            color: white;
        }
        #sus-cta-container-unique p {
            color: rgba(255,255,255,0.9);
            font-size: 1.2rem;
            margin-bottom: 2rem;
        }
        #sus-btn-cta-unique {
            display: inline-block;
            background: white;
            color: var(--ocean-deep);
            padding: 1rem 2.5rem;
            border-radius: 60px;
            text-decoration: none;
            font-weight: 600;
            font-size: 1.1rem;
            transition: all 0.3s;
            border: 2px solid transparent;
        }
        #sus-btn-cta-unique:hover {
            background: transparent;
            color: white;
            border-color: white;
            transform: translateY(-5px);
            box-shadow: 0 20px 30px -10px rgba(0,0,0,0.3);
        }

        /* ----- BOTTOM SPACING ----- */
        body::after {
            content: '';
            display: block;
            height: 4rem;
            background: transparent;
        }

        /* Counter animation */
        .counter-animate-unique {
            animation: countPopUnique 0.5s ease;
        }
        @keyframes countPopUnique {
            0% { transform: scale(1); }
            50% { transform: scale(1.2); color: var(--ocean-primary); }
            100% { transform: scale(1); }
        }





        /*cta */

       /* CTA SECTION */

#sus-cta-section-unique{
position:relative;
padding:120px 8%;
background:linear-gradient(135deg,#0b2c5f,#0f4c81,#0b2c5f);
overflow:hidden;
display:flex;
justify-content:center;
align-items:center;
text-align:center;
color:white;
}


/* soft lighting glow */

#sus-cta-light-unique{
position:absolute;
width:600px;
height:600px;
background:radial-gradient(circle,#3aa0ff40,transparent 70%);
top:-200px;
right:-150px;
filter:blur(120px);
}


/* premium card */

#sus-cta-container-unique{
max-width:720px;
padding:70px 60px;
border-radius:24px;
background:rgba(255,255,255,0.08);
backdrop-filter:blur(14px);
border:1px solid rgba(255,255,255,0.2);
box-shadow:0 20px 60px rgba(0,0,0,0.35);
position:relative;
z-index:2;
}


/* title */

#sus-cta-container-unique h2{
font-size:42px;
font-weight:700;
margin-bottom:20px;
background:linear-gradient(90deg,#7dd3fc,#3b82f6);
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
}


/* paragraph */

#sus-cta-container-unique p{
font-size:18px;
opacity:.9;
line-height:1.6;
margin-bottom:35px;
}


/* CTA BUTTON */

#sus-btn-cta-unique{
display:inline-flex;
align-items:center;
gap:10px;
padding:16px 36px;
border-radius:40px;
background:linear-gradient(90deg,#3b82f6,#2563eb);
color:white;
font-weight:600;
text-decoration:none;
box-shadow:0 12px 35px rgba(59,130,246,0.45);
transition:all .35s ease;
}

#sus-btn-cta-unique i{
transition:transform .3s ease;
}


/* hover effect */

#sus-btn-cta-unique:hover{
transform:translateY(-4px);
box-shadow:0 18px 45px rgba(59,130,246,0.6);
}

#sus-btn-cta-unique:hover i{
transform:translateX(6px);
}


/* MOBILE */

@media(max-width:768px){

#sus-cta-section-unique{
padding:80px 20px;
}

#sus-cta-container-unique{
padding:45px 30px;
}

#sus-cta-container-unique h2{
font-size:30px;
}

#sus-cta-container-unique p{
font-size:16px;
}

}









/* SECTION BACKGROUND */

.culture-section-premium{
padding:120px 20px;
background:linear-gradient(135deg,#f6fbff,#eef6fb);
font-family:"Soho Gothic Pro",sans-serif;
}

/* CONTAINER */

.culture-container-premium{
max-width:1200px;
margin:auto;
display:grid;
grid-template-columns:1fr 1.2fr;
gap:80px;
align-items:center;
}

/* ICON SIDE */

.culture-visual-premium{
display:flex;
justify-content:center;
}

.culture-icon-wrapper{
width:220px;
height:220px;
background:rgba(255,255,255,0.6);
backdrop-filter:blur(10px);
border-radius:30px;
display:flex;
align-items:center;
justify-content:center;
box-shadow:0 20px 60px rgba(0,0,0,0.08);
animation:floatIcon 6s ease-in-out infinite;
}

/* SVG */

.culture-icon-svg{
width:140px;
height:140px;
}

.person{
fill:#0881D1;
animation:popPerson 4s infinite;
}

.connection{
stroke:#0881D1;
stroke-width:2;
opacity:.5;
}

.pulse-circle{
fill:none;
stroke:#0881D1;
stroke-width:2;
opacity:.2;
animation:pulseCircle 3s infinite;
}

/* TEXT */

.culture-content-premium h2{
font-size:42px;
margin-bottom:18px;
color:#111;
}

.culture-content-premium p{
font-size:18px;
line-height:1.8;
color:#555;
max-width:600px;
}

/* ANIMATIONS */

@keyframes floatIcon{
0%{transform:translateY(0px)}
50%{transform:translateY(-12px)}
100%{transform:translateY(0px)}
}

@keyframes pulseCircle{
0%{transform:scale(.9);opacity:.2}
50%{transform:scale(1.1);opacity:.35}
100%{transform:scale(.9);opacity:.2}
}

@keyframes popPerson{
0%,100%{transform:scale(1)}
50%{transform:scale(1.15)}
}

/* RESPONSIVE */

@media(max-width:900px){

.culture-container-premium{
grid-template-columns:1fr;
text-align:center;
gap:40px;
}

.culture-content-premium h2{
font-size:34px;
}

.culture-content-premium p{
margin:auto;
}

}



/* contact us page */

@font-face {
            font-family: 'Soho Gothic Pro';
            src: local('Soho Gothic Pro'), local('SohoGothicPro-Regular'), 
                 url('https://fonts.cdnfonts.com/s/15961/SohoGothicPro-Regular.woff') format('woff');
            font-weight: 400;
            font-display: swap;
        }
        @font-face {
            font-family: 'Soho Gothic Pro';
            src: local('Soho Gothic Pro Bold'), local('SohoGothicPro-Bold'),
                 url('https://fonts.cdnfonts.com/s/15961/SohoGothicPro-Bold.woff') format('woff');
            font-weight: 700;
            font-display: swap;
        }
        @font-face {
            font-family: 'Soho Gothic Pro';
            src: local('Soho Gothic Pro Medium'), local('SohoGothicPro-Medium'),
                 url('https://fonts.cdnfonts.com/s/15961/SohoGothicPro-Medium.woff') format('woff');
            font-weight: 500;
            font-display: swap;
        }

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Soho Gothic Pro', 'Soho', 'Gotham', 'Montserrat', 'Space Grotesk', system-ui, sans-serif;
            background: #ffffff;
            color: #1a2e40;
            line-height: 1.5;
            overflow-x: hidden;
        }

        /* Premium Color Palette */
        :root {
            --teal-deep: #0A6E6E;
            --teal-primary: #1ABC9A;
            --teal-light: #9BF0DE;
            --teal-soft: #E0F7F2;
            
            --coral-accent: #FF7F6B;
            --coral-light: #FFB6A3;
            --coral-soft: #FFF0ED;
            
            --slate-dark: #1E293B;
            --slate-medium: #475569;
            --slate-light: #F8FAFC;
            
            --sunset-gold: #F4D03F;
            --sunset-soft: #FEF9E7;
        }

        h1, h2, h3 {
            font-weight: 600;
            line-height: 1.2;
            letter-spacing: -0.01em;
        }

        h2 {
            font-size: clamp(2rem, 5vw, 2.8rem);
            margin-bottom: 1.5rem;
            color: var(--slate-dark);
        }

        p {
            color: var(--slate-medium);
            font-size: 1.1rem;
            margin-bottom: 1rem;
        }

        /* scroll reveal */
        .reveal-contact {
            opacity: 0;
            transform: translateY(30px);
            transition: opacity 0.9s ease, transform 0.9s ease;
        }
        .reveal-contact.active {
            opacity: 1;
            transform: translateY(0);
        }

        .section-tag-contact {
            color: var(--teal-primary);
            font-weight: 500;
            letter-spacing: 2px;
            font-size: 0.85rem;
            text-transform: uppercase;
            display: inline-block;
            background: rgba(26, 188, 156, 0.1);
            padding: 0.3rem 1.3rem;
            border-radius: 40px;
            margin-bottom: 1.2rem;
            backdrop-filter: blur(4px);
            border: 1px solid rgba(26, 188, 156, 0.3);
        }

        /* ----- CONTACT HERO (with animated background) ----- */
        #contact-hero-unique {
            position: relative;
            min-height: 70vh;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 10rem 1.5rem 4rem 1.5rem;
            background-image: 
        linear-gradient(
            135deg,
            rgba(0, 120, 130, 0.75),
            rgba(0, 160, 170, 0.65),
            rgba(255, 120, 90, 0.65)
        ),
        url('../assets/img/climatechange.jpg');
            overflow: hidden;
            isolation: isolate;
            text-align: center;

             background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    overflow: hidden;
    isolation: isolate;
        }






    #sus-hero-unique {
            position: relative;
            min-height: 100vh;
            display: flex;
            align-items: center;
            padding: 8rem 1.5rem 4rem 1.5rem;
            /* HERO BACKGROUND IMAGE - REPLACE WITH YOUR IMAGE URL */
            background-image: url('../assets/img/plastic-bottle.jpg');
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
            overflow: hidden;
            isolation: isolate;
        }





        #contact-floating-shapes-unique {
            position: absolute;
            inset: 0;
            z-index: 1;
        }
        .contact-shape-unique {
            position: absolute;
            border-radius: 50%;
            filter: blur(80px);
            animation: shapeFloatContact 20s infinite alternate;
        }
        #contact-shape1-unique { width: 500px; height: 500px; top: -200px; right: -150px; background: var(--teal-light); opacity: 0.4; }
        #contact-shape2-unique { width: 600px; height: 600px; bottom: -250px; left: -200px; background: var(--coral-accent); opacity: 0.3; animation-duration: 25s; }
        #contact-shape3-unique { width: 400px; height: 400px; top: 30%; left: 40%; background: var(--sunset-gold); opacity: 0.25; animation-duration: 18s; }
        @keyframes shapeFloatContact {
            0% { transform: translate(0,0) scale(1); }
            100% { transform: translate(70px, -50px) scale(1.4); }
        }

        #contact-hero-content-unique {
            position: relative;
            z-index: 10;
            max-width: 900px;
            margin: 0 auto;
            color: white;
        }

        #contact-hero-label-unique {
            font-size: 0.9rem;
            letter-spacing: 4px;
            background: rgba(255,255,255,0.15);
            backdrop-filter: blur(10px);
            display: inline-block;
            padding: 0.5rem 1.5rem;
            border-radius: 60px;
            margin-bottom: 1.8rem;
            border: 1px solid rgba(255,255,255,0.3);
            color: white;
            font-weight: 500;
            animation: glowPulseContact 3s infinite;
        }
        @keyframes glowPulseContact {
            0% { box-shadow: 0 0 0 0 rgba(255,255,255,0.3); }
            50% { box-shadow: 0 0 30px 10px rgba(255,255,255,0.2); }
            100% { box-shadow: 0 0 0 0 rgba(255,255,255,0.3); }
        }

        #contact-hero-content-unique h1 {
            font-size: clamp(3.5rem, 12vw, 6rem);
            font-weight: 700;
            margin-bottom: 1.5rem;
            color: white;
            text-shadow: 0 4px 30px rgba(0,0,0,0.2);
        }

        .contact-hero-glow-unique {
            background: linear-gradient(145deg, #ffffff, var(--teal-light), var(--sunset-gold));
            -webkit-background-clip: text;
            background-clip: text;
            -webkit-text-fill-color: transparent;
            text-shadow: 0 0 40px rgba(255,255,255,0.5);
        }

        #contact-hero-content-unique p {
            color: rgba(255,255,255,0.95);
            font-size: 1.3rem;
            max-width: 700px;
            margin: 0 auto;
        }

        /* ----- CONTACT MAIN SECTION (info + form) ----- */
        #contact-main-unique {
            padding: 5rem 1.5rem;
            background: linear-gradient(135deg, white, var(--teal-soft));
        }
        #contact-container-unique {
            display: flex;
            flex-wrap: wrap;
            gap: 3rem;
            max-width: 1300px;
            margin: 0 auto;
        }

        /* Left Side - Contact Info */
        #contact-info-unique {
            flex: 1 1 400px;
        }
        .contact-info-card-unique {
            background: white;
            border-radius: 40px;
            padding: 2rem;
            margin-bottom: 2rem;
            box-shadow: 0 30px 40px -25px var(--teal-primary);
            border: 1px solid rgba(26, 188, 156, 0.2);
            transition: all 0.4s;
            position: relative;
            overflow: hidden;
        }
        .contact-info-card-unique::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 4px;
            background: linear-gradient(90deg, var(--teal-primary), var(--coral-accent), var(--sunset-gold));
        }
        .contact-info-card-unique:hover {
            transform: translateY(-8px) scale(1.02);
            box-shadow: 0 40px 60px -20px var(--teal-primary);
            border-color: var(--teal-primary);
        }
        .contact-info-header-unique {
            display: flex;
            align-items: center;
            gap: 1rem;
            margin-bottom: 1.5rem;
        }
        .contact-info-icon-unique {
            width: 60px;
            height: 60px;
            background: var(--teal-soft);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.8rem;
            color: var(--teal-primary);
            transition: 0.3s;
        }
        .contact-info-card-unique:hover .contact-info-icon-unique {
            background: linear-gradient(145deg, var(--teal-primary), var(--coral-accent));
            color: white;
        }
        .contact-info-header-unique h3 {
            font-size: 1.8rem;
            color: var(--slate-dark);
        }
        .contact-info-details-unique p {
            display: flex;
            align-items: center;
            gap: 1rem;
            margin: 1rem 0;
            color: var(--slate-medium);
        }
        .contact-info-details-unique i {
            color: var(--teal-primary);
            width: 24px;
        }
        .contact-info-details-unique a {
            color: var(--slate-medium);
            text-decoration: none;
            transition: color 0.3s;
        }
        .contact-info-details-unique a:hover {
            color: var(--teal-primary);
        }

        /* Connect Section */
        #contact-connect-unique {
            background: white;
            border-radius: 40px;
            padding: 2rem;
            box-shadow: 0 30px 40px -25px var(--coral-accent);
            border: 1px solid rgba(255, 127, 107, 0.2);
        }
        #contact-connect-unique h3 {
            font-size: 1.8rem;
            margin-bottom: 1.5rem;
            color: var(--slate-dark);
        }
        #contact-social-grid-unique {
            display: flex;
            gap: 1rem;
            flex-wrap: wrap;
        }
        .contact-social-icon-unique {
            width: 60px;
            height: 60px;
            background: var(--coral-soft);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.8rem;
            color: var(--coral-accent);
            transition: all 0.3s;
            text-decoration: none;
        }
        .contact-social-icon-unique:hover {
            background: linear-gradient(145deg, var(--coral-accent), var(--teal-primary));
            color: white;
            transform: translateY(-5px) scale(1.1);
            box-shadow: 0 15px 25px -10px var(--coral-accent);
        }

        /* Right Side - Contact Form */
        #contact-form-unique {
            flex: 1 1 500px;
            background: white;
            border-radius: 60px 20px 60px 20px;
            padding: 3rem;
            box-shadow: 0 50px 80px -30px var(--teal-deep);
            border: 2px solid var(--teal-primary);
        }
        #contact-form-unique h2 {
            margin-bottom: 2rem;
            color: var(--slate-dark);
        }
        .contact-form-group-unique {
            position: relative;
            margin-bottom: 2rem;
        }
        .contact-form-group-unique input,
        .contact-form-group-unique textarea {
            width: 100%;
            padding: 1.2rem 1.5rem;
            border: 2px solid var(--teal-soft);
            border-radius: 30px;
            font-family: inherit;
            font-size: 1rem;
            transition: all 0.3s;
            background: transparent;
        }
        .contact-form-group-unique textarea {
            min-height: 150px;
            resize: vertical;
        }
        .contact-form-group-unique label {
            position: absolute;
            left: 1.5rem;
            top: 1.2rem;
            color: var(--slate-medium);
            transition: all 0.3s;
            pointer-events: none;
            background: white;
            padding: 0 0.5rem;
        }
        .contact-form-group-unique input:focus,
        .contact-form-group-unique textarea:focus {
            outline: none;
            border-color: var(--teal-primary);
            box-shadow: 0 0 0 4px rgba(26, 188, 156, 0.1);
        }
        .contact-form-group-unique input:focus ~ label,
        .contact-form-group-unique textarea:focus ~ label,
        .contact-form-group-unique input:not(:placeholder-shown) ~ label,
        .contact-form-group-unique textarea:not(:placeholder-shown) ~ label {
            top: -0.5rem;
            left: 1rem;
            font-size: 0.85rem;
            color: var(--teal-primary);
        }
        .contact-form-group-unique input::placeholder,
        .contact-form-group-unique textarea::placeholder {
            color: transparent;
        }

        #contact-submit-btn-unique {
            background: linear-gradient(145deg, var(--teal-primary), var(--coral-accent));
            color: white;
            border: none;
            padding: 1.2rem 2.5rem;
            border-radius: 60px;
            font-size: 1.2rem;
            font-weight: 600;
            cursor: pointer;
            display: inline-flex;
            align-items: center;
            gap: 0.8rem;
            transition: all 0.3s;
            width: 100%;
            justify-content: center;
        }
        #contact-submit-btn-unique:hover {
            transform: translateY(-5px);
            box-shadow: 0 20px 30px -10px var(--teal-deep);
        }
        #contact-submit-btn-unique i {
            transition: transform 0.3s;
        }
        #contact-submit-btn-unique:hover i {
            transform: translateX(8px);
        }

        /* ----- MAP SECTION ----- */
        #contact-map-unique {
            padding: 5rem 1.5rem;
            background: linear-gradient(135deg, var(--slate-light), white);
        }
        #contact-map-container-unique {
            max-width: 1300px;
            margin: 0 auto;
        }
        #contact-map-header-unique {
            text-align: center;
            margin-bottom: 3rem;
        }
        #contact-map-wrapper-unique {
            position: relative;
            border-radius: 60px 20px 60px 20px;
            overflow: hidden;
            box-shadow: 0 50px 80px -30px var(--teal-deep);
            border: 3px solid var(--teal-primary);
        }
        #contact-map-wrapper-unique iframe {
            display: block;
            width: 100%;
            height: 450px;
            border: none;
        }
        #contact-map-overlay-unique {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            pointer-events: none;
            background: linear-gradient(135deg, rgba(10,110,110,0.1), rgba(255,127,107,0.1));
        }
        #contact-map-marker-unique {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            font-size: 3rem;
            color: var(--coral-accent);
            animation: markerPulseContact 2s infinite;
            filter: drop-shadow(0 0 20px var(--coral-accent));
        }
        @keyframes markerPulseContact {
            0% { transform: translate(-50%, -50%) scale(1); opacity: 0.8; }
            50% { transform: translate(-50%, -50%) scale(1.2); opacity: 1; }
            100% { transform: translate(-50%, -50%) scale(1); opacity: 0.8; }
        }

        /* ----- BOTTOM SPACING ----- */
        body::after {
            content: '';
            display: block;
            height: 4rem;
            background: transparent;
        }

        /* Responsive */
        @media (max-width: 768px) {
            #contact-form-unique {
                padding: 2rem;
            }
            .contact-info-header-unique h3 {
                font-size: 1.5rem;
            }
        }