body {
    font-family: "Poppins", sans-serif !important;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: "Outfit", sans-serif;
}

p {
    font-family: "Poppins", sans-serif;
    font-size: 13px;
}

span {
    font-family: "Poppins", sans-serif;
}

a.btn-download {
    font-family: 'Outfit', sans-serif;
}


/*============================================ Header ===*/

.lms-header {
    --header-ease: cubic-bezier(0.4, 0, 0.2, 1);
    --header-transition: 0.25s var(--header-ease);
    --header-shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.04), 0 4px 12px rgba(15, 23, 42, 0.03);
    --header-shadow-md: 0 8px 24px rgba(15, 23, 42, 0.08);
    --header-glow: 0 0 0 3px rgba(37, 99, 235, 0.12), 0 4px 16px rgba(37, 99, 235, 0.08);
}

.brand-name,
.offer-title,
.nav-link {
    font-family: "Outfit", sans-serif;
}

.lms-header {
    position: sticky;
    top: 0;
    z-index: 9999;
    background: #ffffff;
    box-shadow: var(--header-shadow-sm);
    overflow-x: clip;
}

.topbar {
    background: #ffffff;
    border-bottom: 1px solid rgba(226, 232, 240, 0.85);
}

.lms-header .topbar-row {
    min-height: 56px;
}

.lms-header .brand {
    flex-shrink: 0;
    transition: opacity var(--header-transition);
}

.lms-header .brand:hover {
    opacity: 0.92;
}

.lms-header .brand img {
    display: block;
    max-width: 120px;
    height: auto;
}

.lms-header .top-search {
    min-width: 0;
}

.brand-logo {
    width: 40px;
    height: 40px;
    border-radius: 14px;
    background: linear-gradient(135deg, #eaf2ff, #ffffff);
    display: grid;
    place-items: center;
    border: 1px solid #cfe2ff;
    box-shadow: 0 12px 26px rgba(37, 99, 235, 0.12);
}

.brand-logo-in {
    font-weight: 800;
    color: #1d4ed8;
    letter-spacing: 0.5px;
}

.brand-name {
    font-weight: 800;
    font-size: 20px;
    color: #0b1220;
}

.search-wrap {
    position: relative;
    max-width: 600px;
    margin-left: 38px;
}

.search-input {
    height: 44px;
    font-size: 13px;
    font-weight: 500;
    padding-right: 56px;
    border-radius: 14px;
    border: 1px solid #cfe2ff;
    background: linear-gradient(180deg, #fbfdff 0%, #f8fbff 100%);
    color: #0b1220;
    transition: border-color var(--header-transition), box-shadow var(--header-transition), background var(--header-transition);
}

.search-input::placeholder {
    color: #94a3b8;
    font-weight: 400;
}

.search-input:hover {
    border-color: #b8d4fe;
    background: #ffffff;
}

.search-input:focus {
    border-color: #2563eb;
    background: #ffffff;
    box-shadow: var(--header-glow);
    outline: none;
}

.search-btn {
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
    width: 42px;
    height: 34px;
    border: 0;
    border-radius: 10px;
    background: linear-gradient(135deg, #2563eb, #1d4ed8);
    color: #fff;
    display: grid;
    place-items: center;
    box-shadow: 0 4px 12px rgba(29, 78, 216, 0.25);
    transition: transform var(--header-transition), box-shadow var(--header-transition), background var(--header-transition);
}

.search-btn:hover {
    background: linear-gradient(135deg, #1d4ed8, #1e40af);
    box-shadow: 0 6px 16px rgba(29, 78, 216, 0.32);
    transform: translateY(-50%) scale(1.04);
}

.search-btn:active {
    transform: translateY(-50%) scale(0.98);
}

.search-btn svg {
    width: 18px;
    height: 18px;
    stroke-width: 2.25;
}

.offer-pill {
    border: 1px solid #cfe2ff;
    background: linear-gradient(180deg, #fbfdff 0%, #f1f7ff 100%);
    border-radius: 16px;
    padding: 9px 12px;
    min-width: 260px;
    color: inherit;
    box-shadow: 0 2px 8px rgba(37, 99, 235, 0.06);
    transition: border-color var(--header-transition), box-shadow var(--header-transition), transform var(--header-transition), background var(--header-transition);
}

a.offer-pill:hover {
    border-color: #93c5fd;
    background: linear-gradient(180deg, #ffffff 0%, #eef6ff 100%);
    box-shadow: 0 8px 22px rgba(37, 99, 235, 0.12);
    transform: translateY(-1px);
}

.offer-ico {
    width: 36px;
    height: 36px;
    border-radius: 14px;
    background: linear-gradient(135deg, #eaf2ff, #ffffff);
    display: grid;
    place-items: center;
    color: #1d4ed8;
    border: 1px solid #cfe2ff;
    box-shadow: 0 2px 6px rgba(37, 99, 235, 0.08);
    flex-shrink: 0;
    transition: transform var(--header-transition);
}

a.offer-pill:hover .offer-ico {
    transform: scale(1.05);
}

.offer-ico svg {
    width: 18px;
    height: 18px;
    stroke-width: 2.25;
}

.offer-txt {
    min-width: 0;
    line-height: 1.25;
}

.offer-title {
    font-weight: 700;
    font-size: 13px;
    color: #0b1220;
    line-height: 1.2;
    letter-spacing: -0.01em;
}

.offer-sub {
    font-size: 12px;
    color: #475569;
    font-weight: 500;
    margin-top: 1px;
}

.offer-timer {
    display: inline-block;
    font-weight: 700;
    font-size: 12px;
    color: #dc2626;
    background: linear-gradient(135deg, #fef2f2, #fee2e2);
    padding: 1px 7px;
    border-radius: 6px;
    margin-left: 2px;
    letter-spacing: 0.02em;
    font-variant-numeric: tabular-nums;
    transition: color var(--header-transition), background var(--header-transition);
}

a.offer-pill:hover .offer-timer {
    color: #b91c1c;
    background: linear-gradient(135deg, #fee2e2, #fecaca);
}

.btn-pill {
    border-radius: 999px !important;
    padding: 8px 14px;
}

.lms-header .topbar .btn-pill {
    font-weight: 600;
    font-size: 13px;
    letter-spacing: 0.01em;
    transition: transform var(--header-transition), box-shadow var(--header-transition), background var(--header-transition), border-color var(--header-transition), color var(--header-transition);
}

.lms-header .topbar .btn-pill:hover {
    transform: scale(1.03);
}

.lms-header .topbar .btn-pill:active {
    transform: scale(0.98);
}

.btn-primary {
    background: linear-gradient(135deg, #2563eb, #1d4ed8);
    border-color: #1d4ed8;
    box-shadow: 0 14px 34px rgba(29, 78, 216, 0.22);
}

.lms-header .topbar .btn-primary {
    background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 50%, #1e40af 100%);
    border-color: #1d4ed8;
    box-shadow: 0 4px 14px rgba(29, 78, 216, 0.28), 0 1px 3px rgba(29, 78, 216, 0.12);
    font-weight: 700;
}

.btn-primary:hover {
    background: linear-gradient(135deg, #1d4ed8, #1e40af);
    border-color: #1e40af;
}

.lms-header .topbar .btn-primary:hover {
    background: linear-gradient(135deg, #1d4ed8 0%, #1e40af 100%);
    border-color: #1e40af;
    box-shadow: 0 8px 22px rgba(29, 78, 216, 0.35), 0 2px 6px rgba(29, 78, 216, 0.15);
}

.btn-outline-primary {
    border-color: #1d4ed8;
    color: #1d4ed8;
}

.lms-header .topbar .btn-outline-primary {
    border-width: 1.5px;
    background: #ffffff;
    box-shadow: 0 1px 4px rgba(15, 23, 42, 0.04);
}

.btn-outline-primary:hover {
    background: linear-gradient(135deg, #2563eb, #1d4ed8);
    border-color: #1d4ed8;
    color: #fff;
}

.lms-header .topbar .btn-outline-primary:hover {
    box-shadow: 0 6px 18px rgba(29, 78, 216, 0.2);
}

/* Header — logged-in user section */
.header-orders-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 12px;
    border-radius: 999px;
    border: 1px solid #cfe2ff;
    background: linear-gradient(180deg, #fbfdff, #f1f7ff);
    color: #1d4ed8;
    font-size: 12px;
    font-weight: 700;
    text-decoration: none;
    font-family: "Outfit", sans-serif;
    transition: background var(--header-transition), border-color var(--header-transition), box-shadow var(--header-transition), transform var(--header-transition), color var(--header-transition);
    white-space: nowrap;
}

.header-orders-badge svg {
    width: 15px;
    height: 15px;
    stroke-width: 2.25;
}

.header-orders-badge:hover {
    background: #eef6ff;
    border-color: #93c5fd;
    color: #1e40af;
    box-shadow: 0 4px 14px rgba(37, 99, 235, 0.1);
    transform: translateY(-1px);
}

.header-user-dropdown {
    position: relative;
}

.header-user-toggle {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 4px 10px 4px 4px;
    border: 1px solid #cfe2ff;
    border-radius: 999px;
    background: linear-gradient(180deg, #fbfdff, #f1f7ff);
    cursor: pointer;
    transition: background var(--header-transition), border-color var(--header-transition), box-shadow var(--header-transition), transform var(--header-transition);
}

.header-user-toggle:hover,
.header-user-toggle.show,
.header-user-dropdown:hover .header-user-toggle {
    background: #eef6ff;
    border-color: #93c5fd;
    box-shadow: 0 8px 20px rgba(37, 99, 235, 0.12);
}

.header-user-toggle:active {
    transform: scale(0.98);
}

.header-user-toggle::after {
    display: none;
}

.header-user-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid #fff;
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.15);
    flex-shrink: 0;
}

.header-user-info {
    display: flex;
    flex-direction: column;
    line-height: 1.15;
    text-align: left;
    min-width: 0;
}

.header-user-welcome {
    font-size: 11px;
    color: #64748b;
    font-weight: 500;
}

.header-user-name {
    font-size: 13px;
    font-weight: 700;
    color: #0b1220;
    font-family: "Outfit", sans-serif;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 140px;
}

.header-user-chevron {
    display: grid;
    place-items: center;
    color: #64748b;
    flex-shrink: 0;
}

.header-user-chevron svg {
    width: 16px;
    height: 16px;
    stroke-width: 2.25;
    transition: transform var(--header-transition);
}

.header-user-dropdown:hover .header-user-chevron svg,
.header-user-toggle.show .header-user-chevron svg {
    transform: rotate(180deg);
}

.header-user-menu {
    min-width: 240px;
    border: 1px solid #dbeafe;
    border-radius: 14px;
    padding: 8px;
    box-shadow: var(--header-shadow-md);
    margin-top: 8px !important;
}

.header-user-menu .dropdown-item {
    display: flex;
    align-items: center;
    gap: 10px;
    border-radius: 10px;
    padding: 9px 12px;
    font-size: 13px;
    font-weight: 600;
    transition: background var(--header-transition), color var(--header-transition), transform var(--header-transition);
}

.header-user-menu .dropdown-item:hover {
    transform: translateX(2px);
}

.header-user-menu .dropdown-item svg {
    width: 16px;
    height: 16px;
    color: #64748b;
    flex-shrink: 0;
}

.header-user-menu .dropdown-item.text-danger svg {
    color: #ef4444;
}

.header-user-menu .dropdown-item .badge {
    font-size: 10px;
}

.header-menu-user {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 4px 0;
}

.header-menu-meta {
    font-size: 11px;
    color: #64748b;
}

.mobile-user-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    border-radius: 14px;
    border: 1px solid #cfe2ff;
    background: linear-gradient(180deg, #fbfdff, #f1f7ff);
    box-shadow: 0 2px 10px rgba(37, 99, 235, 0.06);
}

.mobile-user-card-info {
    min-width: 0;
}

@media (max-width: 575.98px) {
    .header-user-info {
        display: none;
    }

    .header-user-toggle {
        padding: 3px;
        border-radius: 50%;
    }

    .header-user-chevron {
        display: none;
    }

    .header-orders-badge span {
        display: none;
    }

    .header-orders-badge {
        padding: 8px 10px;
    }
}

@media (min-width: 768px) {
    .header-user-dropdown.dropdown-hover:hover > .dropdown-menu,
    .header-user-dropdown.dropdown-hover > .dropdown-menu.show {
        display: block;
    }
}

.navstrip {
    background: #ffffff;
    border-bottom: 1px solid #e8edf8;
    box-shadow: 0 4px 18px rgba(15, 23, 42, 0.05);
    overflow: visible;
}

.navstrip .container-fluid {
    overflow: visible;
}

.navstrip-scroll {
    overflow-x: auto;
    overflow-y: visible;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

@media (min-width: 768px) {
    .navstrip-scroll {
        overflow: visible;
    }
}

.navstrip-scroll::-webkit-scrollbar {
    display: none;
}

.nav-links {
    gap: 4px;
    margin: 0;
    padding: 8px 0;
    list-style: none;
    flex-wrap: nowrap;
    min-width: max-content;
}

.nav-links .nav-link {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: #475569;
    font-weight: 600;
    font-size: 13px;
    padding: 10px 14px;
    border-radius: 12px;
    white-space: nowrap;
    position: relative;
    transition: background var(--header-transition), color var(--header-transition), box-shadow var(--header-transition), transform var(--header-transition);
}

.nav-links .nav-item-icon svg {
    width: 15px;
    height: 15px;
    stroke-width: 2.25;
    opacity: 0.85;
    transition: opacity var(--header-transition), color var(--header-transition);
}

.nav-links .nav-link:hover {
    background: #f1f5fb;
    color: #1d4ed8;
    transform: translateY(-1px);
}

.nav-links .nav-link:hover .nav-item-icon svg {
    opacity: 1;
    color: #1d4ed8;
}

.nav-links .nav-link.active {
    background: linear-gradient(135deg, #2563eb, #1d4ed8);
    color: #ffffff;
    box-shadow: 0 6px 18px rgba(37, 99, 235, 0.28);
    font-weight: 700;
}

.nav-links .nav-link.active::after {
    content: "";
    position: absolute;
    bottom: 4px;
    left: 50%;
    transform: translateX(-50%);
    width: 16px;
    height: 3px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.45);
}

.nav-links .nav-link.active .nav-item-icon svg,
.nav-links .nav-link.active .nav-ico svg {
    opacity: 1;
    color: #ffffff;
}

.nav-badge {
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 2px 7px;
    border-radius: 999px;
    background: #fef3c7;
    color: #b45309;
    line-height: 1.2;
}

.nav-links .nav-link.active .nav-badge {
    background: rgba(255, 255, 255, 0.22);
    color: #ffffff;
}

.nav-links .dropdown-toggle::after {
    display: none !important;
}

.nav-ico svg {
    width: 14px;
    height: 14px;
    stroke-width: 2.4;
    opacity: 0.65;
    transition: opacity var(--header-transition), transform var(--header-transition);
}

.nav-links .nav-link:hover .nav-ico svg {
    opacity: 1;
}

.nav-links .dropdown:hover > .nav-link .nav-ico svg {
    transform: rotate(180deg);
}

.dropdown-menu {
    border: 1px solid #e2e8f8;
    border-radius: 14px;
    padding: 8px;
    box-shadow: var(--header-shadow-md);
    margin-top: 6px !important;
    z-index: 10050;
}

@media (min-width: 768px) {
    .lms-header .dropdown-menu {
        display: block;
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transform: translateY(8px) scale(0.98);
        transition: opacity 0.25s var(--header-ease), transform 0.25s var(--header-ease), visibility 0.25s;
    }

    .lms-header .dropdown-hover:hover > .dropdown-menu,
    .lms-header .dropdown-menu.show {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transform: translateY(0) scale(1);
    }
}

.lms-header .dropdown-menu.show {
    display: block;
}

.dropdown-item {
    display: flex;
    align-items: center;
    gap: 8px;
    border-radius: 10px;
    padding: 8px 12px;
    font-weight: 600;
    color: #0b1220;
    font-size: 13px;
    transition: background var(--header-transition), color var(--header-transition), transform var(--header-transition);
}

.dropdown-item svg {
    width: 15px;
    height: 15px;
    stroke-width: 2.25;
    color: #64748b;
    flex-shrink: 0;
    transition: color var(--header-transition);
}

.dropdown-item:hover {
    background: #eef6ff;
    color: #1d4ed8;
    transform: translateX(2px);
}

.dropdown-item:hover svg {
    color: #1d4ed8;
}

.main-dd {
    min-width: 280px;
}

.sub-dd {
    min-width: 280px;
}

.drop-submenu {
    position: relative;
}

.drop-submenu>.sub-dd {
    display: none;
    position: absolute;
    top: 0;
    left: 100%;
    margin-left: 10px;
}

@media (min-width: 768px) {
    .drop-submenu > .sub-dd {
        display: block;
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transform: translateX(-6px);
        transition: opacity 0.25s var(--header-ease), transform 0.25s var(--header-ease), visibility 0.25s;
    }

    .drop-submenu:hover > .sub-dd {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transform: translateX(0);
    }
}

.nav-links .nav-item.dropdown {
    position: relative;
}

@media (min-width: 768px) {
    .dropdown-hover:hover > .dropdown-menu {
        display: block;
    }
}

.mobile-links .m-link {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border-radius: 12px;
    border: 1px solid #e8eefc;
    background: #fff;
    color: #0b1220;
    text-decoration: none;
    font-weight: 600;
    margin-bottom: 8px;
    font-size: 13px;
    transition: background var(--header-transition), border-color var(--header-transition), color var(--header-transition), transform var(--header-transition), box-shadow var(--header-transition);
}

.mobile-links .m-link-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 8px;
    background: #f1f5fb;
    color: #1d4ed8;
    flex-shrink: 0;
    transition: background var(--header-transition), color var(--header-transition);
}

.mobile-links .m-link-icon svg {
    width: 15px;
    height: 15px;
    stroke-width: 2.25;
}

.mobile-links .m-link.active,
.mobile-links .m-link:hover {
    background: #f7fbff;
    border-color: #cfe2ff;
    color: #1d4ed8;
    box-shadow: 0 2px 8px rgba(37, 99, 235, 0.06);
}

.mobile-links .m-link:active {
    transform: scale(0.99);
}

.mobile-links .m-link.active {
    background: linear-gradient(135deg, #2563eb, #1d4ed8);
    border-color: #1d4ed8;
    color: #ffffff;
}

.mobile-links .m-link.active .m-link-icon {
    background: rgba(255, 255, 255, 0.18);
    color: #ffffff;
}

.mobile-nav-label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #94a3b8;
    margin: 4px 0 10px;
    padding-left: 4px;
}

.mobile-links .m-child {
    display: none;
    padding-left: 10px;
    margin-bottom: 10px;
    overflow: hidden;
}

.mobile-links .m-child.is-open {
    display: block;
    animation: mobileChildIn 0.28s var(--header-ease);
}

@keyframes mobileChildIn {
    from {
        opacity: 0;
        transform: translateY(-6px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.mobile-links .m-link.has-child {
    background: #f7fbff;
    cursor: pointer;
    text-align: left;
    font-family: inherit;
}

.mobile-links .m-link.has-child > span:last-child {
    font-size: 16px;
    font-weight: 400;
    color: #64748b;
    transition: transform var(--header-transition), color var(--header-transition);
    line-height: 1;
}

.mobile-links .m-link.has-child.is-expanded > span:last-child {
    transform: rotate(45deg);
    color: #1d4ed8;
}

@media (max-width: 767.98px) {
    .navstrip {
        display: none !important;
    }
}

@media (min-width: 768px) and (max-width: 991.98px) {
    .nav-links .nav-link {
        padding: 9px 12px;
        font-size: 12px;
    }

    .nav-links .nav-item-icon svg {
        width: 14px;
        height: 14px;
    }
}

#mobileMenu .btn-pill {
    font-weight: 600;
    transition: transform var(--header-transition), box-shadow var(--header-transition), background var(--header-transition);
}

#mobileMenu .btn-pill:hover {
    transform: scale(1.02);
}

#mobileMenu .btn-primary {
    background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 50%, #1e40af 100%);
    box-shadow: 0 4px 14px rgba(29, 78, 216, 0.28);
    font-weight: 700;
}

#mobileMenu .btn-primary:hover {
    box-shadow: 0 8px 22px rgba(29, 78, 216, 0.35);
}

#mobileMenu.offcanvas {
    height: 100vh;
    max-width: min(320px, 88vw);
    border-right: 1px solid #e8edf8;
    box-shadow: 8px 0 32px rgba(15, 23, 42, 0.12);
    transition: transform 0.3s var(--header-ease);
}

#mobileMenu .offcanvas-header {
    padding: 14px 16px;
    border-bottom: 1px solid #e8edf8;
    background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
}

#mobileMenu .offcanvas-body {
    height: calc(100vh - 80px);
    overflow-y: auto;
    overflow-x: hidden;
    padding: 16px;
    padding-bottom: 24px;
    -webkit-overflow-scrolling: touch;
}

#mobileMenu .offcanvas-body::-webkit-scrollbar {
    width: 8px;
}

#mobileMenu .offcanvas-body::-webkit-scrollbar-track {
    background: #eef3ff;
    border-radius: 20px;
}

#mobileMenu .offcanvas-body::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #2563eb, #1d4ed8);
    border-radius: 20px;
}

#mobileMenu .offcanvas-body::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, #1d4ed8, #1e40af);
}

#mobileMenu .offcanvas-body {
    scrollbar-width: thin;
    scrollbar-color: #2563eb #eef3ff;
}

.offcanvas {
    height: 100vh;
}

/* Mobile header polish */
.lms-header .topbar [data-bs-toggle="offcanvas"] {
    width: 38px;
    height: 38px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    border: 1px solid #e2e8f0;
    background: linear-gradient(180deg, #ffffff, #f8fafc);
    box-shadow: 0 2px 6px rgba(15, 23, 42, 0.05);
    flex-shrink: 0;
    transition: background var(--header-transition), border-color var(--header-transition), box-shadow var(--header-transition), transform var(--header-transition);
}

.lms-header .topbar [data-bs-toggle="offcanvas"] svg {
    width: 20px;
    height: 20px;
    stroke-width: 2.25;
}

.lms-header .topbar [data-bs-toggle="offcanvas"]:hover {
    background: #f1f5fb;
    border-color: #cfe2ff;
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.1);
}

.lms-header .topbar [data-bs-toggle="offcanvas"]:active {
    transform: scale(0.96);
}

@media (max-width: 767.98px) {
    .lms-header .search-wrap {
        margin-left: 0;
        max-width: 100%;
    }

    .lms-header .topbar .container-fluid {
        overflow-x: clip;
    }

    .lms-header .topbar-row {
        flex-wrap: nowrap;
        gap: 10px;
    }

    .lms-header .topbar-row > .ms-auto {
        flex-shrink: 0;
        min-width: 0;
    }
}

@media (max-width: 575.98px) {
    .lms-header .brand img {
        max-width: 100px;
    }

    .lms-header .topbar-row {
        gap: 8px;
        padding-top: 8px !important;
        padding-bottom: 8px !important;
    }
}


/*============================================ Marquee ===*/

.trendbar {
    width: 100%;
    background: #fff;
    /* border-bottom: 1px solid #e9eef6; */
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 8px 14px;
    overflow: hidden;
    white-space: nowrap;
}

.trendbar-label {
    font-weight: 600;
    color: #111827;
    font-size: 14px;
    flex: 0 0 auto;
}

.trendbar-marquee {
    position: relative;
    overflow: hidden;
    flex: 1 1 auto;
}

.trendbar-track {
    display: inline-block;
    white-space: nowrap;
    animation: trendmove 22s linear infinite;
    padding-left: 10px;
}

.trendbar-track a {
    color: #1d4ed8;
    text-decoration: none;
    font-weight: 500;
    font-size: 13px;
}

.trendbar-track a:hover {
    text-decoration: underline;
}

.trendbar-track .sep {
    color: #d9d9d9;
    opacity: 0.7;
    margin: 0 12px;
    font-weight: 600;
}

@keyframes trendmove {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-50%);
    }
}

.trendbar:hover .trendbar-track {
    animation-play-state: paused;
}

@media (max-width: 576px) {
    .trendbar {
        padding: 8px 10px;
    }
    .trendbar-label {
        font-size: 13px;
    }
    .trendbar-track a {
        font-size: 13px;
    }
}


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

.lms-card {
    background: #fff;
    padding: 12px 20px;
    border-radius: 20px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
}

.item {
    position: relative;
    display: block;
    text-decoration: none;
    /* padding: 8px 6px; */
    padding: 0px;
    transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.item:hover {
    transform: translateY(-4px);
    /* box-shadow: 0 20px 40px rgba(0, 0, 0, 0.12); */
    /* background: #f6f9ff; */
}

.item:hover .icon-box {
    /* transform: translateY(-6px) scale(1.08); */
    /* box-shadow: 0 14px 25px rgba(0, 0, 0, .10); */
}

.item:hover p {
    color: #111827;
    transform: translateY(-2px);
}

.icon-box,
.item p {
    transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.icon-box {
    width: 65px;
    height: 65px;
    margin: auto;
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.25s ease;
}

.icon-box svg {
    width: 28px;
    height: 28px;
    transition: all 0.25s ease;
}

.bg1 {
    background: rgb(255, 242, 235);
}

.bg2 {
    background: rgb(243, 240, 255);
}

.bg3 {
    background: rgba(115, 0, 255, 0.1);
}

.bg4 {
    background: rgb(240, 253, 250);
}

.bg5 {
    background: #e9f0ff;
}

.bg6 {
    background: #ffe9ec;
}

.bg22 {
    background: rgba(108, 41, 128, 0.06);
}

.bg33 {
    background: rgba(255, 124, 43, 0.11);
}

.bg44 {
    background: rgba(221, 249, 251, 0.54);
}

.bg55 {
    background: rgba(254, 228, 232, 0.57);
}

.bg333 {
    background: rgba(245, 228, 254, 0.91);
}

.bg4444 {
    background: rgba(7, 94, 84, 0.07);
}

.item p {
    margin-top: 10px;
    font-size: 11px;
    font-weight: 600;
    color: #444;
    transition: all 0.25s ease;
}

.item:hover p {
    color: #111827;
    transform: translateY(1px);
}

.badge-top {
    position: absolute;
    top: -10px;
    left: 50%;
    transform: translateX(-50%);
    background: #facc15;
    padding: 3px 10px;
    font-size: 11px;
    border-radius: 20px;
    font-weight: 700;
    box-shadow: 0 10px 18px rgba(250, 204, 21, 0.25);
    animation: badgeBlink 2.2s ease-in-out infinite;
    white-space: nowrap;
    color: #202020;
}


/* smoother hide/show */

@keyframes badgeBlink {
    0% {
        opacity: 1;
    }
    35% {
        opacity: 1;
    }
    50% {
        opacity: 0;
    }
    65% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

.item:active {
    transform: translateY(-1px) scale(0.99);
}

.lms-heading {
    font-size: 15px;
    font-weight: 600;
}


/*-============================== Upcoming ===*/

.ue-card {
    background: #fff;
    border-radius: 22px;
    padding: 18px 18px;
    box-shadow: 0 14px 32px rgba(16, 24, 40, 0.1), 0 2px 6px rgba(16, 24, 40, 0.06);
    border: 1px solid #eef2fb;
}

.ue-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
}

.ue-head h5 {
    font-size: 15px;
    font-weight: 600;
    color: #202020;
}

.ue-more {
    font-weight: 600;
    text-decoration: none;
    color: #1d4ed8;
    font-size: 13px;
}

.ue-more:hover {
    text-decoration: underline;
}

.ue-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
}

.ue-item {
    text-decoration: none;
    background: #fff;
    border: 1px solid #eef2fb;
    border-radius: 20px;
    padding: 16px 10px;
    text-align: center;
    box-shadow: 0 10px 18px rgb(184 184 184 / 6%);
    transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

.ue-item:hover {
    transform: translateY(-3px);
    box-shadow: 0 22px 40px rgba(16, 24, 40, 0.14);
    border-color: #dbe7ff;
}

.ue-logo {
    width: 54px;
    height: 54px;
    border-radius: 999px;
    background: #fff;
    margin: 0 auto 10px;
    display: grid;
    place-items: center;
    border: 1px solid #eef2fb;
    box-shadow: 0 12px 20px rgba(16, 24, 40, 0.08);
}

.ue-logo img {
    width: 50px;
    height: 50px;
    object-fit: contain;
}

.ue-title {
    font-size: 13px;
    font-weight: 600;
    color: #111827;
}


/* RIGHT SLIDER */

.ban-wrap {
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 14px 32px rgba(16, 24, 40, 0.1), 0 2px 6px rgba(16, 24, 40, 0.06);
    border: 1px solid #eef2fb;
    background: #fff;
}

.ban-slide {
    display: block;
    width: 100%;
    height: 100%;
    text-decoration: none;
}

.ban-slide img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    aspect-ratio: 16 / 5;
}


/* swiper controls */

.banSwiper .swiper-button-prev,
.banSwiper .swiper-button-next {
    width: 38px;
    height: 38px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.86);
    box-shadow: 0 12px 22px rgba(16, 24, 40, 0.16);
}

.banSwiper .swiper-button-prev:after,
.banSwiper .swiper-button-next:after {
    font-size: 16px;
    font-weight: 900;
    color: #111827;
}

.banSwiper .swiper-pagination-bullet {
    width: 18px;
    height: 3px;
    border-radius: 999px;
}

@media (max-width: 991px) {
    .ue-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
    .ban-slide img {
        aspect-ratio: 16 / 6;
    }
}

@media (max-width: 520px) {
    .ue-grid {
        grid-template-columns: repeat(4, 84px);
        overflow: auto;
        padding-bottom: 8px;
    }
    .ue-grid::-webkit-scrollbar {
        height: 6px;
    }
    .ue-grid::-webkit-scrollbar-thumb {
        background: #dbe7ff;
        border-radius: 999px;
    }
}

@media (max-width: 576px) {
    .ue-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 14px;
    }
}


