/* =====================================================================
   About Us — unique section backgrounds (different from the homepage):
   honeycomb, aurora glow, flowing waves, pulse rings, diamond grid.
   Each section gets its own big faint icons with its own motion.
   ===================================================================== */
body .about-section,
body .zk-green-sec,
body .zk-recycle-sec,
body .zk-mission-vision,
body .certification-section {
    position: relative;
    overflow-x: clip;
    isolation: isolate;
}

body .about-section::before, body .about-section::after,
body .zk-green-sec::before, body .zk-green-sec::after,
body .zk-recycle-sec::before, body .zk-recycle-sec::after,
body .zk-mission-vision::before, body .zk-mission-vision::after,
body .certification-section::before, body .certification-section::after {
    position: absolute;
    z-index: -1;
    line-height: 1;
    pointer-events: none;
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
}

/* 1) Trusted Experts — honeycomb + rising eco bubbles + swaying leaf */
body .about-section {
    background:
        radial-gradient(circle at 85% 20%, rgba(25, 169, 133, 0.12) 0, rgba(25, 169, 133, 0) 30%),
        radial-gradient(circle at 10% 85%, rgba(255, 174, 0, 0.12) 0, rgba(255, 174, 0, 0) 28%),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='100'%3E%3Cpath d='M28 66L0 50V16L28 0l28 16v34L28 66v34M28 0v34L0 50v34l28 16 28-16V50L28 34' fill='none' stroke='%2319a985' stroke-opacity='.11' stroke-width='1.2'/%3E%3C/svg%3E") 0 0 / 56px 100px,
        linear-gradient(180deg, #ffffff 0%, #f2faf8 100%);
}
/* bubbles float upward forever */
body .about-section::before {
    content: "";
    inset: 0;
    background:
        radial-gradient(circle, rgba(25, 169, 133, 0.18) 0 6px, transparent 7px) 0 0 / 180px 220px,
        radial-gradient(circle, rgba(9, 146, 178, 0.14) 0 4px, transparent 5px) 60px 90px / 240px 260px,
        radial-gradient(circle, rgba(255, 174, 0, 0.18) 0 3px, transparent 4px) 120px 40px / 200px 300px;
    animation: abBubbles 30s linear infinite;
}
body .about-section::after {
    content: "\f06c";
    top: 40px;
    right: 3%;
    font-size: 230px;
    color: rgba(25, 169, 133, 0.08);
    transform-origin: 50% 100%;
    animation: abSway 6s ease-in-out infinite;
}

/* 2) Sustainable Solutions (dark) — moving aurora glow + turning globe + ring */
body .zk-green-sec {
    background:
        linear-gradient(120deg, rgba(25, 169, 133, 0.35), rgba(0, 30, 23, 0) 30%, rgba(9, 146, 178, 0.30) 55%, rgba(0, 30, 23, 0) 75%, rgba(255, 174, 0, 0.18)) 0 0 / 300% 300%,
        #001e17;
    animation: abAurora 16s ease-in-out infinite alternate;
}
body .zk-green-sec::before {
    content: "\f57d";
    top: 50%;
    right: -60px;
    margin-top: -150px;
    font-size: 300px;
    color: rgba(255, 255, 255, 0.05);
    animation: srSpinSlow 80s linear infinite;
}
body .zk-green-sec::after {
    content: "";
    left: -110px;
    top: 50%;
    width: 260px;
    height: 260px;
    margin-top: -130px;
    border-radius: 50%;
    border: 2px dashed rgba(157, 247, 236, 0.18);
    box-shadow: 0 0 0 30px rgba(25, 169, 133, 0.05), 0 0 0 60px rgba(25, 169, 133, 0.03);
    animation: srSpinSlow 40s linear infinite reverse;
}

/* 3) Driving Sustainability — flowing wave lines + bouncing recycle */
body .zk-recycle-sec {
    background:
        radial-gradient(circle at 8% 20%, rgba(25, 169, 133, 0.12) 0, rgba(25, 169, 133, 0) 32%),
        radial-gradient(circle at 92% 80%, rgba(9, 146, 178, 0.10) 0, rgba(9, 146, 178, 0) 30%),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='36'%3E%3Cpath d='M0 18Q30 0 60 18T120 18' fill='none' stroke='%2319a985' stroke-opacity='.13' stroke-width='1.5'/%3E%3C/svg%3E") 0 0 / 120px 36px,
        linear-gradient(180deg, #eefaf6 0%, #ffffff 100%);
    animation: abWaves 18s linear infinite;
}
body .zk-recycle-sec::before {
    content: "\f1b8";
    top: 40px;
    left: 2%;
    font-size: 200px;
    color: rgba(25, 169, 133, 0.08);
    animation: abBounce 7s ease-in-out infinite;
}
body .zk-recycle-sec::after {
    content: "\f4d8";
    bottom: 30px;
    right: 3%;
    font-size: 220px;
    color: rgba(255, 174, 0, 0.13);
    animation: srFloat 9s ease-in-out infinite reverse;
}

/* 4) Mission & Vision — pulse rings from the centre + compass / eye */
body .zk-mission-vision {
    background:
        repeating-radial-gradient(circle at 50% 50%, rgba(25, 169, 133, 0.07) 0 2px, transparent 2px 46px),
        radial-gradient(circle at 10% 15%, rgba(25, 169, 133, 0.12) 0, rgba(25, 169, 133, 0) 35%),
        radial-gradient(circle at 90% 90%, rgba(9, 146, 178, 0.12) 0, rgba(9, 146, 178, 0) 35%),
        linear-gradient(180deg, #e3f4f6 0%, #f1faf8 100%);
}
body .zk-mission-vision::before {
    content: "";
    left: 50%;
    top: 50%;
    width: 160px;
    height: 160px;
    margin: -80px 0 0 -80px;
    border-radius: 50%;
    border: 2px solid rgba(25, 169, 133, 0.35);
    animation: abRipple 4.5s ease-out infinite;
}
body .zk-mission-vision::after {
    content: "\f14e";
    top: 30px;
    left: 2%;
    font-size: 190px;
    color: rgba(9, 146, 178, 0.09);
    animation: abCompass 10s ease-in-out infinite;
}

/* 5) Certification — diamond grid + floating award + light sweep */
body .certification-section {
    background:
        radial-gradient(circle at 50% 0%, rgba(255, 174, 0, 0.14) 0, rgba(255, 174, 0, 0) 40%),
        linear-gradient(45deg, rgba(25, 169, 133, 0.06) 25%, transparent 25%, transparent 75%, rgba(25, 169, 133, 0.06) 75%) 0 0 / 36px 36px,
        linear-gradient(45deg, rgba(25, 169, 133, 0.06) 25%, transparent 25%, transparent 75%, rgba(25, 169, 133, 0.06) 75%) 18px 18px / 36px 36px,
        #ffffff;
}
body .certification-section::before {
    content: "\f559";
    top: 30px;
    right: 3%;
    font-size: 210px;
    color: rgba(255, 174, 0, 0.16);
    animation: abBounce 8s ease-in-out infinite;
}
body .certification-section::after {
    content: "";
    top: 0;
    bottom: 0;
    left: 0;
    width: 30%;
    background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.85), transparent);
    animation: abSweep 7s ease-in-out infinite;
}

@keyframes abBubbles { from { background-position: 0 0, 60px 90px, 120px 40px; } to { background-position: 0 -880px, 60px -950px, 120px -1160px; } }
@keyframes abSway { 0%, 100% { transform: rotate(-8deg); } 50% { transform: rotate(8deg); } }
@keyframes abAurora { 0% { background-position: 0% 50%, 0 0; } 100% { background-position: 100% 50%, 0 0; } }
@keyframes abWaves { from { background-position: 0 0, 0 0, 0 0, 0 0; } to { background-position: 0 0, 0 0, 240px 0, 0 0; } }
@keyframes abBounce { 0%, 100% { translate: 0 0; rotate: 0deg; } 50% { translate: 0 -26px; rotate: 12deg; } }
@keyframes abRipple { 0% { transform: scale(0.4); opacity: 0.9; } 100% { transform: scale(6); opacity: 0; } }
@keyframes abCompass { 0%, 100% { transform: rotate(-25deg); } 50% { transform: rotate(35deg); } }
@keyframes abSweep { 0% { translate: -120% 0; } 60%, 100% { translate: 420% 0; } }
@keyframes srSpinSlow { to { transform: rotate(360deg); } }
@keyframes srFloat { 0%, 100% { translate: 0 0; } 50% { translate: 0 -22px; } }

@media (max-width: 767px) {
    body .about-section::after,
    body .zk-recycle-sec::before, body .zk-recycle-sec::after,
    body .zk-mission-vision::after,
    body .certification-section::before { font-size: 120px; }
    body .zk-green-sec::before { font-size: 180px; margin-top: -90px; }
    body .zk-green-sec::after { width: 160px; height: 160px; margin-top: -80px; left: -80px; }
}

@media (prefers-reduced-motion: reduce) {
    body .about-section::before, body .about-section::after,
    body .zk-green-sec, body .zk-green-sec::before, body .zk-green-sec::after,
    body .zk-recycle-sec, body .zk-recycle-sec::before, body .zk-recycle-sec::after,
    body .zk-mission-vision::before, body .zk-mission-vision::after,
    body .certification-section::before, body .certification-section::after { animation: none; }
}