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

.membership-section{

    position:relative;

    padding:30px 0;

    background:#f8faf9;

    overflow:hidden;

}

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

.membership-bg{

    position:absolute;

    inset:0;

    height:420px;

    background:
    linear-gradient(135deg,
    #0c6d37 0%,
    #16a34a 55%,
    #34d399 100%);

    clip-path:ellipse(95% 100% at 50% 0);

}

.membership-bg::before{

    content:"";

    position:absolute;

    inset:0;

    background:

    radial-gradient(circle at top right,

    rgba(255,255,255,.18),

    transparent 45%);

}

.membership-bg::after{

    content:"";

    position:absolute;

    width:700px;

    height:700px;

    right:-220px;

    top:-260px;

    border-radius:50%;

    background:

    radial-gradient(circle,

    rgba(255,255,255,.18),

    transparent 70%);

}

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

.membership-heading{

    position:relative;

    z-index:3;

    text-align:center;

    max-width:760px;

    margin:auto;

    margin-bottom:80px;

}

.section-badge{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:8px 18px;

    border-radius:999px;

    background:rgba(255,255,255,.15);

    backdrop-filter:blur(14px);

    color:#fff;

    font-size:13px;

    font-weight:600;

    margin-bottom:18px;

}

.membership-heading h2{

    color:white;

    font-size:clamp(40px,4vw,60px);

    line-height:1.1;

    margin-bottom:18px;

}

.membership-heading p{

    color:rgba(255,255,255,.85);

    font-size:17px;

    line-height:1.8;

}

/*==================================================
SWIPER
==================================================*/

.membershipSwiper{

    overflow:visible;

}

.membershipSwiper .swiper-wrapper{

    display:grid;

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

    gap:40px;

    align-items:stretch;

}

.membershipSwiper .swiper-slide{

    width:auto !important;

    margin:0 !important;

}

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

.membership-card{

    position:relative;

    display:flex;

    flex-direction:column;

    height:100%;

    background:white;

    border-radius:28px;

    padding:40px 28px;

    overflow:hidden;

    border:1px solid #e9f0eb;

    box-shadow:

    0 20px 55px rgba(0,0,0,.08);

    transition:

    transform .45s cubic-bezier(.22,1,.36,1),

    box-shadow .45s;

}

.membership-card:hover{

    transform:

    translateY(-12px);

    box-shadow:

    0 35px 80px rgba(0,0,0,.14);

}

/*==================================================
FEATURED
==================================================*/

.membership-card.featured{

    background:#0a4423;

    color:white;

    transform:translateY(-18px);

}

.membership-card.featured:hover{

    transform:

    translateY(-28px);

}

.membership-card.featured .plan-duration,

.membership-card.featured .plan-description,

.membership-card.featured .price-label{

    color:rgba(255,255,255,.85);

}

.membership-card.featured .old-price{

    color:rgba(255,255,255,.55);

}

.membership-card.featured .plan-features li{

    color:white;

}

/*==================================================
RIBBON
==================================================*/

.plan-ribbon{

    position:absolute;

    top:20px;

    left:50%;

    transform:translateX(-50%) rotate(-3deg);

    min-width:160px;

    text-align:center;

    padding:12px 22px;

    border-radius:12px;

    background:#16a34a;

    color:white;

    font-weight:700;

    letter-spacing:1px;

    font-size:14px;

    box-shadow:

    0 12px 25px rgba(22,163,74,.35);

}

.featured .plan-ribbon{

    background:white;

    color:#16a34a;

}

/*==================================================
PRICE
==================================================*/

.price-area{

    margin-top:80px;

}

.old-price{

    display:block;

    font-size:18px;

    color:#9ca3af;

    text-decoration:line-through;

    margin-bottom:8px;

}

.price-area h3{

    font-size:56px;

    color:#111827;

    line-height:1;

    margin-bottom:8px;

}

.featured .price-area h3{

    color:white;

}

.price-label{

    display:block;

    color:#6b7280;

    margin-bottom:25px;

}

.plan-duration{

    display:inline-flex;

    margin-top:25px;

    color:#16a34a;

    font-weight:600;

}

.plan-description{

    margin-bottom:25px;

    color:#6b7280;

    line-height:1.8;

}

/*==================================================
FEATURES
==================================================*/

.plan-features{

    list-style:none;

    padding:0;

    margin:0;

    flex:1;

}

.plan-features li{

    display:flex;

    align-items:center;

    gap:12px;

    margin-bottom:18px;

    color:#374151;

}

.plan-features i{

    color:#16a34a;

    font-size:18px;

}

.featured .plan-features i{

    color:#4ade80;

}

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

.plan-btn{

    display:flex;

    align-items:center;

    justify-content:center;

    margin-top:35px;

    height:54px;

    border-radius:999px;

    background:#16a34a;

    color:white;

    font-weight:600;

    text-decoration:none;

    transition:.35s;

}

.plan-btn:hover{

    transform:translateY(-3px);

    box-shadow:

    0 15px 30px rgba(22,163,74,.35);

}

.featured .plan-btn{

    background:white;

    color:#16a34a;

}


.fade-up{

    opacity:0;

    transform:translateY(70px);

}

.fade-up.show{

    animation:fadeUp .9s cubic-bezier(.22,1,.36,1) forwards;

}

.delay-1.show{

    animation-delay:.15s;

}

.delay-2.show{

    animation-delay:.35s;

}

.delay-3.show{

    animation-delay:.55s;

}

@keyframes fadeUp{

    from{

        opacity:0;

        transform:translateY(70px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

.swiper-pagination{

    position:relative;

    margin-top:45px;

}

.swiper-pagination-bullet{

    width:10px;

    height:10px;

    background:#b7c3ba;

    opacity:1;

}

.swiper-pagination-bullet-active{

    width:30px;

    border-radius:20px;

    background:#16a34a;

}




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

@media (max-width:992px){

    .membership-bg{

        height:360px;

    }

    .membership-heading{

        margin-bottom:60px;

    }

    .membership-heading h2{

        font-size:44px;

    }

    .membership-card{

        padding:35px 24px;

    }

    .price-area h3{

        font-size:48px;

    }

    .plan-ribbon {
        top: 8px;
    }


}

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

@media (max-width:768px){



    .membership-bg{

        height:300px;

        clip-path:ellipse(140% 100% at 50% 0);

    }

    .membership-heading{

        margin-bottom:45px;

    }

    .membership-heading h2{

        font-size:34px;

    }

    .membership-heading p{

        font-size:15px;

    }

    .membership-card{

        border-radius:24px;

        padding:30px 22px;

    }

    .membership-card.featured{

        transform:none;

    }

    .membership-card.featured:hover{

        transform:translateY(-10px);

    }

    .price-area{

        margin-top:65px;

    }

    .price-area h3{

        font-size:42px;

    }

    .plan-ribbon{

        min-width:140px;

        font-size:13px;

        top: 0;

    }

}

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

@media (max-width:480px){

    .membership-heading h2{

        font-size:30px;

    }

    .membership-heading p{

        font-size:14px;

    }

    .membership-card{

        padding:25px 20px;

    }

    .price-area h3{

        font-size:38px;

    }

}