/*================================ POPULAR PACKAGES ===*/

.pkg-title {
    font-weight: 600;
    color: #1d4ed8;
    font-family: "Outfit", sans-serif;
    letter-spacing: 0.2px;
}

.pkg-link {
    color: #1d4ed8;
    font-weight: 700;
    text-decoration: none;
}

.pkg-link:hover {
    text-decoration: underline;
}

.pkg-card {
    height: 100%;
    background: linear-gradient(180deg, #ffffff, #fbfcff);
    border: 1px solid #e6edf8;
    border-radius: 22px;
    padding: 18px 18px 16px;
    box-shadow: 0 14px 30px rgba(16, 24, 40, 0.1), 0 2px 6px rgba(16, 24, 40, 0.06);
    position: relative;
    overflow: hidden;
    transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.pkg-card:before {
    content: "";
    position: absolute;
    inset: -60px -60px auto auto;
    width: 180px;
    height: 180px;
    background: radial-gradient(circle, rgb(175 200 255 / 20%), transparent 60%);
    pointer-events: none;
}

.pkg-card:hover {
    transform: translateY(-10px);
    border-color: #dbe7ff;
    box-shadow: 0 22px 48px rgba(16, 24, 40, 0.14);
}

.pkg-top {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    justify-content: space-between;
}

.pkg-h {
    font-weight: 900;
    font-size: 16px;
    color: #0b1220;
    font-family: "Outfit", sans-serif;
    margin: 0;
    line-height: 1.2;
}

.pkg-sub {
    margin: 6px 0 0;
    color: #6b7280;
    font-size: 12.5px;
    line-height: 1.4;
}

.pkg-chip {
    flex: 0 0 auto;
    font-size: 11px;
    font-weight: 800;
    color: #1d4ed8;
    background: rgba(37, 99, 235, 0.1);
    border: 1px solid rgba(37, 99, 235, 0.22);
    padding: 5px 10px;
    border-radius: 999px;
    white-space: nowrap;
}

.pkg-rule {
    height: 1px;
    background: linear-gradient( 90deg, rgba(29, 78, 216, 0), rgba(29, 78, 216, 0.55), rgba(29, 78, 216, 0));
    margin: 14px 0 14px;
}

.pkg-list {
    list-style: none;
    padding: 0;
    margin: 0 0 16px;
    display: grid;
    gap: 10px;
}

.pkg-list li {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    color: #374151;
    font-size: 13px;
    line-height: 1.45;
}

.pkg-list svg {
    width: 16px;
    height: 16px;
    margin-top: 2px;
    color: #21c000;
    flex: 0 0 auto;
}

.pkg-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 44px;
    border-radius: 14px;
    border: 1px solid #1d4ed8;
    background: linear-gradient(135deg, #2563eb, #1d4ed8);
    color: #fff;
    font-weight: 900;
    font-family: "Outfit", sans-serif;
    text-decoration: none;
    transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.pkg-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 16px 30px rgba(37, 99, 235, 0.22);
    color: #fff;
}

.pkg-btn:active {
    transform: translateY(0);
}

@media (max-width: 576px) {
    .pkg-card {
        border-radius: 18px;
    }
}


/*================================ Success Stories ===*/

.tsec-wrap {
    padding: 70px 0;
    background: #ffffff;
    position: relative;
    overflow: hidden;
}


/* head */

.tsec-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 14px;
    position: relative;
    z-index: 1;
}

.tsec-kicker {
    font-size: 11px;
    letter-spacing: 0.18em;
    font-weight: 800;
    color: #6b7280;
    text-transform: uppercase;
    margin-bottom: 8px;
}

.tsec-title {
    margin: 0;
    font-size: 40px;
    line-height: 1.05;
    font-weight: 600;
    color: #0b1220;
    font-family: "Outfit", sans-serif;
}

.tsec-sub {
    margin: 12px 0 0;
    max-width: 560px;
    color: #6b7280;
    font-size: 14px;
    line-height: 1.6;
}


/* controls */

.tsec-ctrls {
    display: flex;
    gap: 10px;
    padding-top: 10px;
    flex: 0 0 auto;
}

.tsec-btn {
    width: 44px;
    height: 44px;
    border-radius: 999px;
    border: 1px solid #e6edf8;
    background: #fff;
    display: grid;
    place-items: center;
    box-shadow: 0 10px 18px rgba(16, 24, 40, 0.1);
    transition: all 0.25s ease;
}

.tsec-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 18px 28px rgba(16, 24, 40, 0.14);
}

.tsec-btn svg {
    width: 18px;
    height: 18px;
    color: #111827;
}


/* card (purple content) */

.tcard {
    background: #f0f5ff;
    /* purple card */
    border-radius: 20px;
    overflow: hidden;
    display: flex;
    /* min-height: 220px; */
    /* box-shadow: 0 14px 30px rgba(16, 24, 40, 0.12); */
}

.tcard-left {
    width: 230px;
    padding: 22px 18px;
    background: rgba(255, 255, 255, 0.06);
    border-right: 1px solid rgba(255, 255, 255, 0.1);
    text-align: left;
    display: flex;
    flex-direction: column;
    /* gap: 10px; */
    justify-content: center;
}

.tcard-pic {
    width: 94px;
    height: 94px;
    border-radius: 50%;
    overflow: hidden;
    border: 2px solid rgba(255, 255, 255, 0.25);
    background: rgba(255, 255, 255, 0.1);
    margin: auto;
    margin-bottom: 5px;
}

.tcard-pic img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    display: block;
}

.tcard-name {
    color: #2159e2;
    font-weight: 900;
    font-family: "Outfit", sans-serif;
    font-size: 16px;
    margin-top: 2px;
    text-align: center;
}

.tcard-role {
    color: rgb(0 0 0 / 78%);
    font-size: 12px;
    font-weight: 600;
    text-align: center;
}

.tcard-right {
    flex: 1;
    position: relative;
    padding: 26px 26px 24px;
    display: flex;
    align-items: center;
}

.tcard-quote {
    margin: 0;
    color: #202020;
    font-size: 13px;
    line-height: 1.8;
    font-weight: 600;
    max-width: 740px;
}


/* .tcard-quoteMark {
    position: absolute;
    font-size: 44px;
    line-height: 1;
    font-weight: 900;
    color: #202020;
    font-family: "Outfit", sans-serif;
    pointer-events: none;
    font-size: 13px;
} */


/* .tqm-left {
    left: 18px;
    top: 10px;
}

.tqm-right {
    right: 18px;
    top: 10px;
} */


/* dots */


/* 
.tsecDots {
    margin-top: 14px;
    position: relative;
    z-index: 2;
} */

.tsecDots .swiper-pagination-bullet {
    width: 18px;
    height: 3px;
    border-radius: 999px;
    background: #cbd5e1;
    opacity: 1;
    margin: 0 4px !important;
}

.tsecDots .swiper-pagination-bullet-active {
    background: #1d4ed8;
}


/* footer */

.tsec-foot {
    margin-top: 14px;
    position: relative;
    z-index: 1;
}

.tsec-trust {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #111827;
    font-size: 13px;
}

.tsec-star {
    color: #22c55e;
    font-size: 18px;
    line-height: 1;
}

.tsec-mini {
    font-weight: 800;
}

.tsec-small {
    color: #6b7280;
    font-size: 12px;
    margin-left: 10px;
}


/* responsive */

@media (max-width: 992px) {
    .tsec-title {
        font-size: 32px;
    }
    .tcard {
        flex-direction: column;
    }
    .tcard-left {
        width: 100%;
        flex-direction: row;
        align-items: center;
        gap: 14px;
    }
    .tcard-right {
        padding: 18px;
    }
    .tqm-right {
        display: none;
    }
}

@media (max-width: 576px) {
    .tsec-title {
        font-size: 26px;
    }
    .tsec-ctrls {
        display: none;
    }
    .tcard-quote {
        font-size: 14px;
    }
}


/*================================== ACHIVERS ===*/

.ach-wrap {
    padding: 32px;
    background: #f9f9fa;
}

.ach-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
}

.ach-title {
    margin: 0;
    font-weight: 600;
    font-family: "Outfit", sans-serif;
    color: #1d4ed8;
    font-size: 20px;
}

.ach-more {
    color: #1d4ed8;
    /* theme blue */
    font-weight: 600;
    text-decoration: none;
}

.ach-more:hover {
    text-decoration: underline;
}

.achSwiper .swiper-slide {
    width: auto;
}

.ach-card {
    width: 210px;
    display: block;
    text-decoration: none;
    background: #fff;
    /* border: 1px solid #e6edf8; */
    border-radius: 22px;
    padding: 16px 14px 14px;
    /* box-shadow: 0 14px 28px rgba(16, 24, 40, 0.1), 0 2px 6px rgba(16, 24, 40, 0.06); */
    position: relative;
    overflow: hidden;
    transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}


/* top glow */

.ach-topring {
    position: absolute;
    left: -40px;
    top: -55px;
    width: 160px;
    height: 160px;
    border-radius: 999px;
    /* background: radial-gradient(circle, rgba(37, 99, 235, 0.18), transparent 62%); */
    pointer-events: none;
}

.ach-card:hover {
    transform: translateY(-10px);
    border-color: #dbe7ff;
}

