:root {
    --teal-primary: #1a7a6e;
    --teal-dark: #155f56;
    --teal-light: #e8f5f3;
    --teal-border: #c2e0db;
    --orange-badge: #e8650a;
    --text-dark: #1a2332;
    --text-muted: #6b7280;
    --text-body: #374151;
    --border-light: #e5e7eb;
    --bg-light: #f9fafb;
    --white: #ffffff;
    --sidebar-bg: #1a7a6e;
}

* {
    box-sizing: border-box;
}

body {
    font-family: "Rubik", sans-serif;
    color: var(--text-body);
    background: var(--white);
    font-size: 14px;
    line-height: 1.6;
}

/* ── NAVBAR ── */
/* .navbar-top {
        background: var(--white);
        border-bottom: 1px solid var(--border-light);
        padding: 0 32px;
        height: 60px;
    }

    .navbar-top .brand-logo {
        display: flex;
        align-items: center;
        gap: 8px;
        text-decoration: none;
    }

    .navbar-top .brand-logo .logo-icon {
        width: 36px;
        height: 36px;
        background: var(--teal-primary);
        border-radius: 4px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .navbar-top .brand-logo .logo-icon svg {
        width: 22px;
        height: 22px;
        fill: white;
    }

    .navbar-top .brand-text {
        font-size: 11px;
        font-weight: 700;
        color: var(--text-dark);
        line-height: 1.2;
        text-transform: uppercase;
        letter-spacing: 0.3px;
    }

    .navbar-top .nav-link {
        font-size: 13px;
        font-weight: 500;
        color: var(--text-dark);
        padding: 0 14px;
        text-decoration: none;
        transition: color 0.2s;
    }

    .navbar-top .nav-link:hover {
        color: var(--teal-primary);
    }

    .navbar-top .nav-link.active {
        color: var(--teal-primary);
    }

    .navbar-top .btn-login {
        background: var(--teal-primary);
        color: white;
        border: none;
        border-radius: 6px;
        padding: 8px 20px;
        font-size: 13px;
        font-weight: 600;
        cursor: pointer;
        transition: background 0.2s;
    }

    .navbar-top .btn-login:hover {
        background: var(--teal-dark);
    } */

.profile-section {
    background: linear-gradient(135deg, #233242 0%, #1e3a52 55%, #358b8d 100%);
}

.global-member-div {
    border-radius: 4px;
    background: rgba(122, 203, 205, 0.18);
    color: #fff;
    font-size: 13px;
    font-style: normal;
    font-weight: 400;
    line-height: 16px;
}

.banner-head {
    font-size: 32px;
    line-height: 53.888px;
}

.profile-section-p,
.why-join-p,
.member-ben-p,
.text-list {
    font-size: 14px;
    color: #475569;
}

.apply-member-btn {
    border-radius: 8px;
    background: #4d898c;
    box-shadow:
        0 10px 15px -3px rgba(0, 0, 0, 0.1),
        0 4px 6px -4px rgba(0, 0, 0, 0.1);
    border: none;
    font-size: 14px;
}

.compare-member-btn {
    border-radius: 8px;
    border: 0.8px solid rgba(255, 255, 255, 0.3);
    background-color: transparent;
    font-size: 14px;
}

.stat-div {
    border-radius: 9px;
    background: rgba(255, 255, 255, 0.05);
}

.stat-text {
    color: rgba(255, 255, 255, 0.7);
    font-size: 11px;
    font-style: normal;
    font-weight: 400;
    line-height: 16px;
}

.why-icon-div {
    border-radius: 14px;
    background: rgba(30, 58, 82, 0.08);
}

.why-card {
    border-radius: 16px !important;
    background: #fff;
    box-shadow:
        0 1px 3px 0 rgba(0, 0, 0, 0.1),
        0 1px 2px -1px rgba(0, 0, 0, 0.1);
}

.why-card-heading {
    color: #1e3a52;
    font-size: 18px;
    font-style: normal;
    font-weight: 600;
    line-height: 27px;
}

.ben-container .benifits-card {
    position: relative;
    border-radius: 16px !important;
    overflow: hidden;

    background: linear-gradient(
        135deg,
        #4d898c 10.87%,
        #589194 40.82%,
        #a2c7ca 80.77%,
        #d4ecee 100%
    );
}

.member-type ul li {
    font-size: 14px;
}

.member-type .white-list li {
    font-size: 14px;
    color: #1e3a52;
}

/* .member-type .mem-fees span {
    color: #1e3a52;
} */

.nav-pills .nav-link:hover {
        color: #3f9457
}

.ben-container .benifits-card::before {
    content: "";
    position: absolute;
    inset: 0;

    background: url("../images/benefit-bg.png") center/cover no-repeat;

    opacity: 0.05;

    pointer-events: none;
}

.ben-container .benifits-card::after {
    content: "";
    position: absolute;

    width: 160px;
    height: 160px;
    border-radius: 26843500px;
    background: rgba(255, 255, 255, 0.18);
    top: -30px;
    right: -30px;
    z-index: 1;
}

.ben-container .benefit-badge {
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.18);
}

