/* ---------------------------------
   Membership Breadcrumb
----------------------------------*/

.breadcrumb-wrap .breadcrumb-content h2{
    color:#ffffff !important;
}

.breadcrumb-wrap .breadcrumb-menu li{
    color:#ffffff !important;
}

.breadcrumb-wrap .breadcrumb-menu li a{
    color:#ffffff !important;
}

.breadcrumb-wrap .breadcrumb-menu li:last-child{
    color:#ffc107 !important;
}

.breadcrumb-wrap .overlay{
    background:rgba(0,0,0,.45) !important;
}

/* ===================================================
   Membership Components
===================================================*/

.membership-feature{

    background:#fff;

    border-radius:12px;

    padding:35px;

    text-align:center;

    transition:.3s;

    height:100%;

    box-shadow:0 10px 30px rgba(0,0,0,.05);

}

.membership-feature:hover{

    transform:translateY(-8px);

    box-shadow:0 20px 40px rgba(0,0,0,.08);

}

.membership-feature .icon{

    width:80px;

    height:80px;

    margin:auto;

    border-radius:50%;

    background:#198754;

    color:#fff;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:32px;

    margin-bottom:20px;

}

.membership-stats{

    background:#198754;

    color:#fff;

}

.membership-stats h2{

    color:#fff;

    font-size:48px;

    font-weight:700;

}

.membership-stats p{

    color:#fff;

    font-size:18px;

}

.membership-cta{

    background:#f8f9fa;

}

.membership-cta h2{

    font-size:42px;

    font-weight:700;

}

.membership-category-card{

    background:#fff;

    border-radius:14px;

    overflow:hidden;

    height:100%;

    transition:.3s;

    box-shadow:0 10px 35px rgba(0,0,0,.06);

}

.membership-category-card:hover{

    transform:translateY(-8px);

    box-shadow:0 20px 45px rgba(0,0,0,.10);

}

.membership-category-header{

    background:#198754;

    padding:30px;

    text-align:center;

}

.membership-category-header h3{

    color:#fff;

    margin:0;

}

.membership-category-body{

    padding:30px;

}

.membership-category-body h4{

    color:#198754;

    font-weight:700;

}

.membership-category-footer{

    padding:30px;

}

/* membercard css */

.membership-categories-section{

    background:#f8fafc;

}

.membership-label{

    color:#198754;

    font-weight:700;

    letter-spacing:1px;

    text-transform:uppercase;

    font-size:.85rem;

}

.membership-title{

    font-size:2.5rem;

    font-weight:700;

    color:#1d2939;

}

.membership-subtitle{

    color:#667085;

    font-size:1.05rem;

    max-width:700px;

}

.membership-summary-card{

    background:#fff;

    border-radius:20px;

    padding:25px;

    display:flex;

    align-items:center;

    gap:20px;

    box-shadow:0 10px 40px rgba(15,23,42,.08);

}

.summary-icon{

    width:70px;

    height:70px;

    border-radius:18px;

    display:flex;

    align-items:center;

    justify-content:center;

    background:#ecfdf3;

    color:#198754;

    font-size:30px;

}

.membership-card{

    background:#fff;

    border-radius:24px;

    padding:35px;

    height:100%;

    position:relative;

    overflow:hidden;

    box-shadow:0 10px 35px rgba(15,23,42,.08);

    transition:.35s ease;

}

.membership-card::before{

    content:"";

    position:absolute;

    left:0;

    top:0;

    width:100%;

    height:5px;

    background:linear-gradient(90deg,#198754,#6dd5a3);

}

.membership-card:hover{

    transform:translateY(-10px);

    box-shadow:0 25px 60px rgba(15,23,42,.16);

}

.membership-header{

    text-align:center;

}

.membership-icon{

    width:90px;

    height:90px;

    margin:auto;

    border-radius:50%;

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:38px;

    transition:.4s;

}

.membership-card:hover .membership-icon{

    transform:scale(1.12);

}

.membership-line{

    width:60px;

    height:4px;

    margin:15px auto;

    border-radius:10px;

}

.membership-description{

    color:#667085;

    text-align:center;

    min-height:72px;

}

.membership-benefits{

    list-style:none;

    padding:0;

    margin:30px 0;

}

.membership-benefits li{

    padding:9px 0;

    color:#475467;

}

.membership-benefits i{

    color:#198754;

    margin-right:10px;

}

.membership-price{

    border-top:1px solid #eaecf0;

    border-bottom:1px solid #eaecf0;

    padding:20px 0;

    display:flex;

    justify-content:space-between;

}

.membership-price h4{

    font-weight:700;

    margin:0;

    color:#198754;

}

.membership-link{

    display:block;

    text-align:center;

    margin-top:18px;

    text-decoration:none;

    font-weight:600;

}

.featured-ribbon{

    position:absolute;

    top:18px;

    right:-42px;

    width:170px;

    text-align:center;

    background:#198754;

    color:#fff;

    transform:rotate(35deg);

    font-size:.75rem;

    padding:6px 0;

    font-weight:600;

}

/* ==========================================
   Membership Pages
========================================== */

.site-content,
.membership-page{

    padding-top:170px;

}

/* Wizard */

.wizard-sidebar{

    position:sticky;

    top:120px;

}

.wizard-step{

    display:flex;

    align-items:center;

    gap:12px;

    padding:12px;

    border-radius:10px;

    margin-bottom:8px;

}

.wizard-step.active{

    background:#eef7ff;

    font-weight:600;

}

.wizard-number{

    width:34px;

    height:34px;

    border-radius:50%;

    display:flex;

    justify-content:center;

    align-items:center;

    background:#dee2e6;

}

.wizard-step.active .wizard-number{

    background:#198754;

    color:#fff;

}

/* Cards */

.wizard-card{

    border:none;

    border-radius:16px;

    box-shadow:0 .5rem 1rem rgba(0,0,0,.08);

}

.upload-preview{

    border:1px solid #d9e8ff;

    background:#f8fbff;

    border-radius:10px;

    padding:15px;

    margin-top:12px;

}

.upload-preview strong{

    color:#2c3e50;

}

.upload-preview small{

    color:#7a7a7a;

}


.upload-preview{
    border:1px solid #d9e8ff;
    background:#f8fbff;
    border-radius:10px;
    padding:15px;
    margin-top:12px;
}

.upload-preview strong{
    color:#2c3e50;
}

.upload-preview small{
    color:#7a7a7a;
}