.ach-avatar {
    width: 82px;
    height: 82px;
    border-radius: 999px;
    background: #ffffff;
    border: 3px solid rgba(29, 78, 216, 0.18);
    box-shadow: 0 14px 22px rgba(16, 24, 40, 0.1);
    margin: 0 auto 10px;
    overflow: hidden;
    position: relative;
    transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.ach-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.ach-card:hover .ach-avatar {
    transform: translateY(-4px) scale(1.04);
    border-color: rgba(29, 78, 216, 0.35);
}

.ach-name {
    text-align: center;
    font-weight: 900;
    font-family: "Outfit", sans-serif;
    color: #0b1220;
    font-size: 14px;
    margin-top: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ach-tag {
    text-align: center;
    margin-top: 6px;
    font-size: 12px;
    font-weight: 900;
    color: #1d4ed8;
    /* theme blue */
    letter-spacing: 0.2px;
}


/* dots */

.achDots {
    margin-top: 14px;
    position: relative;
}

.achDots .swiper-pagination-bullet {
    width: 18px;
    height: 3px;
    border-radius: 999px;
    background: #cbd5e1;
    opacity: 1;
    margin: 0 4px !important;
}

.achDots .swiper-pagination-bullet-active {
    background: #1d4ed8;
}


/* responsive */

@media (max-width: 576px) {
    .ach-title {
        font-size: 22px;
    }
    .ach-card {
        width: 175px;
        border-radius: 18px;
    }
    .ach-avatar {
        width: 74px;
        height: 74px;
    }
}


/*========================================== HERO BANNER ===*/

.heroX {
    background: #ffffff;
    position: relative;
    overflow: hidden;
    padding: 55px 0px;
}

.heroX-card {
    /* border: 1px solid #e6edf8; */
    border-radius: 26px;
    padding: 26px 22px;
    /* box-shadow: 0 18px 40px rgba(16, 24, 40, .10), 0 2px 6px rgba(16, 24, 40, .06); */
    position: relative;
    overflow: hidden;
}


/* soft background glow */

.heroX:before {
    content: "";
    position: absolute;
    left: -140px;
    top: -180px;
    width: 420px;
    height: 420px;
    border-radius: 999px;
    background: radial-gradient(circle, rgb(197 215 255 / 14%), transparent 60%);
    pointer-events: none;
}

.heroX:after {
    content: "";
    position: absolute;
    right: -180px;
    bottom: -220px;
    width: 520px;
    height: 520px;
    border-radius: 999px;
    background: radial-gradient(circle, rgba(29, 78, 216, 0.1), transparent 62%);
    pointer-events: none;
}


/* left */

.heroX-pill {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    border-radius: 999px;
    background: rgba(37, 99, 235, 0.08);
    border: 1px solid rgba(37, 99, 235, 0.18);
    color: #1d4ed8;
    font-weight: 800;
    font-size: 12px;
    margin-bottom: 14px;
}

.heroX-pill .dot {
    width: 8px;
    height: 8px;
    border-radius: 99px;
    background: #1d4ed8;
    box-shadow: 0 0 0 4px rgba(29, 78, 216, 0.12);
}

.heroX-title {
    margin: 0;
    color: #0b1220;
    font-weight: 900;
    font-family: "Outfit", sans-serif;
    font-size: 44px;
    line-height: 1.08;
    letter-spacing: -0.4px;
}

.heroX-hi {
    color: #1d4ed8;
}

.heroX-sub {
    margin: 14px 0 0;
    color: #6b7280;
    font-size: 15px;
    line-height: 1.7;
    max-width: 620px;
}

.heroX-actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 18px;
}

.heroX-btn {
    height: 48px;
    padding: 0 18px;
    border-radius: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    font-weight: 900;
    font-family: "Outfit", sans-serif;
    color: #fff;
    border: 1px solid #1d4ed8;
    background: linear-gradient(135deg, #2563eb, #1d4ed8);
    box-shadow: 0 16px 30px rgba(37, 99, 235, 0.18);
    transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.heroX-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 22px 40px rgba(37, 99, 235, 0.24);
    color: #fff;
}

.heroX-btn2 {
    height: 48px;
    padding: 0 18px;
    border-radius: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    font-weight: 900;
    font-family: "Outfit", sans-serif;
    color: #1d4ed8;
    border: 1px solid #dbe7ff;
    background: #ffffff;
    transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.heroX-btn2:hover {
    transform: translateY(-3px);
    box-shadow: 0 18px 32px rgba(16, 24, 40, 0.1);
}

.heroX-meta {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    margin-top: 18px;
}

.heroX-meta .m {
    min-width: 150px;
    background: #ffffff;
    border: 1px solid #eef2fb;
    border-radius: 16px;
    padding: 10px 12px;
    box-shadow: 0 12px 22px rgba(16, 24, 40, 0.06);
}

.heroX-meta b {
    display: block;
    color: #0b1220;
    font-weight: 900;
    font-family: "Outfit", sans-serif;
    font-size: 16px;
}

.heroX-meta span {
    color: #6b7280;
    font-size: 12px;
    font-weight: 700;
}


/* right */

.heroX-right {
    position: relative;
    display: grid;
    place-items: center;
    min-height: 260px;
}

.heroX-blob {
    position: absolute;
    width: 320px;
    height: 320px;
    border-radius: 60% 40% 55% 45% / 45% 55% 45% 55%;
    background: radial-gradient( circle at 30% 30%, rgba(37, 99, 235, 0.25), rgba(29, 78, 216, 0.06));
    filter: blur(0.2px);
    z-index: 0;
}

.heroX-img {
    width: 100%;
    max-width: 480px;
    border-radius: 22px;
    border: 1px solid #eef2fb;
    box-shadow: 0 20px 44px rgba(16, 24, 40, 0.14);
    position: relative;
    z-index: 1;
    object-fit: cover;
    aspect-ratio: 16 / 10;
}

.heroX-float {
    position: absolute;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    background: rgba(255, 255, 255, 0.92);
    border: 1px solid #e6edf8;
    border-radius: 14px;
    box-shadow: 0 18px 32px rgba(16, 24, 40, 0.14);
    font-size: 12px;
    font-weight: 900;
    color: #0b1220;
    backdrop-filter: blur(10px);
}

.heroX-float svg {
    width: 16px;
    height: 16px;
    color: #1d4ed8;
}

.f1 {
    left: 10px;
    bottom: 18px;
}

.f2 {
    right: 12px;
    top: 16px;
}


/* bottom strip */

.heroX-strip {
    height: 8px;
    background: linear-gradient(90deg, #1d4ed8, #2563eb, #1d4ed8);
    margin-top: 16px;
}


/* responsive */

@media (max-width: 992px) {
    .heroX-title {
        font-size: 34px;
    }
    .heroX-right {
        min-height: 220px;
    }
    .heroX-img {
        max-width: 560px;
    }
}

@media (max-width: 576px) {
    .heroX-card {
        border-radius: 20px;
        padding: 18px 14px;
    }
    .heroX-title {
        font-size: 26px;
    }
    .heroX-meta .m {
        min-width: 140px;
    }
    .heroX-float {
        display: none;
    }
}


/*================================= PLATINUM PACKAGE ====-->
/* full strip */

.platStrip {
    padding: 40px 0;
    color: #fff;
    background: linear-gradient(90deg, #1d4ed8, #2563eb, #1d4ed8);
    position: relative;
    overflow: hidden;
}


/* left art */

.platArt {
    position: relative;
    min-height: 220px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1;
}

.platBrand {
    position: absolute;
    left: 18px;
    bottom: 18px;
    display: flex;
    align-items: center;
    gap: 10px;
    color: #fff;
    font-weight: 900;
    font-family: "Outfit", sans-serif;
    text-transform: lowercase;
}

.platLogo {
    width: 36px;
    height: 36px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    background: rgba(255, 255, 255, 0.18);
    border: 1px solid rgba(255, 255, 255, 0.22);
    font-size: 16px;
}

.platName {
    opacity: 0.95;
    letter-spacing: 0.2px;
}


/* confetti */

.confetti {
    position: absolute;
    width: 10px;
    height: 10px;
    background: rgba(255, 255, 255, 0.35);
    border-radius: 3px;
    animation: confFloat 3.4s ease-in-out infinite;
    opacity: 0.85;
}

.c1 {
    left: 12%;
    top: 22%;
    transform: rotate(12deg);
}

.c2 {
    left: 22%;
    top: 12%;
    width: 14px;
    height: 6px;
}

.c3 {
    left: 35%;
    top: 26%;
    width: 7px;
    height: 14px;
}

.c4 {
    left: 60%;
    top: 18%;
    width: 12px;
    height: 12px;
}

.c5 {
    left: 72%;
    top: 34%;
    width: 16px;
    height: 6px;
}

.c6 {
    left: 48%;
    top: 10%;
    width: 8px;
    height: 8px;
}

@keyframes confFloat {
    0%,
    100% {
        transform: translateY(0) rotate(12deg);
    }
    50% {
        transform: translateY(-10px) rotate(18deg);
    }
}


/* right content */

.platTitle {
    margin: 0;
    font-weight: 900;
    font-family: "Outfit", sans-serif;
    font-size: 38px;
    line-height: 1.1;
    position: relative;
    z-index: 1;
}

.platList {
    list-style: none;
    padding: 0;
    margin: 10px 0 0;
    display: grid;
    gap: 10px;
    position: relative;
    z-index: 1;
}

.platList li {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    font-size: 14px;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.92);
    line-height: 1.55;
}

.platList svg {
    width: 18px;
    height: 18px;
    margin-top: 3px;
    color: #ffffff;
    flex: 0 0 auto;
    opacity: 0.95;
}

.platBtn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 48px;
    padding: 0 22px;
    border-radius: 999px;
    background: #ffffff;
    color: #1d4ed8;
    font-weight: 900;
    font-family: "Outfit", sans-serif;
    text-decoration: none;
    margin-top: 18px;
    box-shadow: 0 18px 34px rgba(0, 0, 0, 0.22);
    transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    z-index: 1;
}

.platBtn:hover {
    transform: translateY(-3px);
    box-shadow: 0 26px 44px rgba(0, 0, 0, 0.26);
}


/* responsive */

@media (max-width: 992px) {
    .platTitle {
        font-size: 30px;
    }
    .platArt {
        min-height: 200px;
    }
    .platCard {
        width: 300px;
    }
}

@media (max-width: 576px) {
    .platStrip {
        padding: 28px 0;
    }
    .platTitle {
        font-size: 24px;
    }
    .platList li {
        font-size: 14px;
    }
    .platArt {
        min-height: 190px;
    }
    .platCard {
        width: 280px;
        height: 190px;
    }
    .platIcon {
        width: 78px;
        height: 78px;
    }
}


/*================================== WHY US ======*/

.whySec {
    background: #f9f9fa;
}

.whyTitle {
    font-family: "Outfit", sans-serif;
    font-weight: 900;
    font-size: 30px;
    color: #0b1220;
    letter-spacing: -0.4px;
}

.whyTitle span {
    color: #1d4ed8;
}

.whySub {
    max-width: 780px;
    margin: auto;
    color: #6b7280;
    font-size: 15px;
    line-height: 1.7;
}

.whyCard {
    height: 100%;
    background: linear-gradient(180deg, #ffffff, #fbfcff);
    border: 1px solid #e6edf8;
    border-radius: 24px;
    padding: 26px 20px 22px;
    text-align: center;
    box-shadow: 0 14px 30px rgba(16, 24, 40, 0.1), 0 2px 6px rgba(16, 24, 40, 0.06);
    position: relative;
    overflow: hidden;
    transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}


/* top glow */

.whyCard:before {
    content: "";
    position: absolute;
    left: -60px;
    top: -80px;
    width: 220px;
    height: 220px;
    border-radius: 999px;
    background: radial-gradient(circle, rgba(37, 99, 235, 0.16), transparent 60%);
    pointer-events: none;
}

.whyCard:hover {
    transform: translateY(-10px);
    box-shadow: 0 24px 48px rgba(16, 24, 40, 0.14);
    border-color: #dbe7ff;
}

.whyIcon {
    width: 112px;
    height: 112px;
    margin: 0 auto 16px;
    border-radius: 999px;
    background: #ffffff;
    border: 1px solid #eef2fb;
    display: grid;
    place-items: center;
    box-shadow: 0 16px 28px rgba(16, 24, 40, 0.08);
    position: relative;
    transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}


/* ring */

.whyIcon:after {
    content: "";
    position: absolute;
    inset: -10px;
    border-radius: 999px;
    border: 2px solid rgba(29, 78, 216, 0.18);
    opacity: 0.9;
}

.whyIcon svg {
    width: 44px;
    height: 44px;
    color: #1d4ed8;
    transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.whyCard:hover .whyIcon {
    transform: translateY(-6px) scale(1.03);
    box-shadow: 0 22px 36px rgba(16, 24, 40, 0.12);
}

.whyCard:hover .whyIcon svg {
    transform: scale(1.08);
}

.whyH {
    font-family: "Outfit", sans-serif;
    font-weight: 900;
    font-size: 18px;
    color: #0b1220;
    line-height: 1.25;
    margin: 0 0 10px;
}

.whyP {
    margin: 0;
    color: #6b7280;
    font-size: 13.5px;
    line-height: 1.7;
}

@media (max-width: 992px) {
    .whyTitle {
        font-size: 34px;
    }
}

@media (max-width: 576px) {
    .whyTitle {
        font-size: 26px;
    }
    .whyIcon {
        width: 100px;
        height: 100px;
    }
    .whyIcon svg {
        width: 40px;
        height: 40px;
    }
}


/*============================== FOOTER==*/

.dft {
    background: linear-gradient(180deg, #070b18, #050816 65%, #040613);
    color: #cbd5e1;
    position: relative;
    overflow: hidden;
}


/* blue glow blobs (theme) */

.dft:before {
    content: "";
    position: absolute;
    left: -220px;
    top: -260px;
    width: 620px;
    height: 620px;
    border-radius: 999px;
    /* background: radial-gradient(circle, rgba(37, 99, 235, .22), transparent 60%); */
    pointer-events: none;
    filter: blur(2px);
}

.dft:after {
    content: "";
    position: absolute;
    right: -240px;
    bottom: -280px;
    width: 680px;
    height: 680px;
    border-radius: 999px;
    /* background: radial-gradient(circle, rgba(29, 78, 216, .18), transparent 62%); */
    pointer-events: none;
    filter: blur(2px);
}


/* brand */

.dft-brand {
    position: relative;
    z-index: 1;
}

.dft-logo {
    width: 46px;
    height: 46px;
    border-radius: 16px;
    display: grid;
    place-items: center;
    background: rgba(37, 99, 235, 0.16);
    border: 1px solid rgba(37, 99, 235, 0.35);
    color: #fff;
    font-weight: 900;
    font-family: "Outfit", sans-serif;
    letter-spacing: 0.3px;
}

.dft-name {
    color: #ffffff;
    font-weight: 900;
    font-family: "Outfit", sans-serif;
    font-size: 18px;
    line-height: 1.1;
}

.dft-tag {
    font-size: 12px;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.7);
}

.dft-about {
    margin: 0;
    font-size: 14px;
    line-height: 1.75;
    color: rgba(255, 255, 255, 0.72);
    max-width: 520px;
    position: relative;
    z-index: 1;
}


/* headings */

.dft-h {
    margin: 0 0 12px;
    color: #ffffff;
    font-weight: 900;
    font-family: "Outfit", sans-serif;
    letter-spacing: 0.2px;
    position: relative;
    z-index: 1;
}

.dft-h:after {
    content: "";
    display: block;
    width: 44px;
    height: 3px;
    border-radius: 999px;
    background: linear-gradient(90deg, #2563eb, #1d4ed8);
    margin-top: 10px;
}


/* links */

.dft-links {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: 10px;
    position: relative;
    z-index: 1;
}

.dft-links a {
    text-decoration: none;
    color: rgba(255, 255, 255, 0.72);
    font-size: 13px;
    transition: all 0.25s ease;
}

.dft-links a:hover {
    color: #ffffff;
    transform: translateX(2px);
}


/* social */


/* SOCIAL ICONS */

.dft-social {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 14px;
    position: relative;
    z-index: 1;
}

.dft-soc {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    text-decoration: none;
    /* background: rgba(255, 255, 255, .06);
    border: 1px solid rgba(255, 255, 255, .10);
    box-shadow: 0 16px 26px rgba(0, 0, 0, .25); */
    background-color: #fff;
    transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.dft-soc svg {
    width: 18px;
    height: 18px;
}


/* BRAND COLORS */

.dft-soc--facebook svg {
    color: #1877f2;
}

.dft-soc--instagram svg {
    color: #e4405f;
}

.dft-soc--whatsapp svg {
    color: #25d366;
}

.dft-soc:hover {
    transform: translateY(-6px);
    /* background: rgba(37, 99, 235, .18);
    border-color: rgba(37, 99, 235, .30); */
}


/* store */

.dft-store {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 16px;
    position: relative;
    z-index: 1;
}

.dft-storeBtn {
    min-width: 170px;
    padding: 10px 12px;
    border-radius: 16px;
    text-decoration: none;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: 0 18px 30px rgba(0, 0, 0, 0.28);
    transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    flex-direction: column;
    gap: 2px;
    color: #fff;
}

.dft-storeBtn:hover {
    transform: translateY(-4px);
    background: rgba(37, 99, 235, 0.16);
    border-color: rgba(37, 99, 235, 0.28);
}

.dft-storeBtn .sm {
    font-size: 10px;
    letter-spacing: 0.12em;
    opacity: 0.85;
    font-weight: 800;
}

.dft-storeBtn .lg {
    font-size: 14px;
    font-weight: 900;
    font-family: "Outfit", sans-serif;
}


/* contact */

.dft-contact {
    display: grid;
    gap: 12px;
    position: relative;
    z-index: 1;
}

.dft-citem {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    /* padding: 12px 12px; */
    border-radius: 18px;
    /* background: rgba(255, 255, 255, .04);
    border: 1px solid rgba(255, 255, 255, .10); */
    /* box-shadow: 0 18px 30px rgba(0, 0, 0, .25); */
    transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}


/* 
.dft-citem:hover {
    transform: translateY(-6px);
    background: rgba(37, 99, 235, .12);
    border-color: rgba(37, 99, 235, .22);
} */

.dft-cicon {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background-color: #fff;
    flex: 0 0 auto;
}

.dft-cicon svg {
    width: 18px;
    height: 18px;
    color: #225ae3;
}

.dft-ct {
    color: #ffffff;
    font-weight: 900;
    font-family: "Outfit", sans-serif;
    margin-bottom: 2px;
}

.dft-cd {
    color: rgba(255, 255, 255, 0.7);
    font-size: 13px;
    line-height: 1.55;
}

.dft-cl {
    color: #bfdbfe;
    font-weight: 900;
    text-decoration: none;
}

.dft-cl:hover {
    text-decoration: underline;
    color: #ffffff;
}

.dft-cn {
    color: rgba(255, 255, 255, 0.6);
    font-size: 12px;
    margin-top: 2px;
    font-weight: 700;
}


/* bottom bar */

.dft-bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(0, 0, 0, 0.18);
    padding: 14px 0;
    position: relative;
    z-index: 1;
    backdrop-filter: blur(10px);
}

.dft-brow {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
    color: rgba(255, 255, 255, 0.75);
    font-weight: 600;
    font-size: 13px;
}

.dft-br {
    color: rgba(255, 255, 255, 0.65);
}

.dft-heart {
    color: #ef4444;
}


/* back to top */

.dft-top {
    position: fixed;
    right: 18px;
    bottom: 150px;
    width: 45px;
    height: 45px;
    border-radius: 999px;
    border: 0;
    background: linear-gradient(135deg, #2563eb, #1d4ed8);
    box-shadow: 0 22px 40px rgba(29, 78, 216, 0.28);
    color: #fff;
    display: grid;
    place-items: center;
    z-index: 999;
    transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.dft-top svg {
    width: 20px;
    height: 20px;
    color: #fff;
}

.dft-top:hover {
    transform: translateY(-6px);
    box-shadow: 0 30px 52px rgba(29, 78, 216, 0.35);
}

@media (max-width: 576px) {
    .dft-brow {
        font-size: 12px;
    }
    .dft-storeBtn {
        min-width: 160px;
    }
}


/* ===== WhatsApp Floating Button ===== */

.act-btn {
    position: fixed;
    bottom: 90px;
    right: 15px;
    width: 54px;
    height: 54px;
    z-index: 999;
    /* Glow shadow */
    border-radius: 50%;
    box-shadow: 0 0 0 rgba(37, 211, 102, 0.6);
    animation: whatsappPulse 2s infinite, floatUpDown 2.5s ease-in-out infinite;
}


/* Image */

.act-btn img {
    width: 100%;
    border-radius: 50%;
}


/* ===== Pulse Animation ===== */

@keyframes whatsappPulse {
    0% {
        box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.6);
    }
    70% {
        box-shadow: 0 0 0 15px rgba(37, 211, 102, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(37, 211, 102, 0);
    }
}


/* ===== Floating Animation ===== */


/* 
@keyframes floatUpDown {
    0% {
        transform: translateY(0);
    }
    100% {
        transform: translateY(-8px);
    }
} */


/* ===== Hover Effect ===== */

.act-btn:hover {
    transform: scale(1.1);
    transition: 0.3s ease;
}


/*============================================== Breadcrumb --*/

.ec-breadcrumb-wrap {
    background: #001c5b;
    padding: 12px 0;
}

.ec-breadcrumb {
    list-style: none;
    display: flex;
    align-items: center;
    margin: 0;
    padding: 0;
    font-family: "Poppins", sans-serif;
    font-size: 14px;
    font-weight: 500;
}

.ec-breadcrumb li {
    color: #fff;
    font-size: 13px;
}

.ec-breadcrumb li a {
    text-decoration: none;
    color: #fff;
    transition: 0.3s;
    font-weight: 600;
}

.ec-breadcrumb li a:hover {
    color: #1d4ed8;
}

.ec-breadcrumb li::after {
    margin: 0 12px;
    color: #b2b7c7;
    font-size: 13px;
}

.ec-breadcrumb li:last-child::after {
    display: none;
}

.ec-breadcrumb li.active {
    color: #225ce5;
    font-weight: 600;
}


/* =====================================Bottom Fixed Offer Bar   =====-*/

.exam-offer-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background: linear-gradient(90deg, #e11d1d, #ff6a00);
    color: white;
    padding: 12px 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    z-index: 9999;
    font-family: "Poppins", sans-serif;
}

.exam-offer-text {
    font-size: 16px;
    font-weight: 600;
}

.exam-offer-sub {
    font-size: 13px;
    opacity: 0.9;
}

.exam-offer-btn {
    background: white;
    color: #2563eb;
    border: none;
    padding: 8px 18px;
    border-radius: 6px;
    font-weight: 600;
    text-decoration: none;
    transition: 0.3s;
    font-size: 14px;
}

.exam-offer-btn:hover {
    background: #f1f1f1;
}


/*======================================================= TEST SERIES PAGE===*/

.why-test-series {
    padding: 60px 0;
    font-family: "Poppins", sans-serif;
    background: #f7f9fc;
}

.why-title {
    font-size: 32px;
    font-weight: 700;
    margin-bottom: 40px;
}

.why-card {
    background: white;
    border-radius: 14px;
    padding: 35px 25px;
    text-align: center;
    transition: 0.35s;
    height: 100%;
    border: 1px solid #eef1f6;
}

.why-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 10px 35px rgba(0, 0, 0, 0.08);
}

.why-icon {
    width: 85px;
    height: 85px;
    margin: auto;
    margin-bottom: 18px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 36px;
}

.icon-1 {
    background: rgb(255, 242, 235);
}

.icon-2 {
    background: rgba(115, 0, 255, 0.1);
}

.icon-3 {
    background: rgba(221, 249, 251, 0.54);
}

.why-card h4 {
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 12px;
}

.why-card p {
    font-size: 14px;
    color: #6b7280;
    line-height: 1.7;
}

.why-card-one {
    border-top: 5px solid rgb(255 192 158);
}

.why-card-two {
    border-top: 5px solid rgb(177 113 255);
}

.why-card-three {
    border-top: 5px solid rgb(0 215 231 / 54%);
}

.ts-hero-wrap {
    padding: 0px 0;
    font-family: "Poppins", sans-serif;
}

.ts-hero-title {
    font-size: 40px;
    font-weight: 700;
    line-height: 1.3;
    margin-bottom: 18px;
}

.ts-hero-desc {
    font-size: 18px;
    color: #6b7280;
    max-width: 520px;
    margin-bottom: 35px;
}

.ts-hero-info {
    margin-bottom: 15px;
    font-size: 14px;
    font-weight: 600;
}

.ts-search-box {
    position: relative;
    max-width: 520px;
}

.ts-search-box input {
    width: 100%;
    height: 55px;
    border-radius: 10px;
    border: 1px solid #e6e8ef;
    padding: 0 60px 0 20px;
    font-size: 15px;
    outline: none;
}

.ts-search-btn {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    height: 42px;
    width: 42px;
    border: none;
    border-radius: 8px;
    background: #eef1f6;
    cursor: pointer;
}

.ts-hero-image {
    text-align: right;
}

.ts-hero-image img {
    max-width: 100%;
}

@media (max-width: 992px) {
    .ts-hero-wrap {
        padding: 60px 0;
    }
    .ts-hero-title {
        font-size: 30px;
    }
    .ts-hero-image {
        text-align: center;
        margin-top: 40px;
    }
}

.ps-sec {
    padding: 70px 0;
    background: #eaf2ff;
    font-family: "Poppins", sans-serif;
}

.ps-title {
    font-size: 30px;
    font-weight: 700;
    margin-bottom: 40px;
}

.ps-card {
    background: white;
    border-radius: 14px;
    padding: 22px;
    border: 1px solid #eef1f6;
    transition: 0.35s;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.ps-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.08);
}

.ps-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
}

.ps-logo {
    width: 48px;
    height: 48px;
    border-radius: 50%;
}

.ps-users {
    font-size: 11px;
    background: #f1f4ff;
    padding: 6px 10px;
    border-radius: 20px;
    color: #4f46e5;
    font-weight: 600;
}

.ps-heading {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 10px;
    line-height: 1.4;
}

.ps-tests {
    font-size: 14px;
    margin-bottom: 10px;
}

.ps-free {
    color: #16a34a;
    font-weight: 600;
}

.ps-lang {
    font-size: 13px;
    color: #4b5563;
    margin-bottom: 12px;
}

.ps-features {
    font-size: 13px;
    padding-left: 18px;
    margin-bottom: 18px;
}

.ps-features li {
    margin-bottom: 6px;
}

.ps-btn {
    margin-top: auto;
    background: linear-gradient(135deg, #2563eb, #1d4ed8);
    border-color: #1d4ed8;
    box-shadow: 0 14px 34px rgba(29, 78, 216, 0.22);
    color: white;
    border: none;
    border-radius: 15px;
    padding: 12px;
    font-weight: 600;
    text-align: center;
    text-decoration: none;
    display: block;
    transition: 0.3s;
    font-size: 13px;
}

.ps-btn:hover {
    background: linear-gradient(135deg, #2563eb, #1d4ed8);
    border-color: #1d4ed8;
    box-shadow: 0 14px 34px rgba(29, 78, 216, 0.22);
}

.ps-btn i {
    width: 14px;
    height: 14px;
    margin-left: 6px;
    vertical-align: middle;
}

.cat-sec {
    padding: 70px 0;
    background: #f7f9fc;
    font-family: Poppins, sans-serif;
}

.cat-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 35px;
}

.cat-title {
    font-size: 30px;
    font-weight: 700;
}

.cat-search {
    position: relative;
    width: 320px;
}

.cat-search input {
    width: 100%;
    height: 46px;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding-left: 40px;
}

.cat-search i {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    width: 18px;
}

.cat-box {
    background: white;
    border-radius: 14px;
    padding: 20px;
    border: 1px solid #eef1f6;
}

.cat-sidebar {
    background: white;
    border-radius: 14px;
    padding: 12px;
    height: 520px;
    overflow-y: auto;
    border: 1px solid #eef1f6;
}

.cat-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    border-radius: 10px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 500;
    color: #374151;
    margin-bottom: 6px;
    transition: 0.3s;
    position: relative;
    font-weight: 600;
}

.cat-item i {
    width: 18px;
    height: 18px;
    color: #6b7280;
}

.cat-item:hover {
    background: #f3f6ff;
    transform: translateX(4px);
}

.cat-item.active {
    background: linear-gradient(90deg, #eef2ff, #e0e7ff);
    color: #4f46e5;
    font-weight: 600;
}

.cat-item.active i {
    color: #4f46e5;
}

.cat-item.active::before {
    content: "";
    position: absolute;
    left: -12px;
    top: 0;
    height: 100%;
    width: 4px;
    background: #4f46e5;
    border-radius: 4px;
}

.cat-item.active {
    background: #eef2ff;
    font-weight: 600;
    color: #4f46e5;
}

.cat-grid {
    /* padding-left: 25px; */
}

.cat-card {
    background: white;
    border-radius: 12px;
    padding: 20px;
    border: 1px solid #eef1f6;
    transition: 0.3s;
    height: 100%;
}

.cat-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.08);
}

.cat-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.cat-logo {
    width: 42px;
    height: 42px;
    border-radius: 50%;
}

.cat-users {
    background: #f1f5ff;
    padding: 5px 10px;
    border-radius: 20px;
    font-size: 12px;
    color: #4f46e5;
    display: flex;
    align-items: center;
    gap: 4px;
}

.cat-title2 {
    font-size: 17px;
    font-weight: 600;
    margin-bottom: 8px;
}

.cat-tests {
    font-size: 14px;
    margin-bottom: 10px;
}

.cat-free {
    color: #16a34a;
}

.cat-btn {
    display: block;
    background: #22b8cf;
    color: white;
    text-align: center;
    padding: 10px;
    border-radius: 8px;
    margin-top: 10px;
    text-decoration: none;
}

.cat-btn:hover {
    background: #0ea5b7;
}

.wy-sec {
    padding: 80px 0;
    font-family: "Poppins", sans-serif;
}

.wy-left {
    max-width: 420px;
}

.wy-logo {
    width: 48px;
    height: 48px;
    border-radius: 10px;
    background: white;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
    margin-bottom: 20px;
}

.wy-title {
    font-size: 34px;
    font-weight: 700;
    margin-bottom: 15px;
}

.wy-desc {
    color: #6b7280;
    font-size: 15px;
    line-height: 1.7;
    margin-bottom: 25px;
}

.wy-btn {
    background: #22c55e;
    color: white;
    border: none;
    padding: 12px 22px;
    border-radius: 8px;
    font-weight: 600;
    text-decoration: none;
    display: inline-block;
}

.wy-btn:hover {
    background: #16a34a;
    color: white;
}


/* right cards */

.wy-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 22px;
}

.wy-card {
    border-radius: 16px;
    padding: 26px;
    min-height: 190px;
    position: relative;
    transition: 0.3s;
}

.wy-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.08);
}

.wy-icon {
    width: 54px;
    height: 54px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    margin-bottom: 18px;
}

.wy-card h4 {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 8px;
}

.wy-card p {
    font-size: 14px;
    color: #6b7280;
    line-height: 1.6;
}


/* colors */

.wy-green {
    background: #e7f5ee;
}

.wy-green .wy-icon {
    background: #22c55e;
}

.wy-pink {
    background: #fbe7ec;
}

.wy-pink .wy-icon {
    background: #f43f5e;
}

.wy-yellow {
    background: #f8f1da;
}

.wy-yellow .wy-icon {
    background: #facc15;
    color: #111;
}

.wy-purple {
    background: #ebe7fb;
}

.wy-purple .wy-icon {
    background: #8b5cf6;
}

@media (max-width: 991px) {
    .wy-grid {
        grid-template-columns: 1fr;
        margin-top: 30px;
    }
}

.tbpass-sec {
    padding: 50px 0;
    font-family: Poppins, sans-serif;
}

.tbpass-img img {
    width: 100%;
    max-width: 420px;
    border-radius: 25px;
    animation: floatUpDown 3s ease-in-out infinite;
}

@keyframes floatUpDown {
    0% {
        transform: translateY(0px);
    }
    50% {
        transform: translateY(-15px);
    }
    100% {
        transform: translateY(0px);
    }
}

.tbpass-title {
    font-size: 26px;
    font-weight: 600;
    margin-bottom: 10px;
}

.tbpass-logo {
    font-size: 36px;
    font-weight: 700;
    margin: 10px 0;
}

.tbpass-desc {
    color: #6b7280;
    margin-bottom: 25px;
    line-height: 1.7;
}

.tbpass-features {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-bottom: 25px;
}

.tbpass-item {
    display: flex;
    align-items: center;
    gap: 12px;
    font-weight: 600;
    font-size: 13px;
}

.tbpass-icon {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.tbpass-icon i {
    width: 20px;
    height: 20px;
}

.icon1 {
    background: #ff9f13;
}

.icon2 {
    background: #8e7eff;
}

.icon3 {
    background: #ff8a3d;
}

.icon4 {
    background: #00e277;
}

.tbpass-btn {
    background: linear-gradient(135deg, #2563eb, #1d4ed8);
    color: white;
    border: none;
    padding: 12px 22px;
    border-radius: 8px;
    font-weight: 600;
    text-decoration: none;
    display: inline-block;
    font-size: 13px;
}

.tbpass-btn:hover {
    background: linear-gradient(135deg, #2563eb, #1d4ed8);
}

@media (max-width: 992px) {
    .tbpass-img {
        text-align: center;
        margin-bottom: 40px;
    }
    .tbpass-features {
        grid-template-columns: 1fr;
    }
}


/*========================================= ViewTest Serires ==*/

.tshead-sec {
    padding: 50px 0;
    background: #f6f7fb;
    font-family: Poppins, sans-serif;
}

.tshead-breadcrumb {
    font-size: 14px;
    color: #6b7280;
    margin-bottom: 15px;
}

.tshead-titlebox {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 10px;
}

.tshead-logo {
    width: 40px;
    height: 40px;
    border-radius: 50%;
}

.tshead-title {
    font-size: 32px;
    font-weight: 700;
    line-height: 1.3;
}

.tshead-updated {
    font-size: 14px;
    color: #6b7280;
    margin: 10px 0 18px 0;
    display: flex;
    align-items: center;
    gap: 6px;
}

.tshead-stats {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 18px;
    font-size: 15px;
    margin-bottom: 18px;
}

.tshead-badge {
    background: #22c55e;
    color: white;
    padding: 5px 12px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 600;
}

.tshead-divider {
    height: 1px;
    background: #e5e7eb;
    margin: 20px 0;
}

.tshead-features {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    font-size: 13px;
    color: #374151;
    margin-bottom: 25px;
    padding: 0px;
    font-weight: 600;
}

.tshead-features li {
    list-style: disc;
    margin-left: 18px;
}

.tshead-btn {
    background: #22c55e;
    color: white;
    border: none;
    padding: 14px 28px;
    border-radius: 8px;
    font-weight: 600;
    text-decoration: none;
    display: inline-block;
}

.tshead-btn:hover {
    background: #16a34a;
    color: white;
}

@media (max-width: 768px) {
    .tshead-title {
        font-size: 24px;
    }
    .tshead-features {
        grid-template-columns: 1fr;
    }
}


/*===================================================== Mobile Menu ==*/

.mobile-bottom-menu {
    position: fixed;
    bottom: 0px;
    left: 0px;
    right: 0px;
    width: auto;
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(10px);
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
    padding: 13px 5px;
    display: flex;
    justify-content: space-around;
    align-items: center;
    z-index: 9999;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}


/* Active item glow */

.mb-item.active {
    color: #2563eb;
}

.mb-item.active i {
    transform: scale(1.1);
}

.mb-item {
    flex: 1;
    text-align: center;
    text-decoration: none;
    color: #777;
    font-size: 11px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    transition: 0.3s ease;
    position: relative;
}


/* Icons */

.mb-item i {
    width: 22px;
    height: 22px;
}


/* Active Item */

.mb-item.active {
    color: #2563eb;
    font-weight: 600;
}


/* Active highlight */

.mb-item.active::before {
    content: "";
    position: absolute;
    top: -8px;
    width: 30px;
    height: 4px;
    background: #2563eb;
    border-radius: 10px;
}


/* Hover Effect */

.mb-item:hover {
    color: #2563eb;
    transform: translateY(-2px);
}

@media (max-width: 768px) {
    body {
        padding-bottom: 60px;
    }
    .act-btn {
        bottom: 75px;
    }
    .dft-top {
        bottom: 150px;
    }
}

@media (max-width: 768px) {
    .mobile-bottom-menu {
        position: fixed;
        /* bottom: 10px;
        left: 10px; */
        /* right: 10px; */
        background: rgba(255, 255, 255, 0.9);
        backdrop-filter: blur(10px);
        /* border-radius: 20px; */
        padding: 16px 5px;
        display: flex;
        gap: 5px;
        overflow-x: auto;
        /* 🔥 scroll enable */
        scrollbar-width: none;
    }
    .mobile-bottom-menu::-webkit-scrollbar {
        display: none;
    }
    .mb-item {
        min-width: 70px;
        /* scroll ke liye */
        text-align: center;
        font-size: 10px;
        color: #393939;
        font-weight: 600;
        flex-direction: column;
        align-items: center;
        gap: 3px;
        text-decoration: none;
        transition: 0.3s;
    }
    .mb-item i {
        width: 20px;
        height: 20px;
    }
    .mb-item.active {
        color: #2563eb;
        font-weight: 600;
    }
    .mb-item:hover {
        color: #2563eb;
    }
}


/*================================================= Track Per ===*/


/*-----------------------------------*/


/*
.tp2-sec {
    padding: 60px 0;
    background: #f4f7fe;
    font-family: Poppins, sans-serif;
}

.tp2-title {
    font-size: 30px;
    font-weight: 700;
    margin-bottom: 30px;
}

.tp2-card {
    background: white;
    border-radius: 16px;
    padding: 22px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
    margin-bottom: 20px;
}

.tp2-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
}

.tp2-sub {
    font-weight: 600;
}




.tp2-grid {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 20px;
}

.tp2-grid2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}




.tp2-stats {
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
}

.tp2-box {
    background: #eef2ff;
    padding: 14px 18px;
    border-radius: 12px;
    text-align: center;
}

.tp2-box strong {
    display: block;
    font-size: 20px;
}

*/


/* ── SECTION ── */

.tp2-sec {
    padding: 64px 0 80px;
    background: #f0f4ff;
    font-family: 'DM Sans', sans-serif;
}


/* ── HEADING ── */

.tp2-title {
    font-family: 'Outfit', sans-serif;
    font-size: 32px;
    font-weight: 800;
    color: #0a0f2c;
    margin-bottom: 6px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.tp2-title .accent-bar {
    width: 5px;
    height: 32px;
    border-radius: 3px;
    background: linear-gradient(180deg, #4338ca, #06b6d4);
    display: inline-block;
}

.tp2-subtitle {
    color: #6b7280;
    font-size: 14px;
    margin-bottom: 32px;
    margin-left: 15px;
}


/* ── CARD ── */

.tp2-card {
    background: #ffffff;
    border-radius: 20px;
    padding: 24px;
    border: 1.5px solid #e8edf8;
    box-shadow: 0 4px 24px rgba(10, 15, 44, 0.06);
    height: 100%;
    transition: box-shadow .3s;
}

.tp2-card:hover {
    box-shadow: 0 12px 40px rgba(67, 56, 202, 0.12);
}


/* ── CARD HEADER ── */

.tp2-card-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 18px;
}

.tp2-card-title {
    font-family: 'Outfit', sans-serif;
    font-size: 15px;
    font-weight: 700;
    color: #0a0f2c;
    display: flex;
    align-items: center;
    gap: 8px;
}

.tp2-card-title .dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #4338ca;
}


/* ── SELECT ── */

.tp2-select {
    appearance: none;
    background: #f0f4ff;
    border: 1.5px solid #dde3f5;
    border-radius: 8px;
    padding: 6px 28px 6px 12px;
    font-size: 12px;
    font-weight: 600;
    color: #4338ca;
    font-family: 'DM Sans', sans-serif;
    cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%234338ca' stroke-width='2.5'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 8px center;
    outline: none;
}


/* chart legend badge */

.chart-legend {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: #6b7280;
    font-weight: 500;
}

.chart-legend .swatch {
    width: 10px;
    height: 10px;
    border-radius: 3px;
}


/* ── STAT CARDS ── */

.stat-card {
    border-radius: 16px;
    padding: 20px 18px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    position: relative;
    overflow: hidden;
    transition: transform .25s;
    cursor: default;
}

.stat-card:hover {
    transform: translateY(-4px);
}

.stat-card::after {
    content: "";
    position: absolute;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.12);
    bottom: -20px;
    right: -20px;
}

.stat-card .stat-icon {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.22);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
}

.stat-card strong {
    font-family: 'Outfit', sans-serif;
    font-size: 28px;
    font-weight: 800;
    color: white;
    line-height: 1;
}

.stat-card span {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.82);
    font-weight: 500;
}

.stat1 {
    background: linear-gradient(135deg, #4338ca 0%, #6366f1 100%);
}

.stat2 {
    background: linear-gradient(135deg, #059669 0%, #10b981 100%);
}

.stat3 {
    background: linear-gradient(135deg, #d97706 0%, #f59e0b 100%);
}

.stat4 {
    background: linear-gradient(135deg, #db2777 0%, #f472b6 100%);
}


/* ── DONUT LEGEND ── */

.donut-legend {
    display: flex;
    flex-direction: column;
    gap: 10px;
    justify-content: center;
}

.donut-legend-item {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    color: #374151;
    font-weight: 500;
}

.donut-legend-item .bar {
    flex: 1;
    height: 6px;
    border-radius: 3px;
    background: #e8edf8;
    position: relative;
    overflow: hidden;
}

.donut-legend-item .bar-fill {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    border-radius: 3px;
    transition: width 1s ease;
}

.donut-legend-item .pct {
    font-family: 'Outfit', sans-serif;
    font-size: 13px;
    font-weight: 700;
    color: #0a0f2c;
    min-width: 36px;
    text-align: right;
}

.legend-dot {
    width: 10px;
    height: 10px;
    border-radius: 3px;
    flex-shrink: 0;
}

canvas {
    width: 100% !important;
    height: 220px !important;
}

@media(max-width:992px) {
    .tp2-grid {
        grid-template-columns: 1fr;
    }
    .tp2-grid2 {
        grid-template-columns: 1fr;
    }
}

#donutChart {
    height: 260px !important;
}

.tp2-card canvas {
    height: 260px !important;
}


/*======================================================== E-Books page */

 :root {
    --navy: #0a0f2c;
    --navy-2: #111936;
    --indigo: #4338ca;
    --indigo-light: #6366f1;
    --green: #10b981;
    --green-light: #34d399;
    --amber: #f59e0b;
    --rose: #f43f5e;
    --cyan: #06b6d4;
    --surface: #ffffff;
    --surface-2: #f8faff;
    --border: #e8eaf6;
    --text-1: #0a0f2c;
    --text-2: #4b5563;
    --text-3: #9ca3af;
    --radius: 16px;
    --radius-sm: 10px;
    --shadow-card: 0 4px 24px rgba(10, 15, 44, 0.08);
    --shadow-hover: 0 16px 48px rgba(67, 56, 202, 0.16);
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: 'DM Sans', sans-serif;
    background: var(--surface-2);
    color: var(--text-1);
}


/* ─── HERO BANNER ─── */

.eb-hero {
    background: var(--navy);
    position: relative;
    overflow: hidden;
    padding: 56px 0 60px;
}

.eb-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 60% 80% at 10% 50%, rgba(99, 102, 241, 0.25) 0%, transparent 70%), radial-gradient(ellipse 40% 60% at 85% 20%, rgba(16, 185, 129, 0.2) 0%, transparent 60%), radial-gradient(ellipse 30% 40% at 60% 90%, rgba(244, 63, 94, 0.12) 0%, transparent 60%);
}


/* grid lines */

.eb-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image: linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
    background-size: 48px 48px;
}

.eb-hero .container {
    position: relative;
    z-index: 2;
}

.eb-hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(99, 102, 241, 0.2);
    border: 1px solid rgba(99, 102, 241, 0.35);
    color: #a5b4fc;
    padding: 5px 14px;
    border-radius: 30px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    margin-bottom: 18px;
}

