/* Compiled from scss/events.scss — REbATE Events (light green & white) */
/* 1. Make body transparent so fixed bg shows through */
html, body {
    background: transparent !important;
    position: relative;
}

/* 2. Background layer — must be behind everything */
.reb-bg {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;
    z-index: 0;           /* NOT -1, see note below */
    pointer-events: none;
    overflow: hidden;
    background: linear-gradient(135deg, #f3fbf7 0%, #ffffff 60%, #e8f5ee 100%);
}

/* 3. ALL page content must sit above bg with its own stacking context */
nav,
.reb-hero,
.reb-grid-section,
footer,
main,
.container {
    position: relative;
    z-index: 1;
}

/* 4. Sections must NOT have opaque backgrounds covering the bg */
.reb-hero {
    background: transparent !important;
}
.reb-grid-section {
    background: transparent !important;
}


/* ============================================
   REbATE Animated Background
   Theme: Circular Economy + Ecosystem Adaptation
   Palette: light-green & white
   ============================================ */
.reb-bg {
    position: fixed;
    inset: 0;
    z-index: -1;                /* behind ALL content */
    overflow: hidden;
    pointer-events: none;
    background: linear-gradient(135deg, #f3fbf7 0%, #ffffff 55%, #eaf7f0 100%);
}

/* Soft floating biodiversity orbs */
.reb-bg-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(60px);
    opacity: 0.55;
    animation: rebOrbFloat 18s ease-in-out infinite;
}
.reb-bg-orb-1 { width: 380px; height: 380px; top: -80px;  left: -80px;
    background: radial-gradient(circle, #a8e6c7 0%, transparent 70%); }
.reb-bg-orb-2 { width: 460px; height: 460px; top: 40%;    right: -120px;
    background: radial-gradient(circle, #c8f0d9 0%, transparent 70%);
    animation-delay: -6s; animation-duration: 22s; }
.reb-bg-orb-3 { width: 320px; height: 320px; bottom: 10%; left: 30%;
    background: radial-gradient(circle, #b8ebcd 0%, transparent 70%);
    animation-delay: -12s; animation-duration: 26s; }

@keyframes rebOrbFloat {
    0%, 100% { transform: translate(0, 0) scale(1); }
    33%      { transform: translate(40px, -30px) scale(1.05); }
    66%      { transform: translate(-30px, 40px) scale(0.95); }
}

/* Floating leaves — drift upward like wind through the islands */
.reb-bg-leaf {
    position: absolute;
    color: #2fb380;
    opacity: 0.18;
    font-size: 2rem;
    animation: rebLeafDrift 20s linear infinite;
}
.reb-bg-leaf-1 { left:  8%;  top: 110%; font-size: 2.2rem; animation-delay:  0s;  animation-duration: 22s; }
.reb-bg-leaf-2 { left: 25%;  top: 110%; font-size: 1.6rem; animation-delay: -5s;  animation-duration: 26s; color: #5cc99a; }
.reb-bg-leaf-3 { left: 50%;  top: 110%; font-size: 2.5rem; animation-delay: -10s; animation-duration: 24s; }
.reb-bg-leaf-4 { left: 72%;  top: 110%; font-size: 1.8rem; animation-delay: -15s; animation-duration: 28s; color: #5cc99a; }
.reb-bg-leaf-5 { left: 90%;  top: 110%; font-size: 2.1rem; animation-delay: -8s;  animation-duration: 25s; }

@keyframes rebLeafDrift {
    0%   { transform: translateY(0)      rotate(0deg);   opacity: 0; }
    10%  { opacity: 0.20; }
    50%  { transform: translateY(-60vh)  rotate(180deg); opacity: 0.22; }
    90%  { opacity: 0.18; }
    100% { transform: translateY(-120vh) rotate(360deg); opacity: 0; }
}

/* Circular economy rings — slow rotation = circularity loop */
.reb-bg-ring {
    position: absolute;
    color: #2fb380;
    opacity: 0.10;
    animation: rebRingSpin 30s linear infinite;
}
.reb-bg-ring-1 { top: 15%; right: 12%; font-size: 6rem;  animation-duration: 35s; }
.reb-bg-ring-2 { bottom: 25%; left: 8%; font-size: 8rem; animation-duration: 45s; animation-direction: reverse; opacity: 0.08; }
.reb-bg-ring-3 { top: 55%; right: 35%; font-size: 4.5rem; animation-duration: 28s; opacity: 0.12; }

@keyframes rebRingSpin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

/* Ocean waves — Indian Ocean SIDS */
.reb-bg-waves {
    position: absolute;
    bottom: 0; left: 0;
    width: 100%;
    height: 180px;
}

/* Make sure your main page sections sit ABOVE the background */
.reb-hero,
.reb-grid-section,
nav, footer { position: relative; z-index: 1; }

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
    .reb-bg-orb, .reb-bg-leaf, .reb-bg-ring, .reb-bg-waves path { animation: none !important; }
}





body{background:#fff;color:#1f2d3d}
.text-rebate{color:#1f8a60}

.reb-hero{background:radial-gradient(900px 400px at 10% 0%,rgba(47,179,128,.12),transparent 60%),radial-gradient(700px 350px at 90% 10%,rgba(47,179,128,.10),transparent 60%),#f3fbf7;border-bottom:1px solid #e6efe9}
.reb-hero .reb-pill{display:inline-flex;align-items:center;gap:.5rem;background:#fff;color:#1f8a60;font-weight:600;padding:.5rem 1rem;border-radius:999px;border:1px solid #e6efe9;box-shadow:0 4px 14px rgba(31,138,96,.08);font-size:.9rem}
.reb-hero .reb-hero-title{font-size:clamp(1.8rem,3.6vw,2.8rem);font-weight:800;letter-spacing:-.02em;margin-top:.5rem}
.reb-hero .reb-hero-sub{color:#6b7a8c;max-width:640px;margin:.75rem auto 0}
.reb-hero .reb-search{position:relative}
.reb-hero .reb-search i{position:absolute;top:50%;left:1rem;transform:translateY(-50%);color:#1f8a60}
.reb-hero .reb-search .form-control{padding:.9rem 1rem .9rem 2.6rem;border-radius:999px;border:1px solid #e6efe9;background:#fff;box-shadow:0 4px 14px rgba(31,138,96,.08);transition:box-shadow .25s cubic-bezier(.2,.7,.2,1)}
.reb-hero .reb-search .form-control:focus{border-color:#2fb380;box-shadow:0 0 0 .25rem rgba(47,179,128,.18)}
.reb-hero .reb-stat{background:#fff;border:1px solid #e6efe9;border-radius:12px;padding:1rem 1.25rem;box-shadow:0 4px 14px rgba(31,138,96,.08)}
.reb-hero .reb-stat .reb-stat-num{font-size:2rem;font-weight:800;color:#1f8a60;line-height:1}
.reb-hero .reb-stat .reb-stat-label{color:#6b7a8c;font-size:.9rem;margin-top:.25rem}

.reb-card{background:#fff;border:1px solid #e6efe9;border-radius:18px;overflow:hidden;transition:transform .35s cubic-bezier(.2,.7,.2,1),box-shadow .35s cubic-bezier(.2,.7,.2,1);display:flex;flex-direction:column}
.reb-card:hover{transform:translateY(-6px);box-shadow:0 20px 50px rgba(31,138,96,.18)}
.reb-card:hover .reb-card-media img{transform:scale(1.06)}
.reb-card .reb-card-media{position:relative;aspect-ratio:16/10;background:#e8f8f0;overflow:hidden}
.reb-card .reb-card-media img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.reb-card .reb-card-media .reb-card-placeholder{display:flex;align-items:center;justify-content:center;width:100%;height:100%;color:#1f8a60;font-size:3rem;opacity:.5}
.reb-card .reb-card-media .reb-badge{position:absolute;right:12px;bottom:12px;background:#2fb380;color:#fff;font-size:.8rem;font-weight:600;padding:.35rem .7rem;border-radius:999px;display:inline-flex;align-items:center;gap:.35rem;box-shadow:0 4px 14px rgba(31,138,96,.08)}
.reb-card .reb-card-media .reb-badge i{font-size:.9rem}
.reb-card .reb-card-body{padding:1.25rem 1.25rem 1.4rem;background:#f3fbf7;flex:1;display:flex;flex-direction:column}
.reb-card .reb-card-meta{display:flex;flex-wrap:wrap;gap:1.25rem;color:#6b7a8c;font-size:.85rem;margin-bottom:.6rem}
.reb-card .reb-card-meta i{color:#1f8a60;margin-right:.25rem}
.reb-card .reb-card-title{font-size:1.2rem;font-weight:700;line-height:1.35;color:#1f2d3d;margin-bottom:.55rem;transition:color .25s cubic-bezier(.2,.7,.2,1)}
.reb-card .reb-card-desc{color:#6b7a8c;font-size:.92rem;line-height:1.55;margin-bottom:1rem;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.reb-card .reb-card-actions{margin-top:auto}
.reb-card .reb-readmore{display:inline-flex;align-items:center;gap:.4rem;color:#1f8a60;font-weight:700;text-decoration:none;transition:gap .25s,color .25s}
.reb-card .reb-readmore i{transition:transform .25s}
.reb-card .reb-readmore:hover{color:#2fb380;gap:.65rem}
.reb-card .reb-readmore:hover i{transform:translateX(3px)}
.reb-card:hover .reb-card-title{color:#1f8a60}

.lightbox .lb-image{border-radius:12px}
.lb-data .lb-caption{color:#fff;font-weight:600}
.lb-data .lb-number{color:rgba(255,255,255,.75)}