/* TOP OF YOUR .CSS FILE */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600;700&display=swap');


/* =========================================================
   HERO SECTION CSS —  FIX + MODERN UI UPGRADE
========================================================= */
        * {
          margin: 0;
          padding: 0;
          box-sizing: border-box;
          font-family: system-ui, sans-serif;
        }

        .hero {
          position: relative;
          min-height: 75vh;
          /*background: url("assets/images/hero/hero-bg1.jpg") center/cover no-repeat;*/
        }

        .hero::after {
          content: "";
          position: absolute;
          inset: 0;
          backdrop-filter: blur(3px);
          background: rgba(0, 0, 0, 0.5);
        }

        .hero-overlay {
          position: relative;
          z-index: 1;
          height: 100%;
          display: flex;
          align-items: center;
        }

        .hero-content {
          max-width: 1200px;
          margin: auto;
          padding: 2rem;
          display: grid;
          grid-template-columns: 1fr 1fr;
          gap: 3rem;
          align-items: center;
          color: #fff;
        }



        /* THEN YOUR EXISTING STYLES */
        .hero-text h1 {
          font-family: 'Montserrat', sans-serif;
          font-weight: 700;
          font-size: clamp(2rem, 4vw, 3rem);
          /* ... rest of your code ... */
        }

        .hero-text p {
          opacity: 0.9;
          margin-bottom: 1.5rem;
          line-height: 1.6;
        }

      

        /* SUBTITLE (only visible when filled) */
        .hero-text h4 {
          font-family: 'Montserrat', sans-serif;
          font-size: 1.0rem;
          font-weight: bolder;
          letter-spacing: 0.08em;
          text-transform: uppercase;
          color: rgba(255,255,255,0.7);
          margin-bottom: 0.6rem;
        }

        /* ANIMATION BASE STATE */
        .hero-text h1,
        .hero-text h4,
        .hero-text p,
        .hero-text button {
          opacity: 0;
          transform: translateY(20px);
        }

        /* TRIGGERED ANIMATIONS */
        .hero-text.animate h1 {
          animation: fadeUp 0.6s ease forwards;
        }

        .hero-text.animate h4 {
          animation: fadeUp 0.6s ease forwards;
          animation-delay: 0.12s;
        }

        .hero-text.animate p {
          animation: fadeUp 0.6s ease forwards;
          animation-delay: 0.24s;
        }

        .hero-text.animate button {
          animation: fadeUp 0.6s ease forwards;
          animation-delay: 0.36s;
        }

        /* Base reset stays the same */
        .hero-text h1,
        .hero-text h4,
        .hero-text p,
        .hero-text button {
          opacity: 0;
        }

        /* === VARIANTS === */

        /* Fade Up (default) */
        .hero-text.fade-up.animate h1,
        .hero-text.fade-up.animate h4,
        .hero-text.fade-up.animate p,
        .hero-text.fade-up.animate button {
          animation: fadeUp 0.6s ease forwards;
        }

        /* Slide Left */
        .hero-text.slide-left.animate h1,
        .hero-text.slide-left.animate h4,
        .hero-text.slide-left.animate p,
        .hero-text.slide-left.animate button {
          animation: slideLeft 0.6s ease forwards;
        }

        /* Zoom In */
        .hero-text.zoom-in.animate h1,
        .hero-text.zoom-in.animate h4,
        .hero-text.zoom-in.animate p,
        .hero-text.zoom-in.animate button {
          animation: zoomIn 0.6s ease forwards;
        }

        /* Stagger */
        .hero-text.animate h4 { animation-delay: 0.1s; }
        .hero-text.animate p  { animation-delay: 0.22s; }
        .hero-text.animate button { animation-delay: 0.34s; }

        /* Keyframes */
        @keyframes fadeUp {
          from { opacity: 0; transform: translateY(22px); }
          to   { opacity: 1; transform: translateY(0); }
        }

        @keyframes slideLeft {
          from { opacity: 0; transform: translateX(28px); }
          to   { opacity: 1; transform: translateX(0); }
        }

        @keyframes zoomIn {
          from { opacity: 0; transform: scale(0.92); }
          to   { opacity: 1; transform: scale(1); }
        }


        /* KEYFRAMES */
        @keyframes fadeUp {
          to {
            opacity: 1;
            transform: translateY(0);
          }
        }
        
        .hero-images {
          display: flex;
          justify-content: center;
          width: 100%;
        }

        /* Landscape container – never changes */
        .card-stack {
          position: relative;
          width: min(92vw, 670px);
          aspect-ratio: 16 / 9; /* locked landscape */
        }

        /* Cards */
        .card {
          position: absolute;
          inset: 0;
          border-radius: 16px;
          background-repeat: no-repeat;
          background-position: center;
          background-size: cover; /* desktop default */
          transition: transform 0.6s ease, opacity 0.6s ease;
          box-shadow: 0 25px 40px rgba(0,0,0,0.35);
        }

        /* Stack depth */
        .card:not(.active) {
          transform: translate(14px, 14px);
          opacity: 1;
        }

        .card:nth-child(2) {
          transform: translate(35px, 35px);
          opacity: 1;
        }

        .card:nth-child(3) {
          transform: translate(48px, 48px);
          opacity: 1;
        }


        /*---navigation arrows--*/
        .stack-arrows {
          position: absolute;
          bottom: -60px;
          left: 50%;
          transform: translateX(-50%);
          display: flex;
          gap: 16px;
        }

        .stack-arrows .arrow {
          width: 44px;
          height: 44px;
          border-radius: 50%;
          border: none;
          background: rgba(0,0,0,0.6);
          color: #fff;
          font-size: 26px;
          cursor: pointer;
          transition: transform 0.2s ease, background 0.2s ease;
        }

        .stack-arrows .arrow:hover {
          transform: scale(1.1);
          background: rgba(0,0,0,0.85);
        }

        /* Hide arrows on touch devices */
        @media (hover: none) {
          .stack-arrows {
            display: none;
          }
        }



        @media (max-width: 768px) {
          .hero-content {
            grid-template-columns: 1fr;
            text-align: center;
          }

          .hero-images {
            order: -1;
          }

          .card-stack {
            width: 100%;
            max-width: 420px;
          }

          .card {
            background-size: contain; /* full image, landscape preserved */
          }
        }
 