.eb-hero-badge span {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #6366f1;
    animation: pulse 1.6s infinite;
}

@keyframes pulse {
    0%,
    100% {
        opacity: 1
    }
    50% {
        opacity: 0.3
    }
}

.eb-hero h1 {
    font-family: 'Outfit', sans-serif;
    font-size: clamp(28px, 4vw, 48px);
    font-weight: 800;
    color: #fff;
    line-height: 1.2;
    margin-bottom: 12px;
}

.eb-hero h1 em {
    font-style: normal;
    background: linear-gradient(90deg, #34d399, #06b6d4);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.eb-hero p {
    color: #94a3b8;
    font-size: 16px;
    max-width: 480px;
    margin-bottom: 28px;
}


/* search bar */

.eb-search {
    position: relative;
    max-width: 520px;
}

.eb-search input {
    width: 100%;
    height: 52px;
    border-radius: 30px;
    border: none;
    padding: 0 56px 0 52px;
    font-size: 14px;
    font-family: 'DM Sans', sans-serif;
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.15);
    outline: none;
    transition: all .3s;
}

.eb-search input::placeholder {
    color: rgba(255, 255, 255, 0.4);
}

.eb-search input:focus {
    background: rgba(255, 255, 255, 0.15);
    border-color: rgba(99, 102, 241, 0.6);
    box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.15);
}

.eb-search .ico-search {
    position: absolute;
    left: 18px;
    top: 50%;
    transform: translateY(-50%);
    color: rgba(255, 255, 255, 0.5);
}

.eb-search .btn-go {
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
    background: linear-gradient(135deg, #4338ca, #6366f1);
    color: white;
    border: none;
    border-radius: 24px;
    padding: 8px 20px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: .2s;
}

.eb-search .btn-go:hover {
    transform: translateY(-50%) scale(1.04);
}


/* stats row */

.eb-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
    margin-top: 32px;
}

.eb-stat {
    color: rgba(255, 255, 255, 0.7);
    font-size: 13px;
}

.eb-stat strong {
    color: #fff;
    font-family: 'Outfit', sans-serif;
    font-size: 22px;
    font-weight: 700;
    display: block;
}


/* ─── MAIN SECTION ─── */

.eb-main {
    padding: 52px 0 80px;
}


/* ─── TAGS ─── */

.eb-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 44px;
    align-items: center;
}

.eb-tag-label {
    font-size: 12px;
    color: var(--text-3);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-right: 4px;
}

.eb-tag {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: white;
    border: 1.5px solid var(--border);
    color: var(--text-2);
    padding: 6px 14px;
    border-radius: 30px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: .25s;
}

.eb-tag:hover,
.eb-tag.active {
    background: var(--navy);
    border-color: var(--navy);
    color: white;
}

.eb-tag .dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--indigo-light);
}

.eb-tag:hover .dot,
.eb-tag.active .dot {
    background: var(--green-light);
}


/* ─── SECTION HEADING ─── */

.eb-sec-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
}

.eb-sec-head h2 {
    font-family: 'Outfit', sans-serif;
    font-size: 22px;
    font-weight: 700;
    color: var(--navy);
    display: flex;
    align-items: center;
    gap: 10px;
}

.eb-sec-head h2 .line {
    width: 4px;
    height: 22px;
    border-radius: 2px;
    background: linear-gradient(180deg, var(--indigo), var(--cyan));
}

.eb-view-all {
    font-size: 13px;
    font-weight: 600;
    color: var(--indigo);
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 4px;
}

.eb-view-all:hover {
    color: var(--indigo-light);
}


/* ─── CATEGORY CARDS ─── */

.cat-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 12px;
    margin-bottom: 52px;
}

@media(max-width: 991px) {
    .cat-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media(max-width: 576px) {
    .cat-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

.cat-card {
    background: white;
    border: 1.5px solid var(--border);
    border-radius: var(--radius);
    padding: 22px 12px 18px;
    text-align: center;
    cursor: pointer;
    transition: all .3s cubic-bezier(.4, 0, .2, 1);
    text-decoration: none;
    color: var(--text-1);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.cat-card:hover {
    border-color: var(--indigo-light);
    box-shadow: var(--shadow-hover);
    transform: translateY(-6px);
    color: var(--navy);
}

.cat-card-icon {
    width: 52px;
    height: 52px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    transition: transform .3s;
}

.cat-card:hover .cat-card-icon {
    transform: scale(1.1) rotate(-3deg);
}

.cat-card-icon.c1 {
    background: #eef2ff;
    color: #4338ca;
}

.cat-card-icon.c2 {
    background: #fef3c7;
    color: #d97706;
}

.cat-card-icon.c3 {
    background: #ecfdf5;
    color: #059669;
}

.cat-card-icon.c4 {
    background: #fff1f2;
    color: #e11d48;
}

.cat-card-icon.c5 {
    background: #f0f9ff;
    color: #0284c7;
}

.cat-card-icon.c6 {
    background: #f5f3ff;
    color: #7c3aed;
}

.cat-card-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-1);
}

.cat-card-count {
    font-size: 11px;
    color: var(--text-3);
    font-weight: 500;
}


/* ─── BOOK CARDS ─── */

.books-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
    margin-bottom: 52px;
}

@media(max-width: 991px) {
    .books-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media(max-width: 576px) {
    .books-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }
}

.book-card {
    background: white;
    border-radius: 18px;
    overflow: hidden;
    border: 1.5px solid var(--border);
    transition: all .3s cubic-bezier(.4, 0, .2, 1);
    position: relative;
    cursor: pointer;
}

.book-card:hover {
    transform: translateY(-8px);
    box-shadow: var(--shadow-hover);
    border-color: transparent;
}

.book-badge {
    position: absolute;
    top: 12px;
    left: 12px;
    background: var(--amber);
    color: white;
    font-size: 10px;
    font-weight: 700;
    padding: 3px 9px;
    border-radius: 20px;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    z-index: 2;
}

.book-badge.free {
    background: var(--green);
}

.book-badge.new {
    background: var(--rose);
}

.book-thumb {
    height: 150px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Outfit', sans-serif;
    font-size: 28px;
    font-weight: 800;
    letter-spacing: -0.5px;
    position: relative;
    overflow: hidden;
}

.book-thumb::before {
    content: "";
    position: absolute;
    inset: 0;
    background: inherit;
    filter: brightness(1.1);
}

.book-thumb-inner {
    position: relative;
    z-index: 1;
    width: 64px;
    height: 84px;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 28px;
    font-weight: 800;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
    backdrop-filter: blur(4px);
    border: 1px solid rgba(255, 255, 255, 0.25);
    letter-spacing: 0;
}

.t1 {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.t2 {
    background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
}

.t3 {
    background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
}

.t4 {
    background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
}

.t5 {
    background: linear-gradient(135deg, #fa709a 0%, #fee140 100%);
}

.t6 {
    background: linear-gradient(135deg, #30cfd0 0%, #330867 100%);
}

.t7 {
    background: linear-gradient(135deg, #a18cd1 0%, #fbc2eb 100%);
}

.t8 {
    background: linear-gradient(135deg, #fddb92 0%, #d1fdff 100%);
}

.book-body {
    padding: 14px 14px 16px;
}

.book-exam-tag {
    display: inline-block;
    background: #eef2ff;
    color: #4338ca;
    font-size: 10px;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 4px;
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.book-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--navy);
    margin-bottom: 8px;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.book-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 11px;
    color: var(--text-3);
    margin-bottom: 12px;
}

.book-rating {
    color: var(--amber);
    display: flex;
    align-items: center;
    gap: 3px;
}

.book-price {
    font-family: 'Outfit', sans-serif;
    font-size: 18px;
    font-weight: 700;
    color: var(--navy);
    margin-bottom: 12px;
}

.book-price span {
    font-size: 13px;
    color: var(--text-3);
    text-decoration: line-through;
    font-weight: 400;
    margin-left: 4px;
}

.book-price .free-tag {
    color: var(--green);
    font-size: 15px;
}

.btn-download {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    padding: 10px;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 600;
    border: none;
    cursor: pointer;
    transition: all .25s;
    font-family: 'DM Sans', sans-serif;
    text-decoration: none;
}

.btn-download.primary {
    background: linear-gradient(135deg, #4338ca, #6366f1);
    color: white;
}

.btn-download.primary:hover {
    background: linear-gradient(135deg, #3730a3, #4f46e5);
    transform: translateY(-1px);
    box-shadow: 0 4px 16px rgba(67, 56, 202, 0.35);
}

.btn-download.success {
    background: linear-gradient(135deg, #059669, #10b981);
    color: white;
}

.btn-download.success:hover {
    background: linear-gradient(135deg, #047857, #059669);
    transform: translateY(-1px);
    box-shadow: 0 4px 16px rgba(16, 185, 129, 0.35);
}


/* ─── FEATURED WIDE CARD ─── */

.featured-strip {
    background: linear-gradient(135deg, var(--navy) 0%, #1e1b4b 100%);
    border-radius: 20px;
    padding: 32px 36px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 52px;
    position: relative;
    overflow: hidden;
}

.featured-strip::before {
    content: "";
    position: absolute;
    width: 300px;
    height: 300px;
    background: radial-gradient(circle, rgba(99, 102, 241, 0.3) 0%, transparent 70%);
    top: -80px;
    right: 100px;
}

.featured-strip-text {
    position: relative;
    z-index: 1;
}

.featured-strip-text .badge {
    display: inline-block;
    background: rgba(244, 63, 94, 0.2);
    border: 1px solid rgba(244, 63, 94, 0.4);
    color: #fda4af;
    font-size: 11px;
    font-weight: 700;
    padding: 4px 12px;
    border-radius: 20px;
    margin-bottom: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.featured-strip-text h3 {
    font-family: 'Outfit', sans-serif;
    font-size: 26px;
    font-weight: 700;
    color: white;
    margin-bottom: 8px;
}

.featured-strip-text p {
    color: #94a3b8;
    font-size: 14px;
}

.featured-strip-action {
    position: relative;
    z-index: 1;
    flex-shrink: 0;
}

.featured-strip-action a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: white;
    color: var(--navy);
    padding: 12px 24px;
    border-radius: 30px;
    font-weight: 700;
    font-size: 14px;
    text-decoration: none;
    transition: .25s;
}

.featured-strip-action a:hover {
    transform: scale(1.04);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
}


/* ─── NOTES GRID ─── */

.notes-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}

@media(max-width: 767px) {
    .notes-grid {
        grid-template-columns: 1fr;
    }
}

.note-card {
    background: white;
    border: 1.5px solid var(--border);
    border-radius: var(--radius);
    padding: 20px;
    display: flex;
    align-items: center;
    gap: 16px;
    cursor: pointer;
    transition: all .3s;
    text-decoration: none;
}

.note-card:hover {
    border-color: var(--indigo-light);
    box-shadow: var(--shadow-hover);
    transform: translateY(-4px);
}

.note-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 20px;
}

.note-icon.n1 {
    background: #eef2ff;
    color: #4338ca;
}

.note-icon.n2 {
    background: #ecfdf5;
    color: #059669;
}

.note-icon.n3 {
    background: #fef3c7;
    color: #d97706;
}

.note-icon.n4 {
    background: #fff1f2;
    color: #e11d48;
}

.note-icon.n5 {
    background: #f0f9ff;
    color: #0284c7;
}

.note-icon.n6 {
    background: #f5f3ff;
    color: #7c3aed;
}

.note-body {
    flex: 1;
    min-width: 0;
}

.note-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--navy);
    margin-bottom: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-family: "Outfit", sans-serif;
}

.note-sub {
    font-size: 12px;
    color: var(--text-3);
}

.note-action {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 10px;
    background: #eef2ff;
    color: #4338ca;
    transition: .25s;
}

.note-card:hover .note-action {
    background: var(--indigo);
    color: white;
}


/* ─── DIVIDER ─── */

.eb-divider {
    height: 1px;
    background: var(--border);
    margin: 44px 0;
}


/***************************************NOTIFICATION */


/* ══ HERO ══ */

.notif-hero {
    background: #0a0f2c;
    position: relative;
    overflow: hidden;
    padding: 52px 0 56px;
}

.notif-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 55% 80% at 8% 50%, rgba(99, 102, 241, 0.22) 0%, transparent 70%), radial-gradient(ellipse 35% 60% at 88% 20%, rgba(16, 185, 129, 0.18) 0%, transparent 60%);
}

.notif-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image: linear-gradient(rgba(255, 255, 255, 0.025) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.025) 1px, transparent 1px);
    background-size: 48px 48px;
}

.notif-hero .container {
    position: relative;
    z-index: 2;
}

.notif-hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(244, 63, 94, 0.18);
    border: 1px solid rgba(244, 63, 94, 0.35);
    color: #fda4af;
    padding: 5px 14px;
    border-radius: 30px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    margin-bottom: 16px;
}