.ben-container .benifit-box {
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.18);
}

.partner-img-div img {
    max-height: 50px;
}

.webinar-card {
    border-radius: 16px;
    border: 0.8px solid #4d898c;
    background: #fff;
    padding: 24px 24px 0 24px;
}

.reg-affair-sec {
    background: var(
        --RRMA-Gradient,
        linear-gradient(
            135deg,
            #4d898c 10.87%,
            #589194 40.82%,
            #a2c7ca 80.77%,
            #d4ecee 100%
        )
    );
}

.reg-affair-para {
    color: rgba(255, 255, 255, 0.8);
    font-size: 16px;
}

.custom-container {
    width: 100%;
    padding-inline: 12px;
    margin-inline: auto;
}

.all-headings {
    color: #358b8d;
    text-transform: uppercase;
}

.membership-modal .modal-badge {
    border-radius: 8px;
    background: rgba(122, 203, 205, 0.2);
    color: #7acbcd;
    font-size: 14px;
}

/* TAB SECTION */
.membership-modal .membership-tab-section {
    background: #fff;
    padding: 20px 0;
    position: relative;
}

.membership-modal .membership-tab-content {
    min-height: 300px;
    padding: 40px 0;
}

/* TAB NAVIGATION */
.membership-modal .membership-nav-pills {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    gap: 8px;
    padding: 8px;
    border-radius: 14px;
    background: #f9f7f3;
    scrollbar-width: thin;
    -webkit-overflow-scrolling: touch;
    justify-content: space-between;
}

/* Optional scrollbar styling */
.membership-modal .membership-nav-pills::-webkit-scrollbar {
    height: 6px;
}

.membership-modal .membership-nav-pills::-webkit-scrollbar-thumb {
    background: #d1d1d1;
    border-radius: 20px;
}

/* 6 tabs in desktop */
.membership-modal .membership-nav-pills .membership-category-link {
    /* flex: 1 0 calc(100% / 6 - 7px); */
    /* min-width: 0; */
    list-style: none;
}

.membership-modal .membership-category-link .nav-link {
    width: 100%;
    height: 100%;
    border-radius: 10px;
    border: 0.8px solid rgba(0, 0, 0, 0);
    color: #1e3a52;
    font-weight: 500;
    background: transparent;
    padding: 5px 8px !important;
    white-space: nowrap;
    text-align: center;
    transition: all 0.3s ease;
    font-size: 14px;
}

.membership-modal .membership-category-link .nav-link:hover {
    background: #e9ecef;
    color: #1e3a52!important;
    font-size: 14px;
}

.membership-modal .membership-category-link .nav-link.active {
    color: #fff;
    border-radius: 10px;
    background: #1e3a52 !important;
    box-shadow:
        0 1px 3px 0 rgba(0, 0, 0, 0.1),
        0 1px 2px -1px rgba(0, 0, 0, 0.1);
    font-size: 14px;
}

.membership-modal .membership-category-link .nav-link.active img {
    filter: brightness(0) invert(1);
}

.membership-modal .member-benefit-card {
    border-radius: 14px;
    border: 0.8px solid rgba(30, 58, 82, 0.08);
}

.member-benefit-card-red {
    border-radius: 14px;
    border: 0.8px solid rgba(245, 135, 33, 0.25);
    background: #fff8ee;
}

.modal-dialog.members-cat-modal {
    max-width: 1138.4px;
}
/* Mobile & Tablet */
@media (max-width: 991px) {
    .membership-nav-pills .membership-category-link {
        /* flex: 0 0 150px; */
    }
}

/* Small Mobile */
@media (max-width: 576px) {
    .membership-nav-pills .membership-category-link {
        /* flex: 0 0 130px; */
    }

    .membership-category-link .nav-link {
        font-size: 14px;
        padding: 10px 12px;
    }

    .membership-tab-content {
        padding: 20px 0;
        min-height: auto;
    }
}

/* Bootstrap-like container widths */
@media (min-width: 576px) {
    .custom-container {
        max-width: 540px;
    }
}

@media (min-width: 768px) {
    .custom-container {
        max-width: 720px;
    }
}

@media (min-width: 992px) {
    .custom-container {
        max-width: 960px;
    }
}

/* After 1200px → full width */
@media (min-width: 991px) {
    .custom-container {
        max-width: 100%;
    }
}