/* =========================== Membership At A Glance =========================== */
.membership-glance { padding: 120px 0; background-color: var(--white-color-100); }
.membership-glance .glance-title { max-width: 680px; margin-inline: auto; }
.membership-glance .glance-title .title { color: var(--blue-color); }
.membership-glance .glance-title .subtitle { color: var(--black); line-height: 26px; }
/* Glance Items */
.glance-item { border-left: 3px solid var(--green-color); padding-left: 20px; height: 100%; /* Vertically centers the text if heights vary */ }
.glance-item p { color: var(--blue-color); line-height: 1.3; /* Tighter line-height for the stacked text */ }


/* =========================== Membership Features Grid =========================== */
.membership-features { background-color: var(--white-color-100); padding-bottom: 40px; }
.feature-card { background: var(--white); border-radius: 20px; padding: 80px 40px 45px; position: relative; height: 100%; display: flex; flex-direction: column; box-shadow: 0px 4px 4px 0px #00000040; }
.feature-card-icon { position: absolute; top: 22px; right: 27px; width: 60px; height: 60px; border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.feature-title { margin-bottom: 20px; }
.feature-intro { color: var(--black); margin-bottom: 30px; }
.feature-intro strong { color: var(--blue-color); }
.feature-list { margin-bottom: 26px; flex-grow: 1; }
.feature-list li { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 2px; }
.feature-list li .check-icon { flex-shrink: 0; margin-top: 3px; }
.feature-list li span { color: var(--blue-color); line-height: 24px; }
.feature-link { position: relative; margin-top: auto; display: inline-flex; gap: 4px; width: fit-content; transition: all 0.5s; }
.feature-link::after { content: ''; position: absolute; bottom: -3px; left: 0; width: 0%; height: 1px; transition: all 0.5s; }
.feature-link:hover::after { width: 100%; }

/* ================================================== Card Color Themes ================================================ */
/* Theme 1: Maroon (Connections) */
.theme-maroon .feature-title,
.theme-maroon .feature-link { color: var(--maroon-color); }
.theme-maroon .feature-link::after { background-color: var(--maroon-color); }
.theme-maroon .feature-card-icon { background-color: rgba(138, 59, 47, 0.1); color: var(--maroon-color); }
.theme-maroon .feature-link img { filter: opacity(0.5) drop-shadow(0 0 0 #8A3B2F) drop-shadow(0 0 0 #8A3B2F);
    -webkit-filter: opacity(0.5) drop-shadow(0 0 0 #8A3B2F) drop-shadow(0 0 0 #8A3B2F);
    width: 17px; height: auto; }

/* Theme 2: Teal (Learning) */
.theme-teal .feature-title,
.theme-teal .feature-link { color: var(--green-color-400); }
.theme-teal .feature-link::after { background-color: var(--green-color-400); }
.theme-teal .feature-card-icon { background-color: rgba(47, 102, 95, 0.1); color: var(--green-color-400); }
.theme-teal .feature-link img { filter: opacity(0.5) drop-shadow(0 0 0 #398B83) drop-shadow(0 0 0 #398B83); 
    -webkit-filter: opacity(0.5) drop-shadow(0 0 0 #398B83) drop-shadow(0 0 0 #398B83);
    width: 17px; height: auto; }


/* Theme 3: Green (Industry) */
.theme-green .feature-title,
.theme-green .feature-link { color: var(--green-color); }
.theme-green .feature-link::after { background-color: var(--green-color); }
.theme-green .feature-card-icon { background-color: rgba(79, 121, 66, 0.1); color: var(--green-color); }
.theme-green .feature-link img { filter: opacity(0.5) drop-shadow(0 0 0 #3F7942) drop-shadow(0 0 0 #3F7942);
    -webkit-filter: opacity(0.5) drop-shadow(0 0 0 #3F7942) drop-shadow(0 0 0 #3F7942);
    width: 17px; height: auto; }

/* Theme 4: Beige (Knowledge Hub) */
.theme-beige .feature-title,
.theme-beige .feature-link { color: var(--beige-color); }
.theme-beige .feature-link::after { background-color: var(--beige-color); }
.theme-beige .feature-card-icon { background-color: rgba(183, 154, 90, 0.15); color: var(--beige-color); }
.theme-beige .feature-link img { filter: opacity(0.3) drop-shadow(0 0 0 #B79A5A) drop-shadow(0 0 0 #B79A5A);
    -webkit-filter: opacity(0.3) drop-shadow(0 0 0 #B79A5A) drop-shadow(0 0 0 #B79A5A);
    width: 17px; height: auto; }


/* =========================== Membership Testimonial =========================== */
.testimonial.membership-testimonial { background: var(--white-color-100); }
.testimonial.membership-testimonial:after { content: ''; display: none; }
.testimonial.membership-testimonial .testimonial-slider-item { max-width: 730px; }
.testimonial.membership-testimonial .testimonial-description { color: var(--green-color); margin-bottom: 0px; }
.testimonial.membership-testimonial .testimonial-slider::before { background-image: url('../images/membership-testimonial-top-left-quote.png'); background-size: 140px; width: 140px; height: 140px; transform: translate(-10%, -30%); -webkit-transform: translate(-10%, -30%); }
.testimonial.membership-testimonial .testimonial-slider::after { background-image: url('../images/membership-testimonial-bottom-right-quote.png'); background-size: 140px; width: 140px; height: 140px; transform: translate(-10%, -30%); -webkit-transform: translate(10%, 30%); }


/* =========================== Elevate Career CTA Section =========================== */
.elevate-career { background-color: var(--white-color-300); padding: 140px 0 106px; }
.elevate-card { background-color: var(--white); border-radius: 20px; padding: 120px 60px 101px; box-shadow: 4px 4px 10px 0px #0000001A; }
.elevate-card .elevate-title .title { color: var(--blue-color); }
.elevate-content .table-responsive { margin-bottom: 131px; max-width: 650px; margin-inline: auto; }
.elevate-content .table-responsive .column-1 { width: 200px; }
.elevate-content .table-responsive th:last-child, 
.elevate-content .table-responsive td:last-child { width: 280px; }

/* ================================================== Media Queries ================================================ */
@media screen and (max-width: 1199px) {
    .membership-glance { padding: 60px 0; }
    .glance-item { padding-left: 16px; }
    .glance-item p { font-size: 20px; }

    .feature-card { padding: 65px 20px 25px; border-radius: 16px; }
    .feature-card-icon { width: 50px; height: 50px; }

    .testimonial.membership-testimonial .testimonial-slider::before { background-size: 100px; width: 100px; height: 100px; }
    .testimonial.membership-testimonial .testimonial-slider::after { background-size: 100px; width: 100px; height: 100px; }
    
    .elevate-career { padding: 60px 0px; }
    .elevate-card { padding: 60px 35px; border-radius: 16px; }
    .elevate-content .table-responsive { margin-bottom: 60px; }

}

@media screen and (max-width: 991px) {
    .membership-glance { padding: 40px 0; }
    .glance-item { padding-left: 12px; }
    .glance-item p { font-size: 16px; }


    .membership-features { padding-bottom: 70px; }
    .feature-card { border-radius: 12px; }
    .feature-card-icon { top: 14px; right: 14px; width: 40px; height: 40px; }

    .testimonial.membership-testimonial .testimonial-slider::before { background-size: 60px; width: 60px; height: 60px; }
    .testimonial.membership-testimonial .testimonial-slider::after { background-size: 60px; width: 60px; height: 60px; }
    .testimonial.membership-testimonial .testimonial-slider-item { max-width: 550px; }


    .elevate-career { padding: 40px 0; }
    .elevate-card { padding: 40px 20px; border-radius: 12px; }
    .elevate-content .table-responsive { margin-bottom: 40px; }

}



@media screen and (max-width: 767px) {
    .glance-item { padding-left: 14px; border-left-width: 2px; }
    .membership-glance .row > div { margin-bottom: 16px !important; }

    .membership-features { padding-bottom: 50px; }
    .feature-card { padding: 75px 20px 20px; border-radius: 12px; }
    .feature-card-icon { top: 20px; right: 20px; width: 45px; height: 45px; }

    .testimonial.membership-testimonial .testimonial-slider::before { background-size: 50px; width: 50px; height: 50px; transform: translate(-10%, -60%); -webkit-transform: translate(-10%, -60%); }
    .testimonial.membership-testimonial .testimonial-slider::after { background-size: 50px; width: 50px; height: 50px; transform: translate(10%, 50%); -webkit-transform: translate(10%, 50%); }
    .feature-title { margin-bottom: 16px; }
    .feature-intro { margin-bottom: 24px; }

    
}