.notif-hero-badge span {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #f43f5e;
    animation: blink 1.4s infinite;
}

@keyframes blink {
    0%,
    100% {
        opacity: 1
    }
    50% {
        opacity: 0.2
    }
}

.notif-hero h1 {
    font-family: 'Outfit', sans-serif;
    font-size: clamp(26px, 4vw, 44px);
    font-weight: 800;
    color: #fff;
    line-height: 1.2;
    margin-bottom: 10px;
}

.notif-hero h1 em {
    font-style: normal;
    background: linear-gradient(90deg, #f43f5e, #f59e0b);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.notif-hero p {
    color: #94a3b8;
    font-size: 15px;
    margin-bottom: 28px;
    max-width: 500px;
}


/* ── SEARCH BAR ── */

.notif-search {
    position: relative;
    max-width: 560px;
}

.notif-search input {
    width: 100%;
    height: 52px;
    border-radius: 30px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    padding: 0 56px 0 52px;
    font-size: 14px;
    font-family: 'DM Sans', sans-serif;
    background: rgba(255, 255, 255, 0.09);
    color: #fff;
    backdrop-filter: blur(12px);
    outline: none;
    transition: all .3s;
}

.notif-search input::placeholder {
    color: rgba(255, 255, 255, 0.38);
}

.notif-search input:focus {
    border-color: rgba(244, 63, 94, 0.5);
    box-shadow: 0 0 0 4px rgba(244, 63, 94, 0.12);
    background: rgba(255, 255, 255, 0.13);
}

.notif-search .s-ico {
    position: absolute;
    left: 18px;
    top: 50%;
    transform: translateY(-50%);
    color: rgba(255, 255, 255, 0.45);
}

.notif-search .btn-search {
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
    background: linear-gradient(135deg, #f43f5e, #db2777);
    color: white;
    border: none;
    border-radius: 24px;
    padding: 8px 20px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    font-family: 'DM Sans', sans-serif;
    transition: .2s;
}

.notif-search .btn-search:hover {
    transform: translateY(-50%) scale(1.04);
}


/* stats */

.notif-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
    margin-top: 28px;
}

.notif-stat {
    color: rgba(255, 255, 255, 0.65);
    font-size: 13px;
}

.notif-stat strong {
    color: #fff;
    font-family: 'Outfit', sans-serif;
    font-size: 22px;
    font-weight: 700;
    display: block;
}


/* ══ MAIN ══ */

.notif-main {
    padding: 52px 0 80px;
}


/* ── RUNNING HIGHLIGHTS TICKER ── */

.ticker-wrap {
    background: #fff;
    border: 1.5px solid #e8edf8;
    border-radius: 14px;
    display: flex;
    align-items: center;
    overflow: hidden;
    margin-bottom: 36px;
    box-shadow: 0 4px 16px rgba(10, 15, 44, 0.06);
}

.ticker-label {
    background: linear-gradient(135deg, #f43f5e, #db2777);
    color: white;
    font-size: 12px;
    font-weight: 700;
    padding: 12px 16px;
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: 6px;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    flex-shrink: 0;
}

.ticker-body {
    flex: 1;
    overflow: hidden;
    position: relative;
}

.ticker-inner {
    display: flex;
    gap: 0;
    animation: ticker 28s linear infinite;
    white-space: nowrap;
}

.ticker-inner:hover {
    animation-play-state: paused;
}

@keyframes ticker {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-50%);
    }
}

.ticker-item {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 0 28px;
    font-size: 13px;
    color: #374151;
    font-weight: 500;
    border-right: 1px solid #e8edf8;
    cursor: pointer;
    transition: color .2s;
    line-height: 46px;
}

.ticker-item:hover {
    color: #f43f5e;
}

.ticker-item .t-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #f43f5e;
    flex-shrink: 0;
}

.ticker-item .t-new {
    background: #f43f5e;
    color: white;
    font-size: 9px;
    font-weight: 700;
    padding: 1px 6px;
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}


/* ── FILTER TAGS ── */

.notif-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 28px;
    align-items: center;
}

.filter-label {
    font-size: 12px;
    color: #9ca3af;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-right: 4px;
}

.filter-tag {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: white;
    border: 1.5px solid #e8edf8;
    color: #374151;
    padding: 7px 16px;
    border-radius: 30px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all .25s;
}

.filter-tag:hover,
.filter-tag.active {
    background: #0a0f2c;
    border-color: #0a0f2c;
    color: white;
}

.filter-tag .f-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #f43f5e;
}

.filter-tag:hover .f-dot,
.filter-tag.active .f-dot {
    background: #34d399;
}


/* ── SECTION HEAD ── */

.notif-sec-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 18px;
}

.notif-sec-head h2 {
    font-family: 'Outfit', sans-serif;
    font-size: 20px;
    font-weight: 700;
    color: #0a0f2c;
    display: flex;
    align-items: center;
    gap: 10px;
}

.notif-sec-head h2 .line {
    width: 4px;
    height: 20px;
    border-radius: 2px;
    background: linear-gradient(180deg, #f43f5e, #f59e0b);
}

.view-all {
    font-size: 13px;
    font-weight: 600;
    color: #4338ca;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 4px;
}

.view-all:hover {
    color: #6366f1;
}


/* ── NOTIFICATION CARD ── */

.notif-card {
    background: white;
    border: 1.5px solid #e8edf8;
    border-radius: 18px;
    padding: 0;
    overflow: hidden;
    transition: all .3s cubic-bezier(.4, 0, .2, 1);
    cursor: pointer;
    height: 100%;
}

.notif-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 16px 48px rgba(67, 56, 202, 0.13);
    border-color: transparent;
}

.notif-card-top {
    padding: 18px 20px 14px;
    border-bottom: 1px solid #f1f5f9;
}

.notif-card-tags {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 10px;
    flex-wrap: wrap;
}

.n-tag {
    display: inline-block;
    font-size: 10px;
    font-weight: 700;
    padding: 3px 9px;
    border-radius: 5px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.n-tag.exam {
    background: #eef2ff;
    color: #4338ca;
}

.n-tag.govt {
    background: #ecfdf5;
    color: #059669;
}

.n-tag.new {
    background: #fff1f2;
    color: #e11d48;
}

.n-tag.result {
    background: #fef3c7;
    color: #d97706;
}

.n-tag.admit {
    background: #f0f9ff;
    color: #0284c7;
}

.notif-card-title {
    font-family: 'Outfit', sans-serif;
    font-size: 15px;
    font-weight: 700;
    color: #0a0f2c;
    margin-bottom: 6px;
    line-height: 1.4;
}

.notif-card-org {
    font-size: 12px;
    color: #6b7280;
    display: flex;
    align-items: center;
    gap: 5px;
}

.notif-card-bottom {
    padding: 12px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
}

.notif-dates {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
}

.notif-date-item {
    font-size: 11px;
    color: #9ca3af;
}

.notif-date-item strong {
    display: block;
    font-size: 12px;
    color: #374151;
    font-weight: 600;
}

.notif-card-actions {
    display: flex;
    gap: 8px;
}

.btn-info {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: #f0f4ff;
    color: #4338ca;
    border: none;
    border-radius: 8px;
    padding: 8px 14px;
    font-size: 12px;
    font-weight: 600;
    font-family: "Outfit", sans-serif;
    cursor: pointer;
    transition: .2s;
    text-decoration: none;
}

.btn-info:hover {
    background: #4338ca;
    color: white;
}

.btn-apply {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: linear-gradient(135deg, #f43f5e, #db2777);
    color: white;
    border: none;
    border-radius: 8px;
    padding: 8px 14px;
    font-size: 12px;
    font-weight: 600;
    font-family: "Outfit", sans-serif;
    cursor: pointer;
    transition: .2s;
    text-decoration: none;
}

.btn-apply:hover {
    transform: scale(1.04);
    box-shadow: 0 4px 14px rgba(244, 63, 94, 0.35);
    color: white;
}


/* vacancy badge */

.vacancy-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: #ecfdf5;
    color: #059669;
    font-size: 11px;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 20px;
}


/* ── PDF / DETAIL CARD ── */

.pdf-card {
    background: white;
    border: 1.5px solid #e8edf8;
    border-radius: 18px;
    overflow: hidden;
    transition: all .3s;
    height: 100%;
}

.pdf-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 14px 40px rgba(67, 56, 202, 0.12);
    border-color: transparent;
}

.pdf-card-header {
    padding: 20px;
    display: flex;
    align-items: flex-start;
    gap: 14px;
    border-bottom: 1px solid #f1f5f9;
}

.pdf-icon {
    width: 52px;
    height: 60px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: "Outfit", sans-serif;
    font-size: 12px;
    font-weight: 800;
    color: white;
    flex-shrink: 0;
    letter-spacing: 0.3px;
}

.pdf-icon.red {
    background: linear-gradient(135deg, #f43f5e, #db2777);
}

.pdf-icon.blue {
    background: linear-gradient(135deg, #4338ca, #6366f1);
}

.pdf-icon.green {
    background: linear-gradient(135deg, #059669, #10b981);
}

.pdf-icon.amber {
    background: linear-gradient(135deg, #d97706, #f59e0b);
}

.pdf-card-info {
    flex: 1;
    min-width: 0;
}

.pdf-exam-tag {
    display: inline-block;
    background: #eef2ff;
    color: #4338ca;
    font-size: 10px;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 4px;
    text-transform: uppercase;
    margin-bottom: 6px;
    font-family: "Outfit", sans-serif;
}

.pdf-card-title {
    font-family: 'Outfit', sans-serif;
    font-size: 14px;
    font-weight: 700;
    color: #0a0f2c;
    margin-bottom: 4px;
    line-height: 1.4;
}

.pdf-card-org {
    font-size: 12px;
    color: #6b7280;
}

.pdf-card-body {
    padding: 14px 20px 18px;
}

.pdf-meta-row {
    display: flex;
    gap: 16px;
    margin-bottom: 14px;
    flex-wrap: wrap;
}

.pdf-meta-item {
    font-size: 11px;
    color: #9ca3af;
}

.pdf-meta-item strong {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: #374151;
}

.pdf-links {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.btn-pdf {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    border-radius: 8px;
    padding: 9px 14px;
    font-size: 12px;
    font-weight: 600;
    font-family: "Outfit", sans-serif;
    cursor: pointer;
    transition: all .2s;
    text-decoration: none;
    border: none;
}

.btn-pdf.primary {
    background: linear-gradient(135deg, #4338ca, #6366f1);
    color: white;
    font-family: "Outfit", sans-serif;
}

.btn-pdf.primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(67, 56, 202, 0.35);
    color: white;
}

.btn-pdf.outline {
    background: #f0f4ff;
    color: #4338ca;
}

.btn-pdf.outline:hover {
    background: #4338ca;
    color: white;
}

.btn-pdf.success {
    background: linear-gradient(135deg, #059669, #10b981);
    color: white;
}

.btn-pdf.success:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(16, 185, 129, 0.35);
    color: white;
}


/* ── DIVIDER ── */

.notif-divider {
    height: 1px;
    background: #e8edf8;
    margin: 44px 0;
}


/* ── PAGINATION ── */

.notif-pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 6px;
    margin-top: 36px;
}

.page-btn {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    border: 1.5px solid #e8edf8;
    background: white;
    font-size: 13px;
    font-weight: 600;
    color: #374151;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: .2s;
    font-family: 'DM Sans', sans-serif;
}

.page-btn:hover,
.page-btn.active {
    background: #0a0f2c;
    border-color: #0a0f2c;
    color: white;
}


/*============================================= My Courses & Live Batches==*/


/* ══ HERO ══ */

.mc-hero {
    background: #0a0f2c;
    padding: 52px 0 56px;
    position: relative;
    overflow: hidden;
}

.mc-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 55% 80% at 5% 50%, rgba(6, 182, 212, 0.2) 0%, transparent 65%), radial-gradient(ellipse 40% 60% at 90% 20%, rgba(99, 102, 241, 0.2) 0%, transparent 60%), radial-gradient(ellipse 30% 50% at 55% 90%, rgba(245, 158, 11, 0.12) 0%, transparent 60%);
}

.mc-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image: linear-gradient(rgba(255, 255, 255, 0.025) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.025) 1px, transparent 1px);
    background-size: 48px 48px;
}

.mc-hero .container {
    position: relative;
    z-index: 2;
}

.mc-hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(6, 182, 212, 0.18);
    border: 1px solid rgba(6, 182, 212, 0.35);
    color: #67e8f9;
    padding: 5px 14px;
    border-radius: 30px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    margin-bottom: 16px;
}

.mc-hero-badge span {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #06b6d4;
    animation: blink 1.4s infinite;
}

@keyframes blink {
    0%,
    100% {
        opacity: 1
    }
    50% {
        opacity: 0.2
    }
}

.mc-hero h1 {
    font-family: 'Outfit', sans-serif;
    font-size: clamp(26px, 4vw, 44px);
    font-weight: 800;
    color: #fff;
    line-height: 1.2;
    margin-bottom: 10px;
}

.mc-hero h1 em {
    font-style: normal;
    background: linear-gradient(90deg, #06b6d4, #6366f1);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.mc-hero p {
    color: #94a3b8;
    font-size: 15px;
    margin-bottom: 28px;
    max-width: 480px;
}


/* search */

.mc-search {
    position: relative;
    max-width: 580px;
}

.mc-search input {
    width: 100%;
    height: 52px;
    border-radius: 30px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    padding: 0 160px 0 52px;
    font-size: 14px;
    font-family: 'DM Sans', sans-serif;
    background: rgba(255, 255, 255, 0.09);
    color: #fff;
    backdrop-filter: blur(12px);
    outline: none;
    transition: all .3s;
}

.mc-search input::placeholder {
    color: rgba(255, 255, 255, 0.38);
}

.mc-search input:focus {
    border-color: rgba(6, 182, 212, 0.5);
    box-shadow: 0 0 0 4px rgba(6, 182, 212, 0.12);
    background: rgba(255, 255, 255, 0.13);
}

.mc-search .s-ico {
    position: absolute;
    left: 18px;
    top: 50%;
    transform: translateY(-50%);
    color: rgba(255, 255, 255, 0.45);
}

.mc-search-filters {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    gap: 4px;
}

.mc-filter-pill {
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: rgba(255, 255, 255, 0.75);
    font-size: 11px;
    font-weight: 600;
    padding: 5px 10px;
    border-radius: 20px;
    cursor: pointer;
    transition: .2s;
    font-family: 'DM Sans', sans-serif;
    white-space: nowrap;
}

.mc-filter-pill:hover,
.mc-filter-pill.active {
    background: #06b6d4;
    border-color: #06b6d4;
    color: white;
}


/* stats */

.mc-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
    margin-top: 28px;
}

.mc-stat {
    color: rgba(255, 255, 255, 0.65);
    font-size: 13px;
}

.mc-stat strong {
    color: #fff;
    font-family: 'Outfit', sans-serif;
    font-size: 22px;
    font-weight: 700;
    display: block;
}


/* ══ MAIN ══ */

.mc-main {
    padding: 52px 0 80px;
}


/* ── RUNNING BATCH TICKER ── */

.ticker-wrap {
    background: #fff;
    border: 1.5px solid #e8edf8;
    border-radius: 14px;
    display: flex;
    align-items: center;
    overflow: hidden;
    margin-bottom: 36px;
    box-shadow: 0 4px 16px rgba(10, 15, 44, 0.06);
}

.ticker-label {
    background: linear-gradient(135deg, #06b6d4, #4338ca);
    color: white;
    font-size: 12px;
    font-weight: 700;
    padding: 13px 16px;
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: 6px;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    flex-shrink: 0;
}

.ticker-body {
    flex: 1;
    overflow: hidden;
}

.ticker-inner {
    display: flex;
    animation: ticker 30s linear infinite;
    white-space: nowrap;
}

.ticker-inner:hover {
    animation-play-state: paused;
}

@keyframes ticker {
    0% {
        transform: translateX(0)
    }
    100% {
        transform: translateX(-50%)
    }
}

.ticker-item {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 0 28px;
    font-size: 13px;
    color: #374151;
    font-weight: 500;
    border-right: 1px solid #e8edf8;
    cursor: pointer;
    line-height: 46px;
    transition: color .2s;
}

.ticker-item:hover {
    color: #06b6d4;
}

.ticker-item .t-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #06b6d4;
    flex-shrink: 0;
}

.ticker-live {
    background: #f43f5e;
    color: white;
    font-size: 9px;
    font-weight: 700;
    padding: 1px 6px;
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    animation: blink 1.2s infinite;
}


/* ── TOGGLE TABS ── */

.mc-toggle {
    display: inline-flex;
    background: white;
    border: 1.5px solid #e8edf8;
    border-radius: 12px;
    padding: 4px;
    gap: 4px;
    margin-bottom: 28px;
    box-shadow: 0 2px 12px rgba(10, 15, 44, 0.06);
}

.mc-toggle-btn {
    padding: 9px 22px;
    border-radius: 9px;
    border: none;
    background: transparent;
    font-size: 13px;
    font-weight: 600;
    color: #6b7280;
    cursor: pointer;
    transition: all .25s;
    font-family: 'DM Sans', sans-serif;
    display: flex;
    align-items: center;
    gap: 6px;
}

.mc-toggle-btn.active {
    background: #0a0f2c;
    color: white;
    box-shadow: 0 4px 12px rgba(10, 15, 44, 0.2);
}

.mc-toggle-btn .count {
    font-size: 11px;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.15);
}

.mc-toggle-btn:not(.active) .count {
    background: #f0f4ff;
    color: #4338ca;
}


/* ── SECTION HEAD ── */

.mc-sec-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 18px;
}

.mc-sec-head h2 {
    font-family: 'Outfit', sans-serif;
    font-size: 20px;
    font-weight: 700;
    color: #0a0f2c;
    display: flex;
    align-items: center;
    gap: 10px;
}