/* =========================================================
   POPULAR COURSES SCROOL —  FIX + MODERN UI UPGRADE
========================================================= */


    .causes-carousel {
    overflow: hidden;
    position: relative;
    width: 100%;
    }

    .causes-carousel__track {
        display: flex;
        transition: transform 0.9s ease;
        will-change: transform;
    }

    .causes-carousel__item {
        flex: 0 0 25%;
        box-sizing: border-box;
        padding-right: 24px;
    }

    /* Tablet */
    @media (max-width: 992px) {
        .causes-carousel__item {
            flex: 0 0 50%;
        }
    }

    /* Mobile – ONE CARD PER VIEW */
    @media (max-width: 576px) {

    .causes-carousel {
        margin-left: 5px;
        margin-right: 5px;
    }

    .causes-carousel__track {
        gap: 5;
    }

    .causes-carousel__item {
        flex: 0 0 100%;
        padding: 5;
        margin: 0;
    }
  }


 /* =========================================================
   PROGRAMS SUBCRIPTION MODAL
========================================================= */
        .notify-modal {
          max-width: 420px;
          margin: auto;
          background: #fff;
          padding: 28px;
          border-radius: 18px;
          text-align: center;
        }

        .notify-modal h3 {
          margin-bottom: 10px;
        }

        .notify-modal p {
          margin-bottom: 20px;
          font-size: 14px;
          color: #555;
        }

        .notify-modal form {
          display: flex;
          flex-direction: column;
          gap: 14px;
        }

        .notify-modal input {
          padding: 14px;
          border-radius: 12px;
          border: 1px solid #ccc;
          font-size: 15px;
        }

        .notify-modal button {
          margin-top: 10px;
        }

        /* Mobile safety */
        @media (max-width: 480px) {
          .notify-modal {
            padding: 22px;
          }
        }

 /* =========================================================
   PROGRAMS  PAGE CARDS  AND BUTTONS
========================================================= */


            /* ACTION CARDS WRAPPER */
            .causes-one__btn-group {
                display: grid;
                grid-template-columns: repeat(2, 1fr);
                gap: 16px;
                margin-top: 20px;
            }

            /* Base card */
            .causes-one__btn-group a {
                display: flex;
                align-items: center;
                gap: 14px;
                padding: 20px 18px;
                border-radius: 16px;
                text-decoration: none;
                font-weight: 600;
                color: #111;

                border: 1px solid rgba(0,0,0,.06);
                transition: all .35s ease;
                position: relative;
                overflow: hidden;
            }

            /* Soft color backgrounds */
            .btn-1 { background: linear-gradient(135deg,#f2edff,#e7ddff); }
            .btn-2 { background: linear-gradient(135deg,#edf4ff,#e2ecff); }
            .btn-3 { background: linear-gradient(135deg,#ecfbf3,#dcf4e7); grid-column: span 2; }

            /* Icon bubble */
            .causes-one__btn-group a span {
                width: 40px;
                height: 40px;
                border-radius: 12px;
                display: grid;
                place-items: center;
                font-size: 18px;
                color: #fff;
                flex-shrink: 0;
            }

            /* Solid icon colors */
            .btn-1 span { background:#6f42c1; }
            .btn-2 span { background:#0d6efd; }
            .btn-3 span { background:#198754; }

            /* Small helper text */
            .causes-one__btn-group small {
                display:block;
                font-size:12px;
                color:#6b7280;
                font-weight:400;
            }

            /* Hover / Glow / Gradient Animation */
            .causes-one__btn-group a:hover {
                transform: translateY(-4px);
                box-shadow: 0 18px 35px rgba(0,0,0,.12);
            }

            .btn-1:hover { 
                background: linear-gradient(135deg,#f2edff,#e7ddff,#f2edff);
                background-size: 400% 400%;
                animation: gradientAnim 6s ease infinite;
                border: 1px solid rgba(111,66,193,0.5);
            }

            .btn-2:hover { 
                background: linear-gradient(135deg,#edf4ff,#e2ecff,#edf4ff);
                background-size: 400% 400%;
                animation: gradientAnim 6s ease infinite;
                border: 1px solid rgba(13,110,253,0.5);
            }

            .btn-3:hover { 
                background: linear-gradient(135deg,#ecfbf3,#dcf4e7,#ecfbf3);
                background-size: 400% 400%;
                animation: gradientAnim 6s ease infinite;
                border: 1px solid rgba(25,135,84,0.5);
            }

            /* Gradient Animation */
            @keyframes gradientAnim {
                0% {background-position:0% 50%;}
                50% {background-position:100% 50%;}
                100% {background-position:0% 50%;}
            }

            /* Mobile */
            @media (max-width: 767px) {
                .causes-one__btn-group { grid-template-columns: 1fr; }
                .btn-3 { grid-column: auto; }
            }