/* =========================================================
   ACG CAREER FOUNDATION
   PREMIUM GLASSMORPHISM NAVBAR
========================================================= */

      /* =========================================================
   ROOT VARIABLES
========================================================= */

      :root {
        --acg-navy: #0b1f3a;

        --acg-navy-dark: #061224;

        --acg-blue: #1d3d63;

        --acg-gold: #f4b000;

        --acg-gold-light: #ffd84d;

        --acg-red: #e82e2e;

        --acg-orange: #ff8a00;

        --acg-teal: #0ea5a4;

        --acg-white: #ffffff;

        --acg-glass: rgba(255, 255, 255, 0.82);

        --acg-glass-strong: rgba(255, 255, 255, 0.94);

        --acg-border: rgba(255, 255, 255, 0.72);

        --acg-shadow: 0 12px 40px rgba(11, 31, 58, 0.08);

        --acg-shadow-hover: 0 20px 55px rgba(11, 31, 58, 0.14);
      }

      /* =========================================================
   GLOBAL NAVBAR RESET
========================================================= */

      .acg-navbar,
      .acg-navbar * {
        box-sizing: border-box;
      }

      .acg-navbar button {
        font-family: "Poppins", sans-serif;
      }

      /* =========================================================
   MAIN NAVBAR
========================================================= */

      .acg-navbar {
        position: fixed;

        top: 4px;

        left: 3.2%;

        right: 3.2%;

        width: auto;

        z-index: 9999;

        background: linear-gradient(
          135deg,
          rgba(255, 255, 255, 0.9),
          rgba(255, 255, 255, 0.7)
        );

        backdrop-filter: blur(24px) saturate(140%);

        -webkit-backdrop-filter: blur(24px) saturate(140%);

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

        border-radius: 25px;

        box-shadow: var(--acg-shadow);

        transition:
          top 0.35s ease,
          background 0.35s ease,
          box-shadow 0.35s ease,
          border-color 0.35s ease;
      }

      /* =========================================================
   SCROLLED NAVBAR
========================================================= */

      .acg-navbar.scrolled {
        top: 12px;

        background:linear-gradient(
          135deg,
          rgba(255, 255, 255, 0.9),
          rgba(255, 255, 255, 0.7)
        );

        border-color: rgba(11, 31, 58, 0.07);

        box-shadow:var(--acg-shadow);
      }

      /* =========================================================
   NAV CONTAINER
========================================================= */

      .acg-nav-container {
        min-height: 96px;

        padding: 0 22px 0 24px;

        display: flex;

        align-items: center;

        gap: 20px;
      }

      /* =========================================================
   BRAND
========================================================= */

      .acg-brand {
        display: flex;

        align-items: center;

        gap: 13px;

        flex-shrink: 0;

        text-decoration: none;
      }

      .acg-logo-box {
        width: 72px;

        height: 72px;

        flex-shrink: 0;

        display: flex;

        align-items: center;

        justify-content: center;

        border-radius: 50%;

        overflow: hidden;

        transition: transform 0.35s ease;
      }

      .acg-logo-box img {
        width: 100%;

        height: 100%;

        object-fit: contain;
      }

      .acg-brand:hover .acg-logo-box {
        transform: scale(1.04) rotate(-2deg);
      }

      /* =========================================================
   BRAND TEXT
========================================================= */

      .acg-brand-text {
        display: flex;

        flex-direction: column;

        line-height: 1.03;

        white-space: nowrap;
      }

      .acg-brand-text span {
        color: var(--acg-navy);

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

        font-size: 20px;

        font-weight: 700;

        letter-spacing: -0.4px;
      }

      .acg-brand-text strong {
        color: var(--acg-navy);

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

        font-size: 20px;

        font-weight: 800;

        letter-spacing: -0.4px;
      }

      /* =========================================================
   DESKTOP NAV
========================================================= */

      .acg-nav-links {
        display: flex;

        align-items: center;

        justify-content: center;

        gap: 2px;

        margin-left: auto;
      }

      .acg-nav-link {
        position: relative;

        height: 70px;

        padding: 0 15px;

        display: flex;

        align-items: center;

        justify-content: center;

        color: var(--acg-navy);

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

        font-size: 16px;

        font-weight: 600;

        text-decoration: none;

        border-radius: 17px;

        transition:
          color 0.25s ease,
          background 0.25s ease;
      }

      .acg-nav-link:hover {
        color: var(--acg-navy);

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

      /* =========================================================
   ACTIVE UNDERLINE
========================================================= */

      .acg-nav-link::after {
        content: "";

        position: absolute;

        left: 15px;

        right: 15px;

        bottom: 8px;

        height: 3px;

        border-radius: 20px;

        background: var(--acg-gold);

        transform: scaleX(0);

        transform-origin: center;

        transition: transform 0.3s ease;
      }

      .acg-nav-link.active::after {
        transform: scaleX(1);
      }

      /* =========================================================
   RIGHT ACTION AREA
========================================================= */

      .acg-nav-actions {
        display: flex;

        align-items: center;

        gap: 10px;

        margin-left: auto;

        flex-shrink: 0;
      }

      /* =========================================================
   SEARCH
========================================================= */

      .acg-search-btn {
        width: 48px;

        height: 48px;

        border: none;

        border-radius: 50%;

        background: transparent;

        color: var(--acg-navy);

        display: flex;

        align-items: center;

        justify-content: center;

        font-size: 22px;

        cursor: pointer;

        transition:
          background 0.25s ease,
          transform 0.25s ease;
      }

      .acg-search-btn:hover {
        background: rgba(11, 31, 58, 0.06);

        transform: scale(1.08);
      }

      /* =========================================================
   SIGN IN WRAPPER
========================================================= */

      .acg-signin-wrap {
        position: relative;

        display: flex;

        align-items: center;
      }

      /* =========================================================
   SIGN IN BUTTON
========================================================= */

      .acg-login-btn {
        min-height: 50px;

        padding: 0 17px;

        display: inline-flex;

        align-items: center;

        justify-content: center;

        gap: 9px;

        border: 1.5px solid rgba(11, 31, 58, 0.62);

        border-radius: 30px;

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

        color: var(--acg-navy);

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

        font-size: 16px;

        font-weight: 600;

        cursor: pointer;

        transition: all 0.25s ease;
      }

      .acg-login-btn:hover {
        color: var(--acg-navy);

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

        box-shadow: 0 8px 25px rgba(11, 31, 58, 0.09);
      }

      .acg-login-btn.is-open {
        background: rgba(255, 255, 255, 0.96);

        border-color: rgba(11, 31, 58, 0.8);

        box-shadow: 0 10px 30px rgba(11, 31, 58, 0.11);
      }

      .acg-login-btn > i:first-child {
        font-size: 21px;
      }

      .acg-login-arrow {
        font-size: 11px;

        transition: transform 0.25s ease;
      }

      .acg-login-btn.is-open .acg-login-arrow {
        transform: rotate(180deg);
      }

      /* =========================================================
   DESKTOP SIGN IN DROPDOWN
========================================================= */

      .acg-signin-dropdown {
        position: absolute;

        top: calc(100% + 12px);

        right: 0;

        width: 285px;

        padding: 10px;

        border-radius: 22px;

        background: linear-gradient(
          145deg,
          rgba(255, 255, 255, 0.96),
          rgba(245, 249, 253, 0.86)
        );

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

        backdrop-filter: blur(25px) saturate(150%);

        -webkit-backdrop-filter: blur(25px) saturate(150%);

        box-shadow:
          0 25px 65px rgba(11, 31, 58, 0.16),
          0 5px 18px rgba(11, 31, 58, 0.06);

        z-index: 10001;

        /* IMPORTANT */

        opacity: 0;

        visibility: hidden;

        pointer-events: none;

        transform: translateY(-8px) scale(0.97);

        transform-origin: top right;

        transition:
          opacity 0.22s ease,
          transform 0.22s ease,
          visibility 0s linear 0.22s;
      }

      /* =========================================================
   DROPDOWN OPEN
========================================================= */

      .acg-signin-dropdown.show {
        opacity: 1;

        visibility: visible;

        pointer-events: auto;

        transform: translateY(0) scale(1);

        transition:
          opacity 0.22s ease,
          transform 0.22s ease,
          visibility 0s linear 0s;
      }

      /* =========================================================
   DROPDOWN HEADER
========================================================= */

      .signin-dropdown-header {
        display: flex;

        align-items: center;

        gap: 11px;

        padding: 12px;

        margin-bottom: 4px;

        border-bottom: 1px solid rgba(11, 31, 58, 0.07);
      }

      .signin-mini-icon {
        width: 40px;

        height: 40px;

        flex-shrink: 0;

        display: flex;

        align-items: center;

        justify-content: center;

        border-radius: 13px;

        background: linear-gradient(
          135deg,
          rgba(11, 31, 58, 0.1),
          rgba(14, 165, 164, 0.1)
        );

        color: var(--acg-navy);

        font-size: 18px;
      }

      .signin-dropdown-header div {
        display: flex;

        flex-direction: column;
      }

      .signin-dropdown-header strong {
        color: var(--acg-navy);

        font-size: 15px;

        font-weight: 700;
      }

      .signin-dropdown-header small {
        color: #718096;

        margin-top: 2px;

        font-size: 11px;

        font-weight: 500;
      }

      /* =========================================================
   SIGN OPTIONS
========================================================= */

      .signin-options {
        display: flex;

        flex-direction: column;

        gap: 4px;
      }

      .signin-option {
        min-height: 64px;

        padding: 8px 10px;

        display: flex;

        align-items: center;

        gap: 11px;

        border-radius: 15px;

        color: var(--acg-navy);

        text-decoration: none;

        transition:
          background 0.22s ease,
          transform 0.22s ease;
      }

      .signin-option:hover {
        color: var(--acg-navy);

        background: rgba(11, 31, 58, 0.055);

        transform: translateX(3px);
      }

      /* =========================================================
   SIGN OPTION ICON
========================================================= */

      .signin-option-icon {
        width: 42px;

        height: 42px;

        flex-shrink: 0;

        display: flex;

        align-items: center;

        justify-content: center;

        border-radius: 13px;

        font-size: 18px;
      }

      .admin-icon {
        color: var(--acg-navy);

        background: rgba(11, 31, 58, 0.09);
      }

      .member-icon {
        color: #0e8f8e;

        background: rgba(14, 165, 164, 0.1);
      }

      .volunteer-icon {
        color: #c58a00;

        background: rgba(244, 176, 0, 0.14);
      }

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

      .signin-option-content {
        flex: 1;

        display: flex;

        flex-direction: column;
      }

      .signin-option-content strong {
        color: var(--acg-navy);

        font-size: 14px;

        font-weight: 700;

        line-height: 1.2;
      }

      .signin-option-content small {
        color: #718096;

        margin-top: 3px;

        font-size: 10.5px;

        font-weight: 500;
      }

      /* =========================================================
   OPTION ARROW
========================================================= */

      .signin-arrow {
        color: #8a99aa;

        font-size: 20px;

        transition:
          transform 0.22s ease,
          color 0.22s ease;
      }

      .signin-option:hover .signin-arrow {
        color: var(--acg-navy);

        transform: translateX(3px);
      }

      /* =========================================================
   DONATE BUTTON
========================================================= */

      .acg-donate-btn {
        min-height: 54px;

        padding: 0 24px;

        display: inline-flex;

        align-items: center;

        justify-content: center;

        gap: 9px;

        border: none;

        border-radius: 30px;

        background: linear-gradient(
          110deg,
          #e82e2e 0%,
          #f4432d 45%,
          #ff8a00 100%
        );

        color: #ffffff;

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

        font-size: 16px;

        font-weight: 700;

        text-decoration: none;

        box-shadow: 0 8px 22px rgba(232, 46, 46, 0.22);

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

      .acg-donate-btn:hover {
        color: #ffffff;

        transform: translateY(-3px);

        box-shadow: 0 14px 32px rgba(232, 46, 46, 0.29);
      }

      .acg-donate-btn i {
        font-size: 20px;

        transition: transform 0.25s ease;
      }

      .acg-donate-btn:hover i {
        transform: scale(1.12);
      }

      /* =========================================================
   MOBILE MENU BUTTON
========================================================= */

      .acg-menu-btn {
        width: 50px;

        height: 50px;

        display: none;

        align-items: center;

        justify-content: center;

        flex-direction: column;

        gap: 5px;

        border: none;

        border-radius: 15px;

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

        cursor: pointer;

        transition: background 0.25s ease;
      }

      .acg-menu-btn:hover {
        background: rgba(11, 31, 58, 0.06);
      }

      .acg-menu-btn span {
        width: 22px;

        height: 2.5px;

        border-radius: 20px;

        background: var(--acg-navy);

        transition:
          transform 0.25s ease,
          opacity 0.2s ease;
      }

      /* HAMBURGER ACTIVE */

      .acg-menu-btn.active span:nth-child(1) {
        transform: translateY(7.5px) rotate(45deg);
      }

      .acg-menu-btn.active span:nth-child(2) {
        opacity: 0;
      }

      .acg-menu-btn.active span:nth-child(3) {
        transform: translateY(-7.5px) rotate(-45deg);
      }

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

      .acg-mobile-menu {
        display: none;
      }

      /* =========================================================
   MOBILE SIGN IN
========================================================= */

      .acg-mobile-signin-wrap {
        position: relative;

        width: 100%;

        margin-top: 10px;
      }

      .acg-mobile-signin-btn {
        width: 100%;

        min-height: 54px;

        padding: 7px 13px;

        display: flex;

        align-items: center;

        justify-content: space-between;

        border: 1px solid rgba(11, 31, 58, 0.14);

        border-radius: 16px;

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

        color: var(--acg-navy);

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

        font-size: 14px;

        font-weight: 600;

        cursor: pointer;
      }

      .mobile-signin-left {
        display: flex;

        align-items: center;

        gap: 11px;
      }

      .mobile-signin-icon {
        width: 38px;

        height: 38px;

        display: flex;

        align-items: center;

        justify-content: center;

        border-radius: 12px;

        background: rgba(11, 31, 58, 0.07);

        font-size: 18px;
      }

      .acg-mobile-signin-btn > i {
        font-size: 12px;

        transition: transform 0.25s ease;
      }

      .acg-mobile-signin-btn.is-open > i {
        transform: rotate(180deg);
      }

      /* =========================================================
   MOBILE SIGN OPTIONS
========================================================= */

      .acg-mobile-signin-options {
        margin-top: 7px;

        padding: 6px;

        border-radius: 17px;

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

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

        backdrop-filter: blur(20px);

        -webkit-backdrop-filter: blur(20px);

        box-shadow: 0 12px 35px rgba(11, 31, 58, 0.08);

        opacity: 0;

        visibility: hidden;

        pointer-events: none;

        max-height: 0;

        overflow: hidden;

        transform: translateY(-5px);

        transition:
          opacity 0.22s ease,
          transform 0.22s ease,
          max-height 0.3s ease,
          visibility 0s linear 0.3s;
      }

      .acg-mobile-signin-options.show {
        opacity: 1;

        visibility: visible;

        pointer-events: auto;

        max-height: 260px;

        transform: translateY(0);

        transition:
          opacity 0.22s ease,
          transform 0.22s ease,
          max-height 0.3s ease,
          visibility 0s linear 0s;
      }

      /* =========================================================
   MOBILE SIGN OPTION
========================================================= */

      .mobile-sign-option {
        min-height: 58px;

        padding: 8px;

        display: flex;

        align-items: center;

        gap: 10px;

        border-radius: 13px;

        color: var(--acg-navy);

        text-decoration: none;
      }

      .mobile-sign-option:hover {
        color: var(--acg-navy);

        background: rgba(11, 31, 58, 0.05);
      }

      .mobile-sign-option .signin-option-icon {
        width: 38px;

        height: 38px;

        border-radius: 11px;

        font-size: 16px;
      }

      .mobile-sign-option .signin-option-content {
        flex: 1;
      }

      .mobile-sign-option .signin-option-content strong {
        font-size: 13px;
      }

      .mobile-sign-option .signin-option-content small {
        font-size: 10px;
      }

      .mobile-sign-option > i {
        color: #8a99aa;

        font-size: 19px;
      }

      /* =========================================================
   MOBILE NAV LINKS
========================================================= */

      .mobile-nav-link {
        min-height: 48px;

        padding: 8px 12px;

        display: flex;

        align-items: center;

        gap: 13px;

        border-radius: 13px;

        color: var(--acg-navy);

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

        font-size: 14px;

        font-weight: 600;

        text-decoration: none;

        transition:
          background 0.2s ease,
          transform 0.2s ease;
      }

      .mobile-nav-link i {
        width: 23px;

        font-size: 17px;
      }

      .mobile-nav-link:hover,
      .mobile-nav-link.active {
        color: var(--acg-navy);

        background: rgba(11, 31, 58, 0.05);
      }

      /* =========================================================
   DESKTOP
========================================================= */

      @media (min-width: 1101px) {
        .acg-mobile-menu {
          display: none !important;
        }
      }

      /* =========================================================
   TABLET / SMALL LAPTOP
========================================================= */

      @media (max-width: 1250px) {
        .acg-nav-link {
          padding: 0 10px;

          font-size: 14px;
        }

        .acg-brand-text span,
        .acg-brand-text strong {
          font-size: 17px;
        }

        .acg-donate-btn {
          padding: 0 17px;

          font-size: 14px;
        }
      }

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

      @media (max-width: 1100px) {
        .acg-navbar {
          left: 15px;

          right: 15px;
        }

        .acg-nav-container {
          min-height: 82px;
        }

        .acg-nav-links {
          display: none;
        }

        .acg-search-btn {
          display: none;
        }

        .acg-signin-wrap {
          display: flex;
        }

        /*
       IMPORTANT:
       Desktop Donate hide
       Mobile navbar mein Donate nahi
    */

        .acg-donate-btn {
          display: none !important;
        }

        .acg-menu-btn {
          display: flex;
        }

        .acg-mobile-menu {
          display: block;

          max-height: 0;

          opacity: 0;

          visibility: hidden;

          pointer-events: none;

          overflow: hidden;

          transition:
            max-height 0.4s ease,
            opacity 0.25s ease,
            visibility 0s linear 0.4s;
        }

        .acg-mobile-menu.open {
          max-height: 700px;

          opacity: 1;

          visibility: visible;

          pointer-events: auto;

          transition:
            max-height 0.4s ease,
            opacity 0.25s ease,
            visibility 0s linear 0s;
        }

        .acg-mobile-inner {
          padding: 8px 12px 18px;
        }
      }

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

      @media (max-width: 768px) {
        .acg-nav-actions {
          gap: 7px;
        }

        .acg-signin-wrap {
          display: flex;
        }

        .acg-login-btn {
          min-height: 44px;
          height: 44px;

          padding: 0 13px;

          gap: 6px;

          font-size: 13px;

          border-radius: 25px;
        }

        .acg-login-btn > i:first-child {
          font-size: 18px;
        }

        .acg-login-arrow {
          font-size: 9px;
        }

        .acg-menu-btn {
          width: 44px;
          height: 44px;
        }
      }

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

      @media (max-width: 480px) {
        .acg-navbar {
          left: 7px;

          right: 7px;
        }

        .acg-logo-box {
          width: 51px;

          height: 51px;
        }

        .acg-brand-text span,
        .acg-brand-text strong {
          font-size: 12.5px;
        }

        .acg-nav-container {
          padding-left: 9px;

          padding-right: 9px;
        }

        .acg-menu-btn {
          width: 44px;

          height: 44px;
        }
      }


/**Footer**/

  /* =========================================================
   PREMIUM FOOTER
========================================================= */

.acg-footer{
    position:relative;
    padding:80px 0 0;
    overflow:hidden;
    isolation:isolate;
    background:#FDFCF7;
}

/* =========================================================
   AMBIENT GLOW BACKGROUND
========================================================= */

.acg-footer::before{
    content:"";
    position:absolute;inset:0;z-index:0;pointer-events:none;
    background:
        radial-gradient(ellipse 55% 45% at -5% 0%, rgba(76,175,80,.22) 0%, rgba(76,175,80,.08) 32%, transparent 72%),
        radial-gradient(ellipse 55% 45% at 105% 0%, rgba(255,140,0,.24) 0%, rgba(255,193,7,.10) 32%, transparent 72%),
        radial-gradient(ellipse 60% 50% at -5% 100%, rgba(255,140,0,.22) 0%, rgba(255,193,7,.10) 35%, transparent 75%),
        radial-gradient(ellipse 65% 55% at 105% 100%, rgba(76,175,80,.22) 0%, rgba(255,193,7,.10) 25%, rgba(255,140,0,.10) 55%, transparent 82%),
        radial-gradient(ellipse 90% 70% at 50% 50%, rgba(232,240,252,.40) 0%, transparent 70%);
}

.acg-footer::after{
    content:"";
    position:absolute;inset:0;z-index:0;pointer-events:none;
    background:radial-gradient(ellipse 120% 90% at 50% 50%, rgba(253,252,247,0) 0%, rgba(253,252,247,.20) 60%, rgba(253,252,247,.55) 100%);
}

/* Decor */
.footer-bg{
    position:absolute;inset:0;pointer-events:none;z-index:1;overflow:hidden;
}

.footer-bg::before{
    content:"";position:absolute;top:-25%;left:-20%;
    width:70%;height:110%;
    background:radial-gradient(ellipse at 30% 40%, rgba(76,175,80,.18) 0%, rgba(76,175,80,.07) 40%, transparent 70%);
    border-radius:50% 40% 60% 45% / 55% 60% 40% 50%;
    filter:blur(45px);transform:rotate(-15deg);opacity:.9;
}

.footer-bg::after{
    content:"";position:absolute;bottom:-35%;right:-25%;
    width:85%;height:120%;
    background:radial-gradient(ellipse at 60% 60%, rgba(255,140,0,.18) 0%, rgba(255,193,7,.09) 30%, rgba(76,175,80,.08) 60%, transparent 80%);
    border-radius:45% 55% 40% 60% / 60% 45% 55% 40%;
    filter:blur(50px);transform:rotate(-12deg);opacity:.9;
}

/* Leaves */
.f-leaf,.f-orange-leaf{
    position:absolute;display:block;
    border-radius:0 100% 0 100%;
    filter:drop-shadow(0 6px 14px rgba(0,0,0,.10));
    opacity:.85;z-index:2;
}
.f-leaf{background:linear-gradient(135deg,#66BB6A,#2E7D32);}
.f-orange-leaf{background:linear-gradient(135deg,#FFB74D,#E88918);}

.f-leaf-1{width:60px;height:60px;top:12%;left:1.5%;transform:rotate(-30deg);animation:floatLeaf 7s ease-in-out infinite;}
.f-leaf-2{width:44px;height:44px;top:60%;left:2.5%;transform:rotate(45deg);animation:floatLeaf 6s ease-in-out infinite reverse;}
.f-leaf-3{width:52px;height:52px;bottom:18%;right:2%;transform:rotate(20deg);animation:floatLeaf 8s ease-in-out infinite;}
.f-orange-1{width:38px;height:38px;top:35%;right:2.5%;transform:rotate(-20deg);animation:floatLeaf 7.5s ease-in-out infinite;}

/* Dots */
.f-dot{
    position:absolute;width:5px;height:5px;border-radius:50%;
    background:rgba(255,140,0,.55);
    box-shadow:0 0 8px rgba(255,140,0,.4);
    z-index:2;
}
.f-dot-1{top:8%;right:8%;}
.f-dot-2{top:10%;right:10%;}
.f-dot-3{top:8%;right:12%;}

/* =========================================================
   NEWSLETTER STRIP
========================================================= */

.footer-newsletter{
    position:relative;
    z-index:3;

    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:32px;
    flex-wrap:wrap;

    padding:32px 40px;
    margin-bottom:60px;
    border-radius:26px;

    background:linear-gradient(135deg,
        rgba(11,31,58,.98) 0%,
        rgba(16,46,83,.98) 50%,
        rgba(30,91,198,.92) 100%);

    box-shadow:
        0 25px 60px rgba(11,31,58,.25),
        0 8px 20px rgba(11,31,58,.15),
        inset 0 1px 0 rgba(255,255,255,.10);

    overflow:hidden;
}

/* Subtle gold line on top */
.footer-newsletter::before{
    content:"";
    position:absolute;
    top:0;left:8%;right:8%;
    height:1px;
    background:linear-gradient(90deg,transparent,rgba(212,175,55,.65),transparent);
}

/* Soft green/orange glows */
.footer-newsletter::after{
    content:"";
    position:absolute;
    inset:0;
    background:
        radial-gradient(circle at 10% 100%, rgba(76,175,80,.28) 0%, transparent 45%),
        radial-gradient(circle at 95% 0%, rgba(255,140,0,.28) 0%, transparent 45%);
    pointer-events:none;
}

.fn-left{
    position:relative;
    z-index:2;
    flex:1;
    min-width:280px;
}

.fn-eyebrow{
    display:inline-flex;
    align-items:center;
    gap:10px;
    color:#FFC107;
    font-size:11px;
    font-weight:800;
    letter-spacing:2.5px;
    text-transform:uppercase;
    margin-bottom:12px;
}

.fn-line{
    display:inline-block;
    width:26px;
    height:2px;
    background:linear-gradient(90deg,#FFC107,#FF8C00);
    border-radius:2px;
}

.fn-title{
    font-family:'Manrope',sans-serif;
    font-size:clamp(22px,2.4vw,30px);
    font-weight:800;
    color:#fff;
    line-height:1.2;
    letter-spacing:-.6px;
    margin-bottom:10px;
}

.fn-title span{
    background:linear-gradient(135deg,#4CAF50,#FFC107,#FF8C00);
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent;
}

.fn-desc{
    color:rgba(255,255,255,.75);
    font-size:13.5px;
    line-height:1.6;
    margin:0;
    max-width:480px;
    font-weight:400;
}

/* Form */
.fn-form{
    position:relative;
    z-index:2;
    display:flex;
    gap:10px;
    flex-wrap:wrap;
    align-items:center;
    flex:1;
    min-width:340px;
    max-width:520px;
}

.fn-input-wrap{
    position:relative;
    flex:1;
    min-width:240px;
}

.fn-input-icon{
    position:absolute;
    left:18px;
    top:50%;
    transform:translateY(-50%);
    color:rgba(255,255,255,.55);
    font-size:15px;
    pointer-events:none;
    z-index:2;
}

.fn-input{
    width:100%;
    height:56px;
    padding:0 20px 0 48px;

    border-radius:50px;
    border:1.5px solid rgba(255,255,255,.18);
    background:rgba(255,255,255,.10);
    backdrop-filter:blur(10px);

    color:#fff;
    font-size:14px;
    font-weight:500;
    outline:none;
    transition:all .3s ease;
}

.fn-input::placeholder{
    color:rgba(255,255,255,.55);
}

.fn-input:focus{
    border-color:#FFC107;
    background:rgba(255,255,255,.15);
    box-shadow:0 0 0 4px rgba(255,193,7,.15);
}

.fn-btn{
    height:56px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:9px;
    padding:0 30px;
    border-radius:50px;
    border:none;
    background:linear-gradient(135deg,#FFC107,#FF8C00);
    color:#0B1F3A;
    font-size:14.5px;
    font-weight:800;
    letter-spacing:.2px;
    cursor:pointer;
    box-shadow:0 12px 28px rgba(255,140,0,.35);
    transition:all .35s ease;
    position:relative;
    overflow:hidden;
    white-space:nowrap;
}

.fn-btn::before{
    content:"";
    position:absolute;
    top:0;bottom:0;left:-100%;
    width:55%;
    background:linear-gradient(90deg,transparent,rgba(255,255,255,.45),transparent);
    transform:skewX(-20deg);
    transition:left .75s ease;
}

.fn-btn:hover::before{left:140%;}

.fn-btn:hover{
    transform:translateY(-3px);
    box-shadow:0 18px 40px rgba(255,140,0,.50);
}

.fn-btn i{
    position:relative;
    z-index:2;
    transition:transform .3s ease;
}

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

/* =========================================================
   MAIN FOOTER GRID
========================================================= */

.footer-main{
    position:relative;
    z-index:3;
    padding-bottom:60px;
    border-bottom:1px solid rgba(11,31,58,.08);
}

.footer-col{position:relative;}

/* Brand Column */
.brand-col{padding-right:30px;}

.footer-brand{
    display:flex;
    align-items:center;
    gap:14px;
    text-decoration:none;
    margin-bottom:22px;
}

.footer-logo-wrap{
    width:66px;height:66px;
    display:flex;align-items:center;justify-content:center;
    flex-shrink:0;
    position:relative;
}

.footer-logo-wrap::before{
    content:"";
    position:absolute;
    inset:0;
    border-radius:50%;
    background:radial-gradient(circle, rgba(212,175,55,.12), transparent 70%);
}

.footer-logo-wrap img{
    width:64px;height:64px;
    object-fit:contain;
    position:relative;
    z-index:2;
    filter:drop-shadow(0 5px 12px rgba(11,31,58,.18));
    transition:transform .4s ease;
}

.footer-brand:hover .footer-logo-wrap img{
    transform:scale(1.06) rotate(-3deg);
}

.footer-brand-text{display:flex;flex-direction:column;line-height:1;}

.footer-brand-name{
    font-family:'Manrope',sans-serif;
    font-size:18px;
    font-weight:800;
    color:#0B2C6B;
    letter-spacing:-.4px;
}

.footer-brand-tag{
    margin-top:7px;
    font-size:11px;
    font-weight:700;
    letter-spacing:2.8px;
    color:#6A7A90;
}

.footer-about{
    color:#5A6A82;
    font-size:13.5px;
    line-height:1.7;
    margin-bottom:24px;
    font-weight:400;
}

/* Social */
.footer-social{
    display:flex;
    gap:10px;
    flex-wrap:wrap;
}

.fs-link{
    width:42px;height:42px;
    display:flex;align-items:center;justify-content:center;
    border-radius:12px;
    background:rgba(255,255,255,.9);
    border:1.5px solid rgba(11,31,58,.08);
    color:#0B2C6B;
    font-size:16px;
    text-decoration:none;
    transition:all .35s ease;
    box-shadow:0 4px 10px rgba(11,31,58,.06);
}

.fs-link:hover{
    transform:translateY(-4px);
    color:#fff;
    border-color:transparent;
    box-shadow:0 12px 24px rgba(11,31,58,.20);
}

.fs-facebook:hover{background:linear-gradient(135deg,#1877F2,#0B5FCE);}
.fs-instagram:hover{background:linear-gradient(135deg,#E1306C,#F77737,#FFC107);}
.fs-twitter:hover{background:linear-gradient(135deg,#0B1F3A,#152A45);}
.fs-youtube:hover{background:linear-gradient(135deg,#FF0000,#C90000);}
.fs-linkedin:hover{background:linear-gradient(135deg,#0A66C2,#004182);}

/* =========================================================
   HEADINGS & LINKS
========================================================= */

.footer-heading{
    display:flex;
    align-items:center;
    gap:10px;
    font-family:'Manrope',sans-serif;
    font-size:16px;
    font-weight:800;
    color:#0B1F3A;
    letter-spacing:-.2px;
    margin-bottom:22px;
    position:relative;
    padding-bottom:12px;
}

.footer-heading::after{
    content:"";
    position:absolute;
    left:0;bottom:0;
    width:34px;
    height:2px;
    border-radius:2px;
    background:linear-gradient(90deg,#4CAF50,#FFC107);
}

.heading-dot{
    width:7px;height:7px;
    border-radius:50%;
    background:#4CAF50;
    box-shadow:0 0 0 4px rgba(76,175,80,.15);
}

.heading-dot-orange{
    background:#FF8C00;
    box-shadow:0 0 0 4px rgba(255,140,0,.15);
}

.heading-dot-blue{
    background:#1E5BC6;
    box-shadow:0 0 0 4px rgba(30,91,198,.15);
}

/* Links */
.footer-links{
    list-style:none;
    padding:0;margin:0;
    display:flex;
    flex-direction:column;
    gap:11px;
}

.footer-links li a{
    display:inline-flex;
    align-items:center;
    gap:8px;
    color:#5A6A82;
    font-size:13.5px;
    font-weight:500;
    text-decoration:none;
    transition:all .3s ease;
    position:relative;
    padding-left:0;
}

.footer-links li a i{
    font-size:11px;
    color:#B8C5D6;
    transition:all .3s ease;
}

.footer-links li a:hover{
    color:#1E5BC6;
    padding-left:4px;
}

.footer-links li a:hover i{
    color:#4CAF50;
    transform:translateX(2px);
}

/* =========================================================
   CONTACT COLUMN
========================================================= */

.footer-contact{
    list-style:none;
    padding:0;margin:0 0 22px;
    display:flex;
    flex-direction:column;
    gap:16px;
}

.footer-contact li{
    display:flex;
    align-items:center;
    gap:14px;
}

.fc-icon{
    width:44px;height:44px;
    flex-shrink:0;
    display:flex;align-items:center;justify-content:center;
    border-radius:12px;
    color:#fff;
    font-size:16px;
    box-shadow:0 6px 16px rgba(0,0,0,.12);
    transition:transform .4s ease;
}

.footer-contact li:hover .fc-icon{
    transform:scale(1.10) rotate(-6deg);
}

.fc-icon-green{background:linear-gradient(135deg,#66BB6A,#2E7D32);}
.fc-icon-blue{background:linear-gradient(135deg,#1E5BC6,#0B2C6B);}
.fc-icon-orange{background:linear-gradient(135deg,#FFB74D,#E88918);}

.fc-text{display:flex;flex-direction:column;line-height:1.3;}

.fc-text strong{
    font-family:'Manrope',sans-serif;
    font-size:12px;
    font-weight:800;
    color:#0B1F3A;
    letter-spacing:-.1px;
    margin-bottom:3px;
}

.fc-text span{
    font-size:12.5px;
    color:#6A7A90;
    font-weight:500;
    word-break:break-word;
}

/* Mini CTA */
.footer-mini-cta{
    display:inline-flex;
    align-items:center;
    gap:10px;
    padding:12px 22px;
    border-radius:50px;
    background:linear-gradient(135deg,#1E5BC6,#0B2C6B);
    color:#fff;
    font-size:13px;
    font-weight:800;
    letter-spacing:.2px;
    text-decoration:none;
    box-shadow:0 10px 24px rgba(30,91,198,.30);
    transition:all .35s ease;
    position:relative;
    overflow:hidden;
}

.footer-mini-cta::before{
    content:"";
    position:absolute;
    top:0;bottom:0;left:-100%;
    width:55%;
    background:linear-gradient(90deg,transparent,rgba(255,255,255,.35),transparent);
    transform:skewX(-20deg);
    transition:left .75s ease;
}

.footer-mini-cta:hover::before{left:140%;}

.footer-mini-cta:hover{
    color:#fff;
    transform:translateY(-3px);
    box-shadow:0 16px 34px rgba(30,91,198,.45);
}

.footer-mini-cta i{
    position:relative;
    z-index:2;
    font-size:12px;
}

.footer-mini-cta i:first-child{
    animation:heartBeat 1.6s ease-in-out infinite;
    color:#FF4B55;
}

.footer-mini-cta:hover i:last-child{
    transform:translateX(3px);
}

/* =========================================================
   BOTTOM BAR
========================================================= */

.footer-bottom{
    position:relative;
    z-index:3;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
    flex-wrap:wrap;
    padding:28px 0 30px;
}

.fb-copyright{
    margin:0;
    color:#6A7A90;
    font-size:13px;
    font-weight:500;
}

.fb-copyright strong{
    color:#0B2C6B;
    font-weight:800;
    font-family:'Manrope',sans-serif;
}

.fb-right{
    display:flex;
    align-items:center;
    gap:14px;
}

.fb-link{
    color:#6A7A90;
    font-size:13px;
    font-weight:600;
    text-decoration:none;
    transition:all .3s ease;
    position:relative;
}

.fb-link::after{
    content:"";
    position:absolute;
    left:0;bottom:-3px;
    width:0;height:1.5px;
    background:linear-gradient(90deg,#4CAF50,#FF8C00);
    transition:width .35s ease;
}

.fb-link:hover{
    color:#1E5BC6;
}

.fb-link:hover::after{width:100%;}

.fb-divider{
    color:#B8C5D6;
    font-size:12px;
}

/* =========================================================
   SCROLL TO TOP BUTTON
========================================================= */

.scroll-top-btn{
    position:fixed;
    bottom:30px;
    right:30px;
    z-index:9999;

    width:52px;height:52px;
    display:flex;align-items:center;justify-content:center;

    border-radius:50%;
    border:none;

    background:linear-gradient(135deg,#1E5BC6,#0B2C6B);
    color:#fff;
    font-size:20px;

    cursor:pointer;

    box-shadow:
        0 14px 30px rgba(30,91,198,.35),
        inset 0 1px 0 rgba(255,255,255,.20);

    transition:all .4s cubic-bezier(.2,.8,.2,1);
    opacity:0;
    visibility:hidden;
    transform:translateY(20px);
}

.scroll-top-btn.visible{
    opacity:1;
    visibility:visible;
    transform:translateY(0);
}

.scroll-top-btn:hover{
    transform:translateY(-6px) scale(1.08);
    box-shadow:0 20px 40px rgba(30,91,198,.50);
    background:linear-gradient(135deg,#4CAF50,#2E7D32);
}

.scroll-top-btn::before{
    content:"";
    position:absolute;
    inset:-6px;
    border-radius:50%;
    border:2px dashed rgba(30,91,198,.35);
    animation:rotateRing 18s linear infinite;
}

.scroll-top-btn:hover::before{
    border-color:rgba(76,175,80,.55);
}

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

@media(max-width:1199.98px){
    .acg-footer{padding:70px 0 0;}

    .footer-newsletter{padding:28px 32px;gap:24px;}
    .fn-form{min-width:300px;max-width:100%;}

    .footer-main{padding-bottom:50px;}
    .brand-col{padding-right:15px;}

    .footer-brand-name{font-size:16px;}
    .footer-logo-wrap{width:58px;height:58px;}
    .footer-logo-wrap img{width:56px;height:56px;}

    .fn-title{font-size:22px;}
}

@media(max-width:991.98px){

    .acg-footer{padding:60px 0 0;}

    /* Newsletter stacked */
    .footer-newsletter{
        padding:26px 24px;
        flex-direction:column;
        align-items:flex-start;
        border-radius:22px;
        margin-bottom:50px;
    }

    .fn-left, .fn-form{
        min-width:0;
        width:100%;
        max-width:100%;
    }

    .fn-form{flex-direction:column;}
    .fn-input-wrap{width:100%;min-width:0;}
    .fn-btn{width:100%;}

    /* Footer grid spacing */
    .footer-main{padding-bottom:40px;}

    .footer-heading{margin-bottom:18px;}

    /* Bottom bar stacked */
    .footer-bottom{
        flex-direction:column;
        align-items:center;
        text-align:center;
        gap:14px;
        padding:24px 0 26px;
    }

    .fb-right{
        flex-wrap:wrap;
        justify-content:center;
    }

    .scroll-top-btn{
        width:48px;height:48px;
        font-size:18px;
        bottom:24px;right:24px;
    }
}

@media(max-width:575.98px){

    .acg-footer{padding:50px 0 0;}

    .footer-newsletter{
        padding:22px 20px;
        border-radius:20px;
    }

    .fn-title{font-size:19px;}
    .fn-desc{font-size:12.5px;}

    .fn-input{height:52px;font-size:13.5px;}
    .fn-btn{height:52px;font-size:14px;padding:0 22px;}

    .footer-brand{gap:10px;}
    .footer-logo-wrap{width:52px;height:52px;}
    .footer-logo-wrap img{width:50px;height:50px;}
    .footer-brand-name{font-size:15px;letter-spacing:-.3px;}
    .footer-brand-tag{font-size:9.5px;letter-spacing:2.2px;}

    .footer-about{font-size:13px;}

    .fs-link{width:38px;height:38px;font-size:14px;}

    .footer-heading{font-size:15px;}

    .footer-links li a{font-size:13px;}
    .fc-icon{width:40px;height:40px;font-size:15px;}
    .fc-text strong{font-size:11.5px;}
    .fc-text span{font-size:12px;}

    .footer-mini-cta{
        width:100%;
        justify-content:center;
        padding:12px 18px;
        font-size:12.5px;
    }

    .fb-copyright{font-size:12px;}
    .fb-link{font-size:12px;}

    .scroll-top-btn{
        width:44px;height:44px;
        font-size:17px;
        bottom:20px;right:20px;
    }
}


      /* =========================================================
   ACG CAREER FOUNDATION
   HERO SECTION
========================================================= */

      /* =========================================================
   HERO VARIABLES
========================================================= */

      :root {
        --hero-navy: #0b1f3a;

        --hero-blue: #0877b9;

        --hero-green: #16a34a;

        --hero-red: #e84524;

        --hero-orange: #ff9f0a;

        --hero-gold: #f4b000;

        --hero-text: #304c6d;

        --hero-bg: #fafcfd;
      }

      /* =========================================================
   MAIN HERO
========================================================= */

      .acg-hero {
        position: relative;

        min-height: 716px;

        width: 100%;

        overflow: hidden;

        background: linear-gradient(
          105deg,
          #ffffff 0%,
          #ffffff 48%,
          #f7fafb 100%
        );

        isolation: isolate;
      }

      /* =========================================================
   HERO CONTAINER
========================================================= */

      .acg-hero-container {
        position: relative;

        z-index: 5;

        min-height: 716px;

        padding: 105px 5.5% 55px;
      }

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

      .acg-hero-content {
        position: relative;

        z-index: 20;

        padding: 15px 25px 30px 2%;
      }

      /* =========================================================
   EYEBROW
========================================================= */

      .hero-eyebrow {
        display: flex;

        align-items: center;

        gap: 10px;

        margin-bottom: 17px;

        color: var(--hero-navy);

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

        font-size: 13px;

        font-weight: 600;

        letter-spacing: 3.8px;

        text-transform: uppercase;
      }

      .eyebrow-line {
        width: 38px;

        height: 2px;

        position: relative;

        background: var(--hero-gold);
      }

      .eyebrow-line::after {
        content: "";

        position: absolute;

        right: -2px;

        top: -1px;

        width: 5px;

        height: 4px;

        border-radius: 50%;

        background: var(--hero-gold);
      }

      /* =========================================================
   HERO TITLE
========================================================= */

      .hero-title {
        margin: 0;

        max-width: 720px;

        font-family: Georgia, "Times New Roman", serif;

        font-size: clamp(48px, 4.2vw, 73px);

        font-weight: 700;

        line-height: 0.98;

        letter-spacing: -2px;
      }

      .title-line {
        display: block;

        margin-bottom: 2px;
      }

      .title-navy {
        color: var(--hero-navy);
      }

      .title-blue {
        color: var(--hero-blue);
      }

      .title-green {
        color: var(--hero-green);
      }

      .title-red {
        color: var(--hero-red);
      }

      .title-amp {
        color: var(--hero-navy);

        margin-left: 5px;
      }

      /* =========================================================
   DESCRIPTION
========================================================= */

      .hero-description {
        max-width: 625px;

        margin: 25px 0 23px;

        color: var(--hero-text);

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

        font-size: 17px;

        font-weight: 400;

        line-height: 1.65;
      }

      /* =========================================================
   BUTTON WRAPPER
========================================================= */

      .hero-buttons {
        display: flex;

        align-items: center;

        gap: 25px;

        flex-wrap: wrap;
      }

      /* =========================================================
   COMMON BUTTON
========================================================= */

      .hero-btn {
        min-height: 63px;

        padding: 0 29px;

        display: inline-flex;

        align-items: center;

        justify-content: center;

        gap: 15px;

        border-radius: 35px;

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

        font-size: 16px;

        font-weight: 700;

        text-decoration: none;

        transition:
          transform 0.3s ease,
          box-shadow 0.3s ease,
          background 0.3s ease;
      }

      /* =========================================================
   PRIMARY BUTTON
========================================================= */

      .hero-btn-primary {
        min-width: 262px;

        color: #ffffff;

        background: linear-gradient(110deg, #0b4677, #075c98);

        box-shadow: 0 12px 28px rgba(7, 92, 152, 0.22);
      }

      .hero-btn-primary:hover {
        color: #ffffff;

        transform: translateY(-4px);

        box-shadow: 0 17px 35px rgba(7, 92, 152, 0.3);
      }

      .hero-btn-primary i {
        font-size: 22px;

        transition: transform 0.3s ease;
      }

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

      /* =========================================================
   OUTLINE BUTTON
========================================================= */

      .hero-btn-outline {
        min-width: 300px;

        color: #07528a;

        border: 1.5px solid #1672b7;

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

      .hero-btn-outline:hover {
        color: #07528a;

        background: #ffffff;

        transform: translateY(-4px);

        box-shadow: 0 12px 28px rgba(7, 92, 152, 0.1);
      }

      /* =========================================================
   PLAY BUTTON
========================================================= */

      .hero-play-icon {
        width: 29px;

        height: 29px;

        display: inline-flex;

        align-items: center;

        justify-content: center;

        border: 2px solid #0a5c98;

        border-radius: 50%;

        font-size: 15px;
      }

      .hero-play-icon i {
        margin-left: 2px;
      }

      /* =========================================================
   RIGHT VISUAL
========================================================= */

      .acg-hero-visual {
        position: relative;

        min-height: 605px;

        z-index: 3;
      }

      /* =========================================================
   STUDENT PHOTO WRAPPER
========================================================= */

      .hero-photo-wrapper {
        position: absolute;

        top: -105px;

        right: -9%;

        width: 103%;

        height: 815px;

        overflow: hidden;

        z-index: 1;
      }

      /* =========================================================
   STUDENT PHOTO
========================================================= */

      .hero-student-photo {
        position: absolute;

        inset: 0;

        background-image: url("../images/hero-student.png");

        background-size: cover;

        background-position: center center;

        background-repeat: no-repeat;

        /*
       Organic oval / curved left edge
    */

        clip-path: ellipse(76% 67% at 72% 50%);

        transform: scale(1.02);
      }

      /* =========================================================
   PHOTO SOFT OVERLAY
========================================================= */

      .hero-photo-wrapper::after {
        content: "";

        position: absolute;

        inset: 0;

        pointer-events: none;

        background: linear-gradient(
          90deg,
          rgba(255, 255, 255, 0.3),
          transparent 24%,
          transparent 100%
        );

        z-index: 2;
      }

      /* =========================================================
   PHOTO GLOW
========================================================= */

      .hero-photo-glow {
        position: absolute;

        width: 360px;

        height: 360px;

        left: 5%;

        bottom: 2%;

        border-radius: 50%;

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

        filter: blur(60px);

        z-index: 2;
      }

      /* =========================================================
   STATS CARD
========================================================= */

      .hero-stats-card {
        position: absolute;

        left: -3%;

        bottom: 4%;

        width: 470px;

        min-height: 210px;

        padding: 13px 19px;

        z-index: 15;

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

        border-radius: 23px;

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

        backdrop-filter: blur(20px);

        -webkit-backdrop-filter: blur(20px);

        box-shadow: 0 22px 50px rgba(11, 31, 58, 0.13);
      }

      /* =========================================================
   STAT ITEM
========================================================= */

      .hero-stat {
        min-height: 91px;

        display: flex;

        align-items: center;

        gap: 12px;

        padding: 12px 10px;
      }

      .hero-stat:nth-child(-n + 2) {
        border-bottom: 1px solid rgba(11, 31, 58, 0.08);
      }

      .hero-stat:nth-child(odd) {
        border-right: 1px solid rgba(11, 31, 58, 0.08);
      }

      /* =========================================================
   STAT ICON
========================================================= */

      .stat-icon {
        width: 48px;

        height: 48px;

        flex-shrink: 0;

        display: flex;

        align-items: center;

        justify-content: center;

        border-radius: 50%;

        font-size: 21px;
      }

      .stat-blue {
        color: #0865a1;

        background: rgba(8, 101, 161, 0.1);
      }

      .stat-orange {
        color: #f59e0b;

        background: rgba(245, 158, 11, 0.12);
      }

      .stat-red {
        color: #e53838;

        background: rgba(229, 56, 56, 0.1);
      }

      .stat-green {
        color: #159447;

        background: rgba(21, 148, 71, 0.11);
      }

      /* =========================================================
   STAT TEXT
========================================================= */

      .stat-content {
        display: flex;

        flex-direction: column;
      }

      .stat-content strong {
        color: #10426b;

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

        font-size: 27px;

        font-weight: 700;

        line-height: 1;
      }

      .stat-content span {
        margin-top: 5px;

        color: #72849a;

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

        font-size: 12px;

        font-weight: 500;
      }

      /* =========================================================
   BACKGROUND SHAPES
========================================================= */

      .hero-bg-shape {
        position: absolute;

        pointer-events: none;

        z-index: 0;
      }

      .hero-bg-shape-1 {
        width: 570px;

        height: 180px;

        left: -100px;

        bottom: -80px;

        border-radius: 50%;

        background: rgba(226, 238, 249, 0.75);

        filter: blur(2px);

        transform: rotate(8deg);
      }

      .hero-bg-shape-2 {
        width: 420px;

        height: 170px;

        right: 14%;

        bottom: -90px;

        border-radius: 50%;

        background: rgba(239, 246, 244, 0.75);

        transform: rotate(-8deg);
      }

      /* =========================================================
   BOTTOM WAVE
========================================================= */

      .hero-bottom-wave {
        position: absolute;

        left: -5%;

        bottom: -85px;

        width: 115%;

        height: 170px;

        z-index: 6;

        border-radius: 50% 50% 0 0;

        background: rgba(247, 250, 252, 0.85);

        pointer-events: none;
      }

      /* =========================================================
   ANIMATED LEAVES
========================================================= */

      .hero-leaves {
        position: absolute;

        inset: 0;

        z-index: 10;

        pointer-events: none;

        overflow: hidden;
      }

      /* =========================================================
   COMMON LEAF
========================================================= */

      .hero-leaf {
        position: absolute;

        display: block;

        width: 38px;

        height: 74px;

        border-radius: 100% 0 100% 0;

        opacity: 0.72;

        filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.08));

        transform-origin: bottom center;
      }

      /* =========================================================
   LEAF 1
========================================================= */

      .leaf-one {
        top: 48px;

        left: 46%;

        width: 39px;

        height: 77px;

        background: linear-gradient(135deg, #65d77e, #18a84a);

        transform: rotate(25deg);

        animation: leafFloatOne 8s ease-in-out infinite;
      }

      /* =========================================================
   LEAF 2
========================================================= */

      .leaf-two {
        top: 117px;

        left: 49%;

        width: 31px;

        height: 60px;

        background: linear-gradient(135deg, #ffb42a, #f47b16);

        transform: rotate(48deg);

        animation: leafFloatTwo 9s ease-in-out infinite;
      }

      /* =========================================================
   LEAF 3
========================================================= */

      .leaf-three {
        right: 42%;

        bottom: 42px;

        width: 36px;

        height: 68px;

        background: linear-gradient(135deg, #3dcb75, #0b9c55);

        transform: rotate(-22deg);

        animation: leafFloatThree 10s ease-in-out infinite;
      }

      /* =========================================================
   LEAF 4
========================================================= */

      .leaf-four {
        left: 0;

        bottom: 8px;

        width: 31px;

        height: 64px;

        background: linear-gradient(135deg, #69d67a, #1fa852);

        transform: rotate(42deg);

        animation: leafFloatFour 9s ease-in-out infinite;
      }

      /* =========================================================
   LEAF 5
========================================================= */

      .leaf-five {
        right: 35%;

        top: 49%;

        width: 24px;

        height: 49px;

        background: linear-gradient(135deg, #ffcf49, #ff9415);

        opacity: 0.42;

        transform: rotate(-35deg);

        animation: leafFloatFive 11s ease-in-out infinite;
      }

      /* =========================================================
   LEAF 6
========================================================= */

      .leaf-six {
        left: 39%;

        bottom: 12%;

        width: 23px;

        height: 45px;

        background: linear-gradient(135deg, #55c96d, #15994c);

        opacity: 0.36;

        transform: rotate(30deg);

        animation: leafFloatSix 12s ease-in-out infinite;
      }

      /* =========================================================
   LEAF ANIMATIONS

   IMPORTANT:
   Leaves continuously remain visible.
   They don't go out of screen.
========================================================= */

      @keyframes leafFloatOne {
        0%,
        100% {
          transform: translate3d(0, 0, 0) rotate(25deg);
        }

        50% {
          transform: translate3d(9px, 14px, 0) rotate(34deg);
        }
      }

      @keyframes leafFloatTwo {
        0%,
        100% {
          transform: translate3d(0, 0, 0) rotate(48deg);
        }

        50% {
          transform: translate3d(-10px, 12px, 0) rotate(39deg);
        }
      }

      @keyframes leafFloatThree {
        0%,
        100% {
          transform: translate3d(0, 0, 0) rotate(-22deg);
        }

        50% {
          transform: translate3d(-8px, -11px, 0) rotate(-12deg);
        }
      }

      @keyframes leafFloatFour {
        0%,
        100% {
          transform: translate3d(0, 0, 0) rotate(42deg);
        }

        50% {
          transform: translate3d(8px, -10px, 0) rotate(32deg);
        }
      }

      @keyframes leafFloatFive {
        0%,
        100% {
          transform: translate3d(0, 0, 0) rotate(-35deg);
        }

        50% {
          transform: translate3d(6px, 9px, 0) rotate(-25deg);
        }
      }

      @keyframes leafFloatSix {
        0%,
        100% {
          transform: translate3d(0, 0, 0) rotate(30deg);
        }

        50% {
          transform: translate3d(-7px, -8px, 0) rotate(40deg);
        }
      }

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

      .acg-hero-content {
        opacity: 0;

        transform: translateY(25px);

        animation: heroContentReveal 0.9s 0.15s ease forwards;
      }

      .hero-photo-wrapper {
        opacity: 0;

        transform: translateX(25px);

        animation: heroPhotoReveal 1s 0.2s ease forwards;
      }

      .hero-stats-card {
        opacity: 0;

        transform: translateY(18px);

        animation: heroStatsReveal 0.8s 0.7s ease forwards;
      }

      @keyframes heroContentReveal {
        to {
          opacity: 1;

          transform: translateY(0);
        }
      }

      @keyframes heroPhotoReveal {
        to {
          opacity: 1;

          transform: translateX(0);
        }
      }

      @keyframes heroStatsReveal {
        to {
          opacity: 1;

          transform: translateY(0);
        }
      }

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

      @media (max-width: 1200px) {
        .acg-hero-container {
          padding-left: 4%;

          padding-right: 4%;
        }

        .hero-title {
          font-size: clamp(43px, 5vw, 62px);
        }

        .hero-description {
          font-size: 15px;

          max-width: 530px;
        }

        .hero-stats-card {
          width: 430px;

          left: -2%;
        }

        .hero-photo-wrapper {
          right: -15%;

          width: 112%;
        }
      }

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

      @media (max-width: 991.98px) {
        .acg-hero {
          min-height: auto;

          overflow: hidden;
        }

        .acg-hero-container {
          min-height: auto;

          padding: 100px 20px 50px;
        }

        /*
       IMPORTANT MOBILE ORDER

       1. PHOTO
       2. TEXT
       3. BUTTONS
       4. STATS
    */

        .acg-hero-visual {
          order: 1;

          min-height: 430px;

          width: 100%;

          margin-bottom: 10px;
        }

        .acg-hero-content {
          order: 2;

          padding: 0 10px 20px;
        }

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

        .hero-photo-wrapper {
          top: -20px;

          right: -8%;

          width: 116%;

          height: 450px;
        }

        .hero-student-photo {
          clip-path: ellipse(78% 67% at 69% 45%);

          background-position: center center;
        }

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

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

        .hero-stats-card {
          left: 5%;

          right: 5%;

          bottom: 0;

          width: 90%;

          min-height: 180px;

          border-radius: 20px;

          padding: 8px 12px;
        }

        .hero-stat {
          min-height: 78px;

          padding: 8px;
        }

        .stat-icon {
          width: 40px;

          height: 40px;

          font-size: 17px;
        }

        .stat-content strong {
          font-size: 21px;
        }

        .stat-content span {
          font-size: 10px;
        }

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

        .hero-eyebrow {
          font-size: 10px;

          letter-spacing: 2.7px;

          margin-bottom: 12px;
        }

        .eyebrow-line {
          width: 28px;
        }

        .hero-title {
          font-size: clamp(40px, 10vw, 58px);

          line-height: 1;

          letter-spacing: -1.5px;
        }

        .hero-description {
          max-width: 100%;

          margin: 20px 0;

          font-size: 14px;

          line-height: 1.65;
        }

        .hero-buttons {
          gap: 12px;
        }

        .hero-btn {
          min-height: 56px;

          padding: 0 20px;

          font-size: 14px;
        }

        .hero-btn-primary,
        .hero-btn-outline {
          min-width: 0;
        }

        .hero-btn-primary {
          flex: 1;
        }

        .hero-btn-outline {
          flex: 1;
        }

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

        .leaf-one {
          top: 75px;

          left: 4%;

          width: 27px;

          height: 54px;
        }

        .leaf-two {
          top: 145px;

          left: 11%;

          width: 23px;

          height: 45px;
        }

        .leaf-three {
          right: 4%;

          bottom: 200px;

          width: 27px;

          height: 53px;
        }

        .leaf-four {
          left: -3px;

          bottom: 20px;

          width: 24px;

          height: 48px;
        }

        .leaf-five,
        .leaf-six {
          display: none;
        }

        .hero-bottom-wave {
          height: 100px;

          bottom: -55px;
        }
      }

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

      @media (max-width: 575.98px) {
        .acg-hero-container {
          padding: 92px 13px 40px;
        }

        .acg-hero-visual {
          min-height: 375px;
        }

        .hero-photo-wrapper {
          height: 395px;

          top: -12px;

          right: -13%;

          width: 123%;
        }

        .hero-stats-card {
          bottom: 0;

          width: 94%;

          left: 3%;

          right: 3%;

          min-height: 155px;

          padding: 5px 7px;
        }

        .hero-stat {
          min-height: 70px;

          gap: 7px;

          padding: 6px;
        }

        .stat-icon {
          width: 34px;

          height: 34px;

          font-size: 14px;
        }

        .stat-content strong {
          font-size: 18px;
        }

        .stat-content span {
          font-size: 8.5px;

          margin-top: 3px;
        }

        .hero-eyebrow {
          font-size: 8.5px;

          letter-spacing: 2.1px;
        }

        .hero-title {
          font-size: 39px;

          line-height: 1.01;
        }

        .hero-description {
          font-size: 13.5px;

          line-height: 1.6;
        }

        .hero-buttons {
          flex-direction: column;

          width: 100%;
        }

        .hero-btn {
          width: 100%;

          min-height: 54px;
        }

        .hero-btn-primary,
        .hero-btn-outline {
          flex: none;

          width: 100%;
        }
      }

      /* =========================================================
   REDUCED MOTION
========================================================= */

      @media (prefers-reduced-motion: reduce) {
        .hero-leaf,
        .acg-hero-content,
        .hero-photo-wrapper,
        .hero-stats-card {
          animation: none !important;

          transition: none !important;
        }
      }

      /* =========================================================
      HOW WE ARE*/


      /* =========================================================
   VARIABLES
========================================================= */

      :root {
        --acg-navy: #0b1f3a;

        --acg-blue: #0869a7;

        --acg-green: #169447;

        --acg-orange: #f59a16;

        --acg-red: #e74628;

        --acg-text: #405875;

        --acg-light: #f7fafc;

        --acg-border: rgba(11, 31, 58, 0.08);
      }

      /* =========================================================
   MAIN SECTION
========================================================= */

      .acg-about-section {
        position: relative;

        width: 100%;

        padding: 100px 0 110px;

        overflow: hidden;

        background: linear-gradient(
          180deg,
          #ffffff 0%,
          #fbfcfd 52%,
          #f7fafc 100%
        );

        isolation: isolate;
      }

      /* =========================================================
   BACKGROUND ORBS
========================================================= */

      .about-bg-orb {
        position: absolute;

        border-radius: 50%;

        pointer-events: none;

        filter: blur(3px);

        z-index: -1;
      }

      .about-orb-one {
        width: 420px;

        height: 420px;

        left: -230px;

        top: 230px;

        background: rgba(217, 238, 249, 0.42);
      }

      .about-orb-two {
        width: 350px;

        height: 350px;

        right: -200px;

        bottom: 120px;

        background: rgba(221, 244, 230, 0.45);
      }

      /* =========================================================
   SECTION HEADING
========================================================= */

      .about-eyebrow {
        display: flex;

        align-items: center;

        gap: 11px;

        color: var(--acg-blue);

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

        font-size: 11px;

        font-weight: 700;

        letter-spacing: 3.2px;
      }

      .about-eyebrow span {
        width: 34px;

        height: 2px;

        position: relative;

        background: var(--acg-orange);
      }

      .about-eyebrow span::after {
        content: "";

        position: absolute;

        width: 5px;

        height: 5px;

        right: -2px;

        top: -1.5px;

        border-radius: 50%;

        background: var(--acg-orange);
      }

      .about-section-heading h2 {
        margin: 10px 0 0;

        color: var(--acg-navy);

        font-family: Georgia, "Times New Roman", serif;

        font-size: clamp(46px, 5vw, 68px);

        line-height: 1;

        letter-spacing: -1.8px;
      }

      .about-section-heading h2 span {
        color: var(--acg-blue);
      }

      .about-heading-line {
        width: 65px;

        height: 4px;

        margin-top: 16px;

        border-radius: 10px;

        background: linear-gradient(90deg, var(--acg-orange), var(--acg-green));
      }

      /* =========================================================
   MAIN ROW
========================================================= */

      .about-main-row {
        position: relative;
      }

      /* =========================================================
   IMAGE AREA
========================================================= */

      .about-image-area {
        position: relative;

        min-height: 470px;

        padding: 15px 35px 30px 5px;
      }

      /* =========================================================
   IMAGE FRAME
========================================================= */

      .about-image-frame {
        position: relative;

        width: 100%;

        max-width: 455px;

        height: 410px;

        overflow: hidden;

        border-radius: 30px 30px 90px 30px;

        background: #eaf2f6;

        box-shadow: 0 25px 60px rgba(11, 31, 58, 0.13);
      }

      /* IMAGE */

      .about-main-image {
        width: 100%;

        height: 100%;

        object-fit: cover;

        object-position: center;

        display: block;

        transition: transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1);
      }

      .about-image-frame:hover .about-main-image {
        transform: scale(1.045);
      }

      /* =========================================================
   IMAGE INNER GLOW
========================================================= */

      .about-image-frame::after {
        content: "";

        position: absolute;

        inset: 0;

        pointer-events: none;

        background: linear-gradient(
          135deg,
          rgba(255, 255, 255, 0.18),
          transparent 45%,
          rgba(11, 31, 58, 0.08)
        );
      }

      /* =========================================================
   BLUE ORGANIC BADGE
========================================================= */

      .about-image-badge {
        position: absolute;

        left: -5px;

        bottom: 30px;

        display: flex;

        align-items: center;

        gap: 13px;

        min-width: 220px;

        padding: 15px 20px;

        border-radius: 22px 45px 45px 22px;

        background: linear-gradient(135deg, #073d68, #0b5c91);

        box-shadow: 0 16px 35px rgba(7, 61, 104, 0.23);

        z-index: 4;
      }

      .badge-icon {
        width: 42px;

        height: 42px;

        flex-shrink: 0;

        display: flex;

        align-items: center;

        justify-content: center;

        border-radius: 50%;

        color: #ffffff;

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

        font-size: 18px;
      }

      .about-image-badge strong {
        display: block;

        color: #ffffff;

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

        font-size: 15px;

        font-weight: 700;
      }

      .about-image-badge span {
        display: block;

        margin-top: 2px;

        color: rgba(255, 255, 255, 0.76);

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

        font-size: 10px;
      }

      /* =========================================================
   MINI CARD
========================================================= */

      .about-image-mini-card {
        position: absolute;

        right: 25px;

        top: 20px;

        display: flex;

        align-items: center;

        gap: 7px;

        padding: 9px 13px;

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

        border-radius: 30px;

        color: var(--acg-green);

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

        backdrop-filter: blur(14px);

        -webkit-backdrop-filter: blur(14px);

        box-shadow: 0 10px 30px rgba(11, 31, 58, 0.1);

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

        font-size: 10px;

        font-weight: 600;

        z-index: 5;
      }

      .about-image-mini-card i {
        font-size: 13px;
      }

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

      .about-content {
        padding: 15px 15px 20px;
      }

      .about-content-label {
        display: flex;

        align-items: center;

        gap: 8px;

        margin-bottom: 13px;

        color: var(--acg-orange);

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

        font-size: 10px;

        font-weight: 700;

        letter-spacing: 2.4px;
      }

      .about-content-label span {
        width: 25px;

        height: 2px;

        background: var(--acg-orange);
      }

      .about-content h3 {
        margin: 0 0 18px;

        color: var(--acg-navy);

        font-family: Georgia, "Times New Roman", serif;

        font-size: clamp(30px, 3vw, 43px);

        line-height: 1.08;

        letter-spacing: -0.8px;
      }

      .about-content h3 span {
        color: var(--acg-green);
      }

      .about-description {
        margin-bottom: 14px;

        color: var(--acg-text);

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

        font-size: 14px;

        line-height: 1.8;
      }

      .about-description-secondary {
        color: #718399;

        font-size: 13px;
      }

      /* =========================================================
   LEARN BUTTON
========================================================= */

      .about-learn-btn {
        display: inline-flex;

        align-items: center;

        gap: 13px;

        margin-top: 9px;

        padding: 13px 21px;

        color: #ffffff;

        border-radius: 30px;

        background: linear-gradient(110deg, #0b4d7d, #086da8);

        box-shadow: 0 12px 25px rgba(8, 109, 168, 0.19);

        text-decoration: none;

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

        font-size: 12px;

        font-weight: 700;

        transition: all 0.3s ease;
      }

      .about-learn-btn:hover {
        color: #ffffff;

        transform: translateY(-3px);

        box-shadow: 0 16px 32px rgba(8, 109, 168, 0.26);
      }

      .about-learn-btn i {
        transition: transform 0.3s ease;
      }

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

      /* =========================================================
   INFO STACK
========================================================= */

      .about-info-stack {
        display: flex;

        flex-direction: column;

        gap: 12px;
      }

      .about-info-card {
        position: relative;

        display: flex;

        align-items: flex-start;

        gap: 12px;

        padding: 17px 15px;

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

        border-radius: 18px;

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

        backdrop-filter: blur(18px);

        -webkit-backdrop-filter: blur(18px);

        box-shadow: 0 12px 35px rgba(11, 31, 58, 0.075);

        transition:
          transform 0.35s ease,
          box-shadow 0.35s ease,
          border-color 0.35s ease;
      }

      .about-info-card:hover {
        transform: translateX(-6px);

        box-shadow: 0 18px 42px rgba(11, 31, 58, 0.12);

        border-color: rgba(8, 105, 167, 0.14);
      }

      /* =========================================================
   INFO ICON
========================================================= */

      .about-info-icon {
        width: 48px;

        height: 48px;

        flex-shrink: 0;

        display: flex;

        align-items: center;

        justify-content: center;

        border-radius: 50%;

        font-size: 19px;
      }

      .icon-blue {
        color: #0869a7;

        background: rgba(8, 105, 167, 0.11);
      }

      .icon-green {
        color: #169447;

        background: rgba(22, 148, 71, 0.11);
      }

      .icon-orange {
        color: #f08a08;

        background: rgba(240, 138, 8, 0.12);
      }

      /* =========================================================
   INFO TEXT
========================================================= */

      .about-info-content h4 {
        margin: 1px 0 5px;

        color: var(--acg-navy);

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

        font-size: 14px;

        font-weight: 700;
      }

      .about-info-content p {
        margin: 0;

        color: #74869a;

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

        font-size: 10.5px;

        line-height: 1.65;
      }

      /* =========================================================
   IMPACT SECTION
========================================================= */

      .about-impact-wrapper {
        position: relative;

        margin-top: 70px;

        padding: 27px 30px 18px;

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

        border-radius: 27px;

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

        backdrop-filter: blur(20px);

        -webkit-backdrop-filter: blur(20px);

        box-shadow: 0 18px 55px rgba(11, 31, 58, 0.075);
      }

      .about-impact-header {
        display: flex;

        align-items: flex-end;

        justify-content: space-between;

        gap: 30px;

        padding: 0 5px 20px;
      }

      .about-impact-eyebrow {
        color: var(--acg-orange);

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

        font-size: 9px;

        font-weight: 700;

        letter-spacing: 2.5px;
      }

      .about-impact-header h3 {
        margin: 5px 0 0;

        color: var(--acg-navy);

        font-family: Georgia, "Times New Roman", serif;

        font-size: 28px;
      }

      .about-impact-header h3 span {
        color: var(--acg-green);
      }

      .about-impact-header > p {
        max-width: 390px;

        margin: 0;

        color: #74869a;

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

        font-size: 11px;

        line-height: 1.6;
      }

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

      .about-stats-row {
        border-top: 1px solid rgba(11, 31, 58, 0.07);
      }

      .about-stat {
        position: relative;

        min-height: 125px;

        display: flex;

        flex-direction: column;

        align-items: center;

        justify-content: center;

        text-align: center;
      }

      .about-stat + .about-stat {
        border-left: 1px solid rgba(11, 31, 58, 0.07);
      }

      /* =========================================================
   STAT ICON
========================================================= */

      .about-stat-icon {
        width: 36px;

        height: 36px;

        display: flex;

        align-items: center;

        justify-content: center;

        margin-bottom: 7px;

        border-radius: 50%;

        font-size: 14px;
      }

      .stat-icon-blue {
        color: #0871ae;

        background: rgba(8, 113, 174, 0.1);
      }

      .stat-icon-orange {
        color: #f49a0a;

        background: rgba(244, 154, 10, 0.11);
      }

      .stat-icon-red {
        color: #e74628;

        background: rgba(231, 70, 40, 0.1);
      }

      .stat-icon-green {
        color: #15964a;

        background: rgba(21, 150, 74, 0.1);
      }

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

      .about-stat-number {
        color: var(--acg-navy);

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

        font-size: 28px;

        font-weight: 800;

        line-height: 1;
      }

      .counter-plus {
        color: var(--acg-orange);
      }

      .about-stat-label {
        margin-top: 5px;

        color: #718399;

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

        font-size: 10px;

        font-weight: 500;
      }

      /* =========================================================
   FLOATING LEAVES
========================================================= */

      .about-floating-leaves {
        position: absolute;

        inset: 0;

        pointer-events: none;

        z-index: 2;
      }

      .about-leaf {
        position: absolute;

        display: block;

        border-radius: 100% 0 100% 0;

        opacity: 0.58;

        transform-origin: bottom center;
      }

      .about-leaf-1 {
        left: 12px;

        top: 34%;

        width: 28px;

        height: 57px;

        background: linear-gradient(135deg, #72d886, #159c4c);

        transform: rotate(36deg);

        animation: aboutLeafFloat1 9s ease-in-out infinite;
      }

      .about-leaf-2 {
        right: 15px;

        top: 18%;

        width: 26px;

        height: 52px;

        background: linear-gradient(135deg, #73d67d, #1ba050);

        transform: rotate(-25deg);

        animation: aboutLeafFloat2 10s ease-in-out infinite;
      }

      .about-leaf-3 {
        right: 3%;

        bottom: 15%;

        width: 33px;

        height: 65px;

        background: linear-gradient(135deg, #59c972, #16944b);

        transform: rotate(45deg);

        animation: aboutLeafFloat3 11s ease-in-out infinite;
      }

      .about-leaf-4 {
        left: 44%;

        bottom: 7%;

        width: 21px;

        height: 42px;

        opacity: 0.28;

        background: linear-gradient(135deg, #f8bd35, #f08a0b);

        transform: rotate(-35deg);

        animation: aboutLeafFloat4 12s ease-in-out infinite;
      }

      /* =========================================================
   LEAF ANIMATIONS
   CONTINUOUS — NEVER DISAPPEAR
========================================================= */

      @keyframes aboutLeafFloat1 {
        0%,
        100% {
          transform: translate3d(0, 0, 0) rotate(36deg);
        }

        50% {
          transform: translate3d(7px, 12px, 0) rotate(43deg);
        }
      }

      @keyframes aboutLeafFloat2 {
        0%,
        100% {
          transform: translate3d(0, 0, 0) rotate(-25deg);
        }

        50% {
          transform: translate3d(-8px, 10px, 0) rotate(-17deg);
        }
      }

      @keyframes aboutLeafFloat3 {
        0%,
        100% {
          transform: translate3d(0, 0, 0) rotate(45deg);
        }

        50% {
          transform: translate3d(-7px, -10px, 0) rotate(36deg);
        }
      }

      @keyframes aboutLeafFloat4 {
        0%,
        100% {
          transform: translate3d(0, 0, 0) rotate(-35deg);
        }

        50% {
          transform: translate3d(6px, -8px, 0) rotate(-25deg);
        }
      }

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

      .reveal-about {
        opacity: 0;

        transform: translateY(28px);

        transition:
          opacity 0.8s ease,
          transform 0.8s cubic-bezier(0.2, 0.7, 0.2, 1);
      }

      .reveal-about.about-visible {
        opacity: 1;

        transform: translateY(0);
      }

      /* =========================================================
   STAGGER
========================================================= */

      .about-info-stack .about-info-card:nth-child(1) {
        transition-delay: 0.1s;
      }

      .about-info-stack .about-info-card:nth-child(2) {
        transition-delay: 0.2s;
      }

      .about-info-stack .about-info-card:nth-child(3) {
        transition-delay: 0.3s;
      }

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

      @media (max-width: 1199.98px) {
        .about-image-area {
          padding-right: 15px;
        }

        .about-image-frame {
          height: 380px;
        }

        .about-content {
          padding: 10px;
        }

        .about-info-card {
          padding: 14px 12px;
        }

        .about-info-icon {
          width: 42px;

          height: 42px;
        }

        .about-info-content p {
          font-size: 9.5px;
        }
      }

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

      @media (max-width: 991.98px) {
        .acg-about-section {
          padding: 75px 0 80px;
        }

        .about-section-heading {
          margin-bottom: 5px;
        }

        .about-main-row {
          display: flex;

          flex-direction: column;
        }

        /* IMAGE FIRST */

        .about-main-row > .col-lg-5 {
          order: 1;
        }

        /* CONTENT SECOND */

        .about-main-row > .col-lg-4 {
          order: 2;
        }

        /* INFO THIRD */

        .about-main-row > .col-lg-3 {
          order: 3;
        }

        .about-image-area {
          min-height: 390px;

          padding: 15px 15px 30px;
        }

        .about-image-frame {
          max-width: 600px;

          height: 360px;

          margin: 0 auto;

          border-radius: 28px 28px 70px 28px;
        }

        .about-image-badge {
          left: 15px;

          bottom: 25px;
        }

        .about-image-mini-card {
          right: 20px;
        }

        .about-content {
          padding: 10px 5px 30px;
        }

        .about-content h3 {
          font-size: 38px;
        }

        .about-description {
          font-size: 13.5px;
        }

        .about-info-stack {
          display: grid;

          grid-template-columns: repeat(3, 1fr);

          gap: 12px;
        }

        .about-info-card {
          height: 100%;

          flex-direction: column;

          align-items: flex-start;
        }

        .about-info-card:hover {
          transform: translateY(-5px);
        }

        .about-impact-wrapper {
          margin-top: 50px;
        }

        .about-impact-header {
          align-items: flex-start;

          flex-direction: column;
        }
      }

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

      @media (max-width: 575.98px) {
        .acg-about-section {
          padding: 60px 0 65px;
        }

        .about-section-heading h2 {
          font-size: 46px;
        }

        .about-eyebrow {
          font-size: 9px;

          letter-spacing: 2px;
        }

        .about-image-area {
          min-height: 330px;

          padding: 10px 4px 30px;
        }

        .about-image-frame {
          height: 300px;

          border-radius: 22px 22px 60px 22px;
        }

        .about-image-badge {
          left: 0;

          bottom: 18px;

          min-width: 195px;

          padding: 11px 14px;
        }

        .badge-icon {
          width: 36px;

          height: 36px;

          font-size: 15px;
        }

        .about-image-badge strong {
          font-size: 13px;
        }

        .about-image-badge span {
          font-size: 8.5px;
        }

        .about-image-mini-card {
          right: 5px;

          top: 8px;

          font-size: 8px;
        }

        .about-content {
          padding: 5px 0 25px;
        }

        .about-content h3 {
          font-size: 31px;
        }

        .about-description {
          font-size: 13px;

          line-height: 1.7;
        }

        .about-info-stack {
          grid-template-columns: 1fr;

          gap: 10px;
        }

        .about-info-card {
          flex-direction: row;

          align-items: center;

          padding: 14px;
        }

        .about-info-icon {
          width: 43px;

          height: 43px;
        }

        .about-info-content h4 {
          font-size: 13px;
        }

        .about-info-content p {
          font-size: 9.5px;
        }

        /* =====================================================
       IMPACT CARD
    ================================================== */

        .about-impact-wrapper {
          margin-top: 40px;

          padding: 20px 12px 8px;

          border-radius: 21px;
        }

        .about-impact-header {
          padding: 0 5px 15px;
        }

        .about-impact-header h3 {
          font-size: 23px;
        }

        .about-impact-header > p {
          font-size: 10px;
        }

        .about-stat {
          min-height: 110px;
        }

        .about-stat-number {
          font-size: 23px;
        }

        .about-stat-label {
          font-size: 9px;
        }

        .about-stat-icon {
          width: 32px;

          height: 32px;

          font-size: 12px;
        }

        .about-leaf-1 {
          left: -8px;
        }

        .about-leaf-2 {
          right: -8px;
        }

        .about-leaf-3 {
          right: -7px;
        }
      }

      /* =========================================================
   REDUCED MOTION
========================================================= */

      @media (prefers-reduced-motion: reduce) {
        .about-leaf,
        .reveal-about,
        .about-main-image {
          animation: none !important;

          transition: none !important;
        }
      }


      /* =========================================================
   ACG — OUR PROGRAMS
========================================================= */

      :root {
        --program-navy: #0b1f3a;
        --program-blue: #0869a7;
        --program-green: #169447;
        --program-orange: #f59a16;
        --program-red: #e74628;
        --program-text: #52677d;
      }

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

      .acg-programs-section {
        position: relative;

        padding: 100px 0 105px;

        overflow: hidden;

        background: linear-gradient(
          180deg,
          #f8fafc 0%,
          #ffffff 48%,
          #f8fbfa 100%
        );

        isolation: isolate;
      }

      /* =========================================================
   BACKGROUND ORBS
========================================================= */

      .programs-orb {
        position: absolute;

        border-radius: 50%;

        pointer-events: none;

        z-index: -1;

        filter: blur(4px);
      }

      .programs-orb-1 {
        width: 420px;
        height: 420px;

        left: -250px;
        top: 100px;

        background: rgba(215, 237, 249, 0.42);
      }

      .programs-orb-2 {
        width: 380px;
        height: 380px;

        right: -230px;
        bottom: 50px;

        background: rgba(220, 243, 229, 0.4);
      }

      /* =========================================================
   HEADER
========================================================= */

      .programs-header {
        display: flex;

        align-items: flex-end;

        justify-content: space-between;

        gap: 30px;

        margin-bottom: 42px;
      }

      .programs-eyebrow {
        display: flex;

        align-items: center;

        gap: 9px;

        margin-bottom: 9px;

        color: var(--program-blue);

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

        font-size: 10px;

        font-weight: 700;

        letter-spacing: 3px;
      }

      .eyebrow-dot {
        width: 8px;
        height: 8px;

        border-radius: 50%;

        background: var(--program-orange);

        box-shadow: 0 0 0 4px rgba(245, 154, 22, 0.1);
      }

      .programs-heading h2 {
        margin: 0;

        color: var(--program-navy);

        font-family: Georgia, "Times New Roman", serif;

        font-size: clamp(38px, 4vw, 55px);

        line-height: 1.08;

        letter-spacing: -1.5px;
      }

      .programs-heading h2 span {
        color: var(--program-blue);
      }

      .programs-heading p {
        max-width: 610px;

        margin: 13px 0 0;

        color: #708298;

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

        font-size: 12px;

        line-height: 1.7;
      }

      /* =========================================================
   VIEW ALL
========================================================= */

      .programs-view-all {
        display: inline-flex;

        align-items: center;

        gap: 9px;

        padding-bottom: 7px;

        color: var(--program-blue);

        border-bottom: 1px solid rgba(8, 105, 167, 0.3);

        text-decoration: none;

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

        font-size: 11px;

        font-weight: 700;

        white-space: nowrap;

        transition: all 0.3s ease;
      }

      .programs-view-all i {
        transition: transform 0.3s ease;
      }

      .programs-view-all:hover {
        color: var(--program-orange);

        border-color: var(--program-orange);
      }

      .programs-view-all:hover i {
        transform: translate(3px, -3px);
      }

      /* =========================================================
   GRID
========================================================= */

      .programs-grid {
        position: relative;

        z-index: 2;
      }

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

      .program-card {
        position: relative;

        height: 100%;

        overflow: hidden;

        border: 1px solid rgba(11, 31, 58, 0.075);

        border-radius: 24px;

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

        box-shadow: 0 12px 38px rgba(11, 31, 58, 0.065);

        transition:
          transform 0.45s cubic-bezier(0.2, 0.7, 0.2, 1),
          box-shadow 0.45s ease,
          border-color 0.45s ease;
      }

      .program-card:hover {
        transform: translateY(-9px);

        border-color: rgba(8, 105, 167, 0.15);

        box-shadow: 0 24px 55px rgba(11, 31, 58, 0.13);
      }

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

      .program-image-wrap {
        position: relative;

        height: 205px;

        overflow: hidden;

        background: #e8eef2;
      }

      .program-image {
        width: 100%;
        height: 100%;

        display: block;

        object-fit: cover;

        object-position: center;

        transition: transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1);
      }

      .program-card:hover .program-image {
        transform: scale(1.075);
      }

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

      .program-image-overlay {
        position: absolute;

        inset: 0;

        background: linear-gradient(
          180deg,
          rgba(11, 31, 58, 0.03) 25%,
          rgba(11, 31, 58, 0.34) 100%
        );

        opacity: 0.65;

        transition: opacity 0.4s ease;
      }

      .program-card:hover .program-image-overlay {
        opacity: 0.85;
      }

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

      .program-number {
        position: absolute;

        right: 14px;

        top: 13px;

        display: flex;

        align-items: center;

        justify-content: center;

        width: 34px;
        height: 34px;

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

        border-radius: 50%;

        color: #ffffff;

        background: rgba(11, 31, 58, 0.3);

        backdrop-filter: blur(10px);

        -webkit-backdrop-filter: blur(10px);

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

        font-size: 10px;

        font-weight: 700;
      }

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

      .program-category {
        position: absolute;

        left: 14px;

        bottom: 13px;

        display: inline-flex;

        align-items: center;

        gap: 5px;

        padding: 6px 10px;

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

        border-radius: 20px;

        color: #ffffff;

        backdrop-filter: blur(12px);

        -webkit-backdrop-filter: blur(12px);

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

        font-size: 8px;

        font-weight: 700;

        letter-spacing: 0.7px;
      }

      .category-blue {
        background: rgba(8, 105, 167, 0.76);
      }

      .category-red {
        background: rgba(231, 70, 40, 0.76);
      }

      .category-green {
        background: rgba(22, 148, 71, 0.76);
      }

      .category-orange {
        background: rgba(245, 138, 14, 0.82);
      }

      .program-category i {
        font-size: 9px;
      }

      /* =========================================================
   CARD BODY
========================================================= */

      .program-card-body {
        display: flex;

        flex-direction: column;

        padding: 20px 19px 18px;
      }

      .program-card-body h3 {
        margin: 0 0 10px;

        color: var(--program-navy);

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

        font-size: 17px;

        font-weight: 750;

        line-height: 1.3;

        letter-spacing: -0.25px;
      }

      .program-card-body h3 span {
        display: inline;
      }

      /* =========================================================
   DESCRIPTION
========================================================= */

      .program-card-body p {
        margin: 0;

        color: var(--program-text);

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

        font-size: 11px;

        line-height: 1.7;
      }

      /* =========================================================
   CARD LINK
========================================================= */

      .program-link {
        display: inline-flex;

        align-items: center;

        gap: 8px;

        width: max-content;

        margin-top: auto;

        padding-top: 17px;

        color: var(--program-blue);

        text-decoration: none;

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

        font-size: 10px;

        font-weight: 700;

        transition: color 0.3s ease;
      }

      .program-link i {
        font-size: 13px;

        transition: transform 0.3s ease;
      }

      .program-link:hover {
        color: var(--program-orange);
      }

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

      /* =========================================================
   BOTTOM IMPACT STRIP
========================================================= */

      .programs-bottom {
        display: flex;

        align-items: center;

        gap: 15px;

        margin-top: 28px;

        padding: 17px 20px;

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

        border-radius: 20px;

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

        backdrop-filter: blur(18px);

        -webkit-backdrop-filter: blur(18px);

        box-shadow: 0 10px 35px rgba(11, 31, 58, 0.055);
      }

      .programs-bottom-icon {
        width: 43px;
        height: 43px;

        flex-shrink: 0;

        display: flex;

        align-items: center;

        justify-content: center;

        border-radius: 50%;

        color: var(--program-orange);

        background: rgba(245, 154, 22, 0.11);

        font-size: 18px;
      }

      .programs-bottom-content {
        display: flex;

        flex-direction: column;

        flex: 1;
      }

      .programs-bottom-content strong {
        color: var(--program-navy);

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

        font-size: 12px;

        font-weight: 700;
      }

      .programs-bottom-content span {
        margin-top: 2px;

        color: #7a899a;

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

        font-size: 10px;
      }

      .programs-bottom-btn {
        display: inline-flex;

        align-items: center;

        gap: 8px;

        padding: 10px 16px;

        border-radius: 25px;

        color: #ffffff;

        background: var(--program-navy);

        text-decoration: none;

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

        font-size: 10px;

        font-weight: 700;

        transition: all 0.3s ease;
      }

      .programs-bottom-btn:hover {
        color: #ffffff;

        background: var(--program-blue);

        transform: translateY(-2px);
      }

      /* =========================================================
   DECORATIVE LEAVES
========================================================= */

      .programs-decoration {
        position: absolute;

        pointer-events: none;

        opacity: 0.45;

        z-index: 1;

        border-radius: 100% 0 100% 0;
      }

      .programs-leaf-1 {
        width: 24px;

        height: 50px;

        left: 1.5%;

        top: 35%;

        background: linear-gradient(135deg, #69d67b, #15994b);

        transform: rotate(35deg);

        animation: programLeafOne 9s ease-in-out infinite;
      }

      .programs-leaf-2 {
        width: 27px;

        height: 55px;

        right: 1.8%;

        top: 23%;

        background: linear-gradient(135deg, #79d889, #1b9c50);

        transform: rotate(-30deg);

        animation: programLeafTwo 10s ease-in-out infinite;
      }

      .programs-leaf-3 {
        width: 18px;

        height: 37px;

        right: 8%;

        bottom: 9%;

        opacity: 0.25;

        background: #f59a16;

        transform: rotate(45deg);

        animation: programLeafThree 11s ease-in-out infinite;
      }

      /* =========================================================
   LEAF ANIMATION
========================================================= */

      @keyframes programLeafOne {
        0%,
        100% {
          transform: translateY(0) rotate(35deg);
        }

        50% {
          transform: translateY(10px) rotate(43deg);
        }
      }

      @keyframes programLeafTwo {
        0%,
        100% {
          transform: translateY(0) rotate(-30deg);
        }

        50% {
          transform: translateY(-9px) rotate(-20deg);
        }
      }

      @keyframes programLeafThree {
        0%,
        100% {
          transform: translateY(0) rotate(45deg);
        }

        50% {
          transform: translateY(-7px) rotate(35deg);
        }
      }

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

      .reveal-program {
        opacity: 0;

        transform: translateY(25px);

        transition:
          opacity 0.7s ease,
          transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1);
      }

      .reveal-program.program-visible {
        opacity: 1;

        transform: translateY(0);
      }

      /* stagger */

      .programs-grid > div:nth-child(1) .program-card {
        transition-delay: 0.05s;
      }

      .programs-grid > div:nth-child(2) .program-card {
        transition-delay: 0.12s;
      }

      .programs-grid > div:nth-child(3) .program-card {
        transition-delay: 0.19s;
      }

      .programs-grid > div:nth-child(4) .program-card {
        transition-delay: 0.26s;
      }

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

      @media (max-width: 991.98px) {
        .acg-programs-section {
          padding: 80px 0 85px;
        }

        .programs-header {
          align-items: flex-start;

          flex-direction: column;

          margin-bottom: 32px;
        }

        .programs-view-all {
          align-self: flex-start;
        }

        .program-image-wrap {
          height: 220px;
        }

        .program-card-body {
          min-height: 225px;
        }

        .programs-bottom {
          flex-wrap: wrap;
        }

        .programs-bottom-btn {
          margin-left: auto;
        }
      }

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

      @media (max-width: 575.98px) {
        .acg-programs-section {
          padding: 65px 0 70px;
        }

        .programs-heading h2 {
          font-size: 39px;

          letter-spacing: -1px;
        }

        .programs-heading p {
          font-size: 11px;
        }

        .programs-header {
          margin-bottom: 28px;
        }

        .programs-view-all {
          font-size: 10px;
        }

        .program-image-wrap {
          height: 210px;
        }

        .program-card-body {
          min-height: 210px;

          padding: 18px 17px 16px;
        }

        .program-card-body h3 {
          font-size: 16px;
        }

        .program-card-body p {
          font-size: 10.5px;
        }

        .program-category {
          font-size: 7px;
        }

        .programs-bottom {
          align-items: flex-start;

          padding: 15px;
        }

        .programs-bottom-content {
          max-width: calc(100% - 60px);
        }

        .programs-bottom-content strong {
          font-size: 11px;
        }

        .programs-bottom-btn {
          width: 100%;

          justify-content: center;

          margin-top: 8px;
        }
      }

      /* =========================================================
   REDUCED MOTION
========================================================= */

      @media (prefers-reduced-motion: reduce) {
        .programs-decoration,
        .reveal-program,
        .program-image,
        .program-card,
        .program-link i {
          animation: none !important;

          transition: none !important;
        }
      }


      /* =========================================================
   ACG EVENTS SECTION
   CLEAN PREMIUM + LEAF DECORATION
========================================================= */

.acg-events-section {
    position: relative;
    padding: 100px 0 105px;
    overflow: hidden;
    isolation: isolate;

    background:
        linear-gradient(
            180deg,
            #ffffff 0%,
            #fbfcfa 50%,
            #ffffff 100%
        );
}


/* =========================================================
   BACKGROUND SOFT ORBS
========================================================= */

.events-bg-orb {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    z-index: -2;
    filter: blur(5px);
}

.events-orb-one {
    width: 430px;
    height: 430px;
    left: -280px;
    top: 120px;

    background: rgba(213, 238, 220, 0.30);
}

.events-orb-two {
    width: 380px;
    height: 380px;
    right: -250px;
    bottom: 80px;

    background: rgba(255, 229, 190, 0.28);
}


/* =========================================================
   LEAF CONTAINER
========================================================= */

.events-leaves {
    position: absolute;
    inset: 0;

    pointer-events: none;

    overflow: hidden;

    z-index: -1;
}


/* =========================================================
   BASE LEAF
========================================================= */

.event-leaf {
    position: absolute;

    display: block;

    width: 34px;
    height: 62px;

    border-radius: 100% 0 100% 0;

    opacity: .72;

    transform-origin: bottom center;

    filter:
        drop-shadow(
            0 7px 10px
            rgba(11, 31, 58, .08)
        );

}


/* =========================================================
   LEAF VEIN
========================================================= */

.event-leaf::after {

    content: "";

    position: absolute;

    left: 50%;
    top: 7px;

    width: 1px;
    height: 49px;

    transform:
        translateX(-50%)
        rotate(-18deg);

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

    border-radius: 100%;

}


/* =========================================================
   GREEN LEAF
========================================================= */

.event-leaf-green {

    background:
        linear-gradient(
            135deg,
            #63c96f 0%,
            #229b50 52%,
            #08743c 100%
        );

}


/* =========================================================
   ORANGE LEAF
========================================================= */

.event-leaf-orange {

    background:
        linear-gradient(
            135deg,
            #ffc14d 0%,
            #f58b17 52%,
            #e85a18 100%
        );

}


/* =========================================================
   LEAF 01
   LEFT TOP
========================================================= */

.event-leaf-1 {

    left: 1.8%;
    top: 17%;

    width: 27px;
    height: 52px;

    transform:
        rotate(-28deg);

    animation:
        eventLeafFloat1
        9s
        ease-in-out
        infinite;

}


/* =========================================================
   LEAF 02
   LEFT LOWER
========================================================= */

.event-leaf-2 {

    left: 4%;
    bottom: 14%;

    width: 38px;
    height: 68px;

    transform:
        rotate(-48deg);

    animation:
        eventLeafFloat2
        11s
        ease-in-out
        infinite;

}


/* =========================================================
   LEAF 03
   RIGHT TOP
========================================================= */

.event-leaf-3 {

    right: 3%;
    top: 12%;

    width: 35px;
    height: 64px;

    transform:
        rotate(42deg);

    animation:
        eventLeafFloat3
        10s
        ease-in-out
        infinite;

}


/* =========================================================
   LEAF 04
   RIGHT LOWER
========================================================= */

.event-leaf-4 {

    right: 1.5%;
    bottom: 12%;

    width: 30px;
    height: 56px;

    transform:
        rotate(32deg);

    animation:
        eventLeafFloat4
        12s
        ease-in-out
        infinite;

}


/* =========================================================
   ORANGE LEAF 05
========================================================= */

.event-leaf-5 {

    left: 8%;
    top: 48%;

    width: 20px;
    height: 34px;

    transform:
        rotate(65deg);

    animation:
        eventOrangeFloat
        8s
        ease-in-out
        infinite;

}


/* =========================================================
   ORANGE LEAF 06
========================================================= */

.event-leaf-6 {

    right: 8%;
    bottom: 31%;

    width: 23px;
    height: 39px;

    transform:
        rotate(-58deg);

    animation:
        eventOrangeFloat
        9s
        ease-in-out
        infinite reverse;

}


/* =========================================================
   NATURAL LEAF MOTION
========================================================= */

@keyframes eventLeafFloat1 {

    0%,
    100% {
        transform:
            translate3d(0, 0, 0)
            rotate(-28deg);
    }

    50% {
        transform:
            translate3d(7px, -13px, 0)
            rotate(-19deg);
    }

}


@keyframes eventLeafFloat2 {

    0%,
    100% {
        transform:
            translate3d(0, 0, 0)
            rotate(-48deg);
    }

    50% {
        transform:
            translate3d(-8px, -15px, 0)
            rotate(-39deg);
    }

}


@keyframes eventLeafFloat3 {

    0%,
    100% {
        transform:
            translate3d(0, 0, 0)
            rotate(42deg);
    }

    50% {
        transform:
            translate3d(-7px, -12px, 0)
            rotate(50deg);
    }

}


@keyframes eventLeafFloat4 {

    0%,
    100% {
        transform:
            translate3d(0, 0, 0)
            rotate(32deg);
    }

    50% {
        transform:
            translate3d(8px, -14px, 0)
            rotate(24deg);
    }

}


@keyframes eventOrangeFloat {

    0%,
    100% {
        transform:
            translate3d(0, 0, 0)
            rotate(65deg);
    }

    50% {
        transform:
            translate3d(5px, -10px, 0)
            rotate(74deg);
    }

}




  /* =========================================================
   UPCOMING EVENTS SECTION — PREMIUM UI/UX
========================================================= */

.events-section{
    position:relative;
    padding:100px 0 110px;
    overflow:hidden;
    background:#FDFCF7;
    isolation:isolate;
}

/* =========================================================
   AMBIENT GLOW LAYERS — Soft, Natural, No Hard Lines
========================================================= */

.events-section::before{
    content:"";
    position:absolute;
    inset:0;
    z-index:0;
    pointer-events:none;

    background:
        /* Top-left green ambient */
        radial-gradient(ellipse 55% 45% at -5% -5%,
            rgba(76,175,80,.28) 0%,
            rgba(76,175,80,.12) 30%,
            rgba(76,175,80,.04) 55%,
            transparent 75%),

        /* Top-right orange ambient */
        radial-gradient(ellipse 55% 45% at 105% -5%,
            rgba(255,140,0,.30) 0%,
            rgba(255,140,0,.13) 30%,
            rgba(255,193,7,.05) 55%,
            transparent 75%),

        /* Bottom-left green ambient */
        radial-gradient(ellipse 60% 50% at -5% 105%,
            rgba(76,175,80,.28) 0%,
            rgba(76,175,80,.12) 35%,
            rgba(76,175,80,.04) 60%,
            transparent 80%),

        /* Bottom-right orange + green mix */
        radial-gradient(ellipse 65% 55% at 105% 105%,
            rgba(255,140,0,.26) 0%,
            rgba(255,193,7,.14) 25%,
            rgba(76,175,80,.10) 55%,
            transparent 82%),

        /* Center soft blue tint */
        radial-gradient(ellipse 90% 70% at 50% 50%,
            rgba(232,240,252,.45) 0%,
            rgba(232,240,252,.15) 40%,
            transparent 70%);
}

/* Soft cream vignette overlay */
.events-section::after{
    content:"";
    position:absolute;
    inset:0;
    z-index:0;
    pointer-events:none;

    background:radial-gradient(ellipse 120% 90% at 50% 50%,
        rgba(253,252,247,0) 0%,
        rgba(253,252,247,.15) 60%,
        rgba(253,252,247,.55) 100%);
}

/* =========================================================
   SOFT FLOWING CURVES (replacing hard SVG lines)
========================================================= */

.events-bg{
    position:absolute;
    inset:0;
    pointer-events:none;
    z-index:1;
    overflow:hidden;
}

/* Top-left soft curved glow */
.events-bg::before{
    content:"";
    position:absolute;
    top:-30%;
    left:-20%;
    width:75%;
    height:110%;

    background:radial-gradient(ellipse at 30% 40%,
        rgba(76,175,80,.22) 0%,
        rgba(76,175,80,.08) 40%,
        transparent 70%);

    border-radius:50% 40% 60% 45% / 55% 60% 40% 50%;
    filter:blur(40px);
    transform:rotate(-15deg);
    opacity:.9;
}

/* Bottom-right soft curved glow (orange + green mix) */
.events-bg::after{
    content:"";
    position:absolute;
    bottom:-35%;
    right:-25%;
    width:85%;
    height:120%;

    background:radial-gradient(ellipse at 60% 60%,
        rgba(255,140,0,.22) 0%,
        rgba(255,193,7,.12) 30%,
        rgba(76,175,80,.10) 60%,
        transparent 80%);

    border-radius:45% 55% 40% 60% / 60% 45% 55% 40%;
    filter:blur(45px);
    transform:rotate(-12deg);
    opacity:.9;
}

/* Remove/hide the old SVG ribbon */
.ev-ribbon{
    display:none;
}

/* =========================================================
   FLOATING LEAVES — Subtle
========================================================= */

.ev-leaf,
.ev-orange-leaf{
    position:absolute;
    display:block;
    border-radius:0 100% 0 100%;
    z-index:2;
    filter:drop-shadow(0 8px 18px rgba(0,0,0,.10));
    opacity:.9;
}

.ev-leaf{
    background:linear-gradient(135deg,#66BB6A,#2E7D32);
}

.ev-orange-leaf{
    background:linear-gradient(135deg,#FFB74D,#E88918);
}

.ev-leaf-1{width:78px;height:78px;top:5%;left:1.5%;transform:rotate(-35deg);animation:floatLeaf 7s ease-in-out infinite;}
.ev-leaf-2{width:54px;height:54px;top:22%;right:2.5%;transform:rotate(45deg);animation:floatLeaf 6s ease-in-out infinite reverse;}
.ev-leaf-3{width:66px;height:66px;bottom:8%;left:2.5%;transform:rotate(20deg);animation:floatLeaf 8s ease-in-out infinite;}
.ev-leaf-4{width:48px;height:48px;bottom:6%;right:4%;transform:rotate(-25deg);animation:floatLeaf 6.5s ease-in-out infinite reverse;}

.ev-orange-1{width:40px;height:40px;top:34%;left:1.8%;transform:rotate(30deg);animation:floatLeaf 7.5s ease-in-out infinite;}
.ev-orange-2{width:46px;height:46px;top:62%;right:1.8%;transform:rotate(-20deg);animation:floatLeaf 6s ease-in-out infinite reverse;}

@keyframes floatLeaf{
    0%,100%{transform:translateY(0) rotate(-30deg);}
    50%{transform:translateY(-15px) rotate(-15deg);}
}

/* =========================================================
   HEADER — Premium Typography
========================================================= */

.events-header{
    position:relative;
    z-index:3;
    display:flex;
    justify-content:space-between;
    align-items:flex-end;
    gap:30px;
    margin-bottom:56px;
    flex-wrap:wrap;
}

.events-header-left{max-width:640px;}

.events-label{
    display:inline-flex;
    align-items:center;
    gap:12px;
    color:#1E5BC6;
    font-size:13px;
    font-weight:800;
    letter-spacing:3.5px;
    text-transform:uppercase;
    margin-bottom:18px;
}

.events-label .label-line{
    display:inline-block;
    width:46px;
    height:2px;
    background:linear-gradient(90deg,#1E5BC6,#4CAF50);
    border-radius:2px;
    position:relative;
}

.events-label .label-line::before{
    content:"";
    position:absolute;
    left:-6px;
    top:50%;
    transform:translateY(-50%);
    width:7px;
    height:7px;
    border-radius:50%;
    background:#1E5BC6;
    box-shadow:0 0 0 4px rgba(30,91,198,.12);
}

.events-title{
    font-family:'Manrope',sans-serif;
    font-size:clamp(32px,4.2vw,52px);
    font-weight:800;
    line-height:1.12;
    letter-spacing:-1.5px;
    color:#1E5BC6;
    margin-bottom:18px;
    position:relative;
}

.events-title::after{
    content:"";
    display:block;
    width:70px;
    height:4px;
    margin-top:16px;
    border-radius:4px;
    background:linear-gradient(90deg,#4CAF50,#FFC107,#FF8C00);
}

.events-subtitle{
    color:#5A6A82;
    font-size:16px;
    line-height:1.75;
    max-width:560px;
    font-weight:400;
}

.events-header-right{
    display:flex;
    align-items:flex-end;
    padding-bottom:8px;
}

.view-all-btn{
    display:inline-flex;
    align-items:center;
    gap:9px;
    color:#1E5BC6;
    font-size:15px;
    font-weight:700;
    text-decoration:none;
    padding:10px 4px;
    border-bottom:2px solid #1E5BC6;
    transition:.3s ease;
    position:relative;
}

.view-all-btn::after{
    content:"";
    position:absolute;
    bottom:-2px;
    left:0;
    width:0;
    height:2px;
    background:#4CAF50;
    transition:width .4s ease;
}

.view-all-btn:hover{
    color:#0B2C6B;
    border-bottom-color:transparent;
    gap:13px;
}

.view-all-btn:hover::after{width:100%;}

.view-all-btn i{transition:transform .3s ease;}
.view-all-btn:hover i{transform:translateX(4px);}

/* =========================================================
   EVENT CARDS — Premium Glass
========================================================= */

.events-grid{position:relative;z-index:3;}

.event-card{
    position:relative;
    background:#fff;
    border-radius:24px;
    overflow:hidden;
    height:100%;
    display:flex;
    flex-direction:column;

    box-shadow:
        0 12px 35px rgba(11,31,58,.09),
        0 3px 10px rgba(11,31,58,.04);

    transition:
        transform .45s cubic-bezier(.2,.8,.2,1),
        box-shadow .45s ease;

    border:1px solid rgba(11,31,58,.06);
}

/* Soft inner highlight */
.event-card::marker{content:"";}

.event-card:hover{
    transform:translateY(-10px);
    box-shadow:
        0 30px 60px rgba(11,31,58,.16),
        0 8px 20px rgba(11,31,58,.08);
}

/* =========================================================
   CARD CORNER DECORATIONS
========================================================= */

/* Green blob */
.event-card::after{
    content:"";
    position:absolute;
    bottom:-40px;
    right:-40px;
    width:130px;
    height:130px;
    border-radius:50%;

    background:radial-gradient(circle at 30% 30%,
        rgba(76,175,80,.40) 0%,
        rgba(76,175,80,.18) 40%,
        rgba(76,175,80,0) 72%);

    pointer-events:none;
    z-index:1;
    transition:all .55s ease;
}

/* Orange blob */
.event-card::before{
    content:"";
    position:absolute;
    bottom:-60px;
    right:-60px;
    width:150px;
    height:150px;
    border-radius:50%;

    background:radial-gradient(circle at 60% 60%,
        rgba(255,140,0,.35) 0%,
        rgba(255,140,0,.15) 45%,
        rgba(255,140,0,0) 75%);

    pointer-events:none;
    z-index:0;
    transition:all .55s ease;
}

/* Green curved line accent */
.event-card .event-body::after{
    content:"";
    position:absolute;
    bottom:0;
    right:0;
    width:100px;
    height:100px;
    border-top-left-radius:100%;
    border-top:2px solid rgba(76,175,80,.40);
    border-left:2px solid rgba(76,175,80,.40);
    pointer-events:none;
    z-index:2;
    opacity:.9;
    transition:all .55s ease;
}

/* Hover — corner expands */
.event-card:hover::after{
    transform:scale(1.3) translate(-8px,-8px);
    background:radial-gradient(circle at 30% 30%,
        rgba(76,175,80,.55) 0%,
        rgba(76,175,80,.25) 40%,
        rgba(76,175,80,0) 78%);
}

.event-card:hover::before{
    transform:scale(1.25) translate(-10px,-10px);
    background:radial-gradient(circle at 60% 60%,
        rgba(255,140,0,.50) 0%,
        rgba(255,140,0,.22) 45%,
        rgba(255,140,0,0) 80%);
}

.event-card:hover .event-body::after{
    border-color:rgba(76,175,80,.65);
    width:115px;
    height:115px;
}

/* =========================================================
   CATEGORY-BASED HOVER GLOW
========================================================= */

.card-career:hover{
    box-shadow:0 30px 60px rgba(30,91,198,.22),0 8px 20px rgba(30,91,198,.10);
}

.card-education:hover{
    box-shadow:0 30px 60px rgba(76,175,80,.22),0 8px 20px rgba(76,175,80,.10);
}

.card-health:hover{
    box-shadow:0 30px 60px rgba(227,30,36,.20),0 8px 20px rgba(227,30,36,.09);
}

.card-social:hover{
    box-shadow:0 30px 60px rgba(255,140,0,.22),0 8px 20px rgba(255,140,0,.10);
}

/* =========================================================
   IMAGE WRAP
========================================================= */

.event-img-wrap{
    position:relative;
    width:100%;
    height:200px;
    overflow:hidden;
    z-index:3;
}

.event-img-wrap::after{
    content:"";
    position:absolute;
    inset:auto 0 0 0;
    height:50%;
    background:linear-gradient(180deg,transparent,rgba(11,31,58,.28));
    pointer-events:none;
    z-index:1;
}

.event-img-wrap img{
    width:100%;
    height:100%;
    object-fit:cover;
    transition:transform .7s cubic-bezier(.2,.8,.2,1);
}

.event-card:hover .event-img-wrap img{
    transform:scale(1.10);
}

/* Date badge */
.event-date{
    position:absolute;
    top:18px;
    left:18px;
    width:66px;
    height:72px;
    background:linear-gradient(180deg,#1E5BC6,#0B2C6B);
    border-radius:16px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    box-shadow:
        0 10px 24px rgba(30,91,198,.40),
        inset 0 1px 0 rgba(255,255,255,.20);
    z-index:2;
    color:#fff;
    border:1px solid rgba(255,255,255,.15);
}

.date-day{
    font-family:'Manrope',sans-serif;
    font-size:25px;
    font-weight:800;
    line-height:1;
    letter-spacing:-.5px;
}

.date-month{
    font-size:11px;
    font-weight:700;
    letter-spacing:1.6px;
    margin-top:4px;
    opacity:.94;
}

/* =========================================================
   BODY
========================================================= */

.event-body{
    padding:24px 24px 26px;
    display:flex;
    flex-direction:column;
    flex:1;
    position:relative;
    z-index:3;
    background:transparent;
}

.event-cat{
    display:inline-flex;
    align-items:center;
    gap:7px;
    padding:7px 14px;
    border-radius:50px;
    font-size:11px;
    font-weight:800;
    letter-spacing:.7px;
    color:#fff;
    margin-bottom:14px;
    text-transform:uppercase;
    width:fit-content;
    box-shadow:0 5px 14px rgba(0,0,0,.14);
}

.event-cat i{font-size:12px;}

.cat-career{background:linear-gradient(135deg,#1E5BC6,#0B2C6B);}
.cat-education{background:linear-gradient(135deg,#4CAF50,#2E7D32);}
.cat-health{background:linear-gradient(135deg,#E31E24,#B31217);}
.cat-social{background:linear-gradient(135deg,#FF8C00,#E88918);}

.event-name{
    font-family:'Manrope',sans-serif;
    font-size:19.5px;
    font-weight:800;
    color:#0B1F3A;
    line-height:1.28;
    margin-bottom:10px;
    letter-spacing:-.3px;
    transition:color .3s ease;
}

.event-card:hover .event-name{
    color:#1E5BC6;
}

.event-desc{
    color:#5A6A82;
    font-size:13.5px;
    line-height:1.7;
    margin-bottom:16px;
    flex:1;
}

.event-meta{
    list-style:none;
    padding:0;
    margin:0 0 18px;
    display:flex;
    flex-direction:column;
    gap:9px;
}

.event-meta li{
    display:flex;
    align-items:center;
    gap:9px;
    color:#4A5B72;
    font-size:12.5px;
    font-weight:600;
}

.event-meta li i{
    color:#1E5BC6;
    font-size:13px;
    flex-shrink:0;
    width:15px;
    text-align:center;
}

/* Divider */
.event-body::before{
    content:"";
    position:absolute;
    top:auto;
    left:24px;
    right:24px;
    bottom:64px;
    height:1px;
    background:linear-gradient(90deg,transparent,#E5EAF2,transparent);
}

/* =========================================================
   FOOTER
========================================================= */

.event-footer{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    padding-top:16px;
    margin-top:auto;
    position:relative;
    z-index:4;
}

.register-link{
    display:inline-flex;
    align-items:center;
    gap:6px;
    color:#1E5BC6;
    font-size:13.5px;
    font-weight:800;
    text-decoration:none;
    transition:.3s ease;
}

.register-link:hover{
    color:#0B2C6B;
    gap:10px;
}

.register-link i{transition:transform .3s ease;}
.register-link:hover i{transform:translateX(4px);}

.status-pill{
    display:inline-flex;
    align-items:center;
    gap:6px;
    padding:5px 12px;
    border-radius:50px;
    font-size:11px;
    font-weight:800;
    letter-spacing:.4px;
}

.status-open{
    background:linear-gradient(135deg,#E8F5E9,#C8E6C9);
    color:#2E7D32;
    border:1px solid rgba(76,175,80,.30);
}

.status-dot{
    width:6px;height:6px;
    border-radius:50%;
    background:#4CAF50;
    box-shadow:0 0 0 3px rgba(76,175,80,.18);
    animation:pulseDot 2s ease-in-out infinite;
}

@keyframes pulseDot{
    0%,100%{transform:scale(1);opacity:1;}
    50%{transform:scale(1.2);opacity:.85;}
}

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

.events-cta{
    position:relative;
    z-index:3;
    margin-top:64px;
    padding:28px 34px;
    border-radius:24px;

    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:24px;
    flex-wrap:wrap;

    background:linear-gradient(135deg,rgba(255,255,255,.96),rgba(255,255,255,.86));
    backdrop-filter:blur(18px) saturate(160%);
    -webkit-backdrop-filter:blur(18px) saturate(160%);

    border:1px solid rgba(255,255,255,.9);
    box-shadow:
        0 22px 50px rgba(11,31,58,.10),
        inset 0 1px 0 rgba(255,255,255,.95);
}

.events-cta::before{
    content:"";
    position:absolute;
    inset:0;
    border-radius:24px;
    padding:1.5px;
    background:linear-gradient(135deg,
        rgba(76,175,80,.40),
        rgba(255,193,7,.35),
        rgba(255,140,0,.40),
        rgba(30,91,198,.35));
    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    -webkit-mask-composite:xor;
    mask-composite:exclude;
    pointer-events:none;
}

.events-cta-left{
    display:flex;
    align-items:center;
    gap:20px;
    flex:1;
    min-width:280px;
}

.cta-icon{
    width:64px;
    height:64px;
    flex-shrink:0;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    background:linear-gradient(135deg,#FFE0B2,#FFCC80);
    color:#E31E24;
    font-size:28px;
    box-shadow:
        0 10px 24px rgba(255,140,0,.28),
        inset 0 1px 0 rgba(255,255,255,.7);
    position:relative;
}

.cta-icon::before{
    content:"";
    position:absolute;
    inset:-5px;
    border-radius:50%;
    border:2px dashed rgba(255,140,0,.40);
    animation:rotateRing 22s linear infinite;
}

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

.cta-title{
    font-family:'Manrope',sans-serif;
    font-size:21px;
    font-weight:800;
    color:#0B1F3A;
    margin-bottom:6px;
    letter-spacing:-.4px;
}

.cta-subtitle{
    color:#5A6A82;
    font-size:14.5px;
    line-height:1.5;
    margin:0;
    font-weight:400;
}

.btn-explore-events{
    display:inline-flex;
    align-items:center;
    gap:10px;
    padding:16px 32px;
    border-radius:50px;
    background:linear-gradient(135deg,#0B2C6B,#1E5BC6);
    color:#fff;
    font-size:14.5px;
    font-weight:700;
    letter-spacing:.2px;
    text-decoration:none;
    border:none;
    box-shadow:0 14px 30px rgba(30,91,198,.32);
    transition:all .35s ease;
    position:relative;
    overflow:hidden;
}

.btn-explore-events::before{
    content:"";
    position:absolute;
    top:0;bottom:0;left:-100%;
    width:55%;
    background:linear-gradient(90deg,transparent,rgba(255,255,255,.35),transparent);
    transform:skewX(-20deg);
    transition:left .75s ease;
}

.btn-explore-events:hover::before{left:140%;}

.btn-explore-events:hover{
    color:#fff;
    transform:translateY(-3px);
    box-shadow:0 20px 40px rgba(30,91,198,.45);
}

.btn-explore-events i{
    position:relative;z-index:2;
    transition:transform .3s ease;
}

.btn-explore-events:hover i{transform:translateX(5px);}

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

@media(max-width:1199.98px){
    .events-section{padding:85px 0 95px;}
    .event-name{font-size:17.5px;}
    .cta-title{font-size:19px;}
}

@media(max-width:991.98px){
    .events-section{padding:70px 0 80px;}

    .events-header{
        flex-direction:column;
        align-items:flex-start;
        margin-bottom:44px;
    }

    .events-header-right{padding-bottom:0;}
    .event-img-wrap{height:210px;}

    .events-cta{
        flex-direction:column;
        align-items:flex-start;
        text-align:left;
        padding:26px;
    }

    .events-cta-right{width:100%;}

    .btn-explore-events{
        width:100%;
        justify-content:center;
    }
}

@media(max-width:575.98px){
    .events-section{padding:55px 0 65px;}

    .events-title{letter-spacing:-.7px;}

    .event-img-wrap{height:190px;}
    .event-body{padding:20px 20px 22px;}
    .event-body::before{left:20px;right:20px;bottom:60px;}
    .event-name{font-size:17px;}
    .event-desc{font-size:13px;}

    .cta-icon{width:54px;height:54px;font-size:23px;}
    .cta-title{font-size:17px;}
    .cta-subtitle{font-size:13px;}

    .events-label{font-size:11.5px;letter-spacing:2.5px;}
    .events-label .label-line{width:34px;}

    .event-card::after{width:90px;height:90px;bottom:-25px;right:-25px;}
    .event-card::before{width:105px;height:105px;bottom:-40px;right:-40px;}
    .event-card .event-body::after{width:75px;height:75px;}
}


  /* =========================================================
   MOMENTS THAT MATTER SECTION — PREMIUM GLASS
========================================================= */

.moments-section{
    position:relative;
    padding:100px 0 110px;
    overflow:hidden;
    isolation:isolate;
    background:#FDFCF7;
}

.moments-section::before{
    content:"";
    position:absolute;
    inset:0;
    z-index:0;
    pointer-events:none;
    background:
        radial-gradient(ellipse 55% 45% at -5% -5%, rgba(76,175,80,.26) 0%, rgba(76,175,80,.10) 32%, transparent 72%),
        radial-gradient(ellipse 55% 45% at 105% -5%, rgba(255,140,0,.28) 0%, rgba(255,193,7,.12) 32%, transparent 72%),
        radial-gradient(ellipse 60% 50% at -5% 105%, rgba(76,175,80,.26) 0%, rgba(76,175,80,.10) 35%, transparent 75%),
        radial-gradient(ellipse 65% 55% at 105% 105%, rgba(255,140,0,.24) 0%, rgba(255,193,7,.12) 25%, rgba(76,175,80,.10) 55%, transparent 82%),
        radial-gradient(ellipse 90% 70% at 50% 50%, rgba(232,240,252,.40) 0%, transparent 70%);
}

.moments-section::after{
    content:"";
    position:absolute;
    inset:0;
    z-index:0;
    pointer-events:none;
    background:radial-gradient(ellipse 120% 90% at 50% 50%, rgba(253,252,247,0) 0%, rgba(253,252,247,.15) 60%, rgba(253,252,247,.50) 100%);
}

.moments-bg{
    position:absolute;
    inset:0;
    pointer-events:none;
    z-index:1;
    overflow:hidden;
}

.moments-bg::before{
    content:"";
    position:absolute;
    top:-30%;left:-20%;
    width:75%;height:110%;
    background:radial-gradient(ellipse at 30% 40%, rgba(76,175,80,.20) 0%, rgba(76,175,80,.08) 40%, transparent 70%);
    border-radius:50% 40% 60% 45% / 55% 60% 40% 50%;
    filter:blur(45px);
    transform:rotate(-15deg);
    opacity:.9;
}

.moments-bg::after{
    content:"";
    position:absolute;
    bottom:-35%;right:-25%;
    width:85%;height:120%;
    background:radial-gradient(ellipse at 60% 60%, rgba(255,140,0,.20) 0%, rgba(255,193,7,.10) 30%, rgba(76,175,80,.08) 60%, transparent 80%);
    border-radius:45% 55% 40% 60% / 60% 45% 55% 40%;
    filter:blur(50px);
    transform:rotate(-12deg);
    opacity:.9;
}

/* LEAVES & SPARKLES */
.leaf-m{
    position:absolute;display:block;
    border-radius:0 100% 0 100%;
    background:linear-gradient(135deg,#66BB6A,#2E7D32);
    filter:drop-shadow(0 6px 14px rgba(0,0,0,.10));
    opacity:.9;z-index:2;
}
.leaf-m-orange{
    position:absolute;display:block;
    border-radius:0 100% 0 100%;
    background:linear-gradient(135deg,#FFB74D,#E88918);
    filter:drop-shadow(0 6px 14px rgba(0,0,0,.10));
    opacity:.9;z-index:2;
}
.leaf-m1{width:70px;height:70px;top:8%;left:2%;transform:rotate(-40deg);animation:floatLeaf 7s ease-in-out infinite;}
.leaf-m2{width:48px;height:48px;top:72%;left:38%;transform:rotate(45deg);animation:floatLeaf 6s ease-in-out infinite reverse;}
.leaf-m3{width:56px;height:56px;bottom:8%;left:2%;transform:rotate(20deg);animation:floatLeaf 8s ease-in-out infinite;}
.leaf-m4{width:38px;height:38px;top:12%;right:3%;transform:rotate(-25deg);animation:floatLeaf 6.5s ease-in-out infinite reverse;}
.leaf-mo1{width:34px;height:34px;top:45%;left:1%;transform:rotate(30deg);animation:floatLeaf 7.5s ease-in-out infinite;}
.leaf-mo2{width:42px;height:42px;top:18%;right:2%;transform:rotate(-20deg);animation:floatLeaf 6s ease-in-out infinite reverse;}

.sparkle{
    position:absolute;width:8px;height:8px;border-radius:50%;
    background:linear-gradient(135deg,#FFC107,#FF8C00);
    box-shadow:0 0 12px rgba(255,193,7,.7);
    animation:sparkleFloat 4s ease-in-out infinite;z-index:2;
}
.sp1{top:6%;left:48%;animation-delay:0s;}
.sp2{top:22%;left:52%;animation-delay:.5s;}
.sp3{top:14%;right:8%;animation-delay:1s;}
.sp4{bottom:30%;right:12%;animation-delay:1.5s;}
.sp5{bottom:18%;left:45%;animation-delay:.8s;}

@keyframes sparkleFloat{
    0%,100%{transform:translateY(0) scale(1);opacity:.7;}
    50%{transform:translateY(-10px) scale(1.4);opacity:1;}
}

@keyframes floatLeaf{
    0%,100%{transform:translateY(0) rotate(-30deg);}
    50%{transform:translateY(-15px) rotate(-15deg);}
}

/* LEFT CONTENT */
.moments-left{position:relative;z-index:3;}

.moments-label{
    display:inline-flex;align-items:center;gap:12px;
    color:#4CAF50;font-size:12.5px;font-weight:800;
    letter-spacing:3.5px;text-transform:uppercase;margin-bottom:16px;
}

.moments-label .label-line{
    display:inline-block;width:44px;height:2px;
    background:linear-gradient(90deg,#4CAF50,#FFC107);
    border-radius:2px;position:relative;
}

.moments-label .label-line::before{
    content:"";position:absolute;left:-6px;top:50%;
    transform:translateY(-50%);width:7px;height:7px;border-radius:50%;
    background:#4CAF50;box-shadow:0 0 0 4px rgba(76,175,80,.12);
}

.moments-title{
    font-family:'Manrope',sans-serif;
    font-size:clamp(28px,3.2vw,40px);font-weight:800;line-height:1.15;
    letter-spacing:-1.2px;color:#1E5BC6;margin-bottom:16px;position:relative;
}

.moments-title::after{
    content:"";display:block;width:66px;height:4px;margin-top:14px;
    border-radius:4px;background:linear-gradient(90deg,#4CAF50,#FFC107,#FF8C00);
}

.moments-desc{
    color:#5A6A82;font-size:15px;line-height:1.7;margin-bottom:28px;
    font-weight:400;max-width:340px;
}

.btn-view-gallery{
    display:inline-flex;align-items:center;gap:10px;
    padding:13px 26px;border-radius:50px;background:transparent;
    border:2px solid #1E5BC6;color:#1E5BC6;font-size:14px;font-weight:700;
    text-decoration:none;transition:all .35s ease;position:relative;overflow:hidden;
}

.btn-view-gallery::before{
    content:"";position:absolute;inset:0;
    background:linear-gradient(135deg,#1E5BC6,#0B2C6B);
    transform:translateX(-101%);transition:transform .4s ease;z-index:0;
}

.btn-view-gallery:hover::before{transform:translateX(0);}
.btn-view-gallery:hover{color:#fff;border-color:#1E5BC6;transform:translateY(-2px);box-shadow:0 12px 26px rgba(30,91,198,.30);}
.btn-view-gallery span,.btn-view-gallery i{position:relative;z-index:2;transition:transform .3s ease;}
.btn-view-gallery:hover i{transform:translateX(4px);}

/* =========================================================
   SCATTERED GALLERY — 8 IMAGES (10px gap between rows)
========================================================= */
/* =========================================================
   SCATTERED GALLERY — TIGHT LAYOUT (10px gap between rows)
========================================================= */

.moments-right{position:relative;z-index:2;}

.gallery-scatter{
    position:relative;
    height:400px;   /* 👈 520px se 380px kiya — ab rows ke beech gap nahi */
    width:100%;
}

.gallery-item{
    position:absolute;
    border-radius:16px;
    overflow:hidden;
    background:#fff;
    padding:8px;
    box-shadow:
        0 18px 40px rgba(11,31,58,.16),
        0 5px 15px rgba(11,31,58,.08);
    transition:all .55s cubic-bezier(.2,.8,.2,1);
    cursor:pointer;
    will-change:transform;
}

.gallery-item img{
    display:block;width:100%;height:100%;
    object-fit:cover;border-radius:10px;
    transition:transform .7s ease;
}

.gallery-item:hover{
    transform:scale(1.08) rotate(0deg) translateY(-10px)!important;
    z-index:100;
    box-shadow:
        0 35px 70px rgba(11,31,58,.28),
        0 12px 28px rgba(11,31,58,.14);
}

.gallery-item:hover img{transform:scale(1.05);}

/* =========================================================
   TOP ROW (4 images) — Slight overlap into bottom
========================================================= */

.gi-1{
    width:230px;height:170px;
    left:0;top:0;
    --rot:-7deg;
    transform:rotate(var(--rot));
    z-index:4;
    animation:floatCard 6s ease-in-out infinite;
}

.gi-2{
    width:250px;height:190px;
    left:24%;top:0;
    --rot:3deg;
    transform:rotate(var(--rot));
    z-index:5;
    animation:floatCard 7s ease-in-out infinite .3s;
}

.gi-3{
    width:240px;height:180px;
    right:22%;top:0;
    --rot:-4deg;
    transform:rotate(var(--rot));
    z-index:4;
    animation:floatCard 6.5s ease-in-out infinite .6s;
}

.gi-4{
    width:220px;height:165px;
    right:0;top:0;
    --rot:6deg;
    transform:rotate(var(--rot));
    z-index:3;
    animation:floatCard 7.5s ease-in-out infinite .9s;
}

/* =========================================================
   BOTTOM ROW (4 images) — Starts right after top row (~10px gap)
   Top row max height 190px + ~10px gap = bottom row at ~200px
========================================================= */

.gi-5{
    width:200px;height:150px;
    left:8%;top:220px;   /* 👈 FIXED */
    --rot:5deg;
    transform:rotate(var(--rot));
    z-index:3;
    animation:floatCard 6.8s ease-in-out infinite .4s;
}

.gi-6{
    width:230px;height:170px;
    left:32%;top:220px;  /* 👈 FIXED */
    --rot:-5deg;
    transform:rotate(var(--rot));
    z-index:4;
    animation:floatCard 7.2s ease-in-out infinite .7s;
}

.gi-7{
    width:220px;height:165px;
    right:28%;top:220px; /* 👈 FIXED */
    --rot:4deg;
    transform:rotate(var(--rot));
    z-index:4;
    animation:floatCard 6.4s ease-in-out infinite 1s;
}

.gi-8{
    width:210px;height:160px;
    right:2%;top:220px;  /* 👈 FIXED */
    --rot:-6deg;
    transform:rotate(var(--rot));
    z-index:3;
    animation:floatCard 7.6s ease-in-out infinite 1.2s;
}

@keyframes floatCard{
    0%,100%{transform:translateY(0) rotate(var(--rot,0deg));}
    50%{transform:translateY(-12px) rotate(var(--rot,0deg));}
}

/* =========================================================
   WHY JOIN US SECTION — GREEN + ORANGE GRADIENT GLASS
========================================================= */

.why-join-section{
    position:relative;
    padding:110px 0;
    overflow:hidden;
    isolation:isolate;
    background:#FDFCF7;
}

/* Ambient glow layers */
.why-join-section::before{
    content:"";
    position:absolute;inset:0;z-index:0;pointer-events:none;
    background:
        radial-gradient(ellipse 55% 45% at -5% -5%, rgba(76,175,80,.26) 0%, rgba(76,175,80,.10) 32%, transparent 72%),
        radial-gradient(ellipse 55% 45% at 105% 5%, rgba(255,140,0,.28) 0%, rgba(255,193,7,.12) 32%, transparent 72%),
        radial-gradient(ellipse 60% 50% at -5% 105%, rgba(255,140,0,.24) 0%, rgba(255,193,7,.12) 35%, transparent 75%),
        radial-gradient(ellipse 65% 55% at 105% 105%, rgba(76,175,80,.24) 0%, rgba(255,193,7,.12) 25%, rgba(255,140,0,.10) 55%, transparent 82%),
        radial-gradient(ellipse 90% 70% at 50% 50%, rgba(232,240,252,.40) 0%, transparent 70%);
}

/* Glass vignette */
.why-join-section::after{
    content:"";
    position:absolute;inset:0;z-index:0;pointer-events:none;
    background:radial-gradient(ellipse 120% 90% at 50% 50%, rgba(253,252,247,0) 0%, rgba(253,252,247,.15) 60%, rgba(253,252,247,.50) 100%);
}

/* Soft glow curves */
.why-bg{
    position:absolute;inset:0;pointer-events:none;z-index:1;overflow:hidden;
}

.why-bg::before{
    content:"";position:absolute;top:-30%;right:-20%;
    width:70%;height:110%;
    background:radial-gradient(ellipse at 60% 40%, rgba(255,140,0,.20) 0%, rgba(255,193,7,.10) 40%, transparent 70%);
    border-radius:50% 40% 60% 45% / 55% 60% 40% 50%;
    filter:blur(45px);transform:rotate(15deg);opacity:.9;
}

.why-bg::after{
    content:"";position:absolute;bottom:-35%;left:-25%;
    width:85%;height:120%;
    background:radial-gradient(ellipse at 40% 60%, rgba(76,175,80,.22) 0%, rgba(76,175,80,.10) 30%, rgba(255,193,7,.08) 60%, transparent 80%);
    border-radius:45% 55% 40% 60% / 60% 45% 55% 40%;
    filter:blur(50px);transform:rotate(12deg);opacity:.9;
}

.leaf-w,.leaf-w-orange{
    position:absolute;display:block;
    border-radius:0 100% 0 100%;
    filter:drop-shadow(0 6px 14px rgba(0,0,0,.10));
    opacity:.9;z-index:2;
}
.leaf-w{background:linear-gradient(135deg,#66BB6A,#2E7D32);}
.leaf-w-orange{background:linear-gradient(135deg,#FFB74D,#E88918);}

.leaf-w1{width:64px;height:64px;top:10%;left:1.5%;transform:rotate(-30deg);animation:floatLeaf 7s ease-in-out infinite;}
.leaf-w2{width:46px;height:46px;bottom:12%;right:2%;transform:rotate(30deg);animation:floatLeaf 6s ease-in-out infinite reverse;}
.leaf-wo1{width:36px;height:36px;bottom:8%;left:3%;transform:rotate(20deg);animation:floatLeaf 7.5s ease-in-out infinite;}

.why-left{position:relative;z-index:3;}

.why-label{
    display:inline-flex;align-items:center;gap:12px;
    color:#4CAF50;font-size:12.5px;font-weight:800;
    letter-spacing:3.5px;text-transform:uppercase;margin-bottom:16px;
}

.why-label .label-line{
    display:inline-block;width:44px;height:2px;
    background:linear-gradient(90deg,#4CAF50,#FFC107);
    border-radius:2px;position:relative;
}

.why-label .label-line::before{
    content:"";position:absolute;left:-6px;top:50%;
    transform:translateY(-50%);width:7px;height:7px;border-radius:50%;
    background:#4CAF50;box-shadow:0 0 0 4px rgba(76,175,80,.12);
}

.why-title{
    font-family:'Manrope',sans-serif;
    font-size:clamp(28px,3.4vw,44px);font-weight:800;
    line-height:1.15;letter-spacing:-1.3px;color:#1E5BC6;
    margin-bottom:18px;position:relative;
}

.why-title::after{
    content:"";display:block;width:66px;height:4px;margin-top:14px;
    border-radius:4px;background:linear-gradient(90deg,#4CAF50,#FFC107,#FF8C00);
}

.why-desc{
    color:#5A6A82;font-size:15.5px;line-height:1.75;
    margin-bottom:30px;font-weight:400;max-width:440px;
}

/* Join Membership Button */
.btn-join-membership{
    display:inline-flex;align-items:center;gap:10px;
    padding:15px 32px;border-radius:50px;
    background:linear-gradient(135deg,#0B2C6B,#1E5BC6);
    color:#fff;font-size:14.5px;font-weight:700;letter-spacing:.2px;
    text-decoration:none;border:none;
    box-shadow:0 14px 30px rgba(30,91,198,.32);
    transition:all .35s ease;position:relative;overflow:hidden;
}

.btn-join-membership::before{
    content:"";position:absolute;top:0;bottom:0;left:-100%;width:55%;
    background:linear-gradient(90deg,transparent,rgba(255,255,255,.35),transparent);
    transform:skewX(-20deg);transition:left .75s ease;
}

.btn-join-membership:hover::before{left:140%;}
.btn-join-membership:hover{color:#fff;transform:translateY(-3px);box-shadow:0 20px 40px rgba(30,91,198,.45);}
.btn-join-membership i{position:relative;z-index:2;transition:transform .3s ease;}
.btn-join-membership:hover i{transform:translateX(5px);}

/* FEATURE GRID */
.why-right{position:relative;z-index:3;}

.why-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:16px;
    padding:32px;
    border-radius:24px;
    background:linear-gradient(135deg,rgba(255,255,255,.96),rgba(255,255,255,.88));
    backdrop-filter:blur(18px);
    -webkit-backdrop-filter:blur(18px);
    border:1px solid rgba(255,255,255,.9);
    box-shadow:
        0 22px 55px rgba(11,31,58,.10),
        inset 0 1px 0 rgba(255,255,255,.95);
    position:relative;
}

/* Gradient border ring */
.why-grid::before{
    content:"";position:absolute;inset:0;border-radius:24px;padding:1.5px;
    background:linear-gradient(135deg,
        rgba(76,175,80,.40),
        rgba(255,193,7,.35),
        rgba(255,140,0,.40),
        rgba(30,91,198,.30));
    -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
    -webkit-mask-composite:xor;
    mask-composite:exclude;
    pointer-events:none;
}

.why-card{
    padding:16px 12px;border-radius:16px;
    display:flex;flex-direction:column;gap:12px;
    transition:all .35s ease;cursor:pointer;position:relative;
    background:rgba(255,255,255,.4);
}

.why-card:hover{
    background:linear-gradient(135deg,rgba(240,246,255,.95),rgba(232,245,233,.75));
    transform:translateY(-4px);
    box-shadow:0 12px 28px rgba(11,31,58,.10);
}

.why-icon{
    width:52px;height:52px;display:flex;align-items:center;justify-content:center;
    border-radius:14px;font-size:22px;color:#fff;position:relative;
    box-shadow:0 8px 20px rgba(0,0,0,.14);
    transition:transform .4s ease;
}

.why-card:hover .why-icon{transform:scale(1.08) rotate(-6deg);}

.icon-blue{background:linear-gradient(135deg,#1E5BC6,#0B2C6B);}
.icon-green{background:linear-gradient(135deg,#4CAF50,#2E7D32);}
.icon-cyan{background:linear-gradient(135deg,#26A69A,#00796B);}
.icon-teal{background:linear-gradient(135deg,#00897B,#004D40);}
.icon-orange{background:linear-gradient(135deg,#FF8C00,#E88918);}
.icon-pink{background:linear-gradient(135deg,#EC407A,#C2185B);}

.why-card-text h4{
    font-family:'Manrope',sans-serif;font-size:14.5px;font-weight:800;
    color:#0B1F3A;margin-bottom:5px;letter-spacing:-.2px;
    transition:color .3s ease;
}

.why-card:hover .why-card-text h4{color:#1E5BC6;}

.why-card-text p{
    color:#5A6A82;font-size:12px;line-height:1.55;margin:0;font-weight:400;
}

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

@media(max-width:1399.98px){
    .gallery-scatter{height:490px;}
    .gi-1{width:200px;height:148px;}
    .gi-2{width:220px;height:168px;}
    .gi-3{width:210px;height:158px;}
    .gi-4{width:190px;height:145px;}
    .gi-5{width:175px;height:132px;}
    .gi-6{width:200px;height:148px;}
    .gi-7{width:192px;height:145px;}
    .gi-8{width:185px;height:140px;}
}

@media(max-width:1199.98px){
    .moments-section{padding:85px 0 95px;}
    .why-join-section{padding:90px 0;}
    .gallery-scatter{height:450px;}

    .gi-1{width:175px;height:130px;}
    .gi-2{width:195px;height:148px;}
    .gi-3{width:185px;height:140px;}
    .gi-4{width:170px;height:128px;}
    .gi-5{width:155px;height:118px;}
    .gi-6{width:180px;height:132px;}
    .gi-7{width:172px;height:128px;}
    .gi-8{width:165px;height:122px;}

    .why-grid{padding:24px;gap:12px;}
    .why-icon{width:46px;height:46px;font-size:19px;}
    .why-card-text h4{font-size:13.5px;}
    .why-card-text p{font-size:11.5px;}
}

/* =========================================================
   TABLET — Reorder: Images → Gallery Button
   ========================================================= */

@media(max-width:991.98px){

    .moments-section{padding:75px 0 85px;}
    .why-join-section{padding:80px 0;}

    /* Make row a flex container so we can reorder */
    .moments-section .row{
        display:flex;
        flex-direction:column;
    }

    /* RIGHT (images) comes FIRST */
    .moments-right{
        order:1;
        width:100%;
        margin-bottom:30px;
    }

    /* LEFT (label, title, desc, button) SECOND */
    .moments-left{
        order:2;
        text-align:center;
        width:100%;
        margin-bottom:0;
    }

    .moments-left .moments-desc{margin-left:auto;margin-right:auto;}
    .moments-label{justify-content:center;}
    .moments-title::after{margin-left:auto;margin-right:auto;}

    /* Turn scatter into 2x4 grid */
    .gallery-scatter{
        height:auto;
        min-height:auto;
        display:grid;
        grid-template-columns:repeat(2,1fr);
        gap:16px;
        padding:10px;
    }

    .gallery-item{
        position:relative!important;
        left:auto!important;right:auto!important;
        top:auto!important;bottom:auto!important;
        width:100%!important;
        height:180px!important;
        transform:rotate(var(--rot))!important;
        animation:floatCard 6s ease-in-out infinite!important;
    }

    .gallery-item{--rot:0deg!important;}
    .gi-1,.gi-3,.gi-5,.gi-7{--rot:-3deg!important;}
    .gi-2,.gi-4,.gi-6,.gi-8{--rot:3deg!important;}

    /* WHY JOIN US — reorder on mobile */
    .why-join-section .row{
        display:flex;
        flex-direction:column;
    }

    /* RIGHT (stats grid) comes FIRST */
    .why-right{
        order:1;
        width:100%;
        margin-bottom:30px;
    }

    /* LEFT (label, title, desc, button) SECOND */
    .why-left{
        order:2;
        text-align:center;
        width:100%;
        margin-bottom:0;
    }

    .why-left .why-desc{margin-left:auto;margin-right:auto;}
    .why-label{justify-content:center;}
    .why-title::after{margin-left:auto;margin-right:auto;}

    .why-grid{grid-template-columns:repeat(2,1fr);padding:20px;}
}

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

@media(max-width:575.98px){

    .moments-section{padding:65px 0 75px;}
    .why-join-section{padding:70px 0;}

    /* Images 1 column */
    .gallery-scatter{grid-template-columns:1fr;gap:14px;}
    .gallery-item{height:200px!important;--rot:0deg!important;}
    .gi-1,.gi-3,.gi-5,.gi-7{--rot:-2deg!important;}
    .gi-2,.gi-4,.gi-6,.gi-8{--rot:2deg!important;}

    /* Why grid 1 column — horizontal cards */
    .why-grid{
        grid-template-columns:1fr;
        gap:10px;
        padding:16px;
    }

    .why-card{
        flex-direction:row;
        align-items:center;
        gap:14px;
        padding:14px;
    }

    .why-icon{width:46px;height:46px;font-size:19px;flex-shrink:0;}
    .why-card-text{flex:1;}

    .why-card-text h4{font-size:14px;}
    .why-card-text p{font-size:11.5px;}

    .moments-title{letter-spacing:-.7px;}
    .why-title{letter-spacing:-.8px;}
}

  /* =========================================================
   OUR PARTNERS & SUPPORTERS SECTION
========================================================= */

.partners-section{
    position:relative;
    padding:110px 0;
    overflow:hidden;
    isolation:isolate;
    background:#FDFCF7;
}

/* =========================================================
   AMBIENT GLOW LAYERS
========================================================= */

.partners-section::before{
    content:"";
    position:absolute;inset:0;z-index:0;pointer-events:none;
    background:
        radial-gradient(ellipse 55% 45% at -5% -5%, rgba(76,175,80,.24) 0%, rgba(76,175,80,.09) 32%, transparent 72%),
        radial-gradient(ellipse 55% 45% at 105% 0%, rgba(255,140,0,.26) 0%, rgba(255,193,7,.11) 32%, transparent 72%),
        radial-gradient(ellipse 60% 50% at -5% 105%, rgba(255,140,0,.22) 0%, rgba(255,193,7,.10) 35%, transparent 75%),
        radial-gradient(ellipse 65% 55% at 105% 105%, rgba(76,175,80,.22) 0%, rgba(255,193,7,.10) 25%, rgba(255,140,0,.10) 55%, transparent 82%),
        radial-gradient(ellipse 90% 70% at 50% 50%, rgba(232,240,252,.40) 0%, transparent 70%);
}

.partners-section::after{
    content:"";
    position:absolute;inset:0;z-index:0;pointer-events:none;
    background:radial-gradient(ellipse 120% 90% at 50% 50%, rgba(253,252,247,0) 0%, rgba(253,252,247,.15) 60%, rgba(253,252,247,.50) 100%);
}

/* =========================================================
   BACKGROUND DECOR
========================================================= */

.partners-bg{
    position:absolute;inset:0;pointer-events:none;z-index:1;overflow:hidden;
}

.partners-bg::before{
    content:"";position:absolute;top:-25%;left:-20%;
    width:70%;height:110%;
    background:radial-gradient(ellipse at 30% 40%, rgba(76,175,80,.20) 0%, rgba(76,175,80,.08) 40%, transparent 70%);
    border-radius:50% 40% 60% 45% / 55% 60% 40% 50%;
    filter:blur(45px);transform:rotate(-15deg);opacity:.9;
}

.partners-bg::after{
    content:"";position:absolute;bottom:-35%;right:-25%;
    width:85%;height:120%;
    background:radial-gradient(ellipse at 60% 60%, rgba(255,140,0,.20) 0%, rgba(255,193,7,.10) 30%, rgba(76,175,80,.08) 60%, transparent 80%);
    border-radius:45% 55% 40% 60% / 60% 45% 55% 40%;
    filter:blur(50px);transform:rotate(-12deg);opacity:.9;
}

/* Leaves */
.p-leaf,.p-orange-leaf{
    position:absolute;display:block;
    border-radius:0 100% 0 100%;
    filter:drop-shadow(0 6px 14px rgba(0,0,0,.10));
    opacity:.9;z-index:2;
}
.p-leaf{background:linear-gradient(135deg,#66BB6A,#2E7D32);}
.p-orange-leaf{background:linear-gradient(135deg,#FFB74D,#E88918);}

.p-leaf-1{width:64px;height:64px;top:12%;left:1.5%;transform:rotate(-30deg);animation:floatLeaf 7s ease-in-out infinite;}
.p-leaf-2{width:44px;height:44px;top:55%;left:3%;transform:rotate(45deg);animation:floatLeaf 6s ease-in-out infinite reverse;}
.p-leaf-3{width:52px;height:52px;bottom:12%;right:3%;transform:rotate(20deg);animation:floatLeaf 8s ease-in-out infinite;}
.p-leaf-4{width:36px;height:36px;top:8%;right:5%;transform:rotate(-25deg);animation:floatLeaf 6.5s ease-in-out infinite reverse;}
.p-orange-1{width:34px;height:34px;top:32%;left:2%;transform:rotate(30deg);animation:floatLeaf 7.5s ease-in-out infinite;}
.p-orange-2{width:40px;height:40px;bottom:8%;left:48%;transform:rotate(-20deg);animation:floatLeaf 6s ease-in-out infinite reverse;}

/* Dotted pattern (top-right) */
.p-dot{
    position:absolute;width:5px;height:5px;border-radius:50%;
    background:rgba(255,140,0,.55);
    box-shadow:0 0 8px rgba(255,140,0,.4);
    z-index:2;
}
.p-dot-1{top:4%;right:6%;}
.p-dot-2{top:6%;right:8%;}
.p-dot-3{top:8%;right:6%;}
.p-dot-4{top:4%;right:10%;}

/* =========================================================
   TOP — LEFT CONTENT
========================================================= */

.partners-top{position:relative;z-index:3;margin-bottom:70px;}

.partners-left{position:relative;z-index:3;}

.partners-label{
    display:inline-flex;align-items:center;gap:10px;
    color:#4CAF50;font-size:12.5px;font-weight:800;
    letter-spacing:3.5px;text-transform:uppercase;
    margin-bottom:20px;
}

.partners-label .label-dot{
    width:8px;height:8px;border-radius:50%;
    background:#4CAF50;
    box-shadow:0 0 0 4px rgba(76,175,80,.15);
}

.partners-label .label-line{
    display:inline-block;width:30px;height:2px;
    background:linear-gradient(90deg,#4CAF50,#FFC107);
    border-radius:2px;
}

.partners-title{
    font-family:'Manrope',sans-serif;
    font-size:clamp(34px,4.5vw,58px);
    font-weight:800;line-height:1.08;
    letter-spacing:-1.6px;color:#0B2C6B;
    margin-bottom:22px;
}

.partners-title .title-green{
    color:#3FA34D;
    display:block;
}

/* Gradient bar under title */
.title-bar{
    width:200px;
    height:5px;
    border-radius:5px;
    background:linear-gradient(90deg,#4CAF50 0%,#8BC34A 30%,#FFC107 60%,#FF8C00 100%);
    margin-bottom:26px;
    box-shadow:0 2px 10px rgba(76,175,80,.25);
}

.partners-desc{
    color:#5A6A82;font-size:16.5px;line-height:1.75;
    max-width:520px;font-weight:400;
}

/* =========================================================
   TOP — RIGHT VISUAL
========================================================= */

.partners-right{position:relative;z-index:3;}

.partners-visual{
    position:relative;
    width:100%;
    max-width:560px;
    margin-left:auto;
    aspect-ratio:1/1;
    display:flex;
    align-items:center;
    justify-content:center;
}

/* Green blob — top-left */
.pv-blob{
    position:absolute;
    border-radius:50%;
    z-index:0;
    filter:blur(2px);
}

.pv-blob-green{
    width:70%;
    height:70%;
    top:0;
    left:0;
    background:radial-gradient(circle at 30% 30%,
        rgba(76,175,80,.85) 0%,
        rgba(76,175,80,.55) 50%,
        rgba(76,175,80,.15) 80%,
        transparent 100%);
}

/* Orange blob — bottom-right */
.pv-blob-orange{
    width:60%;
    height:60%;
    bottom:0;
    right:0;
    background:radial-gradient(circle at 60% 60%,
        rgba(255,140,0,.85) 0%,
        rgba(255,193,7,.55) 50%,
        rgba(255,140,0,.15) 80%,
        transparent 100%);
}

/* Blue ring accent */
.pv-ring{
    position:absolute;
    bottom:6%;
    right:4%;
    width:90px;height:90px;
    border-radius:50%;
    border:3px solid rgba(30,91,198,.35);
    z-index:0;
}

/* Image wrapper with organic curve */
.pv-image-wrap{
    position:relative;
    z-index:2;
    width:78%;
    height:78%;
    overflow:hidden;
    border-radius:60% 40% 55% 45% / 55% 60% 40% 45%;
    box-shadow:
        0 30px 60px rgba(11,31,58,.20),
        0 10px 25px rgba(11,31,58,.10);
    background:#fff;
    padding:6px;
    animation:organicMorph 10s ease-in-out infinite;
}

@keyframes organicMorph{
    0%,100%{border-radius:60% 40% 55% 45% / 55% 60% 40% 45%;}
    50%{border-radius:45% 55% 40% 60% / 60% 45% 55% 40%;}
}

.pv-image-wrap img{
    width:100%;height:100%;
    object-fit:cover;
    border-radius:60% 40% 55% 45% / 55% 60% 40% 45%;
    display:block;
    animation:organicMorph 10s ease-in-out infinite;
}

/* Handshake Badge */
.pv-badge{
    position:absolute;
    bottom:8%;
    right:8%;
    z-index:4;
    width:88px;height:88px;
    border-radius:50%;
    background:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:36px;
    color:#4CAF50;
    box-shadow:
        0 18px 40px rgba(11,31,58,.20),
        0 6px 14px rgba(11,31,58,.10);
    border:3px solid #fff;
    animation:badgeFloat 4s ease-in-out infinite;
}

.pv-badge::before{
    content:"";
    position:absolute;
    inset:-6px;
    border-radius:50%;
    border:2px dashed rgba(76,175,80,.35);
    animation:rotateRing 18s linear infinite;
}

.pv-badge i{
    background:linear-gradient(135deg,#4CAF50,#1E5BC6);
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent;
}

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

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

/* Script text */
.pv-script{
    position:absolute;
    top:6%;
    right:-4%;
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    gap:2px;
    z-index:5;
    pointer-events:none;
    transform:rotate(-3deg);
}

.pv-script span{
    font-family:'Brush Script MT','Dancing Script','Great Vibes',cursive;
    font-size:clamp(24px,2.8vw,36px);
    font-weight:700;
    color:#0B2C6B;
    line-height:1.05;
    letter-spacing:.5px;
    text-shadow:
        0 2px 8px rgba(255,255,255,1),
        0 0 20px rgba(255,255,255,.9);
}

.pv-script .script-underline{position:relative;color:#0B2C6B;}

.pv-script .script-underline::after{
    content:"";
    position:absolute;
    left:2%;bottom:-6px;
    width:95%;height:3px;
    background:linear-gradient(90deg,#FF8C00,#D71920);
    border-radius:3px;
    transform:rotate(-3deg);
    box-shadow:0 2px 6px rgba(215,25,32,.25);
}

/* =========================================================
   PARTNER CARDS CAROUSEL
========================================================= */

.partners-carousel{
    position:relative;
    z-index:3;
    display:flex;
    align-items:center;
    gap:20px;
    margin-bottom:70px;
}

/* Arrow buttons */
.carousel-arrow{
    flex-shrink:0;
    width:56px;height:56px;
    border-radius:50%;
    border:1.5px solid rgba(11,31,58,.10);
    background:rgba(255,255,255,.95);
    color:#0B2C6B;
    font-size:22px;
    display:flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    transition:all .35s ease;
    box-shadow:
        0 8px 22px rgba(11,31,58,.10),
        inset 0 1px 0 rgba(255,255,255,.9);
}

.carousel-arrow:hover{
    background:linear-gradient(135deg,#1E5BC6,#0B2C6B);
    color:#fff;
    border-color:transparent;
    transform:scale(1.08);
    box-shadow:0 14px 30px rgba(30,91,198,.35);
}

/* Cards row */
.partners-row{
    flex:1;
    display:grid;
    grid-template-columns:repeat(5,1fr);
    gap:18px;
    overflow-x:auto;
    overflow-y:hidden;
    scrollbar-width:none;
    padding:10px 4px;
}

.partners-row::-webkit-scrollbar{display:none;}

/* Base card */
.partner-card{
    position:relative;
    padding:26px 18px 22px;
    border-radius:18px;
    background:linear-gradient(135deg,rgba(255,255,255,.98),rgba(255,255,255,.90));
    backdrop-filter:blur(12px);
    border:1px solid rgba(11,31,58,.06);
    text-align:center;
    transition:all .4s cubic-bezier(.2,.8,.2,1);
    cursor:pointer;
    overflow:hidden;
    box-shadow:
        0 10px 30px rgba(11,31,58,.08),
        0 2px 8px rgba(11,31,58,.04);
    min-height:190px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
}

.partner-card:hover{
    transform:translateY(-8px);
    box-shadow:
        0 25px 50px rgba(11,31,58,.14),
        0 6px 18px rgba(11,31,58,.08);
}

/* Curved corner decoration — bottom-right */
.partner-card::after{
    content:"";
    position:absolute;
    bottom:-30px;
    right:-30px;
    width:100px;
    height:100px;
    border-radius:50%;
    pointer-events:none;
    z-index:1;
    transition:all .55s ease;
}

.partner-card:hover::after{
    transform:scale(1.3) translate(-6px,-6px);
}

/* Corner curved line accent */
.partner-card::before{
    content:"";
    position:absolute;
    bottom:0;right:0;
    width:70px;height:70px;
    border-top-left-radius:100%;
    pointer-events:none;
    z-index:2;
    transition:all .5s ease;
    opacity:.9;
}

.partner-card:hover::before{
    width:85px;height:85px;
}

/* Category-specific colors */
.card-green::after{
    background:radial-gradient(circle at 30% 30%, rgba(76,175,80,.45) 0%, rgba(76,175,80,.20) 40%, transparent 72%);
}
.card-green::before{border-top:2px solid rgba(76,175,80,.45);border-left:2px solid rgba(76,175,80,.45);}

.card-blue::after{
    background:radial-gradient(circle at 30% 30%, rgba(30,91,198,.40) 0%, rgba(30,91,198,.18) 40%, transparent 72%);
}
.card-blue::before{border-top:2px solid rgba(30,91,198,.40);border-left:2px solid rgba(30,91,198,.40);}

.card-orange::after{
    background:radial-gradient(circle at 30% 30%, rgba(255,140,0,.45) 0%, rgba(255,140,0,.20) 40%, transparent 72%);
}
.card-orange::before{border-top:2px solid rgba(255,140,0,.45);border-left:2px solid rgba(255,140,0,.45);}

.card-cyan::after{
    background:radial-gradient(circle at 30% 30%, rgba(38,166,154,.45) 0%, rgba(38,166,154,.20) 40%, transparent 72%);
}
.card-cyan::before{border-top:2px solid rgba(38,166,154,.45);border-left:2px solid rgba(38,166,154,.45);}

.card-blue2::after{
    background:radial-gradient(circle at 30% 30%, rgba(100,120,220,.42) 0%, rgba(100,120,220,.18) 40%, transparent 72%);
}
.card-blue2::before{border-top:2px solid rgba(100,120,220,.42);border-left:2px solid rgba(100,120,220,.42);}

/* Logo slot — where actual logo will go */
.partner-logo-slot{
    width:56px;
    height:56px;
    margin:0 auto 16px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:14px;
    background:linear-gradient(135deg,#F5F9FF,#EEF4FB);
    border:1px dashed rgba(11,31,58,.12);
    transition:all .4s ease;
    position:relative;
    z-index:3;
}

.partner-card:hover .partner-logo-slot{
    transform:scale(1.08) rotate(-3deg);
    background:linear-gradient(135deg,#FFFFFF,#F0F6FF);
    border-style:solid;
}

/* Placeholder icon colors per category */
.partner-placeholder-icon{
    font-size:26px;
    transition:color .3s ease;
}

.card-green .partner-placeholder-icon{color:#4CAF50;}
.card-blue .partner-placeholder-icon{color:#1E5BC6;}
.card-orange .partner-placeholder-icon{color:#FF8C00;}
.card-cyan .partner-placeholder-icon{color:#26A69A;}
.card-blue2 .partner-placeholder-icon{color:#4C6FE0;}

.partner-name{
    font-family:'Manrope',sans-serif;
    font-size:15px;
    font-weight:800;
    color:#0B1F3A;
    margin-bottom:6px;
    letter-spacing:-.2px;
    position:relative;
    z-index:3;
}

.partner-tag{
    color:#8794A8;
    font-size:11.5px;
    font-weight:500;
    margin:0;
    position:relative;
    z-index:3;
    letter-spacing:.1px;
}

/* =========================================================
   BOTTOM TRUST BAR
========================================================= */

.trust-bar{
    position:relative;
    z-index:3;
    display:flex;
    align-items:center;
    justify-content:space-around;
    gap:24px;
    flex-wrap:wrap;

    padding:26px 40px;
    border-radius:80px;

    background:linear-gradient(135deg,rgba(255,255,255,.94),rgba(255,255,255,.82));
    backdrop-filter:blur(18px) saturate(160%);
    -webkit-backdrop-filter:blur(18px) saturate(160%);

    border:1px solid rgba(255,255,255,.9);
    box-shadow:
        0 20px 50px rgba(11,31,58,.09),
        inset 0 1px 0 rgba(255,255,255,.95);
}

.trust-bar::before{
    content:"";
    position:absolute;inset:0;
    border-radius:80px;padding:1.5px;
    background:linear-gradient(135deg,
        rgba(76,175,80,.35),
        rgba(255,193,7,.30),
        rgba(255,140,0,.35),
        rgba(30,91,198,.30));
    -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
    -webkit-mask-composite:xor;
    mask-composite:exclude;
    pointer-events:none;
}

.trust-item{
    display:flex;
    align-items:center;
    gap:14px;
    flex:1;
    min-width:220px;
    max-width:340px;
    justify-content:flex-start;
}

.trust-icon{
    width:52px;
    height:52px;
    flex-shrink:0;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    font-size:22px;
    color:#fff;
    box-shadow:0 8px 20px rgba(0,0,0,.14);
    transition:transform .4s ease;
}

.trust-item:hover .trust-icon{
    transform:scale(1.10) rotate(-6deg);
}

.ti-green{background:linear-gradient(135deg,#66BB6A,#2E7D32);}
.ti-orange{background:linear-gradient(135deg,#FFB74D,#E88918);}
.ti-blue{background:linear-gradient(135deg,#1E5BC6,#0B2C6B);}

.trust-text{display:flex;flex-direction:column;line-height:1.3;}
.trust-text strong{
    font-family:'Manrope',sans-serif;
    font-size:14.5px;font-weight:800;
    color:#0B1F3A;
    letter-spacing:-.2px;
    margin-bottom:3px;
}
.trust-text small{
    color:#7A8BA1;
    font-size:12px;
    font-weight:500;
}

.trust-divider{
    width:1px;
    height:44px;
    background:linear-gradient(180deg,transparent,#E0E7F0,transparent);
    flex-shrink:0;
}

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

@media(max-width:1199.98px){
    .partners-section{padding:95px 0;}
    .partners-visual{max-width:500px;}
    .pv-badge{width:78px;height:78px;font-size:32px;}
    .partner-card{padding:22px 14px 18px;min-height:175px;}
    .partner-name{font-size:14px;}
    .trust-bar{padding:22px 30px;}
}

/* Tablet */
@media(max-width:991.98px){

    .partners-section{padding:85px 0;}

    /* LEFT side centered */
    .partners-left{text-align:center;margin-bottom:40px;}
    .partners-label{justify-content:center;}
    .partners-desc{margin-left:auto;margin-right:auto;}
    .title-bar{margin-left:auto;margin-right:auto;}

    /* Visual centered */
    .partners-visual{max-width:480px;margin:0 auto;}
    .pv-script{right:0;transform:rotate(-3deg) scale(.9);}

    /* Cards grid — 3 columns */
    .partners-row{grid-template-columns:repeat(3,1fr);}
    .carousel-arrow{display:none;}

    /* Trust bar stacked */
    .trust-bar{border-radius:30px;padding:24px;gap:18px;}
    .trust-divider{display:none;}
    .trust-item{min-width:auto;max-width:100%;flex:0 0 auto;width:100%;}
}

/* Small mobile */
@media(max-width:575.98px){

    .partners-section{padding:70px 0;}

    .partners-title{letter-spacing:-.7px;}
    .partners-desc{font-size:15px;}

    .partners-visual{max-width:340px;}
    .pv-image-wrap{width:82%;height:82%;}
    .pv-badge{width:64px;height:64px;font-size:26px;bottom:6%;right:6%;}
    .pv-script{font-size:22px;right:-4px;top:3%;}
    .pv-ring{width:70px;height:70px;}

    /* 1 column */
    .partners-row{grid-template-columns:1fr;}
    .partner-card{min-height:auto;padding:22px 18px;}

    .trust-bar{border-radius:24px;padding:20px;gap:16px;}
    .trust-icon{width:46px;height:46px;font-size:19px;}
    .trust-text strong{font-size:13.5px;}
    .trust-text small{font-size:11px;}

    .title-bar{width:160px;}
}

  /* =========================================================
   STORIES OF CHANGE SECTION — PREMIUM GLASS
========================================================= */

.stories-section{
    position:relative;
    padding:110px 0;
    overflow:hidden;
    isolation:isolate;
    background:#FDFCF7;
}

/* Ambient glow */
.stories-section::before{
    content:"";
    position:absolute;inset:0;z-index:0;pointer-events:none;
    background:
        radial-gradient(ellipse 55% 45% at -5% -5%, rgba(76,175,80,.24) 0%, rgba(76,175,80,.09) 32%, transparent 72%),
        radial-gradient(ellipse 55% 45% at 105% 0%, rgba(255,140,0,.26) 0%, rgba(255,193,7,.11) 32%, transparent 72%),
        radial-gradient(ellipse 60% 50% at -5% 105%, rgba(255,140,0,.22) 0%, rgba(255,193,7,.10) 35%, transparent 75%),
        radial-gradient(ellipse 65% 55% at 105% 105%, rgba(76,175,80,.22) 0%, rgba(255,193,7,.10) 25%, rgba(255,140,0,.10) 55%, transparent 82%),
        radial-gradient(ellipse 90% 70% at 50% 50%, rgba(232,240,252,.40) 0%, transparent 70%);
}

.stories-section::after{
    content:"";
    position:absolute;inset:0;z-index:0;pointer-events:none;
    background:radial-gradient(ellipse 120% 90% at 50% 50%, rgba(253,252,247,0) 0%, rgba(253,252,247,.15) 60%, rgba(253,252,247,.50) 100%);
}

/* Decor background */
.stories-bg{
    position:absolute;inset:0;pointer-events:none;z-index:1;overflow:hidden;
}

.stories-bg::before{
    content:"";position:absolute;top:-25%;left:-20%;
    width:70%;height:110%;
    background:radial-gradient(ellipse at 30% 40%, rgba(76,175,80,.20) 0%, rgba(76,175,80,.08) 40%, transparent 70%);
    border-radius:50% 40% 60% 45% / 55% 60% 40% 50%;
    filter:blur(45px);transform:rotate(-15deg);opacity:.9;
}

.stories-bg::after{
    content:"";position:absolute;bottom:-35%;right:-25%;
    width:85%;height:120%;
    background:radial-gradient(ellipse at 60% 60%, rgba(255,140,0,.20) 0%, rgba(255,193,7,.10) 30%, rgba(76,175,80,.08) 60%, transparent 80%);
    border-radius:45% 55% 40% 60% / 60% 45% 55% 40%;
    filter:blur(50px);transform:rotate(-12deg);opacity:.9;
}

/* Leaves */
.s-leaf,.s-orange-leaf{
    position:absolute;display:block;
    border-radius:0 100% 0 100%;
    filter:drop-shadow(0 6px 14px rgba(0,0,0,.10));
    opacity:.9;z-index:2;
}
.s-leaf{background:linear-gradient(135deg,#66BB6A,#2E7D32);}
.s-orange-leaf{background:linear-gradient(135deg,#FFB74D,#E88918);}

.s-leaf-1{width:60px;height:60px;top:10%;left:1.5%;transform:rotate(-30deg);animation:floatLeaf 7s ease-in-out infinite;}
.s-leaf-2{width:44px;height:44px;top:55%;left:3%;transform:rotate(45deg);animation:floatLeaf 6s ease-in-out infinite reverse;}
.s-leaf-3{width:52px;height:52px;bottom:10%;right:2%;transform:rotate(20deg);animation:floatLeaf 8s ease-in-out infinite;}
.s-leaf-4{width:36px;height:36px;top:8%;right:5%;transform:rotate(-25deg);animation:floatLeaf 6.5s ease-in-out infinite reverse;}
.s-orange-1{width:34px;height:34px;top:35%;left:2%;transform:rotate(30deg);animation:floatLeaf 7.5s ease-in-out infinite;}
.s-orange-2{width:40px;height:40px;bottom:6%;left:45%;transform:rotate(-20deg);animation:floatLeaf 6s ease-in-out infinite reverse;}

/* Dots (bottom-left pattern) */
.s-dot{
    position:absolute;width:5px;height:5px;border-radius:50%;
    background:rgba(76,175,80,.55);
    box-shadow:0 0 8px rgba(76,175,80,.4);
    z-index:2;
}
.s-dot-1{bottom:8%;left:4%;}
.s-dot-2{bottom:6%;left:6%;}
.s-dot-3{bottom:8%;left:8%;}
.s-dot-4{bottom:6%;left:10%;}

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

.stories-left{position:relative;z-index:3;}

.stories-label{
    display:inline-flex;align-items:center;gap:8px;
    color:#4CAF50;font-size:12px;font-weight:800;
    letter-spacing:3px;text-transform:uppercase;
    margin-bottom:20px;
}

.stories-label .label-dot{
    width:8px;height:8px;border-radius:50%;
    background:#4CAF50;
    box-shadow:0 0 0 4px rgba(76,175,80,.15);
}

.stories-label .label-line{
    display:inline-block;width:28px;height:2px;
    background:linear-gradient(90deg,#4CAF50,#FFC107);
    border-radius:2px;
}

.stories-label .label-diamond{
    color:#4CAF50;font-size:8px;
    margin:0 2px;
}

.stories-title{
    font-family:'Manrope',sans-serif;
    font-size:clamp(32px,4.2vw,54px);
    font-weight:800;line-height:1.08;
    letter-spacing:-1.6px;color:#0B2C6B;
    margin-bottom:22px;
}

.stories-title .title-green{
    color:#3FA34D;
    display:block;
}

.title-bar{
    width:180px;
    height:5px;
    border-radius:5px;
    background:linear-gradient(90deg,#4CAF50 0%,#8BC34A 30%,#FFC107 60%,#FF8C00 100%);
    margin-bottom:26px;
    box-shadow:0 2px 10px rgba(76,175,80,.25);
}

.stories-desc{
    color:#5A6A82;font-size:16px;line-height:1.75;
    max-width:440px;font-weight:400;
    margin-bottom:32px;
}

/* Read More Stories Button */
.btn-read-stories{
    display:inline-flex;align-items:center;gap:10px;
    padding:16px 32px;border-radius:50px;
    background:linear-gradient(135deg,#0B2C6B,#1E5BC6);
    color:#fff;font-size:15px;font-weight:700;
    letter-spacing:.2px;text-decoration:none;
    border:none;
    box-shadow:0 14px 30px rgba(30,91,198,.32);
    transition:all .35s ease;
    position:relative;overflow:hidden;
}

.btn-read-stories::before{
    content:"";position:absolute;top:0;bottom:0;left:-100%;
    width:55%;
    background:linear-gradient(90deg,transparent,rgba(255,255,255,.35),transparent);
    transform:skewX(-20deg);
    transition:left .75s ease;
}

.btn-read-stories:hover::before{left:140%;}
.btn-read-stories:hover{color:#fff;transform:translateY(-3px);box-shadow:0 20px 40px rgba(30,91,198,.45);}
.btn-read-stories i{position:relative;z-index:2;transition:transform .3s ease;}
.btn-read-stories:hover i{transform:translateX(5px);}

/* =========================================================
   CENTER — HERO STORY CARD
========================================================= */

.stories-center{position:relative;z-index:3;}

.hero-story-card{
    position:relative;
    width:100%;
    max-width:420px;
    margin:0 auto;
    aspect-ratio:4/5;
    border-radius:32px;
    overflow:hidden;
    background:#fff;
    box-shadow:
        0 30px 70px rgba(11,31,58,.20),
        0 10px 25px rgba(11,31,58,.10);
}

/* Organic blobs behind */
.hsc-blob{
    position:absolute;
    border-radius:50%;
    filter:blur(40px);
    z-index:0;
    pointer-events:none;
}

.hsc-blob-green{
    width:200px;height:200px;
    top:-60px;left:-60px;
    background:radial-gradient(circle, rgba(76,175,80,.55) 0%, transparent 70%);
}

.hsc-blob-orange{
    width:220px;height:220px;
    bottom:-70px;right:-70px;
    background:radial-gradient(circle, rgba(255,140,0,.55) 0%, transparent 70%);
}

/* Main Image */
.hsc-image-wrap{
    position:absolute;
    inset:0;
    z-index:1;
}

.hsc-image-wrap img{
    width:100%;height:100%;
    object-fit:cover;
    object-position:center top;
}

/* Top floating badge */
.hsc-top-badge{
    position:absolute;
    top:20px;right:20px;
    z-index:3;
    display:flex;align-items:center;gap:10px;
    padding:9px 16px 9px 9px;
    border-radius:50px;

    background:rgba(255,255,255,.92);
    backdrop-filter:blur(14px) saturate(180%);
    -webkit-backdrop-filter:blur(14px) saturate(180%);

    border:1px solid rgba(255,255,255,.9);
    box-shadow:
        0 12px 28px rgba(11,31,58,.14),
        inset 0 1px 0 rgba(255,255,255,.9);
    animation:badgeFloat 4s ease-in-out infinite;
}

.hsc-badge-icon{
    width:36px;height:36px;
    display:flex;align-items:center;justify-content:center;
    border-radius:50%;
    background:linear-gradient(135deg,#4CAF50,#2E7D32);
    color:#fff;
    font-size:16px;
    flex-shrink:0;
}

.hsc-badge-text{display:flex;flex-direction:column;line-height:1.15;}
.hsc-badge-text strong{
    font-family:'Manrope',sans-serif;
    font-size:12px;font-weight:800;color:#0B1F3A;
}
.hsc-badge-text small{font-size:10px;color:#6A7A90;font-weight:500;}

/* Quote overlay (bottom) */
.hsc-quote{
    position:absolute;
    left:0;right:0;bottom:0;
    z-index:2;
    padding:40px 26px 26px;
    background:linear-gradient(180deg,
        rgba(11,31,58,0) 0%,
        rgba(11,31,58,.35) 20%,
        rgba(11,31,58,.80) 55%,
        rgba(11,31,58,.95) 100%);
    color:#fff;
}

.hsc-quote-icon{
    position:absolute;
    top:14px;left:22px;
    font-size:38px;
    color:rgba(255,255,255,.35);
    line-height:1;
}

.hsc-quote-text{
    font-size:14px;
    line-height:1.65;
    color:#fff;
    margin:0 0 18px;
    font-weight:500;
    font-style:italic;
    max-width:340px;
}

/* Author row */
.hsc-author{
    display:flex;align-items:center;gap:12px;
    padding-top:16px;
    border-top:1px solid rgba(255,255,255,.20);
}

.hsc-avatar{
    width:46px;height:46px;
    border-radius:50%;
    object-fit:cover;
    border:2.5px solid #fff;
    box-shadow:0 6px 16px rgba(0,0,0,.25);
    flex-shrink:0;
}

.hsc-author-info{display:flex;flex-direction:column;line-height:1.2;}
.hsc-author-info strong{
    font-family:'Manrope',sans-serif;
    font-size:14px;font-weight:800;color:#fff;
}
.hsc-author-info small{font-size:11px;color:rgba(255,255,255,.75);font-weight:500;}

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

/* =========================================================
   RIGHT — MINI STORY CARDS
========================================================= */

.stories-right{
    position:relative;
    z-index:3;
    display:flex;
    flex-direction:column;
    gap:18px;
}

.mini-story-card{
    position:relative;
    display:flex;
    align-items:center;
    gap:16px;
    padding:16px 58px 16px 16px;

    border-radius:20px;

    background:linear-gradient(135deg,rgba(255,255,255,.98),rgba(255,255,255,.90));
    backdrop-filter:blur(14px);

    border:1px solid rgba(255,255,255,.9);
    box-shadow:
        0 10px 28px rgba(11,31,58,.08),
        inset 0 1px 0 rgba(255,255,255,.9);

    transition:all .4s cubic-bezier(.2,.8,.2,1);
    cursor:pointer;
    overflow:hidden;
}

/* Colored left edge per category */
.mini-story-card::before{
    content:"";
    position:absolute;
    top:0;bottom:0;left:0;
    width:4px;
    border-radius:20px 0 0 20px;
}

.card-health::before{background:linear-gradient(180deg,#E31E24,#B31217);}
.card-skill::before{background:linear-gradient(180deg,#4CAF50,#2E7D32);}
.card-community::before{background:linear-gradient(180deg,#FF8C00,#E88918);}

/* Category-based soft glow on hover */
.card-health:hover{
    box-shadow:
        0 20px 45px rgba(227,30,36,.18),
        0 6px 15px rgba(11,31,58,.08);
    transform:translateY(-4px);
}

.card-skill:hover{
    box-shadow:
        0 20px 45px rgba(76,175,80,.18),
        0 6px 15px rgba(11,31,58,.08);
    transform:translateY(-4px);
}

.card-community:hover{
    box-shadow:
        0 20px 45px rgba(255,140,0,.18),
        0 6px 15px rgba(11,31,58,.08);
    transform:translateY(-4px);
}

/* Card image */
.msc-image{
    width:78px;
    height:78px;
    border-radius:16px;
    overflow:hidden;
    flex-shrink:0;
    background:#F0F6FF;
    box-shadow:0 6px 16px rgba(11,31,58,.10);
}

.msc-image img{
    width:100%;height:100%;
    object-fit:cover;
    transition:transform .5s ease;
}

.mini-story-card:hover .msc-image img{
    transform:scale(1.10);
}

/* Content */
.msc-content{flex:1;min-width:0;}

.msc-cat{
    display:inline-flex;align-items:center;gap:5px;
    font-size:9.5px;font-weight:800;
    letter-spacing:1.2px;text-transform:uppercase;
    padding:3px 8px;
    border-radius:20px;
    margin-bottom:7px;
}

.cat-health{
    color:#D71920;
    background:rgba(227,30,36,.10);
}

.cat-skill{
    color:#2E7D32;
    background:rgba(76,175,80,.12);
}

.cat-community{
    color:#E88918;
    background:rgba(255,140,0,.12);
}

.msc-title{
    font-family:'Manrope',sans-serif;
    font-size:15px;
    font-weight:800;
    color:#0B1F3A;
    line-height:1.25;
    margin-bottom:5px;
    letter-spacing:-.2px;
    transition:color .3s ease;
}

.mini-story-card:hover .msc-title{color:#1E5BC6;}

.msc-desc{
    color:#6A7A90;
    font-size:11.5px;
    line-height:1.5;
    margin:0;
    font-weight:400;
}

/* Arrow button */
.msc-arrow{
    position:absolute;
    right:16px;
    top:50%;
    transform:translateY(-50%);
    width:38px;height:38px;
    border-radius:50%;
    border:1.5px solid rgba(11,31,58,.10);
    background:#fff;
    color:#1E5BC6;
    font-size:16px;
    display:flex;align-items:center;justify-content:center;
    cursor:pointer;
    transition:all .35s ease;
    flex-shrink:0;
    box-shadow:0 5px 14px rgba(11,31,58,.08);
}

.mini-story-card:hover .msc-arrow{
    background:linear-gradient(135deg,#1E5BC6,#0B2C6B);
    color:#fff;
    border-color:transparent;
    transform:translateY(-50%) scale(1.08);
    box-shadow:0 10px 22px rgba(30,91,198,.35);
}

/* =========================================================
   BOTTOM — JOURNEY BAR
========================================================= */

.journey-bar{
    position:relative;
    z-index:3;
    margin-top:80px;

    display:flex;
    align-items:center;
    gap:32px;
    flex-wrap:wrap;

    padding:28px 40px;
    border-radius:80px;

    background:linear-gradient(135deg,rgba(255,255,255,.94),rgba(255,255,255,.82));
    backdrop-filter:blur(18px) saturate(160%);
    -webkit-backdrop-filter:blur(18px) saturate(160%);

    border:1px solid rgba(255,255,255,.9);
    box-shadow:
        0 22px 55px rgba(11,31,58,.10),
        inset 0 1px 0 rgba(255,255,255,.95);
}

.journey-bar::before{
    content:"";
    position:absolute;inset:0;
    border-radius:80px;padding:1.5px;
    background:linear-gradient(135deg,
        rgba(76,175,80,.35),
        rgba(255,193,7,.30),
        rgba(255,140,0,.35),
        rgba(30,91,198,.30));
    -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
    -webkit-mask-composite:xor;
    mask-composite:exclude;
    pointer-events:none;
}

/* Left label */
.journey-label{
    display:flex;
    align-items:center;
    gap:16px;
    flex-shrink:0;
    min-width:220px;
}

.journey-label-icon{
    width:60px;height:60px;
    display:flex;align-items:center;justify-content:center;
    border-radius:50%;
    background:linear-gradient(135deg,#E8F5E9,#C8E6C9);
    color:#4CAF50;
    font-size:26px;
    flex-shrink:0;
    box-shadow:
        0 8px 20px rgba(76,175,80,.20),
        inset 0 1px 0 rgba(255,255,255,.7);
}

.journey-label-text{
    display:flex;
    flex-direction:column;
    line-height:1.25;
}

.journey-label-text strong{
    font-family:'Manrope',sans-serif;
    font-size:15px;font-weight:800;
    color:#0B1F3A;
    letter-spacing:-.2px;
    margin-bottom:4px;
}

.journey-label-text small{
    color:#7A8BA1;
    font-size:11.5px;
    font-weight:500;
    line-height:1.4;
}

.journey-divider{
    width:1px;
    height:56px;
    background:linear-gradient(180deg,transparent,#E0E7F0,transparent);
    flex-shrink:0;
}

/* Steps */
.journey-steps{
    flex:1;
    display:flex;
    align-items:center;
    justify-content:space-around;
    gap:18px;
    min-width:0;
}

.journey-step{
    display:flex;
    flex-direction:column;
    align-items:center;
    text-align:center;
    gap:8px;
    transition:transform .4s ease;
    cursor:pointer;
    min-width:0;
}

.journey-step:hover{
    transform:translateY(-4px);
}

.step-icon{
    width:52px;height:52px;
    display:flex;align-items:center;justify-content:center;
    border-radius:50%;
    color:#fff;
    font-size:22px;
    box-shadow:0 8px 20px rgba(0,0,0,.15);
    transition:transform .4s ease;
}

.journey-step:hover .step-icon{
    transform:scale(1.10) rotate(-6deg);
}

.step-green{background:linear-gradient(135deg,#66BB6A,#2E7D32);}
.step-orange{background:linear-gradient(135deg,#FFB74D,#E88918);}
.step-blue{background:linear-gradient(135deg,#1E5BC6,#0B2C6B);}
.step-green2{background:linear-gradient(135deg,#4CAF50,#2E7D32);}

.journey-step strong{
    font-family:'Manrope',sans-serif;
    font-size:13.5px;font-weight:800;
    color:#0B1F3A;
    letter-spacing:-.2px;
}

.journey-step small{
    color:#7A8BA1;
    font-size:10.5px;
    font-weight:500;
    line-height:1.3;
}

.journey-arrow{
    color:#B8C5D6;
    font-size:16px;
    flex-shrink:0;
}

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

@media(max-width:1199.98px){
    .stories-section{padding:95px 0;}
    .hero-story-card{max-width:380px;}
    .msc-image{width:70px;height:70px;}
    .msc-title{font-size:14px;}
    .journey-bar{padding:24px 28px;gap:22px;}
    .journey-label{min-width:190px;}
    .journey-label-icon{width:54px;height:54px;font-size:22px;}
    .step-icon{width:46px;height:46px;font-size:19px;}
    .journey-step strong{font-size:12.5px;}
    .journey-step small{font-size:10px;}
}

@media(max-width:991.98px){

    .stories-section{padding:85px 0;}

    /* LEFT — center on tablet */
    .stories-left{text-align:center;margin-bottom:30px;}
    .stories-label{justify-content:center;}
    .stories-desc{margin-left:auto;margin-right:auto;}
    .title-bar{margin-left:auto;margin-right:auto;}

    /* CENTER — visually stays */
    .stories-center{margin-bottom:30px;}

    /* RIGHT — 1 column grid */
    .stories-right{gap:14px;}

    /* Journey bar — stacked */
    .journey-bar{
        border-radius:30px;
        padding:24px;
        flex-direction:column;
        align-items:stretch;
        gap:18px;
    }

    .journey-divider{display:none;}

    .journey-label{justify-content:center;text-align:center;min-width:0;}

    .journey-steps{
        flex-wrap:wrap;
        gap:16px;
    }

    .journey-arrow{
        display:none;
    }

    .journey-step{
        flex:1 1 40%;
        min-width:120px;
    }
}

@media(max-width:575.98px){

    .stories-section{padding:70px 0;}

    .stories-title{letter-spacing:-.7px;}
    .stories-desc{font-size:15px;}

    .btn-read-stories{
        width:100%;
        justify-content:center;
    }

    .hero-story-card{max-width:340px;}

    .hsc-top-badge{padding:7px 14px 7px 7px;gap:8px;}
    .hsc-badge-icon{width:32px;height:32px;font-size:14px;}
    .hsc-badge-text strong{font-size:11px;}
    .hsc-badge-text small{font-size:9px;}

    .hsc-quote{padding:36px 20px 22px;}
    .hsc-quote-text{font-size:13px;}
    .hsc-avatar{width:42px;height:42px;}
    .hsc-author-info strong{font-size:13px;}
    .hsc-author-info small{font-size:10px;}

    .mini-story-card{padding:14px 50px 14px 14px;}
    .msc-image{width:64px;height:64px;border-radius:14px;}
    .msc-title{font-size:13.5px;}
    .msc-desc{font-size:11px;}
    .msc-arrow{width:34px;height:34px;font-size:14px;right:12px;}

    .journey-bar{padding:20px;border-radius:24px;}
    .journey-label-icon{width:50px;height:50px;font-size:22px;}
    .journey-label-text strong{font-size:14px;}
    .step-icon{width:44px;height:44px;font-size:19px;}
    .journey-step strong{font-size:12px;}
    .journey-step small{font-size:9.5px;}
    .title-bar{width:150px;}
}


  /* =========================================================
   BIG CTA — BECOME A CHANGEMAKER
========================================================= */

.cta-change-section{
    position:relative;
    padding:110px 0;
    overflow:hidden;
    isolation:isolate;
    background:#FDFCF7;
}

/* Ambient glow layers */
.cta-change-section::before{
    content:"";
    position:absolute;inset:0;z-index:0;pointer-events:none;
    background:
        radial-gradient(ellipse 55% 45% at -5% -5%, rgba(76,175,80,.26) 0%, rgba(76,175,80,.10) 32%, transparent 72%),
        radial-gradient(ellipse 55% 45% at 105% 0%, rgba(255,140,0,.28) 0%, rgba(255,193,7,.12) 32%, transparent 72%),
        radial-gradient(ellipse 60% 50% at -5% 105%, rgba(255,140,0,.24) 0%, rgba(255,193,7,.12) 35%, transparent 75%),
        radial-gradient(ellipse 65% 55% at 105% 105%, rgba(76,175,80,.24) 0%, rgba(255,193,7,.12) 25%, rgba(255,140,0,.10) 55%, transparent 82%),
        radial-gradient(ellipse 90% 70% at 50% 50%, rgba(232,240,252,.40) 0%, transparent 70%);
}

.cta-change-section::after{
    content:"";
    position:absolute;inset:0;z-index:0;pointer-events:none;
    background:radial-gradient(ellipse 120% 90% at 50% 50%, rgba(253,252,247,0) 0%, rgba(253,252,247,.15) 60%, rgba(253,252,247,.50) 100%);
}

.cta-bg{
    position:absolute;inset:0;pointer-events:none;z-index:1;overflow:hidden;
}

.cta-bg::before{
    content:"";position:absolute;top:-25%;left:-20%;
    width:70%;height:110%;
    background:radial-gradient(ellipse at 30% 40%, rgba(76,175,80,.20) 0%, rgba(76,175,80,.08) 40%, transparent 70%);
    border-radius:50% 40% 60% 45% / 55% 60% 40% 50%;
    filter:blur(45px);transform:rotate(-15deg);opacity:.9;
}

.cta-bg::after{
    content:"";position:absolute;bottom:-35%;right:-25%;
    width:85%;height:120%;
    background:radial-gradient(ellipse at 60% 60%, rgba(255,140,0,.20) 0%, rgba(255,193,7,.10) 30%, rgba(76,175,80,.08) 60%, transparent 80%);
    border-radius:45% 55% 40% 60% / 60% 45% 55% 40%;
    filter:blur(50px);transform:rotate(-12deg);opacity:.9;
}

/* Leaves */
.c-leaf,.c-orange-leaf{
    position:absolute;display:block;
    border-radius:0 100% 0 100%;
    filter:drop-shadow(0 6px 14px rgba(0,0,0,.10));
    opacity:.9;z-index:2;
}
.c-leaf{background:linear-gradient(135deg,#66BB6A,#2E7D32);}
.c-orange-leaf{background:linear-gradient(135deg,#FFB74D,#E88918);}

.c-leaf-1{width:60px;height:60px;top:10%;left:1.5%;transform:rotate(-30deg);animation:floatLeaf 7s ease-in-out infinite;}
.c-leaf-2{width:44px;height:44px;top:55%;left:3%;transform:rotate(45deg);animation:floatLeaf 6s ease-in-out infinite reverse;}
.c-leaf-3{width:52px;height:52px;bottom:12%;right:3%;transform:rotate(20deg);animation:floatLeaf 8s ease-in-out infinite;}
.c-leaf-4{width:36px;height:36px;top:8%;right:6%;transform:rotate(-25deg);animation:floatLeaf 6.5s ease-in-out infinite reverse;}
.c-orange-1{width:34px;height:34px;top:32%;left:2%;transform:rotate(30deg);animation:floatLeaf 7.5s ease-in-out infinite;}
.c-orange-2{width:40px;height:40px;bottom:6%;left:48%;transform:rotate(-20deg);animation:floatLeaf 6s ease-in-out infinite reverse;}
.c-orange-3{width:32px;height:32px;top:20%;right:4%;transform:rotate(15deg);animation:floatLeaf 7s ease-in-out infinite;}

/* Dots (top-right pattern) */
.c-dot{
    position:absolute;width:5px;height:5px;border-radius:50%;
    background:rgba(255,140,0,.55);
    box-shadow:0 0 8px rgba(255,140,0,.4);
    z-index:2;
}
.c-dot-1{top:5%;right:10%;}
.c-dot-2{top:7%;right:12%;}
.c-dot-3{top:9%;right:10%;}
.c-dot-4{top:5%;right:14%;}

/* =========================================================
   TOP ROW
========================================================= */

.cta-top{position:relative;z-index:3;margin-bottom:80px;}

/* LEFT */
.cta-left{position:relative;z-index:3;}

.cta-label{
    display:inline-flex;align-items:center;gap:10px;
    color:#4CAF50;font-size:12px;font-weight:800;
    letter-spacing:3px;text-transform:uppercase;
    margin-bottom:22px;
}

.cta-label .label-dot{
    width:8px;height:8px;border-radius:50%;
    background:#4CAF50;
    box-shadow:0 0 0 4px rgba(76,175,80,.15);
}

.cta-label .label-line{
    display:inline-block;width:30px;height:2px;
    background:linear-gradient(90deg,#4CAF50,#FFC107);
    border-radius:2px;
}

.cta-title{
    font-family:'Manrope',sans-serif;
    font-size:clamp(32px,4.2vw,54px);
    font-weight:800;line-height:1.1;
    letter-spacing:-1.6px;
    color:#0B2C6B;
    margin-bottom:24px;
}

.cta-title .title-navy{
    color:#0B2C6B;
    display:block;
}

.cta-title .title-green{
    color:#3FA34D;
    display:block;
    position:relative;
}

.cta-title .title-green::after{
    content:"";
    display:block;
    width:200px;
    height:6px;
    margin-top:14px;
    border-radius:6px;
    background:linear-gradient(90deg,#4CAF50 0%,#8BC34A 35%,#FFC107 70%,#FF8C00 100%);
    box-shadow:0 3px 12px rgba(76,175,80,.30);
}

.cta-desc{
    color:#5A6A82;font-size:16px;line-height:1.75;
    max-width:520px;font-weight:400;
    margin-bottom:34px;
}

/* ============== CTA Buttons Row ============== */
.cta-buttons{
    display:flex;
    flex-wrap:wrap;
    gap:14px;
    align-items:center;
}

/* Primary — Donate Now */
.btn-donate-primary{
    position:relative;
    overflow:hidden;
    display:inline-flex;align-items:center;gap:10px;
    padding:16px 30px;
    border-radius:50px;
    background:linear-gradient(135deg,#1E5BC6,#0B2C6B);
    color:#fff;
    font-size:14.5px;font-weight:800;
    letter-spacing:.2px;
    text-decoration:none;
    border:none;
    box-shadow:0 14px 30px rgba(30,91,198,.32);
    transition:all .35s ease;
}

.btn-donate-primary::before{
    content:"";position:absolute;top:0;bottom:0;left:-100%;
    width:55%;
    background:linear-gradient(90deg,transparent,rgba(255,255,255,.35),transparent);
    transform:skewX(-20deg);
    transition:left .75s ease;
}

.btn-donate-primary:hover::before{left:140%;}
.btn-donate-primary:hover{color:#fff;transform:translateY(-3px);box-shadow:0 20px 40px rgba(30,91,198,.45);}
.btn-donate-primary i{position:relative;z-index:2;transition:transform .3s ease;}
.btn-donate-primary:hover .btn-arrow{transform:translateX(5px);}

/* Outline — Join Us (Green) */
.btn-join-outline{
    display:inline-flex;align-items:center;gap:10px;
    padding:15px 28px;
    border-radius:50px;
    background:rgba(255,255,255,.85);
    backdrop-filter:blur(10px);
    border:2px solid #4CAF50;
    color:#2E7D32;
    font-size:14.5px;font-weight:800;
    letter-spacing:.2px;
    text-decoration:none;
    transition:all .35s ease;
    position:relative;overflow:hidden;
}

.btn-join-outline::before{
    content:"";position:absolute;inset:0;
    background:linear-gradient(135deg,#4CAF50,#2E7D32);
    transform:translateX(-101%);
    transition:transform .4s ease;
    z-index:0;
}

.btn-join-outline:hover::before{transform:translateX(0);}
.btn-join-outline:hover{color:#fff;border-color:#4CAF50;transform:translateY(-3px);box-shadow:0 14px 30px rgba(76,175,80,.35);}
.btn-join-outline span,
.btn-join-outline i{position:relative;z-index:2;}
.btn-join-outline:hover .btn-arrow{transform:translateX(5px);}

/* Outline — Volunteer (Orange) */
.btn-volunteer-outline{
    display:inline-flex;align-items:center;gap:10px;
    padding:15px 28px;
    border-radius:50px;
    background:rgba(255,255,255,.85);
    backdrop-filter:blur(10px);
    border:2px solid #FF8C00;
    color:#E88918;
    font-size:14.5px;font-weight:800;
    letter-spacing:.2px;
    text-decoration:none;
    transition:all .35s ease;
    position:relative;overflow:hidden;
}

.btn-volunteer-outline::before{
    content:"";position:absolute;inset:0;
    background:linear-gradient(135deg,#FF8C00,#E88918);
    transform:translateX(-101%);
    transition:transform .4s ease;
    z-index:0;
}

.btn-volunteer-outline:hover::before{transform:translateX(0);}
.btn-volunteer-outline:hover{color:#fff;border-color:#FF8C00;transform:translateY(-3px);box-shadow:0 14px 30px rgba(255,140,0,.35);}
.btn-volunteer-outline span,
.btn-volunteer-outline i{position:relative;z-index:2;}
.btn-volunteer-outline:hover .btn-arrow{transform:translateX(5px);}

/* =========================================================
   CENTER VISUAL
========================================================= */

.cta-center{position:relative;z-index:3;}

.cta-visual{
    position:relative;
    width:100%;
    max-width:420px;
    margin:0 auto;
    aspect-ratio:1/1;
    display:flex;
    align-items:center;
    justify-content:center;
}

/* Green ring behind */
.cv-ring{
    position:absolute;
    border-radius:50%;
    z-index:0;
    pointer-events:none;
}

.cv-ring-green{
    width:92%;
    height:92%;
    top:4%;left:4%;
    border:3px solid transparent;
    background:
        linear-gradient(135deg,#4CAF50,#8BC34A) border-box;
    -webkit-mask:
        linear-gradient(#fff 0 0) padding-box,
        linear-gradient(#fff 0 0);
    -webkit-mask-composite:xor;
    mask-composite:exclude;
    opacity:.65;
    animation:ringRotate 18s linear infinite;
}

/* Orange arc behind */
.cv-ring-orange{
    width:108%;
    height:108%;
    top:-4%;left:-4%;
    border-radius:50%;
    background:
        conic-gradient(from 200deg,
            transparent 0deg,
            #FF8C00 60deg,
            #FFC107 120deg,
            transparent 180deg);
    -webkit-mask:
        radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 3px));
    mask:
        radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 3px));
    opacity:.55;
    animation:ringRotate 22s linear infinite reverse;
}

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

/* Image wrap — circular */
.cv-image-wrap{
    position:relative;
    z-index:2;
    width:82%;
    height:82%;
    border-radius:50%;
    overflow:hidden;
    box-shadow:
        0 30px 60px rgba(11,31,58,.20),
        0 10px 25px rgba(11,31,58,.10),
        0 0 0 8px rgba(255,255,255,.85),
        0 0 0 12px rgba(76,175,80,.15);
}

.cv-image-wrap img{
    width:100%;height:100%;
    object-fit:cover;
    object-position:center top;
}

/* Quote Card (bottom-left) */
.cv-quote-card{
    position:absolute;
    bottom:6%;
    left:-6%;
    z-index:4;
    width:260px;
    padding:20px 22px 18px;
    border-radius:20px;

    background:linear-gradient(135deg,rgba(255,255,255,.98),rgba(255,255,255,.90));
    backdrop-filter:blur(18px) saturate(180%);
    -webkit-backdrop-filter:blur(18px) saturate(180%);

    border:1px solid rgba(255,255,255,.95);
    box-shadow:
        0 22px 50px rgba(11,31,58,.16),
        0 6px 15px rgba(11,31,58,.08),
        inset 0 1px 0 rgba(255,255,255,.95);

    animation:quoteFloat 5s ease-in-out infinite;
}

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

.cv-quote-icon{
    position:absolute;
    top:-4px;left:14px;
    font-size:42px;
    color:rgba(76,175,80,.30);
    line-height:1;
}

.cv-quote-text{
    font-size:13.5px;
    line-height:1.6;
    color:#0B1F3A;
    margin:14px 0 14px;
    font-weight:500;
    font-style:italic;
    position:relative;
    z-index:1;
}

.cv-quote-text strong{
    color:#3FA34D;
    font-weight:800;
    font-style:normal;
}

.cv-quote-footer{
    display:flex;
    align-items:center;
    gap:8px;
    padding-top:12px;
    border-top:1px solid rgba(11,31,58,.08);
    color:#6A7A90;
    font-size:10.5px;
    font-weight:700;
    letter-spacing:.3px;
}

.cv-leaf-icon{
    color:#4CAF50;
    font-size:12px;
}

/* =========================================================
   RIGHT SIDE
========================================================= */

.cta-right{position:relative;z-index:3;}

/* Script */
.cta-script{
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    gap:2px;
    margin-bottom:24px;
    transform:rotate(-3deg);
    padding-left:8px;
}

.cta-script span{
    font-family:'Brush Script MT','Dancing Script','Great Vibes',cursive;
    font-size:clamp(22px,2.4vw,32px);
    font-weight:700;
    color:#0B2C6B;
    line-height:1.05;
    letter-spacing:.4px;
}

.cta-script .script-underline{position:relative;color:#0B2C6B;}

.cta-script .script-underline::after{
    content:"";
    position:absolute;
    left:2%;bottom:-4px;
    width:92%;height:3px;
    background:linear-gradient(90deg,#FF8C00,#D71920);
    border-radius:3px;
    transform:rotate(-2deg);
    box-shadow:0 2px 6px rgba(215,25,32,.25);
}

/* Action Cards */
.cta-cards{
    display:flex;
    flex-direction:column;
    gap:14px;
}

.cta-card{
    position:relative;
    display:flex;
    align-items:center;
    gap:14px;
    padding:16px 54px 16px 16px;
    border-radius:18px;

    background:linear-gradient(135deg,rgba(255,255,255,.98),rgba(255,255,255,.90));
    backdrop-filter:blur(14px);

    border:1px solid rgba(255,255,255,.9);
    box-shadow:
        0 10px 28px rgba(11,31,58,.08),
        inset 0 1px 0 rgba(255,255,255,.9);

    transition:all .4s cubic-bezier(.2,.8,.2,1);
    cursor:pointer;
    overflow:hidden;
}

.cta-card:hover{
    transform:translateY(-4px);
}

.card-green:hover{box-shadow:0 20px 45px rgba(76,175,80,.22),0 6px 15px rgba(11,31,58,.06);}
.card-orange:hover{box-shadow:0 20px 45px rgba(255,140,0,.22),0 6px 15px rgba(11,31,58,.06);}
.card-blue:hover{box-shadow:0 20px 45px rgba(30,91,198,.22),0 6px 15px rgba(11,31,58,.06);}

/* Icon */
.cc-icon{
    width:46px;height:46px;
    flex-shrink:0;
    display:flex;align-items:center;justify-content:center;
    border-radius:50%;
    color:#fff;
    font-size:20px;
    box-shadow:0 8px 18px rgba(0,0,0,.14);
    transition:transform .4s ease;
}

.cta-card:hover .cc-icon{
    transform:scale(1.10) rotate(-6deg);
}

.card-green .cc-icon{background:linear-gradient(135deg,#66BB6A,#2E7D32);}
.card-orange .cc-icon{background:linear-gradient(135deg,#FFB74D,#E88918);}
.card-blue .cc-icon{background:linear-gradient(135deg,#1E5BC6,#0B2C6B);}

/* Content */
.cc-content{flex:1;min-width:0;}

.cc-content h4{
    font-family:'Manrope',sans-serif;
    font-size:14px;
    font-weight:800;
    color:#0B1F3A;
    margin-bottom:4px;
    letter-spacing:-.2px;
    transition:color .3s ease;
}

.cta-card:hover .cc-content h4{
    color:#1E5BC6;
}

.cc-content p{
    color:#6A7A90;
    font-size:11px;
    line-height:1.5;
    margin:0;
    font-weight:400;
}

/* Arrow */
.cc-arrow{
    position:absolute;
    right:14px;
    top:50%;
    transform:translateY(-50%);
    width:34px;height:34px;
    border-radius:50%;
    border:1.5px solid rgba(11,31,58,.10);
    background:#fff;
    color:#1E5BC6;
    font-size:14px;
    display:flex;align-items:center;justify-content:center;
    cursor:pointer;
    transition:all .35s ease;
    flex-shrink:0;
    box-shadow:0 5px 14px rgba(11,31,58,.06);
}

.cta-card:hover .cc-arrow{
    background:linear-gradient(135deg,#1E5BC6,#0B2C6B);
    color:#fff;
    border-color:transparent;
    transform:translateY(-50%) scale(1.08);
    box-shadow:0 10px 22px rgba(30,91,198,.35);
}

/* =========================================================
   BOTTOM — MOVEMENT BAR
========================================================= */

.movement-bar{
    position:relative;
    z-index:3;

    display:flex;
    align-items:center;
    gap:32px;
    flex-wrap:wrap;

    padding:28px 40px;
    border-radius:80px;

    background:linear-gradient(135deg,rgba(255,255,255,.94),rgba(255,255,255,.82));
    backdrop-filter:blur(18px) saturate(160%);
    -webkit-backdrop-filter:blur(18px) saturate(160%);

    border:1px solid rgba(255,255,255,.9);
    box-shadow:
        0 22px 55px rgba(11,31,58,.10),
        inset 0 1px 0 rgba(255,255,255,.95);
}

.movement-bar::before{
    content:"";
    position:absolute;inset:0;
    border-radius:80px;padding:1.5px;
    background:linear-gradient(135deg,
        rgba(76,175,80,.35),
        rgba(255,193,7,.30),
        rgba(255,140,0,.35),
        rgba(30,91,198,.30));
    -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
    -webkit-mask-composite:xor;
    mask-composite:exclude;
    pointer-events:none;
}

/* Left label */
.movement-label{
    display:flex;align-items:center;gap:16px;
    flex-shrink:0;
    min-width:280px;
    max-width:340px;
}

.movement-icon{
    width:64px;height:64px;
    display:flex;align-items:center;justify-content:center;
    border-radius:50%;
    background:linear-gradient(135deg,#E8F5E9,#C8E6C9);
    color:#4CAF50;
    font-size:28px;
    flex-shrink:0;
    box-shadow:
        0 8px 20px rgba(76,175,80,.20),
        inset 0 1px 0 rgba(255,255,255,.7);
}

.movement-text{display:flex;flex-direction:column;line-height:1.3;}

.movement-eyebrow{
    color:#4CAF50;
    font-size:9.5px;
    font-weight:800;
    letter-spacing:1.8px;
    text-transform:uppercase;
    margin-bottom:4px;
}

.movement-text strong{
    font-family:'Manrope',sans-serif;
    font-size:17px;font-weight:800;
    color:#0B1F3A;
    letter-spacing:-.3px;
    margin-bottom:5px;
}

.movement-text small{
    color:#7A8BA1;
    font-size:11.5px;
    font-weight:500;
    line-height:1.4;
}

.movement-divider{
    width:1px;
    height:56px;
    background:linear-gradient(180deg,transparent,#E0E7F0,transparent);
    flex-shrink:0;
}

/* Items */
.movement-items{
    flex:1;
    display:flex;
    align-items:center;
    justify-content:space-around;
    gap:20px;
    min-width:0;
}

.movement-item{
    display:flex;
    flex-direction:column;
    align-items:center;
    text-align:center;
    gap:8px;
    transition:transform .4s ease;
    cursor:pointer;
}

.movement-item:hover{transform:translateY(-4px);}

.mi-icon{
    width:48px;height:48px;
    display:flex;align-items:center;justify-content:center;
    border-radius:50%;
    color:#fff;
    font-size:20px;
    box-shadow:0 8px 18px rgba(0,0,0,.14);
    transition:transform .4s ease;
}

.movement-item:hover .mi-icon{transform:scale(1.10) rotate(-6deg);}

.mi-blue{background:linear-gradient(135deg,#1E5BC6,#0B2C6B);}
.mi-green{background:linear-gradient(135deg,#66BB6A,#2E7D32);}
.mi-orange{background:linear-gradient(135deg,#FFB74D,#E88918);}

.movement-item strong{
    font-family:'Manrope',sans-serif;
    font-size:13.5px;font-weight:800;
    color:#0B1F3A;
    letter-spacing:-.2px;
}

.movement-item small{
    color:#7A8BA1;
    font-size:10.5px;
    font-weight:500;
    line-height:1.3;
}

/* Right script */
.movement-script{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:2px;
    flex-shrink:0;
    transform:rotate(-3deg);
    position:relative;
    padding:0 8px;
}

.movement-script span{
    font-family:'Brush Script MT','Dancing Script','Great Vibes',cursive;
    font-size:clamp(18px,1.8vw,24px);
    font-weight:700;
    color:#0B2C6B;
    line-height:1.1;
}

.movement-script .script-underline{position:relative;}

.movement-script .script-underline::after{
    content:"";
    position:absolute;
    left:0;bottom:-4px;
    width:100%;height:2px;
    background:linear-gradient(90deg,#FF8C00,#D71920);
    border-radius:2px;
}

.movement-heart{
    position:absolute;
    bottom:-12px;right:-22px;
    color:#1E5BC6;
    font-size:18px;
    animation:heartBeat 1.6s ease-in-out infinite;
}

@keyframes heartBeat{
    0%,100%{transform:scale(1);}
    50%{transform:scale(1.22);}
}

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

@media(max-width:1199.98px){
    .cta-change-section{padding:95px 0;}
    .cta-visual{max-width:380px;}
    .cv-quote-card{width:240px;bottom:4%;left:-4%;}
    .cv-quote-text{font-size:12.5px;}

    .cc-content h4{font-size:13px;}
    .cc-content p{font-size:10.5px;}

    .movement-bar{padding:24px 28px;gap:22px;}
    .movement-label{min-width:240px;}
    .movement-icon{width:56px;height:56px;font-size:24px;}
    .movement-text strong{font-size:15px;}
    .mi-icon{width:44px;height:44px;font-size:18px;}
    .movement-item strong{font-size:12.5px;}
}

/* Tablet */
@media(max-width:991.98px){

    .cta-change-section{padding:85px 0;}

  /* On smaller screens, place the three action buttons last. */
  .cta-top{
    display:flex;
    flex-direction:column;
  }
  .cta-left{display:contents !important;}
  .cta-label{order:1;}
  .cta-title{order:2;}
  .cta-desc{order:3;}
  .cta-center{order:4;}
  .cta-right{order:5;}
  .cta-buttons{order:6;}

    /* LEFT centered */
    .cta-left{text-align:center;margin-bottom:40px;}
    .cta-label{justify-content:center;}
    .cta-desc{margin-left:auto;margin-right:auto;}
    .cta-title .title-green::after{margin-left:auto;margin-right:auto;}
    .cta-buttons{justify-content:center;}

    /* CENTER below */
    .cta-center{margin-bottom:40px;}

    /* RIGHT below */
    .cta-right{text-align:center;}
    .cta-script{align-items:center;transform:rotate(-2deg);padding-left:0;margin-bottom:20px;}
    .cta-script span{text-align:center;}
    .cta-cards{max-width:520px;margin:0 auto;}

    /* Movement bar stacked */
    .movement-bar{
        border-radius:30px;
        padding:24px;
        flex-direction:column;
        align-items:stretch;
        gap:20px;
    }

    .movement-divider{display:none;}
    .movement-label{justify-content:center;text-align:center;max-width:100%;min-width:0;}
    .movement-text{align-items:center;}
    .movement-items{flex-wrap:wrap;gap:18px;}
    .movement-item{flex:1 1 40%;min-width:120px;}
    .movement-script{align-self:center;}
}

/* Mobile */
@media(max-width:575.98px){

    .cta-change-section{padding:70px 0;}

    .cta-title{letter-spacing:-.7px;}
    .cta-desc{font-size:15px;}

    .cta-buttons{
        flex-direction:column;
        width:100%;
    }

    .btn-donate-primary,
    .btn-join-outline,
    .btn-volunteer-outline{
        width:100%;
        justify-content:center;
    }

    .cta-visual{max-width:320px;}
    .cv-quote-card{
        width:220px;
        bottom:-4%;
        left:50%;
        transform:translateX(-50%);
        padding:16px 18px 14px;
    }
    .cv-quote-text{font-size:12px;}
    .cv-quote-footer{font-size:9.5px;}

    .cc-content h4{font-size:13px;}
    .cc-content p{font-size:10.5px;}
    .cta-card{padding:14px 46px 14px 14px;}
    .cc-icon{width:42px;height:42px;font-size:18px;}
    .cc-arrow{width:30px;height:30px;font-size:13px;right:10px;}

    .movement-bar{padding:20px;border-radius:24px;}
    .movement-icon{width:52px;height:52px;font-size:22px;}
    .movement-text strong{font-size:15px;}
    .movement-eyebrow{font-size:9px;}
    .movement-item strong{font-size:12px;}
    .movement-item small{font-size:10px;}
    .mi-icon{width:42px;height:42px;font-size:18px;}
}

        :root {
        --acg-navy: #0b1f3a;

        --acg-navy-dark: #061224;

        --acg-blue: #1d3d63;

        --acg-gold: #f4b000;

        --acg-gold-light: #ffd84d;

        --acg-red: #e82e2e;

        --acg-orange: #ff8a00;

        --acg-teal: #0ea5a4;

        --acg-white: #ffffff;

        --acg-glass: rgba(255, 255, 255, 0.82);

        --acg-glass-strong: rgba(255, 255, 255, 0.94);

        --acg-border: rgba(255, 255, 255, 0.72);

        --acg-shadow: 0 12px 40px rgba(11, 31, 58, 0.08);

        --acg-shadow-hover: 0 20px 55px rgba(11, 31, 58, 0.14);
      }
        /* =========================================================
   ABOUT US — HERO SECTION
========================================================= */

.about-hero-section{
    position:relative;
    padding:90px 0 100px;
    overflow:hidden;
    isolation:isolate;
    background:#FDFCF7;
}

/* =========================================================
   AMBIENT GLOW LAYERS
========================================================= */

.about-hero-section::before{
    content:"";
    position:absolute;inset:0;z-index:0;pointer-events:none;
    background:
        radial-gradient(ellipse 55% 50% at -5% -5%, rgba(76,175,80,.26) 0%, rgba(76,175,80,.10) 32%, transparent 72%),
        radial-gradient(ellipse 55% 45% at 105% 0%, rgba(255,140,0,.26) 0%, rgba(255,193,7,.11) 32%, transparent 72%),
        radial-gradient(ellipse 60% 55% at -5% 105%, rgba(255,140,0,.22) 0%, rgba(255,193,7,.10) 35%, transparent 75%),
        radial-gradient(ellipse 65% 55% at 105% 105%, rgba(76,175,80,.22) 0%, rgba(255,193,7,.10) 25%, rgba(255,140,0,.10) 55%, transparent 82%),
        radial-gradient(ellipse 90% 70% at 50% 50%, rgba(232,240,252,.40) 0%, transparent 70%);
}

.about-hero-section::after{
    content:"";
    position:absolute;inset:0;z-index:0;pointer-events:none;
    background:radial-gradient(ellipse 120% 90% at 50% 50%, rgba(253,252,247,0) 0%, rgba(253,252,247,.15) 60%, rgba(253,252,247,.50) 100%);
}

/* Decor */
.about-hero-bg{
    position:absolute;inset:0;pointer-events:none;z-index:1;overflow:hidden;
}

.about-hero-bg::before{
    content:"";position:absolute;top:-25%;left:-20%;
    width:70%;height:110%;
    background:radial-gradient(ellipse at 30% 40%, rgba(76,175,80,.20) 0%, rgba(76,175,80,.08) 40%, transparent 70%);
    border-radius:50% 40% 60% 45% / 55% 60% 40% 50%;
    filter:blur(45px);transform:rotate(-15deg);opacity:.9;
}

.about-hero-bg::after{
    content:"";position:absolute;bottom:-35%;right:-25%;
    width:85%;height:120%;
    background:radial-gradient(ellipse at 60% 60%, rgba(255,140,0,.20) 0%, rgba(255,193,7,.10) 30%, rgba(76,175,80,.08) 60%, transparent 80%);
    border-radius:45% 55% 40% 60% / 60% 45% 55% 40%;
    filter:blur(50px);transform:rotate(-12deg);opacity:.9;
}

/* Leaves */
.ah-leaf,.ah-orange-leaf{
    position:absolute;display:block;
    border-radius:0 100% 0 100%;
    filter:drop-shadow(0 6px 14px rgba(0,0,0,.10));
    opacity:.9;z-index:2;
}
.ah-leaf{background:linear-gradient(135deg,#66BB6A,#2E7D32);}
.ah-orange-leaf{background:linear-gradient(135deg,#FFB74D,#E88918);}

/* Leaves — with individual rotation preserved */
.ah-leaf-1{width:60px;height:60px;top:10%;left:1.5%;animation:floatLeaf1 7s ease-in-out infinite;}
.ah-leaf-2{width:44px;height:44px;top:60%;left:3%;animation:floatLeaf2 6s ease-in-out infinite reverse;}
.ah-leaf-3{width:50px;height:50px;bottom:14%;right:2%;animation:floatLeaf3 8s ease-in-out infinite;}
.ah-orange-1{width:34px;height:34px;top:32%;left:2.5%;animation:floatLeaf4 7.5s ease-in-out infinite;}
.ah-orange-2{width:38px;height:38px;top:20%;right:2%;animation:floatLeaf5 6.5s ease-in-out infinite reverse;}

@keyframes floatLeaf1{
    0%,100%{transform:translateY(0) rotate(-30deg);}
    50%{transform:translateY(-15px) rotate(-20deg);}
}
@keyframes floatLeaf2{
    0%,100%{transform:translateY(0) rotate(45deg);}
    50%{transform:translateY(-12px) rotate(55deg);}
}
@keyframes floatLeaf3{
    0%,100%{transform:translateY(0) rotate(20deg);}
    50%{transform:translateY(-15px) rotate(10deg);}
}
@keyframes floatLeaf4{
    0%,100%{transform:translateY(0) rotate(30deg);}
    50%{transform:translateY(-10px) rotate(40deg);}
}
@keyframes floatLeaf5{
    0%,100%{transform:translateY(0) rotate(-20deg);}
    50%{transform:translateY(-12px) rotate(-10deg);}
}
/* Dots */
.ah-dot{
    position:absolute;width:5px;height:5px;border-radius:50%;
    background:rgba(255,140,0,.55);
    box-shadow:0 0 8px rgba(255,140,0,.4);
    z-index:2;
}
.ah-dot-1{top:8%;right:6%;}
.ah-dot-2{top:10%;right:8%;}

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

.about-hero-left{position:relative;z-index:3;}

/* Label */
.ah-label{
    display:inline-flex;
    align-items:center;
    gap:10px;
    color:#4CAF50;
    font-size:12.5px;
    font-weight:800;
    letter-spacing:3.5px;
    text-transform:uppercase;
    margin-bottom:22px;
}

.ah-label-icon{
    color:#4CAF50;
    font-size:16px;
    transform:rotate(-10deg);
}

.ah-label-line{
    display:inline-block;
    width:34px;
    height:2px;
    background:linear-gradient(90deg,#4CAF50,#FFC107);
    border-radius:2px;
}

/* Title */
.ah-title{
    font-family:'Manrope',sans-serif;
    font-size:clamp(34px,4.6vw,60px);
    font-weight:800;
    line-height:1.08;
    letter-spacing:-1.8px;
    color:#0B2C6B;
    margin-bottom:24px;
}

.ah-title .ah-title-green{
    display:block;
    color:#3FA34D;
    position:relative;
}

.ah-title .ah-title-green::after{
    content:"";
    display:block;
    width:180px;
    height:6px;
    margin-top:16px;
    border-radius:6px;
    background:linear-gradient(90deg,#4CAF50 0%,#8BC34A 35%,#FFC107 70%,#FF8C00 100%);
    box-shadow:0 3px 12px rgba(76,175,80,.30);
}

/* Description */
.ah-desc{
    color:#5A6A82;
    font-size:16px;
    line-height:1.75;
    max-width:540px;
    margin-bottom:34px;
    font-weight:400;
}

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

/* Primary — Our Journey */
.btn-our-journey{
    position:relative;
    overflow:hidden;
    display:inline-flex;
    align-items:center;
    gap:10px;
    padding:16px 32px;
    border-radius:50px;
    background:linear-gradient(135deg,#1E5BC6,#0B2C6B);
    color:#fff;
    font-size:15px;
    font-weight:800;
    letter-spacing:.2px;
    text-decoration:none;
    border:none;
    box-shadow:0 14px 30px rgba(30,91,198,.32);
    transition:all .35s ease;
}

.btn-our-journey::before{
    content:"";
    position:absolute;
    top:0;bottom:0;left:-100%;
    width:55%;
    background:linear-gradient(90deg,transparent,rgba(255,255,255,.35),transparent);
    transform:skewX(-20deg);
    transition:left .75s ease;
}

.btn-our-journey:hover::before{left:140%;}

.btn-our-journey:hover{
    color:#fff;
    transform:translateY(-3px);
    box-shadow:0 20px 40px rgba(30,91,198,.45);
}

.btn-our-journey i{
    position:relative;
    z-index:2;
    transition:transform .3s ease;
}

.btn-our-journey:hover i{transform:translateX(5px);}

/* Outline — Watch Our Story */
.btn-watch-story{
    display:inline-flex;
    align-items:center;
    gap:12px;
    padding:10px 24px 10px 10px;
    border-radius:50px;
    background:rgba(255,255,255,.85);
    backdrop-filter:blur(10px);
    border:2px solid rgba(30,91,198,.25);
    color:#0B2C6B;
    font-size:15px;
    font-weight:700;
    letter-spacing:.2px;
    text-decoration:none;
    transition:all .35s ease;
    box-shadow:0 8px 22px rgba(11,31,58,.08);
}

.btn-watch-story:hover{
    border-color:#1E5BC6;
    color:#1E5BC6;
    transform:translateY(-3px);
    box-shadow:0 14px 30px rgba(30,91,198,.20);
}

.play-icon-wrap{
    width:38px;
    height:38px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    background:linear-gradient(135deg,#1E5BC6,#0B2C6B);
    color:#fff;
    font-size:16px;
    flex-shrink:0;
    transition:transform .4s ease;
    box-shadow:0 6px 16px rgba(30,91,198,.30);
    position:relative;
}

.play-icon-wrap::before{
    content:"";
    position:absolute;
    inset:-4px;
    border-radius:50%;
    border:2px solid rgba(30,91,198,.30);
    animation:pulseRing 2.5s ease-in-out infinite;
}

@keyframes pulseRing{
    0%,100%{transform:scale(1);opacity:.7;}
    50%{transform:scale(1.15);opacity:.3;}
}

.btn-watch-story:hover .play-icon-wrap{
    transform:scale(1.08);
}

/* =========================================================
   RIGHT VISUAL
========================================================= */

.about-hero-right{position:relative;z-index:3;}

.ah-visual{
    position:relative;
    width:100%;
    max-width:600px;
    margin-left:auto;
    aspect-ratio:1/1;
    display:flex;
    align-items:center;
    justify-content:center;
}

/* Organic curve background */
.ah-curve{
    position:absolute;
    inset:0;
    z-index:0;
    background:
        radial-gradient(ellipse at 55% 45%,
            rgba(232,245,233,.95) 0%,
            rgba(223,240,229,.55) 40%,
            rgba(255,242,224,.35) 70%,
            transparent 100%);
    border-radius:55% 45% 50% 50% / 55% 50% 50% 45%;
    animation:organicMorph 12s ease-in-out infinite;
    filter:blur(2px);
}

@keyframes organicMorph{
    0%,100%{border-radius:55% 45% 50% 50% / 55% 50% 50% 45%;}
    50%{border-radius:45% 55% 45% 55% / 50% 55% 45% 55%;}
}

/* Blobs behind image */
.ah-blob{
    position:absolute;
    border-radius:50%;
    filter:blur(40px);
    z-index:1;
    pointer-events:none;
}

.ah-blob-green{
    width:250px;
    height:250px;
    top:-20px;
    left:-30px;
    background:radial-gradient(circle, rgba(76,175,80,.45) 0%, transparent 70%);
}

.ah-blob-orange{
    width:270px;
    height:270px;
    bottom:-30px;
    right:-30px;
    background:radial-gradient(circle, rgba(255,140,0,.45) 0%, transparent 70%);
}

/* Image wrap — organic curve */
.ah-image-wrap{
    position:relative;
    z-index:2;
    width:82%;
    height:82%;
    overflow:hidden;
    border-radius:60% 40% 55% 45% / 55% 60% 40% 45%;
    box-shadow:
        0 30px 60px rgba(11,31,58,.20),
        0 10px 25px rgba(11,31,58,.10);
    background:#fff;
    padding:6px;
    animation:organicMorphImage 12s ease-in-out infinite;
}

@keyframes organicMorphImage{
    0%,100%{border-radius:60% 40% 55% 45% / 55% 60% 40% 45%;}
    50%{border-radius:45% 55% 40% 60% / 60% 45% 55% 40%;}
}

.ah-image-wrap img{
    width:100%;height:100%;
    object-fit:cover;
    object-position:center top;
    border-radius:inherit;
    display:block;
}

/* =========================================================
   FLOATING STAT CARD (Top Left)
========================================================= */

.ah-stat-card{
    position:absolute;
    z-index:5;

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

    padding:14px 20px 14px 14px;
    border-radius:18px;

    background:linear-gradient(135deg,rgba(255,255,255,.98),rgba(255,255,255,.88));
    backdrop-filter:blur(18px) saturate(180%);
    -webkit-backdrop-filter:blur(18px) saturate(180%);

    border:1px solid rgba(255,255,255,.95);
    box-shadow:
        0 22px 50px rgba(11,31,58,.16),
        0 6px 15px rgba(11,31,58,.08),
        inset 0 1px 0 rgba(255,255,255,.95);
}

.ah-stat-top{
    top:6%;
    left:-6%;
    animation:floatCard 5s ease-in-out infinite;
}

/* Stat icon */
.ah-stat-icon{
    width:52px;
    height:52px;
    flex-shrink:0;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:14px;
    background:linear-gradient(135deg,#4CAF50,#2E7D32);
    color:#fff;
    font-size:22px;
    box-shadow:0 8px 20px rgba(76,175,80,.35);
}

.ah-stat-text{
    display:flex;
    flex-direction:column;
    line-height:1.15;
}

.ah-stat-text strong{
    font-family:'Manrope',sans-serif;
    font-size:22px;
    font-weight:800;
    color:#0B2C6B;
    letter-spacing:-.5px;
}

.ah-stat-text small{
    font-size:11.5px;
    color:#6A7A90;
    font-weight:600;
    letter-spacing:.2px;
    margin-top:3px;
}

/* Mini icon (small circle next to stat) */
.ah-stat-mini-icon{
    position:absolute;
    bottom:-10px;
    left:-10px;
    width:34px;
    height:34px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    background:#fff;
    color:#4CAF50;
    font-size:15px;
    box-shadow:
        0 8px 18px rgba(11,31,58,.14),
        inset 0 1px 0 rgba(255,255,255,.9);
    border:1px solid rgba(11,31,58,.06);
    animation:heartBeat 2s ease-in-out infinite;
}

/* =========================================================
   FLOATING BADGE (Bottom Right)
========================================================= */

.ah-badge-bottom{
    position:absolute;
    bottom:8%;
    right:-4%;
    z-index:5;

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

    padding:16px 24px 16px 16px;
    border-radius:18px;

    background:linear-gradient(135deg,rgba(255,255,255,.98),rgba(255,255,255,.88));
    backdrop-filter:blur(18px) saturate(180%);
    -webkit-backdrop-filter:blur(18px) saturate(180%);

    border:1px solid rgba(255,255,255,.95);
    box-shadow:
        0 22px 50px rgba(11,31,58,.16),
        0 6px 15px rgba(11,31,58,.08),
        inset 0 1px 0 rgba(255,255,255,.95);

    animation:floatCard 6s ease-in-out infinite .5s;
}

.ah-badge-icon{
    width:48px;
    height:48px;
    flex-shrink:0;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    background:linear-gradient(135deg,#66BB6A,#2E7D32);
    color:#fff;
    font-size:22px;
    box-shadow:0 8px 18px rgba(76,175,80,.35);
    transition:transform .4s ease;
}

.ah-badge-bottom:hover .ah-badge-icon{
    transform:scale(1.10) rotate(-8deg);
}

.ah-badge-text{
    display:flex;
    flex-direction:column;
    line-height:1.2;
}

.ah-badge-text strong{
    font-family:'Manrope',sans-serif;
    font-size:15px;
    font-weight:800;
    color:#0B2C6B;
    letter-spacing:-.2px;
    margin-bottom:4px;
}

.ah-badge-text small{
    font-size:11.5px;
    color:#6A7A90;
    font-weight:600;
    letter-spacing:.2px;
}

/* =========================================================
   FLOAT ANIMATIONS
========================================================= */

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

@keyframes heartBeat{
    0%,100%{transform:scale(1);}
    50%{transform:scale(1.15);}
}
@keyframes floatLeaf{
    0%,100%{transform:translateY(0) rotate(-30deg);}
    50%{transform:translateY(-15px) rotate(-15deg);}
}
/* =========================================================
   RESPONSIVE
========================================================= */

@media(max-width:1199.98px){
    .about-hero-section{padding:80px 0 90px;}
    .ah-visual{max-width:540px;}
    .ah-stat-top{left:-2%;}
    .ah-badge-bottom{right:-2%;}
    .ah-stat-text strong{font-size:20px;}
    .ah-badge-text strong{font-size:14px;}
}

@media(max-width:991.98px){

    .about-hero-section{padding:70px 0 80px;}

    /* 🔥 Make row flexible for reordering */
    .about-hero-row{
        display:flex;
        flex-direction:column;
    }

    /* IMAGE FIRST */
    .about-hero-right{
        order:1;
        width:100%;
        margin-bottom:30px;
    }

    /* TEXT SECOND */
    .about-hero-left{
        order:2;
        width:100%;
        text-align:center;
        margin-bottom:0;
    }

    .ah-label{justify-content:center;}
    .ah-desc{margin-left:auto;margin-right:auto;}
    .ah-title .ah-title-green::after{margin-left:auto;margin-right:auto;}
    .ah-buttons{justify-content:center;}

    .ah-visual{max-width:500px;margin:0 auto;}

    .ah-stat-top{left:-4%;top:4%;}
    .ah-badge-bottom{right:-4%;bottom:6%;}
}
@media(max-width:575.98px){

    .about-hero-section{padding:60px 0 70px;}

    .ah-title{letter-spacing:-1px;}
    .ah-desc{font-size:15px;}

    .ah-buttons{
        flex-direction:column;
        width:100%;
    }

    .btn-our-journey{width:100%;justify-content:center;}

    .btn-watch-story{
        width:100%;
        justify-content:center;
        padding:10px 18px 10px 10px;
    }

    .ah-visual{max-width:360px;}

    .ah-stat-card{
        padding:10px 14px 10px 10px;
        gap:9px;
        border-radius:14px;
    }

    .ah-stat-icon{width:42px;height:42px;font-size:18px;border-radius:12px;}
    .ah-stat-text strong{font-size:17px;}
    .ah-stat-text small{font-size:10px;}
    .ah-stat-mini-icon{width:28px;height:28px;font-size:13px;bottom:-8px;left:-8px;}

    .ah-stat-top{left:-2%;top:2%;}

    .ah-badge-bottom{
        padding:12px 16px 12px 12px;
        gap:10px;
        border-radius:14px;
        right:-2%;
    }

    .ah-badge-icon{width:40px;height:40px;font-size:18px;}
    .ah-badge-text strong{font-size:13px;}
    .ah-badge-text small{font-size:10px;}
}

        /* =========================================================
   WHO WE ARE SECTION
========================================================= */
/* =========================================================
   WHO WE ARE SECTION — PREMIUM AMBIENT TOPOGRAPHY
========================================================= */

.who-we-are-section{
    position:relative;
    padding:100px 0 110px;
    overflow:hidden;
    isolation:isolate;
    background:#FDFCF7;
}

/* =========================================================
   MULTI-LAYER AMBIENT GLOW (Green + Orange + Blue mix)
   — same as homepage sections
========================================================= */

.who-we-are-section::before{
    content:"";
    position:absolute;
    inset:0;
    z-index:0;
    pointer-events:none;

    background:
        /* Top-left — Green ambient */
        radial-gradient(ellipse 55% 45% at -5% -5%,
            rgba(76,175,80,.28) 0%,
            rgba(76,175,80,.12) 30%,
            rgba(76,175,80,.04) 55%,
            transparent 72%),

        /* Top-right — Orange ambient */
        radial-gradient(ellipse 55% 45% at 105% -5%,
            rgba(255,140,0,.30) 0%,
            rgba(255,193,7,.13) 30%,
            rgba(255,140,0,.05) 55%,
            transparent 72%),

        /* Bottom-left — Orange ambient */
        radial-gradient(ellipse 60% 50% at -5% 105%,
            rgba(255,140,0,.26) 0%,
            rgba(255,193,7,.12) 35%,
            rgba(255,140,0,.04) 60%,
            transparent 78%),

        /* Bottom-right — Green + Yellow mix */
        radial-gradient(ellipse 65% 55% at 105% 105%,
            rgba(76,175,80,.26) 0%,
            rgba(255,193,7,.14) 25%,
            rgba(255,140,0,.10) 55%,
            transparent 82%),

        /* Center — Soft blue tint */
        radial-gradient(ellipse 90% 70% at 50% 50%,
            rgba(232,240,252,.45) 0%,
            rgba(232,240,252,.15) 40%,
            transparent 70%);
}

/* =========================================================
   SOFT VIGNETTE OVERLAY
========================================================= */

.who-we-are-section::after{
    content:"";
    position:absolute;
    inset:0;
    z-index:0;
    pointer-events:none;

    background:radial-gradient(ellipse 120% 90% at 50% 50%,
        rgba(253,252,247,0) 0%,
        rgba(253,252,247,.15) 60%,
        rgba(253,252,247,.55) 100%);
}

/* =========================================================
   ORGANIC BLURRED GLOW CURVES (Topography Feel)
========================================================= */

.wwa-bg{
    position:absolute;
    inset:0;
    pointer-events:none;
    z-index:1;
    overflow:hidden;
}

/* Green organic glow — top-left */
.wwa-bg::before{
    content:"";
    position:absolute;
    top:-30%;
    left:-20%;
    width:75%;
    height:110%;

    background:radial-gradient(ellipse at 30% 40%,
        rgba(76,175,80,.24) 0%,
        rgba(76,175,80,.10) 40%,
        transparent 70%);

    border-radius:50% 40% 60% 45% / 55% 60% 40% 50%;
    filter:blur(50px);
    transform:rotate(-15deg);
    opacity:.95;
}

/* Orange organic glow — bottom-right */
.wwa-bg::after{
    content:"";
    position:absolute;
    bottom:-35%;
    right:-25%;
    width:85%;
    height:120%;

    background:radial-gradient(ellipse at 60% 60%,
        rgba(255,140,0,.24) 0%,
        rgba(255,193,7,.12) 30%,
        rgba(76,175,80,.10) 60%,
        transparent 80%);

    border-radius:45% 55% 40% 60% / 60% 45% 55% 40%;
    filter:blur(55px);
    transform:rotate(-12deg);
    opacity:.95;
}

/* =========================================================
   EXTRA AMBIENT LAYER — Yellow center glow (Topography)
========================================================= */

.wwa-bg span.wwa-glow-center{
    position:absolute;
    top:35%;
    left:50%;
    transform:translateX(-50%);
    width:60%;
    height:60%;
    background:radial-gradient(ellipse at 50% 50%,
        rgba(255,193,7,.10) 0%,
        rgba(255,193,7,.04) 40%,
        transparent 70%);
    border-radius:50%;
    filter:blur(60px);
    pointer-events:none;
    z-index:0;
}

/* Leaves */
.wwa-leaf,.wwa-orange-leaf{
    position:absolute;display:block;
    border-radius:0 100% 0 100%;
    filter:drop-shadow(0 6px 14px rgba(0,0,0,.10));
    opacity:.9;z-index:2;
}
.wwa-leaf{background:linear-gradient(135deg,#66BB6A,#2E7D32);}
.wwa-orange-leaf{background:linear-gradient(135deg,#FFB74D,#E88918);}

.wwa-leaf-1{width:60px;height:60px;top:12%;left:1.5%;animation:floatLeaf1 7s ease-in-out infinite;}
.wwa-leaf-2{width:44px;height:44px;top:65%;right:2%;animation:floatLeaf3 8s ease-in-out infinite;}
.wwa-orange-1{width:34px;height:34px;top:40%;left:2%;animation:floatLeaf4 7.5s ease-in-out infinite;}

.wwa-dot{
    position:absolute;width:5px;height:5px;border-radius:50%;
    background:rgba(255,140,0,.55);
    box-shadow:0 0 8px rgba(255,140,0,.4);
    z-index:2;
}
.wwa-dot-1{top:6%;right:8%;}
.wwa-dot-2{top:8%;right:10%;}

/* =========================================================
   TOP ROW
========================================================= */

.wwa-top{
    position:relative;
    z-index:3;
    margin-bottom:60px;
}

/* ============ LEFT CONTENT ============ */
.wwa-left{position:relative;z-index:3;}

.wwa-label{
    display:inline-flex;align-items:center;gap:10px;
    color:#4CAF50;font-size:12.5px;font-weight:800;
    letter-spacing:3.5px;text-transform:uppercase;
    margin-bottom:20px;
}

.wwa-label-line{
    display:inline-block;width:36px;height:2px;
    background:linear-gradient(90deg,#4CAF50,#FFC107);
    border-radius:2px;
    position:relative;
}

.wwa-label-line::before{
    content:"";position:absolute;left:-6px;top:50%;
    transform:translateY(-50%);
    width:7px;height:7px;border-radius:50%;
    background:#4CAF50;
    box-shadow:0 0 0 4px rgba(76,175,80,.12);
}

.wwa-title{
    font-family:'Manrope',sans-serif;
    font-size:clamp(30px,3.6vw,46px);
    font-weight:800;
    line-height:1.12;
    letter-spacing:-1.4px;
    color:#0B2C6B;
    margin-bottom:20px;
}

.wwa-title span{
    color:#3FA34D;
    display:block;
}

.wwa-desc{
    color:#5A6A82;
    font-size:15.5px;
    line-height:1.75;
    margin-bottom:30px;
    font-weight:400;
    max-width:480px;
}

/* Learn More button */
.btn-learn-more{
    display:inline-flex;
    align-items:center;
    gap:10px;
    padding:14px 30px;
    border-radius:50px;
    background:transparent;
    border:2px solid #4CAF50;
    color:#2E7D32;
    font-size:14.5px;
    font-weight:800;
    letter-spacing:.2px;
    text-decoration:none;
    transition:all .35s ease;
    position:relative;
    overflow:hidden;
}

.btn-learn-more::before{
    content:"";position:absolute;inset:0;
    background:linear-gradient(135deg,#4CAF50,#2E7D32);
    transform:translateX(-101%);
    transition:transform .4s ease;
    z-index:0;
}

.btn-learn-more:hover::before{transform:translateX(0);}
.btn-learn-more:hover{color:#fff;border-color:#4CAF50;transform:translateY(-3px);box-shadow:0 14px 30px rgba(76,175,80,.35);}
.btn-learn-more i{position:relative;z-index:2;transition:transform .3s ease;}
.btn-learn-more:hover i{transform:translateX(5px);}

/* =========================================================
   CENTER VISUAL
========================================================= */

.wwa-center{position:relative;z-index:3;}

.wwa-visual{
    position:relative;
    width:100%;
    max-width:520px;
    margin:0 auto;
    aspect-ratio:1.15/1;
}

/* Images */
.wwa-img{
    position:absolute;
    overflow:hidden;
    border-radius:18px;
    background:#fff;
    padding:6px;
    box-shadow:
        0 22px 50px rgba(11,31,58,.16),
        0 8px 20px rgba(11,31,58,.08);
    transition:all .5s cubic-bezier(.2,.8,.2,1);
    cursor:pointer;
}

.wwa-img img{
    width:100%;height:100%;
    object-fit:cover;
    border-radius:12px;
    display:block;
    transition:transform .6s ease;
}

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

/* Image 1 — left, tilted */
.wwa-img-1{
    width:56%;
    height:78%;
    top:8%;
    left:0;
    transform:rotate(-4deg);
    z-index:2;
    animation:imgFloat1 6s ease-in-out infinite;
}

/* Image 2 — right, tilted */
.wwa-img-2{
    width:54%;
    height:76%;
    top:14%;
    right:0;
    transform:rotate(4deg);
    z-index:2;
    animation:imgFloat2 7s ease-in-out infinite .5s;
}

.wwa-img:hover{
    transform:rotate(0deg) translateY(-8px) scale(1.03);
    z-index:10;
    box-shadow:
        0 30px 60px rgba(11,31,58,.24),
        0 12px 28px rgba(11,31,58,.12);
}

@keyframes imgFloat1{
    0%,100%{transform:translateY(0) rotate(-4deg);}
    50%{transform:translateY(-10px) rotate(-3deg);}
}

@keyframes imgFloat2{
    0%,100%{transform:translateY(0) rotate(4deg);}
    50%{transform:translateY(-12px) rotate(3deg);}
}

/* Center Logo Badge */
.wwa-logo-badge{
    position:absolute;
    top:50%;
    left:35%;
    transform:translate(-50%,-50%);
    z-index:5;

    width:110px;
    height:110px;
    border-radius:50%;
    background:#fff;

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

    box-shadow:
        0 20px 45px rgba(11,31,58,.20),
        0 6px 15px rgba(11,31,58,.10),
        inset 0 1px 0 rgba(255,255,255,.9);

    animation:badgePulse 4s ease-in-out infinite;
}

.wwa-logo-badge img{
    width:78%;
    height:78%;
    object-fit:contain;
}

/* Ring around badge */
.wwa-logo-ring{
    position:absolute;
    inset:-10px;
    border-radius:50%;
    border:2px dashed rgba(76,175,80,.40);
    animation:rotateRing 20s linear infinite;
}

@keyframes badgePulse{
    0%,100%{transform:translate(-50%,-50%) scale(1);}
    50%{transform:translate(-50%,-50%) scale(1.05);}
}

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

/* =========================================================
   RIGHT — FEATURES LIST
========================================================= */

.wwa-right{position:relative;z-index:3;}

.wwa-features{
    display:flex;
    flex-direction:column;
    gap:20px;
}

.wwa-feature{
    display:flex;
    align-items:center;
    gap:16px;
    padding:8px 10px;
    border-radius:14px;
    transition:all .35s ease;
    cursor:pointer;
}

.wwa-feature:hover{
    background:linear-gradient(135deg,rgba(240,246,255,.85),rgba(232,245,233,.55));
    transform:translateX(6px);
}

.wwa-feature-icon{
    width:56px;
    height:56px;
    flex-shrink:0;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    font-size:24px;
    transition:transform .4s ease;
    position:relative;
    background:#fff;
}

.wwa-feature-icon::before{
    content:"";
    position:absolute;
    inset:0;
    border-radius:50%;
}

.wwa-feature:hover .wwa-feature-icon{
    transform:scale(1.08) rotate(-6deg);
}

/* Feature icon colors */
.icon-education{
    background:linear-gradient(135deg,#E0F2E9,#B7E4C7);
    color:#2E7D32;
    box-shadow:0 8px 20px rgba(76,175,80,.20);
}

.icon-healthcare{
    background:linear-gradient(135deg,#FFE4E6,#FFC9CE);
    color:#E31E24;
    box-shadow:0 8px 20px rgba(227,30,36,.18);
}

.icon-career{
    background:linear-gradient(135deg,#E8F5E9,#C8E6C9);
    color:#4CAF50;
    box-shadow:0 8px 20px rgba(76,175,80,.20);
}

.icon-welfare{
    background:linear-gradient(135deg,#E3F2FD,#BBDEFB);
    color:#1E5BC6;
    box-shadow:0 8px 20px rgba(30,91,198,.18);
}

.wwa-feature-text{
    display:flex;
    flex-direction:column;
    line-height:1.3;
}

.wwa-feature-text strong{
    font-family:'Manrope',sans-serif;
    font-size:15.5px;
    font-weight:800;
    color:#0B2C6B;
    margin-bottom:4px;
    letter-spacing:-.2px;
    transition:color .3s ease;
}

.wwa-feature:hover .wwa-feature-text strong{
    color:#1E5BC6;
}

.wwa-feature-text small{
    font-size:12px;
    color:#6A7A90;
    font-weight:500;
    letter-spacing:.1px;
}

/* =========================================================
   BOTTOM — MISSION & VISION
========================================================= */

.wwa-mv-wrap{
    position:relative;
    z-index:3;
    padding-top:60px;
    border-top:1px solid rgba(11,31,58,.08);
}

.wwa-mv-row{
    display:grid;
    grid-template-columns:1fr auto 1fr;
    gap:50px;
    align-items:center;
}

/* MV Card */
.wwa-mv-card{
    padding:24px 26px;
    border-radius:22px;
    background:linear-gradient(135deg,rgba(255,255,255,.96),rgba(255,255,255,.85));
    backdrop-filter:blur(15px);
    border:1px solid rgba(255,255,255,.9);
    box-shadow:
        0 18px 45px rgba(11,31,58,.08),
        inset 0 1px 0 rgba(255,255,255,.95);
    transition:all .4s ease;
    position:relative;
    overflow:hidden;
}

.wwa-mv-card::before{
    content:"";
    position:absolute;
    top:0;left:8%;right:8%;
    height:1px;
    background:linear-gradient(90deg,transparent,rgba(76,175,80,.35),transparent);
}

.wwa-mv-card:hover{
    transform:translateY(-6px);
    box-shadow:
        0 30px 60px rgba(11,31,58,.14),
        inset 0 1px 0 rgba(255,255,255,.95);
}

.mv-mission::before{
    background:linear-gradient(90deg,transparent,rgba(76,175,80,.45),transparent);
}

.mv-vision::before{
    background:linear-gradient(90deg,transparent,rgba(30,91,198,.45),transparent);
}

/* MV Header */
.mv-header{
    display:flex;
    align-items:center;
    gap:16px;
    margin-bottom:16px;
}

.mv-icon{
    width:56px;
    height:56px;
    flex-shrink:0;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    font-size:24px;
    transition:transform .4s ease;
}

.wwa-mv-card:hover .mv-icon{
    transform:scale(1.08) rotate(-6deg);
}

.mv-icon-green{
    background:linear-gradient(135deg,#66BB6A,#2E7D32);
    color:#fff;
    box-shadow:0 10px 22px rgba(76,175,80,.30);
}

.mv-icon-blue{
    background:linear-gradient(135deg,#1E5BC6,#0B2C6B);
    color:#fff;
    box-shadow:0 10px 22px rgba(30,91,198,.30);
}

/* Script fonts */
.mv-script{
    display:flex;
    flex-direction:column;
    line-height:1;
}

.mv-script-our{
    font-family:'Brush Script MT','Dancing Script','Great Vibes',cursive;
    font-size:22px;
    font-weight:700;
    color:#0B2C6B;
    letter-spacing:.3px;
    transform:rotate(-3deg);
    margin-left:6px;
}

.mv-script-title{
    font-family:'Manrope',sans-serif;
    font-size:24px;
    font-weight:800;
    color:#0B2C6B;
    letter-spacing:-.6px;
    margin-top:2px;
}

.mv-vision .mv-script-our{color:#1E5BC6;}
.mv-vision .mv-script-title{color:#0B2C6B;}

.mv-text{
    font-size:14.5px;
    line-height:1.7;
    color:#5A6A82;
    margin:0;
    font-weight:400;
}

/* =========================================================
   CENTER LOGO CIRCLE
========================================================= */

.wwa-mv-center{
    position:relative;
    display:flex;
    justify-content:center;
    align-items:center;
}

.mv-center-circle{
    position:relative;
    width:170px;
    height:170px;
    border-radius:50%;
    background:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    box-shadow:
        0 25px 55px rgba(11,31,58,.15),
        0 8px 20px rgba(11,31,58,.08),
        inset 0 1px 0 rgba(255,255,255,.9);
}

/* Rings */
.mv-ring{
    position:absolute;
    border-radius:50%;
    border-style:solid;
    border-color:transparent;
    pointer-events:none;
}

.mv-ring-1{
    inset:-10px;
    border-width:3px;
    border-top-color:#4CAF50;
    border-right-color:#FFC107;
    border-bottom-color:#FF8C00;
    border-left-color:#4CAF50;
    animation:rotateRing 15s linear infinite;
}

.mv-ring-2{
    inset:-22px;
    border-width:2px;
    border-top-color:rgba(30,91,198,.40);
    border-bottom-color:rgba(30,91,198,.40);
    animation:rotateRing 20s linear infinite reverse;
}

.mv-center-inner{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:2px;
    text-align:center;
    padding:0 10px;
}

.mv-center-inner img{
    width:56px;
    height:56px;
    object-fit:contain;
    margin-bottom:4px;
    filter:drop-shadow(0 5px 12px rgba(11,31,58,.15));
}

.mv-center-brand{
    font-family:'Manrope',sans-serif;
    font-size:20px;
    font-weight:800;
    color:#0B2C6B;
    letter-spacing:-.5px;
    line-height:1;
}

.mv-center-sub{
    font-size:8px;
    font-weight:800;
    letter-spacing:1.6px;
    color:#6A7A90;
    margin-top:3px;
}

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

@media(max-width:1199.98px){
    .who-we-are-section{padding:90px 0 100px;}
    .wwa-visual{max-width:460px;}
    .wwa-logo-badge{width:96px;height:96px;}
    .wwa-feature-icon{width:52px;height:52px;font-size:22px;}
    .wwa-feature-text strong{font-size:14.5px;}
    .mv-center-circle{width:150px;height:150px;}
    .mv-center-inner img{width:48px;height:48px;}
    .mv-center-brand{font-size:18px;}
}

@media(max-width:991.98px){

    .who-we-are-section{padding:80px 0 90px;}

    /* Reorder: Image first, then text, then features */
    .wwa-top{display:flex;flex-direction:column;}

    .wwa-center{order:1;margin-bottom:40px;}
    .wwa-left{order:2;text-align:center;margin-bottom:40px;}
    .wwa-right{order:3;}

    .wwa-label{justify-content:center;}
    .wwa-desc{margin-left:auto;margin-right:auto;}
    .wwa-visual{max-width:520px;margin:0 auto;}

    .wwa-features{
        display:grid;
        grid-template-columns:1fr 1fr;
        gap:18px;
    }

    .wwa-feature{
        padding:12px;
        background:rgba(255,255,255,.6);
        backdrop-filter:blur(10px);
        border:1px solid rgba(255,255,255,.9);
    }

    /* Mission & Vision stacked */
    .wwa-mv-row{
        grid-template-columns:1fr;
        gap:30px;
    }

    .wwa-mv-center{
        order:-1;
    }
}

@media(max-width:575.98px){

    .who-we-are-section{padding:60px 0 70px;}

    .wwa-title{letter-spacing:-.8px;}
    .wwa-desc{font-size:14.5px;}

    .btn-learn-more{
        width:100%;
        justify-content:center;
    }

    .wwa-visual{max-width:340px;}

    .wwa-img{padding:4px;border-radius:14px;}
    .wwa-img img{border-radius:10px;}

    .wwa-logo-badge{width:78px;height:78px;}

    .wwa-features{grid-template-columns:1fr;gap:12px;}

    .wwa-feature-icon{width:48px;height:48px;font-size:20px;}
    .wwa-feature-text strong{font-size:14px;}
    .wwa-feature-text small{font-size:11px;}

    .mv-center-circle{width:130px;height:130px;}
    .mv-center-inner img{width:42px;height:42px;}
    .mv-center-brand{font-size:16px;}
    .mv-center-sub{font-size:7px;letter-spacing:1.3px;}

    .wwa-mv-card{padding:20px 22px;}
    .mv-icon{width:48px;height:48px;font-size:20px;}
    .mv-script-our{font-size:19px;}
    .mv-script-title{font-size:21px;}
    .mv-text{font-size:13.5px;}
}

        /* =========================================================
   OUR FOUR PILLARS + OUR JOURNEY SECTION
========================================================= */

.pillars-journey-section{
    position:relative;
    padding:110px 0 120px;
    overflow:hidden;
    isolation:isolate;
    background:#FDFCF7;
}

/* =========================================================
   AMBIENT GLOW (Premium Topography)
========================================================= */

.pillars-journey-section::before{
    content:"";
    position:absolute;inset:0;z-index:0;pointer-events:none;
    background:
        radial-gradient(ellipse 55% 45% at -5% -5%,
            rgba(76,175,80,.28) 0%, rgba(76,175,80,.12) 30%,
            rgba(76,175,80,.04) 55%, transparent 72%),
        radial-gradient(ellipse 55% 45% at 105% -5%,
            rgba(255,140,0,.30) 0%, rgba(255,193,7,.13) 30%,
            rgba(255,140,0,.05) 55%, transparent 72%),
        radial-gradient(ellipse 60% 50% at -5% 105%,
            rgba(255,140,0,.26) 0%, rgba(255,193,7,.12) 35%,
            rgba(255,140,0,.04) 60%, transparent 78%),
        radial-gradient(ellipse 65% 55% at 105% 105%,
            rgba(76,175,80,.26) 0%, rgba(255,193,7,.14) 25%,
            rgba(255,140,0,.10) 55%, transparent 82%),
        radial-gradient(ellipse 90% 70% at 50% 50%,
            rgba(232,240,252,.45) 0%, rgba(232,240,252,.15) 40%, transparent 70%);
}

.pillars-journey-section::after{
    content:"";
    position:absolute;inset:0;z-index:0;pointer-events:none;
    background:radial-gradient(ellipse 120% 90% at 50% 50%,
        rgba(253,252,247,0) 0%, rgba(253,252,247,.15) 60%, rgba(253,252,247,.55) 100%);
}

.pj-bg{
    position:absolute;inset:0;pointer-events:none;z-index:1;overflow:hidden;
}

.pj-bg::before{
    content:"";position:absolute;top:-25%;left:-20%;
    width:70%;height:110%;
    background:radial-gradient(ellipse at 30% 40%,
        rgba(76,175,80,.20) 0%, rgba(76,175,80,.08) 40%, transparent 70%);
    border-radius:50% 40% 60% 45% / 55% 60% 40% 50%;
    filter:blur(50px);transform:rotate(-15deg);opacity:.95;
}

.pj-bg::after{
    content:"";position:absolute;bottom:-35%;right:-25%;
    width:85%;height:120%;
    background:radial-gradient(ellipse at 60% 60%,
        rgba(255,140,0,.20) 0%, rgba(255,193,7,.10) 30%,
        rgba(76,175,80,.08) 60%, transparent 80%);
    border-radius:45% 55% 40% 60% / 60% 45% 55% 40%;
    filter:blur(55px);transform:rotate(-12deg);opacity:.95;
}

/* Leaves */
.pj-leaf,.pj-orange-leaf{
    position:absolute;display:block;
    border-radius:0 100% 0 100%;
    filter:drop-shadow(0 6px 14px rgba(0,0,0,.10));
    opacity:.9;z-index:2;
}
.pj-leaf{background:linear-gradient(135deg,#66BB6A,#2E7D32);}
.pj-orange-leaf{background:linear-gradient(135deg,#FFB74D,#E88918);}

.pj-leaf-1{width:56px;height:56px;top:8%;left:1.5%;animation:floatLeaf1 7s ease-in-out infinite;}
.pj-leaf-2{width:46px;height:46px;bottom:8%;right:2%;animation:floatLeaf3 8s ease-in-out infinite;}
.pj-orange-1{width:34px;height:34px;top:45%;left:2%;animation:floatLeaf4 7.5s ease-in-out infinite;}

.pj-dot{
    position:absolute;width:5px;height:5px;border-radius:50%;
    background:rgba(255,140,0,.55);
    box-shadow:0 0 8px rgba(255,140,0,.4);
    z-index:2;
}
.pj-dot-1{top:6%;right:8%;}
.pj-dot-2{top:8%;right:10%;}
.pj-dot-3{top:10%;right:8%;}

/* =========================================================
   PART 1 — HEADER
========================================================= */

.pillars-header{
    position:relative;
    z-index:3;
    text-align:center;
    max-width:640px;
    margin:0 auto 55px;
}

.pj-label{
    display:inline-flex;align-items:center;gap:10px;
    color:#4CAF50;font-size:12px;font-weight:800;
    letter-spacing:3.5px;text-transform:uppercase;
    margin-bottom:16px;
}

.pj-label-line{
    display:inline-block;width:34px;height:2px;
    background:linear-gradient(90deg,#4CAF50,#FFC107);
    border-radius:2px;
    position:relative;
}

.pj-label-line::before{
    content:"";position:absolute;left:-6px;top:50%;
    transform:translateY(-50%);
    width:7px;height:7px;border-radius:50%;
    background:#4CAF50;
    box-shadow:0 0 0 4px rgba(76,175,80,.12);
}

.pj-title{
    font-family:'Manrope',sans-serif;
    font-size:clamp(30px,3.6vw,46px);
    font-weight:800;
    line-height:1.15;
    letter-spacing:-1.4px;
    color:#0B2C6B;
    margin-bottom:16px;
}

.pj-subtitle{
    color:#5A6A82;
    font-size:15.5px;
    line-height:1.7;
    max-width:520px;
    margin:0 auto;
    font-weight:400;
}

/* =========================================================
   PILLAR CARDS
========================================================= */

.pillars-row{position:relative;z-index:3;margin-bottom:80px;}

.pillar-card{
    position:relative;
    padding:26px 22px 24px;
    border-radius:22px;
    min-height:230px;
    display:flex;
    flex-direction:column;
    overflow:hidden;
    transition:all .45s cubic-bezier(.2,.8,.2,1);
    cursor:pointer;
    box-shadow:
        0 12px 30px rgba(11,31,58,.08),
        0 3px 10px rgba(11,31,58,.04);
    border:1px solid rgba(255,255,255,.9);
}

.pillar-card:hover{
    transform:translateY(-8px);
    box-shadow:
        0 25px 55px rgba(11,31,58,.16),
        0 8px 20px rgba(11,31,58,.08);
}

/* Background gradients per pillar */
.pillar-education{
    background:linear-gradient(135deg,#E8F2FF 0%,#F5FAFF 60%,#FFFFFF 100%);
}

.pillar-healthcare{
    background:linear-gradient(135deg,#E8F5E9 0%,#F1FAF3 60%,#FFFFFF 100%);
}

.pillar-career{
    background:linear-gradient(135deg,#FFF3E0 0%,#FFF9F0 60%,#FFFFFF 100%);
}

.pillar-welfare{
    background:linear-gradient(135deg,#EAEBFF 0%,#F5F5FF 60%,#FFFFFF 100%);
}

/* Decorative wave pattern (top-right) */
.pillar-pattern{
    position:absolute;
    top:-30px;
    right:-30px;
    width:180px;
    height:180px;
    border-radius:50%;
    opacity:.9;
    transition:all .6s ease;
    pointer-events:none;
}

.pillar-education .pillar-pattern{
    background:radial-gradient(circle at 30% 30%,
        rgba(30,91,198,.20) 0%,
        rgba(30,91,198,.08) 45%,
        transparent 75%);
}

.pillar-healthcare .pillar-pattern{
    background:radial-gradient(circle at 30% 30%,
        rgba(76,175,80,.22) 0%,
        rgba(76,175,80,.09) 45%,
        transparent 75%);
}

.pillar-career .pillar-pattern{
    background:radial-gradient(circle at 30% 30%,
        rgba(255,140,0,.22) 0%,
        rgba(255,193,7,.10) 45%,
        transparent 75%);
}

.pillar-welfare .pillar-pattern{
    background:radial-gradient(circle at 30% 30%,
        rgba(100,120,220,.22) 0%,
        rgba(100,120,220,.09) 45%,
        transparent 75%);
}

.pillar-card:hover .pillar-pattern{
    transform:scale(1.3);
}

/* Icon */
.pillar-icon{
    position:relative;
    z-index:2;
    width:58px;
    height:58px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:18px;
    color:#fff;
    font-size:26px;
    margin-bottom:18px;
    transition:transform .4s ease;
    box-shadow:0 10px 24px rgba(0,0,0,.14);
}

.pillar-card:hover .pillar-icon{
    transform:scale(1.08) rotate(-6deg);
}

.pillar-education .pillar-icon{
    background:linear-gradient(135deg,#1E5BC6,#0B2C6B);
    box-shadow:0 10px 24px rgba(30,91,198,.35);
}

.pillar-healthcare .pillar-icon{
    background:linear-gradient(135deg,#66BB6A,#2E7D32);
    box-shadow:0 10px 24px rgba(76,175,80,.35);
}

.pillar-career .pillar-icon{
    background:linear-gradient(135deg,#FFB74D,#E88918);
    box-shadow:0 10px 24px rgba(255,140,0,.35);
}

.pillar-welfare .pillar-icon{
    background:linear-gradient(135deg,#6478DC,#3A4DCB);
    box-shadow:0 10px 24px rgba(100,120,220,.35);
}

/* Name */
.pillar-name{
    position:relative;
    z-index:2;
    font-family:'Manrope',sans-serif;
    font-size:19px;
    font-weight:800;
    color:#0B2C6B;
    letter-spacing:-.4px;
    margin-bottom:10px;
}

/* Desc */
.pillar-desc{
    position:relative;
    z-index:2;
    color:#5A6A82;
    font-size:13.5px;
    line-height:1.65;
    margin-bottom:20px;
    font-weight:400;
    flex:1;
}

/* Arrow */
.pillar-arrow{
    position:relative;
    z-index:2;
    width:38px;
    height:38px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    border:none;
    color:#fff;
    font-size:15px;
    cursor:pointer;
    transition:all .35s ease;
    margin-top:auto;
    box-shadow:0 6px 16px rgba(0,0,0,.12);
}

.pillar-education .pillar-arrow{background:linear-gradient(135deg,#1E5BC6,#0B2C6B);}
.pillar-healthcare .pillar-arrow{background:linear-gradient(135deg,#66BB6A,#2E7D32);}
.pillar-career .pillar-arrow{background:linear-gradient(135deg,#FFB74D,#E88918);}
.pillar-welfare .pillar-arrow{background:linear-gradient(135deg,#6478DC,#3A4DCB);}

.pillar-arrow:hover{
    transform:scale(1.12);
    box-shadow:0 10px 22px rgba(0,0,0,.20);
}

.pillar-card:hover .pillar-arrow i{
    transform:translateX(2px);
}

.pillar-arrow i{
    transition:transform .3s ease;
}

/* =========================================================
   PART 2 — OUR JOURNEY
========================================================= */

.journey-row{position:relative;z-index:3;}

.journey-left{position:relative;z-index:3;}

.journey-title{
    font-family:'Manrope',sans-serif;
    font-size:clamp(28px,3.4vw,44px);
    font-weight:800;
    line-height:1.12;
    letter-spacing:-1.4px;
    color:#0B2C6B;
    margin-bottom:16px;
}

.journey-title span{
    color:#3FA34D;
}

.journey-subtitle{
    color:#5A6A82;
    font-size:15px;
    line-height:1.7;
    margin-bottom:40px;
    font-weight:400;
    max-width:480px;
}

/* =========================================================
   TIMELINE
========================================================= */

.journey-timeline{
    position:relative;
    padding:20px 0 10px;
}

.timeline-track{
    position:relative;
    height:2px;
    background:linear-gradient(90deg,
        rgba(76,175,80,.15) 0%,
        rgba(255,193,7,.15) 50%,
        rgba(255,140,0,.15) 100%);
    border-radius:2px;
    margin:0 4% 26px;
}

.timeline-progress{
    position:absolute;
    top:0;
    left:0;
    height:100%;
    width:100%;
    background:linear-gradient(90deg,
        #4CAF50 0%,
        #8BC34A 20%,
        #1E5BC6 40%,
        #FFC107 60%,
        #4CAF50 80%,
        #26A69A 100%);
    border-radius:2px;
    opacity:.65;
    filter:blur(.3px);
}

.timeline-nodes{
    display:grid;
    grid-template-columns:repeat(6,1fr);
    gap:10px;
    position:relative;
}

.timeline-node{
    display:flex;
    flex-direction:column;
    align-items:center;
    text-align:center;
    gap:8px;
    position:relative;
    padding-top:14px;
}

.node-dot{
    position:absolute;
    top:-8px;
    left:50%;
    transform:translateX(-50%);
    width:14px;
    height:14px;
    border-radius:50%;
    border:3px solid #FDFCF7;
    z-index:2;
    transition:all .4s ease;
}

.node-dot::before{
    content:"";
    position:absolute;
    inset:-6px;
    border-radius:50%;
    opacity:.35;
    animation:pulseDot 2.5s ease-in-out infinite;
}

.timeline-node:hover .node-dot{
    transform:translateX(-50%) scale(1.3);
}

.timeline-node:hover .node-dot::before{
    opacity:.55;
}

.node-orange{background:#FF8C00;}
.node-orange::before{background:rgba(255,140,0,.35);}

.node-green{background:#4CAF50;}
.node-green::before{background:rgba(76,175,80,.35);}

.node-blue{background:#1E5BC6;}
.node-blue::before{background:rgba(30,91,198,.35);}

.node-teal{background:#26A69A;}
.node-teal::before{background:rgba(38,166,154,.35);}

@keyframes pulseDot{
    0%,100%{transform:scale(1);opacity:.35;}
    50%{transform:scale(1.4);opacity:.15;}
}

.node-year{
    font-family:'Manrope',sans-serif;
    font-size:16px;
    font-weight:800;
    color:#0B2C6B;
    letter-spacing:-.3px;
    margin-top:6px;
    transition:color .3s ease;
}

.timeline-node:hover .node-year{
    color:#1E5BC6;
}

.node-text{
    font-size:11px;
    color:#6A7A90;
    font-weight:500;
    line-height:1.4;
    letter-spacing:.1px;
    max-width:110px;
}

/* =========================================================
   IMAGE COLLAGE (Right)
========================================================= */

.journey-right{position:relative;z-index:3;}

.journey-collage{
    position:relative;
    width:100%;
    max-width:480px;
    margin-left:auto;
    aspect-ratio:1/1.05;
}

/* Script text — top-right */
.jc-script{
    position:absolute;
    top:-10px;
    right:-10px;
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    gap:2px;
    z-index:10;
    transform:rotate(-3deg);
    pointer-events:none;
}

.jc-script span{
    font-family:'Brush Script MT','Dancing Script','Great Vibes',cursive;
    font-size:clamp(22px,2.4vw,32px);
    font-weight:700;
    color:#0B2C6B;
    line-height:1.05;
    letter-spacing:.4px;
    text-shadow:
        0 2px 8px rgba(255,255,255,1),
        0 0 20px rgba(255,255,255,.9);
}

.jc-script-underline{
    position:relative;
    color:#0B2C6B;
}

.jc-script-underline::after{
    content:"";
    position:absolute;
    left:2%;bottom:-4px;
    width:92%;height:3px;
    background:linear-gradient(90deg,#FF8C00,#D71920);
    border-radius:3px;
    transform:rotate(-2deg);
    box-shadow:0 2px 6px rgba(215,25,32,.25);
}

.jc-arrow{
    position:absolute;
    bottom:-32px;
    right:10px;
    font-size:24px;
    color:#FF8C00;
    transform:rotate(-15deg);
    animation:arrowBounce 2s ease-in-out infinite;
}

@keyframes arrowBounce{
    0%,100%{transform:rotate(-15deg) translate(0,0);}
    50%{transform:rotate(-15deg) translate(3px,-3px);}
}

/* Collage Images */
.jc-img{
    position:absolute;
    overflow:hidden;
    border-radius:16px;
    background:#fff;
    padding:5px;
    box-shadow:
        0 18px 40px rgba(11,31,58,.16),
        0 6px 15px rgba(11,31,58,.08);
    transition:all .5s cubic-bezier(.2,.8,.2,1);
    cursor:pointer;
}

.jc-img img{
    width:100%;height:100%;
    object-fit:cover;
    border-radius:12px;
    display:block;
    transition:transform .6s ease;
}

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

/* Image 1 — top-left big */
.jc-img-1{
    width:62%;
    height:58%;
    top:2%;
    left:0;
    transform:rotate(-3deg);
    z-index:2;
    animation:imgFloat1 6s ease-in-out infinite;
}

/* Image 2 — bottom-left small */
.jc-img-2{
    width:44%;
    height:38%;
    bottom:6%;
    left:8%;
    transform:rotate(2deg);
    z-index:3;
    animation:imgFloat2 7s ease-in-out infinite .5s;
}

/* Image 3 — right tall */
.jc-img-3{
    width:48%;
    height:62%;
    top:18%;
    right:0;
    transform:rotate(4deg);
    z-index:2;
    animation:imgFloat1 8s ease-in-out infinite .3s;
}

.jc-img:hover{
    transform:rotate(0deg) translateY(-6px) scale(1.04);
    z-index:20;
    box-shadow:
        0 30px 60px rgba(11,31,58,.24),
        0 12px 28px rgba(11,31,58,.12);
}

@keyframes imgFloat1{
    0%,100%{transform:translateY(0) rotate(-3deg);}
    50%{transform:translateY(-8px) rotate(-2deg);}
}

@keyframes imgFloat2{
    0%,100%{transform:translateY(0) rotate(2deg);}
    50%{transform:translateY(-10px) rotate(3deg);}
}

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

@media(max-width:1199.98px){
    .pillars-journey-section{padding:95px 0 105px;}
    .pillar-card{min-height:220px;padding:22px 18px;}
    .pillar-icon{width:52px;height:52px;font-size:22px;}
    .pillar-name{font-size:17px;}
    .pillar-desc{font-size:12.5px;}
    .journey-collage{max-width:420px;}
}

@media(max-width:991.98px){

    .pillars-journey-section{padding:85px 0 95px;}

    .pillars-header{margin-bottom:44px;}

    .pillars-row{margin-bottom:70px;}

    /* Journey — stack */
    .journey-left{margin-bottom:60px;text-align:center;}
    .journey-subtitle{margin-left:auto;margin-right:auto;}
    .journey-title span{display:inline;}

    /* Timeline smaller */
    .timeline-nodes{grid-template-columns:repeat(3,1fr);gap:24px 16px;}

    /* Collage centered */
    .journey-collage{max-width:440px;margin:0 auto;}
}

@media(max-width:575.98px){

    .pillars-journey-section{padding:65px 0 75px;}

    .pillars-header{margin-bottom:36px;}

    .pj-title{letter-spacing:-.7px;}
    .pj-subtitle{font-size:14.5px;}

    .pillar-card{
        min-height:auto;
        padding:22px 20px;
        border-radius:18px;
    }

    .pillar-icon{width:52px;height:52px;font-size:22px;}
    .pillar-name{font-size:17px;}
    .pillar-desc{font-size:13px;}

    .journey-title{letter-spacing:-.8px;}
    .journey-subtitle{font-size:14.5px;}

    /* Timeline 2 columns */
    .timeline-nodes{grid-template-columns:repeat(2,1fr);gap:20px 12px;}

    .node-year{font-size:15px;}
    .node-text{font-size:10.5px;max-width:100px;}

    /* Collage */
    .journey-collage{max-width:340px;aspect-ratio:1/1.15;}

    .jc-script{top:-8px;right:-4px;transform:rotate(-3deg) scale(.85);}

    .jc-img{padding:4px;border-radius:14px;}
    .jc-img img{border-radius:10px;}
}
    
        /* =========================================================
   MEET OUR TEAM SECTION
========================================================= */

.team-section{
    position:relative;
    padding:100px 0 110px;
    overflow:hidden;
    isolation:isolate;
    background:#FDFCF7;
}

/* =========================================================
   AMBIENT GLOW
========================================================= */

.team-section::before{
    content:"";
    position:absolute;inset:0;z-index:0;pointer-events:none;
    background:
        radial-gradient(ellipse 55% 45% at -5% -5%,
            rgba(76,175,80,.28) 0%, rgba(76,175,80,.12) 30%,
            rgba(76,175,80,.04) 55%, transparent 72%),
        radial-gradient(ellipse 55% 45% at 105% -5%,
            rgba(255,140,0,.30) 0%, rgba(255,193,7,.13) 30%,
            rgba(255,140,0,.05) 55%, transparent 72%),
        radial-gradient(ellipse 60% 50% at -5% 105%,
            rgba(255,140,0,.26) 0%, rgba(255,193,7,.12) 35%,
            rgba(255,140,0,.04) 60%, transparent 78%),
        radial-gradient(ellipse 65% 55% at 105% 105%,
            rgba(76,175,80,.26) 0%, rgba(255,193,7,.14) 25%,
            rgba(255,140,0,.10) 55%, transparent 82%),
        radial-gradient(ellipse 90% 70% at 50% 50%,
            rgba(232,240,252,.45) 0%, rgba(232,240,252,.15) 40%, transparent 70%);
}

.team-section::after{
    content:"";
    position:absolute;inset:0;z-index:0;pointer-events:none;
    background:radial-gradient(ellipse 120% 90% at 50% 50%,
        rgba(253,252,247,0) 0%, rgba(253,252,247,.15) 60%, rgba(253,252,247,.55) 100%);
}

.team-bg{
    position:absolute;inset:0;pointer-events:none;z-index:1;overflow:hidden;
}

.team-bg::before{
    content:"";position:absolute;top:-25%;left:-20%;
    width:70%;height:110%;
    background:radial-gradient(ellipse at 30% 40%,
        rgba(76,175,80,.20) 0%, rgba(76,175,80,.08) 40%, transparent 70%);
    border-radius:50% 40% 60% 45% / 55% 60% 40% 50%;
    filter:blur(50px);transform:rotate(-15deg);opacity:.95;
}

.team-bg::after{
    content:"";position:absolute;bottom:-35%;right:-25%;
    width:85%;height:120%;
    background:radial-gradient(ellipse at 60% 60%,
        rgba(255,140,0,.20) 0%, rgba(255,193,7,.10) 30%,
        rgba(76,175,80,.08) 60%, transparent 80%);
    border-radius:45% 55% 40% 60% / 60% 45% 55% 40%;
    filter:blur(55px);transform:rotate(-12deg);opacity:.95;
}

/* Leaves */
.team-leaf,.team-orange-leaf{
    position:absolute;display:block;
    border-radius:0 100% 0 100%;
    filter:drop-shadow(0 6px 14px rgba(0,0,0,.10));
    opacity:.9;z-index:2;
}
.team-leaf{background:linear-gradient(135deg,#66BB6A,#2E7D32);}
.team-orange-leaf{background:linear-gradient(135deg,#FFB74D,#E88918);}

.team-leaf-1{width:56px;height:56px;top:10%;left:1.5%;animation:floatLeaf1 7s ease-in-out infinite;}
.team-leaf-2{width:46px;height:46px;bottom:12%;right:2%;animation:floatLeaf3 8s ease-in-out infinite;}
.team-orange-1{width:34px;height:34px;top:55%;left:2%;animation:floatLeaf4 7.5s ease-in-out infinite;}

.team-dot{
    position:absolute;width:5px;height:5px;border-radius:50%;
    background:rgba(255,140,0,.55);
    box-shadow:0 0 8px rgba(255,140,0,.4);
    z-index:2;
}
.team-dot-1{top:8%;right:6%;}
.team-dot-2{top:10%;right:8%;}

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

.team-left{position:relative;z-index:3;}

.team-label{
    display:inline-flex;align-items:center;gap:10px;
    color:#4CAF50;font-size:11.5px;font-weight:800;
    letter-spacing:3px;text-transform:uppercase;
    margin-bottom:18px;
}

.team-label-line{
    display:inline-block;width:36px;height:2px;
    background:linear-gradient(90deg,#4CAF50,#FFC107);
    border-radius:2px;
    position:relative;
}

.team-label-line::before{
    content:"";position:absolute;left:-6px;top:50%;
    transform:translateY(-50%);
    width:7px;height:7px;border-radius:50%;
    background:#4CAF50;
    box-shadow:0 0 0 4px rgba(76,175,80,.12);
}

.team-title{
    font-family:'Manrope',sans-serif;
    font-size:clamp(30px,3.6vw,46px);
    font-weight:800;
    line-height:1.1;
    letter-spacing:-1.4px;
    color:#0B2C6B;
    margin-bottom:16px;
}

.team-desc{
    color:#5A6A82;
    font-size:14.5px;
    line-height:1.7;
    margin-bottom:28px;
    font-weight:400;
    max-width:340px;
}

/* Our Team Button */
.btn-team{
    display:inline-flex;
    align-items:center;
    gap:10px;
    padding:13px 28px;
    border-radius:50px;
    background:transparent;
    border:2px solid #1E5BC6;
    color:#1E5BC6;
    font-size:14px;
    font-weight:700;
    letter-spacing:.2px;
    text-decoration:none;
    transition:all .35s ease;
    position:relative;
    overflow:hidden;
}

.btn-team::before{
    content:"";position:absolute;inset:0;
    background:linear-gradient(135deg,#1E5BC6,#0B2C6B);
    transform:translateX(-101%);
    transition:transform .4s ease;
    z-index:0;
}

.btn-team:hover::before{transform:translateX(0);}

.btn-team:hover{
    color:#fff;
    border-color:#1E5BC6;
    transform:translateY(-3px);
    box-shadow:0 14px 30px rgba(30,91,198,.32);
}

.btn-team i{
    position:relative;z-index:2;
    transition:transform .3s ease;
}

.btn-team:hover i{transform:translateX(5px);}

/* =========================================================
   RIGHT — TEAM GRID
========================================================= */

.team-right{position:relative;z-index:3;}

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

/* Card */
.team-card{
    display:flex;
    flex-direction:column;
    align-items:center;
    text-align:center;
    cursor:pointer;
    transition:transform .4s ease;
}

.team-card:hover{
    transform:translateY(-6px);
}

/* Photo */
.team-photo{
    position:relative;
    width:100%;
    aspect-ratio:1/1.05;
    border-radius:20px;
    overflow:hidden;
    margin-bottom:14px;
    background:#fff;

    box-shadow:
        0 12px 30px rgba(11,31,58,.10),
        0 3px 10px rgba(11,31,58,.05);
    border:2px solid rgba(255,255,255,.9);

    transition:all .45s cubic-bezier(.2,.8,.2,1);
}

.team-photo::before{
    content:"";
    position:absolute;
    inset:0;
    border-radius:inherit;
    padding:1.5px;
    background:linear-gradient(135deg,
        rgba(76,175,80,.40),
        rgba(255,193,7,.35),
        rgba(255,140,0,.40),
        rgba(30,91,198,.35));
    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    -webkit-mask-composite:xor;
    mask-composite:exclude;
    pointer-events:none;
    opacity:0;
    transition:opacity .35s ease;
}

.team-photo img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
    border-radius:18px;
    transition:transform .6s ease;
}

.team-card:hover .team-photo{
    transform:translateY(-4px);
    box-shadow:
        0 25px 55px rgba(11,31,58,.18),
        0 8px 20px rgba(11,31,58,.10);
}

.team-card:hover .team-photo::before{
    opacity:1;
}

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

/* Name */
.team-name{
    font-family:'Manrope',sans-serif;
    font-size:14.5px;
    font-weight:800;
    color:#0B2C6B;
    letter-spacing:-.3px;
    margin-bottom:5px;
    transition:color .3s ease;
}

.team-card:hover .team-name{
    color:#1E5BC6;
}

/* Role */
.team-role{
    color:#6A7A90;
    font-size:11.5px;
    font-weight:500;
    letter-spacing:.1px;
    margin:0;
    line-height:1.4;
}

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

@media(max-width:1199.98px){
    .team-section{padding:90px 0 100px;}
    .team-grid{gap:18px;}
    .team-name{font-size:13.5px;}
    .team-role{font-size:11px;}
    .team-desc{font-size:13.5px;}
}

@media(max-width:991.98px){

    .team-section{padding:80px 0 90px;}

    /* LEFT centered */
    .team-left{
        text-align:center;
        margin-bottom:40px;
    }

    .team-label{justify-content:center;}
    .team-desc{margin-left:auto;margin-right:auto;}

    /* Grid 3 columns */
    .team-grid{
        grid-template-columns:repeat(3,1fr);
        gap:22px;
    }
}

@media(max-width:575.98px){

    .team-section{padding:65px 0 75px;}

    .team-title{letter-spacing:-.8px;}
    .team-desc{font-size:13.5px;}

    .btn-team{
        width:100%;
        justify-content:center;
    }

    /* Grid 2 columns */
    .team-grid{
        grid-template-columns:repeat(2,1fr);
        gap:18px;
    }

    .team-photo{border-radius:16px;margin-bottom:10px;}
    .team-photo img{border-radius:14px;}

    .team-name{font-size:13px;}
    .team-role{font-size:10.5px;}
}
   
        /* =========================================================
   OUR IMPACT — FULL WIDTH BANNER
========================================================= */

.impact-section{
    position:relative;
    padding:70px 0 90px;
    overflow:hidden;
    isolation:isolate;
    background:#FDFCF7;
}

/* Ambient glow outside banner */
.impact-section::before{
    content:"";
    position:absolute;inset:0;z-index:0;pointer-events:none;
    background:
        radial-gradient(ellipse 55% 45% at -5% -5%,
            rgba(76,175,80,.26) 0%, rgba(76,175,80,.10) 32%, transparent 72%),
        radial-gradient(ellipse 55% 45% at 105% -5%,
            rgba(255,140,0,.28) 0%, rgba(255,193,7,.11) 32%, transparent 72%),
        radial-gradient(ellipse 60% 50% at -5% 105%,
            rgba(255,140,0,.24) 0%, rgba(255,193,7,.10) 35%, transparent 75%),
        radial-gradient(ellipse 65% 55% at 105% 105%,
            rgba(76,175,80,.24) 0%, rgba(255,193,7,.10) 25%,
            rgba(255,140,0,.10) 55%, transparent 82%),
        radial-gradient(ellipse 90% 70% at 50% 50%,
            rgba(232,240,252,.40) 0%, transparent 70%);
}

.impact-section::after{
    content:"";
    position:absolute;inset:0;z-index:0;pointer-events:none;
    background:radial-gradient(ellipse 120% 90% at 50% 50%,
        rgba(253,252,247,0) 0%, rgba(253,252,247,.15) 60%, rgba(253,252,247,.55) 100%);
}

/* Leaves/dots wrapper */
.impact-bg{
    position:absolute;
    top:0;
    left:0;
    right:0;
    height:100%;
    pointer-events:none;
    z-index:5;
    overflow:hidden;
}

.impact-leaf,.impact-orange-leaf{
    position:absolute;display:block;
    border-radius:0 100% 0 100%;
    opacity:.55;z-index:5;
    pointer-events:none;
}
.impact-leaf{background:linear-gradient(135deg,#66BB6A,#2E7D32);}
.impact-orange-leaf{background:linear-gradient(135deg,#FFB74D,#E88918);}

.impact-leaf-1{width:46px;height:46px;top:20%;right:2%;animation:floatLeaf1 7s ease-in-out infinite;}
.impact-leaf-2{width:38px;height:38px;bottom:15%;right:4%;animation:floatLeaf3 8s ease-in-out infinite;}
.impact-orange-1{width:32px;height:32px;top:25%;left:44%;animation:floatLeaf4 7.5s ease-in-out infinite;}

.impact-dot{
    position:absolute;width:5px;height:5px;border-radius:50%;
    background:rgba(255,255,255,.55);
    box-shadow:0 0 10px rgba(255,255,255,.6);
    z-index:5;
}
.impact-dot-1{top:18%;right:6%;}
.impact-dot-2{top:26%;right:8%;}
.impact-dot-3{bottom:22%;right:7%;}

/* =========================================================
   FULL-WIDTH BANNER
========================================================= */

.impact-banner{
    position:relative;
    z-index:2;

    /* 🔥 FULL WIDTH */
    width:100%;
    max-width:100%;
    margin:0;

    display:flex;
    align-items:stretch;

    /* 🔥 Bigger height */
    min-height:360px;

    overflow:hidden;

    /* Dark navy gradient */
    background:
        linear-gradient(105deg,
            rgba(11,31,58,1) 0%,
            rgba(15,42,80,1) 30%,
            rgba(20,55,100,1) 60%,
            rgba(26,72,130,1) 100%);

    /* No border-radius — full bleed */
    border-radius:0;

    box-shadow:
        0 30px 70px rgba(11,31,58,.25),
        0 10px 25px rgba(11,31,58,.15);
}

/* Ambient glows inside banner */
.impact-banner::before{
    content:"";
    position:absolute;inset:0;
    pointer-events:none;
    z-index:1;
    background:
        radial-gradient(ellipse 55% 90% at 0% 50%,
            rgba(76,175,80,.35) 0%,
            rgba(76,175,80,.12) 35%,
            transparent 70%),
        radial-gradient(ellipse 50% 80% at 100% 50%,
            rgba(255,140,0,.30) 0%,
            rgba(255,193,7,.12) 35%,
            transparent 70%),
        radial-gradient(ellipse 45% 70% at 55% 50%,
            rgba(76,175,80,.15) 0%,
            rgba(255,193,7,.10) 30%,
            transparent 70%);
}

/* Gold top line */
.impact-banner::after{
    content:"";
    position:absolute;
    top:0;left:6%;right:6%;
    height:1px;
    background:linear-gradient(90deg,transparent,rgba(212,175,55,.55),transparent);
    z-index:6;
}

/* =========================================================
   LEFT — IMAGE
========================================================= */

.impact-image-side{
    position:relative;
    width:22%;
    min-width:240px;
    flex-shrink:0;
    overflow:hidden;
    z-index:2;
}

.impact-image-side img{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:center;
    display:block;
}

/* Fade into banner */
.impact-image-fade{
    position:absolute;
    inset:0;
    background:linear-gradient(90deg,
        rgba(11,31,58,0) 0%,
        rgba(11,31,58,.15) 45%,
        rgba(11,31,58,.65) 75%,
        rgba(11,31,58,1) 100%);
    z-index:2;
}

/* =========================================================
   RIGHT — CONTENT (Title + Stats in one row)
========================================================= */

.impact-content{
    position:relative;
    z-index:3;
    flex:1;

    padding:44px 60px 44px 30px;

    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:40px;
    flex-wrap:nowrap;   /* 🔥 NO WRAP — stats stay in one line */
}

/* ================= TITLE BLOCK ================= */

.impact-title-block{
    flex:0 0 auto;
    max-width:340px;
    min-width:260px;
}

.impact-label{
    display:inline-flex;
    align-items:center;
    gap:10px;
    color:#8BC34A;
    font-size:11.5px;
    font-weight:800;
    letter-spacing:3.5px;
    text-transform:uppercase;
    margin-bottom:14px;
}

.impact-label-line{
    display:inline-block;
    width:28px;
    height:2px;
    background:linear-gradient(90deg,#8BC34A,#FFC107);
    border-radius:2px;
    position:relative;
}

.impact-label-line::before{
    content:"";
    position:absolute;
    left:-6px;
    top:50%;
    transform:translateY(-50%);
    width:7px;height:7px;
    border-radius:50%;
    background:#8BC34A;
    box-shadow:0 0 0 4px rgba(139,195,74,.20);
}

.impact-title{
    font-family:'Manrope',sans-serif;
    font-size:clamp(26px,2.8vw,38px);
    font-weight:800;
    line-height:1.15;
    letter-spacing:-1.2px;
    color:#fff;
    margin-bottom:12px;
}

.impact-subtitle{
    color:rgba(255,255,255,.75);
    font-size:13.5px;
    line-height:1.6;
    margin:0;
    font-weight:400;
}

/* ================= STATS ROW ================= */

.impact-stats{
    display:flex;
    align-items:center;
    justify-content:space-around;
    gap:24px;

    /* 🔥 Take remaining space */
    flex:1;
    min-width:0;
    flex-wrap:nowrap;   /* 🔥 NO WRAP — horizontal */
}

/* Individual stat */
.impact-stat{
    display:flex;
    flex-direction:column;
    align-items:center;
    text-align:center;
    gap:4px;
    flex:1;
    min-width:0;
    max-width:140px;
    transition:transform .4s ease;
    cursor:pointer;
}

.impact-stat:hover{
    transform:translateY(-4px);
}

.impact-stat-icon{
    width:44px;
    height:44px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    color:#fff;
    font-size:18px;
    margin-bottom:8px;
    transition:transform .4s ease;
    box-shadow:0 8px 20px rgba(0,0,0,.25);
    border:1.5px solid rgba(255,255,255,.15);
    flex-shrink:0;
}

.impact-stat:hover .impact-stat-icon{
    transform:scale(1.10) rotate(-6deg);
}

.icon-blue{background:linear-gradient(135deg,#1E5BC6,#0B2C6B);}
.icon-green{background:linear-gradient(135deg,#66BB6A,#2E7D32);}
.icon-orange{background:linear-gradient(135deg,#FFB74D,#E88918);}
.icon-teal{background:linear-gradient(135deg,#26A69A,#00796B);}

.impact-stat-number{
    font-family:'Manrope',sans-serif;
    font-size:24px;
    font-weight:800;
    color:#fff;
    letter-spacing:-.5px;
    line-height:1;
    white-space:nowrap;
}

.impact-stat-label{
    color:rgba(255,255,255,.70);
    font-size:11.5px;
    font-weight:600;
    letter-spacing:.2px;
    line-height:1.35;
    white-space:nowrap;
}

/* =========================================================
   CENTER LOGO BADGE
========================================================= */

.impact-center-badge{
    position:relative;
    width:110px;
    height:110px;
    flex-shrink:0;
    display:flex;
    align-items:center;
    justify-content:center;
    margin:0 8px;
}

.icb-inner{
    position:relative;
    z-index:3;
    width:82px;
    height:82px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:#fff;
    border-radius:50%;
    box-shadow:
        0 18px 40px rgba(0,0,0,.35),
        0 0 0 6px rgba(255,255,255,.10),
        inset 0 1px 0 rgba(255,255,255,.9);
    animation:badgePulse 4s ease-in-out infinite;
}

.icb-inner img{
    width:70%;
    height:70%;
    object-fit:contain;
}

.icb-ring{
    position:absolute;
    border-radius:50%;
    pointer-events:none;
}

.icb-ring-1{
    inset:0;
    border-width:2.5px;
    border-style:solid;
    border-color:transparent;
    border-top-color:#8BC34A;
    border-right-color:#FFC107;
    border-bottom-color:#FF8C00;
    border-left-color:#8BC34A;
    animation:rotateRing 15s linear infinite;
}

.icb-ring-2{
    inset:-10px;
    border-width:2px;
    border-style:dashed;
    border-color:rgba(255,255,255,.30);
    animation:rotateRing 22s linear infinite reverse;
}

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

@keyframes badgePulse{
    0%,100%{transform:scale(1);}
    50%{transform:scale(1.05);}
}

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

@media(max-width:1399.98px){
    .impact-content{padding:40px 50px 40px 26px;gap:30px;}
    .impact-stats{gap:18px;}
    .impact-stat-number{font-size:22px;}
    .impact-stat-label{font-size:11px;}
    .impact-center-badge{width:100px;height:100px;margin:0 6px;}
    .icb-inner{width:74px;height:74px;}
}

@media(max-width:1199.98px){

    .impact-section{padding:60px 0 80px;}

    .impact-banner{
        flex-direction:column;
        min-height:auto;
    }

    .impact-image-side{
        width:100%;
        min-width:0;
        height:220px;
    }

    .impact-image-fade{
        background:linear-gradient(180deg,
            rgba(11,31,58,0) 0%,
            rgba(11,31,58,.30) 55%,
            rgba(11,31,58,1) 100%);
    }

    .impact-content{
        padding:34px 30px 42px;
        flex-direction:column;
        align-items:center;
        text-align:center;
        gap:34px;
        flex-wrap:wrap;
    }

    .impact-title-block{
        max-width:100%;
        text-align:center;
        min-width:0;
    }

    .impact-label{justify-content:center;}

    .impact-stats{
        justify-content:center;
        gap:26px;
        width:100%;
        flex-wrap:wrap;
    }

    .impact-stat{max-width:130px;}

    .impact-center-badge{
        margin:6px 0;
    }
}

@media(max-width:991.98px){

    .impact-section{padding:55px 0 75px;}

    .impact-image-side{height:200px;}

    .impact-content{padding:30px 24px 38px;gap:30px;}

    .impact-title{letter-spacing:-.7px;}

    .impact-stats{gap:22px;}

    .impact-stat{max-width:120px;}
}

@media(max-width:575.98px){

    .impact-section{padding:45px 0 65px;}

    .impact-image-side{height:170px;}

    .impact-content{padding:26px 20px 34px;gap:26px;}

    .impact-label{font-size:10.5px;letter-spacing:2.5px;}

    .impact-title{font-size:22px;letter-spacing:-.6px;}

    .impact-subtitle{font-size:12.5px;}

    /* Stats → 2-column grid */
    .impact-stats{
        display:grid;
        grid-template-columns:repeat(2,1fr);
        gap:22px 16px;
        justify-items:center;
    }

    .impact-stat{max-width:100%;}

    .impact-stat-icon{width:40px;height:40px;font-size:16px;}

    .impact-stat-number{font-size:20px;}

    .impact-stat-label{font-size:10.5px;}

    .impact-center-badge{
        grid-column:1 / -1;
        justify-self:center;
        margin:4px 0 8px;
        width:90px;height:90px;
    }

    .icb-inner{width:68px;height:68px;}
}
  
        /* =========================================================
   ABOUT CTA — FULL-WIDTH LANDSCAPE SECTION
========================================================= */

.about-cta-section{
    position:relative;
    padding:100px 0 110px;
    overflow:hidden;
    isolation:isolate;

    /* Light cream base — image load na ho toh fallback */
    background:linear-gradient(135deg,#FDFCF7 0%,#FFF8E7 100%);
}

/* =========================================================
   FULL-WIDTH BACKGROUND IMAGE
========================================================= */

.acta-bg-image{
    position:absolute;
    inset:0;
    z-index:0;
    overflow:hidden;
}

.acta-bg-image img{
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:center;
    display:block;
}

/* Overlay — white-ish at left, transparent at right (text readable) */
.acta-bg-overlay{
    position:absolute;
    inset:0;
    z-index:1;
    pointer-events:none;

    background:
        /* Left side light overlay for text readability */
        linear-gradient(90deg,
            rgba(253,252,247,.94) 0%,
            rgba(253,252,247,.85) 25%,
            rgba(253,252,247,.55) 45%,
            rgba(253,252,247,.15) 65%,
            rgba(253,252,247,0) 80%),

        /* Top subtle green tint */
        linear-gradient(180deg,
            rgba(232,245,233,.35) 0%,
            rgba(232,245,233,.10) 40%,
            transparent 70%),

        /* Bottom warm golden tint */
        linear-gradient(0deg,
            rgba(255,193,7,.18) 0%,
            rgba(255,193,7,.06) 30%,
            transparent 60%);
}

/* =========================================================
   FLOATING LEAVES
========================================================= */

.acta-decor{
    position:absolute;
    inset:0;
    pointer-events:none;
    z-index:3;
}

.acta-leaf,.acta-orange-leaf{
    position:absolute;
    display:block;
    border-radius:0 100% 0 100%;
    filter:drop-shadow(0 6px 14px rgba(0,0,0,.10));
    opacity:.9;
}

.acta-leaf{
    background:linear-gradient(135deg,#66BB6A,#2E7D32);
}

.acta-orange-leaf{
    background:linear-gradient(135deg,#FFB74D,#E88918);
}

.acta-leaf-1{
    width:60px;height:60px;
    top:18%;left:4%;
    animation:floatLeaf1 7s ease-in-out infinite;
}

.acta-leaf-2{
    width:44px;height:44px;
    top:35%;left:42%;
    animation:floatLeaf2 6s ease-in-out infinite reverse;
}

.acta-leaf-3{
    width:38px;height:38px;
    top:65%;right:8%;
    animation:floatLeaf3 8s ease-in-out infinite;
}

.acta-orange-1{
    width:34px;height:34px;
    top:22%;left:30%;
    animation:floatLeaf4 7.5s ease-in-out infinite;
}

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

.acta-container{
    position:relative;
    z-index:4;
}

.acta-row{
    min-height:340px;
    align-items:center;
}

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

.acta-left{
    position:relative;
    z-index:5;
}

.acta-title{
    font-family:'Manrope',sans-serif;
    font-size:clamp(30px,3.8vw,50px);
    font-weight:800;
    line-height:1.12;
    letter-spacing:-1.5px;
    color:#0B2C6B;
    margin-bottom:22px;
    max-width:520px;
}

.acta-desc{
    color:#3D4A5C;
    font-size:16px;
    line-height:1.7;
    max-width:520px;
    margin-bottom:36px;
    font-weight:500;
}

/* =========================================================
   BUTTONS
========================================================= */

.acta-buttons{
    display:flex;
    flex-wrap:wrap;
    gap:14px;
    align-items:center;
}

/* Join Our Mission — Green gradient primary */
.btn-join-mission{
    position:relative;
    overflow:hidden;
    display:inline-flex;
    align-items:center;
    gap:10px;
    padding:15px 30px;
    border-radius:50px;
    background:linear-gradient(135deg,#4CAF50,#2E7D32);
    color:#fff;
    font-size:14.5px;
    font-weight:800;
    letter-spacing:.2px;
    text-decoration:none;
    border:none;
    box-shadow:0 14px 30px rgba(76,175,80,.35);
    transition:all .35s ease;
}

.btn-join-mission::before{
    content:"";
    position:absolute;
    top:0;bottom:0;left:-100%;
    width:55%;
    background:linear-gradient(90deg,transparent,rgba(255,255,255,.35),transparent);
    transform:skewX(-20deg);
    transition:left .75s ease;
}

.btn-join-mission:hover::before{left:140%;}

.btn-join-mission:hover{
    color:#fff;
    transform:translateY(-3px);
    box-shadow:0 20px 42px rgba(76,175,80,.50);
}

.btn-join-mission i{
    position:relative;
    z-index:2;
    transition:transform .3s ease;
}

.btn-join-mission:hover i{transform:translateX(5px);}

/* Become a Member — Navy outline pill */
.btn-become-member{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:14px 30px;
    border-radius:50px;
    background:rgba(255,255,255,.95);
    backdrop-filter:blur(10px);
    border:2px solid #1E5BC6;
    color:#1E5BC6;
    font-size:14.5px;
    font-weight:800;
    letter-spacing:.2px;
    text-decoration:none;
    transition:all .35s ease;
    position:relative;
    overflow:hidden;
}

.btn-become-member::before{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(135deg,#1E5BC6,#0B2C6B);
    transform:translateX(-101%);
    transition:transform .4s ease;
    z-index:0;
}

.btn-become-member:hover::before{transform:translateX(0);}

.btn-become-member:hover{
    color:#fff;
    border-color:#1E5BC6;
    transform:translateY(-3px);
    box-shadow:0 14px 30px rgba(30,91,198,.35);
}

.btn-become-member span{position:relative;z-index:2;}

/* Volunteer With Us — Green outline pill */
.btn-volunteer-cta{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:14px 30px;
    border-radius:50px;
    background:rgba(255,255,255,.95);
    backdrop-filter:blur(10px);
    border:2px solid #4CAF50;
    color:#2E7D32;
    font-size:14.5px;
    font-weight:800;
    letter-spacing:.2px;
    text-decoration:none;
    transition:all .35s ease;
    position:relative;
    overflow:hidden;
}

.btn-volunteer-cta::before{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(135deg,#4CAF50,#2E7D32);
    transform:translateX(-101%);
    transition:transform .4s ease;
    z-index:0;
}

.btn-volunteer-cta:hover::before{transform:translateX(0);}

.btn-volunteer-cta:hover{
    color:#fff;
    border-color:#4CAF50;
    transform:translateY(-3px);
    box-shadow:0 14px 30px rgba(76,175,80,.35);
}

.btn-volunteer-cta span{position:relative;z-index:2;}

/* =========================================================
   RIGHT — SCRIPT TEXT (on top of image)
========================================================= */

.acta-right{
    position:relative;
    z-index:5;
    display:flex;
    justify-content:flex-end;
}

.acta-script{
    display:flex;
    flex-direction:column;
    align-items:flex-end;
    gap:2px;
    transform:rotate(-4deg);
    padding-right:10px;
}

.acta-script span{
    font-family:'Brush Script MT','Dancing Script','Great Vibes',cursive;
    font-size:clamp(28px,3.2vw,46px);
    font-weight:700;
    color:#0B2C6B;
    line-height:1.02;
    letter-spacing:.5px;
    text-align:right;
    text-shadow:
        0 2px 10px rgba(255,255,255,.95),
        0 0 24px rgba(255,255,255,.85);
}

.acta-script-underline{
    position:relative;
    color:#0B2C6B;
}

.acta-script-underline::after{
    content:"";
    position:absolute;
    left:4%;bottom:-8px;
    width:92%;height:4px;
    background:linear-gradient(90deg,#FFC107,#FF8C00,#4CAF50);
    border-radius:3px;
    transform:rotate(-3deg);
    box-shadow:0 2px 10px rgba(255,140,0,.45);
}

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

@media(max-width:1199.98px){
    .about-cta-section{padding:90px 0 100px;}
    .acta-title{letter-spacing:-1.2px;}
    .acta-desc{font-size:15.5px;}
    .btn-join-mission,
    .btn-become-member,
    .btn-volunteer-cta{
        padding:14px 24px;
        font-size:14px;
    }
}

@media(max-width:991.98px){

    .about-cta-section{padding:80px 0 90px;}

    /* Overlay — vertical gradient for mobile readability */
    .acta-bg-overlay{
        background:
            linear-gradient(180deg,
                rgba(253,252,247,.94) 0%,
                rgba(253,252,247,.85) 40%,
                rgba(253,252,247,.55) 70%,
                rgba(253,252,247,.30) 100%),
            linear-gradient(0deg,
                rgba(255,193,7,.15) 0%,
                rgba(255,193,7,.05) 40%,
                transparent 70%);
    }

    .acta-row{min-height:auto;}

    /* LEFT centered */
    .acta-left{
        text-align:center;
        margin-bottom:30px;
    }

    .acta-title,
    .acta-desc{
        margin-left:auto;
        margin-right:auto;
    }

    .acta-buttons{justify-content:center;}

    /* RIGHT — script centered */
    .acta-right{justify-content:center;}

    .acta-script{
        align-items:center;
        transform:rotate(-3deg);
        padding-right:0;
    }

    .acta-script span{text-align:center;}
}

@media(max-width:575.98px){

    .about-cta-section{padding:65px 0 75px;}

    .acta-title{letter-spacing:-.7px;}
    .acta-desc{font-size:14.5px;margin-bottom:28px;}

    /* Buttons stacked */
    .acta-buttons{
        flex-direction:column;
        width:100%;
    }

    .btn-join-mission,
    .btn-become-member,
    .btn-volunteer-cta{
        width:100%;
        justify-content:center;
    }

    .acta-script span{
        font-size:26px;
    }

    /* Fewer leaves on mobile */
    .acta-leaf-2,
    .acta-orange-1{
        display:none;
    }
}


 
    /* =========================================================
       PROGRAMS PAGE — HERO SECTION (EXACT REFERENCE MATCH)
    ========================================================= */

    :root{
        --navy:#0B1F3A;
        --blue:#1E5BC6;
        --green:#3FA34D;
        --orange:#FF8C00;
        --gold:#FFC107;
        --teal:#26A69A;
        --cream:#FDFCF7;
    }

    body{
        font-family:'DM Sans',sans-serif;
        background:var(--cream);
        color:#152A45;
        margin:0;
        overflow-x:hidden;
    }

    h1,h2,h3,h4,h5,h6{font-family:'Manrope',sans-serif;}

    /* =========================================================
       HERO SECTION
    ========================================================= */

    .programs-hero-new{
        position:relative;
        padding:110px 0 90px;
        overflow:hidden;
        isolation:isolate;
        background:#FDFCF7;
    }

    /* =========================================================
       GREEN + ORANGE TOPOGRAPHY GLOW (5 Layers)
    ========================================================= */

    .programs-hero-new::before{
        content:"";
        position:absolute;
        inset:0;
        z-index:0;
        pointer-events:none;
        background:
            /* Top-left — green ambient */
            radial-gradient(ellipse 55% 50% at -5% -5%,
                rgba(76,175,80,.32) 0%,
                rgba(76,175,80,.14) 30%,
                rgba(76,175,80,.05) 55%,
                transparent 72%),

            /* Top-right — orange ambient */
            radial-gradient(ellipse 55% 50% at 105% -5%,
                rgba(255,140,0,.32) 0%,
                rgba(255,193,7,.14) 30%,
                rgba(255,140,0,.05) 55%,
                transparent 72%),

            /* Bottom-left — orange ambient */
            radial-gradient(ellipse 60% 55% at -5% 105%,
                rgba(255,140,0,.28) 0%,
                rgba(255,193,7,.13) 35%,
                rgba(255,140,0,.04) 60%,
                transparent 78%),

            /* Bottom-right — green + gold mix */
            radial-gradient(ellipse 65% 60% at 105% 105%,
                rgba(76,175,80,.28) 0%,
                rgba(255,193,7,.15) 25%,
                rgba(255,140,0,.10) 55%,
                transparent 82%),

            /* Center — soft blue tint */
            radial-gradient(ellipse 90% 75% at 50% 50%,
                rgba(232,240,252,.50) 0%,
                rgba(232,240,252,.18) 40%,
                transparent 70%);
    }

    /* Soft vignette overlay */
    .programs-hero-new::after{
        content:"";
        position:absolute;
        inset:0;
        z-index:0;
        pointer-events:none;
        background:radial-gradient(ellipse 120% 90% at 50% 50%,
            rgba(253,252,247,0) 0%,
            rgba(253,252,247,.15) 60%,
            rgba(253,252,247,.55) 100%);
    }

    /* Organic blurred curves */
    .phn-bg{
        position:absolute;
        inset:0;
        pointer-events:none;
        z-index:1;
        overflow:hidden;
    }

    .phn-bg::before{
        content:"";
        position:absolute;
        top:-25%;left:-20%;
        width:75%;height:115%;
        background:radial-gradient(ellipse at 30% 40%,
            rgba(76,175,80,.24) 0%,
            rgba(76,175,80,.10) 40%,
            transparent 70%);
        border-radius:50% 40% 60% 45% / 55% 60% 40% 50%;
        filter:blur(55px);
        transform:rotate(-15deg);
        opacity:.95;
    }

    .phn-bg::after{
        content:"";
        position:absolute;
        bottom:-35%;right:-25%;
        width:88%;height:125%;
        background:radial-gradient(ellipse at 60% 60%,
            rgba(255,140,0,.24) 0%,
            rgba(255,193,7,.12) 30%,
            rgba(76,175,80,.10) 60%,
            transparent 80%);
        border-radius:45% 55% 40% 60% / 60% 45% 55% 40%;
        filter:blur(60px);
        transform:rotate(-12deg);
        opacity:.95;
    }

    /* =========================================================
       FLOATING LEAVES
    ========================================================= */

    .phn-leaf,
    .phn-orange-leaf{
        position:absolute;
        display:block;
        border-radius:0 100% 0 100%;
        filter:drop-shadow(0 6px 14px rgba(0,0,0,.12));
        opacity:.9;
        z-index:2;
    }

    .phn-leaf{background:linear-gradient(135deg,#66BB6A,#2E7D32);}
    .phn-orange-leaf{background:linear-gradient(135deg,#FFB74D,#E88918);}

    .phn-leaf-1{
        width:60px;height:60px;
        top:10%;left:1.5%;
        animation:floatLeafA 7s ease-in-out infinite;
    }
    .phn-leaf-2{
        width:46px;height:46px;
        bottom:12%;left:3%;
        animation:floatLeafB 8s ease-in-out infinite reverse;
    }
    .phn-orange-1{
        width:36px;height:36px;
        top:60%;left:2%;
        animation:floatLeafC 7.5s ease-in-out infinite;
    }

    @keyframes floatLeafA{
        0%,100%{transform:translateY(0) rotate(-30deg);}
        50%{transform:translateY(-15px) rotate(-20deg);}
    }
    @keyframes floatLeafB{
        0%,100%{transform:translateY(0) rotate(20deg);}
        50%{transform:translateY(-12px) rotate(10deg);}
    }
    @keyframes floatLeafC{
        0%,100%{transform:translateY(0) rotate(30deg);}
        50%{transform:translateY(-10px) rotate(40deg);}
    }

    /* Orange dot pattern */
    .phn-dot{
        position:absolute;
        width:5px;height:5px;
        border-radius:50%;
        background:rgba(255,140,0,.55);
        box-shadow:0 0 8px rgba(255,140,0,.4);
        z-index:2;
    }
    .phn-dot-1{top:8%;right:6%;}
    .phn-dot-2{top:10%;right:8%;}
    .phn-dot-3{top:12%;right:6%;}
    .phn-dot-4{top:8%;right:10%;}

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

    .phn-left{position:relative;z-index:3;}

    /* Breadcrumb */
    .phn-breadcrumb{
        display:inline-flex;
        align-items:center;
        gap:8px;
        margin-bottom:24px;
        padding:7px 16px;
        border-radius:50px;
        background:rgba(255,255,255,.75);
        backdrop-filter:blur(10px);
        -webkit-backdrop-filter:blur(10px);
        border:1px solid rgba(255,255,255,.9);
        box-shadow:0 4px 14px rgba(11,31,58,.06);
        font-size:12.5px;
        font-weight:600;
    }

    .phn-breadcrumb a{
        color:#6A7A90;
        text-decoration:none;
        transition:color .3s ease;
    }
    .phn-breadcrumb a:hover{color:var(--blue);}
    .phn-breadcrumb i{color:#B8C5D6;font-size:10px;}
    .phn-breadcrumb span{color:var(--navy);font-weight:700;}

    /* Label */
    .phn-label{
        display:inline-flex;
        align-items:center;
        gap:10px;
        color:var(--green);
        font-size:12px;
        font-weight:800;
        letter-spacing:3.5px;
        text-transform:uppercase;
        margin-bottom:18px;
    }

    .phn-label-dot{
        width:8px;height:8px;
        border-radius:50%;
        background:var(--green);
        box-shadow:0 0 0 4px rgba(76,175,80,.15);
    }

    .phn-label-line{
        display:inline-block;
        width:28px;height:2px;
        background:linear-gradient(90deg,var(--green),var(--gold));
        border-radius:2px;
    }

    /* ============ TITLE — MULTI-COLOR ============ */
    .phn-title{
        font-family:'Manrope',sans-serif;
        font-size:clamp(34px,4.6vw,58px);
        font-weight:800;
        line-height:1.08;
        letter-spacing:-1.8px;
        color:var(--navy);
        margin-bottom:22px;
    }

    .phn-title-line{
        display:flex;
        flex-wrap:wrap;
        gap:14px;
        margin-top:6px;
    }

    /* Hope — Blue */
    .word-blue{
        color:var(--blue);
    }

    /* Into — Green */
    .word-green{
        color:var(--green);
    }

    /* Action — Orange gradient */
    .word-orange{
        background:linear-gradient(135deg,#FF8C00 0%,#FFC107 100%);
        -webkit-background-clip:text;
        background-clip:text;
        color:transparent;
        -webkit-text-fill-color:transparent;
    }

    /* Description */
    .phn-desc{
        color:#5A6A82;
        font-size:15.5px;
        line-height:1.75;
        max-width:540px;
        margin-bottom:30px;
        font-weight:400;
    }

    /* =========================================================
       INLINE STATS
    ========================================================= */

    .phn-stats{
        display:flex;
        flex-wrap:wrap;
        gap:26px;
        margin-bottom:34px;
        padding-bottom:30px;
        border-bottom:1px solid rgba(11,31,58,.08);
    }

    .phn-stat{
        display:flex;
        align-items:center;
        gap:12px;
        transition:transform .35s ease;
        cursor:pointer;
    }

    .phn-stat:hover{transform:translateY(-3px);}

    .phn-stat-icon{
        width:44px;height:44px;
        display:flex;
        align-items:center;
        justify-content:center;
        border-radius:50%;
        color:#fff;
        font-size:18px;
        flex-shrink:0;
        transition:transform .4s ease;
        box-shadow:0 8px 18px rgba(0,0,0,.12);
    }

    .phn-stat:hover .phn-stat-icon{
        transform:scale(1.10) rotate(-6deg);
    }

    .icon-orange{
        background:linear-gradient(135deg,#FFB74D,#E88918);
        box-shadow:0 8px 18px rgba(255,140,0,.30);
    }
    .icon-blue{
        background:linear-gradient(135deg,#1E5BC6,#0B2C6B);
        box-shadow:0 8px 18px rgba(30,91,198,.30);
    }
    .icon-green{
        background:linear-gradient(135deg,#66BB6A,#2E7D32);
        box-shadow:0 8px 18px rgba(76,175,80,.30);
    }

    .phn-stat-text{
        display:flex;
        flex-direction:column;
        line-height:1.15;
    }

    .phn-stat-text strong{
        font-family:'Manrope',sans-serif;
        font-size:20px;
        font-weight:800;
        color:var(--navy);
        letter-spacing:-.4px;
    }

    .phn-stat-text small{
        font-size:11px;
        color:#6A7A90;
        font-weight:600;
        letter-spacing:.2px;
        margin-top:3px;
    }

    /* =========================================================
       BUTTONS
    ========================================================= */

    .phn-buttons{
        display:flex;
        flex-wrap:wrap;
        gap:14px;
        align-items:center;
    }

    .btn-explore-programs{
        position:relative;
        overflow:hidden;
        display:inline-flex;
        align-items:center;
        gap:10px;
        padding:16px 32px;
        border-radius:50px;
        background:linear-gradient(135deg,#1E5BC6,#0B2C6B);
        color:#fff;
        font-size:14.5px;
        font-weight:800;
        letter-spacing:.2px;
        text-decoration:none;
        border:none;
        box-shadow:0 14px 30px rgba(30,91,198,.32);
        transition:all .35s ease;
    }

    .btn-explore-programs::before{
        content:"";
        position:absolute;
        top:0;bottom:0;left:-100%;
        width:55%;
        background:linear-gradient(90deg,transparent,rgba(255,255,255,.35),transparent);
        transform:skewX(-20deg);
        transition:left .75s ease;
    }

    .btn-explore-programs:hover::before{left:140%;}

    .btn-explore-programs:hover{
        color:#fff;
        transform:translateY(-3px);
        box-shadow:0 20px 40px rgba(30,91,198,.48);
    }

    .btn-explore-programs i{
        position:relative;z-index:2;
        transition:transform .3s ease;
    }
    .btn-explore-programs:hover i{transform:translateX(5px);}

    .btn-upcoming-events{
        display:inline-flex;
        align-items:center;
        gap:10px;
        padding:15px 30px;
        border-radius:50px;
        background:rgba(255,255,255,.85);
        backdrop-filter:blur(10px);
        border:2px solid var(--blue);
        color:var(--blue);
        font-size:14.5px;
        font-weight:800;
        letter-spacing:.2px;
        text-decoration:none;
        transition:all .35s ease;
        position:relative;
        overflow:hidden;
    }

    .btn-upcoming-events::before{
        content:"";
        position:absolute;inset:0;
        background:linear-gradient(135deg,#1E5BC6,#0B2C6B);
        transform:translateX(-101%);
        transition:transform .4s ease;
        z-index:0;
    }

    .btn-upcoming-events:hover::before{transform:translateX(0);}

    .btn-upcoming-events:hover{
        color:#fff;
        border-color:var(--blue);
        transform:translateY(-3px);
        box-shadow:0 14px 30px rgba(30,91,198,.32);
    }

    .btn-upcoming-events i,
    .btn-upcoming-events span{position:relative;z-index:2;}

    /* =========================================================
       RIGHT VISUAL — OVERLAPPING IMAGES
    ========================================================= */

    .phn-right{position:relative;z-index:3;}

    .phn-visual{
        position:relative;
        width:100%;
        max-width:620px;
        margin-left:auto;
        aspect-ratio:1/1;
    }

    /* ============ ORANGE CIRCLE (top-left, behind main image) ============ */
    .phn-circle-orange{
        position:absolute;
        top:-2%;
        left:-4%;
        width:150px;
        height:150px;
        border-radius:50%;
        background:linear-gradient(135deg,#FFB74D,#E88918);
        opacity:.95;
        z-index:0;
        animation:circleFloat 6s ease-in-out infinite;
    }

    /* ============ BLUE CIRCLE (top-right, behind doctor image) ============ */
    .phn-circle-blue{
        position:absolute;
        top:-4%;
        right:-2%;
        width:170px;
        height:170px;
        border-radius:50%;
        background:linear-gradient(135deg,#1E5BC6,#0B2C6B);
        opacity:.9;
        z-index:0;
        animation:circleFloat 7s ease-in-out infinite .5s;
    }

    /* Teal swoosh behind bottom-right */
    .phn-circle-teal{
        position:absolute;
        bottom:2%;
        right:-4%;
        width:130px;
        height:130px;
        border-radius:50%;
        background:
            radial-gradient(circle at 30% 30%,
                rgba(38,166,154,.85) 0%,
                rgba(38,166,154,.40) 60%,
                transparent 80%);
        filter:blur(2px);
        z-index:0;
        animation:circleFloat 8s ease-in-out infinite 1s;
    }

    @keyframes circleFloat{
        0%,100%{transform:translateY(0) scale(1);}
        50%{transform:translateY(-10px) scale(1.06);}
    }

    /* ============ IMAGES ============ */

    .phn-img{
        position:absolute;
        overflow:hidden;
        background:#fff;
        padding:6px;
        box-shadow:
            0 20px 45px rgba(11,31,58,.18),
            0 6px 15px rgba(11,31,58,.08);
        transition:all .5s cubic-bezier(.2,.8,.2,1);
        cursor:pointer;
    }

    .phn-img img{
        width:100%;
        height:100%;
        object-fit:cover;
        display:block;
        border-radius:inherit;
        transition:transform .6s ease;
    }

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

    /* MAIN IMAGE — organic curve */
    .phn-img-main{
        z-index:2;
        top:8%;
        left:2%;
        width:72%;
        height:76%;
        border-radius:55% 45% 50% 50% / 55% 55% 45% 45%;
        padding:0;
        animation:mainImgFloat 8s ease-in-out infinite;
    }

    .phn-img-main img{border-radius:inherit;}

    /* TOP-RIGHT IMAGE — Doctor (rounded rectangle) */
    .phn-img-top{
        z-index:4;
        top:2%;
        right:0;
        width:44%;
        height:32%;
        border-radius:20px;
        animation:smallImgFloat 6s ease-in-out infinite .3s;
    }

    .phn-img-top img{border-radius:14px;}

    /* BOTTOM-RIGHT IMAGE — Community (ORGANIC CURVED SHAPE from reference) */
    .phn-img-bottom{
        z-index:4;
        bottom:6%;
        right:0;
        width:46%;
        height:38%;

        /* 🔥 ORGANIC CURVE — Reference jaisa */
        /* Left side big curve, right side slightly rounded */
        border-radius:55% 20px 20px 55% / 50% 20px 20px 50%;
        animation:smallImgFloat 7s ease-in-out infinite .7s;
    }

    .phn-img-bottom img{
        border-radius:inherit;
        border-top-right-radius:14px;
        border-bottom-right-radius:14px;
    }

    /* Hover */
    .phn-img:hover{
        transform:translateY(-8px) scale(1.03);
        z-index:10;
        box-shadow:
            0 30px 60px rgba(11,31,58,.28),
            0 12px 28px rgba(11,31,58,.14);
    }

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

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

    /* Green leaf decorations */
    .phn-leaf-deco{
        position:absolute;
        z-index:5;
        display:block;
        border-radius:0 100% 0 100%;
        background:linear-gradient(135deg,#66BB6A,#2E7D32);
        filter:drop-shadow(0 6px 12px rgba(0,0,0,.15));
    }

    .phn-leaf-green{
        width:56px;height:56px;
        bottom:14%;left:2%;
        animation:leafDecoA 6s ease-in-out infinite;
    }

    .phn-leaf-green-2{
        width:36px;height:36px;
        top:6%;right:14%;
        animation:leafDecoB 5.5s ease-in-out infinite reverse;
    }

    @keyframes leafDecoA{
        0%,100%{transform:rotate(25deg) translateY(0);}
        50%{transform:rotate(35deg) translateY(-8px);}
    }
    @keyframes leafDecoB{
        0%,100%{transform:rotate(-20deg) translateY(0);}
        50%{transform:rotate(-30deg) translateY(-8px);}
    }

    /* =========================================================
       SCRIPT TEXT (bottom-left)
    ========================================================= */

    .phn-script{
        position:absolute;
        bottom:0;
        left:0;
        z-index:6;
        display:flex;
        flex-direction:column;
        gap:1px;
        transform:rotate(-3deg);
        padding-left:6px;
    }

    .phn-script span{
        font-family:'Brush Script MT','Dancing Script','Great Vibes',cursive;
        font-size:clamp(16px,1.5vw,20px);
        font-weight:700;
        color:var(--navy);
        line-height:1.15;
        letter-spacing:.3px;
        text-shadow:
            0 2px 8px rgba(255,255,255,1),
            0 0 16px rgba(255,255,255,.95);
    }

    .phn-script-arrow{
        position:absolute;
        right:-26px;
        bottom:-6px;
        font-size:18px;
        color:var(--blue);
        transform:rotate(-25deg);
        animation:arrowPulse 2.2s ease-in-out infinite;
    }

    @keyframes arrowPulse{
        0%,100%{transform:rotate(-25deg) translate(0,0);}
        50%{transform:rotate(-25deg) translate(4px,-2px);}
    }

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

    @media(max-width:1199.98px){
        .programs-hero-new{padding:95px 0 80px;}
        .phn-title{letter-spacing:-1.4px;}
        .phn-visual{max-width:560px;}
    }

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

        .programs-hero-new{padding:85px 0 75px;}

        /* 🔥 REORDER: Image FIRST */
        .phn-row{
            display:flex;
            flex-direction:column;
        }

        .phn-right{
            order:1;
            width:100%;
            margin-bottom:50px;
        }

        .phn-left{
            order:2;
            width:100%;
            text-align:center;
        }

        .phn-breadcrumb{justify-content:center;}
        .phn-label{justify-content:center;}
        .phn-title{text-align:center;}
        .phn-title-line{justify-content:center;}
        .phn-desc{margin-left:auto;margin-right:auto;text-align:center;}
        .phn-stats{justify-content:center;}
        .phn-buttons{justify-content:center;}

        .phn-visual{max-width:520px;margin:0 auto;}

        .phn-script{
            left:auto;
            right:8%;
            bottom:-4%;
        }
    }

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

        .programs-hero-new{padding:70px 0 65px;}

        .phn-breadcrumb{font-size:11.5px;padding:6px 14px;margin-bottom:20px;}
        .phn-label{font-size:11px;letter-spacing:2.5px;}

        .phn-title{letter-spacing:-1px;}
        .phn-title-line{gap:8px;justify-content:center;}

        .phn-desc{font-size:14.5px;}

        .phn-stats{gap:14px;justify-content:center;padding-bottom:24px;}
        .phn-stat{gap:10px;}
        .phn-stat-icon{width:40px;height:40px;font-size:16px;}
        .phn-stat-text strong{font-size:17px;}
        .phn-stat-text small{font-size:10.5px;}

        .phn-buttons{flex-direction:column;width:100%;}
        .btn-explore-programs,
        .btn-upcoming-events{width:100%;justify-content:center;}

        /* Visual */
        .phn-visual{max-width:360px;}

        .phn-img{padding:4px;}
        .phn-img-main{width:76%;height:78%;}
        .phn-img-top{width:44%;height:32%;border-radius:16px;}
        .phn-img-top img{border-radius:12px;}
        .phn-img-bottom{
            width:48%;height:38%;
            border-radius:50% 14px 14px 50% / 45% 14px 14px 45%;
        }
        .phn-img-bottom img{
            border-radius:inherit;
            border-top-right-radius:10px;
            border-bottom-right-radius:10px;
        }

        .phn-circle-orange{width:100px;height:100px;}
        .phn-circle-blue{width:110px;height:110px;}
        .phn-circle-teal{width:90px;height:90px;}

        .phn-leaf-green{width:38px;height:38px;}
        .phn-leaf-green-2{width:26px;height:26px;}

        .phn-script{
            right:6%;
            bottom:-6%;
            transform:rotate(-3deg) scale(.88);
        }
        .phn-script span{font-size:16px;}
        .phn-script-arrow{right:-22px;font-size:15px;}
    }
   

   
        /* =========================================================
   EXPLORE OUR WORK — FEATURED PROGRAM
========================================================= */

.explore-work-section{
    position:relative;
    padding:60px 0 110px;
    overflow:hidden;
    isolation:isolate;
    background:#FDFCF7;
}

/* =========================================================
   AMBIENT GLOW (Green + Orange Topography)
========================================================= */

.explore-work-section::before{
    content:"";
    position:absolute;inset:0;z-index:0;pointer-events:none;
    background:
        radial-gradient(ellipse 55% 45% at -5% -5%,
            rgba(76,175,80,.28) 0%, rgba(76,175,80,.11) 32%, transparent 72%),
        radial-gradient(ellipse 55% 45% at 105% -5%,
            rgba(255,140,0,.30) 0%, rgba(255,193,7,.12) 32%, transparent 72%),
        radial-gradient(ellipse 60% 50% at -5% 105%,
            rgba(255,140,0,.26) 0%, rgba(255,193,7,.11) 35%, transparent 75%),
        radial-gradient(ellipse 65% 55% at 105% 105%,
            rgba(76,175,80,.26) 0%, rgba(255,193,7,.12) 25%,
            rgba(255,140,0,.10) 55%, transparent 82%),
        radial-gradient(ellipse 90% 70% at 50% 50%,
            rgba(232,240,252,.42) 0%, rgba(232,240,252,.14) 40%, transparent 70%);
}

.explore-work-section::after{
    content:"";
    position:absolute;inset:0;z-index:0;pointer-events:none;
    background:radial-gradient(ellipse 120% 90% at 50% 50%,
        rgba(253,252,247,0) 0%, rgba(253,252,247,.15) 60%, rgba(253,252,247,.55) 100%);
}

.ew-bg{
    position:absolute;inset:0;pointer-events:none;z-index:1;overflow:hidden;
}

.ew-bg::before{
    content:"";position:absolute;top:-25%;left:-20%;
    width:70%;height:110%;
    background:radial-gradient(ellipse at 30% 40%,
        rgba(76,175,80,.20) 0%, rgba(76,175,80,.08) 40%, transparent 70%);
    border-radius:50% 40% 60% 45% / 55% 60% 40% 50%;
    filter:blur(50px);transform:rotate(-15deg);opacity:.95;
}

.ew-bg::after{
    content:"";position:absolute;bottom:-35%;right:-25%;
    width:85%;height:120%;
    background:radial-gradient(ellipse at 60% 60%,
        rgba(255,140,0,.20) 0%, rgba(255,193,7,.10) 30%,
        rgba(76,175,80,.08) 60%, transparent 80%);
    border-radius:45% 55% 40% 60% / 60% 45% 55% 40%;
    filter:blur(55px);transform:rotate(-12deg);opacity:.95;
}

/* Leaves */
.ew-leaf,.ew-orange-leaf{
    position:absolute;display:block;
    border-radius:0 100% 0 100%;
    filter:drop-shadow(0 6px 14px rgba(0,0,0,.10));
    opacity:.9;z-index:2;
}
.ew-leaf{background:linear-gradient(135deg,#66BB6A,#2E7D32);}
.ew-orange-leaf{background:linear-gradient(135deg,#FFB74D,#E88918);}

.ew-leaf-1{width:56px;height:56px;top:8%;left:1.5%;animation:floatLeafA 7s ease-in-out infinite;}
.ew-leaf-2{width:44px;height:44px;bottom:12%;right:2%;animation:floatLeafB 8s ease-in-out infinite reverse;}
.ew-orange-1{width:34px;height:34px;top:55%;left:2.5%;animation:floatLeafC 7.5s ease-in-out infinite;}

.ew-dot{
    position:absolute;width:5px;height:5px;border-radius:50%;
    background:rgba(255,140,0,.55);
    box-shadow:0 0 8px rgba(255,140,0,.4);
    z-index:2;
}
.ew-dot-1{top:6%;right:6%;}
.ew-dot-2{top:8%;right:8%;}

/* =========================================================
   TOP — FILTER BAR
========================================================= */

.ew-filter-bar{
    position:relative;
    z-index:3;
    display:flex;
    align-items:center;
    gap:24px;

    padding:18px 26px;
    margin-bottom:40px;

    /* Glass card */
    background:linear-gradient(135deg,rgba(255,255,255,.96),rgba(255,255,255,.86));
    backdrop-filter:blur(20px) saturate(180%);
    -webkit-backdrop-filter:blur(20px) saturate(180%);

    border:1px solid rgba(255,255,255,.95);
    border-radius:22px;
    box-shadow:
        0 22px 50px rgba(11,31,58,.10),
        inset 0 1px 0 rgba(255,255,255,.95);
}

/* Gradient border ring */
.ew-filter-bar::before{
    content:"";
    position:absolute;
    inset:0;
    border-radius:22px;
    padding:1.5px;
    background:linear-gradient(135deg,
        rgba(76,175,80,.35),
        rgba(255,193,7,.30),
        rgba(255,140,0,.35),
        rgba(30,91,198,.25));
    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    -webkit-mask-composite:xor;
    mask-composite:exclude;
    pointer-events:none;
}

/* Filter label */
.ew-filter-label{
    display:flex;
    align-items:center;
    gap:10px;
    flex-shrink:0;
    padding-right:24px;
    border-right:1px solid rgba(11,31,58,.08);
}

.ew-label-dot{
    width:8px;
    height:8px;
    border-radius:50%;
    background:linear-gradient(135deg,#4CAF50,#8BC34A);
    box-shadow:0 0 0 4px rgba(76,175,80,.15);
}

.ew-label-text{
    color:var(--navy,#0B1F3A);
    font-size:12px;
    font-weight:800;
    letter-spacing:3px;
    text-transform:uppercase;
    white-space:nowrap;
}

/* Pills scroll container */
.ew-pills-scroll{
    flex:1;
    overflow-x:auto;
    scrollbar-width:none;
    padding:4px 0;
}

.ew-pills-scroll::-webkit-scrollbar{display:none;}

.ew-pills{
    display:flex;
    gap:10px;
    min-width:max-content;
}

/* Individual pill */
.ew-pill{
    display:inline-flex;
    align-items:center;
    gap:10px;

    padding:11px 20px;
    border-radius:14px;

    background:#fff;
    border:1.5px solid rgba(11,31,58,.08);
    color:#2E425E;

    font-size:13.5px;
    font-weight:700;
    letter-spacing:.1px;
    cursor:pointer;
    white-space:nowrap;

    transition:all .35s cubic-bezier(.2,.8,.2,1);

    font-family:'DM Sans',sans-serif;
    box-shadow:0 3px 10px rgba(11,31,58,.04);
}

.ew-pill:hover{
    transform:translateY(-2px);
    border-color:rgba(30,91,198,.30);
    box-shadow:0 8px 20px rgba(11,31,58,.10);
}

/* Active pill — Navy gradient */
.ew-pill.active{
    background:linear-gradient(135deg,#0B1F3A,#1E5BC6);
    border-color:transparent;
    color:#fff;
    box-shadow:
        0 10px 26px rgba(30,91,198,.35),
        inset 0 1px 0 rgba(255,255,255,.15);
}

.ew-pill.active .ew-pill-icon{
    background:rgba(255,255,255,.22) !important;
    color:#fff !important;
    box-shadow:none;
}

/* Pill icon */
.ew-pill-icon{
    width:30px;
    height:30px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:9px;
    color:#fff;
    font-size:14px;
    flex-shrink:0;
    transition:all .35s ease;
    box-shadow:0 4px 10px rgba(0,0,0,.10);
}

/* Icon colors */
.icon-navy{background:linear-gradient(135deg,#0B1F3A,#1E5BC6);}
.icon-orange{background:linear-gradient(135deg,#FFB74D,#E88918);box-shadow:0 4px 10px rgba(255,140,0,.25);}
.icon-green{background:linear-gradient(135deg,#66BB6A,#2E7D32);box-shadow:0 4px 10px rgba(76,175,80,.25);}
.icon-blue{background:linear-gradient(135deg,#1E5BC6,#0B2C6B);box-shadow:0 4px 10px rgba(30,91,198,.25);}
.icon-gold{background:linear-gradient(135deg,#FFC107,#FF8C00);box-shadow:0 4px 10px rgba(255,193,7,.25);}
.icon-teal{background:linear-gradient(135deg,#26A69A,#00796B);box-shadow:0 4px 10px rgba(38,166,154,.25);}

.ew-pill:hover .ew-pill-icon{transform:scale(1.08) rotate(-6deg);}

/* =========================================================
   FEATURED CARD
========================================================= */

.ew-featured-card{
    position:relative;
    z-index:3;

    padding:20px;
    border-radius:32px;

    /* 🔥 DARK NAVY BASE with green/orange accent (theme match) */
    background:
        linear-gradient(135deg,
            #0B1F3A 0%,
            #0F2A50 30%,
            #123264 55%,
            #1E5BC6 100%);

    box-shadow:
        0 40px 90px rgba(11,31,58,.30),
        0 15px 35px rgba(11,31,58,.18);

    overflow:hidden;
}

/* Inner ambient glows (green + orange) */
.ew-card-glow{
    position:absolute;
    border-radius:50%;
    pointer-events:none;
    z-index:1;
    filter:blur(80px);
    opacity:.55;
}

.ew-glow-green{
    width:400px;
    height:400px;
    background:radial-gradient(circle, rgba(76,175,80,.55) 0%, transparent 70%);
    left:-150px;
    bottom:-150px;
}

.ew-glow-orange{
    width:420px;
    height:420px;
    background:radial-gradient(circle, rgba(255,140,0,.50) 0%, transparent 70%);
    right:-180px;
    top:-180px;
}

/* Row */
.ew-card-row{
    position:relative;
    z-index:2;
    min-height:360px;
}

/* =========================================================
   LEFT — IMAGE
========================================================= */

.ew-card-image{
    position:relative;
    padding:0;
    z-index:2;
}

.ew-image-wrap{
    position:relative;
    width:100%;
    height:100%;
    min-height:360px;
    border-radius:24px;
    overflow:hidden;

    background:#fff;
    box-shadow:
        0 20px 45px rgba(0,0,0,.30),
        inset 0 1px 0 rgba(255,255,255,.10);
}

.ew-image-wrap img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
    transition:transform .8s cubic-bezier(.2,.8,.2,1);
}

.ew-featured-card:hover .ew-image-wrap img{
    transform:scale(1.05);
}

/* Featured badge — top-left */
.ew-featured-badge{
    position:absolute;
    top:20px;
    left:20px;
    z-index:3;

    display:inline-flex;
    align-items:center;
    gap:7px;

    padding:9px 16px;
    border-radius:50px;

    background:linear-gradient(135deg,#FF8C00,#FFC107);
    color:#fff;
    font-size:10.5px;
    font-weight:800;
    letter-spacing:1.5px;
    text-transform:uppercase;

    box-shadow:0 8px 22px rgba(255,140,0,.45);
}

.ew-featured-badge i{
    font-size:12px;
    animation:heartBeat 2s ease-in-out infinite;
}

@keyframes heartBeat{
    0%,100%{transform:scale(1);}
    50%{transform:scale(1.20);}
}

/* =========================================================
   RIGHT — CONTENT
========================================================= */

.ew-card-content{
    position:relative;
    z-index:3;
    padding:30px 40px 30px 44px;

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

/* Category pill */
.ew-cat-pill{
    display:inline-flex;
    align-items:center;
    gap:8px;

    padding:7px 16px;
    border-radius:50px;

    background:rgba(76,175,80,.18);
    border:1px solid rgba(139,195,74,.35);
    color:#B8E986;

    font-size:11px;
    font-weight:800;
    letter-spacing:1.8px;
    text-transform:uppercase;

    margin-bottom:20px;
    width:fit-content;
}

.ew-cat-pill i{
    font-size:12px;
    color:#B8E986;
}

/* Title */
.ew-title{
    font-family:'Manrope',sans-serif;
    font-size:clamp(28px,3.2vw,42px);
    font-weight:800;
    line-height:1.12;
    letter-spacing:-1.2px;
    color:#fff;
    margin-bottom:18px;
}

/* Description */
.ew-desc{
    color:rgba(255,255,255,.75);
    font-size:15px;
    line-height:1.7;
    margin-bottom:30px;
    font-weight:400;
    max-width:520px;
}

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

.ew-stats{
    display:flex;
    align-items:center;
    gap:22px;
    margin-bottom:30px;
    flex-wrap:wrap;
}

.ew-stat{
    display:flex;
    align-items:center;
    gap:12px;
    transition:transform .35s ease;
    cursor:pointer;
}

.ew-stat:hover{transform:translateY(-3px);}

.ew-stat-icon{
    width:44px;
    height:44px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    color:#fff;
    font-size:18px;
    flex-shrink:0;
    transition:transform .4s ease;
    box-shadow:0 8px 20px rgba(0,0,0,.30);
    border:1.5px solid rgba(255,255,255,.15);
}

.ew-stat:hover .ew-stat-icon{
    transform:scale(1.10) rotate(-6deg);
}

.ew-stat-text{
    display:flex;
    flex-direction:column;
    line-height:1.15;
}

.ew-stat-text strong{
    font-family:'Manrope',sans-serif;
    font-size:20px;
    font-weight:800;
    color:#FFC107;
    letter-spacing:-.4px;
}

.ew-stat-text small{
    font-size:11px;
    color:rgba(255,255,255,.70);
    font-weight:600;
    letter-spacing:.2px;
    margin-top:3px;
}

.ew-stat-divider{
    width:1px;
    height:40px;
    background:linear-gradient(180deg,transparent,rgba(255,255,255,.20),transparent);
}

/* =========================================================
   FOOTER — CTA + ARROWS
========================================================= */

.ew-footer{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
    flex-wrap:wrap;
}

/* Explore Program button — Gold gradient */
.btn-explore-program{
    position:relative;
    overflow:hidden;
    display:inline-flex;
    align-items:center;
    gap:10px;

    padding:15px 30px;
    border-radius:50px;

    background:linear-gradient(135deg,#FFC107,#FF8C00);
    color:#0B1F3A;

    font-size:14.5px;
    font-weight:800;
    letter-spacing:.2px;
    text-decoration:none;
    border:none;

    box-shadow:0 14px 30px rgba(255,140,0,.40);
    transition:all .35s ease;
}

.btn-explore-program::before{
    content:"";
    position:absolute;
    top:0;bottom:0;left:-100%;
    width:55%;
    background:linear-gradient(90deg,transparent,rgba(255,255,255,.55),transparent);
    transform:skewX(-20deg);
    transition:left .75s ease;
}

.btn-explore-program:hover::before{left:140%;}

.btn-explore-program:hover{
    color:#0B1F3A;
    transform:translateY(-3px);
    box-shadow:0 20px 42px rgba(255,140,0,.55);
}

.btn-explore-program i{
    position:relative;z-index:2;
    transition:transform .3s ease;
}

.btn-explore-program:hover i{transform:translateX(5px);}

/* Arrows */
.ew-arrows{
    display:flex;
    gap:10px;
}

.ew-arrow{
    width:46px;
    height:46px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;

    background:rgba(255,255,255,.08);
    border:1.5px solid rgba(255,255,255,.25);
    color:#fff;
    font-size:18px;
    cursor:pointer;

    transition:all .35s ease;
    backdrop-filter:blur(10px);
}

.ew-arrow:hover{
    background:rgba(255,255,255,.20);
    border-color:#FFC107;
    color:#FFC107;
    transform:translateY(-2px);
}

/* Progress dots */
.ew-progress-dots{
    display:flex;
    gap:8px;
    margin-top:24px;
}

.ew-dot{
    width:8px;
    height:8px;
    border-radius:50%;
    background:rgba(255,255,255,.25);
    transition:all .35s ease;
    cursor:pointer;
}

.ew-dot.active{
    width:24px;
    border-radius:5px;
    background:linear-gradient(90deg,#FFC107,#FF8C00);
    box-shadow:0 0 12px rgba(255,193,7,.55);
}

/* Decorative leaves inside card */
.ew-leaf-card{
    position:absolute;
    display:block;
    border-radius:0 100% 0 100%;
    background:linear-gradient(135deg,#66BB6A,#2E7D32);
    filter:drop-shadow(0 6px 14px rgba(0,0,0,.30));
    z-index:2;
    opacity:.85;
}

.ew-leaf-card-1{
    width:70px;height:70px;
    bottom:2%;right:2%;
    transform:rotate(20deg);
    animation:floatLeafA 7s ease-in-out infinite;
}

.ew-leaf-card-2{
    width:44px;height:44px;
    bottom:14%;right:8%;
    transform:rotate(-15deg);
    animation:floatLeafB 6s ease-in-out infinite reverse;
}

/* =========================================================
   ANIMATIONS
========================================================= */

@keyframes floatLeafA{
    0%,100%{transform:translateY(0) rotate(-30deg);}
    50%{transform:translateY(-15px) rotate(-20deg);}
}
@keyframes floatLeafB{
    0%,100%{transform:translateY(0) rotate(20deg);}
    50%{transform:translateY(-12px) rotate(10deg);}
}
@keyframes floatLeafC{
    0%,100%{transform:translateY(0) rotate(30deg);}
    50%{transform:translateY(-10px) rotate(40deg);}
}

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

@media(max-width:1199.98px){
    .explore-work-section{padding:50px 0 100px;}
    .ew-card-content{padding:28px 32px 28px 36px;}
    .ew-stats{gap:18px;}
    .ew-stat-text strong{font-size:18px;}
}

/* Tablet */
@media(max-width:991.98px){

    .explore-work-section{padding:50px 0 90px;}

    /* Filter bar stacked */
    .ew-filter-bar{
        flex-direction:column;
        align-items:stretch;
        gap:16px;
        padding:18px;
        border-radius:20px;
    }

    .ew-filter-label{
        padding-right:0;
        padding-bottom:14px;
        border-right:0;
        border-bottom:1px solid rgba(11,31,58,.08);
        justify-content:center;
    }

    .ew-pills-scroll{
        overflow-x:auto;
        margin:0 -18px;
        padding:4px 18px;
    }

    /* Card stacked */
    .ew-card-row{
        display:flex;
        flex-direction:column;
    }

    .ew-image-wrap{min-height:280px;border-radius:20px;}

    .ew-card-content{
        padding:28px 26px 26px;
    }

    .ew-title{font-size:clamp(26px,4vw,34px);}
    .ew-desc{font-size:14.5px;}

    .ew-stats{gap:16px;margin-bottom:26px;}
    .ew-stat-icon{width:40px;height:40px;font-size:16px;}
    .ew-stat-text strong{font-size:17px;}
    .ew-stat-text small{font-size:10.5px;}

    .ew-footer{
        flex-direction:column-reverse;
        align-items:flex-start;
        gap:18px;
    }

    .ew-arrows{align-self:flex-end;}
}

/* Mobile */
@media(max-width:575.98px){

    .explore-work-section{padding:40px 0 70px;}

    .ew-filter-bar{padding:14px;border-radius:16px;margin-bottom:28px;}

    .ew-label-text{font-size:10.5px;letter-spacing:2.5px;}

    .ew-pill{
        padding:9px 14px;
        font-size:12.5px;
        border-radius:12px;
    }

    .ew-pill-icon{width:26px;height:26px;font-size:12px;border-radius:8px;}

    .ew-featured-card{padding:12px;border-radius:24px;}

    .ew-image-wrap{min-height:220px;border-radius:16px;}

    .ew-featured-badge{
        top:14px;left:14px;
        padding:7px 12px;
        font-size:9.5px;
        letter-spacing:1.2px;
    }

    .ew-card-content{padding:24px 20px 22px;}

    .ew-cat-pill{
        padding:6px 14px;
        font-size:10px;
        letter-spacing:1.5px;
        margin-bottom:16px;
    }

    .ew-title{letter-spacing:-.8px;margin-bottom:14px;}
    .ew-desc{font-size:13.5px;margin-bottom:24px;}

    .ew-stats{
        gap:14px;
        margin-bottom:22px;
    }

    .ew-stat{gap:10px;}
    .ew-stat-icon{width:36px;height:36px;font-size:15px;}
    .ew-stat-text strong{font-size:15.5px;}
    .ew-stat-text small{font-size:10px;}

    .ew-stat-divider{display:none;}

    .ew-footer{gap:16px;}

    .btn-explore-program{
        width:100%;
        justify-content:center;
        padding:14px 24px;
        font-size:14px;
    }

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

    .ew-arrow.prev,
    .ew-arrows{gap:8px;}

    .ew-progress-dots{margin-top:20px;}

    .ew-leaf-card-1{width:50px;height:50px;}
    .ew-leaf-card-2{width:32px;height:32px;}
}
   

   
        /* =========================================================
   ALL PROGRAMS SECTION
========================================================= */

.all-programs-section{
    position:relative;
    padding:100px 0 110px;
    overflow:hidden;
    isolation:isolate;
    background:#FDFCF7;
}

/* Ambient glow */
.all-programs-section::before{
    content:"";
    position:absolute;inset:0;z-index:0;pointer-events:none;
    background:
        radial-gradient(ellipse 55% 45% at -5% -5%,
            rgba(76,175,80,.26) 0%, rgba(76,175,80,.10) 32%, transparent 72%),
        radial-gradient(ellipse 55% 45% at 105% -5%,
            rgba(255,140,0,.26) 0%, rgba(255,193,7,.11) 32%, transparent 72%),
        radial-gradient(ellipse 60% 50% at -5% 105%,
            rgba(255,140,0,.24) 0%, rgba(255,193,7,.10) 35%, transparent 75%),
        radial-gradient(ellipse 65% 55% at 105% 105%,
            rgba(76,175,80,.24) 0%, rgba(255,193,7,.11) 25%,
            rgba(255,140,0,.10) 55%, transparent 82%),
        radial-gradient(ellipse 90% 70% at 50% 50%,
            rgba(232,240,252,.40) 0%, transparent 70%);
}

.all-programs-section::after{
    content:"";
    position:absolute;inset:0;z-index:0;pointer-events:none;
    background:radial-gradient(ellipse 120% 90% at 50% 50%,
        rgba(253,252,247,0) 0%, rgba(253,252,247,.15) 60%, rgba(253,252,247,.55) 100%);
}

.ap-bg{
    position:absolute;inset:0;pointer-events:none;z-index:1;overflow:hidden;
}

.ap-bg::before{
    content:"";position:absolute;top:-25%;left:-20%;
    width:70%;height:110%;
    background:radial-gradient(ellipse at 30% 40%,
        rgba(76,175,80,.20) 0%, rgba(76,175,80,.08) 40%, transparent 70%);
    border-radius:50% 40% 60% 45% / 55% 60% 40% 50%;
    filter:blur(50px);transform:rotate(-15deg);opacity:.95;
}

.ap-bg::after{
    content:"";position:absolute;bottom:-35%;right:-25%;
    width:85%;height:120%;
    background:radial-gradient(ellipse at 60% 60%,
        rgba(255,140,0,.20) 0%, rgba(255,193,7,.10) 30%,
        rgba(76,175,80,.08) 60%, transparent 80%);
    border-radius:45% 55% 40% 60% / 60% 45% 55% 40%;
    filter:blur(55px);transform:rotate(-12deg);opacity:.95;
}

/* Leaves */
.ap-leaf,.ap-orange-leaf{
    position:absolute;display:block;
    border-radius:0 100% 0 100%;
    filter:drop-shadow(0 6px 14px rgba(0,0,0,.10));
    opacity:.9;z-index:2;
}
.ap-leaf{background:linear-gradient(135deg,#66BB6A,#2E7D32);}
.ap-orange-leaf{background:linear-gradient(135deg,#FFB74D,#E88918);}

.ap-leaf-1{width:56px;height:56px;top:8%;left:1.5%;animation:floatLeafA 7s ease-in-out infinite;}
.ap-leaf-2{width:44px;height:44px;bottom:10%;right:2%;animation:floatLeafB 8s ease-in-out infinite reverse;}
.ap-orange-1{width:34px;height:34px;top:55%;left:2.5%;animation:floatLeafC 7.5s ease-in-out infinite;}

.ap-dot{
    position:absolute;width:5px;height:5px;border-radius:50%;
    background:rgba(255,140,0,.55);
    box-shadow:0 0 8px rgba(255,140,0,.4);
    z-index:2;
}
.ap-dot-1{top:6%;right:6%;}
.ap-dot-2{top:8%;right:8%;}

/* =========================================================
   HEADER
========================================================= */

.ap-header{
    position:relative;
    z-index:3;
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:30px;
    flex-wrap:wrap;
    margin-bottom:50px;
}

.ap-header-left{max-width:640px;}

.ap-label{
    display:inline-flex;
    align-items:center;
    gap:10px;
    color:#4CAF50;
    font-size:12px;
    font-weight:800;
    letter-spacing:3.5px;
    text-transform:uppercase;
    margin-bottom:16px;
}

.ap-label-dot{
    width:8px;height:8px;
    border-radius:50%;
    background:#4CAF50;
    box-shadow:0 0 0 4px rgba(76,175,80,.15);
}

.ap-label-line{
    display:inline-block;
    width:28px;height:2px;
    background:linear-gradient(90deg,#4CAF50,#FFC107);
    border-radius:2px;
}

/* ============ HEADING — OUR (navy) PROGRAMS (green+blue gradient) ============ */
.ap-title{
    font-family:'Manrope',sans-serif;
    font-size:clamp(36px,4.4vw,56px);
    font-weight:800;
    line-height:1.05;
    letter-spacing:-1.8px;
    margin-bottom:16px;
    display:flex;
    flex-wrap:wrap;
    gap:14px;
    align-items:baseline;
}

/* "Our" — Navy */
.ap-title-navy{
    color:#0B2C6B;
}

/* "Programs" — Green + Blue gradient */
.ap-title-gradient{
    background:linear-gradient(135deg,#1E5BC6 0%,#26A69A 40%,#4CAF50 100%);
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent;
    -webkit-text-fill-color:transparent;
    position:relative;
}

/* Subtle gradient underline */
.ap-title-gradient::after{
    content:"";
    position:absolute;
    bottom:-6px;
    left:0;
    width:100%;
    height:5px;
    border-radius:5px;
    background:linear-gradient(90deg,#1E5BC6 0%,#26A69A 40%,#4CAF50 70%,#FFC107 100%);
    box-shadow:0 3px 12px rgba(30,91,198,.30);
}

.ap-desc{
    color:#5A6A82;
    font-size:15.5px;
    line-height:1.7;
    margin:0;
    font-weight:400;
    max-width:560px;
}

/* View All Programs link */
.ap-header-right{
    display:flex;
    align-items:flex-end;
    padding-bottom:6px;
}

.view-all-programs-btn{
    display:inline-flex;
    align-items:center;
    gap:9px;
    color:#1E5BC6;
    font-size:15px;
    font-weight:700;
    text-decoration:none;
    padding:10px 4px;
    border-bottom:2px solid #1E5BC6;
    transition:all .3s ease;
    position:relative;
}

.view-all-programs-btn::after{
    content:"";
    position:absolute;
    bottom:-2px;left:0;
    width:0;height:2px;
    background:linear-gradient(90deg,#4CAF50,#FFC107);
    transition:width .4s ease;
}

.view-all-programs-btn:hover{
    color:#0B2C6B;
    border-bottom-color:transparent;
    gap:13px;
}

.view-all-programs-btn:hover::after{width:100%;}

.view-all-programs-btn i{transition:transform .3s ease;}
.view-all-programs-btn:hover i{transform:translateX(4px);}

/* =========================================================
   PROGRAMS GRID (3 + 2 layout)
========================================================= */

.ap-grid{
    position:relative;
    z-index:3;
    display:grid;
    grid-template-columns:repeat(6, 1fr);
    gap:26px;
}

/* Card 1, 2, 3 — take 2 columns each (3 cards per row) */
.ap-card:nth-child(1),
.ap-card:nth-child(2),
.ap-card:nth-child(3){
    grid-column:span 2;
}

/* Card 4, 5 — take 3 columns each (2 cards per row) */
.ap-card:nth-child(4),
.ap-card:nth-child(5){
    grid-column:span 3;
}

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

.ap-card{
    position:relative;
    display:flex;
    flex-direction:column;

    background:linear-gradient(135deg,rgba(255,255,255,.98),rgba(255,255,255,.92));
    backdrop-filter:blur(14px);
    border-radius:24px;
    overflow:hidden;

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

    box-shadow:
        0 12px 30px rgba(11,31,58,.08),
        0 3px 10px rgba(11,31,58,.04);

    transition:all .45s cubic-bezier(.2,.8,.2,1);
}

.ap-card:hover{
    transform:translateY(-10px);
    box-shadow:
        0 30px 65px rgba(11,31,58,.16),
        0 10px 25px rgba(11,31,58,.08);
}

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

.ap-img-wrap{
    position:relative;
    width:100%;
    height:200px;
    overflow:hidden;
    flex-shrink:0;
}

.ap-img-wrap img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
    transition:transform .7s cubic-bezier(.2,.8,.2,1);
}

.ap-card:hover .ap-img-wrap img{
    transform:scale(1.08);
}

/* Bottom gradient overlay on image */
.ap-img-wrap::after{
    content:"";
    position:absolute;
    inset:auto 0 0 0;
    height:50%;
    background:linear-gradient(0deg,
        rgba(11,31,58,.45) 0%,
        rgba(11,31,58,.10) 60%,
        transparent 100%);
    pointer-events:none;
    z-index:1;
}

/* =========================================================
   BODY
========================================================= */

.ap-body{
    position:relative;
    padding:30px 24px 24px;
    display:flex;
    flex-direction:column;
    flex:1;
}

/* Category pill — overlapping image bottom-left */
.ap-cat-pill{
    position:absolute;
    top:-22px;
    left:24px;
    z-index:3;

    display:inline-flex;
    align-items:center;
    gap:8px;

    padding:6px 16px 6px 6px;
    border-radius:50px;
    background:#fff;

    font-size:11.5px;
    font-weight:800;
    letter-spacing:.4px;
    text-transform:uppercase;
    white-space:nowrap;

    box-shadow:
        0 10px 24px rgba(11,31,58,.14),
        0 4px 10px rgba(11,31,58,.08);
}

/* Icon inside pill */
.ap-cat-icon{
    width:32px;
    height:32px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    color:#fff;
    font-size:14px;
    flex-shrink:0;
    box-shadow:0 4px 10px rgba(0,0,0,.15);
}

/* Pill text colors */
.pill-education{color:#E88918;}
.pill-healthcare{color:#26A69A;}
.pill-welfare{color:#1E5BC6;}
.pill-skill{color:#D4A017;}
.pill-community{color:#3FA34D;}

/* Icon backgrounds */
.icon-education{background:linear-gradient(135deg,#FFB74D,#E88918);}
.icon-healthcare{background:linear-gradient(135deg,#26A69A,#00796B);}
.icon-welfare{background:linear-gradient(135deg,#1E5BC6,#0B2C6B);}
.icon-skill{background:linear-gradient(135deg,#FFD54F,#D4A017);}
.icon-community{background:linear-gradient(135deg,#66BB6A,#2E7D32);}

/* Card title */
.ap-card-title{
    font-family:'Manrope',sans-serif;
    font-size:20px;
    font-weight:800;
    color:#0B2C6B;
    letter-spacing:-.4px;
    line-height:1.28;
    margin:8px 0 12px;
    transition:color .3s ease;
}

.ap-card:hover .ap-card-title{
    color:#1E5BC6;
}

/* Card description */
.ap-card-desc{
    color:#5A6A82;
    font-size:13.5px;
    line-height:1.7;
    margin:0 0 22px;
    font-weight:400;
    flex:1;
}

/* =========================================================
   FOOTER — STATS + ARROW
========================================================= */

.ap-card-footer{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    padding-top:18px;
    border-top:1px solid rgba(11,31,58,.06);
    margin-top:auto;
}

.ap-stats{
    display:flex;
    gap:20px;
    align-items:center;
    flex-wrap:wrap;
}

.ap-stat{
    display:flex;
    align-items:center;
    gap:8px;
}
/* =========================================================
   STAT ICONS — ROUND COLORED CIRCLES
========================================================= */

.ap-stat-icon{
    width:36px;
    height:36px;
    min-width:36px;
    min-height:36px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    color:#fff;
    font-size:15px;
    flex-shrink:0;
    transition:transform .35s ease;
    box-shadow:0 6px 14px rgba(0,0,0,.15);
}

.ap-stat:hover .ap-stat-icon{
    transform:scale(1.10) rotate(-6deg);
}

/* Colored gradient backgrounds */
.icon-orange{
    background:linear-gradient(135deg,#FFB74D,#E88918);
    box-shadow:0 6px 14px rgba(255,140,0,.30);
}
.icon-navy{
    background:linear-gradient(135deg,#1E5BC6,#0B2C6B);
    box-shadow:0 6px 14px rgba(30,91,198,.30);
}
.icon-green{
    background:linear-gradient(135deg,#66BB6A,#2E7D32);
    box-shadow:0 6px 14px rgba(76,175,80,.30);
}
.icon-teal{
    background:linear-gradient(135deg,#26A69A,#00796B);
    box-shadow:0 6px 14px rgba(38,166,154,.30);
}
.icon-blue{
    background:linear-gradient(135deg,#1E5BC6,#0B2C6B);
    box-shadow:0 6px 14px rgba(30,91,198,.30);
}
.icon-gold{
    background:linear-gradient(135deg,#FFD54F,#D4A017);
    box-shadow:0 6px 14px rgba(212,160,23,.30);
}

.ap-stat-text{
    display:flex;
    flex-direction:column;
    line-height:1.15;
}

.ap-stat-text strong{
    font-family:'Manrope',sans-serif;
    font-size:15px;
    font-weight:800;
    color:#0B2C6B;
    letter-spacing:-.3px;
}

.ap-stat-text small{
    font-size:10.5px;
    color:#6A7A90;
    font-weight:600;
    letter-spacing:.15px;
    margin-top:2px;
}

/* Arrow button */
.ap-arrow{
    width:42px;
    height:42px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    border:none;
    color:#fff;
    font-size:16px;
    cursor:pointer;
    flex-shrink:0;
    transition:all .35s cubic-bezier(.2,.8,.2,1);
    box-shadow:0 8px 18px rgba(0,0,0,.15);
}

.ap-arrow:hover{
    transform:scale(1.12);
    box-shadow:0 12px 26px rgba(0,0,0,.24);
}

.ap-arrow i{
    transition:transform .3s ease;
}

.ap-arrow:hover i{transform:translateX(2px);}

/* Arrow colors */
.arrow-orange{background:linear-gradient(135deg,#FFB74D,#E88918);}
.arrow-teal{background:linear-gradient(135deg,#26A69A,#00796B);}
.arrow-navy{background:linear-gradient(135deg,#1E5BC6,#0B2C6B);}
.arrow-green{background:linear-gradient(135deg,#66BB6A,#2E7D32);}

/* =========================================================
   ANIMATIONS
========================================================= */

@keyframes floatLeafA{
    0%,100%{transform:translateY(0) rotate(-30deg);}
    50%{transform:translateY(-15px) rotate(-20deg);}
}
@keyframes floatLeafB{
    0%,100%{transform:translateY(0) rotate(20deg);}
    50%{transform:translateY(-12px) rotate(10deg);}
}
@keyframes floatLeafC{
    0%,100%{transform:translateY(0) rotate(30deg);}
    50%{transform:translateY(-10px) rotate(40deg);}
}

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

@media(max-width:1199.98px){
    .all-programs-section{padding:90px 0 100px;}
    .ap-grid{gap:22px;}
    .ap-img-wrap{height:180px;}
    .ap-card-title{font-size:18px;}
    .ap-card-desc{font-size:13px;}
}

/* Tablet */
@media(max-width:991.98px){

    .all-programs-section{padding:80px 0 90px;}

    .ap-header{
        flex-direction:column;
        align-items:flex-start;
        gap:20px;
        margin-bottom:44px;
    }

    .ap-header-right{padding-bottom:0;}

    /* 2 cards per row */
    .ap-grid{
        grid-template-columns:repeat(2, 1fr);
        gap:20px;
    }

    .ap-card:nth-child(1),
    .ap-card:nth-child(2),
    .ap-card:nth-child(3),
    .ap-card:nth-child(4),
    .ap-card:nth-child(5){
        grid-column:span 1;
    }

    /* 5th card spans full width */
    .ap-card:nth-child(5){
        grid-column:1 / -1;
    }

    .ap-img-wrap{height:180px;}

    .ap-body{padding:28px 20px 22px;}

    .ap-cat-pill{
        top:-20px;
        left:20px;
        padding:5px 14px 5px 5px;
        font-size:11px;
    }

    .ap-cat-icon{width:30px;height:30px;font-size:13px;}

    .ap-card-title{font-size:17px;}

    .ap-card-desc{font-size:13px;}

    .ap-stats{gap:16px;}
    .ap-stat-icon{font-size:18px;}
    .ap-stat-text strong{font-size:14px;}
    .ap-stat-text small{font-size:10px;}
}

/* Mobile */
@media(max-width:575.98px){

    .all-programs-section{padding:65px 0 75px;}

    .ap-title{letter-spacing:-1px;gap:10px;}

    .ap-title-gradient::after{height:4px;bottom:-4px;}

    .ap-desc{font-size:14.5px;}

    .view-all-programs-btn{font-size:14px;}

    /* 1 card per row */
    .ap-grid{
        grid-template-columns:1fr;
        gap:18px;
    }

    .ap-card:nth-child(5){
        grid-column:span 1;
    }

    .ap-img-wrap{height:200px;}

    .ap-body{padding:32px 20px 22px;}

    .ap-cat-pill{
        top:-20px;
        left:18px;
        padding:5px 14px 5px 5px;
        font-size:10.5px;
        letter-spacing:.3px;
    }

    .ap-cat-icon{width:30px;height:30px;font-size:13px;}

    .ap-card-title{font-size:17.5px;}

    .ap-card-desc{font-size:13px;}

    /* Footer stacked if needed */
    .ap-card-footer{gap:14px;}

    .ap-stats{gap:14px;}

    .ap-stat-icon{font-size:18px;}
    .ap-stat-text strong{font-size:13.5px;}
    .ap-stat-text small{font-size:10px;}

    .ap-arrow{
        width:40px;height:40px;
        font-size:15px;
    }
}
   

   
        /* =========================================================
   UPCOMING EVENTS + OUR APPROACH SECTION
========================================================= */

.upcoming-events-section{
    position:relative;
    padding:100px 0 110px;
    overflow:hidden;
    isolation:isolate;
    background:#FDFCF7;
}

/* Ambient glow */
.upcoming-events-section::before{
    content:"";
    position:absolute;inset:0;z-index:0;pointer-events:none;
    background:
        radial-gradient(ellipse 55% 45% at -5% -5%,
            rgba(76,175,80,.26) 0%, rgba(76,175,80,.10) 32%, transparent 72%),
        radial-gradient(ellipse 55% 45% at 105% -5%,
            rgba(255,140,0,.26) 0%, rgba(255,193,7,.11) 32%, transparent 72%),
        radial-gradient(ellipse 60% 50% at -5% 105%,
            rgba(255,140,0,.24) 0%, rgba(255,193,7,.10) 35%, transparent 75%),
        radial-gradient(ellipse 65% 55% at 105% 105%,
            rgba(76,175,80,.24) 0%, rgba(255,193,7,.11) 25%,
            rgba(255,140,0,.10) 55%, transparent 82%),
        radial-gradient(ellipse 90% 70% at 50% 50%,
            rgba(232,240,252,.42) 0%, transparent 70%);
}

.upcoming-events-section::after{
    content:"";
    position:absolute;inset:0;z-index:0;pointer-events:none;
    background:radial-gradient(ellipse 120% 90% at 50% 50%,
        rgba(253,252,247,0) 0%, rgba(253,252,247,.15) 60%, rgba(253,252,247,.55) 100%);
}

.ue-bg{
    position:absolute;inset:0;pointer-events:none;z-index:1;overflow:hidden;
}

.ue-bg::before{
    content:"";position:absolute;top:-25%;left:-20%;
    width:70%;height:110%;
    background:radial-gradient(ellipse at 30% 40%,
        rgba(76,175,80,.20) 0%, rgba(76,175,80,.08) 40%, transparent 70%);
    border-radius:50% 40% 60% 45% / 55% 60% 40% 50%;
    filter:blur(50px);transform:rotate(-15deg);opacity:.95;
}

.ue-bg::after{
    content:"";position:absolute;bottom:-35%;right:-25%;
    width:85%;height:120%;
    background:radial-gradient(ellipse at 60% 60%,
        rgba(255,140,0,.20) 0%, rgba(255,193,7,.10) 30%,
        rgba(76,175,80,.08) 60%, transparent 80%);
    border-radius:45% 55% 40% 60% / 60% 45% 55% 40%;
    filter:blur(55px);transform:rotate(-12deg);opacity:.95;
}

/* Leaves */
.ue-leaf,.ue-orange-leaf{
    position:absolute;display:block;
    border-radius:0 100% 0 100%;
    filter:drop-shadow(0 6px 14px rgba(0,0,0,.10));
    opacity:.9;z-index:2;
}
.ue-leaf{background:linear-gradient(135deg,#66BB6A,#2E7D32);}
.ue-orange-leaf{background:linear-gradient(135deg,#FFB74D,#E88918);}

.ue-leaf-1{width:56px;height:56px;top:8%;left:1.5%;animation:floatLeafA 7s ease-in-out infinite;}
.ue-leaf-2{width:44px;height:44px;bottom:10%;right:2%;animation:floatLeafB 8s ease-in-out infinite reverse;}
.ue-orange-1{width:34px;height:34px;top:55%;left:2.5%;animation:floatLeafC 7.5s ease-in-out infinite;}

.ue-dot{
    position:absolute;width:5px;height:5px;border-radius:50%;
    background:rgba(255,140,0,.55);
    box-shadow:0 0 8px rgba(255,140,0,.4);
    z-index:2;
}
.ue-dot-1{top:6%;right:6%;}
.ue-dot-2{top:8%;right:8%;}

/* =========================================================
   HEADER
========================================================= */

.ue-header{
    position:relative;
    z-index:3;
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:30px;
    flex-wrap:wrap;
    margin-bottom:48px;
}

.ue-header-left{max-width:640px;}

.ue-label{
    display:inline-flex;
    align-items:center;
    gap:10px;
    color:#4CAF50;
    font-size:12px;
    font-weight:800;
    letter-spacing:3.5px;
    text-transform:uppercase;
    margin-bottom:14px;
}

.ue-label-dot{
    width:8px;height:8px;
    border-radius:50%;
    background:#4CAF50;
    box-shadow:0 0 0 4px rgba(76,175,80,.15);
}

.ue-label-line{
    display:inline-block;
    width:28px;height:2px;
    background:linear-gradient(90deg,#4CAF50,#FFC107);
    border-radius:2px;
}

.ue-title{
    font-family:'Manrope',sans-serif;
    font-size:clamp(32px,3.8vw,48px);
    font-weight:800;
    line-height:1.15;
    letter-spacing:-1.4px;
    color:#0B2C6B;
    margin-bottom:14px;
}

.ue-desc{
    color:#5A6A82;
    font-size:15.5px;
    line-height:1.7;
    margin:0;
    font-weight:400;
}

.ue-header-right{
    display:flex;
    align-items:flex-end;
    padding-bottom:6px;
}

.ue-view-all{
    display:inline-flex;
    align-items:center;
    gap:9px;
    color:#1E5BC6;
    font-size:15px;
    font-weight:700;
    text-decoration:none;
    padding:10px 4px;
    border-bottom:2px solid #1E5BC6;
    transition:all .3s ease;
    position:relative;
}

.ue-view-all::after{
    content:"";
    position:absolute;
    bottom:-2px;left:0;
    width:0;height:2px;
    background:linear-gradient(90deg,#4CAF50,#FFC107);
    transition:width .4s ease;
}

.ue-view-all:hover{
    color:#0B2C6B;
    border-bottom-color:transparent;
    gap:13px;
}

.ue-view-all:hover::after{width:100%;}

.ue-view-all i{transition:transform .3s ease;}
.ue-view-all:hover i{transform:translateX(4px);}

/* =========================================================
   EVENTS GRID — 2 columns
========================================================= */

.ue-events-grid{
    position:relative;
    z-index:3;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:26px;
    margin-bottom:100px;
}

/* =========================================================
   FEATURED CARD (Left)
========================================================= */

.ue-featured-card{
    display:flex;
    flex-direction:column;

    background:linear-gradient(135deg,rgba(255,255,255,.98),rgba(255,255,255,.92));
    backdrop-filter:blur(14px);
    border-radius:24px;
    overflow:hidden;

    border:1px solid rgba(255,255,255,.95);
    box-shadow:
        0 12px 30px rgba(11,31,58,.08),
        0 3px 10px rgba(11,31,58,.04);

    transition:all .45s cubic-bezier(.2,.8,.2,1);
}

.ue-featured-card:hover{
    transform:translateY(-6px);
    box-shadow:
        0 30px 65px rgba(11,31,58,.16),
        0 10px 25px rgba(11,31,58,.08);
}

/* Featured image */
.ue-featured-img{
    position:relative;
    width:100%;
    height:260px;
    overflow:hidden;
}

.ue-featured-img img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
    transition:transform .7s ease;
}

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

/* Date badge */
.ue-date-badge{
    position:absolute;
    top:18px;
    left:18px;
    width:72px;
    height:78px;
    background:linear-gradient(180deg,#FF8C00,#E88918);
    border-radius:16px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    z-index:3;
    color:#fff;
    box-shadow:0 12px 28px rgba(255,140,0,.40);
    border:1px solid rgba(255,255,255,.20);
}

.ue-date-day{
    font-family:'Manrope',sans-serif;
    font-size:26px;
    font-weight:800;
    line-height:1;
    letter-spacing:-.5px;
}

.ue-date-month{
    font-size:11.5px;
    font-weight:700;
    letter-spacing:1.5px;
    margin-top:4px;
    opacity:.95;
}

/* Featured body */
.ue-featured-body{
    padding:26px 28px 28px;
    display:flex;
    flex-direction:column;
    flex:1;
}

/* Category pill */
.ue-cat-pill{
    display:inline-flex;
    align-items:center;
    gap:7px;
    padding:6px 14px;
    border-radius:50px;
    font-size:11px;
    font-weight:800;
    letter-spacing:.5px;
    width:fit-content;
    margin-bottom:14px;
}

.pill-education{
    background:linear-gradient(135deg,rgba(255,183,77,.25),rgba(232,137,24,.15));
    color:#E88918;
    border:1px solid rgba(255,140,0,.30);
}

.ue-cat-pill i{font-size:12px;}

.ue-featured-title{
    font-family:'Manrope',sans-serif;
    font-size:24px;
    font-weight:800;
    color:#0B2C6B;
    line-height:1.25;
    letter-spacing:-.5px;
    margin-bottom:16px;
    transition:color .3s ease;
}

.ue-featured-card:hover .ue-featured-title{
    color:#1E5BC6;
}

/* Meta list */
.ue-meta{
    list-style:none;
    padding:0;
    margin:0 0 18px;
    display:flex;
    flex-direction:column;
    gap:9px;
}

.ue-meta li{
    display:flex;
    align-items:center;
    gap:9px;
    color:#4A5B72;
    font-size:13px;
    font-weight:600;
}

.ue-meta li i{
    color:#1E5BC6;
    font-size:13px;
    width:16px;
    text-align:center;
}

.ue-featured-desc{
    color:#5A6A82;
    font-size:13.5px;
    line-height:1.7;
    margin:0 0 22px;
    flex:1;
    font-weight:400;
}

/* View Event Button */
.btn-view-event{
    position:relative;
    overflow:hidden;
    display:inline-flex;
    align-items:center;
    gap:10px;
    padding:13px 26px;
    border-radius:50px;
    background:linear-gradient(135deg,#1E5BC6,#0B2C6B);
    color:#fff;
    font-size:14px;
    font-weight:800;
    letter-spacing:.2px;
    text-decoration:none;
    border:none;
    box-shadow:0 12px 26px rgba(30,91,198,.30);
    transition:all .35s ease;
    width:fit-content;
}

.btn-view-event::before{
    content:"";
    position:absolute;
    top:0;bottom:0;left:-100%;
    width:55%;
    background:linear-gradient(90deg,transparent,rgba(255,255,255,.35),transparent);
    transform:skewX(-20deg);
    transition:left .75s ease;
}

.btn-view-event:hover::before{left:140%;}

.btn-view-event:hover{
    color:#fff;
    transform:translateY(-3px);
    box-shadow:0 18px 36px rgba(30,91,198,.45);
}

.btn-view-event i{
    position:relative;z-index:2;
    transition:transform .3s ease;
}

.btn-view-event:hover i{transform:translateX(5px);}

/* =========================================================
   SMALL EVENTS (Right Stack)
========================================================= */

.ue-small-events{
    display:flex;
    flex-direction:column;
    gap:16px;
}

.ue-small-card{
    position:relative;
    display:flex;
    align-items:center;
    gap:16px;

    padding:18px 60px 18px 18px;
    border-radius:20px;

    background:linear-gradient(135deg,rgba(255,255,255,.98),rgba(255,255,255,.92));
    backdrop-filter:blur(14px);

    border:1px solid rgba(255,255,255,.95);
    box-shadow:
        0 10px 26px rgba(11,31,58,.07),
        0 3px 10px rgba(11,31,58,.04);

    transition:all .4s cubic-bezier(.2,.8,.2,1);
    cursor:pointer;
    overflow:hidden;
}

.ue-small-card:hover{
    transform:translateY(-5px);
    box-shadow:
        0 22px 50px rgba(11,31,58,.14),
        0 8px 20px rgba(11,31,58,.08);
}

/* Date badge — small */
.ue-small-date-badge{
    position:absolute;
    top:-2px;
    left:-2px;
    z-index:3;
    width:56px;
    height:62px;
    background:linear-gradient(180deg,#FF8C00,#E88918);
    border-radius:18px 18px 18px 4px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    color:#fff;
    box-shadow:0 8px 20px rgba(255,140,0,.35);
}

.ue-small-day{
    font-family:'Manrope',sans-serif;
    font-size:20px;
    font-weight:800;
    line-height:1;
    letter-spacing:-.4px;
}

.ue-small-month{
    font-size:9.5px;
    font-weight:700;
    letter-spacing:1.2px;
    margin-top:3px;
    opacity:.95;
}

/* Small image — circular */
.ue-small-img{
    width:76px;
    height:76px;
    border-radius:50%;
    overflow:hidden;
    flex-shrink:0;
    margin-left:52px;
    box-shadow:
        0 8px 18px rgba(11,31,58,.12),
        0 0 0 3px rgba(255,255,255,.9);
}

.ue-small-img img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
    transition:transform .5s ease;
}

.ue-small-card:hover .ue-small-img img{
    transform:scale(1.10);
}

/* Small content */
.ue-small-content{
    flex:1;
    min-width:0;
}

.ue-small-title{
    font-family:'Manrope',sans-serif;
    font-size:15.5px;
    font-weight:800;
    color:#0B2C6B;
    letter-spacing:-.3px;
    line-height:1.3;
    margin-bottom:5px;
    transition:color .3s ease;
}

.ue-small-card:hover .ue-small-title{
    color:#1E5BC6;
}

.ue-small-loc{
    color:#6A7A90;
    font-size:12px;
    font-weight:600;
    margin:0 0 4px;
}

.ue-small-time{
    color:#8894A6;
    font-size:11.5px;
    font-weight:500;
    margin:0;
    display:flex;
    align-items:center;
    gap:5px;
}

.ue-small-time i{
    color:#1E5BC6;
    font-size:11px;
}

/* Arrow */
.ue-small-arrow{
    position:absolute;
    right:16px;
    top:50%;
    transform:translateY(-50%);
    width:38px;
    height:38px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    border:1.5px solid rgba(11,31,58,.10);
    background:#fff;
    color:#1E5BC6;
    font-size:15px;
    cursor:pointer;
    transition:all .35s ease;
    box-shadow:0 5px 14px rgba(11,31,58,.06);
    flex-shrink:0;
}

.ue-small-card:hover .ue-small-arrow{
    background:linear-gradient(135deg,#1E5BC6,#0B2C6B);
    color:#fff;
    border-color:transparent;
    transform:translateY(-50%) scale(1.08);
    box-shadow:0 10px 22px rgba(30,91,198,.35);
}

/* =========================================================
   OUR APPROACH — FROM INTENTION TO IMPACT
========================================================= */

.ue-approach-wrap{
    position:relative;
    z-index:3;
    padding-top:60px;
    border-top:1px solid rgba(11,31,58,.08);
    display:grid;
    grid-template-columns:1fr 2fr;
    gap:50px;
    align-items:center;
}

.ue-approach-left{max-width:400px;}

.ue-approach-title{
    font-family:'Manrope',sans-serif;
    font-size:clamp(28px,3.2vw,42px);
    font-weight:800;
    line-height:1.15;
    letter-spacing:-1.3px;
    color:#0B2C6B;
    margin-bottom:14px;
}

.ue-approach-desc{
    color:#5A6A82;
    font-size:14.5px;
    line-height:1.7;
    margin:0;
    font-weight:400;
}

/* =========================================================
   STEPS
========================================================= */

.ue-steps{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:16px;
    flex-wrap:wrap;
}

.ue-step{
    display:flex;
    flex-direction:column;
    align-items:center;
    text-align:center;
    gap:10px;
    flex:1;
    min-width:110px;
    transition:transform .4s ease;
    cursor:pointer;
}

.ue-step:hover{transform:translateY(-6px);}

.ue-step-number{
    width:72px;
    height:72px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    color:#fff;
    font-family:'Manrope',sans-serif;
    font-size:24px;
    font-weight:800;
    letter-spacing:-.5px;
    position:relative;
    transition:transform .4s ease;
    box-shadow:0 12px 28px rgba(0,0,0,.18);
    border:3px solid rgba(255,255,255,.85);
}

.ue-step:hover .ue-step-number{
    transform:scale(1.08) rotate(-6deg);
}

/* Step colors */
.step-blue{
    background:linear-gradient(135deg,#1E5BC6,#0B2C6B);
    box-shadow:0 12px 28px rgba(30,91,198,.35);
}
.step-orange{
    background:linear-gradient(135deg,#FFB74D,#E88918);
    box-shadow:0 12px 28px rgba(255,140,0,.35);
}
.step-green{
    background:linear-gradient(135deg,#66BB6A,#2E7D32);
    box-shadow:0 12px 28px rgba(76,175,80,.35);
}
.step-teal{
    background:linear-gradient(135deg,#26A69A,#00796B);
    box-shadow:0 12px 28px rgba(38,166,154,.35);
}

.ue-step-title{
    font-family:'Manrope',sans-serif;
    font-size:16px;
    font-weight:800;
    color:#0B2C6B;
    letter-spacing:-.3px;
    margin:0;
    transition:color .3s ease;
}

.ue-step:hover .ue-step-title{color:#1E5BC6;}

.ue-step-desc{
    color:#7A8798;
    font-size:12px;
    line-height:1.5;
    margin:0;
    font-weight:500;
    max-width:130px;
}

.ue-step-arrow{
    color:#C5D0DD;
    font-size:18px;
    margin-top:28px;
    flex-shrink:0;
}

/* =========================================================
   ANIMATIONS
========================================================= */

@keyframes floatLeafA{
    0%,100%{transform:translateY(0) rotate(-30deg);}
    50%{transform:translateY(-15px) rotate(-20deg);}
}
@keyframes floatLeafB{
    0%,100%{transform:translateY(0) rotate(20deg);}
    50%{transform:translateY(-12px) rotate(10deg);}
}
@keyframes floatLeafC{
    0%,100%{transform:translateY(0) rotate(30deg);}
    50%{transform:translateY(-10px) rotate(40deg);}
}

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

@media(max-width:1199.98px){
    .upcoming-events-section{padding:90px 0 100px;}
    .ue-featured-img{height:230px;}
    .ue-small-img{width:68px;height:68px;margin-left:48px;}
    .ue-small-title{font-size:14.5px;}
    .ue-step-number{width:64px;height:64px;font-size:22px;}
    .ue-step-arrow{margin-top:24px;}
}

/* Tablet */
@media(max-width:991.98px){

    .upcoming-events-section{padding:80px 0 90px;}

    .ue-header{
        flex-direction:column;
        align-items:flex-start;
        gap:20px;
        margin-bottom:40px;
    }

    .ue-header-right{padding-bottom:0;}

    /* Events grid — stack */
    .ue-events-grid{
        grid-template-columns:1fr;
        gap:20px;
        margin-bottom:80px;
    }

    .ue-featured-img{height:240px;}

    /* Approach — stack */
    .ue-approach-wrap{
        grid-template-columns:1fr;
        gap:40px;
        padding-top:50px;
    }

    .ue-approach-left{
        text-align:center;
        max-width:100%;
    }

    .ue-approach-left .ue-label{justify-content:center;}

    .ue-steps{
        justify-content:center;
        gap:20px;
    }

    .ue-step-arrow{display:none;}

    .ue-step{flex:0 0 calc(50% - 12px);min-width:0;}
}

/* Mobile */
@media(max-width:575.98px){

    .upcoming-events-section{padding:65px 0 75px;}

    .ue-title{letter-spacing:-1px;}

    .ue-desc{font-size:14.5px;}

    .ue-view-all{font-size:14px;}

    /* Featured card */
    .ue-featured-img{height:200px;}

    .ue-date-badge{
        width:64px;
        height:70px;
        border-radius:14px;
        top:14px;
        left:14px;
    }
    .ue-date-day{font-size:22px;}
    .ue-date-month{font-size:10.5px;}

    .ue-featured-body{padding:22px 20px 24px;}

    .ue-cat-pill{
        padding:5px 12px;
        font-size:10px;
    }

    .ue-featured-title{font-size:20px;}

    .ue-meta li{font-size:12px;}

    .ue-featured-desc{font-size:12.5px;}

    .btn-view-event{
        width:100%;
        justify-content:center;
        padding:12px 22px;
        font-size:13.5px;
    }

    /* Small cards */
    .ue-small-card{
        padding:16px 52px 16px 16px;
        gap:14px;
    }

    .ue-small-date-badge{
        width:50px;
        height:56px;
        border-radius:16px 16px 16px 4px;
    }

    .ue-small-day{font-size:18px;}
    .ue-small-month{font-size:9px;}

    .ue-small-img{
        width:64px;
        height:64px;
        margin-left:42px;
    }

    .ue-small-title{font-size:14px;}
    .ue-small-loc{font-size:11.5px;}
    .ue-small-time{font-size:11px;}

    .ue-small-arrow{
        width:34px;height:34px;font-size:14px;
        right:12px;
    }

    /* Approach */
    .ue-approach-title{font-size:24px;}

    .ue-approach-desc{font-size:13.5px;}

    .ue-steps{gap:16px;}

    .ue-step{
        flex:0 0 calc(50% - 8px);
        min-width:0;
    }

    .ue-step-number{
        width:56px;height:56px;
        font-size:19px;
        border-width:2.5px;
    }

    .ue-step-title{font-size:14px;}
    .ue-step-desc{font-size:11px;}
}
   

   
        /* =========================================================
   GET INVOLVED CTA SECTION
========================================================= */

.get-involved-cta{
    position:relative;
    padding:100px 0;
    overflow:hidden;
    isolation:isolate;
    background:#0B1F3A;
    min-height:520px;
}

/* =========================================================
   FULL-WIDTH BACKGROUND IMAGE
========================================================= */

.gic-bg-image{
    position:absolute;
    inset:0;
    z-index:0;
    overflow:hidden;
}

.gic-bg-image img{
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:center;
    display:block;
}

/* Overlay — left side visible image, right side dark navy */
.gic-overlay{
    position:absolute;
    inset:0;
    z-index:1;
    pointer-events:none;

    background:
        /* Horizontal gradient — dark on right for text readability */
        linear-gradient(90deg,
            rgba(11,31,58,.10) 0%,
            rgba(11,31,58,.25) 25%,
            rgba(11,31,58,.70) 45%,
            rgba(11,31,58,.92) 60%,
            rgba(11,31,58,.96) 100%),

        /* Subtle green tint top-left */
        linear-gradient(135deg,
            rgba(76,175,80,.20) 0%,
            transparent 40%),

        /* Subtle orange tint bottom-right */
        linear-gradient(315deg,
            rgba(255,140,0,.18) 0%,
            transparent 40%);
}

/* =========================================================
   DECORATIVE LEAVES
========================================================= */

.gic-decor{
    position:absolute;
    inset:0;
    pointer-events:none;
    z-index:3;
}

.gic-leaf,.gic-orange-leaf{
    position:absolute;
    display:block;
    border-radius:0 100% 0 100%;
    opacity:.75;
    z-index:3;
    filter:drop-shadow(0 6px 14px rgba(0,0,0,.30));
}

.gic-leaf{
    background:linear-gradient(135deg,#66BB6A,#2E7D32);
}

.gic-orange-leaf{
    background:linear-gradient(135deg,#FFB74D,#E88918);
}

.gic-leaf-1{
    width:56px;height:56px;
    top:10%;right:2%;
    animation:gicFloatA 7s ease-in-out infinite;
}

.gic-leaf-2{
    width:40px;height:40px;
    bottom:12%;right:6%;
    animation:gicFloatB 8s ease-in-out infinite reverse;
}

.gic-orange-1{
    width:34px;height:34px;
    top:22%;right:12%;
    animation:gicFloatC 6.5s ease-in-out infinite;
}

@keyframes gicFloatA{
    0%,100%{transform:translateY(0) rotate(-30deg);}
    50%{transform:translateY(-15px) rotate(-20deg);}
}
@keyframes gicFloatB{
    0%,100%{transform:translateY(0) rotate(20deg);}
    50%{transform:translateY(-12px) rotate(10deg);}
}
@keyframes gicFloatC{
    0%,100%{transform:translateY(0) rotate(30deg);}
    50%{transform:translateY(-10px) rotate(40deg);}
}

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

.gic-container{position:relative;z-index:4;}

.gic-row{min-height:340px;}

.gic-left{
    /* Empty column — image background visible here */
    min-height:340px;
}

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

.gic-right{
    position:relative;
    z-index:5;
    padding-left:20px;
}

/* Label */
.gic-label{
    display:inline-flex;
    align-items:center;
    gap:10px;
    color:#8BC34A;
    font-size:11.5px;
    font-weight:800;
    letter-spacing:3.5px;
    text-transform:uppercase;
    margin-bottom:14px;
}

.gic-label-dot{
    width:7px;
    height:7px;
    border-radius:50%;
    background:#8BC34A;
    box-shadow:0 0 0 4px rgba(139,195,74,.20);
}

.gic-label-line{
    display:inline-block;
    width:26px;
    height:2px;
    background:linear-gradient(90deg,#8BC34A,#FFC107);
    border-radius:2px;
}

/* Title */
.gic-title{
    font-family:'Manrope',sans-serif;
    font-size:clamp(28px,3.4vw,42px);
    font-weight:800;
    line-height:1.15;
    letter-spacing:-1.3px;
    color:#fff;
    margin-bottom:14px;
}

.gic-title span{
    background:linear-gradient(135deg,#8BC34A,#FFC107,#FF8C00);
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent;
    -webkit-text-fill-color:transparent;
}

/* Description */
.gic-desc{
    color:rgba(255,255,255,.75);
    font-size:15px;
    line-height:1.7;
    margin-bottom:32px;
    font-weight:400;
    max-width:620px;
}

/* =========================================================
   3 ACTION CARDS
========================================================= */

.gic-cards{
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:16px;
    max-width:860px;
}

.gic-card{
    position:relative;
    display:flex;
    align-items:center;
    gap:14px;

    padding:18px 20px;
    border-radius:16px;

    text-decoration:none;
    overflow:hidden;

    transition:all .4s cubic-bezier(.2,.8,.2,1);

    /* Glassy bg */
    background:rgba(255,255,255,.10);
    backdrop-filter:blur(14px);
    -webkit-backdrop-filter:blur(14px);
    border:1.5px solid rgba(255,255,255,.15);

    box-shadow:
        0 10px 24px rgba(0,0,0,.18),
        inset 0 1px 0 rgba(255,255,255,.10);
}

.gic-card:hover{
    transform:translateY(-6px);
    border-color:rgba(255,255,255,.35);
    box-shadow:
        0 22px 45px rgba(0,0,0,.30),
        inset 0 1px 0 rgba(255,255,255,.20);
}

/* Gradient background on hover per color */
.gic-card::before{
    content:"";
    position:absolute;
    inset:0;
    opacity:0;
    transition:opacity .4s ease;
    z-index:0;
}

.gic-card-blue::before{
    background:linear-gradient(135deg,#1E5BC6,#0B2C6B);
}

.gic-card-green::before{
    background:linear-gradient(135deg,#4CAF50,#2E7D32);
}

.gic-card-orange::before{
    background:linear-gradient(135deg,#FF8C00,#E88918);
}

.gic-card:hover::before{opacity:1;}

/* Card icon */
.gic-card-icon{
    position:relative;
    z-index:2;
    width:48px;
    height:48px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:14px;
    color:#fff;
    font-size:22px;
    flex-shrink:0;
    transition:all .4s ease;
    box-shadow:0 8px 18px rgba(0,0,0,.20);
}

/* Icon colors */
.gic-card-blue .gic-card-icon{
    background:linear-gradient(135deg,#1E5BC6,#0B2C6B);
    box-shadow:0 8px 18px rgba(30,91,198,.40);
}
.gic-card-green .gic-card-icon{
    background:linear-gradient(135deg,#4CAF50,#2E7D32);
    box-shadow:0 8px 18px rgba(76,175,80,.40);
}
.gic-card-orange .gic-card-icon{
    background:linear-gradient(135deg,#FF8C00,#E88918);
    box-shadow:0 8px 18px rgba(255,140,0,.40);
}

.gic-card:hover .gic-card-icon{
    transform:scale(1.08) rotate(-6deg);
    background:rgba(255,255,255,.20);
    box-shadow:0 8px 18px rgba(255,255,255,.20);
}

/* Card content */
.gic-card-content{
    position:relative;
    z-index:2;
    flex:1;
    min-width:0;
}

.gic-card-content h4{
    font-family:'Manrope',sans-serif;
    font-size:15px;
    font-weight:800;
    color:#fff;
    letter-spacing:-.2px;
    margin-bottom:3px;
    line-height:1.2;
}

.gic-card-content p{
    color:rgba(255,255,255,.70);
    font-size:11.5px;
    line-height:1.4;
    margin:0;
    font-weight:500;
    transition:color .3s ease;
}

.gic-card:hover .gic-card-content p{
    color:rgba(255,255,255,.90);
}

/* Card link (Join / Donate) */
.gic-card-link{
    position:relative;
    z-index:2;
    display:inline-flex;
    align-items:center;
    gap:5px;
    color:rgba(255,255,255,.80);
    font-size:11.5px;
    font-weight:700;
    letter-spacing:.2px;
    flex-shrink:0;
    transition:all .3s ease;
}

.gic-card-link i{
    font-size:11px;
    transition:transform .3s ease;
}

.gic-card:hover .gic-card-link{
    color:#fff;
    gap:8px;
}

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

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

@media(max-width:1199.98px){
    .get-involved-cta{padding:90px 0;}
    .gic-card{padding:16px 16px;}
    .gic-card-icon{width:44px;height:44px;font-size:20px;}
    .gic-card-content h4{font-size:14px;}
    .gic-card-content p{font-size:11px;}
}

/* Tablet */
@media(max-width:991.98px){

    .get-involved-cta{
        padding:80px 0;
        min-height:auto;
    }

    /* Overlay — vertical for stacked layout */
    .gic-overlay{
        background:
            linear-gradient(180deg,
                rgba(11,31,58,.55) 0%,
                rgba(11,31,58,.80) 40%,
                rgba(11,31,58,.94) 100%),
            linear-gradient(135deg,
                rgba(76,175,80,.20) 0%,
                transparent 50%),
            linear-gradient(315deg,
                rgba(255,140,0,.18) 0%,
                transparent 50%);
    }

    .gic-row{
        min-height:auto;
    }

    /* Hide empty left column */
    .gic-left{
        display:none;
        min-height:0;
    }

    .gic-right{
        padding-left:0;
        text-align:center;
    }

    .gic-label{justify-content:center;}
    .gic-desc{margin-left:auto;margin-right:auto;}

    .gic-cards{
        grid-template-columns:1fr;
        gap:12px;
        max-width:520px;
        margin:0 auto;
    }

    .gic-card{
        padding:16px 20px;
    }
}

/* Mobile */
@media(max-width:575.98px){

    .get-involved-cta{padding:65px 0;}

    .gic-label{font-size:10.5px;letter-spacing:2.5px;}

    .gic-title{letter-spacing:-.8px;}

    .gic-desc{font-size:14px;margin-bottom:26px;}

    .gic-cards{gap:10px;}

    .gic-card{padding:14px 16px;border-radius:14px;gap:12px;}

    .gic-card-icon{width:42px;height:42px;font-size:19px;border-radius:12px;}

    .gic-card-content h4{font-size:14px;}
    .gic-card-content p{font-size:11px;}

    .gic-card-link{font-size:11px;}

    .gic-leaf-1{width:44px;height:44px;}
    .gic-leaf-2{width:32px;height:32px;}
    .gic-orange-1{width:28px;height:28px;}
}
   




/* =========================================================
   OUR PARTNERS — PREMIUM PAGE SECTION
========================================================= */

.partners-page-section{
    position:relative;
    padding:110px 0 120px;
    overflow:hidden;
    isolation:isolate;
    background:#FDFCF7;
}

/* =========================================================
   AMBIENT GLOW (Green + Orange Topography)
========================================================= */

.partners-page-section::before{
    content:"";
    position:absolute;inset:0;z-index:0;pointer-events:none;
    background:
        radial-gradient(ellipse 55% 45% at -5% -5%,
            rgba(76,175,80,.30) 0%, rgba(76,175,80,.13) 32%, transparent 72%),
        radial-gradient(ellipse 55% 45% at 105% -5%,
            rgba(255,140,0,.30) 0%, rgba(255,193,7,.13) 32%, transparent 72%),
        radial-gradient(ellipse 60% 50% at -5% 105%,
            rgba(255,140,0,.26) 0%, rgba(255,193,7,.12) 35%, transparent 75%),
        radial-gradient(ellipse 65% 55% at 105% 105%,
            rgba(76,175,80,.26) 0%, rgba(255,193,7,.12) 25%,
            rgba(255,140,0,.10) 55%, transparent 82%),
        radial-gradient(ellipse 90% 70% at 50% 50%,
            rgba(232,240,252,.45) 0%, rgba(232,240,252,.15) 40%, transparent 70%);
}

.partners-page-section::after{
    content:"";
    position:absolute;inset:0;z-index:0;pointer-events:none;
    background:radial-gradient(ellipse 120% 90% at 50% 50%,
        rgba(253,252,247,0) 0%, rgba(253,252,247,.15) 60%, rgba(253,252,247,.55) 100%);
}

.pp-bg{
    position:absolute;inset:0;pointer-events:none;z-index:1;overflow:hidden;
}

.pp-bg::before{
    content:"";position:absolute;top:-25%;left:-20%;
    width:70%;height:110%;
    background:radial-gradient(ellipse at 30% 40%,
        rgba(76,175,80,.22) 0%, rgba(76,175,80,.09) 40%, transparent 70%);
    border-radius:50% 40% 60% 45% / 55% 60% 40% 50%;
    filter:blur(50px);transform:rotate(-15deg);opacity:.95;
}

.pp-bg::after{
    content:"";position:absolute;bottom:-35%;right:-25%;
    width:85%;height:120%;
    background:radial-gradient(ellipse at 60% 60%,
        rgba(255,140,0,.22) 0%, rgba(255,193,7,.11) 30%,
        rgba(76,175,80,.08) 60%, transparent 80%);
    border-radius:45% 55% 40% 60% / 60% 45% 55% 40%;
    filter:blur(55px);transform:rotate(-12deg);opacity:.95;
}

/* Leaves */
.pp-leaf,.pp-orange-leaf{
    position:absolute;display:block;
    border-radius:0 100% 0 100%;
    filter:drop-shadow(0 6px 14px rgba(0,0,0,.10));
    opacity:.9;z-index:2;
}
.pp-leaf{background:linear-gradient(135deg,#66BB6A,#2E7D32);}
.pp-orange-leaf{background:linear-gradient(135deg,#FFB74D,#E88918);}

.pp-leaf-1{width:56px;height:56px;top:8%;left:1.5%;animation:floatLeafA 7s ease-in-out infinite;}
.pp-leaf-2{width:42px;height:42px;top:55%;left:2.5%;animation:floatLeafC 8s ease-in-out infinite reverse;}
.pp-leaf-3{width:50px;height:50px;top:14%;right:4%;animation:floatLeafB 6.5s ease-in-out infinite;}
.pp-orange-1{width:34px;height:34px;bottom:12%;left:4%;animation:floatLeafC 7.5s ease-in-out infinite;}
.pp-orange-2{width:30px;height:30px;bottom:20%;right:3%;animation:floatLeafA 8s ease-in-out infinite;}

.pp-dot{
    position:absolute;width:5px;height:5px;border-radius:50%;
    background:rgba(255,140,0,.55);
    box-shadow:0 0 8px rgba(255,140,0,.4);
    z-index:2;
}
.pp-dot-1{top:8%;right:8%;}
.pp-dot-2{top:10%;right:10%;}
.pp-dot-3{top:12%;right:8%;}

/* =========================================================
   TOP ROW
========================================================= */

.pp-top{position:relative;z-index:3;margin-bottom:70px;}

/* LEFT */
.pp-left{position:relative;z-index:3;}

.pp-label{
    display:inline-flex;
    align-items:center;
    gap:10px;
    color:#4CAF50;
    font-size:12px;
    font-weight:800;
    letter-spacing:3.5px;
    text-transform:uppercase;
    margin-bottom:20px;
}

.pp-label-icon{
    color:#4CAF50;
    font-size:15px;
    transform:rotate(-10deg);
}

.pp-label-line{
    display:inline-block;
    width:32px;
    height:2px;
    background:linear-gradient(90deg,#4CAF50,#FFC107);
    border-radius:2px;
    position:relative;
}

.pp-label-line::before{
    content:"";position:absolute;left:-6px;top:50%;
    transform:translateY(-50%);
    width:7px;height:7px;border-radius:50%;
    background:#4CAF50;
    box-shadow:0 0 0 4px rgba(76,175,80,.15);
}

/* Title */
.pp-title{
    font-family:'Manrope',sans-serif;
    font-size:clamp(34px,4.4vw,58px);
    font-weight:800;
    line-height:1.08;
    letter-spacing:-1.8px;
    color:#0B2C6B;
    margin-bottom:22px;
}

.pp-title-green{
    display:block;
    color:#3FA34D;
    position:relative;
}

.pp-title-green::after{
    content:"";
    display:block;
    width:200px;
    height:6px;
    margin-top:16px;
    border-radius:6px;
    background:linear-gradient(90deg,#4CAF50 0%,#8BC34A 35%,#FFC107 70%,#FF8C00 100%);
    box-shadow:0 4px 14px rgba(76,175,80,.30);
}

/* Description */
.pp-desc{
    color:#5A6A82;
    font-size:16px;
    line-height:1.75;
    max-width:560px;
    margin-bottom:34px;
    font-weight:400;
}

/* =========================================================
   BUTTONS
========================================================= */

.pp-buttons{
    display:flex;
    flex-wrap:wrap;
    gap:14px;
    align-items:center;
}

/* Become a Partner — Navy+Green gradient */
.btn-become-partner{
    position:relative;
    overflow:hidden;
    display:inline-flex;
    align-items:center;
    gap:10px;
    padding:16px 32px;
    border-radius:50px;
    background:linear-gradient(135deg,#0B2C6B,#1E5BC6 60%,#4CAF50 100%);
    color:#fff;
    font-size:14.5px;
    font-weight:800;
    letter-spacing:.2px;
    text-decoration:none;
    border:none;
    box-shadow:0 14px 30px rgba(30,91,198,.32);
    transition:all .35s ease;
}

.btn-become-partner::before{
    content:"";
    position:absolute;
    top:0;bottom:0;left:-100%;
    width:55%;
    background:linear-gradient(90deg,transparent,rgba(255,255,255,.35),transparent);
    transform:skewX(-20deg);
    transition:left .75s ease;
}

.btn-become-partner:hover::before{left:140%;}

.btn-become-partner:hover{
    color:#fff;
    transform:translateY(-3px);
    box-shadow:0 20px 42px rgba(30,91,198,.48);
}

.btn-become-partner i{
    position:relative;z-index:2;
    transition:transform .3s ease;
}

.btn-become-partner:hover i{transform:translateX(5px);}

/* Watch Our Story — Outline */
.btn-watch-partner-story{
    display:inline-flex;
    align-items:center;
    gap:12px;
    padding:10px 26px 10px 10px;
    border-radius:50px;
    background:rgba(255,255,255,.85);
    backdrop-filter:blur(10px);
    border:2px solid rgba(30,91,198,.25);
    color:#0B2C6B;
    font-size:14.5px;
    font-weight:700;
    letter-spacing:.2px;
    text-decoration:none;
    transition:all .35s ease;
    box-shadow:0 8px 22px rgba(11,31,58,.08);
}

.btn-watch-partner-story:hover{
    border-color:#1E5BC6;
    color:#1E5BC6;
    transform:translateY(-3px);
    box-shadow:0 14px 30px rgba(30,91,198,.20);
}

.play-icon-wrap{
    width:38px;
    height:38px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    background:linear-gradient(135deg,#1E5BC6,#0B2C6B);
    color:#fff;
    font-size:16px;
    flex-shrink:0;
    transition:transform .4s ease;
    box-shadow:0 6px 16px rgba(30,91,198,.30);
    position:relative;
}

.play-icon-wrap::before{
    content:"";
    position:absolute;
    inset:-4px;
    border-radius:50%;
    border:2px solid rgba(30,91,198,.30);
    animation:pulseRing 2.5s ease-in-out infinite;
}

@keyframes pulseRing{
    0%,100%{transform:scale(1);opacity:.7;}
    50%{transform:scale(1.15);opacity:.3;}
}

.btn-watch-partner-story:hover .play-icon-wrap{
    transform:scale(1.08);
}

/* =========================================================
   RIGHT VISUAL — ORGANIC CURVED IMAGE
========================================================= */

.pp-right{position:relative;z-index:3;}

.pp-visual{
    position:relative;
    width:100%;
    max-width:620px;
    margin-left:auto;
    aspect-ratio:1.15/1;
    display:flex;
    align-items:center;
    justify-content:center;
}

/* Organic blobs behind image */
.pp-blob{
    position:absolute;
    border-radius:50%;
    filter:blur(45px);
    z-index:0;
    pointer-events:none;
}

.pp-blob-green{
    width:70%;
    height:70%;
    top:-10%;
    left:-10%;
    background:radial-gradient(circle, rgba(76,175,80,.55) 0%, rgba(76,175,80,.20) 50%, transparent 75%);
    animation:blobFloat 8s ease-in-out infinite;
}

.pp-blob-orange{
    width:60%;
    height:60%;
    bottom:-10%;
    right:-8%;
    background:radial-gradient(circle, rgba(255,140,0,.55) 0%, rgba(255,193,7,.20) 50%, transparent 75%);
    animation:blobFloat 9s ease-in-out infinite reverse;
}

@keyframes blobFloat{
    0%,100%{transform:translate(0,0) scale(1);}
    50%{transform:translate(-10px,-8px) scale(1.08);}
}

/* Image wrap — organic curved shape */
.pp-image-wrap{
    position:relative;
    z-index:2;
    width:88%;
    height:88%;
    overflow:hidden;

    /* Organic asymmetric curve like reference */
    border-radius:50% 50% 45% 55% / 55% 45% 55% 45%;

    box-shadow:
        0 30px 65px rgba(11,31,58,.22),
        0 10px 25px rgba(11,31,58,.10),
        0 0 0 6px rgba(255,255,255,.9),
        0 0 0 10px rgba(76,175,80,.12);

    background:#fff;

    animation:organicMorph 14s ease-in-out infinite;
}

@keyframes organicMorph{
    0%,100%{border-radius:50% 50% 45% 55% / 55% 45% 55% 45%;}
    50%{border-radius:45% 55% 50% 50% / 50% 55% 45% 50%;}
}

.pp-image-wrap img{
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:center;
    display:block;
    transition:transform .8s ease;
}

.pp-visual:hover .pp-image-wrap img{
    transform:scale(1.05);
}

/* =========================================================
   FLOATING BADGES
========================================================= */

.pp-badge{
    position:absolute;
    z-index:5;

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

    padding:14px 22px 14px 14px;
    border-radius:18px;

    background:linear-gradient(135deg,rgba(255,255,255,.98),rgba(255,255,255,.88));
    backdrop-filter:blur(18px) saturate(180%);
    -webkit-backdrop-filter:blur(18px) saturate(180%);

    border:1px solid rgba(255,255,255,.95);
    box-shadow:
        0 22px 50px rgba(11,31,58,.16),
        0 6px 15px rgba(11,31,58,.08),
        inset 0 1px 0 rgba(255,255,255,.95);
}

/* Badge 1 — top-left */
.pp-badge-top{
    top:2%;
    left:-4%;
    animation:floatCard 5s ease-in-out infinite;
}

/* Badge 2 — bottom-right */
.pp-badge-bottom{
    bottom:2%;
    right:-2%;
    animation:floatCard 6s ease-in-out infinite .5s;
}

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

/* Badge icon */
.pp-badge-icon{
    width:48px;
    height:48px;
    flex-shrink:0;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:14px;
    color:#fff;
    font-size:22px;
    box-shadow:0 8px 20px rgba(0,0,0,.15);
    transition:transform .4s ease;
}

.pp-badge:hover .pp-badge-icon{
    transform:scale(1.10) rotate(-6deg);
}

.pp-icon-green{
    background:linear-gradient(135deg,#1E5BC6,#0B2C6B);
    box-shadow:0 8px 20px rgba(30,91,198,.35);
}

.pp-icon-green-soft{
    background:linear-gradient(135deg,#66BB6A,#2E7D32);
    box-shadow:0 8px 20px rgba(76,175,80,.35);
}

/* Badge text */
.pp-badge-text{display:flex;flex-direction:column;line-height:1.15;}

.pp-badge-text strong{
    font-family:'Manrope',sans-serif;
    font-size:14px;
    font-weight:800;
    color:#0B2C6B;
    letter-spacing:-.2px;
}

.pp-badge-text small{
    font-size:11px;
    color:#6A7A90;
    font-weight:600;
    letter-spacing:.2px;
    margin-top:3px;
}

/* =========================================================
   BOTTOM — STATS CARD
========================================================= */

.pp-stats-card{
    position:relative;
    z-index:3;

    display:flex;
    align-items:center;
    gap:32px;
    flex-wrap:wrap;

    padding:34px 44px;
    border-radius:28px;

    /* Glass card */
    background:linear-gradient(135deg,rgba(255,255,255,.98),rgba(255,255,255,.90));
    backdrop-filter:blur(20px) saturate(180%);
    -webkit-backdrop-filter:blur(20px) saturate(180%);

    border:1px solid rgba(255,255,255,.95);
    box-shadow:
        0 25px 60px rgba(11,31,58,.10),
        inset 0 1px 0 rgba(255,255,255,.95);
}

/* Gradient border ring */
.pp-stats-card::before{
    content:"";
    position:absolute;
    inset:0;
    border-radius:28px;
    padding:1.5px;
    background:linear-gradient(135deg,
        rgba(76,175,80,.40),
        rgba(255,193,7,.35),
        rgba(255,140,0,.40),
        rgba(30,91,198,.30));
    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    -webkit-mask-composite:xor;
    mask-composite:exclude;
    pointer-events:none;
}

/* Left intro block */
.pp-stats-intro{
    display:flex;
    gap:18px;
    flex:1;
    min-width:320px;
    max-width:480px;
}

.pp-stats-icon{
    width:60px;
    height:60px;
    flex-shrink:0;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    background:linear-gradient(135deg,#E8F5E9,#C8E6C9);
    color:#4CAF50;
    font-size:28px;
    box-shadow:
        0 10px 24px rgba(76,175,80,.20),
        inset 0 1px 0 rgba(255,255,255,.7);
}

.pp-stats-intro-text{
    display:flex;
    flex-direction:column;
    gap:4px;
}

.pp-stats-eyebrow{
    color:#3FA34D;
    font-size:10.5px;
    font-weight:800;
    letter-spacing:2px;
    text-transform:uppercase;
    margin-bottom:2px;
}

.pp-stats-intro-text strong{
    font-family:'Manrope',sans-serif;
    font-size:18px;
    font-weight:800;
    color:#0B2C6B;
    letter-spacing:-.3px;
    margin-bottom:6px;
}

.pp-stats-intro-text p{
    color:#6A7A90;
    font-size:12.5px;
    line-height:1.55;
    margin:0;
    font-weight:500;
}

/* Divider */
.pp-stats-divider{
    width:1px;
    height:80px;
    background:linear-gradient(180deg,transparent,#E0E7F0,transparent);
    flex-shrink:0;
}

/* Stats grid */
.pp-stats-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:24px;
    flex:1;
    min-width:0;
}

.pp-stat{
    display:flex;
    flex-direction:column;
    align-items:center;
    text-align:center;
    gap:8px;
    transition:transform .35s ease;
    cursor:pointer;
}

.pp-stat:hover{transform:translateY(-4px);}

.pp-stat-icon{
    width:48px;
    height:48px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    color:#fff;
    font-size:20px;
    transition:transform .4s ease;
    box-shadow:0 8px 18px rgba(0,0,0,.15);
}

.pp-stat:hover .pp-stat-icon{
    transform:scale(1.10) rotate(-6deg);
}

/* Stat icon colors */
.icon-handshake{
    background:linear-gradient(135deg,#66BB6A,#2E7D32);
    box-shadow:0 8px 18px rgba(76,175,80,.30);
}
.icon-building{
    background:linear-gradient(135deg,#1E5BC6,#0B2C6B);
    box-shadow:0 8px 18px rgba(30,91,198,.30);
}
.icon-community{
    background:linear-gradient(135deg,#66BB6A,#2E7D32);
    box-shadow:0 8px 18px rgba(76,175,80,.30);
}
.icon-target{
    background:linear-gradient(135deg,#26A69A,#00796B);
    box-shadow:0 8px 18px rgba(38,166,154,.30);
}

.pp-stat-number{
    font-family:'Manrope',sans-serif;
    font-size:22px;
    font-weight:800;
    color:#0B2C6B;
    letter-spacing:-.5px;
    line-height:1;
}

.pp-stat-label{
    font-size:11.5px;
    color:#6A7A90;
    font-weight:600;
    letter-spacing:.2px;
    line-height:1.4;
    max-width:120px;
}

/* =========================================================
   ANIMATIONS
========================================================= */

@keyframes floatLeafA{
    0%,100%{transform:translateY(0) rotate(-30deg);}
    50%{transform:translateY(-15px) rotate(-20deg);}
}
@keyframes floatLeafB{
    0%,100%{transform:translateY(0) rotate(20deg);}
    50%{transform:translateY(-12px) rotate(10deg);}
}
@keyframes floatLeafC{
    0%,100%{transform:translateY(0) rotate(30deg);}
    50%{transform:translateY(-10px) rotate(40deg);}
}

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

@media(max-width:1199.98px){
    .partners-page-section{padding:95px 0 105px;}
    .pp-title{letter-spacing:-1.4px;}
    .pp-desc{font-size:15px;}
    .pp-visual{max-width:540px;}
    .pp-stats-card{padding:28px 32px;gap:24px;}
    .pp-stats-grid{gap:20px;}
    .pp-stat-number{font-size:20px;}
}

/* Tablet */
@media(max-width:991.98px){

    .partners-page-section{padding:80px 0 90px;}

    /* LEFT centered */
    .pp-left{
        text-align:center;
        margin-bottom:40px;
    }

    .pp-label{justify-content:center;}
    .pp-desc{margin-left:auto;margin-right:auto;}
    .pp-title-green::after{margin-left:auto;margin-right:auto;}
    .pp-buttons{justify-content:center;}

    /* Visual */
    .pp-visual{max-width:520px;margin:0 auto;}

    .pp-badge-top{left:0;top:2%;}
    .pp-badge-bottom{right:0;bottom:2%;}

    /* Stats card — stacked */
    .pp-stats-card{
        flex-direction:column;
        padding:28px 26px;
        gap:22px;
        align-items:stretch;
    }

    .pp-stats-intro{
        max-width:100%;
        min-width:0;
        justify-content:center;
    }

    .pp-stats-divider{
        width:80%;
        height:1px;
        background:linear-gradient(90deg,transparent,#E0E7F0,transparent);
        align-self:center;
    }

    .pp-stats-grid{
        grid-template-columns:repeat(4,1fr);
        gap:16px;
    }

    .pp-stat-number{font-size:18px;}
    .pp-stat-label{font-size:10.5px;}
}

/* Mobile */
@media(max-width:575.98px){

    .partners-page-section{padding:65px 0 75px;}

    .pp-title{letter-spacing:-1px;}
    .pp-title-green::after{width:150px;height:5px;}

    .pp-desc{font-size:14.5px;}

    /* Buttons stacked */
    .pp-buttons{flex-direction:column;width:100%;}

    .btn-become-partner,
    .btn-watch-partner-story{
        width:100%;
        justify-content:center;
    }

    /* Visual */
    .pp-visual{max-width:340px;aspect-ratio:1/1;}

    .pp-badge{
        padding:10px 16px 10px 10px;
        gap:9px;
        border-radius:14px;
    }

    .pp-badge-icon{width:38px;height:38px;font-size:18px;border-radius:11px;}
    .pp-badge-text strong{font-size:12px;}
    .pp-badge-text small{font-size:10px;}

    .pp-badge-top{top:0;left:-2%;}
    .pp-badge-bottom{bottom:0;right:-2%;}

    /* Stats */
    .pp-stats-card{padding:24px 20px;border-radius:22px;}

    .pp-stats-icon{width:52px;height:52px;font-size:24px;}

    .pp-stats-intro-text strong{font-size:16px;}
    .pp-stats-intro-text p{font-size:12px;}

    .pp-stats-grid{
        grid-template-columns:repeat(2,1fr);
        gap:22px 14px;
    }

    .pp-stat-icon{width:44px;height:44px;font-size:18px;}
    .pp-stat-number{font-size:18px;}
    .pp-stat-label{font-size:10.5px;}
}


/* =========================================================
   OUR PARTNERS — LOGO GRID SECTION
========================================================= */

.partners-logos-section{
    position:relative;
    padding:100px 0 110px;
    overflow:hidden;
    isolation:isolate;
    background:#FDFCF7;
}

/* =========================================================
   AMBIENT GLOW
========================================================= */

.partners-logos-section::before{
    content:"";
    position:absolute;inset:0;z-index:0;pointer-events:none;
    background:
        radial-gradient(ellipse 55% 45% at -5% -5%,
            rgba(76,175,80,.28) 0%, rgba(76,175,80,.11) 32%, transparent 72%),
        radial-gradient(ellipse 55% 45% at 105% -5%,
            rgba(255,140,0,.26) 0%, rgba(255,193,7,.11) 32%, transparent 72%),
        radial-gradient(ellipse 60% 50% at -5% 105%,
            rgba(255,140,0,.24) 0%, rgba(255,193,7,.10) 35%, transparent 75%),
        radial-gradient(ellipse 65% 55% at 105% 105%,
            rgba(76,175,80,.24) 0%, rgba(255,193,7,.11) 25%,
            rgba(255,140,0,.10) 55%, transparent 82%),
        radial-gradient(ellipse 90% 70% at 50% 50%,
            rgba(232,240,252,.40) 0%, transparent 70%);
}

.partners-logos-section::after{
    content:"";
    position:absolute;inset:0;z-index:0;pointer-events:none;
    background:radial-gradient(ellipse 120% 90% at 50% 50%,
        rgba(253,252,247,0) 0%, rgba(253,252,247,.15) 60%, rgba(253,252,247,.55) 100%);
}

.pls-bg{
    position:absolute;inset:0;pointer-events:none;z-index:1;overflow:hidden;
}

.pls-bg::before{
    content:"";position:absolute;top:-25%;left:-20%;
    width:70%;height:110%;
    background:radial-gradient(ellipse at 30% 40%,
        rgba(76,175,80,.20) 0%, rgba(76,175,80,.08) 40%, transparent 70%);
    border-radius:50% 40% 60% 45% / 55% 60% 40% 50%;
    filter:blur(50px);transform:rotate(-15deg);opacity:.95;
}

.pls-bg::after{
    content:"";position:absolute;bottom:-35%;right:-25%;
    width:85%;height:120%;
    background:radial-gradient(ellipse at 60% 60%,
        rgba(255,140,0,.20) 0%, rgba(255,193,7,.10) 30%,
        rgba(76,175,80,.08) 60%, transparent 80%);
    border-radius:45% 55% 40% 60% / 60% 45% 55% 40%;
    filter:blur(55px);transform:rotate(-12deg);opacity:.95;
}

/* Decorative SVG curves */
.pls-curve{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    opacity:.6;
}

/* Leaves */
.pls-leaf,.pls-orange-leaf{
    position:absolute;display:block;
    border-radius:0 100% 0 100%;
    filter:drop-shadow(0 6px 14px rgba(0,0,0,.10));
    opacity:.9;z-index:2;
}
.pls-leaf{background:linear-gradient(135deg,#66BB6A,#2E7D32);}
.pls-orange-leaf{background:linear-gradient(135deg,#FFB74D,#E88918);}

.pls-leaf-1{width:60px;height:60px;top:10%;left:1.5%;animation:plsFloatA 7s ease-in-out infinite;}
.pls-leaf-2{width:44px;height:44px;top:60%;left:2.5%;animation:plsFloatB 8s ease-in-out infinite reverse;}
.pls-leaf-3{width:52px;height:52px;bottom:12%;right:2%;animation:plsFloatC 6.5s ease-in-out infinite;}
.pls-leaf-4{width:36px;height:36px;top:8%;right:4%;animation:plsFloatA 7.5s ease-in-out infinite reverse;}
.pls-orange-1{width:34px;height:34px;top:45%;right:3%;animation:plsFloatB 7s ease-in-out infinite;}

.pls-dot{
    position:absolute;width:5px;height:5px;border-radius:50%;
    background:rgba(255,140,0,.55);
    box-shadow:0 0 8px rgba(255,140,0,.4);
    z-index:2;
}
.pls-dot-1{top:8%;right:8%;}
.pls-dot-2{top:10%;right:10%;}
.pls-dot-3{top:12%;right:8%;}

@keyframes plsFloatA{
    0%,100%{transform:translateY(0) rotate(-30deg);}
    50%{transform:translateY(-15px) rotate(-20deg);}
}
@keyframes plsFloatB{
    0%,100%{transform:translateY(0) rotate(20deg);}
    50%{transform:translateY(-12px) rotate(10deg);}
}
@keyframes plsFloatC{
    0%,100%{transform:translateY(0) rotate(30deg);}
    50%{transform:translateY(-10px) rotate(40deg);}
}

/* =========================================================
   HEADER
========================================================= */

.pls-header{
    position:relative;
    z-index:3;
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:30px;
    flex-wrap:wrap;
    margin-bottom:50px;
}

.pls-header-left{max-width:680px;}

/* Label */
.pls-label{
    display:inline-flex;
    align-items:center;
    gap:10px;
    color:#4CAF50;
    font-size:12px;
    font-weight:800;
    letter-spacing:3.5px;
    text-transform:uppercase;
    margin-bottom:16px;
}

.pls-label-dot{
    width:8px;height:8px;
    border-radius:50%;
    background:#4CAF50;
    box-shadow:0 0 0 4px rgba(76,175,80,.15);
}

.pls-label-line{
    display:inline-block;
    width:28px;height:2px;
    background:linear-gradient(90deg,#4CAF50,#FFC107);
    border-radius:2px;
}

/* Title — Our (navy) Partners (green+blue gradient) */
.pls-title{
    font-family:'Manrope',sans-serif;
    font-size:clamp(34px,4.4vw,56px);
    font-weight:800;
    line-height:1.08;
    letter-spacing:-1.8px;
    color:#0B2C6B;
    margin-bottom:16px;
    display:flex;
    flex-wrap:wrap;
    gap:14px;
    align-items:baseline;
}

.pls-title span{
    background:linear-gradient(135deg,#1E5BC6 0%,#26A69A 40%,#4CAF50 100%);
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent;
    -webkit-text-fill-color:transparent;
    position:relative;
}

.pls-title span::after{
    content:"";
    position:absolute;
    bottom:-6px;
    left:0;
    width:100%;
    height:5px;
    border-radius:5px;
    background:linear-gradient(90deg,#1E5BC6 0%,#26A69A 40%,#4CAF50 70%,#FFC107 100%);
    box-shadow:0 3px 12px rgba(30,91,198,.30);
}

.pls-desc{
    color:#5A6A82;
    font-size:15.5px;
    line-height:1.7;
    margin:0;
    font-weight:400;
    max-width:560px;
}

/* Arrows */
.pls-header-right{
    display:flex;
    gap:12px;
    align-items:center;
    padding-bottom:6px;
}

.pls-arrow{
    width:52px;
    height:52px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;

    background:#fff;
    border:1.5px solid rgba(11,31,58,.10);
    color:#1E5BC6;
    font-size:20px;
    cursor:pointer;

    box-shadow:
        0 8px 22px rgba(11,31,58,.08),
        inset 0 1px 0 rgba(255,255,255,.9);

    transition:all .35s cubic-bezier(.2,.8,.2,1);
}

.pls-arrow:hover{
    background:linear-gradient(135deg,#1E5BC6,#0B2C6B);
    color:#fff;
    border-color:transparent;
    transform:translateY(-3px) scale(1.06);
    box-shadow:0 14px 30px rgba(30,91,198,.35);
}

.pls-arrow:active{
    transform:translateY(-1px) scale(1.02);
}

/* =========================================================
   LOGO GRID
========================================================= */

.pls-grid{
    position:relative;
    z-index:3;
    display:grid;
    grid-template-columns:repeat(5, 1fr);
    gap:24px;
}

/* Logo Card */
.pls-logo-card{
    position:relative;

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

    height:130px;
    padding:24px 20px;

    border-radius:20px;

    /* Glass card */
    background:linear-gradient(135deg,rgba(255,255,255,.98),rgba(255,255,255,.92));
    backdrop-filter:blur(14px);
    -webkit-backdrop-filter:blur(14px);

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

    box-shadow:
        0 12px 30px rgba(11,31,58,.08),
        0 3px 10px rgba(11,31,58,.04);

    transition:all .45s cubic-bezier(.2,.8,.2,1);
    cursor:pointer;
    overflow:hidden;
}

/* Gradient border on hover */
.pls-logo-card::before{
    content:"";
    position:absolute;
    inset:0;
    border-radius:20px;
    padding:1.5px;
    background:linear-gradient(135deg,
        rgba(76,175,80,.50),
        rgba(255,193,7,.45),
        rgba(255,140,0,.50),
        rgba(30,91,198,.40));
    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    -webkit-mask-composite:xor;
    mask-composite:exclude;
    pointer-events:none;
    opacity:0;
    transition:opacity .4s ease;
}

.pls-logo-card:hover::before{opacity:1;}

.pls-logo-card:hover{
    transform:translateY(-8px);
    box-shadow:
        0 30px 60px rgba(11,31,58,.16),
        0 10px 25px rgba(11,31,58,.08);
}

/* Subtle corner glow */
.pls-logo-card::after{
    content:"";
    position:absolute;
    width:100px;
    height:100px;
    top:-40px;
    right:-40px;
    border-radius:50%;
    background:radial-gradient(circle,
        rgba(76,175,80,.18) 0%,
        rgba(76,175,80,.05) 50%,
        transparent 75%);
    opacity:0;
    transition:opacity .4s ease, transform .55s ease;
    pointer-events:none;
}

.pls-logo-card:hover::after{
    opacity:1;
    transform:scale(1.4);
}

/* Logo image */
.pls-logo-card img{
    max-width:100%;
    max-height:100%;
    width:auto;
    height:auto;
    object-fit:contain;

    filter:grayscale(0%) contrast(1);
    transition:transform .5s cubic-bezier(.2,.8,.2,1);
    display:block;
    position:relative;
    z-index:2;
}

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

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

@media(max-width:1199.98px){
    .partners-logos-section{padding:90px 0 100px;}
    .pls-grid{grid-template-columns:repeat(4, 1fr);gap:20px;}
    .pls-logo-card{height:120px;padding:20px 18px;}
}

/* Tablet */
@media(max-width:991.98px){

    .partners-logos-section{padding:80px 0 90px;}

    .pls-header{
        flex-direction:column;
        align-items:flex-start;
        gap:20px;
        margin-bottom:44px;
    }

    .pls-header-right{padding-bottom:0;}

    .pls-grid{grid-template-columns:repeat(3, 1fr);gap:18px;}

    .pls-logo-card{height:115px;padding:20px 16px;}

    .pls-arrow{width:46px;height:46px;font-size:18px;}
}

/* Mobile */
@media(max-width:575.98px){

    .partners-logos-section{padding:65px 0 75px;}

    .pls-title{letter-spacing:-1px;gap:10px;}
    .pls-title span::after{height:4px;bottom:-4px;}
    .pls-desc{font-size:14.5px;}

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

    /* 2 columns */
    .pls-grid{
        grid-template-columns:repeat(2, 1fr);
        gap:14px;
    }

    .pls-logo-card{
        height:100px;
        padding:16px 12px;
        border-radius:16px;
    }

    .pls-logo-card::before{border-radius:16px;}

    .pls-leaf-1{width:44px;height:44px;}
    .pls-leaf-2{width:34px;height:34px;}
    .pls-leaf-3{width:40px;height:40px;}
}


/* =========================================================
   TYPES OF PARTNERSHIPS — WE COLLABORATE
========================================================= */

.collaborate-section{
    position:relative;
    padding:100px 0 110px;
    overflow:hidden;
    isolation:isolate;
    background:#FDFCF7;
}

/* Ambient glow */
.collaborate-section::before{
    content:"";
    position:absolute;inset:0;z-index:0;pointer-events:none;
    background:
        radial-gradient(ellipse 55% 45% at -5% -5%,
            rgba(76,175,80,.28) 0%, rgba(76,175,80,.11) 32%, transparent 72%),
        radial-gradient(ellipse 55% 45% at 105% -5%,
            rgba(255,140,0,.28) 0%, rgba(255,193,7,.12) 32%, transparent 72%),
        radial-gradient(ellipse 60% 50% at -5% 105%,
            rgba(255,140,0,.24) 0%, rgba(255,193,7,.10) 35%, transparent 75%),
        radial-gradient(ellipse 65% 55% at 105% 105%,
            rgba(76,175,80,.24) 0%, rgba(255,193,7,.11) 25%,
            rgba(255,140,0,.10) 55%, transparent 82%),
        radial-gradient(ellipse 90% 70% at 50% 50%,
            rgba(232,240,252,.42) 0%, transparent 70%);
}

.collaborate-section::after{
    content:"";
    position:absolute;inset:0;z-index:0;pointer-events:none;
    background:radial-gradient(ellipse 120% 90% at 50% 50%,
        rgba(253,252,247,0) 0%, rgba(253,252,247,.15) 60%, rgba(253,252,247,.55) 100%);
}

.coll-bg{
    position:absolute;inset:0;pointer-events:none;z-index:1;overflow:hidden;
}

.coll-bg::before{
    content:"";position:absolute;top:-25%;left:-20%;
    width:70%;height:110%;
    background:radial-gradient(ellipse at 30% 40%,
        rgba(76,175,80,.20) 0%, rgba(76,175,80,.08) 40%, transparent 70%);
    border-radius:50% 40% 60% 45% / 55% 60% 40% 50%;
    filter:blur(50px);transform:rotate(-15deg);opacity:.95;
}

.coll-bg::after{
    content:"";position:absolute;bottom:-35%;right:-25%;
    width:85%;height:120%;
    background:radial-gradient(ellipse at 60% 60%,
        rgba(255,140,0,.20) 0%, rgba(255,193,7,.10) 30%,
        rgba(76,175,80,.08) 60%, transparent 80%);
    border-radius:45% 55% 40% 60% / 60% 45% 55% 40%;
    filter:blur(55px);transform:rotate(-12deg);opacity:.95;
}

/* Leaves */
.coll-leaf,.coll-orange-leaf{
    position:absolute;display:block;
    border-radius:0 100% 0 100%;
    filter:drop-shadow(0 6px 14px rgba(0,0,0,.10));
    opacity:.9;z-index:2;
}
.coll-leaf{background:linear-gradient(135deg,#66BB6A,#2E7D32);}
.coll-orange-leaf{background:linear-gradient(135deg,#FFB74D,#E88918);}

.coll-leaf-1{width:56px;height:56px;top:10%;left:1.5%;animation:collFloatA 7s ease-in-out infinite;}
.coll-leaf-2{width:42px;height:42px;top:60%;left:2.5%;animation:collFloatB 8s ease-in-out infinite reverse;}
.coll-leaf-3{width:48px;height:48px;bottom:10%;right:2%;animation:collFloatC 6.5s ease-in-out infinite;}
.coll-orange-1{width:34px;height:34px;top:45%;right:2.5%;animation:collFloatB 7s ease-in-out infinite;}

.coll-dot{
    position:absolute;width:5px;height:5px;border-radius:50%;
    background:rgba(255,140,0,.55);
    box-shadow:0 0 8px rgba(255,140,0,.4);
    z-index:2;
}
.coll-dot-1{top:8%;right:6%;}
.coll-dot-2{top:10%;right:8%;}

@keyframes collFloatA{
    0%,100%{transform:translateY(0) rotate(-30deg);}
    50%{transform:translateY(-15px) rotate(-20deg);}
}
@keyframes collFloatB{
    0%,100%{transform:translateY(0) rotate(20deg);}
    50%{transform:translateY(-12px) rotate(10deg);}
}
@keyframes collFloatC{
    0%,100%{transform:translateY(0) rotate(30deg);}
    50%{transform:translateY(-10px) rotate(40deg);}
}

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

.coll-left{position:relative;z-index:3;}

.coll-label{
    display:inline-flex;
    align-items:center;
    gap:10px;
    color:#4CAF50;
    font-size:12px;
    font-weight:800;
    letter-spacing:3.5px;
    text-transform:uppercase;
    margin-bottom:18px;
}

.coll-label-line{
    display:inline-block;
    width:32px;
    height:2px;
    background:linear-gradient(90deg,#4CAF50,#FFC107);
    border-radius:2px;
    position:relative;
}

.coll-label-line::before{
    content:"";position:absolute;left:-6px;top:50%;
    transform:translateY(-50%);
    width:7px;height:7px;border-radius:50%;
    background:#4CAF50;
    box-shadow:0 0 0 4px rgba(76,175,80,.15);
}

/* Title */
.coll-title{
    font-family:'Manrope',sans-serif;
    font-size:clamp(30px,3.6vw,46px);
    font-weight:800;
    line-height:1.15;
    letter-spacing:-1.4px;
    color:#0B2C6B;
    margin-bottom:16px;
}

.coll-title span{
    color:#3FA34D;
}

/* Description */
.coll-desc{
    color:#5A6A82;
    font-size:15.5px;
    line-height:1.7;
    max-width:560px;
    margin-bottom:26px;
    font-weight:400;
}

/* Sub heading */
.coll-sub{
    display:flex;
    align-items:center;
    gap:10px;
    font-size:14px;
    color:#0B2C6B;
    margin-bottom:20px;
    font-weight:600;
}

.coll-sub i{
    font-size:8px;
    color:#4CAF50;
}

.coll-sub strong{
    font-family:'Manrope',sans-serif;
    font-weight:800;
    letter-spacing:-.2px;
}

/* =========================================================
   4 PARTNERSHIP CARDS
========================================================= */

.coll-cards{
    display:grid;
    grid-template-columns:repeat(2, 1fr);
    gap:14px;
}

.coll-card{
    position:relative;
    padding:20px 20px 22px;
    border-radius:16px;

    background:linear-gradient(135deg,rgba(255,255,255,.98),rgba(255,255,255,.90));
    backdrop-filter:blur(14px);
    -webkit-backdrop-filter:blur(14px);

    border:1px solid rgba(255,255,255,.95);
    box-shadow:
        0 10px 26px rgba(11,31,58,.07),
        0 3px 10px rgba(11,31,58,.04);

    transition:all .4s cubic-bezier(.2,.8,.2,1);
    cursor:pointer;
    overflow:hidden;
}

.coll-card::before{
    content:"";
    position:absolute;
    inset:0;
    border-radius:16px;
    padding:1.5px;
    background:linear-gradient(135deg,
        rgba(76,175,80,.40),
        rgba(255,193,7,.35),
        rgba(255,140,0,.40),
        rgba(30,91,198,.30));
    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    -webkit-mask-composite:xor;
    mask-composite:exclude;
    pointer-events:none;
    opacity:0;
    transition:opacity .4s ease;
}

.coll-card:hover::before{opacity:1;}

.coll-card:hover{
    transform:translateY(-6px);
    box-shadow:
        0 22px 50px rgba(11,31,58,.14),
        0 8px 20px rgba(11,31,58,.08);
}

/* Card icon */
.coll-card-icon{
    width:44px;
    height:44px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    color:#fff;
    font-size:19px;
    margin-bottom:12px;
    transition:transform .4s ease;
    box-shadow:0 8px 18px rgba(0,0,0,.15);
}

.coll-card:hover .coll-card-icon{
    transform:scale(1.10) rotate(-6deg);
}

.icon-blue{background:linear-gradient(135deg,#1E5BC6,#0B2C6B);box-shadow:0 8px 18px rgba(30,91,198,.30);}
.icon-teal{background:linear-gradient(135deg,#26A69A,#00796B);box-shadow:0 8px 18px rgba(38,166,154,.30);}
.icon-green{background:linear-gradient(135deg,#66BB6A,#2E7D32);box-shadow:0 8px 18px rgba(76,175,80,.30);}
.icon-orange{background:linear-gradient(135deg,#FFB74D,#E88918);box-shadow:0 8px 18px rgba(255,140,0,.30);}

/* Card title */
.coll-card-title{
    font-family:'Manrope',sans-serif;
    font-size:14px;
    font-weight:800;
    color:#0B2C6B;
    letter-spacing:-.2px;
    line-height:1.25;
    margin-bottom:5px;
    transition:color .3s ease;
}

.coll-card:hover .coll-card-title{color:#1E5BC6;}

.coll-card-desc{
    color:#6A7A90;
    font-size:11.5px;
    font-weight:600;
    margin:0;
    line-height:1.4;
    letter-spacing:.1px;
}

/* =========================================================
   RIGHT VISUAL — ORGANIC CURVED IMAGE
========================================================= */

.coll-right{position:relative;z-index:3;}

.coll-visual{
    position:relative;
    width:100%;
    max-width:600px;
    margin-left:auto;
    aspect-ratio:1/1;
    display:flex;
    align-items:center;
    justify-content:center;
}

/* Organic blobs behind */
.coll-blob{
    position:absolute;
    border-radius:50%;
    filter:blur(45px);
    z-index:0;
    pointer-events:none;
}

.coll-blob-green{
    width:70%;
    height:70%;
    top:-8%;
    left:-8%;
    background:radial-gradient(circle, rgba(76,175,80,.55) 0%, rgba(76,175,80,.20) 50%, transparent 75%);
    animation:collBlobFloat 8s ease-in-out infinite;
}

.coll-blob-orange{
    width:60%;
    height:60%;
    bottom:-10%;
    right:-6%;
    background:radial-gradient(circle, rgba(255,140,0,.55) 0%, rgba(255,193,7,.20) 50%, transparent 75%);
    animation:collBlobFloat 9s ease-in-out infinite reverse;
}

@keyframes collBlobFloat{
    0%,100%{transform:translate(0,0) scale(1);}
    50%{transform:translate(-10px,-8px) scale(1.08);}
}

/* Organic rings — teal + green + orange */
.coll-ring{
    position:absolute;
    border-radius:50%;
    z-index:1;
    pointer-events:none;
    border-style:solid;
    border-color:transparent;
}

.coll-ring-green{
    inset:-4%;
    border-width:3px;
    border-top-color:#4CAF50;
    border-right-color:#8BC34A;
    border-bottom-color:#FFC107;
    border-left-color:#4CAF50;
    animation:collRingRotate 20s linear infinite;
    opacity:.75;
}

.coll-ring-orange{
    inset:-10%;
    border-width:2px;
    border-top-color:transparent;
    border-right-color:rgba(255,140,0,.55);
    border-bottom-color:transparent;
    border-left-color:rgba(255,193,7,.55);
    animation:collRingRotate 25s linear infinite reverse;
    opacity:.65;
}

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

/* Image wrap — organic curve */
.coll-image-wrap{
    position:relative;
    z-index:2;
    width:82%;
    height:82%;
    overflow:hidden;

    /* Organic asymmetric curve */
    border-radius:55% 45% 50% 50% / 55% 50% 50% 45%;

    box-shadow:
        0 30px 65px rgba(11,31,58,.22),
        0 10px 25px rgba(11,31,58,.10),
        0 0 0 6px rgba(255,255,255,.9),
        0 0 0 10px rgba(76,175,80,.12);

    background:#fff;

    animation:collOrganicMorph 14s ease-in-out infinite;
}

@keyframes collOrganicMorph{
    0%,100%{border-radius:55% 45% 50% 50% / 55% 50% 50% 45%;}
    50%{border-radius:45% 55% 45% 55% / 50% 55% 45% 55%;}
}

.coll-image-wrap img{
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:center;
    display:block;
    transition:transform .8s ease;
}

.coll-visual:hover .coll-image-wrap img{
    transform:scale(1.05);
}

/* =========================================================
   SCRIPT TEXT
========================================================= */

.coll-script{
    position:absolute;
    top:22%;
    right:0;
    z-index:5;
    display:flex;
    flex-direction:column;
    align-items:flex-end;
    gap:2px;
    transform:rotate(-4deg);
    pointer-events:none;
}

.coll-script span{
    font-family:'Brush Script MT','Dancing Script','Great Vibes',cursive;
    font-size:clamp(24px,2.6vw,34px);
    font-weight:700;
    color:#0B2C6B;
    line-height:1.05;
    letter-spacing:.5px;
    text-align:right;
    text-shadow:
        0 2px 10px rgba(255,255,255,.95),
        0 0 24px rgba(255,255,255,.85);
}

.coll-script-underline,
.coll-script-underline-2{
    position:relative;
    color:#0B2C6B;
}

.coll-script-underline::after,
.coll-script-underline-2::after{
    content:"";
    position:absolute;
    left:4%;bottom:-6px;
    width:92%;height:3px;
    background:linear-gradient(90deg,#FFC107,#FF8C00,#4CAF50);
    border-radius:3px;
    transform:rotate(-3deg);
    box-shadow:0 2px 10px rgba(255,140,0,.40);
}

/* =========================================================
   LEAF DECORATIONS ON IMAGE
========================================================= */

.coll-leaf-deco{
    position:absolute;
    z-index:5;
    display:block;
    border-radius:0 100% 0 100%;
    background:linear-gradient(135deg,#66BB6A,#2E7D32);
    filter:drop-shadow(0 6px 12px rgba(0,0,0,.15));
}

.coll-leaf-deco-1{
    width:56px;height:56px;
    top:18%;left:2%;
    animation:collFloatA 6s ease-in-out infinite;
}

.coll-leaf-deco-2{
    width:38px;height:38px;
    bottom:18%;right:6%;
    animation:collFloatB 5.5s ease-in-out infinite reverse;
}

/* =========================================================
   BECOME OUR PARTNER — DARK CTA BANNER
========================================================= */

.become-partner-section{
    position:relative;
    padding:0;
    background:#0B1F3A;
    overflow:hidden;
    isolation:isolate;
}

.bp-banner{
    position:relative;
    min-height:400px;
    overflow:hidden;

    /* Dark navy gradient */
    background:
        linear-gradient(105deg,
            #061426 0%,
            #0B1F3A 30%,
            #123264 60%,
            #1E5BC6 100%);
}

/* Ambient glows inside */
.bp-glow{
    position:absolute;
    border-radius:50%;
    pointer-events:none;
    z-index:1;
    filter:blur(90px);
    opacity:.55;
}

.bp-glow-green{
    width:400px;height:400px;
    background:radial-gradient(circle, rgba(76,175,80,.60) 0%, transparent 70%);
    left:-100px;bottom:-120px;
}

.bp-glow-orange{
    width:450px;height:450px;
    background:radial-gradient(circle, rgba(255,140,0,.50) 0%, transparent 70%);
    right:-150px;top:-150px;
}

.bp-glow-teal{
    width:350px;height:350px;
    background:radial-gradient(circle, rgba(38,166,154,.45) 0%, transparent 70%);
    right:30%;bottom:-180px;
}

/* Leaves inside banner */
.bp-leaf{
    position:absolute;
    display:block;
    border-radius:0 100% 0 100%;
    background:linear-gradient(135deg,#66BB6A,#2E7D32);
    opacity:.55;
    z-index:2;
    filter:drop-shadow(0 6px 12px rgba(0,0,0,.30));
}

.bp-leaf-1{width:50px;height:50px;top:12%;left:2%;animation:collFloatA 7s ease-in-out infinite;}
.bp-leaf-2{width:40px;height:40px;bottom:15%;left:35%;animation:collFloatB 8s ease-in-out infinite reverse;}
.bp-leaf-3{width:36px;height:36px;top:20%;left:50%;animation:collFloatC 6s ease-in-out infinite;}

/* Row */
.bp-row{min-height:400px;align-items:center;}

/* =========================================================
   LEFT — CONTENT
========================================================= */

.bp-left{
    position:relative;
    z-index:3;
    padding:60px 30px 60px 0;
}

.bp-label{
    display:inline-flex;
    align-items:center;
    gap:8px;
    color:#FFC107;
    font-size:11.5px;
    font-weight:800;
    letter-spacing:3px;
    text-transform:uppercase;
    margin-bottom:16px;
}

.bp-label i{
    font-size:14px;
    color:#FFC107;
    transform:rotate(-10deg);
}

.bp-title{
    font-family:'Manrope',sans-serif;
    font-size:clamp(30px,3.6vw,46px);
    font-weight:800;
    line-height:1.1;
    letter-spacing:-1.4px;
    color:#fff;
    margin-bottom:18px;
}

.bp-title span{
    background:linear-gradient(135deg,#FFC107,#FF8C00);
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent;
    -webkit-text-fill-color:transparent;
}

.bp-desc{
    color:rgba(255,255,255,.78);
    font-size:14.5px;
    line-height:1.7;
    margin-bottom:28px;
    font-weight:400;
    max-width:440px;
}

/* Partner With Us button */
.btn-partner-with-us{
    position:relative;
    overflow:hidden;
    display:inline-flex;
    align-items:center;
    gap:10px;
    padding:15px 30px;
    border-radius:50px;
    background:linear-gradient(135deg,#FFC107,#FF8C00);
    color:#0B1F3A;
    font-size:14.5px;
    font-weight:800;
    letter-spacing:.2px;
    text-decoration:none;
    border:none;
    box-shadow:0 14px 30px rgba(255,140,0,.40);
    transition:all .35s ease;
}

.btn-partner-with-us::before{
    content:"";
    position:absolute;
    top:0;bottom:0;left:-100%;
    width:55%;
    background:linear-gradient(90deg,transparent,rgba(255,255,255,.55),transparent);
    transform:skewX(-20deg);
    transition:left .75s ease;
}

.btn-partner-with-us:hover::before{left:140%;}

.btn-partner-with-us:hover{
    color:#0B1F3A;
    transform:translateY(-3px);
    box-shadow:0 20px 42px rgba(255,140,0,.55);
}

.btn-partner-with-us i{
    position:relative;z-index:2;
    transition:transform .3s ease;
}

.btn-partner-with-us:hover i{transform:translateX(5px);}

/* =========================================================
   CENTER — 3 STEPS
========================================================= */

.bp-center{
    position:relative;
    z-index:3;
    padding:60px 20px;
}

.bp-steps{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
}

.bp-step{
    display:flex;
    flex-direction:column;
    align-items:center;
    text-align:center;
    gap:6px;
    flex-shrink:0;
    transition:transform .4s ease;
    cursor:pointer;
}

.bp-step:hover{transform:translateY(-4px);}

.bp-step-icon{
    width:60px;
    height:60px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    background:rgba(255,255,255,.10);
    backdrop-filter:blur(10px);
    border:1.5px solid rgba(255,255,255,.25);
    color:#fff;
    font-size:24px;
    transition:all .4s ease;
    box-shadow:0 8px 20px rgba(0,0,0,.30);
}

.bp-step:hover .bp-step-icon{
    background:linear-gradient(135deg,#FFC107,#FF8C00);
    color:#0B1F3A;
    border-color:transparent;
    transform:scale(1.10);
    box-shadow:0 12px 28px rgba(255,140,0,.45);
}

.bp-step strong{
    font-family:'Manrope',sans-serif;
    font-size:14px;
    font-weight:800;
    color:#fff;
    letter-spacing:-.2px;
    margin-top:6px;
}

.bp-step small{
    font-size:11px;
    color:rgba(255,255,255,.62);
    font-weight:500;
    letter-spacing:.2px;
    line-height:1.35;
}

/* Connecting line between steps */
.bp-step-line{
    flex:1;
    height:1.5px;
    background:linear-gradient(90deg,
        rgba(255,255,255,.10),
        rgba(255,193,7,.55),
        rgba(255,255,255,.10));
    min-width:20px;
    max-width:60px;
    align-self:flex-start;
    margin-top:30px;
}

/* =========================================================
   RIGHT — IMAGE
========================================================= */

/* Container ke andar se image ko edge tak nikal do */
.bp-banner .container{
    max-width:100%;
    padding-left:0;
    padding-right:0;
}

.bp-row{
    margin-left:0;
    margin-right:0;
}

/* Left content ko andar rakhne ke liye apna padding do */
.bp-left{
    padding-left:max(15px, calc((100vw - 1320px) / 2 + 15px));
    padding-right:30px;
}

.bp-center{
    padding-left:20px;
    padding-right:20px;
}

/* Right column full width */
.bp-right{
    padding:0;
    margin:0;
    position:relative;
    z-index:3;
    height:100%;
    min-height:400px;
}

.bp-image-wrap{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    overflow:hidden;
    border-top-left-radius:120px;
    border-top-right-radius:0;   /* 🔥 Right edge pe straight */
    border-bottom-right-radius:0;
}

.bp-image-wrap img{
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:center;
    display:block;
}

/* Gradient fade on left side of image */
.bp-image-wrap::before{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(90deg,
        rgba(11,31,58,.85) 0%,
        rgba(11,31,58,.40) 25%,
        rgba(11,31,58,.05) 60%,
        transparent 100%);
    pointer-events:none;
    z-index:1;
}

/* Script text */
.bp-script{
    position:absolute;
    top:8%;
    right:6%;
    z-index:5;
    display:flex;
    flex-direction:column;
    align-items:flex-end;
    gap:2px;
    transform:rotate(-4deg);
    pointer-events:none;
}

.bp-script span{
    font-family:'Brush Script MT','Dancing Script','Great Vibes',cursive;
    font-size:clamp(24px,2.6vw,38px);
    font-weight:700;
    color:#fff;
    line-height:1.05;
    letter-spacing:.5px;
    text-align:right;
    text-shadow:
        0 4px 12px rgba(0,0,0,.55),
        0 0 20px rgba(11,31,58,.55);
}

.bp-script-underline{
    position:relative;
    color:#fff;
}

.bp-script-underline::after{
    content:"";
    position:absolute;
    left:4%;bottom:-8px;
    width:92%;height:3.5px;
    background:linear-gradient(90deg,#FFC107,#FF8C00);
    border-radius:3px;
    transform:rotate(-3deg);
    box-shadow:0 2px 10px rgba(255,140,0,.65);
}

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

@media(max-width:1199.98px){
    .collaborate-section{padding:90px 0 100px;}
    .coll-title{letter-spacing:-1.2px;}
    .coll-visual{max-width:520px;}
    .bp-title{font-size:36px;}
    .bp-step-icon{width:54px;height:54px;font-size:21px;}
    .bp-step strong{font-size:13px;}
}

/* Tablet */
@media(max-width:991.98px){

    .collaborate-section{padding:80px 0 90px;}

    /* LEFT centered */
    .coll-left{
        text-align:center;
        margin-bottom:40px;
    }

    .coll-label{justify-content:center;}
    .coll-desc{margin-left:auto;margin-right:auto;}
    .coll-sub{justify-content:center;}

    .coll-cards{max-width:600px;margin:0 auto;}

    .coll-visual{max-width:520px;margin:0 auto;}

    /* BANNER — stacked */
    .bp-banner{min-height:auto;}
    .bp-row{min-height:auto;flex-direction:column;}

    .bp-left{
        padding:50px 30px 30px;
        text-align:center;
    }

    .bp-label{justify-content:center;}
    .bp-desc{margin-left:auto;margin-right:auto;}
    .bp-title{letter-spacing:-1px;}

    .bp-center{
        padding:30px;
        width:100%;
    }

    .bp-steps{justify-content:center;gap:20px;}

    .bp-right{
        min-height:280px;
        width:100%;
        padding:0;
    }

    .bp-image-wrap{
        position:relative;
        inset:auto;
        border-top-left-radius:0;
        border-top-right-radius:0;
        height:280px;
    }

    .bp-image-wrap::before{
        background:linear-gradient(180deg,
            rgba(11,31,58,.85) 0%,
            rgba(11,31,58,.40) 30%,
            rgba(11,31,58,.05) 65%,
            transparent 100%);
    }

    .bp-script{top:8%;right:6%;}
}

/* Mobile */
@media(max-width:575.98px){

    .collaborate-section{padding:65px 0 75px;}

    .coll-title{letter-spacing:-1px;}

    .coll-cards{grid-template-columns:1fr;gap:12px;}

    .coll-card{padding:16px 18px;border-radius:14px;}

    .coll-card-icon{width:40px;height:40px;font-size:17px;}

    .coll-card-title{font-size:13.5px;}
    .coll-card-desc{font-size:11px;}

    /* Visual */
    .coll-visual{max-width:340px;}

    .coll-script{
        top:16%;
        right:-4%;
        transform:rotate(-4deg) scale(.85);
    }

    .coll-leaf-deco-1{width:40px;height:40px;}
    .coll-leaf-deco-2{width:28px;height:28px;}

    /* BANNER */
    .bp-left{padding:40px 20px 24px;}
    .bp-title{letter-spacing:-.8px;}
    .bp-desc{font-size:13.5px;}

    .btn-partner-with-us{
        width:100%;
        justify-content:center;
    }

    /* Steps — 3 columns small */
    .bp-center{padding:20px;}
    .bp-steps{flex-wrap:wrap;gap:14px;}

    .bp-step{flex:1 1 auto;min-width:80px;}
    .bp-step-icon{width:48px;height:48px;font-size:19px;}
    .bp-step strong{font-size:12px;}
    .bp-step small{font-size:10px;}

    .bp-step-line{display:none;}

    .bp-right{min-height:220px;}

    .bp-image-wrap{height:220px;border-top-right-radius:0;}

    .bp-script{
        top:10%;
        right:5%;
        transform:rotate(-4deg) scale(.85);
    }
}


    /* =========================================================
       SHARED AMBIENT BACKGROUND
    ========================================================= */

    .campaign-section{
        position:relative;
        padding:80px 0 100px;
        overflow:hidden;
        isolation:isolate;
    }

    .campaign-section::before{
        content:"";
        position:absolute;inset:0;z-index:0;pointer-events:none;
        background:
            radial-gradient(ellipse 55% 45% at -5% -5%,
                rgba(76,175,80,.26) 0%, rgba(76,175,80,.10) 32%, transparent 72%),
            radial-gradient(ellipse 55% 45% at 105% -5%,
                rgba(255,140,0,.28) 0%, rgba(255,193,7,.12) 32%, transparent 72%),
            radial-gradient(ellipse 60% 50% at -5% 105%,
                rgba(255,140,0,.24) 0%, rgba(255,193,7,.10) 35%, transparent 75%),
            radial-gradient(ellipse 65% 55% at 105% 105%,
                rgba(76,175,80,.24) 0%, rgba(255,193,7,.11) 25%,
                rgba(255,140,0,.10) 55%, transparent 82%),
            radial-gradient(ellipse 90% 70% at 50% 50%,
                rgba(232,240,252,.42) 0%, transparent 70%);
    }

    .campaign-section::after{
        content:"";
        position:absolute;inset:0;z-index:0;pointer-events:none;
        background:radial-gradient(ellipse 120% 90% at 50% 50%,
            rgba(253,252,247,0) 0%, rgba(253,252,247,.15) 60%,
            rgba(253,252,247,.55) 100%);
    }

    .cs-container{position:relative;z-index:3;}

    /* =========================================================
       FLOATING LEAVES
    ========================================================= */

    .cs-leaf,.cs-orange-leaf{
        position:absolute;display:block;
        border-radius:0 100% 0 100%;
        filter:drop-shadow(0 6px 14px rgba(0,0,0,.10));
        opacity:.9;z-index:2;pointer-events:none;
    }
    .cs-leaf{background:linear-gradient(135deg,#66BB6A,#2E7D32);}
    .cs-orange-leaf{background:linear-gradient(135deg,#FFB74D,#E88918);}

    .cs-leaf-1{width:60px;height:60px;top:6%;left:1.5%;animation:csFloatA 7s ease-in-out infinite;}
    .cs-leaf-2{width:44px;height:44px;bottom:12%;right:2%;animation:csFloatB 8s ease-in-out infinite reverse;}
    .cs-orange-1{width:36px;height:36px;top:38%;left:2%;animation:csFloatC 7.5s ease-in-out infinite;}

    @keyframes csFloatA{
        0%,100%{transform:translateY(0) rotate(-30deg);}
        50%{transform:translateY(-15px) rotate(-20deg);}
    }
    @keyframes csFloatB{
        0%,100%{transform:translateY(0) rotate(20deg);}
        50%{transform:translateY(-12px) rotate(10deg);}
    }
    @keyframes csFloatC{
        0%,100%{transform:translateY(0) rotate(30deg);}
        50%{transform:translateY(-10px) rotate(40deg);}
    }

    /* =========================================================
       SECTION 1 HEADER — "OUR CAMPAIGNS"
    ========================================================= */

    .cs-header-1{
        display:flex;
        align-items:center;
        justify-content:space-between;
        gap:30px;
        flex-wrap:wrap;
        margin-bottom:36px;
    }

    .cs-header-1-left{max-width:520px;}

    .cs-eyebrow{
        display:inline-flex;
        align-items:center;
        gap:10px;
        color:#4CAF50;
        font-size:11.5px;
        font-weight:800;
        letter-spacing:3px;
        text-transform:uppercase;
        margin-bottom:14px;
    }

    .cs-eyebrow-line{
        display:inline-block;
        width:28px;height:2px;
        background:linear-gradient(90deg,#4CAF50,#FFC107);
        border-radius:2px;
        position:relative;
    }

    .cs-eyebrow-line::before{
        content:"";position:absolute;left:-6px;top:50%;
        transform:translateY(-50%);
        width:7px;height:7px;border-radius:50%;
        background:#4CAF50;
        box-shadow:0 0 0 4px rgba(76,175,80,.15);
    }

    .cs-title{
        font-family:'Manrope',sans-serif;
        font-size:clamp(32px,3.8vw,48px);
        font-weight:800;
        line-height:1.1;
        letter-spacing:-1.4px;
        color:var(--navy);
        margin-bottom:12px;
    }

    .cs-title span{
        background:linear-gradient(135deg,#1E5BC6,#168A58);
        -webkit-background-clip:text;
        background-clip:text;
        color:transparent;
        -webkit-text-fill-color:transparent;
        display:block;
    }

    .cs-sub{
        color:#5A6A82;
        font-size:15px;
        line-height:1.7;
        margin:0;
        font-weight:400;
    }

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

    .cs-filter{
        display:flex;
        gap:8px;
        flex-wrap:wrap;
        justify-content:flex-end;
        align-items:center;
    }

    .cs-pill{
        display:inline-flex;
        align-items:center;
        gap:7px;
        padding:10px 18px;
        border-radius:50px;
        border:1.5px solid rgba(11,31,58,.10);
        background:linear-gradient(135deg,rgba(255,255,255,.98),rgba(255,255,255,.85));
        backdrop-filter:blur(10px);
        color:#2E425E;
        font-size:12.5px;
        font-weight:700;
        cursor:pointer;
        transition:all .35s cubic-bezier(.2,.8,.2,1);
        white-space:nowrap;
        font-family:'DM Sans',sans-serif;
    }

    .cs-pill i{font-size:13px;}

    .cs-pill:hover{
        border-color:rgba(30,91,198,.30);
        transform:translateY(-2px);
        box-shadow:0 8px 20px rgba(11,31,58,.08);
    }

    .cs-pill.active{
        background:linear-gradient(135deg,#1E5BC6,#168A58);
        border-color:transparent;
        color:#fff;
        box-shadow:0 10px 24px rgba(30,91,198,.35);
    }

    /* Pill icon colors */
    .cs-pill .pill-icon-education{color:#E88918;}
    .cs-pill .pill-icon-healthcare{color:#E31E24;}
    .cs-pill .pill-icon-career{color:#E88918;}
    .cs-pill .pill-icon-community{color:#704BA0;}
    .cs-pill .pill-icon-environment{color:#4CAF50;}
    .cs-pill.active .pill-icon-education,
    .cs-pill.active .pill-icon-healthcare,
    .cs-pill.active .pill-icon-career,
    .cs-pill.active .pill-icon-community,
    .cs-pill.active .pill-icon-environment{color:#fff;}

    /* =========================================================
       FEATURED CAMPAIGN CARD
    ========================================================= */

    .cs-featured{
        position:relative;
        display:grid;
        grid-template-columns:1fr 1.15fr;
        gap:0;
        background:linear-gradient(135deg,rgba(255,255,255,.98),rgba(255,255,255,.92));
        backdrop-filter:blur(18px);
        border-radius:28px;
        overflow:hidden;
        border:1px solid rgba(255,255,255,.95);
        box-shadow:
            0 30px 70px rgba(11,31,58,.12),
            0 8px 22px rgba(11,31,58,.06);
        margin-bottom:80px;
        transition:all .5s ease;
    }

    .cs-featured:hover{
        transform:translateY(-6px);
        box-shadow:
            0 40px 85px rgba(11,31,58,.18),
            0 12px 30px rgba(11,31,58,.10);
    }

    /* Featured image — organic curve right */
    .cs-featured-image{
        position:relative;
        min-height:420px;
        overflow:hidden;
    }

    .cs-featured-image img{
        position:absolute;
        inset:0;
        width:100%;
        height:100%;
        object-fit:cover;
        transition:transform .8s cubic-bezier(.2,.8,.2,1);
    }

    .cs-featured:hover .cs-featured-image img{
        transform:scale(1.05);
    }

    /* Organic curve overlay on right side */
    .cs-featured-image::after{
        content:"";
        position:absolute;
        top:0;right:-1px;bottom:0;
        width:80px;
        background:linear-gradient(90deg,
            transparent,
            rgba(255,255,255,.85));
        z-index:2;
        pointer-events:none;
    }

    /* Featured badge */
    .cs-featured-badge{
        position:absolute;
        bottom:20px;
        left:20px;
        z-index:3;
        display:inline-flex;
        align-items:center;
        gap:8px;
        padding:10px 18px;
        border-radius:50px;
        background:linear-gradient(135deg,#4CAF50,#2E7D32);
        color:#fff;
        font-size:10.5px;
        font-weight:800;
        letter-spacing:1.4px;
        text-transform:uppercase;
        box-shadow:0 10px 24px rgba(76,175,80,.40);
    }

    .cs-featured-badge i{
        font-size:13px;
        animation:heartBeat 2s ease-in-out infinite;
    }

    @keyframes heartBeat{
        0%,100%{transform:scale(1);}
        50%{transform:scale(1.20);}
    }

    /* Featured content */
    .cs-featured-content{
        padding:50px 50px 50px 40px;
        display:grid;
        grid-template-columns:1fr auto;
        gap:36px;
        align-items:center;
    }

    .cs-featured-main{max-width:520px;}

    .cs-featured-cat{
        display:inline-flex;
        align-items:center;
        gap:7px;
        padding:7px 16px;
        border-radius:50px;
        background:linear-gradient(135deg,#1E5BC6,#0B2C6B);
        color:#fff;
        font-size:10.5px;
        font-weight:800;
        letter-spacing:1.6px;
        text-transform:uppercase;
        margin-bottom:18px;
        box-shadow:0 6px 16px rgba(30,91,198,.28);
    }

    .cs-featured-cat i{font-size:12px;}

    .cs-featured-title{
        font-family:'Manrope',sans-serif;
        font-size:clamp(26px,2.8vw,38px);
        font-weight:800;
        line-height:1.15;
        letter-spacing:-1.1px;
        color:var(--navy);
        margin-bottom:12px;
    }

    .cs-featured-title span{
        display:block;
        background:linear-gradient(135deg,#1E5BC6,#168A58);
        -webkit-background-clip:text;
        background-clip:text;
        color:transparent;
        -webkit-text-fill-color:transparent;
    }

    .cs-featured-desc{
        color:#5A6A82;
        font-size:14.5px;
        line-height:1.75;
        margin:0 0 22px;
        font-weight:400;
    }

    /* Feature tags row */
    .cs-featured-tags{
        display:flex;
        gap:10px;
        flex-wrap:wrap;
        margin-bottom:26px;
    }

    .cs-featured-tag{
        display:inline-flex;
        align-items:center;
        gap:7px;
        padding:8px 14px;
        border-radius:30px;
        background:rgba(76,175,80,.08);
        border:1px solid rgba(76,175,80,.20);
        color:#2E7D32;
        font-size:11.5px;
        font-weight:700;
    }

    .cs-featured-tag i{
        color:#4CAF50;
        font-size:13px;
    }

    /* Learn More button */
    .cs-featured-btn{
        position:relative;
        overflow:hidden;
        display:inline-flex;
        align-items:center;
        gap:10px;
        padding:14px 28px;
        border-radius:50px;
        background:linear-gradient(135deg,#4CAF50,#2E7D32);
        color:#fff;
        font-size:14px;
        font-weight:800;
        letter-spacing:.2px;
        text-decoration:none;
        border:none;
        box-shadow:0 14px 30px rgba(76,175,80,.35);
        transition:all .35s ease;
    }

    .cs-featured-btn::before{
        content:"";
        position:absolute;
        top:0;bottom:0;left:-100%;
        width:55%;
        background:linear-gradient(90deg,transparent,rgba(255,255,255,.40),transparent);
        transform:skewX(-20deg);
        transition:left .75s ease;
    }

    .cs-featured-btn:hover::before{left:140%;}

    .cs-featured-btn:hover{
        color:#fff;
        transform:translateY(-3px);
        box-shadow:0 20px 42px rgba(76,175,80,.48);
    }

    .cs-featured-btn i{
        position:relative;z-index:2;
        transition:transform .3s ease;
    }

    .cs-featured-btn:hover i{transform:translateX(5px);}

    /* Right side feature list (vertical) */
    .cs-featured-list{
        display:flex;
        flex-direction:column;
        gap:14px;
        min-width:200px;
    }

    .cs-featured-list-item{
        display:flex;
        align-items:center;
        gap:12px;
        padding:10px 16px;
        border-radius:14px;
        background:linear-gradient(135deg,rgba(255,255,255,.96),rgba(255,255,255,.80));
        border:1px solid rgba(255,255,255,.95);
        box-shadow:0 6px 16px rgba(11,31,58,.06);
        transition:all .35s ease;
        cursor:pointer;
    }

    .cs-featured-list-item:hover{
        transform:translateX(4px);
        border-color:rgba(76,175,80,.30);
        box-shadow:0 10px 24px rgba(76,175,80,.12);
    }

    .cs-featured-list-icon{
        width:34px;
        height:34px;
        display:flex;
        align-items:center;
        justify-content:center;
        border-radius:10px;
        background:linear-gradient(135deg,#66BB6A,#2E7D32);
        color:#fff;
        font-size:15px;
        flex-shrink:0;
        box-shadow:0 6px 14px rgba(76,175,80,.28);
    }

    .cs-featured-list-text{
        font-family:'Manrope',sans-serif;
        font-size:12.5px;
        font-weight:800;
        color:var(--navy);
        letter-spacing:-.2px;
    }

    /* =========================================================
       SECTION 2 HEADER — "EXPLORE OUR CAMPAIGNS"
    ========================================================= */

    .cs-header-2{
        display:flex;
        align-items:flex-end;
        justify-content:space-between;
        gap:30px;
        flex-wrap:wrap;
        margin-bottom:36px;
        padding-top:20px;
        border-top:1px solid rgba(11,31,58,.08);
    }

    .cs-header-2-left{max-width:520px;}

    .cs-header-2-left h2{
        font-family:'Manrope',sans-serif;
        font-size:clamp(28px,3.4vw,42px);
        font-weight:800;
        line-height:1.15;
        letter-spacing:-1.3px;
        color:var(--navy);
        margin-bottom:10px;
    }

    .cs-header-2-left h2 span{
        background:linear-gradient(135deg,#1E5BC6,#168A58);
        -webkit-background-clip:text;
        background-clip:text;
        color:transparent;
        -webkit-text-fill-color:transparent;
    }

    .cs-header-2-left p{
        color:#5A6A82;
        font-size:14.5px;
        line-height:1.7;
        margin:0;
    }

    /* Search + Toggle */
    .cs-header-2-right{
        display:flex;
        align-items:center;
        gap:14px;
        flex-wrap:wrap;
    }

    .cs-search{
        position:relative;
        display:flex;
        align-items:center;
        background:linear-gradient(135deg,rgba(255,255,255,.98),rgba(255,255,255,.85));
        backdrop-filter:blur(12px);
        border:1.5px solid rgba(255,255,255,.95);
        border-radius:50px;
        padding:4px;
        box-shadow:
            0 10px 26px rgba(11,31,58,.08),
            inset 0 1px 0 rgba(255,255,255,.9);
        transition:all .35s ease;
    }

    .cs-search:focus-within{
        border-color:rgba(30,91,198,.35);
        box-shadow:0 14px 32px rgba(30,91,198,.14);
    }

    .cs-search i{
        padding:0 6px 0 14px;
        color:#8A96A6;
        font-size:15px;
    }

    .cs-search input{
        border:none;
        outline:none;
        background:transparent;
        padding:10px 16px 10px 8px;
        font-size:13px;
        font-family:'DM Sans',sans-serif;
        color:var(--navy);
        width:200px;
    }

    .cs-search input::placeholder{color:#8A96A6;}

    .cs-toggle{
        display:flex;
        background:linear-gradient(135deg,rgba(255,255,255,.98),rgba(255,255,255,.85));
        backdrop-filter:blur(12px);
        border:1.5px solid rgba(255,255,255,.95);
        border-radius:50px;
        padding:4px;
        box-shadow:
            0 10px 26px rgba(11,31,58,.08),
            inset 0 1px 0 rgba(255,255,255,.9);
    }

    .cs-toggle-btn{
        padding:10px 22px;
        border-radius:50px;
        border:none;
        background:transparent;
        color:#5A6A82;
        font-size:12.5px;
        font-weight:700;
        cursor:pointer;
        transition:all .35s ease;
        font-family:'DM Sans',sans-serif;
    }

    .cs-toggle-btn:hover{color:var(--blue);}

    .cs-toggle-btn.active{
        background:linear-gradient(135deg,#1E5BC6,#0B2C6B);
        color:#fff;
        box-shadow:0 8px 20px rgba(30,91,198,.28);
    }

    /* =========================================================
       CAMPAIGNS GRID (3 × 2)
    ========================================================= */

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

    /* =========================================================
       CAMPAIGN CARD
    ========================================================= */

    .cs-card{
        position:relative;
        display:flex;
        flex-direction:column;
        background:linear-gradient(135deg,rgba(255,255,255,.98),rgba(255,255,255,.92));
        backdrop-filter:blur(14px);
        border-radius:20px;
        overflow:hidden;
        border:1px solid rgba(255,255,255,.95);
        box-shadow:
            0 12px 30px rgba(11,31,58,.08),
            0 3px 10px rgba(11,31,58,.04);
        transition:all .45s cubic-bezier(.2,.8,.2,1);
    }

    .cs-card:hover{
        transform:translateY(-8px);
        box-shadow:
            0 28px 55px rgba(11,31,58,.16),
            0 8px 20px rgba(11,31,58,.08);
    }

    /* Card image */
    .cs-card-image{
        position:relative;
        width:100%;
        height:190px;
        overflow:hidden;
        flex-shrink:0;
    }

    .cs-card-image img{
        width:100%;
        height:100%;
        object-fit:cover;
        transition:transform .7s cubic-bezier(.2,.8,.2,1);
    }

    .cs-card:hover .cs-card-image img{
        transform:scale(1.08);
    }

    /* Overlay gradient */
    .cs-card-image::after{
        content:"";
        position:absolute;
        inset:auto 0 0 0;
        height:60%;
        background:linear-gradient(0deg,
            rgba(11,31,58,.55) 0%,
            rgba(11,31,58,.15) 60%,
            transparent 100%);
        pointer-events:none;
        z-index:1;
    }

    /* Category pill — bottom-left overlay */
    .cs-card-cat{
        position:absolute;
        bottom:14px;
        left:14px;
        z-index:2;
        display:inline-flex;
        align-items:center;
        gap:6px;
        padding:7px 14px;
        border-radius:50px;
        font-size:10px;
        font-weight:800;
        letter-spacing:1.2px;
        text-transform:uppercase;
        color:#fff;
        box-shadow:0 8px 20px rgba(0,0,0,.28);
        border:1px solid rgba(255,255,255,.18);
    }

    .cs-card-cat i{font-size:11px;}

    /* Category colors */
    .cat-healthcare{background:linear-gradient(135deg,#E31E24,#B31217);}
    .cat-education{background:linear-gradient(135deg,#1E5BC6,#0B2C6B);}
    .cat-career{background:linear-gradient(135deg,#FF8C00,#E88918);}
    .cat-women{background:linear-gradient(135deg,#EC407A,#C2185B);}
    .cat-community{background:linear-gradient(135deg,#704BA0,#5A3782);}
    .cat-environment{background:linear-gradient(135deg,#4CAF50,#2E7D32);}

    /* Status pill — top-right */
    .cs-card-status{
        position:absolute;
        top:14px;
        right:14px;
        z-index:2;
        display:inline-flex;
        align-items:center;
        gap:5px;
        padding:6px 12px;
        border-radius:50px;
        font-size:9.5px;
        font-weight:800;
        letter-spacing:.8px;
        text-transform:uppercase;
        backdrop-filter:blur(10px);
        box-shadow:0 6px 14px rgba(0,0,0,.18);
        border:1px solid rgba(255,255,255,.30);
    }

    .status-ongoing{
        color:#2E7D32;
        background:rgba(255,255,255,.95);
    }

    .status-ongoing::before{
        content:"";
        width:6px;
        height:6px;
        border-radius:50%;
        background:#4CAF50;
        box-shadow:0 0 0 3px rgba(76,175,80,.20);
        animation:pulseDot 2s ease-in-out infinite;
    }

    .status-upcoming{
        color:#B56513;
        background:rgba(255,255,255,.95);
    }

    .status-upcoming::before{
        content:"";
        width:6px;
        height:6px;
        border-radius:50%;
        background:#FF8C00;
        box-shadow:0 0 0 3px rgba(255,140,0,.20);
        animation:pulseDot 2s ease-in-out infinite;
    }

    @keyframes pulseDot{
        0%,100%{transform:scale(1);opacity:1;}
        50%{transform:scale(1.3);opacity:.85;}
    }

    /* Card body */
    .cs-card-body{
        padding:22px 22px 24px;
        display:flex;
        flex-direction:column;
        flex:1;
    }

    .cs-card-title{
        font-family:'Manrope',sans-serif;
        font-size:17px;
        font-weight:800;
        color:var(--navy);
        letter-spacing:-.3px;
        line-height:1.3;
        margin-bottom:10px;
        transition:color .3s ease;
    }

    .cs-card:hover .cs-card-title{color:var(--blue);}

    .cs-card-desc{
        color:#5A6A82;
        font-size:13px;
        line-height:1.65;
        margin-bottom:16px;
        font-weight:400;
        flex:1;
    }

    .cs-card-link{
        display:inline-flex;
        align-items:center;
        gap:7px;
        color:var(--blue);
        font-size:12.5px;
        font-weight:800;
        text-decoration:none;
        transition:all .3s ease;
        padding-top:14px;
        border-top:1px solid rgba(11,31,58,.06);
        margin-top:auto;
    }

    .cs-card-link:hover{
        color:#168A58;
        gap:11px;
    }

    .cs-card-link i{
        transition:transform .3s ease;
        font-size:12px;
    }

    .cs-card-link:hover i{transform:translateX(4px);}

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

    @media(max-width:1199.98px){
        .campaign-section{padding:70px 0 90px;}
        .cs-featured-content{
            padding:40px 40px 40px 32px;
            gap:28px;
        }
        .cs-featured-title{font-size:30px;}
        .cs-featured-list{min-width:180px;}
        .cs-search input{width:160px;}
    }

    /* Tablet */
    @media(max-width:991.98px){

        .campaign-section{padding:60px 0 80px;}

        .cs-header-1{
            flex-direction:column;
            align-items:flex-start;
            gap:24px;
        }

        .cs-filter{
            justify-content:flex-start;
            width:100%;
            overflow-x:auto;
            flex-wrap:nowrap;
            padding-bottom:4px;
            scrollbar-width:none;
        }

        .cs-filter::-webkit-scrollbar{display:none;}

        .cs-pill{flex-shrink:0;}

        /* Featured stacked */
        .cs-featured{
            grid-template-columns:1fr;
        }

        .cs-featured-image{min-height:300px;}

        .cs-featured-content{
            grid-template-columns:1fr;
            padding:36px 30px;
            gap:24px;
        }

        .cs-featured-list{
            flex-direction:row;
            flex-wrap:wrap;
            min-width:0;
        }

        .cs-featured-list-item{flex:1 1 auto;}

        /* Header 2 */
        .cs-header-2{
            flex-direction:column;
            align-items:flex-start;
            gap:20px;
        }

        .cs-header-2-right{
            width:100%;
            justify-content:space-between;
        }

        .cs-search input{width:100%;}

        .cs-search{flex:1;}

        /* Grid 2 columns */
        .cs-grid{
            grid-template-columns:repeat(2,1fr);
            gap:20px;
        }
    }

    /* Mobile */
    @media(max-width:575.98px){

        .campaign-section{padding:50px 0 70px;}

        .cs-title{letter-spacing:-1px;}

        .cs-sub{font-size:14px;}

        /* Featured */
        .cs-featured{border-radius:22px;margin-bottom:60px;}
        .cs-featured-image{min-height:240px;}
        .cs-featured-badge{
            padding:8px 14px;
            font-size:9.5px;
            bottom:14px;
            left:14px;
        }
        .cs-featured-content{padding:28px 22px;}
        .cs-featured-title{font-size:24px;letter-spacing:-.8px;}
        .cs-featured-desc{font-size:13.5px;}
        .cs-featured-tags{gap:8px;}
        .cs-featured-tag{font-size:10.5px;padding:7px 12px;}
        .cs-featured-btn{
            width:100%;
            justify-content:center;
            padding:13px 24px;
            font-size:13.5px;
        }
        .cs-featured-list-item{padding:9px 12px;}
        .cs-featured-list-icon{width:30px;height:30px;font-size:13px;}
        .cs-featured-list-text{font-size:11.5px;}

        /* Header 2 */
        .cs-header-2-left h2{letter-spacing:-.8px;}

        .cs-header-2-right{
            flex-direction:column;
            align-items:stretch;
            gap:12px;
        }

        .cs-search{padding:3px;}
        .cs-search input{padding:9px 14px 9px 6px;font-size:12.5px;}

        .cs-toggle{width:100%;}
        .cs-toggle-btn{flex:1;padding:10px 14px;font-size:12px;}

        /* Grid 1 column */
        .cs-grid{grid-template-columns:1fr;gap:18px;}

        .cs-card-image{height:200px;}
        .cs-card-body{padding:20px 18px 22px;}
        .cs-card-title{font-size:16px;}
        .cs-card-desc{font-size:12.5px;}

        .cs-leaf-1{width:44px;height:44px;}
        .cs-leaf-2{width:32px;height:32px;}
    }


     /* =========================================================
       HERO SECTION
    ========================================================= */

    .gi-hero{
        position:relative;
        padding:110px 0 100px;
        overflow:hidden;
        isolation:isolate;
        background:var(--cream);
        min-height:100vh;
        display:flex;
        align-items:center;
    }

    /* 5-layer ambient glow */
    .gi-hero::before{
        content:"";
        position:absolute;inset:0;z-index:0;pointer-events:none;
        background:
            radial-gradient(ellipse 55% 45% at -5% -5%,
                rgba(76,175,80,.30) 0%, rgba(76,175,80,.12) 32%, transparent 72%),
            radial-gradient(ellipse 55% 45% at 105% -5%,
                rgba(255,140,0,.32) 0%, rgba(255,193,7,.14) 32%, transparent 72%),
            radial-gradient(ellipse 60% 50% at -5% 105%,
                rgba(255,140,0,.28) 0%, rgba(255,193,7,.13) 35%, transparent 75%),
            radial-gradient(ellipse 65% 55% at 105% 105%,
                rgba(76,175,80,.28) 0%, rgba(255,193,7,.14) 25%,
                rgba(255,140,0,.10) 55%, transparent 82%),
            radial-gradient(ellipse 90% 70% at 50% 50%,
                rgba(232,240,252,.45) 0%, transparent 70%);
    }

    .gi-hero::after{
        content:"";
        position:absolute;inset:0;z-index:0;pointer-events:none;
        background:radial-gradient(ellipse 120% 90% at 50% 50%,
            rgba(253,252,247,0) 0%, rgba(253,252,247,.15) 60%,
            rgba(253,252,247,.55) 100%);
    }

    /* Organic blurred curves */
    .gi-bg{
        position:absolute;inset:0;pointer-events:none;z-index:1;overflow:hidden;
    }

    .gi-bg::before{
        content:"";position:absolute;top:-25%;left:-20%;
        width:75%;height:115%;
        background:radial-gradient(ellipse at 30% 40%,
            rgba(76,175,80,.24) 0%, rgba(76,175,80,.10) 40%, transparent 70%);
        border-radius:50% 40% 60% 45% / 55% 60% 40% 50%;
        filter:blur(55px);transform:rotate(-15deg);opacity:.95;
        animation:giCurveFloat 12s ease-in-out infinite;
    }

    .gi-bg::after{
        content:"";position:absolute;bottom:-35%;right:-25%;
        width:88%;height:125%;
        background:radial-gradient(ellipse at 60% 60%,
            rgba(255,140,0,.24) 0%, rgba(255,193,7,.12) 30%,
            rgba(76,175,80,.10) 60%, transparent 80%);
        border-radius:45% 55% 40% 60% / 60% 45% 55% 40%;
        filter:blur(60px);transform:rotate(-12deg);opacity:.95;
        animation:giCurveFloat 14s ease-in-out infinite reverse;
    }

    @keyframes giCurveFloat{
        0%,100%{transform:translate(0,0) rotate(-15deg) scale(1);}
        50%{transform:translate(-12px,-10px) rotate(-10deg) scale(1.05);}
    }

    /* =========================================================
       FLOATING LEAVES
    ========================================================= */

    .gi-leaf,.gi-orange-leaf{
        position:absolute;display:block;
        border-radius:0 100% 0 100%;
        filter:drop-shadow(0 8px 16px rgba(0,0,0,.12));
        opacity:.9;z-index:2;pointer-events:none;
    }
    .gi-leaf{background:linear-gradient(135deg,#66BB6A,#2E7D32);}
    .gi-orange-leaf{background:linear-gradient(135deg,#FFB74D,#E88918);}

    .gi-leaf-1{width:60px;height:60px;top:10%;left:2%;animation:giLeafFloatA 7s ease-in-out infinite;}
    .gi-leaf-2{width:44px;height:44px;top:65%;left:3%;animation:giLeafFloatB 8s ease-in-out infinite reverse;}
    .gi-leaf-3{width:50px;height:50px;bottom:12%;right:3%;animation:giLeafFloatC 6.5s ease-in-out infinite;}
    .gi-orange-1{width:36px;height:36px;top:28%;right:4%;animation:giLeafFloatA 7.5s ease-in-out infinite reverse;}

    @keyframes giLeafFloatA{
        0%,100%{transform:translateY(0) rotate(-30deg);}
        50%{transform:translateY(-15px) rotate(-20deg);}
    }
    @keyframes giLeafFloatB{
        0%,100%{transform:translateY(0) rotate(20deg);}
        50%{transform:translateY(-12px) rotate(10deg);}
    }
    @keyframes giLeafFloatC{
        0%,100%{transform:translateY(0) rotate(30deg);}
        50%{transform:translateY(-10px) rotate(40deg);}
    }

    /* Orange dots */
    .gi-dot{
        position:absolute;width:6px;height:6px;border-radius:50%;
        background:linear-gradient(135deg,#FFC107,#FF8C00);
        box-shadow:0 0 12px rgba(255,193,7,.55);
        z-index:2;pointer-events:none;
        animation:giDotPulse 3s ease-in-out infinite;
    }
    .gi-dot-1{top:8%;right:8%;}
    .gi-dot-2{top:10%;right:10%;animation-delay:.5s;}
    .gi-dot-3{top:12%;right:8%;animation-delay:1s;}

    @keyframes giDotPulse{
        0%,100%{transform:scale(1);opacity:1;}
        50%{transform:scale(1.4);opacity:.65;}
    }

    /* =========================================================
       HERO CONTENT LAYOUT
    ========================================================= */

    .gi-container{
        position:relative;
        z-index:3;
    }

    .gi-row{
        min-height:520px;
        align-items:center;
    }

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

    .gi-left{
        position:relative;
        z-index:5;
    }

    /* Breadcrumb */
    .gi-breadcrumb{
        display:inline-flex;
        align-items:center;
        gap:8px;
        margin-bottom:24px;
        padding:7px 16px;
        border-radius:50px;
        background:rgba(255,255,255,.75);
        backdrop-filter:blur(10px);
        border:1px solid rgba(255,255,255,.9);
        box-shadow:0 4px 14px rgba(11,31,58,.06);
        font-size:12.5px;
        font-weight:600;
    }

    .gi-breadcrumb a{
        color:#6A7A90;
        text-decoration:none;
        transition:color .3s ease;
    }
    .gi-breadcrumb a:hover{color:var(--blue);}
    .gi-breadcrumb i{color:#B8C5D6;font-size:10px;}
    .gi-breadcrumb span{color:var(--navy);font-weight:700;}

    /* Label */
    .gi-label{
        display:inline-flex;
        align-items:center;
        gap:10px;
        color:var(--green);
        font-size:12px;
        font-weight:800;
        letter-spacing:3.5px;
        text-transform:uppercase;
        margin-bottom:20px;
    }

    .gi-label-line{
        display:inline-block;
        width:32px;height:2px;
        background:linear-gradient(90deg,var(--green),var(--gold));
        border-radius:2px;
        position:relative;
    }

    .gi-label-line::before{
        content:"";position:absolute;left:-6px;top:50%;
        transform:translateY(-50%);
        width:7px;height:7px;border-radius:50%;
        background:var(--green);
        box-shadow:0 0 0 4px rgba(76,175,80,.15);
    }

    /* Title */
    .gi-title{
        font-family:'Manrope',sans-serif;
        font-size:clamp(38px,5.5vw,72px);
        font-weight:800;
        line-height:1.05;
        letter-spacing:-2.2px;
        color:var(--navy);
        margin-bottom:24px;
    }

    .gi-title span{
        display:block;
        background:linear-gradient(135deg,#1E5BC6 0%,#168A58 55%,#4CAF50 100%);
        -webkit-background-clip:text;
        background-clip:text;
        color:transparent;
        -webkit-text-fill-color:transparent;
        position:relative;
    }

    .gi-title span::after{
        content:"";
        display:block;
        width:180px;
        height:6px;
        margin-top:18px;
        border-radius:6px;
        background:linear-gradient(90deg,
            #4CAF50 0%,
            #8BC34A 35%,
            #FFC107 70%,
            #FF8C00 100%);
        box-shadow:0 4px 14px rgba(76,175,80,.35);
    }

    /* Description */
    .gi-desc{
        color:#5A6A82;
        font-size:16.5px;
        line-height:1.75;
        max-width:520px;
        margin-bottom:36px;
        font-weight:400;
    }

    /* =========================================================
       INLINE STATS
    ========================================================= */

    .gi-stats{
        display:flex;
        gap:28px;
        flex-wrap:wrap;
        align-items:center;
    }

    .gi-stat{
        display:flex;
        align-items:center;
        gap:14px;
        transition:transform .35s ease;
        cursor:pointer;
        padding:12px 18px;
        border-radius:16px;
        background:linear-gradient(135deg,rgba(255,255,255,.96),rgba(255,255,255,.82));
        backdrop-filter:blur(12px);
        border:1px solid rgba(255,255,255,.95);
        box-shadow:0 8px 22px rgba(11,31,58,.07);
    }

    .gi-stat:hover{
        transform:translateY(-4px);
        box-shadow:0 14px 30px rgba(11,31,58,.12);
    }

    .gi-stat-icon{
        width:48px;
        height:48px;
        display:flex;
        align-items:center;
        justify-content:center;
        border-radius:50%;
        color:#fff;
        font-size:20px;
        flex-shrink:0;
        box-shadow:0 8px 18px rgba(0,0,0,.15);
        transition:transform .4s ease;
    }

    .gi-stat:hover .gi-stat-icon{
        transform:scale(1.10) rotate(-6deg);
    }

    .gi-stat-icon-1{background:linear-gradient(135deg,#1E5BC6,#0B2C6B);box-shadow:0 8px 18px rgba(30,91,198,.30);}
    .gi-stat-icon-2{background:linear-gradient(135deg,#66BB6A,#2E7D32);box-shadow:0 8px 18px rgba(76,175,80,.30);}
    .gi-stat-icon-3{background:linear-gradient(135deg,#26A69A,#00796B);box-shadow:0 8px 18px rgba(38,166,154,.30);}

    .gi-stat-text{
        display:flex;
        flex-direction:column;
        line-height:1.15;
    }

    .gi-stat-text strong{
        font-family:'Manrope',sans-serif;
        font-size:20px;
        font-weight:800;
        color:var(--navy);
        letter-spacing:-.4px;
    }

    .gi-stat-text strong span{
        background:linear-gradient(135deg,#1E5BC6,#168A58);
        -webkit-background-clip:text;
        background-clip:text;
        color:transparent;
        -webkit-text-fill-color:transparent;
    }

    .gi-stat-text small{
        font-size:11px;
        color:#6A7A90;
        font-weight:600;
        letter-spacing:.2px;
        margin-top:3px;
    }

    /* =========================================================
       RIGHT — 4-IMAGE ORGANIC COLLAGE
    ========================================================= */

    .gi-right{
        position:relative;
        z-index:4;
    }

    .gi-visual{
        position:relative;
        width:100%;
        max-width:600px;
        margin-left:auto;
        aspect-ratio:1/1;
    }

    /* Organic blobs behind */
    .gi-blob{
        position:absolute;
        border-radius:50%;
        filter:blur(50px);
        z-index:0;
        pointer-events:none;
    }

    .gi-blob-green{
        width:70%;height:70%;
        top:-10%;left:-10%;
        background:radial-gradient(circle,
            rgba(76,175,80,.55) 0%,
            rgba(76,175,80,.20) 50%,
            transparent 75%);
        animation:giBlobFloat 8s ease-in-out infinite;
    }

    .gi-blob-orange{
        width:60%;height:60%;
        bottom:-10%;right:-8%;
        background:radial-gradient(circle,
            rgba(255,140,0,.55) 0%,
            rgba(255,193,7,.20) 50%,
            transparent 75%);
        animation:giBlobFloat 9s ease-in-out infinite reverse;
    }

    @keyframes giBlobFloat{
        0%,100%{transform:translate(0,0) scale(1);}
        50%{transform:translate(-12px,-10px) scale(1.08);}
    }

    /* Image base */
    .gi-img{
        position:absolute;
        overflow:hidden;
        background:#fff;
        padding:5px;
        box-shadow:
            0 25px 55px rgba(11,31,58,.18),
            0 8px 20px rgba(11,31,58,.10);
        transition:all .5s cubic-bezier(.2,.8,.2,1);
        cursor:pointer;
        will-change:transform;
    }

    .gi-img img{
        width:100%;
        height:100%;
        object-fit:cover;
        display:block;
        border-radius:inherit;
        transition:transform .65s ease;
    }

    .gi-img:hover{
        transform:translateY(-10px) scale(1.04);
        z-index:10;
        box-shadow:
            0 35px 70px rgba(11,31,58,.28),
            0 12px 28px rgba(11,31,58,.14);
    }

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

    /* Image 1 — Main (girl student, center-left, biggest) */
    .gi-img-1{
        width:56%;
        height:60%;
        top:22%;
        left:8%;
        border-radius:50% 50% 45% 55% / 55% 45% 55% 45%;
        z-index:3;
        animation:giImgFloatA 7s ease-in-out infinite;
    }

    .gi-img-1 img{border-radius:inherit;}

    /* Image 2 — Top-right (volunteer with kid) */
    .gi-img-2{
        width:42%;
        height:42%;
        top:0;
        right:0;
        border-radius:45% 55% 50% 50% / 50% 55% 45% 55%;
        z-index:2;
        animation:giImgFloatB 8s ease-in-out infinite .3s;
    }

    .gi-img-2 img{border-radius:inherit;}

    /* Image 3 — Bottom-right (women group) */
    .gi-img-3{
        width:48%;
        height:38%;
        bottom:0;
        right:6%;
        border-radius:55% 45% 50% 50% / 50% 50% 55% 45%;
        z-index:4;
        animation:giImgFloatC 6.5s ease-in-out infinite .6s;
    }

    .gi-img-3 img{border-radius:inherit;}

    /* Image 4 — Bottom-left small (community) */
    .gi-img-4{
        width:38%;
        height:32%;
        bottom:6%;
        left:0;
        border-radius:55% 45% 50% 50% / 45% 55% 45% 55%;
        z-index:5;
        animation:giImgFloatA 7.5s ease-in-out infinite .9s;
    }

    .gi-img-4 img{border-radius:inherit;}

    @keyframes giImgFloatA{
        0%,100%{transform:translateY(0);}
        50%{transform:translateY(-10px);}
    }
    @keyframes giImgFloatB{
        0%,100%{transform:translateY(0);}
        50%{transform:translateY(-14px);}
    }
    @keyframes giImgFloatC{
        0%,100%{transform:translateY(0);}
        50%{transform:translateY(-12px);}
    }

    /* =========================================================
       SCRIPT TEXT — TOP RIGHT
    ========================================================= */

    .gi-script{
        position:absolute;
        top:-6%;
        right:-2%;
        z-index:8;
        display:flex;
        flex-direction:column;
        align-items:flex-end;
        gap:2px;
        transform:rotate(-4deg);
        pointer-events:none;
    }

    .gi-script span{
        font-family:'Brush Script MT','Dancing Script','Great Vibes',cursive;
        font-size:clamp(22px,2.4vw,32px);
        font-weight:700;
        color:var(--navy);
        line-height:1.05;
        letter-spacing:.5px;
        text-align:right;
        text-shadow:
            0 2px 10px rgba(255,255,255,.95),
            0 0 24px rgba(255,255,255,.85);
    }

    .gi-script-underline{
        position:relative;
        color:var(--navy);
    }

    .gi-script-underline::after{
        content:"";
        position:absolute;
        left:4%;bottom:-6px;
        width:92%;height:3px;
        background:linear-gradient(90deg,#FFC107,#FF8C00,#4CAF50);
        border-radius:3px;
        transform:rotate(-3deg);
        box-shadow:0 2px 10px rgba(255,140,0,.40);
    }

    .gi-script-heart{
        position:absolute;
        bottom:-8px;
        right:-18px;
        color:#1E5BC6;
        font-size:18px;
        animation:heartBeat 1.6s ease-in-out infinite;
    }

    @keyframes heartBeat{
        0%,100%{transform:scale(1);}
        50%{transform:scale(1.25);}
    }

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

    @media(max-width:1199.98px){
        .gi-hero{padding:90px 0 80px;}
        .gi-title{letter-spacing:-1.8px;}
        .gi-visual{max-width:520px;}
        .gi-stat{padding:10px 14px;gap:11px;}
        .gi-stat-icon{width:42px;height:42px;font-size:18px;}
        .gi-stat-text strong{font-size:18px;}
    }

    /* Tablet */
    @media(max-width:991.98px){

        .gi-hero{padding:80px 0 70px;min-height:auto;}

        /* Reorder: image collage FIRST, then text */
        .gi-row{
            flex-direction:column;
        }

        .gi-right{
            order:1;
            width:100%;
            margin-bottom:50px;
        }

        .gi-left{
            order:2;
            width:100%;
            text-align:center;
        }

        .gi-breadcrumb{justify-content:center;}
        .gi-label{justify-content:center;}
        .gi-desc{margin-left:auto;margin-right:auto;}
        .gi-title span::after{margin-left:auto;margin-right:auto;}
        .gi-stats{justify-content:center;}

        .gi-visual{max-width:520px;margin:0 auto;}

        /* Script moves to top-right corner nicely */
        .gi-script{
            top:-4%;
            right:2%;
        }
    }

    /* Mobile */
    @media(max-width:575.98px){

        .gi-hero{padding:65px 0 60px;}

        .gi-breadcrumb{font-size:11.5px;padding:6px 14px;margin-bottom:20px;}
        .gi-label{font-size:11px;letter-spacing:2.5px;}

        .gi-title{letter-spacing:-1.2px;}

        .gi-title span::after{width:130px;height:5px;margin-top:14px;}

        .gi-desc{font-size:14.5px;margin-bottom:28px;}

        /* Stats stacked 2x2 */
        .gi-stats{
            display:grid;
            grid-template-columns:repeat(2,1fr);
            gap:12px;
            width:100%;
        }

        .gi-stat{
            padding:10px 12px;
            gap:10px;
            justify-content:flex-start;
        }

        .gi-stat-icon{width:38px;height:38px;font-size:16px;}
        .gi-stat-text strong{font-size:15px;}
        .gi-stat-text small{font-size:10px;}

        /* Collage */
        .gi-visual{max-width:340px;}

        .gi-img{padding:4px;}

        .gi-img-1{width:58%;height:62%;}
        .gi-img-2{width:44%;height:44%;}
        .gi-img-3{width:50%;height:40%;}
        .gi-img-4{width:40%;height:34%;}

        /* Script */
        .gi-script{
            top:-8%;
            right:-4%;
            transform:rotate(-4deg) scale(.75);
        }

        .gi-script span{font-size:20px;}

        .gi-script-heart{
            right:-14px;
            font-size:15px;
        }

        .gi-leaf-1{width:44px;height:44px;}
        .gi-leaf-2{width:32px;height:32px;}
        .gi-leaf-3{width:38px;height:38px;}
        .gi-orange-1{width:28px;height:28px;}
    }

    /* =========================================================
   CONTRIBUTE + FORM SECTION
========================================================= */

.contrib-section{
    position:relative;
    padding:100px 0 110px;
    overflow:hidden;
    isolation:isolate;
    background:#FDFCF7;
}

/* =========================================================
   AMBIENT GLOW
========================================================= */

.contrib-section::before{
    content:"";
    position:absolute;inset:0;z-index:0;pointer-events:none;
    background:
        radial-gradient(ellipse 55% 45% at -5% -5%,
            rgba(76,175,80,.26) 0%, rgba(76,175,80,.10) 32%, transparent 72%),
        radial-gradient(ellipse 55% 45% at 105% -5%,
            rgba(255,140,0,.28) 0%, rgba(255,193,7,.12) 32%, transparent 72%),
        radial-gradient(ellipse 60% 50% at -5% 105%,
            rgba(255,140,0,.24) 0%, rgba(255,193,7,.10) 35%, transparent 75%),
        radial-gradient(ellipse 65% 55% at 105% 105%,
            rgba(76,175,80,.24) 0%, rgba(255,193,7,.11) 25%,
            rgba(255,140,0,.10) 55%, transparent 82%),
        radial-gradient(ellipse 90% 70% at 50% 50%,
            rgba(232,240,252,.42) 0%, transparent 70%);
}

.contrib-section::after{
    content:"";
    position:absolute;inset:0;z-index:0;pointer-events:none;
    background:radial-gradient(ellipse 120% 90% at 50% 50%,
        rgba(253,252,247,0) 0%, rgba(253,252,247,.15) 60%,
        rgba(253,252,247,.55) 100%);
}

.contrib-bg{
    position:absolute;inset:0;pointer-events:none;z-index:1;overflow:hidden;
}

.contrib-bg::before{
    content:"";position:absolute;top:-25%;left:-20%;
    width:70%;height:110%;
    background:radial-gradient(ellipse at 30% 40%,
        rgba(76,175,80,.20) 0%, rgba(76,175,80,.08) 40%, transparent 70%);
    border-radius:50% 40% 60% 45% / 55% 60% 40% 50%;
    filter:blur(50px);transform:rotate(-15deg);opacity:.95;
}

.contrib-bg::after{
    content:"";position:absolute;bottom:-35%;right:-25%;
    width:85%;height:120%;
    background:radial-gradient(ellipse at 60% 60%,
        rgba(255,140,0,.20) 0%, rgba(255,193,7,.10) 30%,
        rgba(76,175,80,.08) 60%, transparent 80%);
    border-radius:45% 55% 40% 60% / 60% 45% 55% 40%;
    filter:blur(55px);transform:rotate(-12deg);opacity:.95;
}

/* Leaves */
.contrib-leaf,.contrib-orange-leaf{
    position:absolute;display:block;
    border-radius:0 100% 0 100%;
    filter:drop-shadow(0 6px 14px rgba(0,0,0,.10));
    opacity:.85;z-index:2;
}
.contrib-leaf{background:linear-gradient(135deg,#66BB6A,#2E7D32);}
.contrib-orange-leaf{background:linear-gradient(135deg,#FFB74D,#E88918);}

.contrib-leaf-1{width:60px;height:60px;top:6%;left:1.5%;animation:contribFloatA 7s ease-in-out infinite;}
.contrib-leaf-2{width:44px;height:44px;bottom:12%;right:2%;animation:contribFloatB 8s ease-in-out infinite reverse;}
.contrib-leaf-3{width:50px;height:50px;top:55%;left:2.5%;animation:contribFloatC 6.5s ease-in-out infinite;}
.contrib-orange-1{width:36px;height:36px;top:38%;right:2.5%;animation:contribFloatB 7.5s ease-in-out infinite;}

.contrib-dot{
    position:absolute;width:5px;height:5px;border-radius:50%;
    background:rgba(255,140,0,.55);
    box-shadow:0 0 8px rgba(255,140,0,.4);
    z-index:2;animation:contribDotPulse 3s ease-in-out infinite;
}
.contrib-dot-1{top:8%;right:6%;}
.contrib-dot-2{top:10%;right:8%;animation-delay:.8s;}

@keyframes contribFloatA{
    0%,100%{transform:translateY(0) rotate(-30deg);}
    50%{transform:translateY(-15px) rotate(-20deg);}
}
@keyframes contribFloatB{
    0%,100%{transform:translateY(0) rotate(20deg);}
    50%{transform:translateY(-12px) rotate(10deg);}
}
@keyframes contribFloatC{
    0%,100%{transform:translateY(0) rotate(30deg);}
    50%{transform:translateY(-10px) rotate(40deg);}
}
@keyframes contribDotPulse{
    0%,100%{transform:scale(1);opacity:1;}
    50%{transform:scale(1.4);opacity:.6;}
}

/* =========================================================
   TOP HEADER
========================================================= */

.contrib-header{
    position:relative;
    z-index:3;
    text-align:center;
    max-width:720px;
    margin:0 auto 50px;
}

.contrib-label{
    display:inline-flex;
    align-items:center;
    gap:10px;
    color:#4CAF50;
    font-size:11.5px;
    font-weight:800;
    letter-spacing:3px;
    text-transform:uppercase;
    margin-bottom:16px;
}

.contrib-label-dot{
    width:7px;height:7px;
    border-radius:50%;
    background:#4CAF50;
    box-shadow:0 0 0 4px rgba(76,175,80,.15);
}

.contrib-label-line{
    display:inline-block;
    width:28px;height:2px;
    background:linear-gradient(90deg,#4CAF50,#FFC107);
    border-radius:2px;
}

.contrib-title{
    font-family:'Manrope',sans-serif;
    font-size:clamp(30px,3.8vw,48px);
    font-weight:800;
    line-height:1.15;
    letter-spacing:-1.4px;
    color:#0B2C6B;
    margin-bottom:14px;
}

.contrib-title span{
    background:linear-gradient(135deg,#1E5BC6 0%,#168A58 100%);
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent;
    -webkit-text-fill-color:transparent;
}

.contrib-sub{
    color:#5A6A82;
    font-size:15px;
    line-height:1.7;
    margin:0;
    font-weight:400;
}

/* =========================================================
   CONTRIBUTION CARDS
========================================================= */

.contrib-cards-row{
    position:relative;
    z-index:3;
    margin-bottom:60px;
}

.contrib-card{
    position:relative;
    display:grid;
    grid-template-columns:1fr 1.1fr;
    gap:0;

    background:linear-gradient(135deg,rgba(255,255,255,.98),rgba(255,255,255,.90));
    backdrop-filter:blur(18px);
    border-radius:28px;
    overflow:hidden;

    border:1px solid rgba(255,255,255,.95);
    box-shadow:
        0 20px 50px rgba(11,31,58,.10),
        0 6px 18px rgba(11,31,58,.05);

    transition:all .5s cubic-bezier(.2,.8,.2,1);
    height:100%;
}

.contrib-card:hover{
    transform:translateY(-8px);
    box-shadow:
        0 35px 75px rgba(11,31,58,.16),
        0 12px 28px rgba(11,31,58,.08);
}

/* Image */
.cc-image{
    position:relative;
    min-height:380px;
    overflow:hidden;
    border-radius:28px 0 0 28px;
}

.cc-image img{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:cover;
    transition:transform .8s cubic-bezier(.2,.8,.2,1);
}

.contrib-card:hover .cc-image img{
    transform:scale(1.06);
}

/* Image edge fade into card */
.cc-image::after{
    content:"";
    position:absolute;
    top:0;right:-1px;bottom:0;
    width:60px;
    background:linear-gradient(90deg,
        transparent,
        rgba(255,255,255,.9));
    pointer-events:none;
    z-index:1;
}

/* Content */
.cc-content{
    padding:40px 40px 40px 32px;
    display:flex;
    flex-direction:column;
    position:relative;
    z-index:2;
}

/* Icon */
.cc-icon{
    width:52px;
    height:52px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    color:#fff;
    font-size:22px;
    margin-bottom:18px;
    box-shadow:0 10px 22px rgba(0,0,0,.15);
    transition:transform .4s ease;
}

.contrib-card:hover .cc-icon{
    transform:scale(1.10) rotate(-6deg);
}

.cc-icon-green{
    background:linear-gradient(135deg,#66BB6A,#2E7D32);
    box-shadow:0 10px 22px rgba(76,175,80,.35);
}

.cc-icon-orange{
    background:linear-gradient(135deg,#FFB74D,#E88918);
    box-shadow:0 10px 22px rgba(255,140,0,.35);
}

/* Title */
.cc-title{
    font-family:'Manrope',sans-serif;
    font-size:clamp(22px,2.2vw,30px);
    font-weight:800;
    line-height:1.15;
    letter-spacing:-.8px;
    color:#0B2C6B;
    margin-bottom:12px;
}

.cc-title span{display:block;}

.cc-title-green{
    background:linear-gradient(135deg,#1E5BC6,#168A58);
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent;
    -webkit-text-fill-color:transparent;
}

.cc-title-orange{
    background:linear-gradient(135deg,#E88918,#FFC107);
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent;
    -webkit-text-fill-color:transparent;
}

/* Description */
.cc-desc{
    color:#5A6A82;
    font-size:13.5px;
    line-height:1.7;
    margin-bottom:18px;
    font-weight:400;
}

/* List */
.cc-list{
    list-style:none;
    padding:0;
    margin:0 0 24px;
    display:flex;
    flex-direction:column;
    gap:8px;
    flex:1;
}

.cc-list li{
    display:flex;
    align-items:center;
    gap:9px;
    color:#4A5B72;
    font-size:12.5px;
    font-weight:600;
}

.cc-list li i{
    font-size:14px;
    flex-shrink:0;
}

.cc-list-green li i{color:#4CAF50;}
.cc-list-orange li i{color:#E88918;}

/* Button */
.cc-btn{
    position:relative;
    overflow:hidden;
    display:inline-flex;
    align-items:center;
    gap:10px;
    padding:14px 28px;
    border-radius:50px;
    color:#fff;
    font-size:13.5px;
    font-weight:800;
    letter-spacing:.2px;
    text-decoration:none;
    border:none;
    box-shadow:0 14px 30px rgba(0,0,0,.15);
    transition:all .35s ease;
    width:fit-content;
}

.cc-btn::before{
    content:"";
    position:absolute;
    top:0;bottom:0;left:-100%;
    width:55%;
    background:linear-gradient(90deg,transparent,rgba(255,255,255,.35),transparent);
    transform:skewX(-20deg);
    transition:left .75s ease;
}

.cc-btn:hover::before{left:140%;}

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

.cc-btn-green{
    background:linear-gradient(135deg,#4CAF50,#2E7D32);
    box-shadow:0 14px 30px rgba(76,175,80,.35);
}
.cc-btn-green:hover{box-shadow:0 20px 42px rgba(76,175,80,.48);}

.cc-btn-orange{
    background:linear-gradient(135deg,#FF8C00,#E88918);
    box-shadow:0 14px 30px rgba(255,140,0,.35);
}
.cc-btn-orange:hover{box-shadow:0 20px 42px rgba(255,140,0,.48);}

.cc-btn i{
    position:relative;z-index:2;
    transition:transform .3s ease;
}

.cc-btn:hover i{transform:translateX(5px);}

/* =========================================================
   FORM SECTION
========================================================= */

.form-row{
    position:relative;
    z-index:3;
}

/* FORM CARD */
.form-col{
    position:relative;
    z-index:3;
}

.form-card{
    background:linear-gradient(135deg,rgba(255,255,255,.98),rgba(255,255,255,.92));
    backdrop-filter:blur(18px);
    border-radius:28px;
    padding:40px 44px;
    border:1px solid rgba(255,255,255,.95);
    box-shadow:
        0 20px 50px rgba(11,31,58,.08),
        0 6px 18px rgba(11,31,58,.04);
    height:100%;
}

.form-label{
    display:inline-flex;
    align-items:center;
    gap:10px;
    color:#4CAF50;
    font-size:11.5px;
    font-weight:800;
    letter-spacing:2.8px;
    text-transform:uppercase;
    margin-bottom:16px;
}

.form-title{
    font-family:'Manrope',sans-serif;
    font-size:clamp(24px,2.6vw,34px);
    font-weight:800;
    line-height:1.15;
    letter-spacing:-1px;
    color:#0B2C6B;
    margin-bottom:10px;
}

.form-title span{
    background:linear-gradient(135deg,#1E5BC6,#168A58);
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent;
    -webkit-text-fill-color:transparent;
}

.form-sub{
    color:#5A6A82;
    font-size:14px;
    line-height:1.7;
    margin:0 0 28px;
}

/* Fields */
.form-field-label{
    display:block;
    font-size:11.5px;
    font-weight:800;
    color:#2E425E;
    letter-spacing:.4px;
    text-transform:uppercase;
    margin-bottom:8px;
}

.form-field-label span{
    color:#E88918;
    margin-left:2px;
}

.form-field{
    width:100%;
    padding:13px 18px;
    border-radius:12px;
    border:1.5px solid rgba(11,31,58,.10);
    background:rgba(255,255,255,.9);
    color:#152A45;
    font-size:13.5px;
    font-family:'DM Sans',sans-serif;
    font-weight:500;
    outline:none;
    transition:all .3s ease;
}

.form-field::placeholder{
    color:#9CA9BA;
    font-weight:400;
}

.form-field:focus{
    border-color:#4CAF50;
    background:#fff;
    box-shadow:0 0 0 4px rgba(76,175,80,.12);
}

.form-textarea{
    resize:vertical;
    min-height:100px;
    line-height:1.6;
}

select.form-field{
    cursor:pointer;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%230B1F3A' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat:no-repeat;
    background-position:right 18px center;
    padding-right:44px;
    -webkit-appearance:none;
    appearance:none;
}

/* Interest Chips */
.interest-chips{
    display:flex;
    flex-wrap:wrap;
    gap:9px;
}

.chip{
    position:relative;
    cursor:pointer;
}

.chip input{
    position:absolute;
    opacity:0;
    pointer-events:none;
}

.chip span{
    display:inline-flex;
    align-items:center;
    padding:10px 18px;
    border-radius:50px;
    border:1.5px solid rgba(11,31,58,.10);
    background:rgba(255,255,255,.85);
    color:#5A6A82;
    font-size:12.5px;
    font-weight:700;
    transition:all .3s ease;
    user-select:none;
}

.chip:hover span{
    border-color:rgba(76,175,80,.35);
    color:#2E7D32;
    transform:translateY(-2px);
}

.chip input:checked + span{
    background:linear-gradient(135deg,#4CAF50,#2E7D32);
    border-color:transparent;
    color:#fff;
    box-shadow:0 8px 20px rgba(76,175,80,.30);
}

/* Submit Button */
.form-submit{
    position:relative;
    overflow:hidden;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:12px;
    width:100%;
    padding:16px 32px;
    border-radius:50px;
    border:none;
    background:linear-gradient(135deg,#1E5BC6 0%,#168A58 100%);
    color:#fff;
    font-family:'DM Sans',sans-serif;
    font-size:15px;
    font-weight:800;
    letter-spacing:.3px;
    cursor:pointer;
    box-shadow:0 16px 34px rgba(30,91,198,.35);
    transition:all .35s ease;
}

.form-submit::before{
    content:"";
    position:absolute;
    top:0;bottom:0;left:-100%;
    width:55%;
    background:linear-gradient(90deg,transparent,rgba(255,255,255,.40),transparent);
    transform:skewX(-20deg);
    transition:left .85s ease;
}

.form-submit:hover::before{left:140%;}

.form-submit:hover{
    transform:translateY(-3px);
    box-shadow:0 22px 45px rgba(30,91,198,.48);
}

.form-submit i{
    position:relative;z-index:2;
    transition:transform .3s ease;
}

.form-submit:hover i{transform:translateX(5px);}

/* =========================================================
   QUOTE CARD (Right)
========================================================= */

.quote-col{
    position:relative;
    z-index:3;
}

.quote-card{
    position:relative;
    height:100%;
    min-height:600px;
    border-radius:28px;
    overflow:hidden;
    background:linear-gradient(135deg,#E8F5E9 0%,#FFF8E7 60%,#FFE0B2 100%);
    box-shadow:
        0 20px 50px rgba(11,31,58,.10),
        0 6px 18px rgba(11,31,58,.05);
}

/* Girl Image */
.quote-image{
    position:absolute;
    inset:0;
    z-index:1;
}

.quote-image img{
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:center top;
    display:block;
}

/* Image overlay gradient */
.quote-image::after{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(180deg,
        rgba(11,31,58,0) 0%,
        rgba(11,31,58,0) 40%,
        rgba(11,31,58,.15) 65%,
        rgba(11,31,58,.55) 100%);
    pointer-events:none;
}

/* Script Quote — Top Right */
.quote-script{
    position:absolute;
    top:6%;
    right:6%;
    z-index:3;
    font-family:'Brush Script MT','Dancing Script','Great Vibes',cursive;
    font-size:clamp(20px,2vw,26px);
    font-weight:700;
    color:#0B2C6B;
    line-height:1.2;
    text-align:right;
    transform:rotate(-4deg);
    max-width:240px;
    pointer-events:none;
    text-shadow:
        0 2px 10px rgba(255,255,255,.95),
        0 0 24px rgba(255,255,255,.85);
}

.quote-script span{
    display:block;
    color:#168A58;
}

/* Bottom Glass Content */
.quote-footer{
    position:absolute;
    bottom:20px;
    left:20px;
    right:20px;
    z-index:3;
    padding:22px 24px;
    border-radius:20px;

    background:linear-gradient(135deg,rgba(255,255,255,.98),rgba(255,255,255,.88));
    backdrop-filter:blur(20px) saturate(180%);
    -webkit-backdrop-filter:blur(20px) saturate(180%);

    border:1px solid rgba(255,255,255,.95);
    box-shadow:
        0 20px 45px rgba(11,31,58,.15),
        inset 0 1px 0 rgba(255,255,255,.95);

    display:flex;
    align-items:flex-start;
    gap:14px;
}

.quote-icon{
    width:48px;
    height:48px;
    flex-shrink:0;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    background:linear-gradient(135deg,#66BB6A,#2E7D32);
    color:#fff;
    font-size:20px;
    box-shadow:0 10px 22px rgba(76,175,80,.32);
    animation:quoteHeart 2s ease-in-out infinite;
}

@keyframes quoteHeart{
    0%,100%{transform:scale(1);}
    50%{transform:scale(1.10);}
}

.quote-text{
    color:#3D4A5C;
    font-size:13px;
    line-height:1.65;
    margin:0;
    font-weight:500;
}

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

@media(max-width:1199.98px){
    .contrib-section{padding:90px 0 100px;}
    .cc-content{padding:34px 32px 34px 26px;}
    .cc-title{font-size:24px;}
    .form-card{padding:34px 32px;}
    .quote-card{min-height:540px;}
}

/* Tablet */
@media(max-width:991.98px){

    .contrib-section{padding:80px 0 90px;}

    /* Cards stacked */
    .contrib-card{
        grid-template-columns:1fr;
        border-radius:24px;
    }

    .cc-image{
        min-height:260px;
        border-radius:24px 24px 0 0;
    }

    .cc-image::after{
        background:linear-gradient(180deg,
            transparent,
            rgba(255,255,255,.9));
        top:auto;
        left:0;right:0;bottom:-1px;
        width:auto;
        height:60px;
    }

    .cc-content{padding:28px 30px 32px;}

    /* Form stacked */
    .form-card{padding:32px 28px;margin-bottom:30px;}

    .form-title{font-size:24px;}

    /* Quote card */
    .quote-card{min-height:520px;}

    .quote-footer{
        padding:18px 20px;
    }

    .quote-icon{width:44px;height:44px;font-size:18px;}
    .quote-text{font-size:12.5px;}
}

/* Mobile */
@media(max-width:575.98px){

    .contrib-section{padding:65px 0 75px;}

    .contrib-header{margin-bottom:36px;}

    .contrib-title{letter-spacing:-1px;}
    .contrib-sub{font-size:14px;}

    /* Cards */
    .contrib-card{border-radius:20px;}

    .cc-image{
        min-height:220px;
        border-radius:20px 20px 0 0;
    }

    .cc-content{padding:24px 22px 28px;}

    .cc-icon{width:46px;height:46px;font-size:19px;margin-bottom:14px;}

    .cc-title{font-size:21px;letter-spacing:-.6px;}
    .cc-desc{font-size:13px;}
    .cc-list li{font-size:12px;}
    .cc-btn{
        width:100%;
        justify-content:center;
        padding:13px 24px;
        font-size:13px;
    }

    /* Form */
    .form-card{
        padding:26px 22px;
        border-radius:22px;
        margin-bottom:24px;
    }

    .form-title{font-size:21px;letter-spacing:-.6px;}
    .form-sub{font-size:13px;margin-bottom:22px;}

    .form-field-label{font-size:11px;}
    .form-field{padding:12px 14px;font-size:13px;}

    .chip span{
        padding:9px 15px;
        font-size:11.5px;
    }

    .form-submit{
        padding:15px 24px;
        font-size:14px;
    }

    /* Quote */
    .quote-card{
        min-height:440px;
        border-radius:22px;
    }

    .quote-script{
        top:5%;
        right:5%;
        font-size:18px;
        max-width:200px;
    }

    .quote-footer{
        bottom:16px;
        left:16px;
        right:16px;
        padding:16px 18px;
        border-radius:16px;
        gap:12px;
    }

    .quote-icon{
        width:42px;height:42px;font-size:17px;
    }

    .quote-text{font-size:12px;line-height:1.6;}

    .contrib-leaf-1{width:44px;height:44px;}
    .contrib-leaf-2{width:32px;height:32px;}
    .contrib-leaf-3{width:38px;height:38px;}
    .contrib-orange-1{width:28px;height:28px;}
}

/* =========================================================
   JOURNEY + MEET THE PEOPLE
========================================================= */

.journey-people-section{
    position:relative;
    padding:100px 0 110px;
    overflow:hidden;
    isolation:isolate;
    background:#FDFCF7;
}

/* Ambient glow */
.journey-people-section::before{
    content:"";
    position:absolute;inset:0;z-index:0;pointer-events:none;
    background:
        radial-gradient(ellipse 55% 45% at -5% -5%,
            rgba(76,175,80,.28) 0%, rgba(76,175,80,.11) 32%, transparent 72%),
        radial-gradient(ellipse 55% 45% at 105% -5%,
            rgba(255,140,0,.30) 0%, rgba(255,193,7,.13) 32%, transparent 72%),
        radial-gradient(ellipse 60% 50% at -5% 105%,
            rgba(255,140,0,.26) 0%, rgba(255,193,7,.12) 35%, transparent 75%),
        radial-gradient(ellipse 65% 55% at 105% 105%,
            rgba(76,175,80,.26) 0%, rgba(255,193,7,.13) 25%,
            rgba(255,140,0,.10) 55%, transparent 82%),
        radial-gradient(ellipse 90% 70% at 50% 50%,
            rgba(232,240,252,.42) 0%, transparent 70%);
}

.journey-people-section::after{
    content:"";
    position:absolute;inset:0;z-index:0;pointer-events:none;
    background:radial-gradient(ellipse 120% 90% at 50% 50%,
        rgba(253,252,247,0) 0%, rgba(253,252,247,.15) 60%,
        rgba(253,252,247,.55) 100%);
}

.jp-bg{
    position:absolute;inset:0;pointer-events:none;z-index:1;overflow:hidden;
}

.jp-bg::before{
    content:"";position:absolute;top:-25%;left:-20%;
    width:70%;height:110%;
    background:radial-gradient(ellipse at 30% 40%,
        rgba(76,175,80,.20) 0%, rgba(76,175,80,.08) 40%, transparent 70%);
    border-radius:50% 40% 60% 45% / 55% 60% 40% 50%;
    filter:blur(50px);transform:rotate(-15deg);opacity:.95;
}

.jp-bg::after{
    content:"";position:absolute;bottom:-35%;right:-25%;
    width:85%;height:120%;
    background:radial-gradient(ellipse at 60% 60%,
        rgba(255,140,0,.20) 0%, rgba(255,193,7,.10) 30%,
        rgba(76,175,80,.08) 60%, transparent 80%);
    border-radius:45% 55% 40% 60% / 60% 45% 55% 40%;
    filter:blur(55px);transform:rotate(-12deg);opacity:.95;
}

/* Leaves */
.jp-leaf,.jp-orange-leaf{
    position:absolute;display:block;
    border-radius:0 100% 0 100%;
    filter:drop-shadow(0 6px 14px rgba(0,0,0,.10));
    opacity:.9;z-index:2;
}
.jp-leaf{background:linear-gradient(135deg,#66BB6A,#2E7D32);}
.jp-orange-leaf{background:linear-gradient(135deg,#FFB74D,#E88918);}

.jp-leaf-1{width:60px;height:60px;top:6%;left:1.5%;animation:jpFloatA 7s ease-in-out infinite;}
.jp-leaf-2{width:44px;height:44px;top:50%;left:2.5%;animation:jpFloatB 8s ease-in-out infinite reverse;}
.jp-leaf-3{width:50px;height:50px;bottom:10%;right:2%;animation:jpFloatC 6.5s ease-in-out infinite;}
.jp-orange-1{width:36px;height:36px;top:22%;right:3%;animation:jpFloatB 7.5s ease-in-out infinite;}

.jp-dot{
    position:absolute;width:5px;height:5px;border-radius:50%;
    background:rgba(255,140,0,.55);
    box-shadow:0 0 8px rgba(255,140,0,.4);
    z-index:2;animation:jpDotPulse 3s ease-in-out infinite;
}
.jp-dot-1{top:8%;right:6%;}
.jp-dot-2{top:10%;right:8%;animation-delay:.8s;}

@keyframes jpFloatA{
    0%,100%{transform:translateY(0) rotate(-30deg);}
    50%{transform:translateY(-15px) rotate(-20deg);}
}
@keyframes jpFloatB{
    0%,100%{transform:translateY(0) rotate(20deg);}
    50%{transform:translateY(-12px) rotate(10deg);}
}
@keyframes jpFloatC{
    0%,100%{transform:translateY(0) rotate(30deg);}
    50%{transform:translateY(-10px) rotate(40deg);}
}
@keyframes jpDotPulse{
    0%,100%{transform:scale(1);opacity:1;}
    50%{transform:scale(1.4);opacity:.6;}
}

/* =========================================================
   SHARED HEADER
========================================================= */

.jp-header{
    position:relative;
    z-index:3;
    max-width:720px;
    margin-bottom:50px;
}

.jp-header-left{text-align:left;}

.jp-label{
    display:inline-flex;
    align-items:center;
    gap:10px;
    color:#4CAF50;
    font-size:11.5px;
    font-weight:800;
    letter-spacing:3px;
    text-transform:uppercase;
    margin-bottom:16px;
}

.jp-label-dot{
    width:7px;height:7px;
    border-radius:50%;
    background:#4CAF50;
    box-shadow:0 0 0 4px rgba(76,175,80,.15);
}

.jp-label-line{
    display:inline-block;
    width:28px;height:2px;
    background:linear-gradient(90deg,#4CAF50,#FFC107);
    border-radius:2px;
}

.jp-title{
    font-family:'Manrope',sans-serif;
    font-size:clamp(30px,3.8vw,46px);
    font-weight:800;
    line-height:1.15;
    letter-spacing:-1.4px;
    color:#0B2C6B;
    margin-bottom:14px;
}

.jp-title span{
    background:linear-gradient(135deg,#1E5BC6 0%,#168A58 100%);
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent;
    -webkit-text-fill-color:transparent;
}

.jp-sub{
    color:#5A6A82;
    font-size:15px;
    line-height:1.7;
    margin:0;
    font-weight:400;
}

/* =========================================================
   PART 1 — JOURNEY STEPS
========================================================= */

.journey-block{
    position:relative;
    z-index:3;
    margin-bottom:100px;
}

.journey-steps{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:12px;
    flex-wrap:nowrap;
}

.journey-step{
    flex:1;
    min-width:0;
    background:linear-gradient(135deg,rgba(255,255,255,.98),rgba(255,255,255,.88));
    backdrop-filter:blur(14px);
    border:1px solid rgba(255,255,255,.95);
    border-radius:20px;
    padding:28px 20px 24px;
    text-align:center;
    box-shadow:
        0 12px 30px rgba(11,31,58,.07),
        0 3px 10px rgba(11,31,58,.04);
    transition:all .45s cubic-bezier(.2,.8,.2,1);
    cursor:pointer;
    position:relative;
}

.journey-step::before{
    content:"";
    position:absolute;
    inset:0;
    border-radius:20px;
    padding:1.5px;
    background:linear-gradient(135deg,
        rgba(76,175,80,.40),
        rgba(255,193,7,.35),
        rgba(255,140,0,.40),
        rgba(30,91,198,.30));
    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    -webkit-mask-composite:xor;
    mask-composite:exclude;
    pointer-events:none;
    opacity:0;
    transition:opacity .45s ease;
}

.journey-step:hover::before{opacity:1;}

.journey-step:hover{
    transform:translateY(-8px);
    box-shadow:
        0 25px 55px rgba(11,31,58,.14),
        0 8px 20px rgba(11,31,58,.08);
}

.js-icon{
    width:56px;
    height:56px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    color:#fff;
    font-size:22px;
    margin:0 auto 14px;
    box-shadow:0 10px 22px rgba(0,0,0,.15);
    transition:transform .4s ease;
}

.journey-step:hover .js-icon{
    transform:scale(1.10) rotate(-6deg);
}

.js-icon-green{background:linear-gradient(135deg,#66BB6A,#2E7D32);box-shadow:0 10px 22px rgba(76,175,80,.35);}
.js-icon-blue{background:linear-gradient(135deg,#1E5BC6,#0B2C6B);box-shadow:0 10px 22px rgba(30,91,198,.35);}
.js-icon-orange{background:linear-gradient(135deg,#FFB74D,#E88918);box-shadow:0 10px 22px rgba(255,140,0,.35);}
.js-icon-purple{background:linear-gradient(135deg,#9C6BDE,#704BA0);box-shadow:0 10px 22px rgba(112,75,160,.35);}
.js-icon-teal{background:linear-gradient(135deg,#26A69A,#00796B);box-shadow:0 10px 22px rgba(38,166,154,.35);}

.js-title{
    font-family:'Manrope',sans-serif;
    font-size:15.5px;
    font-weight:800;
    color:#0B2C6B;
    letter-spacing:-.3px;
    margin-bottom:6px;
    transition:color .3s ease;
}

.journey-step:hover .js-title{color:#1E5BC6;}

.js-desc{
    color:#6A7A90;
    font-size:11.5px;
    line-height:1.55;
    margin:0;
    font-weight:500;
}

/* Arrows between steps */
.js-arrow{
    color:#C5D0DD;
    font-size:16px;
    margin-top:70px;
    flex-shrink:0;
}

/* =========================================================
   PART 2 — MEET THE PEOPLE
========================================================= */

.people-block{
    position:relative;
    z-index:3;
    padding-top:60px;
    border-top:1px solid rgba(11,31,58,.08);
}

.people-header{
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:30px;
    flex-wrap:wrap;
    margin-bottom:44px;
}

.people-header-left{max-width:560px;}

.people-header-right{
    display:flex;
    align-items:center;
    gap:14px;
    flex-wrap:wrap;
}

/* Filter tabs */
.people-filter{
    display:inline-flex;
    gap:4px;
    padding:5px;
    background:linear-gradient(135deg,rgba(255,255,255,.98),rgba(255,255,255,.85));
    backdrop-filter:blur(12px);
    border:1.5px solid rgba(255,255,255,.95);
    border-radius:50px;
    box-shadow:
        0 10px 24px rgba(11,31,58,.07),
        inset 0 1px 0 rgba(255,255,255,.9);
}

.people-filter-btn{
    padding:10px 22px;
    border-radius:50px;
    border:none;
    background:transparent;
    color:#5A6A82;
    font-size:12.5px;
    font-weight:700;
    font-family:'DM Sans',sans-serif;
    cursor:pointer;
    transition:all .35s ease;
    white-space:nowrap;
}

.people-filter-btn:hover{color:#1E5BC6;}

.people-filter-btn.active{
    background:linear-gradient(135deg,#4CAF50,#2E7D32);
    color:#fff;
    box-shadow:0 8px 20px rgba(76,175,80,.32);
}

/* Search */
.people-search{
    position:relative;
    display:flex;
    align-items:center;
    background:linear-gradient(135deg,rgba(255,255,255,.98),rgba(255,255,255,.85));
    backdrop-filter:blur(12px);
    border:1.5px solid rgba(255,255,255,.95);
    border-radius:50px;
    padding:4px 4px 4px 16px;
    box-shadow:
        0 10px 24px rgba(11,31,58,.07),
        inset 0 1px 0 rgba(255,255,255,.9);
    transition:all .3s ease;
}

.people-search:focus-within{
    border-color:rgba(30,91,198,.35);
    box-shadow:0 14px 32px rgba(30,91,198,.14);
}

.people-search i{
    color:#8A96A6;
    font-size:14px;
}

.people-search input{
    border:none;
    outline:none;
    background:transparent;
    padding:10px 14px 10px 8px;
    font-size:12.5px;
    font-family:'DM Sans',sans-serif;
    color:#152A45;
    width:180px;
}

.people-search input::placeholder{color:#8A96A6;}

/* =========================================================
   PEOPLE GRID (5 columns)
========================================================= */

.people-grid{
    display:grid;
    grid-template-columns:repeat(5,1fr);
    gap:20px;
}

/* Person Card */
.person-card{
    position:relative;
    background:linear-gradient(135deg,rgba(255,255,255,.98),rgba(255,255,255,.92));
    backdrop-filter:blur(14px);
    border-radius:20px;
    overflow:hidden;
    border:1px solid rgba(255,255,255,.95);
    box-shadow:
        0 12px 30px rgba(11,31,58,.08),
        0 3px 10px rgba(11,31,58,.04);
    transition:all .45s cubic-bezier(.2,.8,.2,1);
}

.person-card:hover{
    transform:translateY(-8px);
    box-shadow:
        0 28px 55px rgba(11,31,58,.16),
        0 8px 20px rgba(11,31,58,.08);
}

/* Image */
.person-image{
    position:relative;
    width:100%;
    height:220px;
    overflow:hidden;
}

.person-image img{
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:center top;
    display:block;
    transition:transform .7s cubic-bezier(.2,.8,.2,1);
}

.person-card:hover .person-image img{
    transform:scale(1.08);
}

/* Image gradient overlay */
.person-image::after{
    content:"";
    position:absolute;
    inset:auto 0 0 0;
    height:55%;
    background:linear-gradient(0deg,
        rgba(11,31,58,.55) 0%,
        rgba(11,31,58,.15) 60%,
        transparent 100%);
    pointer-events:none;
    z-index:1;
}

/* Role pill */
.person-role{
    position:absolute;
    bottom:12px;
    left:12px;
    z-index:2;
    padding:6px 14px;
    border-radius:50px;
    font-size:10px;
    font-weight:800;
    letter-spacing:.8px;
    text-transform:uppercase;
    color:#fff;
    box-shadow:0 6px 16px rgba(0,0,0,.25);
    border:1px solid rgba(255,255,255,.20);
}

.person-role-volunteer{
    background:linear-gradient(135deg,#66BB6A,#2E7D32);
}

.person-role-member{
    background:linear-gradient(135deg,#FFB74D,#E88918);
}

/* Status dot (top-right) */
.person-status{
    position:absolute;
    top:12px;
    right:12px;
    z-index:2;
    width:10px;
    height:10px;
    border-radius:50%;
    border:2px solid #fff;
    box-shadow:0 2px 6px rgba(0,0,0,.25);
}

.status-online{
    background:#4CAF50;
}

.status-online::before{
    content:"";
    position:absolute;
    inset:-4px;
    border-radius:50%;
    background:rgba(76,175,80,.35);
    animation:pulseDot 2s ease-in-out infinite;
    z-index:-1;
}

@keyframes pulseDot{
    0%,100%{transform:scale(1);opacity:1;}
    50%{transform:scale(1.4);opacity:.5;}
}

/* Body */
.person-body{
    padding:18px 18px 20px;
}

.person-name{
    font-family:'Manrope',sans-serif;
    font-size:15.5px;
    font-weight:800;
    color:#0B2C6B;
    letter-spacing:-.3px;
    margin-bottom:4px;
    line-height:1.25;
    transition:color .3s ease;
}

.person-card:hover .person-name{color:#1E5BC6;}

.person-designation{
    color:#4CAF50;
    font-size:11.5px;
    font-weight:700;
    margin-bottom:8px;
    letter-spacing:.1px;
}

.person-location{
    display:flex;
    align-items:center;
    gap:5px;
    color:#7A8798;
    font-size:11px;
    font-weight:500;
    margin:0 0 14px;
}

.person-location i{
    color:#1E5BC6;
    font-size:11px;
}

/* Socials */
.person-socials{
    display:flex;
    gap:6px;
    padding-top:12px;
    border-top:1px solid rgba(11,31,58,.06);
}

.person-social{
    width:30px;
    height:30px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:8px;
    background:rgba(11,31,58,.05);
    color:#5A6A82;
    font-size:12px;
    text-decoration:none;
    transition:all .3s ease;
}

.person-social:hover{
    background:linear-gradient(135deg,#1E5BC6,#0B2C6B);
    color:#fff;
    transform:translateY(-3px);
    box-shadow:0 8px 18px rgba(30,91,198,.30);
}

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

@media(max-width:1199.98px){
    .journey-people-section{padding:90px 0 100px;}
    .js-icon{width:50px;height:50px;font-size:20px;}
    .js-title{font-size:14px;}
    .js-desc{font-size:11px;}
    .js-arrow{font-size:14px;margin-top:62px;}
    .person-image{height:200px;}
    .people-search input{width:150px;}
}

/* Tablet */
@media(max-width:991.98px){

    .journey-people-section{padding:80px 0 90px;}

    /* Journey steps — horizontal scroll */
    .journey-steps{
        overflow-x:auto;
        flex-wrap:nowrap;
        scrollbar-width:none;
        padding:10px 0;
        margin:0 -15px;
        padding-left:15px;
        padding-right:15px;
        scroll-snap-type:x mandatory;
    }

    .journey-steps::-webkit-scrollbar{display:none;}

    .journey-step{
        flex:0 0 220px;
        scroll-snap-align:start;
    }

    .js-arrow{display:none;}

    /* People header stacked */
    .people-header{
        flex-direction:column;
        align-items:flex-start;
        gap:20px;
    }

    .people-header-right{
        width:100%;
        justify-content:space-between;
    }

    .people-search{flex:1;}
    .people-search input{width:100%;}

    /* People grid — 3 columns */
    .people-grid{
        grid-template-columns:repeat(3,1fr);
        gap:16px;
    }

    .person-image{height:200px;}
}

/* Mobile */
@media(max-width:575.98px){

    .journey-people-section{padding:65px 0 75px;}

    .jp-title{letter-spacing:-1px;}

    /* Journey steps */
    .journey-block{margin-bottom:70px;}

    .journey-step{
        flex:0 0 190px;
        padding:22px 16px 20px;
        border-radius:16px;
    }

    .js-icon{width:48px;height:48px;font-size:19px;margin-bottom:12px;}
    .js-title{font-size:14px;}
    .js-desc{font-size:11px;line-height:1.5;}

    /* People header */
    .people-block{padding-top:50px;}

    .people-header{margin-bottom:32px;}

    .people-header-right{
        flex-direction:column;
        align-items:stretch;
        gap:12px;
    }

    .people-filter{width:100%;justify-content:center;}
    .people-filter-btn{flex:1;padding:9px 12px;font-size:12px;}

    /* People grid — 2 columns */
    .people-grid{
        grid-template-columns:repeat(2,1fr);
        gap:14px;
    }

    .person-image{height:170px;}

    .person-body{padding:14px 14px 16px;}

    .person-name{font-size:14px;}
    .person-designation{font-size:10.5px;}
    .person-location{font-size:10.5px;}

    .person-role{
        padding:5px 11px;
        font-size:9px;
        bottom:10px;
        left:10px;
    }

    .person-social{
        width:26px;
        height:26px;
        font-size:11px;
    }

    .jp-leaf-1{width:44px;height:44px;}
    .jp-leaf-2{width:32px;height:32px;}
    .jp-leaf-3{width:38px;height:38px;}
    .jp-orange-1{width:28px;height:28px;}
}

/* =========================================================
   GET INVOLVED — SUCCESS MESSAGE
   ========================================================= */

.involve-success-message {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 18px;
    padding: 20px 22px;
    margin-bottom: 28px;
    border: 1px solid rgba(63, 163, 77, 0.20);
    border-radius: 18px;
    background:
        linear-gradient(
            135deg,
            rgba(63, 163, 77, 0.08),
            rgba(255, 255, 255, 0.95)
        );
    box-shadow:
        0 12px 35px rgba(11, 31, 58, 0.07),
        inset 0 1px 0 rgba(255, 255, 255, 0.8);
    overflow: hidden;
    animation: successSlideIn 0.45s ease both;
}

.involve-success-message::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 100%;
    background: #3FA34D;
}

.success-icon-wrap {
    flex: 0 0 auto;
}

.success-icon {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(63, 163, 77, 0.12);
    color: #3FA34D;
    font-size: 24px;
    box-shadow:
        0 0 0 7px rgba(63, 163, 77, 0.05);
}

.success-content {
    flex: 1;
    min-width: 0;
}

.success-small-title {
    display: block;
    margin-bottom: 4px;
    color: #3FA34D;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1.5px;
}

.success-content h4 {
    margin: 0 0 5px;
    color: #0B1F3A;
    font-size: 18px;
    font-weight: 800;
}

.success-content p {
    margin: 0;
    color: #526174;
    font-size: 13px;
    line-height: 1.65;
}

.success-note {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-top: 12px;
    padding: 7px 11px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.75);
    color: #536273;
    font-size: 11px;
    line-height: 1.4;
}

.success-note i {
    color: #D4AF37;
    font-size: 13px;
}


/* =========================================================
   VALIDATION ERROR
   ========================================================= */

.involve-error-message {
    display: flex;
    align-items: flex-start;
    gap: 13px;
    padding: 15px 17px;
    margin-bottom: 24px;
    border: 1px solid rgba(215, 25, 32, 0.16);
    border-radius: 14px;
    background: rgba(215, 25, 32, 0.045);
    color: #6f2528;
}

.error-icon-wrap {
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(215, 25, 32, 0.10);
    color: #D71920;
}

.error-content {
    min-width: 0;
}

.error-content strong {
    display: block;
    margin-bottom: 5px;
    color: #7d2024;
    font-size: 13px;
}

.error-content ul {
    margin: 0;
    padding-left: 18px;
    font-size: 12px;
    line-height: 1.6;
}


/* =========================================================
   FIELD ERROR
   ========================================================= */

.field-error {
    display: block;
    margin-top: 6px;
    color: #D71920;
    font-size: 11px;
    font-weight: 600;
}

.form-field.is-invalid {
    border-color: rgba(215, 25, 32, 0.55) !important;
}


/* =========================================================
   SUBMIT LOADING STATE
   ========================================================= */

.form-submit.is-loading {
    pointer-events: none;
    opacity: 0.82;
}

.submit-loading {
    align-items: center;
    gap: 8px;
}

.form-submit.is-loading .submit-loading {
    display: inline-flex !important;
}

.form-submit.is-loading .submit-text,
.form-submit.is-loading .submit-arrow {
    display: none;
}


/* =========================================================
   ANIMATION
   ========================================================= */

@keyframes successSlideIn {

    from {
        opacity: 0;
        transform: translateY(-10px);
    }

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

}


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

@media (max-width: 575.98px) {

    .involve-success-message {
        gap: 13px;
        padding: 17px;
        border-radius: 15px;
    }

    .success-icon {
        width: 40px;
        height: 40px;
        font-size: 19px;
    }

    .success-content h4 {
        font-size: 16px;
    }

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

    .success-note {
        display: flex;
        font-size: 10px;
    }

    .involve-error-message {
        padding: 13px;
    }

}