.mc-sec-head h2 .line {
    width: 4px;
    height: 20px;
    border-radius: 2px;
    background: linear-gradient(180deg, #06b6d4, #4338ca);
}

.view-all {
    font-size: 13px;
    font-weight: 600;
    color: #4338ca;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 4px;
}

.view-all:hover {
    color: #6366f1;
}


/* ── COURSE CARD ── */

.course-card {
    background: #fff;
    border: 1px solid rgba(226, 232, 240, 0.9);
    border-radius: 22px;
    overflow: hidden;
    transition: transform .4s cubic-bezier(.34, 1.56, .64, 1), box-shadow .4s cubic-bezier(.4, 0, .2, 1), border-color .3s ease;
    height: 100%;
    position: relative;
    box-shadow:
        0 1px 2px rgba(10, 15, 44, 0.04),
        0 4px 12px rgba(10, 15, 44, 0.05),
        0 12px 32px rgba(10, 15, 44, 0.04);
}

.course-card:hover {
    transform: translateY(-10px);
    border-color: rgba(99, 102, 241, 0.18);
    box-shadow:
        0 4px 8px rgba(6, 182, 212, 0.06),
        0 16px 32px rgba(67, 56, 202, 0.1),
        0 28px 56px rgba(10, 15, 44, 0.08);
}

.course-card.is-upcoming {
    border-color: rgba(245, 158, 11, 0.2);
}

.course-card.is-upcoming:hover {
    border-color: rgba(245, 158, 11, 0.35);
    box-shadow:
        0 4px 8px rgba(245, 158, 11, 0.08),
        0 16px 32px rgba(244, 63, 94, 0.1),
        0 28px 56px rgba(10, 15, 44, 0.08);
}

/* coming soon badge */

.coming-soon-badge {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 5;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 6px 12px;
    border-radius: 30px;
    font-family: 'Outfit', sans-serif;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    color: #fff;
    white-space: nowrap;
    background: linear-gradient(135deg, #f59e0b 0%, #f43f5e 45%, #8b5cf6 100%);
    background-size: 200% 200%;
    border: 1px solid rgba(255, 255, 255, 0.35);
    box-shadow:
        0 4px 14px rgba(244, 63, 94, 0.4),
        0 0 0 0 rgba(245, 158, 11, 0.45);
    animation: cs-gradient-shift 3s ease infinite, cs-pulse-ring 2s ease-in-out infinite;
}

@keyframes cs-gradient-shift {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

@keyframes cs-pulse-ring {
    0%, 100% {
        transform: scale(1);
        box-shadow:
            0 4px 14px rgba(244, 63, 94, 0.4),
            0 0 0 0 rgba(245, 158, 11, 0.45);
    }
    50% {
        transform: scale(1.05);
        box-shadow:
            0 6px 20px rgba(244, 63, 94, 0.55),
            0 0 0 6px rgba(245, 158, 11, 0);
    }
}


/* special offer ribbon */

.offer-ribbon {
    position: absolute;
    top: 14px;
    right: -8px;
    background: linear-gradient(135deg, #f43f5e, #db2777);
    color: white;
    font-size: 10px;
    font-weight: 700;
    padding: 4px 14px 4px 10px;
    border-radius: 4px 0 0 4px;
    letter-spacing: 0.3px;
    text-transform: uppercase;
    z-index: 3;
    box-shadow: 0 2px 8px rgba(244, 63, 94, 0.35);
}

.offer-ribbon::after {
    content: "";
    position: absolute;
    right: -8px;
    top: 0;
    border-left: 8px solid #db2777;
    border-top: 12px solid transparent;
    border-bottom: 14px solid transparent;
}


/* thumb */

.course-thumb {
    height: 140px;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.course-thumb-bg {
    position: absolute;
    inset: 0;
    background: inherit;
}

.course-thumb-icon {
    width: 60px;
    height: 60px;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.18);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 26px;
    backdrop-filter: blur(6px);
    border: 1.5px solid rgba(255, 255, 255, 0.25);
    position: relative;
    z-index: 1;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}

.live-badge {
    position: absolute;
    bottom: 10px;
    left: 12px;
    background: #f43f5e;
    color: white;
    font-size: 10px;
    font-weight: 700;
    padding: 3px 9px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    gap: 4px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    z-index: 2;
    animation: blink 1.4s infinite;
}

.live-badge span {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: white;
}

.students-badge {
    position: absolute;
    bottom: 10px;
    right: 12px;
    background: rgba(0, 0, 0, 0.45);
    color: white;
    font-size: 10px;
    font-weight: 600;
    padding: 3px 9px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    gap: 4px;
    backdrop-filter: blur(4px);
    z-index: 2;
}

.ct1 {
    background: linear-gradient(135deg, #667eea, #764ba2);
}

.ct2 {
    background: linear-gradient(135deg, #06b6d4, #4338ca);
}

.ct3 {
    background: linear-gradient(135deg, #f43f5e, #f59e0b);
}

.ct4 {
    background: linear-gradient(135deg, #10b981, #06b6d4);
}

.ct5 {
    background: linear-gradient(135deg, #8b5cf6, #ec4899);
}

.ct6 {
    background: linear-gradient(135deg, #f59e0b, #ef4444);
}


/* body */

.course-body {
    padding: 18px 20px 20px;
}

.course-tags {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}

.c-tag {
    font-size: 10px;
    font-weight: 700;
    padding: 4px 9px;
    border-radius: 6px;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    line-height: 1.2;
}

.c-tag.exam {
    background: #eef2ff;
    color: #4338ca;
}

.c-tag.subj {
    background: #ecfdf5;
    color: #059669;
}

.c-tag.lang {
    background: #fef3c7;
    color: #d97706;
}

.course-title {
    font-family: 'Outfit', sans-serif;
    font-size: 16px;
    font-weight: 700;
    color: #0a0f2c;
    margin-bottom: 8px;
    line-height: 1.45;
    letter-spacing: -0.02em;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    transition: color .25s ease;
}

.course-card:hover .course-title {
    color: #1e1b4b;
}

.course-teacher {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12.5px;
    font-weight: 500;
    color: #64748b;
    margin-bottom: 14px;
}

.teacher-avatar {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: 700;
    color: white;
    flex-shrink: 0;
}

.course-meta {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    margin-bottom: 14px;
}

.course-meta-item {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 11.5px;
    color: #94a3b8;
}

.course-meta-item strong {
    color: #334155;
    font-weight: 600;
}

.course-progress {
    margin-bottom: 14px;
}

.progress-head {
    display: flex;
    justify-content: space-between;
    font-size: 11px;
    color: #6b7280;
    margin-bottom: 5px;
}

.progress-bar-wrap {
    height: 7px;
    background: #f1f5f9;
    border-radius: 10px;
    overflow: hidden;
}

.progress-bar-fill {
    height: 100%;
    border-radius: 10px;
    background: linear-gradient(90deg, #06b6d4, #6366f1, #4338ca);
    background-size: 200% 100%;
    transition: width 1s ease;
    box-shadow: 0 0 8px rgba(6, 182, 212, 0.35);
}

.course-price {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}

.price-val {
    font-family: 'Outfit', sans-serif;
    font-size: 20px;
    font-weight: 800;
    color: #0a0f2c;
}

.price-val span {
    font-size: 13px;
    color: #9ca3af;
    text-decoration: line-through;
    font-weight: 400;
    margin-left: 4px;
}

.price-off {
    background: #ecfdf5;
    color: #059669;
    font-size: 11px;
    font-weight: 700;
    padding: 3px 9px;
    border-radius: 6px;
}

.btn-enroll {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    padding: 11px;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 600;
    border: none;
    cursor: pointer;
    transition: all .25s;
    font-family: "Outfit", sans-serif;
    text-decoration: none;
}

.btn-enroll.primary {
    background: linear-gradient(135deg, #06b6d4, #4338ca);
    color: white;
}

.btn-enroll.primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(6, 182, 212, 0.35);
    color: white;
}

.btn-enroll.continue {
    background: linear-gradient(135deg, #059669, #10b981);
    color: white;
}

.btn-enroll.continue:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(16, 185, 129, 0.35);
    color: white;
}

.btn-enroll.coming-soon {
    background: linear-gradient(135deg, #f1f5f9, #e2e8f0);
    color: #94a3b8;
    cursor: not-allowed;
    pointer-events: none;
    border: 1px dashed #cbd5e1;
}

.btn-enroll.notify {
    background: linear-gradient(135deg, #fef3c7, #fde68a);
    color: #92400e;
    border: 1px solid rgba(245, 158, 11, 0.3);
}

.btn-enroll.notify:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(245, 158, 11, 0.3);
    color: #78350f;
}


/* ── SPECIAL OFFER POPUP BANNER ── */

.offer-popup {
    position: fixed;
    bottom: 28px;
    right: 28px;
    width: 320px;
    background: #0a0f2c;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 24px 60px rgba(10, 15, 44, 0.4);
    z-index: 999;
    animation: slideUp .5s cubic-bezier(.4, 0, .2, 1);
    border: 1.5px solid rgba(99, 102, 241, 0.3);
}

@keyframes slideUp {
    from {
        transform: translateY(40px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

.offer-popup-top {
    padding: 18px 18px 14px;
    background: linear-gradient(135deg, rgba(6, 182, 212, 0.15), rgba(67, 56, 202, 0.15));
    position: relative;
}

.offer-popup-close {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, 0.7);
    transition: .2s;
}

.offer-popup-close:hover {
    background: rgba(255, 255, 255, 0.2);
    color: white;
}

.offer-popup-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: rgba(244, 63, 94, 0.25);
    border: 1px solid rgba(244, 63, 94, 0.4);
    color: #fda4af;
    font-size: 10px;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 20px;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    margin-bottom: 10px;
}

.offer-popup-badge span {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #f43f5e;
    animation: blink 1.2s infinite;
}

.offer-popup-title {
    font-family: 'Outfit', sans-serif;
    font-size: 18px;
    font-weight: 800;
    color: white;
    margin-bottom: 4px;
    line-height: 1.3;
}

.offer-popup-title em {
    font-style: normal;
    background: linear-gradient(90deg, #06b6d4, #6366f1);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.offer-popup-sub {
    font-size: 12px;
    color: #94a3b8;
}

.offer-popup-timer {
    display: flex;
    gap: 8px;
    padding: 14px 18px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

.timer-block {
    flex: 1;
    background: rgba(255, 255, 255, 0.07);
    border-radius: 10px;
    padding: 8px 4px;
    text-align: center;
}

.timer-block strong {
    font-family: 'Outfit', sans-serif;
    font-size: 22px;
    font-weight: 800;
    color: #06b6d4;
    display: block;
    line-height: 1;
}

.timer-block span {
    font-size: 9px;
    color: #64748b;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}

.offer-popup-bottom {
    padding: 14px 18px;
}

.offer-popup-price {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}

.offer-popup-price strong {
    font-family: 'Outfit', sans-serif;
    font-size: 24px;
    font-weight: 800;
    color: white;
}

.offer-popup-price del {
    font-size: 14px;
    color: #64748b;
}

.offer-popup-price .save {
    background: #ecfdf5;
    color: #059669;
    font-size: 11px;
    font-weight: 700;
    padding: 3px 9px;
    border-radius: 6px;
}

.btn-claim {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    width: 100%;
    background: linear-gradient(135deg, #f43f5e, #db2777);
    color: white;
    border: none;
    border-radius: 10px;
    padding: 13px;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: all .25s;
    font-family: 'DM Sans', sans-serif;
}

.btn-claim:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(244, 63, 94, 0.4);
}


/******************************** BATCH DETAILS ------------*/


/* TOPBAR */

.bd-topbar {
    background: #0a0f2c;
    padding: 0 20px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: sticky;
    top: 0;
    z-index: 100;
}

.bd-topbar-left {
    display: flex;
    align-items: center;
    gap: 12px;
}

.btn-back {
    display: flex;
    align-items: center;
    gap: 6px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: rgba(255, 255, 255, 0.75);
    padding: 7px 14px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: .2s;
    font-family: 'DM Sans', sans-serif;
    text-decoration: none;
}

.btn-back:hover {
    background: rgba(255, 255, 255, 0.14);
    color: white;
}

.bd-nav-title {
    font-family: 'Outfit', sans-serif;
    font-size: 14px;
    font-weight: 700;
    color: white;
}


/* ── HERO BANNER ── */

.bd-hero {
    background: #0a0f2c;
    position: relative;
    overflow: hidden;
    padding: 40px 0 44px;
}

.bd-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 55% 90% at 5% 50%, rgba(99, 102, 241, 0.22) 0%, transparent 65%), radial-gradient(ellipse 40% 70% at 90% 20%, rgba(245, 158, 11, 0.18) 0%, transparent 60%);
}

.bd-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image: linear-gradient(rgba(255, 255, 255, 0.025) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.025) 1px, transparent 1px);
    background-size: 48px 48px;
}

.bd-hero .container {
    position: relative;
    z-index: 2;
}

.bd-batch-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(245, 158, 11, 0.18);
    border: 1px solid rgba(245, 158, 11, 0.35);
    color: #fcd34d;
    padding: 5px 14px;
    border-radius: 30px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    margin-bottom: 14px;
}

.bd-batch-badge span {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #f59e0b;
    animation: blink 1.4s infinite;
}

.bd-batch-badge--soon {
    background: rgba(139, 92, 246, 0.2);
    border-color: rgba(139, 92, 246, 0.4);
    color: #c4b5fd;
}

.bd-batch-badge--soon span {
    background: #8b5cf6;
}

.bd-hero--soon {
    padding: 48px 0 52px;
}

.coming-soon-badge--hero {
    position: static;
    display: inline-flex;
    margin-bottom: 16px;
    font-size: 11px;
    padding: 7px 16px;
}

.coming-soon-badge--panel {
    position: static;
    font-size: 9px;
    padding: 5px 11px;
    margin-bottom: 8px;
}

.bd-hero-sub {
    color: #94a3b8;
    font-size: 15px;
    max-width: 560px;
    margin-bottom: 24px;
    line-height: 1.65;
}

.bd-hero-stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    margin-bottom: 24px;
    max-width: 560px;
}

.bd-stat-pill {
    display: flex;
    align-items: center;
    gap: 10px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 14px;
    padding: 12px 14px;
    backdrop-filter: blur(8px);
    transition: border-color .25s ease, background .25s ease;
}

.bd-stat-pill:hover {
    background: rgba(255, 255, 255, 0.09);
    border-color: rgba(99, 102, 241, 0.35);
}

.bd-stat-pill--highlight {
    background: rgba(245, 158, 11, 0.1);
    border-color: rgba(245, 158, 11, 0.3);
}

.bd-stat-pill--highlight:hover {
    border-color: rgba(245, 158, 11, 0.5);
}

.bd-stat-pill-icon {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    background: rgba(99, 102, 241, 0.2);
    color: #a5b4fc;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.bd-stat-pill-icon--gold {
    background: rgba(245, 158, 11, 0.2);
    color: #fcd34d;
}

.bd-stat-pill-text {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}

.bd-stat-pill-text strong {
    font-family: 'Outfit', sans-serif;
    font-size: 15px;
    font-weight: 700;
    color: #fff;
    line-height: 1.2;
}

.bd-stat-pill-text span {
    font-size: 10px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.45);
    text-transform: uppercase;
    letter-spacing: 0.4px;
}

.bd-soon-panel {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 22px;
    padding: 24px;
    backdrop-filter: blur(12px);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.2);
}

.bd-soon-panel-head p {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.55);
    margin: 0 0 18px;
    line-height: 1.5;
}

.bd-soon-features {
    list-style: none;
    padding: 0;
    margin: 0 0 20px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.bd-soon-features li {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.72);
}

.bd-soon-features li i {
    color: #10b981;
    flex-shrink: 0;
}

.bd-soon-features li:last-child i {
    color: #f59e0b;
}

.bd-soon-features li strong {
    color: #fcd34d;
}

.bd-soon-panel-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 13px;
    border-radius: 12px;
    background: linear-gradient(135deg, #fef3c7, #fde68a);
    color: #92400e;
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
    border: 1px solid rgba(245, 158, 11, 0.35);
    transition: transform .2s ease, box-shadow .2s ease;
    font-family: 'Outfit', sans-serif;
}

.bd-soon-panel-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(245, 158, 11, 0.3);
    color: #78350f;
}

@media (max-width: 991px) {
    .bd-hero-stats-grid {
        grid-template-columns: repeat(2, 1fr);
        max-width: 100%;
    }
}

@media (max-width: 400px) {
    .bd-hero-stats-grid {
        grid-template-columns: 1fr;
    }
}

.bd-topbar-badge {
    position: static;
    font-size: 9px;
    padding: 5px 10px;
}

.bd-notify-btn {
    width: auto;
    padding: 12px 22px;
}

/* education demo video */

.bd-demo-sec-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 18px;
}

.bd-demo-sec-title {
    font-family: 'Outfit', sans-serif;
    font-size: 20px;
    font-weight: 700;
    color: #0a0f2c;
    display: flex;
    align-items: center;
    gap: 10px;
}

.bd-demo-sec-line {
    width: 4px;
    height: 22px;
    border-radius: 2px;
    background: linear-gradient(180deg, #f59e0b, #f43f5e);
    display: inline-block;
}

.coming-soon-badge--sec {
    position: static;
    font-size: 9px;
    padding: 5px 11px;
}

.bd-demo-block {
    margin-bottom: 32px;
}

.bd-demo-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 10px;
}

.bd-demo-title {
    font-family: 'Outfit', sans-serif;
    font-size: 20px;
    font-weight: 700;
    color: #0a0f2c;
    display: flex;
    align-items: center;
    gap: 10px;
}

.bd-demo-line {
    width: 4px;
    height: 22px;
    border-radius: 2px;
    background: linear-gradient(180deg, #06b6d4, #4338ca);
    display: inline-block;
}

.bd-demo-tag {
    background: #eef2ff;
    color: #4338ca;
    font-size: 11px;
    font-weight: 700;
    padding: 4px 12px;
    border-radius: 20px;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}

.bd-demo-desc {
    font-size: 14px;
    color: #6b7280;
    margin-bottom: 18px;
    max-width: 640px;
}

.bd-demo-video-wrap {
    background: #fff;
    border: 1px solid #e8edf8;
    border-radius: 22px;
    overflow: hidden;
    box-shadow:
        0 4px 12px rgba(10, 15, 44, 0.05),
        0 20px 48px rgba(67, 56, 202, 0.1);
}

.bd-demo-video {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    background: linear-gradient(135deg, #0a0f2c, #1e1b4b);
}

.bd-demo-video iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

.bd-demo-video-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
    padding: 14px 20px;
    background: #f8fafc;
    border-top: 1px solid #e8edf8;
}

.bd-demo-video-info {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 500;
    color: #374151;
}

.bd-demo-duration {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    font-weight: 600;
    color: #6b7280;
    background: #fff;
    border: 1px solid #e2e8f0;
    padding: 4px 10px;
    border-radius: 8px;
}

@keyframes blink {
    0%,
    100% {
        opacity: 1
    }
    50% {
        opacity: 0.2
    }
}

.bd-hero h1 {
    font-family: 'Outfit', sans-serif;
    font-size: clamp(24px, 3.5vw, 40px);
    font-weight: 800;
    color: #fff;
    line-height: 1.2;
    margin-bottom: 8px;
}

.bd-hero h1 em {
    font-style: normal;
    background: linear-gradient(90deg, #f59e0b, #f43f5e);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.bd-hero-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
    margin-bottom: 20px;
}

.bd-meta-item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.6);
}

.bd-meta-item strong {
    color: #fff;
    font-weight: 600;
}

.bd-hero-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.btn-buy-now {
    display: flex;
    align-items: center;
    gap: 7px;
    background: linear-gradient(135deg, #f59e0b, #f43f5e);
    color: white;
    border: none;
    border-radius: 10px;
    padding: 12px 24px;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    font-family: 'DM Sans', sans-serif;
    transition: .2s;
    text-decoration: none;
}

.btn-buy-now:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(245, 158, 11, 0.4);
    color: white;
}

.btn-demo {
    display: flex;
    align-items: center;
    gap: 7px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: white;
    border-radius: 10px;
    padding: 12px 20px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    font-family: 'DM Sans', sans-serif;
    transition: .2s;
}

.btn-demo:hover {
    background: rgba(255, 255, 255, 0.18);
}


/* hero stats */

.bd-hero-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
    margin-top: 20px;
}

.bd-stat {
    color: rgba(255, 255, 255, 0.6);
    font-size: 13px;
}

.bd-stat strong {
    color: #fff;
    font-family: 'Outfit', sans-serif;
    font-size: 20px;
    font-weight: 700;
    display: block;
}


/* ── WHAT WE COVER BANNER ── */

.what-cover-banner {
    background: linear-gradient(135deg, #1e1b4b, #312e81);
    border-radius: 18px;
    padding: 24px 28px;
    margin-bottom: 24px;
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(99, 102, 241, 0.3);
}

.what-cover-banner::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 60% 100% at 90% 50%, rgba(245, 158, 11, 0.12) 0%, transparent 65%);
}

.wcb-inner {
    position: relative;
    z-index: 2;
}

.wcb-title {
    font-family: 'Outfit', sans-serif;
    font-size: 18px;
    font-weight: 700;
    color: #fff;
    margin-bottom: 14px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.wcb-title .wcb-line {
    width: 4px;
    height: 20px;
    border-radius: 2px;
    background: linear-gradient(180deg, #f59e0b, #f43f5e);
}

.cover-points {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.cover-point {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: rgba(255, 255, 255, 0.85);
    padding: 7px 14px;
    border-radius: 30px;
    font-size: 13px;
    font-weight: 500;
}

.cover-point .cp-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #f59e0b;
    flex-shrink: 0;
}


/* ── MAIN ── */

.bd-main {
    padding: 32px 0 88px;
}


/* ── SESSION CARD ── */

.session-live-card {
    background: #0a0f2c;
    border: 1.5px solid rgba(244, 63, 94, 0.3);
    border-radius: 16px;
    padding: 18px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
    margin-bottom: 24px;
}

.slc-left {
    display: flex;
    align-items: center;
    gap: 12px;
}

.slc-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: rgba(244, 63, 94, 0.18);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #f43f5e;
    flex-shrink: 0;
}

.slc-text h4 {
    font-family: 'Outfit', sans-serif;
    font-size: 15px;
    font-weight: 700;
    color: #fff;
    margin-bottom: 2px;
}

.slc-text p {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.45);
}

.live-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: rgba(244, 63, 94, 0.2);
    border: 1px solid rgba(244, 63, 94, 0.35);
    color: #fda4af;
    font-size: 10px;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 20px;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    animation: blink 1.4s infinite;
}

.live-pill span {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #f43f5e;
}


/* ── TEACHER DEMO CARDS ── */

.teacher-demo-card {
    background: white;
    border: 1.5px solid #e8edf8;
    border-radius: 18px;
    overflow: hidden;
    transition: all .3s;
    height: 100%;
    position: relative;
}

.teacher-demo-card--soon {
    border-color: rgba(245, 158, 11, 0.22);
    box-shadow:
        0 2px 8px rgba(10, 15, 44, 0.04),
        0 8px 24px rgba(245, 158, 11, 0.06);
}

.teacher-demo-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 14px 40px rgba(99, 102, 241, 0.12);
    border-color: rgba(99, 102, 241, 0.25);
}

.teacher-demo-card--soon:hover {
    border-color: rgba(245, 158, 11, 0.4);
    box-shadow:
        0 8px 20px rgba(245, 158, 11, 0.1),
        0 20px 40px rgba(244, 63, 94, 0.08);
}

.teacher-demo-card .coming-soon-badge {
    top: 10px;
    right: 10px;
    font-size: 9px;
    padding: 5px 10px;
    z-index: 6;
}

.tdc-thumb {
    height: 148px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.tdc-thumb--video {
    height: auto;
    aspect-ratio: 16 / 9;
    min-height: 148px;
    background: #0a0f2c;
}

.tdc-thumb--video::before,
.tdc-thumb--video::after {
    display: none;
}

.tdc-thumb--video iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    z-index: 2;
}

.tdc-thumb--video .tdc-duration {
    z-index: 3;
}

.tdc-thumb--poster .tdc-play-btn {
    cursor: pointer;
}

.tdc-thumb::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 80% 60% at 15% 85%, rgba(255, 255, 255, 0.22) 0%, transparent 55%),
        radial-gradient(ellipse 60% 50% at 85% 15%, rgba(255, 255, 255, 0.18) 0%, transparent 50%),
        radial-gradient(ellipse 40% 40% at 50% 50%, rgba(255, 255, 255, 0.06) 0%, transparent 70%);
    z-index: 1;
    pointer-events: none;
}

.tdc-thumb::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 40%, rgba(10, 15, 44, 0.35) 100%);
    z-index: 1;
    pointer-events: none;
    transition: opacity .35s ease;
}

.course-card:hover .tdc-thumb::after {
    opacity: 0.85;
}

.course-card .tdc-thumb {
    transition: transform .5s cubic-bezier(.4, 0, .2, 1);
}

.course-card:hover .tdc-thumb {
    transform: scale(1.03);
}

.tdc-play-btn {
    width: 54px;
    height: 54px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.95);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 2;
    transition: transform .35s cubic-bezier(.34, 1.56, .64, 1), box-shadow .3s ease;
    box-shadow:
        0 4px 16px rgba(0, 0, 0, 0.18),
        0 0 0 4px rgba(255, 255, 255, 0.15);
}

.teacher-demo-card:hover .tdc-play-btn,
.course-card:hover .tdc-play-btn {
    transform: scale(1.12);
    box-shadow:
        0 8px 24px rgba(0, 0, 0, 0.22),
        0 0 0 6px rgba(255, 255, 255, 0.2);
}

.course-card.is-upcoming .tdc-play-btn {
    opacity: 0.7;
    transform: none;
}

.course-card.is-upcoming:hover .tdc-play-btn {
    transform: none;
    opacity: 0.85;
}

.tdc-duration {
    position: absolute;
    bottom: 10px;
    right: 10px;
    background: rgba(0, 0, 0, 0.6);
    color: white;
    font-size: 11px;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 5px;
    backdrop-filter: blur(4px);
    z-index: 2;
}

.tdc-body {
    padding: 14px 16px 16px;
}

.tdc-teacher-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
}

.tdc-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Outfit', sans-serif;
    font-size: 14px;
    font-weight: 700;
    color: white;
    flex-shrink: 0;
}

.tdc-teacher-info h4 {
    font-family: 'Outfit', sans-serif;
    font-size: 14px;
    font-weight: 700;
    color: #0a0f2c;
    margin-bottom: 1px;
}

.tdc-teacher-info p {
    font-size: 11px;
    color: #6b7280;
}

.tdc-subjects {
    display: flex;
    gap: 5px;
    flex-wrap: wrap;
    margin-bottom: 10px;
}

.tdc-subj-tag {
    display: inline-block;
    font-size: 10px;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 5px;
    text-transform: uppercase;
}

.tdc-desc {
    font-size: 12px;
    color: #6b7280;
    line-height: 1.5;
    margin-bottom: 12px;
}

.btn-watch-demo {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    padding: 9px;
    border-radius: 9px;
    background: #0a0f2c;
    color: white;
    border: none;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    font-family: 'DM Sans', sans-serif;
    transition: .2s;
}

.btn-watch-demo:hover {
    background: #1e293b;
}


/* ── WHAT WE COVER POINTS ── */

.sec-card {
    background: white;
    border: 1.5px solid #e8edf8;
    border-radius: 18px;
    padding: 22px;
    box-shadow: 0 4px 20px rgba(10, 15, 44, 0.06);
    margin-bottom: 0;
}

.sec-title {
    font-family: 'Outfit', sans-serif;
    font-size: 17px;
    font-weight: 700;
    color: #0a0f2c;
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 18px;
}

.sec-title .sl {
    width: 4px;
    height: 22px;
    border-radius: 2px;
    background: linear-gradient(180deg, #4338ca, #06b6d4);
}

.cover-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid #f1f5f9;
}

.cover-item:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.cover-item-icon {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.ci1 {
    background: #eef2ff;
    color: #4338ca;
}

.ci2 {
    background: #ecfdf5;
    color: #059669;
}

.ci3 {
    background: #fef3c7;
    color: #d97706;
}

.ci4 {
    background: #fff1f2;
    color: #e11d48;
}

.ci5 {
    background: #f0f9ff;
    color: #0284c7;
}

.ci6 {
    background: #f5f3ff;
    color: #7c3aed;
}

.cover-item-text h4 {
    font-size: 14px;
    font-weight: 600;
    color: #0a0f2c;
    margin-bottom: 2px;
}

.cover-item-text p {
    font-size: 12px;
    color: #6b7280;
}


/* sticky buy bar */

.sticky-buy {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: #0a0f2c;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    padding: 12px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    z-index: 99;
    flex-wrap: wrap;
    gap: 10px;
}

.sticky-buy-info {
    display: flex;
    align-items: center;
    gap: 14px;
}

.sticky-price {
    font-family: 'Outfit', sans-serif;
    font-size: 22px;
    font-weight: 800;
    color: #fff;
}

.sticky-price del {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.4);
    margin-left: 4px;
    font-weight: 400;
}

.sticky-off {
    background: #ecfdf5;
    color: #059669;
    font-size: 11px;
    font-weight: 700;
    padding: 3px 9px;
    border-radius: 6px;
}

.btn-sticky-buy {
    display: flex;
    align-items: center;
    gap: 7px;
    background: linear-gradient(135deg, #f59e0b, #f43f5e);
    color: white;
    border: none;
    border-radius: 10px;
    padding: 12px 28px;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    font-family: 'DM Sans', sans-serif;
    transition: .2s;
    text-decoration: none;
}

.btn-sticky-buy:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(245, 158, 11, 0.4);
    color: white;
}

.sticky-notify .sticky-buy-info {
    gap: 12px;
}

.sticky-coming-badge {
    position: static;
    font-size: 9px;
    padding: 5px 10px;
    flex-shrink: 0;
}

.sticky-notify-text {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.7);
}

.sticky-notify-text strong {
    color: #fff;
}

.btn-sticky-notify {
    background: linear-gradient(135deg, #fef3c7, #fde68a);
    color: #92400e;
}

.btn-sticky-notify:hover {
    box-shadow: 0 4px 14px rgba(245, 158, 11, 0.35);
    color: #78350f;
}

/* spacing for sticky bar */


/* body {
    padding-bottom: 72px;
} */


/**********************************************************BATCH BUY ***********************/


/* TOPBAR */

.by-topbar {
    background: #0a0f2c;
    padding: 0 20px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: sticky;
    top: 0;
    z-index: 100;
}

.by-topbar-left {
    display: flex;
    align-items: center;
    gap: 12px;
}

.btn-back {
    display: flex;
    align-items: center;
    gap: 6px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: rgba(255, 255, 255, 0.75);
    padding: 7px 14px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: .2s;
    font-family: 'DM Sans', sans-serif;
    text-decoration: none;
}

.btn-back:hover {
    background: rgba(255, 255, 255, 0.14);
    color: white;
}

.by-nav-title {
    font-family: 'Outfit', sans-serif;
    font-size: 14px;
    font-weight: 700;
    color: white;
}

/* Logged-in welcome card */
.by-welcome-card {
    border: 1px solid #dbeafe;
    border-radius: 16px;
    background: linear-gradient(135deg, #ffffff 0%, #f0f7ff 100%);
    box-shadow: 0 12px 32px rgba(37, 99, 235, 0.1);
    overflow: hidden;
}

.by-welcome-card .card-body {
    padding: 20px 24px;
}

.by-welcome-title {
    font-family: 'Outfit', sans-serif;
    font-size: clamp(18px, 2.5vw, 22px);
    font-weight: 700;
    color: #0a0f2c;
    margin-bottom: 6px;
}

.by-welcome-meta {
    font-size: 13px;
    color: #475569;
    margin-bottom: 8px;
}

.by-welcome-meta strong {
    color: #1d4ed8;
    font-weight: 600;
}

.by-welcome-msg {
    font-size: 13px;
    color: #334155;
    margin: 0;
}


/* HERO */

.by-hero {
    background: #0a0f2c;
    padding: 36px 0 40px;
    position: relative;
    overflow: hidden;
    text-align: center;
}

.by-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 70% 100% at 50% 50%, rgba(245, 158, 11, 0.12) 0%, transparent 65%);
}

.by-hero .container {
    position: relative;
    z-index: 2;
}

.by-hero h1 {
    font-family: 'Outfit', sans-serif;
    font-size: clamp(22px, 3vw, 36px);
    font-weight: 800;
    color: #fff;
    margin-bottom: 6px;
}

.by-hero h1 em {
    font-style: normal;
    background: linear-gradient(90deg, #f59e0b, #f43f5e);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.by-hero p {
    color: #94a3b8;
    font-size: 14px;
}


/* TIMER */


/* .offer-timer {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    background: rgba(244, 63, 94, 0.15);
    border: 1px solid rgba(244, 63, 94, 0.3);
    border-radius: 30px;
    padding: 8px 18px;
    margin-top: 16px;
    font-size: 13px;
    color: #fda4af;
} */

.timer-blocks {
    display: flex;
    gap: 8px;
    align-items: center;
}

.t-block {
    text-align: center;
}

.t-block strong {
    font-family: 'Outfit', sans-serif;
    font-size: 18px;
    font-weight: 800;
    color: #fff;
    display: block;
    line-height: 1;
}

.t-block span {
    font-size: 9px;
    color: rgba(255, 255, 255, 0.45);
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.t-sep {
    color: rgba(255, 255, 255, 0.3);
    font-size: 16px;
    font-weight: 700;
}


/* MAIN */

.by-main {
    padding: 36px 0 80px;
}


/* PLAN CARDS */

.plan-card {
    background: white;
    border: 2px solid #e8edf8;
    border-radius: 20px;
    overflow: hidden;
    transition: all .3s;
    height: 100%;
    position: relative;
}

.plan-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 18px 50px rgba(10, 15, 44, 0.12);
}

.plan-card.popular {
    border-color: #f59e0b;
    box-shadow: 0 8px 32px rgba(245, 158, 11, 0.15);
}

.popular-ribbon {
    position: absolute;
    top: 16px;
    right: -8px;
    background: linear-gradient(135deg, #f59e0b, #f43f5e);
    color: white;
    font-size: 11px;
    font-weight: 700;
    padding: 5px 16px 5px 12px;
    border-radius: 4px 0 0 4px;
    letter-spacing: 0.3px;
    text-transform: uppercase;
    z-index: 2;
    box-shadow: 0 2px 8px rgba(245, 158, 11, 0.4);
}

.popular-ribbon::after {
    content: "";
    position: absolute;
    right: -8px;
    top: 0;
    border-left: 8px solid #f43f5e;
    border-top: 14px solid transparent;
    border-bottom: 14px solid transparent;
}

.plan-header {
    padding: 24px 22px 20px;
    border-bottom: 1px solid #f1f5f9;
}

.plan-name {
    font-family: 'Outfit', sans-serif;
    font-size: 18px;
    font-weight: 700;
    color: #0a0f2c;
    margin-bottom: 4px;
}

.plan-tagline {
    font-size: 12px;
    color: #6b7280;
    margin-bottom: 16px;
}

.plan-price {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    margin-bottom: 4px;
}

.plan-price .price {
    font-family: 'Outfit', sans-serif;
    font-size: 32px;
    font-weight: 800;
    color: #0a0f2c;
    line-height: 1;
}

.plan-price del {
    font-size: 16px;
    color: #9ca3af;
    margin-bottom: 3px;
}

.plan-off {
    display: inline-block;
    background: #ecfdf5;
    color: #059669;
    font-size: 11px;
    font-weight: 700;
    padding: 3px 9px;
    border-radius: 6px;
    margin-top: 4px;
}

.plan-validity {
    font-size: 12px;
    color: #9ca3af;
    margin-top: 6px;
}

.plan-body {
    padding: 18px 22px 20px;
}

.plan-features {
    list-style: none;
    padding: 0;
    margin: 0 0 18px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.plan-features li {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    font-size: 13px;
    color: #374151;
}

.plan-features li .pf-icon {
    flex-shrink: 0;
    margin-top: 1px;
}

.plan-features li .pf-icon.yes {
    color: #10b981;
}

.plan-features li .pf-icon.no {
    color: #d1d5db;
}

.plan-features li.feature-disabled {
    opacity: 0.85;
}

.plan-features li .feature-cut {
    text-decoration: line-through;
    color: #9ca3af;
}

.btn-plan-buy {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    width: 100%;
    padding: 13px;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 700;
    border: none;
    cursor: pointer;
    font-family: 'DM Sans', sans-serif;
    transition: all .25s;
    text-decoration: none;
}

.btn-plan-buy.basic {
    background: #0a0f2c;
    color: white;
}

.btn-plan-buy.basic:hover {
    background: #1e293b;
    color: white;
}

.btn-plan-buy.popular-btn {
    background: linear-gradient(135deg, #f59e0b, #f43f5e);
    color: white;
}

.btn-plan-buy.popular-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(245, 158, 11, 0.4);
    color: white;
}

.btn-plan-buy.premium {
    background: linear-gradient(135deg, #4338ca, #6366f1);
    color: white;
}

.btn-plan-buy.premium:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(67, 56, 202, 0.4);
    color: white;
}


/* WHAT WE UPLOAD */

.upload-card {
    background: white;
    border: 1.5px solid #e8edf8;
    border-radius: 18px;
    padding: 24px;
    box-shadow: 0 4px 20px rgba(10, 15, 44, 0.06);
}

.upload-title {
    font-family: 'Outfit', sans-serif;
    font-size: 18px;
    font-weight: 700;
    color: #0a0f2c;
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 20px;
}

.upload-title .sl {
    width: 4px;
    height: 22px;
    border-radius: 2px;
    background: linear-gradient(180deg, #4338ca, #06b6d4);
}

.upload-item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 14px;
    border: 1.5px solid #e8edf8;
    border-radius: 12px;
    margin-bottom: 10px;
    transition: .2s;
}

.upload-item:hover {
    border-color: rgba(67, 56, 202, 0.25);
    background: #fafbff;
}

.upload-item:last-child {
    margin-bottom: 0;
}

.ui-icon {
    width: 42px;
    height: 42px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.ui1 {
    background: #eef2ff;
    color: #4338ca;
}

.ui2 {
    background: #ecfdf5;
    color: #059669;
}

.ui3 {
    background: #fef3c7;
    color: #d97706;
}

.ui4 {
    background: #fff1f2;
    color: #e11d48;
}

.ui5 {
    background: #f0f9ff;
    color: #0284c7;
}

.ui6 {
    background: #f5f3ff;
    color: #7c3aed;
}

.ui-text h4 {
    font-size: 14px;
    font-weight: 600;
    color: #0a0f2c;
    margin-bottom: 2px;
}

.ui-text p {
    font-size: 12px;
    color: #6b7280;
}

.ui-count {
    margin-left: auto;
    flex-shrink: 0;
    font-family: 'Outfit', sans-serif;
    font-size: 16px;
    font-weight: 800;
    color: #4338ca;
}


/* GUARANTEE STRIP */

.guarantee-strip {
    background: linear-gradient(135deg, #ecfdf5, #d1fae5);
    border: 1.5px solid rgba(16, 185, 129, 0.25);
    border-radius: 14px;
    padding: 16px 20px;
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    margin-top: 20px;
}

.gs-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: #10b981;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    flex-shrink: 0;
}

.gs-text h4 {
    font-family: 'Outfit', sans-serif;
    font-size: 14px;
    font-weight: 700;
    color: #0a0f2c;
    margin-bottom: 2px;
}

.gs-text p {
    font-size: 12px;
    color: #374151;
}


/* STATIC INFO PAGES */

.sp-hero {
    background: #0a0f2c;
    padding: 44px 0 48px;
    position: relative;
    overflow: hidden;
}

.sp-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 55% 70% at 8% 30%, rgba(37, 99, 235, 0.22), transparent 60%),
        radial-gradient(ellipse 40% 55% at 92% 70%, rgba(16, 185, 129, 0.16), transparent 55%);
}

.sp-hero .container {
    position: relative;
    z-index: 1;
}

.sp-hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(37, 99, 235, 0.16);
    border: 1px solid rgba(96, 165, 250, 0.28);
    color: #93c5fd;
    padding: 5px 14px;
    border-radius: 30px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin-bottom: 14px;
}

.sp-hero-badge span {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #60a5fa;
}

.sp-hero h1 {
    font-family: 'Outfit', sans-serif;
    font-size: clamp(28px, 4vw, 42px);
    font-weight: 800;
    color: #fff;
    line-height: 1.15;
    margin-bottom: 10px;
}

.sp-hero h1 em {
    font-style: normal;
    background: linear-gradient(90deg, #60a5fa, #34d399);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.sp-hero p {
    color: #94a3b8;
    font-size: 15px;
    margin: 0;
    max-width: 620px;
}

.sp-main {
    padding: 36px 0 72px;
    background: linear-gradient(180deg, #f8fafc 0%, #eef2ff 100%);
}

.sp-card,
.sp-side-card {
    background: #fff;
    border: 1.5px solid #e8edf8;
    border-radius: 20px;
    padding: 28px;
    box-shadow: 0 16px 36px rgba(15, 23, 42, 0.05);
}

.sp-card h3,
.sp-side-card h4 {
    font-family: 'Outfit', sans-serif;
    font-weight: 700;
    color: #0a0f2c;
}

.sp-lead {
    color: #64748b;
    margin-bottom: 22px;
}

.sp-section + .sp-section {
    margin-top: 22px;
    padding-top: 22px;
    border-top: 1px solid #edf2f7;
}

.sp-section h3 {
    font-size: 18px;
    margin-bottom: 8px;
}

.sp-section p {
    margin: 0;
    color: #475569;
    line-height: 1.75;
}

.sp-updated {
    margin-top: 24px;
    margin-bottom: 0;
    font-size: 13px;
    color: #94a3b8;
}

.sp-contact-list {
    display: grid;
    gap: 16px;
}

.sp-contact-item {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    padding: 16px;
    border-radius: 14px;
    background: #f8fafc;
    border: 1px solid #e8edf8;
}

.sp-contact-icon {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    background: #eff6ff;
    color: #2563eb;
    flex-shrink: 0;
}

.sp-contact-item strong {
    display: block;
    font-size: 14px;
    color: #0a0f2c;
    margin-bottom: 4px;
}

.sp-contact-item p,
.sp-contact-item span {
    margin: 0;
    color: #64748b;
    font-size: 14px;
    line-height: 1.6;
}

.sp-contact-item a {
    color: #2563eb;
    text-decoration: none;
}

.sp-contact-item a:hover {
    text-decoration: underline;
}

.sp-side-card p {
    color: #64748b;
    font-size: 14px;
    line-height: 1.7;
}

.sp-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    min-height: 46px;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    margin-bottom: 10px;
}

.sp-btn-primary {
    background: linear-gradient(135deg, #2563eb, #1d4ed8);
    color: #fff;
}

.sp-btn-outline {
    background: #fff;
    border: 1.5px solid #dbeafe;
    color: #2563eb;
}

.sp-side-links {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 16px;
    margin-top: 18px;
    padding-top: 18px;
    border-top: 1px solid #edf2f7;
}

.sp-side-links a {
    font-size: 13px;
    font-weight: 600;
    color: #2563eb;
    text-decoration: none;
}

.sp-accordion .accordion-item {
    border: 1px solid #e8edf8;
    border-radius: 12px !important;
    overflow: hidden;
    margin-bottom: 10px;
}

.sp-accordion .accordion-button {
    font-weight: 600;
    color: #0a0f2c;
    background: #f8fafc;
    box-shadow: none;
}

.sp-accordion .accordion-button:not(.collapsed) {
    background: #eff6ff;
    color: #1d4ed8;
}

.sp-accordion .accordion-body {
    color: #475569;
    line-height: 1.7;
}


/***** Map */


/* ══ HERO ══ */

.maps-hero {
    background: #0a0f2c;
    padding: 48px 0 52px;
    position: relative;
    overflow: hidden;
}

.maps-hero .col-lg-5 {
    overflow: visible;
}

.maps-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 55% 80% at 5% 50%, rgba(6, 182, 212, 0.22) 0%, transparent 65%), radial-gradient(ellipse 40% 60% at 90% 20%, rgba(16, 185, 129, 0.18) 0%, transparent 60%), radial-gradient(ellipse 30% 50% at 55% 90%, rgba(99, 102, 241, 0.15) 0%, transparent 60%);
}

.maps-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image: linear-gradient(rgba(255, 255, 255, 0.025) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.025) 1px, transparent 1px);
    background-size: 48px 48px;
}

.maps-hero .container {
    position: relative;
    z-index: 2;
}

.maps-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(6, 182, 212, 0.18);
    border: 1px solid rgba(6, 182, 212, 0.35);
    color: #67e8f9;
    padding: 5px 14px;
    border-radius: 30px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    margin-bottom: 14px;
}

.maps-badge span {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #06b6d4;
    animation: blink 1.4s infinite;
}

@keyframes blink {
    0%,
    100% {
        opacity: 1
    }
    50% {
        opacity: 0.2
    }
}

.maps-hero h1 {
    font-family: 'Outfit', sans-serif;
    font-size: clamp(26px, 4vw, 44px);
    font-weight: 800;
    color: #fff;
    line-height: 1.2;
    margin-bottom: 10px;
}

.maps-hero h1 em {
    font-style: normal;
    background: linear-gradient(90deg, #06b6d4, #10b981);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.maps-hero p {
    color: #94a3b8;
    font-size: 14px;
    max-width: 440px;
    margin-bottom: 22px;
}


/* 3D MAP VISUAL — portrait India hero (682×1024), NOT square 260×280 */

.india-map-3d {
    width: 300px;
    height: 450px;
    max-width: 100%;
    position: relative;
    margin: 0 auto;
    display: block;
    overflow: hidden;
    border-radius: 22px;
    animation: float 4s ease-in-out infinite;
    background: transparent;
}

.india-map-3d-img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center center;
    border-radius: 18px;
    filter: drop-shadow(0 16px 36px rgba(6, 182, 212, 0.35));
}

@media (max-width: 991.98px) {
    .india-map-3d {
        width: 240px;
        height: 360px;
    }
}

@media (max-width: 575.98px) {
    .india-map-3d {
        width: 200px;
        height: 300px;
    }
}

@keyframes float {
    0%,
    100% {
        transform: translateY(0)
    }
    50% {
        transform: translateY(-8px)
    }
}

.map-blob {
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #1e3a5f 0%, #0f4c75 40%, #1a6b3c 100%);
    border-radius: 38% 62% 55% 45% / 45% 40% 60% 55%;
    position: relative;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(6, 182, 212, 0.3), 0 0 0 1px rgba(6, 182, 212, 0.2);
}

.map-blob::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 35% 35%, rgba(255, 255, 255, 0.12) 0%, transparent 55%);
}

.map-label {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-family: 'Outfit', sans-serif;
    font-size: 18px;
    font-weight: 800;
    color: white;
    text-align: center;
    line-height: 1.3;
    z-index: 1;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}

.map-label span {
    display: block;
    font-size: 11px;
    font-weight: 500;
    color: #67e8f9;
    margin-top: 2px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

.map-pin {
    position: absolute;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #f59e0b;
    border: 2px solid white;
    box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.3);
    animation: pinpulse 2s ease-in-out infinite;
}

@keyframes pinpulse {
    0%,
    100% {
        box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.3)
    }
    50% {
        box-shadow: 0 0 0 8px rgba(245, 158, 11, 0.1)
    }
}


/* hero stats */

.maps-hero-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    margin-top: 22px;
}

.maps-stat {
    color: rgba(255, 255, 255, 0.6);
    font-size: 13px;
}

.maps-stat strong {
    color: #fff;
    font-family: 'Outfit', sans-serif;
    font-size: 20px;
    font-weight: 700;
    display: block;
}


/* ══ MAIN ══ */

.maps-main {
    padding: 44px 0 80px;
}


/* SECTION HEAD */

.sec-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}

.sec-head h2 {
    font-family: 'Outfit', sans-serif;
    font-size: 19px;
    font-weight: 700;
    color: #0a0f2c;
    display: flex;
    align-items: center;
    gap: 10px;
}

.sec-head h2 .line {
    width: 4px;
    height: 20px;
    border-radius: 2px;
    background: linear-gradient(180deg, #06b6d4, #10b981);
}

.view-all {
    font-size: 13px;
    font-weight: 600;
    color: #4338ca;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 4px;
}


/* BENEFITS CARDS */

.benefit-card {
    background: white;
    border: 1.5px solid #e8edf8;
    border-radius: 16px;
    padding: 20px;
    text-align: center;
    transition: all .3s;
    height: 100%;
}

.benefit-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 14px 40px rgba(6, 182, 212, 0.12);
    border-color: rgba(6, 182, 212, 0.3);
}

.benefit-icon {
    width: 52px;
    height: 52px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    margin: 0 auto 12px;
}

.benefit-title {
    font-family: 'Outfit', sans-serif;
    font-size: 14px;
    font-weight: 700;
    color: #0a0f2c;
    margin-bottom: 5px;
}

.benefit-sub {
    font-size: 12px;
    color: #6b7280;
    line-height: 1.5;
}


/* CATEGORY CARDS (States, Rivers, Parks) */

.cat-card {
    background: white;
    border: 1.5px solid #e8edf8;
    border-radius: 18px;
    overflow: hidden;
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
    text-decoration: none;
    display: flex;
    flex-direction: column;
    height: 100%;
    cursor: default;
}

.cat-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 14px 36px rgba(10, 15, 44, 0.1);
    border-color: #dbe3f0;
}

.cat-card-media {
    display: block;
    text-decoration: none;
    cursor: pointer;
    line-height: 0;
}

.cat-card-top {
    height: 148px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    padding: 0;
    background-size: cover;
    background-position: center;
}

.cat-card-top::before {
    content: "";
    position: absolute;
    inset: 0;
    background: inherit;
    filter: brightness(1.08);
    z-index: 0;
    pointer-events: none;
}

/* Thumbnail fills header; hide gradient overlay */
.cat-card-top.has-thumb::before {
    display: none !important;
    content: none !important;
}

.cat-card-top .map3d-icon-thumb {
    position: relative;
    z-index: 2;
    display: block;
    width: 100% !important;
    height: 148px !important;
    max-width: none;
    object-fit: cover;
    object-position: center;
    border-radius: 0 !important;
    box-shadow: none !important;
    background: #e8eef7;
}

.cat-card-top .map3d-icon-emoji {
    position: relative;
    z-index: 2;
    font-size: 40px;
    line-height: 1;
}

/* Default small thumbs elsewhere */
.map3d-icon-thumb {
    width: 56px;
    height: 56px;
    object-fit: cover;
    border-radius: 14px;
    position: relative;
    z-index: 1;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.18);
    background: rgba(255, 255, 255, 0.2);
}

.map3d-icon-thumb-sm {
    width: 22px;
    height: 22px;
    object-fit: cover;
    border-radius: 6px;
    vertical-align: middle;
}

.map3d-icon-thumb-lg {
    width: 120px;
    height: 120px;
    object-fit: cover;
    border-radius: 20px;
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.2);
}

.state-chip .map3d-icon-thumb-sm {
    margin-right: 2px;
}

.rct-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    inset: 0;
    z-index: 1;
    min-height: 0;
    padding: 0;
}

.rct-icon .map3d-icon-thumb {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 0;
    box-shadow: none;
    background: transparent;
}

.rct-icon .map3d-icon-emoji {
    font-size: 28px;
    line-height: 1;
    position: relative;
    z-index: 1;
}

.cat-card-body {
    padding: 14px 16px 16px;
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
}

.cat-card-title {
    font-family: 'Outfit', sans-serif;
    font-size: 15px;
    font-weight: 700;
    color: #0a0f2c;
    margin: 0 0 6px;
    line-height: 1.3;
}

.cat-card-title a {
    color: inherit;
    text-decoration: none;
    cursor: pointer;
}

.cat-card-title a:hover {
    color: #0284c7;
}

.cat-card-sub-wrap {
    margin-bottom: 12px;
}

.cat-card-sub {
    font-size: 12px;
    color: #6b7280;
    line-height: 1.55;
    margin: 0;
}

.cat-card-sub-wrap.is-collapsed .cat-card-sub {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    overflow: hidden;
}

.cat-card-more {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    margin-top: 6px;
    padding: 0;
    border: 0;
    background: none;
    color: #0284c7;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    font-family: 'Outfit', sans-serif;
}

.cat-card-more:hover {
    color: #0369a1;
}

.cat-card-more i,
.cat-card-more svg {
    transition: transform .2s ease;
}

.cat-card-sub-wrap.is-open .cat-card-more i,
.cat-card-sub-wrap.is-open .cat-card-more svg {
    transform: rotate(180deg);
}

.cat-card-footer {
    margin-top: auto;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.cat-card-count {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 20px;
    align-self: flex-start;
}

.btn-explore {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    padding: 10px;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 600;
    border: none;
    cursor: pointer;
    font-family: 'DM Sans', sans-serif;
    transition: .2s;
    text-decoration: none;
}

.btn-explore.cyan {
    background: linear-gradient(135deg, #0284c7, #06b6d4);
    color: white;
}

.btn-explore.cyan:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(6, 182, 212, 0.35);
    color: white;
}

.btn-explore.green {
    background: linear-gradient(135deg, #059669, #10b981);
    color: white;
}

.btn-explore.green:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.35);
    color: white;
}

.btn-explore.amber {
    background: linear-gradient(135deg, #d97706, #f59e0b);
    color: white;
}

.btn-explore.amber:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(245, 158, 11, 0.35);
    color: white;
}

.btn-explore.indigo {
    background: linear-gradient(135deg, #4338ca, #6366f1);
    color: white;
}

.btn-explore.indigo:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(67, 56, 202, 0.35);
    color: white;
}


/* STATES/UT GRID */

.state-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: white;
    border: 1.5px solid #e8edf8;
    border-radius: 10px;
    padding: 8px 12px;
    font-size: 12px;
    font-weight: 600;
    color: #374151;
    cursor: pointer;
    transition: .2s;
    text-decoration: none;
}

.state-chip:hover {
    background: #0a0f2c;
    color: white;
    border-color: #0a0f2c;
}

.state-chip .s-num {
    font-size: 10px;
    color: #9ca3af;
    font-weight: 500;
}

.state-chip:hover .s-num {
    color: rgba(255, 255, 255, 0.5);
}


/* NATIONAL PARKS */

.park-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    border-radius: 12px;
    background: #f8faff;
    border: 1.5px solid #e8edf8;
    margin-bottom: 8px;
    cursor: pointer;
    transition: .2s;
    text-decoration: none;
}

.park-row:hover {
    background: #eef2ff;
    border-color: rgba(99, 102, 241, 0.3);
}

.park-row-left {
    display: flex;
    align-items: center;
    gap: 12px;
}

.park-num {
    width: 28px;
    height: 28px;
    border-radius: 7px;
    background: #eef2ff;
    color: #4338ca;
    font-size: 12px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Outfit', sans-serif;
    flex-shrink: 0;
}

.park-name {
    font-size: 13px;
    font-weight: 600;
    color: #0a0f2c;
}

.park-state {
    font-size: 11px;
    color: #9ca3af;
}

.park-badge {
    font-size: 10px;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 5px;
    background: #ecfdf5;
    color: #059669;
}


/*********************************************************/


/* ─── CATEGORY SIDEBAR ─── */

.cat-sidebar1 {
    background: white;
    border: 1.5px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    position: sticky;
    top: 20px;
    box-shadow: var(--shadow-card);
}

.cat-sidebar-title1 {
    font-family: 'Outfit', sans-serif;
    font-size: 14px;
    font-weight: 700;
    color: var(--navy);
    padding: 16px 18px 14px;
    border-bottom: 1.5px solid var(--border);
    display: flex;
    align-items: center;
    gap: 8px;
}

.cat-sidebar-title1 .line1 {
    width: 4px;
    height: 18px;
    border-radius: 2px;
    background: linear-gradient(180deg, var(--indigo), var(--cyan));
    flex-shrink: 0;
}

.cat-card1 {
    background: white;
    border-bottom: 1px solid var(--border);
    padding: 13px 18px;
    text-align: left;
    cursor: pointer;
    transition: all .25s;
    text-decoration: none;
    color: var(--text-1);
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 12px;
    width: 100%;
}

.cat-card1:last-child {
    border-bottom: none;
}

.cat-card1:hover {
    background: #f8faff;
    color: var(--indigo);
}

.cat-card1.active {
    background: #eef2ff;
    color: var(--indigo);
    border-left: 3px solid var(--indigo);
}

.cat-card-icon1 {
    width: 40px;
    height: 40px;
    border-radius: 11px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    transition: transform .25s;
    flex-shrink: 0;
}

.cat-card1:hover .cat-card-icon1 {
    transform: scale(1.08);
}

.cat-card-icon1.c1 {
    background: #eef2ff;
    color: #4338ca;
}

.cat-card-icon1.c2 {
    background: #fef3c7;
    color: #d97706;
}

.cat-card-icon1.c3 {
    background: #ecfdf5;
    color: #059669;
}

.cat-card-icon1.c4 {
    background: #fff1f2;
    color: #e11d48;
}

.cat-card-icon1.c5 {
    background: #f0f9ff;
    color: #0284c7;
}

.cat-card-icon1.c6 {
    background: #f5f3ff;
    color: #7c3aed;
}

.cat-card-icon1.c7 {
    background: #fef9c3;
    color: #b45309;
}

.cat-card-icon1.c8 {
    background: #f0fdf4;
    color: #16a34a;
}

.cat-card-name1 {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-1);
    flex: 1;
}

.cat-card1:hover .cat-card-name1,
.cat-card1.active .cat-card-name1 {
    color: var(--indigo);
}

.cat-card-count1 {
    font-size: 11px;
    color: var(--text-3);
    font-weight: 500;
    background: #f0f4ff;
    padding: 2px 8px;
    border-radius: 20px;
    flex-shrink: 0;
}

/* Checkout & Order Success */
.co-main {
    padding-bottom: 80px;
}

.co-card {
    background: #fff;
    border: 1px solid #e8edf8;
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 8px 28px rgba(10, 15, 44, 0.06);
}

.co-card-head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 16px 20px;
    border-bottom: 1px solid #f1f5f9;
    background: linear-gradient(135deg, #f8fafc, #fff);
}

.co-card-head h3 {
    font-family: 'Outfit', sans-serif;
    font-size: 16px;
    font-weight: 700;
    color: #0a0f2c;
    margin: 0;
}

.co-card-body {
    padding: 20px;
}

.co-label {
    font-size: 12px;
    font-weight: 600;
    color: #6b7280;
    margin-bottom: 6px;
}

.co-input {
    background: #f8fafc;
    border-color: #e2e8f0;
    font-size: 14px;
}

.co-hint {
    font-size: 12px;
    color: #6b7280;
    margin-top: 14px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.co-hint a {
    color: #4338ca;
    font-weight: 600;
}

.co-batch-row {
    display: flex;
    gap: 16px;
    align-items: flex-start;
}

.co-batch-thumb {
    width: 120px;
    height: 80px;
    object-fit: cover;
    border-radius: 12px;
    border: 1px solid #e8edf8;
    flex-shrink: 0;
}

.co-batch-name {
    font-family: 'Outfit', sans-serif;
    font-size: 17px;
    font-weight: 700;
    color: #0a0f2c;
}

.co-batch-cat {
    font-size: 12px;
    color: #6b7280;
    margin-top: 4px;
}

.co-batch-plan {
    font-size: 13px;
    color: #374151;
    margin-top: 8px;
}

.co-summary {
    background: #fff;
    border: 2px solid #0a0f2c;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 12px 40px rgba(10, 15, 44, 0.1);
    position: sticky;
    top: 24px;
}

.co-summary-head {
    background: linear-gradient(135deg, #0a0f2c, #1e3a8a);
    color: #fff;
    padding: 18px 22px;
    font-family: 'Outfit', sans-serif;
    font-size: 16px;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 10px;
}

.co-summary-body {
    padding: 20px 22px;
}

.co-line {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    font-size: 13px;
    color: #374151;
    margin-bottom: 10px;
}

.co-line span:last-child {
    font-weight: 600;
    text-align: right;
}

.co-discount span:last-child {
    color: #059669;
}

.co-divider {
    height: 1px;
    background: #e8edf8;
    margin: 14px 0;
}

.co-total {
    font-size: 16px;
    font-weight: 700;
    color: #0a0f2c;
}

.co-total span:last-child {
    color: #f59e0b;
    font-size: 20px;
}

.co-summary-foot {
    padding: 0 22px 22px;
}

.co-pay-note {
    font-size: 11px;
    color: #6b7280;
    text-align: center;
    margin: 12px 0 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.co-success-card {
    background: #fff;
    border-radius: 24px;
    border: 1px solid #e8edf8;
    box-shadow: 0 20px 60px rgba(10, 15, 44, 0.1);
    padding: 40px 32px;
    text-align: center;
}

.co-success-icon {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: linear-gradient(135deg, #10b981, #059669);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
    box-shadow: 0 8px 24px rgba(16, 185, 129, 0.35);
}

.co-success-card h1 {
    font-family: 'Outfit', sans-serif;
    font-size: 26px;
    font-weight: 800;
    color: #0a0f2c;
    margin-bottom: 8px;
}

.co-success-card > p {
    color: #6b7280;
    font-size: 14px;
    margin-bottom: 28px;
}

.co-success-details {
    text-align: left;
    background: #f8fafc;
    border-radius: 14px;
    padding: 20px;
    margin-bottom: 24px;
}

.co-success-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid #e8edf8;
    font-size: 14px;
}

.co-success-row:last-child {
    border-bottom: none;
}

.co-success-row span:first-child {
    color: #6b7280;
}

.co-success-thumb {
    max-width: 200px;
    border-radius: 12px;
    border: 1px solid #e8edf8;
}

.co-success-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: center;
}

.co-success-actions .btn-plan-buy {
    min-width: 180px;
    justify-content: center;
}

@media (max-width: 991px) {
    .co-summary {
        position: static;
    }

    .co-batch-row {
        flex-direction: column;
    }

    .co-batch-thumb {
        width: 100%;
        height: 140px;
    }
}


/* ─── E-BOOK BUY PAGE ─── */

.ebuy-topbar-trust {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.55);
}

.ebuy-hero {
    background: linear-gradient(180deg, #f8fafc 0%, #fff 100%);
    padding: 18px 0 8px;
    border-bottom: 1px solid #eef2f8;
}

.ebuy-breadcrumb {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    font-size: 13px;
    color: #64748b;
}

.ebuy-breadcrumb a {
    color: #4338ca;
    text-decoration: none;
    font-weight: 500;
}

.ebuy-breadcrumb a:hover {
    text-decoration: underline;
}

.ebuy-breadcrumb span {
    color: #0f172a;
    font-weight: 600;
}

.ebuy-main {
    padding: 36px 0 80px;
    background: linear-gradient(180deg, #fff 0%, #f8fafc 100%);
}

.ebuy-showcase {
    background: #fff;
    border: 1px solid #e8edf8;
    border-radius: 24px;
    overflow: hidden;
    box-shadow: 0 12px 40px rgba(10, 15, 44, 0.06);
}

.ebuy-cover-wrap {
    position: relative;
    padding: 32px 32px 0;
}

.ebuy-cover {
    position: relative;
    height: 280px;
    border-radius: 20px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 20px 50px rgba(10, 15, 44, 0.18);
}

.ebuy-cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.ebuy-cover-fallback {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    color: rgba(255, 255, 255, 0.92);
    font-family: 'Outfit', sans-serif;
    font-weight: 700;
    font-size: 15px;
    letter-spacing: 0.3px;
}

.ebuy-cover-badge {
    position: absolute;
    top: 16px;
    left: 16px;
    background: rgba(255, 255, 255, 0.95);
    color: #0a0f2c;
    font-size: 11px;
    font-weight: 800;
    padding: 6px 12px;
    border-radius: 20px;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
}

.ebuy-cover-glow {
    position: absolute;
    inset: auto 10% -18px;
    height: 36px;
    background: radial-gradient(ellipse at center, rgba(67, 56, 202, 0.22) 0%, transparent 70%);
    filter: blur(8px);
    pointer-events: none;
}

.ebuy-info {
    padding: 28px 32px 32px;
}

.ebuy-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 14px;
}

.ebuy-tag {
    display: inline-flex;
    align-items: center;
    background: #eef2ff;
    color: #4338ca;
    font-size: 11px;
    font-weight: 700;
    padding: 5px 12px;
    border-radius: 20px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.ebuy-tag.outline {
    background: #fff;
    border: 1px solid #e2e8f0;
    color: #475569;
}

.ebuy-title {
    font-family: 'Outfit', sans-serif;
    font-size: clamp(24px, 3vw, 32px);
    font-weight: 800;
    color: #0a0f2c;
    line-height: 1.25;
    margin-bottom: 16px;
}

.ebuy-meta-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px 22px;
    margin-bottom: 18px;
    padding-bottom: 18px;
    border-bottom: 1px solid #f1f5f9;
}

.ebuy-rating {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    color: #64748b;
}

.ebuy-rating i {
    color: #f59e0b;
    fill: #f59e0b;
}

.ebuy-rating strong {
    color: #0f172a;
    font-weight: 700;
}

.ebuy-meta-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: #64748b;
    font-weight: 500;
}

.ebuy-desc {
    font-size: 15px;
    line-height: 1.7;
    color: #475569;
    margin-bottom: 24px;
}

.ebuy-specs {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
    margin-bottom: 28px;
}

.ebuy-spec {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px;
    background: #f8fafc;
    border: 1px solid #eef2f8;
    border-radius: 14px;
}

.ebuy-spec-icon {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.ebuy-spec-icon.si-1 {
    background: #eef2ff;
    color: #4338ca;
}

.ebuy-spec-icon.si-2 {
    background: #ecfdf5;
    color: #059669;
}

.ebuy-spec-icon.si-3 {
    background: #fff7ed;
    color: #ea580c;
}

.ebuy-spec-icon.si-4 {
    background: #fdf2f8;
    color: #db2777;
}

.ebuy-spec strong {
    display: block;
    font-size: 13px;
    font-weight: 700;
    color: #0f172a;
    margin-bottom: 2px;
}

.ebuy-spec span {
    font-size: 12px;
    color: #64748b;
}

.ebuy-includes h3 {
    font-family: 'Outfit', sans-serif;
    font-size: 16px;
    font-weight: 700;
    color: #0a0f2c;
    margin-bottom: 12px;
}

.ebuy-includes ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: 10px;
}

.ebuy-includes li {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    color: #334155;
    font-weight: 500;
}

.ebuy-includes li i {
    color: #059669;
    flex-shrink: 0;
}

.ebuy-purchase-card {
    position: sticky;
    top: 24px;
    background: #fff;
    border: 1px solid #e8edf8;
    border-radius: 24px;
    padding: 26px;
    box-shadow: 0 16px 48px rgba(10, 15, 44, 0.08);
}

.ebuy-purchase-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 22px;
}

.ebuy-purchase-label {
    font-family: 'Outfit', sans-serif;
    font-size: 18px;
    font-weight: 800;
    color: #0a0f2c;
}

.ebuy-purchase-type {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: #64748b;
    background: #f1f5f9;
    padding: 5px 10px;
    border-radius: 20px;
}

.ebuy-price-block {
    padding: 20px;
    background: linear-gradient(135deg, #faf5ff 0%, #eef2ff 100%);
    border: 1px solid #e0e7ff;
    border-radius: 18px;
    margin-bottom: 14px;
}

.ebuy-price-main {
    display: flex;
    align-items: flex-start;
    line-height: 1;
    margin-bottom: 8px;
}

.ebuy-price-currency {
    font-family: 'Outfit', sans-serif;
    font-size: 22px;
    font-weight: 700;
    color: #4338ca;
    margin-top: 8px;
    margin-right: 2px;
}

.ebuy-price-amount {
    font-family: 'Outfit', sans-serif;
    font-size: 44px;
    font-weight: 800;
    color: #0a0f2c;
}

.ebuy-price-mrp {
    font-size: 14px;
    color: #64748b;
    margin-bottom: 10px;
}

.ebuy-price-mrp del {
    color: #94a3b8;
}

.ebuy-save-badge {
    display: inline-block;
    background: linear-gradient(135deg, #059669, #10b981);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    padding: 6px 12px;
    border-radius: 20px;
}

.ebuy-price-note {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: #64748b;
    margin-bottom: 20px;
}

.ebuy-purchase-features {
    list-style: none;
    padding: 0;
    margin: 0 0 22px;
    display: grid;
    gap: 10px;
}

.ebuy-purchase-features li {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    color: #334155;
    font-weight: 500;
}

.ebuy-purchase-features li i {
    color: #4338ca;
    flex-shrink: 0;
}

.ebuy-cta {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    width: 100%;
    padding: 16px 20px;
    border-radius: 16px;
    background: linear-gradient(135deg, #4338ca 0%, #7c3aed 100%);
    color: #fff;
    text-decoration: none;
    box-shadow: 0 10px 30px rgba(67, 56, 202, 0.35);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    margin-bottom: 20px;
}

.ebuy-cta:hover {
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 14px 36px rgba(67, 56, 202, 0.42);
}

.ebuy-cta-main {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: 'Outfit', sans-serif;
    font-size: 17px;
    font-weight: 800;
}

.ebuy-cta-sub {
    font-size: 12px;
    opacity: 0.85;
    font-weight: 500;
}

.ebuy-trust-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-bottom: 18px;
}

.ebuy-trust-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    text-align: center;
    padding: 12px 8px;
    background: #f8fafc;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 600;
    color: #475569;
}

.ebuy-trust-item i {
    color: #4338ca;
}

.ebuy-guarantee {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px;
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
    border-radius: 14px;
}

.ebuy-guarantee i {
    color: #059669;
    flex-shrink: 0;
    margin-top: 2px;
}

.ebuy-guarantee strong {
    display: block;
    font-size: 13px;
    color: #065f46;
    margin-bottom: 4px;
}

.ebuy-guarantee p {
    font-size: 12px;
    color: #047857;
    margin: 0;
    line-height: 1.5;
}

@media (max-width: 991px) {
    .ebuy-purchase-card {
        position: static;
    }

    .ebuy-cover {
        height: 220px;
    }

    .ebuy-info {
        padding: 22px 20px 24px;
    }

    .ebuy-cover-wrap {
        padding: 20px 20px 0;
    }
}

@media (max-width: 576px) {
    .ebuy-specs {
        grid-template-columns: 1fr;
    }

    .ebuy-trust-grid {
        grid-template-columns: 1fr;
    }

    .ebuy-price-amount {
        font-size: 36px;
    }
}

/* ── EXAM UPDATES: category filter chips ── */
.filter-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: white;
    border: 1.5px solid #e8edf8;
    color: #374151;
    padding: 7px 16px;
    border-radius: 30px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all .25s;
}

.filter-chip:hover,
.filter-chip.active {
    background: #0a0f2c;
    border-color: #0a0f2c;
    color: white;
}

.filter-chip .chip-count {
    background: rgba(0, 0, 0, 0.08);
    font-size: 11px;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: 20px;
}

.filter-chip.active .chip-count {
    background: rgba(255, 255, 255, 0.15);
}

.ticker-item {
    color: inherit;
}

/* ── NOTIFICATION DETAIL PAGE ── */
.nd-hero {
    background: linear-gradient(135deg, #0a0f2c 0%, #1e1b4b 55%, #312e81 100%);
    padding: 48px 0 56px;
    color: white;
    position: relative;
    overflow: hidden;
}

.nd-breadcrumb {
    font-size: 13px;
    margin-bottom: 18px;
    color: rgba(255, 255, 255, 0.65);
}

.nd-breadcrumb a {
    color: rgba(255, 255, 255, 0.85);
    text-decoration: none;
}

.nd-breadcrumb a:hover {
    color: #fff;
}

.nd-breadcrumb .sep {
    margin: 0 8px;
    opacity: 0.5;
}

.nd-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 16px;
}

.nd-hero h1 {
    font-family: 'Outfit', sans-serif;
    font-size: clamp(24px, 4vw, 36px);
    font-weight: 700;
    line-height: 1.25;
    margin-bottom: 12px;
}

.nd-org {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: rgba(255, 255, 255, 0.75);
    font-size: 14px;
}

.nd-main {
    padding: 40px 0 60px;
    background: #f8fafc;
}

.nd-info-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 12px;
}

.nd-info-box {
    background: white;
    border: 1.5px solid #e8edf8;
    border-radius: 14px;
    padding: 16px;
}

.nd-info-box span {
    display: block;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: #9ca3af;
    font-weight: 600;
    margin-bottom: 6px;
}

.nd-info-box strong {
    font-family: 'Outfit', sans-serif;
    font-size: 16px;
    color: #0a0f2c;
}

.nd-content-card {
    background: white;
    border: 1.5px solid #e8edf8;
    border-radius: 18px;
    padding: 24px;
}

.nd-content-card h2 {
    font-family: 'Outfit', sans-serif;
    font-size: 18px;
    font-weight: 700;
    color: #0a0f2c;
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
}

.nd-content-card h2 .line {
    width: 4px;
    height: 18px;
    border-radius: 2px;
    background: linear-gradient(180deg, #f43f5e, #f59e0b);
}

.nd-description {
    color: #374151;
    font-size: 15px;
    line-height: 1.75;
}

.nd-action-card {
    background: white;
    border: 1.5px solid #e8edf8;
    border-radius: 18px;
    padding: 24px;
}

.nd-action-card h3 {
    font-family: 'Outfit', sans-serif;
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 16px;
    color: #0a0f2c;
}

.nd-action-card .btn-info,
.nd-action-card .btn-apply {
    justify-content: center;
    width: 100%;
    padding: 12px 16px;
    font-size: 14px;
}

.nd-action-card .btn-outline-secondary {
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    padding: 10px 16px;
}