/* =========================================================
           BELIEVERS DASHBOARD - SCOPED STYLES
        ========================================================= */

        .believers-dashboard {
            --bd-primary: #142b67;
            --bd-primary-dark: #071638;
            --bd-secondary: #254f9e;
            --bd-gold: #f6bd42;
            --bd-orange: #ff8c42;
            --bd-green: #27b67a;
            --bd-red: #ef5c68;
            --bd-purple: #8466e8;
            --bd-cyan: #31a9c9;
            --bd-text: #182442;
            --bd-muted: #6d7893;
            --bd-light: #f5f8ff;
            --bd-white: #ffffff;

            position: relative;
            min-height: 100vh;
            overflow: hidden;
            padding: 40px 0;
            font-family: "Nunito", sans-serif;
            background:
                radial-gradient(circle at 10% 10%, rgba(246, 189, 66, 0.16), transparent 25%),
                radial-gradient(circle at 92% 12%, rgba(49, 169, 201, 0.15), transparent 28%),
                radial-gradient(circle at 75% 90%, rgba(132, 102, 232, 0.14), transparent 26%),
                linear-gradient(135deg, #edf4ff 0%, #fffaf0 48%, #f1f6ff 100%);
        }

        .believers-dashboard *,
        .believers-dashboard *::before,
        .believers-dashboard *::after {
            box-sizing: border-box;
        }

        .believers-dashboard a {
            text-decoration: none;
        }

        /* Background decorative elements */

        .believers-dashboard .bd-bg-shape {
            position: absolute;
            border-radius: 50%;
            
            filter: blur(3px);
            animation: bdFloat 8s ease-in-out infinite;
        }

        .believers-dashboard .bd-bg-shape-one {
            width: 250px;
            height: 250px;
            top: -100px;
            left: -70px;
            background: linear-gradient(
                135deg,
                rgba(20, 43, 103, 0.15),
                rgba(246, 189, 66, 0.18)
            );
        }

        .believers-dashboard .bd-bg-shape-two {
            width: 340px;
            height: 340px;
            right: -180px;
            top: 18%;
            background: linear-gradient(
                135deg,
                rgba(49, 169, 201, 0.14),
                rgba(132, 102, 232, 0.14)
            );
            animation-delay: -2s;
        }

        .believers-dashboard .bd-bg-shape-three {
            width: 220px;
            height: 220px;
            bottom: -110px;
            left: 32%;
            background: linear-gradient(
                135deg,
                rgba(255, 140, 66, 0.15),
                rgba(239, 92, 104, 0.12)
            );
            animation-delay: -4s;
        }

        .believers-dashboard .bd-dots {
            position: absolute;
            width: 180px;
            height: 180px;
            opacity: 0.34;
            
            background-image: radial-gradient(
                rgba(20, 43, 103, 0.42) 1.7px,
                transparent 1.7px
            );
            background-size: 18px 18px;
        }

        .believers-dashboard .bd-dots-one {
            top: 45px;
            right: 5%;
        }

        .believers-dashboard .bd-dots-two {
            bottom: 45px;
            left: 4%;
        }

        /* Main dashboard shell */

        .believers-dashboard .bd-shell {
            position: relative;
            z-index: 2;
            display: flex;
            min-height: 850px;
            overflow: hidden;
            border: 1px solid rgba(255, 255, 255, 0.8);
            border-radius: 30px;
            background: rgba(255, 255, 255, 0.7);
            box-shadow:
                0 30px 80px rgba(13, 35, 83, 0.17),
                inset 0 1px 0 rgba(255, 255, 255, 0.9);
            backdrop-filter: blur(16px);
        }

        /* Sidebar */

        .believers-dashboard .bd-sidebar {
            position: relative;
            flex: 0 0 270px;
            width: 270px;
            padding: 28px 20px;
            overflow: hidden;
            color: var(--bd-white);
            background:
                linear-gradient(
                    180deg,
                    rgba(18, 43, 103, 0.98),
                    rgba(6, 20, 51, 0.98)
                );
            transition: transform 0.35s ease;
        }

        .believers-dashboard .bd-sidebar::before {
            content: "";
            position: absolute;
            width: 240px;
            height: 240px;
            top: -110px;
            right: -100px;
            border-radius: 50%;
            background: rgba(246, 189, 66, 0.13);
        }

        .believers-dashboard .bd-sidebar::after {
            content: "";
            position: absolute;
            width: 210px;
            height: 210px;
            bottom: -110px;
            left: -100px;
            border-radius: 50%;
            background: rgba(49, 169, 201, 0.12);
        }

        .believers-dashboard .bd-brand,
        .believers-dashboard .bd-user-box,
        .believers-dashboard .bd-nav,
        .believers-dashboard .bd-sidebar-help {
            position: relative;
            z-index: 2;
        }

        .believers-dashboard .bd-brand {
            display: flex;
            align-items: center;
            gap: 12px;
            margin-bottom: 30px;
        }

        .believers-dashboard .bd-brand-icon {
            display: grid;
            place-items: center;
            width: 52px;
            height: 52px;
            flex-shrink: 0;
            border: 1px solid rgba(255, 255, 255, 0.25);
            border-radius: 17px;
            color: var(--bd-primary-dark);
            font-size: 24px;
            background: linear-gradient(135deg, #ffe09a, var(--bd-gold));
            box-shadow: 0 10px 25px rgba(246, 189, 66, 0.28);
        }

        .believers-dashboard .bd-brand-title {
            margin: 0;
            color: #ffffff;
            font-family: "Archivo Black", sans-serif;
            font-size: 17px;
            letter-spacing: 0.3px;
        }

        .believers-dashboard .bd-brand-subtitle {
            display: block;
            margin-top: 3px;
            color: rgba(255, 255, 255, 0.62);
            font-size: 11px;
            font-weight: 700;
            letter-spacing: 1.3px;
            text-transform: uppercase;
        }

        .believers-dashboard .bd-user-box {
            padding: 18px 14px;
            border: 1px solid rgba(255, 255, 255, 0.13);
            border-radius: 20px;
            text-align: left;
            background: rgba(255, 255, 255, 0.08);
            box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12);
        }

        .believers-dashboard .bd-user-avatar {
            position: relative;
            width: 76px;
            height: 76px;
            margin: 0 auto 12px;
            padding: 4px;
            border-radius: 50%;
            background: conic-gradient(
                var(--bd-gold),
                var(--bd-cyan),
                var(--bd-purple),
                var(--bd-gold)
            );
        }

        .believers-dashboard .bd-user-avatar img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            border: 4px solid var(--bd-primary-dark);
            border-radius: 50%;
        }

        .believers-dashboard .bd-online-dot {
            position: absolute;
            right: 4px;
            bottom: 7px;
            width: 14px;
            height: 14px;
            border: 3px solid var(--bd-primary-dark);
            border-radius: 50%;
            background: #35dd8a;
            box-shadow: 0 0 12px rgba(53, 221, 138, 0.8);
        }

        .believers-dashboard .bd-user-name {
            margin: 0 0 3px;
            color: #ffffff;
            font-size: 16px;
            font-weight: 800;
        }

        .believers-dashboard .bd-user-role {
            margin: 0;
            color: rgba(255, 255, 255, 0.64);
            font-size: 12px;
            font-weight: 600;
        }

        .believers-dashboard .bd-menu-label {
            margin: 0 0 10px 12px;
            color: rgba(255, 255, 255, 0.4);
            font-size: 10px;
            font-weight: 800;
            letter-spacing: 1.7px;
            text-transform: uppercase;
        }

        .believers-dashboard .bd-nav {
            display: flex;
            flex-direction: column;
            gap: 7px;
        }

        .believers-dashboard .bd-nav-link {
            position: relative;
            display: flex;
            align-items: center;
            gap: 13px;
            min-height: 48px;
            padding: 11px 15px;
            overflow: hidden;
            border-radius: 14px;
            color: rgba(255, 255, 255, 0.72);
            font-size: 14px;
            font-weight: 700;
            transition: 0.3s ease;
        }

        .believers-dashboard .bd-nav-link::before {
            content: "";
            position: absolute;
            inset: 0;
            opacity: 0;
            background: linear-gradient(
                90deg,
                rgba(246, 189, 66, 0.18),
                rgba(255, 255, 255, 0.07)
            );
            transition: opacity 0.3s ease;
        }

        .believers-dashboard .bd-nav-link i,
        .believers-dashboard .bd-nav-link span,
        .believers-dashboard .bd-nav-link small {
            position: relative;
            z-index: 2;
        }

        .believers-dashboard .bd-nav-link i {
            width: 23px;
            color: rgba(255, 255, 255, 0.65);
            font-size: 17px;
            text-align: center;
            transition: 0.3s ease;
        }

        .believers-dashboard .bd-nav-link small {
            display: grid;
            place-items: center;
            width: 22px;
            height: 22px;
            margin-left: auto;
            border-radius: 50%;
            color: #ffffff;
            font-size: 10px;
            background: var(--bd-red);
        }

        .believers-dashboard .bd-nav-link:hover,
        .believers-dashboard .bd-nav-link.active {
            color: #ffffff;
            transform: translateX(4px);
        }

        .believers-dashboard .bd-nav-link:hover::before,
        .believers-dashboard .bd-nav-link.active::before {
            opacity: 1;
        }

        .believers-dashboard .bd-nav-link:hover i,
        .believers-dashboard .bd-nav-link.active i {
            color: var(--bd-gold);
            transform: scale(1.08);
        }

        .believers-dashboard .bd-nav-link.active {
            border: 1px solid rgba(246, 189, 66, 0.25);
            box-shadow: inset 4px 0 0 var(--bd-gold);
        }

        .believers-dashboard .bd-sidebar-help {
            margin-top: 25px;
            padding: 16px;
            border: 1px solid rgba(246, 189, 66, 0.23);
            border-radius: 18px;
            background: linear-gradient(
                135deg,
                rgba(246, 189, 66, 0.13),
                rgba(255, 255, 255, 0.05)
            );
        }

        .believers-dashboard .bd-sidebar-help i {
            margin-bottom: 10px;
            color: var(--bd-gold);
            font-size: 23px;
        }

        .believers-dashboard .bd-sidebar-help h6 {
            margin-bottom: 5px;
            color: #ffffff;
            font-weight: 800;
        }

        .believers-dashboard .bd-sidebar-help p {
            margin-bottom: 12px;
            color: rgba(255, 255, 255, 0.62);
            font-size: 11px;
            line-height: 1.6;
        }

        .believers-dashboard .bd-help-btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 100%;
            min-height: 38px;
            border-radius: 11px;
            color: var(--bd-primary-dark);
            font-size: 12px;
            font-weight: 800;
            background: linear-gradient(135deg, #ffe49f, var(--bd-gold));
            transition: 0.3s ease;
        }

        .believers-dashboard .bd-help-btn:hover {
            color: var(--bd-primary-dark);
            transform: translateY(-2px);
            box-shadow: 0 8px 18px rgba(246, 189, 66, 0.25);
        }

        /* Main area */

        .believers-dashboard .bd-main {
            min-width: 0;
            flex: 1;
            padding: 27px;
        }

        .believers-dashboard .bd-topbar {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 18px;
            margin-bottom: 25px;
        }

        .believers-dashboard .bd-topbar-left {
            display: flex;
            align-items: center;
            gap: 15px;
        }

        .believers-dashboard .bd-mobile-toggle {
            display: none;
            width: 44px;
            height: 44px;
            border: 0;
            border-radius: 13px;
            color: #ffffff;
            background: linear-gradient(
                135deg,
                var(--bd-primary),
                var(--bd-secondary)
            );
            box-shadow: 0 8px 18px rgba(20, 43, 103, 0.2);
        }

        .believers-dashboard .bd-page-title {
            margin: 0;
            color: var(--bd-text);
            font-family: "Archivo Black", sans-serif;
            font-size: clamp(22px, 3vw, 21px);
        }

        .believers-dashboard .bd-page-subtitle {
            margin: 5px 0 0;
            color: var(--bd-muted);
            font-size: 13px;
            font-weight: 600;
        }

        .believers-dashboard .bd-top-actions {
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .believers-dashboard .bd-icon-btn {
            position: relative;
            display: grid;
            place-items: center;
            width: 44px;
            height: 44px;
            border: 1px solid rgba(20, 43, 103, 0.08);
            border-radius: 14px;
            color: var(--bd-primary);
            background: rgba(255, 255, 255, 0.82);
            box-shadow: 0 8px 20px rgba(20, 43, 103, 0.09);
            transition: 0.3s ease;
        }

        .believers-dashboard .bd-icon-btn:hover {
            color: #ffffff;
            background: var(--bd-primary);
            transform: translateY(-3px);
        }

        .believers-dashboard .bd-notification-dot {
            position: absolute;
            top: 7px;
            right: 7px;
            width: 8px;
            height: 8px;
            border: 2px solid #ffffff;
            border-radius: 50%;
            background: var(--bd-red);
        }

        .believers-dashboard .bd-profile-mini {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 6px 11px 6px 7px;
            border: 1px solid rgba(20, 43, 103, 0.08);
            border-radius: 15px;
            background: rgba(255, 255, 255, 0.82);
            box-shadow: 0 8px 20px rgba(20, 43, 103, 0.08);
        }

        .believers-dashboard .bd-profile-mini img {
            width: 34px;
            height: 34px;
            object-fit: cover;
            border-radius: 11px;
        }

        .believers-dashboard .bd-profile-mini strong {
            display: block;
            color: var(--bd-text);
            font-size: 12px;
            line-height: 1.2;
        }

        .believers-dashboard .bd-profile-mini span {
            color: var(--bd-muted);
            font-size: 10px;
        }

        /* Welcome banner */

        .believers-dashboard .bd-welcome {
            position: relative;
            min-height: 210px;
            margin-bottom: 24px;
            padding: 32px;
            overflow: hidden;
            border-radius: 25px;
            color: #ffffff;
            background:
                linear-gradient(
                    120deg,
                    rgba(7, 22, 56, 0.98),
                    rgba(24, 61, 136, 0.95)
                );
            box-shadow: 0 20px 45px rgba(13, 38, 94, 0.2);
        }


        .believers-dashboard .bd-welcome2 {
            position: relative;
            min-height: 210px;
            margin-bottom: 24px;
            padding: 32px;
            overflow: hidden;
            border-radius: 25px;
            color: #1b1c30;
background: linear-gradient(
  120deg,
  rgba(192, 192, 192, 0.95), /* light silver */
  rgba(128, 128, 128, 0.95)  /* darker silver/gray */
);

            box-shadow: 0 20px 45px rgba(13, 38, 94, 0.2);
        }

.box_title1{
    margin-bottom: 10px;
    font-family: "Archivo Black", sans-serif;
    font-size: clamp(23px, 3vw, 24px);
    line-height: 1.25;
}

.believers-dashboard .bd-welcome-badge2 {
    display: inline-flex;
    align-items: center;
    margin-bottom: 13px;
    color: rgb(255 255 255);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.7px;
    text-transform: uppercase;
    gap: 8px;
    padding: 7px 13px;
    border-width: 1px;
    border-style: solid;
    border-color: rgba(246, 189, 66, 0.36);
    border-image: none;
    border-radius: 30px;
    background: #272f47;
}

.believers-dashboard .bd-welcome-btn2 {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    min-height: 43px;
    padding: 10px 18px;
    border-radius: 13px;
    color: #fff !important;
    font-size: 13px;
    font-weight: 800;
    background: #272f47;
    box-shadow: 0 10px 25px rgba(246, 189, 66, 0.23);
    transition: 0.3s ease;
}

        .believers-dashboard .bd-welcome::before {
            content: "";
            position: absolute;
            width: 270px;
            height: 270px;
            top: -150px;
            right: 4%;
            border: 45px solid rgba(246, 189, 66, 0.11);
            border-radius: 50%;
            animation: bdRotate 14s linear infinite;
        }

        .believers-dashboard .bd-welcome::after {
            content: "";
            position: absolute;
            width: 180px;
            height: 180px;
            right: 20%;
            bottom: -120px;
            border-radius: 50%;
            background: rgba(49, 169, 201, 0.13);
        }

        .believers-dashboard .bd-welcome-content {
            position: relative;
            z-index: 2;
        }

        .believers-dashboard .bd-welcome-badge {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            margin-bottom: 13px;
            padding: 7px 13px;
            border: 1px solid rgba(246, 189, 66, 0.36);
            border-radius: 30px;
            color: #ffe6a5;
            font-size: 11px;
            font-weight: 800;
            letter-spacing: 0.7px;
            text-transform: uppercase;
            background: rgba(246, 189, 66, 0.1);
        }

        .believers-dashboard .bd-welcome h2 {
            margin-bottom: 10px;
            font-family: 'Roboto', sans-serif;
            font-size: clamp(23px, 3vw, 24px);
            line-height: 1.25;
        }

        .believers-dashboard .bd-welcome p {
            margin-bottom: 20px;
            color: #fff;
            font-size: 18px;
            line-height: 1.8;
        }

        .believers-dashboard .bd-welcome-btn {
            display: inline-flex;
            align-items: center;
            gap: 9px;
            min-height: 43px;
            padding: 10px 18px;
            border-radius: 13px;
            color: var(--bd-primary-dark);
            font-size: 13px;
            font-weight: 800;
            background: linear-gradient(135deg, #ffe6a6, var(--bd-gold));
            box-shadow: 0 10px 25px rgba(246, 189, 66, 0.23);
            transition: 0.3s ease;
        }

        .believers-dashboard .bd-welcome-btn:hover {
            color: var(--bd-primary-dark);
            transform: translateY(-3px);
            box-shadow: 0 14px 28px rgba(246, 189, 66, 0.3);
        }

        .believers-dashboard .bd-cross-graphic {
            position: absolute;
            z-index: 2;
            top: 50%;
            right: 6%;
            width: 105px;
            height: 105px;
            transform: translateY(-50%);
        }

        .believers-dashboard .bd-cross-graphic::before,
        .believers-dashboard .bd-cross-graphic::after {
            content: "";
            position: absolute;
            left: 50%;
            top: 50%;
            border-radius: 10px;
            background: linear-gradient(135deg, #ffe9ac, var(--bd-gold));
            box-shadow:
                0 0 25px rgba(246, 189, 66, 0.45),
                0 0 55px rgba(246, 189, 66, 0.2);
            transform: translate(-50%, -50%);
        }

        .believers-dashboard .bd-cross-graphic::before {
            width: 28px;
            height: 105px;
        }

        .believers-dashboard .bd-cross-graphic::after {
            width: 86px;
            height: 27px;
            top: 39%;
        }

        /* Stat cards */

        .believers-dashboard .bd-stat-card {
            position: relative;
            height: 100%;
            min-height: 150px;
            padding: 21px;
            overflow: hidden;
            border: 1px solid rgba(255, 255, 255, 0.9);
            border-radius: 21px;
            background: rgba(255, 255, 255, 0.8);
            box-shadow: 0 13px 30px rgba(26, 50, 100, 0.09);
            backdrop-filter: blur(10px);
            transition: 0.35s ease;
        }

        .believers-dashboard .bd-stat-card::after {
            content: "";
            position: absolute;
            width: 90px;
            height: 90px;
            right: -38px;
            bottom: -38px;
            border-radius: 50%;
            background: var(--stat-bg);
            transition: 0.35s ease;
        }

        .believers-dashboard .bd-stat-card:hover {
            transform: translateY(-7px);
            box-shadow: 0 20px 40px rgba(26, 50, 100, 0.14);
        }

        .believers-dashboard .bd-stat-card:hover::after {
            transform: scale(1.3);
        }

        .believers-dashboard .bd-stat-top {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 14px;
        }

        .believers-dashboard .bd-stat-icon {
            display: grid;
            place-items: center;
            width: 47px;
            height: 47px;
            border-radius: 15px;
            color: var(--stat-color);
            font-size: 20px;
            background: var(--stat-light);
            box-shadow: inset 0 0 0 1px var(--stat-border);
        }

        .believers-dashboard .bd-stat-indicator {
            color: var(--bd-green);
            font-size: 11px;
            font-weight: 800;
        }

        .believers-dashboard .bd-stat-value {
            margin: 0 0 4px;
            color: var(--bd-text);
            font-family: "Archivo Black", sans-serif;
            font-size: 24px;
        }

        .believers-dashboard .bd-stat-label {
            margin: 0;
            color: var(--bd-muted);
            font-size: 12px;
            font-weight: 700;
        }

        .believers-dashboard .bd-stat-blue {
            --stat-color: #286bc8;
            --stat-light: rgba(40, 107, 200, 0.1);
            --stat-border: rgba(40, 107, 200, 0.12);
            --stat-bg: rgba(40, 107, 200, 0.08);
        }

        .believers-dashboard .bd-stat-orange {
            --stat-color: #f18534;
            --stat-light: rgba(241, 133, 52, 0.11);
            --stat-border: rgba(241, 133, 52, 0.13);
            --stat-bg: rgba(241, 133, 52, 0.09);
        }

        .believers-dashboard .bd-stat-green {
            --stat-color: #22a86e;
            --stat-light: rgba(34, 168, 110, 0.1);
            --stat-border: rgba(34, 168, 110, 0.13);
            --stat-bg: rgba(34, 168, 110, 0.09);
        }

        .believers-dashboard .bd-stat-purple {
            --stat-color: #795bd2;
            --stat-light: rgba(121, 91, 210, 0.1);
            --stat-border: rgba(121, 91, 210, 0.13);
            --stat-bg: rgba(121, 91, 210, 0.09);
        }

        /* General dashboard panels */

        .believers-dashboard .bd-panel {
            height: 100%;
            padding: 23px;
            border: 1px solid rgba(255, 255, 255, 0.9);
            border-radius: 23px;
            background: rgba(255, 255, 255, 0.8);
            box-shadow: 0 13px 32px rgba(26, 50, 100, 0.09);
            backdrop-filter: blur(10px);
        }

        .believers-dashboard .bd-panel-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 15px;
            margin-bottom: 19px;
        }

        .believers-dashboard .bd-panel-title {
            margin: 0;
            color: var(--bd-text);
            font-family: "Archivo Black", sans-serif;
            font-size: 16px;
        }

        .believers-dashboard .bd-panel-subtitle {
            display: block;
            margin-top: 4px;
            color: var(--bd-muted);
            font-size: 11px;
            font-weight: 600;
        }

        .believers-dashboard .bd-view-link {
            color: var(--bd-secondary);
            font-size: 11px;
            font-weight: 800;
            transition: 0.3s ease;
        }

        .believers-dashboard .bd-view-link:hover {
            color: var(--bd-orange);
        }

        /* Daily verse */

        .believers-dashboard .bd-verse-card {
            position: relative;
            min-height: 215px;
            padding: 25px;
            overflow: hidden;
            border-radius: 21px;
            color: #ffffff;
            background:
                linear-gradient(
                    135deg,
                    rgba(113, 70, 175, 0.96),
                    rgba(42, 69, 151, 0.97)
                );
        }

        .believers-dashboard .bd-verse-card::before {
            content: "\f10d";
            position: absolute;
            right: 18px;
            bottom: -14px;
            color: rgba(255, 255, 255, 0.08);
            font-family: "Font Awesome 6 Free";
            font-size: 105px;
            font-weight: 900;
        }

        .believers-dashboard .bd-verse-icon {
            display: grid;
            place-items: center;
            width: 45px;
            height: 45px;
            margin-bottom: 17px;
            border: 1px solid rgba(255, 255, 255, 0.22);
            border-radius: 15px;
            color: #ffe4a0;
            background: rgba(255, 255, 255, 0.1);
        }

        .believers-dashboard .bd-verse-text {
            position: relative;
            z-index: 2;
            margin-bottom: 17px;
            color: rgba(255, 255, 255, 0.89);
            font-size: 14px;
            font-weight: 700;
            line-height: 1.8;
        }

        .believers-dashboard .bd-verse-reference {
            position: relative;
            z-index: 2;
            display: inline-flex;
            padding: 6px 12px;
            border-radius: 20px;
            color: #ffe5a1;
            font-size: 11px;
            font-weight: 800;
            background: rgba(246, 189, 66, 0.12);
        }

        /* Upcoming events */

        .believers-dashboard .bd-event-list {
            display: flex;
            flex-direction: column;
            gap: 13px;
        }

        .believers-dashboard .bd-event-item {
            display: flex;
            align-items: center;
            gap: 14px;
            padding: 12px;
            border: 1px solid rgba(20, 43, 103, 0.06);
            border-radius: 16px;
            background: rgba(247, 249, 255, 0.75);
            transition: 0.3s ease;
        }

        .believers-dashboard .bd-event-item:hover {
            border-color: rgba(20, 43, 103, 0.12);
            background: #ffffff;
            transform: translateX(4px);
            box-shadow: 0 10px 24px rgba(20, 43, 103, 0.08);
        }

        .believers-dashboard .bd-event-date {
            display: grid;
            place-items: center;
            width: 52px;
            min-width: 52px;
            height: 58px;
            border-radius: 15px;
            color: var(--event-color);
            line-height: 1;
            background: var(--event-bg);
        }

        .believers-dashboard .bd-event-date strong {
            font-family: "Archivo Black", sans-serif;
            font-size: 19px;
        }

        .believers-dashboard .bd-event-date span {
            margin-top: -5px;
            font-size: 9px;
            font-weight: 800;
            letter-spacing: 0.8px;
            text-transform: uppercase;
        }

        .believers-dashboard .bd-event-info {
            min-width: 0;
            flex: 1;
        }

        .believers-dashboard .bd-event-info h6 {
            margin-bottom: 5px;
            overflow: hidden;
            color: var(--bd-text);
            font-size: 13px;
            font-weight: 800;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .believers-dashboard .bd-event-info p {
            margin: 0;
            color: var(--bd-muted);
            font-size: 10px;
            font-weight: 600;
        }

        .believers-dashboard .bd-event-arrow {
            color: #9da7bb;
            font-size: 12px;
        }

        /* Quick access */

        .believers-dashboard .bd-quick-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 13px;
        }

        .believers-dashboard .bd-quick-item {
            position: relative;
            min-height: 112px;
            padding: 17px 10px;
            overflow: hidden;
            border: 1px solid rgba(20, 43, 103, 0.06);
            border-radius: 18px;
            text-align: center;
            background: linear-gradient(
                145deg,
                rgba(255, 255, 255, 0.95),
                var(--quick-bg)
            );
            transition: 0.35s ease;
        }

        .believers-dashboard .bd-quick-item::after {
            content: "";
            position: absolute;
            width: 55px;
            height: 55px;
            right: -25px;
            bottom: -25px;
            border-radius: 50%;
            background: var(--quick-circle);
        }

        .believers-dashboard .bd-quick-item:hover {
            transform: translateY(-6px);
            box-shadow: 0 14px 28px rgba(20, 43, 103, 0.1);
        }

        .believers-dashboard .bd-quick-icon {
            display: grid;
            place-items: center;
            width: 43px;
            height: 43px;
            margin: 0 auto 10px;
            border-radius: 14px;
            color: var(--quick-color);
            font-size: 18px;
            background: var(--quick-icon-bg);
            transition: 0.35s ease;
        }

        .believers-dashboard .bd-quick-item:hover .bd-quick-icon {
            color: #ffffff;
            background: var(--quick-color);
            transform: rotate(-6deg) scale(1.08);
        }

        .believers-dashboard .bd-quick-item h6 {
            position: relative;
            z-index: 2;
            margin: 0;
            color: var(--bd-text);
            font-size: 11px;
            font-weight: 800;
        }

        .believers-dashboard .bd-quick-blue {
            --quick-color: #3278cf;
            --quick-icon-bg: rgba(50, 120, 207, 0.11);
            --quick-bg: rgba(50, 120, 207, 0.05);
            --quick-circle: rgba(50, 120, 207, 0.08);
        }

        .believers-dashboard .bd-quick-orange {
            --quick-color: #f18b36;
            --quick-icon-bg: rgba(241, 139, 54, 0.11);
            --quick-bg: rgba(241, 139, 54, 0.05);
            --quick-circle: rgba(241, 139, 54, 0.08);
        }

        .believers-dashboard .bd-quick-green {
            --quick-color: #27aa72;
            --quick-icon-bg: rgba(39, 170, 114, 0.11);
            --quick-bg: rgba(39, 170, 114, 0.05);
            --quick-circle: rgba(39, 170, 114, 0.08);
        }

        .believers-dashboard .bd-quick-purple {
            --quick-color: #795ed0;
            --quick-icon-bg: rgba(121, 94, 208, 0.11);
            --quick-bg: rgba(121, 94, 208, 0.05);
            --quick-circle: rgba(121, 94, 208, 0.08);
        }

        /* Prayer progress */

        .believers-dashboard .bd-prayer-progress {
            display: flex;
            align-items: center;
            gap: 19px;
        }

        .believers-dashboard .bd-progress-ring {
            position: relative;
            display: grid;
            place-items: center;
            width: 116px;
            height: 116px;
            flex-shrink: 0;
            border-radius: 50%;
            background: conic-gradient(
                var(--bd-gold) 0deg 270deg,
                #edf0f6 270deg 360deg
            );
        }

        .believers-dashboard .bd-progress-ring::before {
            content: "";
            position: absolute;
            width: 88px;
            height: 88px;
            border-radius: 50%;
            background: #ffffff;
            box-shadow: inset 0 0 15px rgba(20, 43, 103, 0.05);
        }

        .believers-dashboard .bd-progress-ring-content {
            position: relative;
            z-index: 2;
            text-align: center;
        }

        .believers-dashboard .bd-progress-ring-content strong {
            display: block;
            color: var(--bd-text);
            font-family: "Archivo Black", sans-serif;
            font-size: 22px;
        }

        .believers-dashboard .bd-progress-ring-content span {
            color: var(--bd-muted);
            font-size: 9px;
            font-weight: 800;
            text-transform: uppercase;
        }

        .believers-dashboard .bd-prayer-content h5 {
            margin-bottom: 7px;
            color: var(--bd-text);
            font-size: 15px;
            font-weight: 800;
        }

        .believers-dashboard .bd-prayer-content p {
            margin-bottom: 13px;
            color: var(--bd-muted);
            font-size: 11px;
            line-height: 1.65;
        }

        .believers-dashboard .bd-prayer-btn {
            display: inline-flex;
            align-items: center;
            gap: 7px;
            min-height: 38px;
            padding: 8px 13px;
            border-radius: 11px;
            color: #ffffff;
            font-size: 11px;
            font-weight: 800;
            background: linear-gradient(
                135deg,
                var(--bd-primary),
                var(--bd-secondary)
            );
            transition: 0.3s ease;
        }

        .believers-dashboard .bd-prayer-btn:hover {
            color: #ffffff;
            transform: translateY(-2px);
            box-shadow: 0 9px 18px rgba(20, 43, 103, 0.2);
        }

        /* Overlay */

        .believers-dashboard .bd-sidebar-overlay {
            position: fixed;
            z-index: 1040;
            inset: 0;
            display: none;
            background: rgba(4, 12, 31, 0.62);
            backdrop-filter: blur(4px);
        }

        /* Animations */

        @keyframes bdFloat {
            0%,
            100% {
                transform: translateY(0) translateX(0);
            }

            50% {
                transform: translateY(-18px) translateX(10px);
            }
        }

        @keyframes bdAvatarGlow {
            to {
                transform: rotate(360deg);
            }
        }

        @keyframes bdRotate {
            to {
                transform: rotate(360deg);
            }
        }

        @keyframes bdFadeUp {
            from {
                opacity: 0;
                transform: translateY(22px);
            }

            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        .believers-dashboard .bd-animate {
            opacity: 0;
            animation: bdFadeUp 0.7s ease forwards;
        }

        .believers-dashboard .bd-delay-1 {
            animation-delay: 0.08s;
        }

        .believers-dashboard .bd-delay-2 {
            animation-delay: 0.16s;
        }

        .believers-dashboard .bd-delay-3 {
            animation-delay: 0.24s;
        }

        .believers-dashboard .bd-delay-4 {
            animation-delay: 0.32s;
        }

        /* Responsive */

        @media (max-width: 1199.98px) {
            .believers-dashboard .bd-shell {
                min-height: 800px;
            }

            .believers-dashboard .bd-sidebar {
                flex-basis: 235px;
                width: 235px;
            }

            .believers-dashboard .bd-main {
                padding: 22px;
            }

            .believers-dashboard .bd-quick-grid {
                grid-template-columns: repeat(2, 1fr);
            }
        }

        @media (max-width: 991.98px) {
            .believers-dashboard {
                padding: 20px 0;
            }

            .believers-dashboard .bd-shell {
                min-height: auto;
                overflow: visible;
                border-radius: 22px;
            }

            .believers-dashboard .bd-sidebar {
                position: fixed;
                z-index: 1099590;
                top: 0;
                bottom: 0;
                left: 0;
                width: 285px;
                max-width: 86%;
                overflow-y: auto;
                transform: translateX(-105%);
                box-shadow: 20px 0 50px rgba(0, 0, 0, 0.25);
            }

            .believers-dashboard .bd-sidebar.bd-sidebar-open {
                transform: translateX(0);
            }

            .believers-dashboard .bd-sidebar-overlay.bd-overlay-active {
                display: block;
            }

            .believers-dashboard .bd-mobile-toggle {
                display: grid;
                place-items: center;
            }

            .believers-dashboard .bd-main {
                width: 100%;
            }
        }

        @media (max-width: 767.98px) {
            .believers-dashboard .bd-main {
                padding: 17px;
            }

            .believers-dashboard .bd-topbar {
                align-items: flex-start;
            }

            .believers-dashboard .bd-page-subtitle {
                display: none;
            }

            .believers-dashboard .bd-profile-mini {
                display: none;
            }

            .believers-dashboard .bd-welcome {
                min-height: auto;
                padding: 26px 22px;
            }

            .believers-dashboard .bd-welcome-content {
                max-width: calc(100% - 75px);
            }

            .believers-dashboard .bd-cross-graphic {
                right: 4%;
                width: 65px;
                height: 75px;
                opacity: 0.72;
            }

            .believers-dashboard .bd-cross-graphic::before {
                width: 18px;
                height: 75px;
            }

            .believers-dashboard .bd-cross-graphic::after {
                width: 58px;
                height: 18px;
            }

            .believers-dashboard .bd-quick-grid {
                grid-template-columns: repeat(2, 1fr);
            }
        }

        @media (max-width: 575.98px) {
            .believers-dashboard {
                padding: 0;
            }

            .believers-dashboard .container {
                max-width: 100%;
                padding: 0;
            }

            .believers-dashboard .bd-shell {
                border: 0;
                border-radius: 0;
            }

            .believers-dashboard .bd-main {
                padding: 15px;
            }

            .believers-dashboard .bd-topbar {
                margin-bottom: 18px;
            }

            .believers-dashboard .bd-page-title {
                font-size: 20px;
            }

            .believers-dashboard .bd-icon-btn {
                width: 40px;
                height: 40px;
            }

            .believers-dashboard .bd-top-actions .bd-icon-btn:first-child {
                display: none;
            }

            .believers-dashboard .bd-welcome {
                padding: 23px 19px;
                border-radius: 20px;
            }

            .believers-dashboard .bd-welcome-content {
                max-width: 100%;
            }

            .believers-dashboard .bd-welcome h2 {
                padding-right: 40px;
                font-size: 23px;
            }

            .believers-dashboard .bd-welcome p {
                font-size: 12px;
            }

            .believers-dashboard .bd-cross-graphic {
                top: 32px;
                right: 20px;
                width: 43px;
                height: 52px;
                transform: none;
            }

            .believers-dashboard .bd-cross-graphic::before {
                width: 13px;
                height: 52px;
            }

            .believers-dashboard .bd-cross-graphic::after {
                width: 39px;
                height: 13px;
            }

            .believers-dashboard .bd-panel {
                padding: 18px;
                border-radius: 19px;
            }

            .believers-dashboard .bd-quick-grid {
                gap: 10px;
            }

            .believers-dashboard .bd-quick-item {
                min-height: 105px;
            }

            .believers-dashboard .bd-prayer-progress {
                align-items: flex-start;
                flex-direction: column;
            }

            .believers-dashboard .bd-progress-ring {
                width: 105px;
                height: 105px;
            }

            .believers-dashboard .bd-progress-ring::before {
                width: 79px;
                height: 79px;
            }
        }

        @media (prefers-reduced-motion: reduce) {
            .believers-dashboard *,
            .believers-dashboard *::before,
            .believers-dashboard *::after {
                scroll-behavior: auto !important;
                animation-duration: 0.01ms !important;
                animation-iteration-count: 1 !important;
                transition-duration: 0.01ms !important;
            }
        }









 




*{
            box-sizing:border-box;
        }

        .church-dashboard-section{
            font-family:'Roboto',sans-serif;
            padding:25px 0px;
            position:relative;
            overflow:hidden;
        }

        .church-dashboard-wrapper{
            position:relative;
            padding:18px;
            border-radius:20px;
            background:
                radial-gradient(circle at 5% 15%,rgba(255,183,77,.17),transparent 25%),
                radial-gradient(circle at 95% 80%,rgba(90,120,255,.14),transparent 30%),
                #f7f9fd;
            border:1px solid #e4e9f2;
            box-shadow:0 12px 35px rgba(42,57,91,.09);
            overflow:hidden;
        }

        .church-dashboard-wrapper::before{
            content:"";
            position:absolute;
            width:180px;
            height:180px;
            border:25px solid rgba(255,255,255,.55);
            border-radius:50%;
            top:-100px;
            right:-70px;
            pointer-events:none;
        }

        .church-dashboard-wrapper::after{
            content:"";
            position:absolute;
            width:110px;
            height:110px;
            border:18px solid rgba(255,255,255,.5);
            border-radius:50%;
            bottom:-70px;
            left:-45px;
            pointer-events:none;
        }

        .dashboard-item{
            height:100%;
            min-height:200px;
            border-radius:18px;
            padding:14px;
            position:relative;
            overflow:hidden;
            border: 1px solid #e5ba83;
            box-shadow:
                0 8px 22px rgba(30,43,75,.10),
                inset 0 1px 0 rgba(255,255,255,.95);
            transition:.35s ease;
            z-index:1;
        }

        .dashboard-item:hover{
            transform:translateY(-6px);
            box-shadow:0 15px 32px rgba(30,43,75,.16);
        }

        .dashboard-item::before{
            content:"";
            position:absolute;
            width:100px;
            height:100px;
            border-radius:50%;
            background:rgba(255,255,255,.35);
            right:-35px;
            top:-35px;
        }

        .dashboard-item::after{
            content:"";
            position:absolute;
            width:80px;
            height:80px;
            border-radius:50%;
            border:14px solid rgba(255,255,255,.28);
            left:-35px;
            bottom:-38px;
        }

        .card-score{
            background:linear-gradient(145deg,#fff7dc,#ffe9a9);
        }

        .card-attendance{
            background:linear-gradient(145deg,#eaf9ff,#ccefff);
        }

        .card-referral{
            background:linear-gradient(145deg,#f3edff,#dfd0ff);
        }

        .card-jesus{
            background:linear-gradient(145deg,#ecffef,#ccefd4);
        }

        .dashboard-top{
            display:flex;
            align-items:center;
            gap:12px;
            min-height:58px;
            position:relative;
            z-index:2;
        }

        .dashboard-icon{
            flex:0 0 54px;
            width:54px;
            height:54px;
            border-radius:15px;
            display:flex;
            align-items:center;
            justify-content:center;
            font-size:25px;
            color:#fff;
            position:relative;
            box-shadow:
                0 8px 17px rgba(0,0,0,.16),
                inset 0 2px 2px rgba(255,255,255,.5);
        }

        .dashboard-icon::after{
            content:"";
            position:absolute;
            inset:4px;
            border:1px solid rgba(255,255,255,.45);
            border-radius:11px;
        }

        .score-icon{
            background:linear-gradient(135deg,#ff9e00,#ff6600);
        }

        .attendance-icon{
            background:linear-gradient(135deg,#00a8e8,#0066e6);
        }

        .referral-icon{
            background:linear-gradient(135deg,#8f4cff,#6326d8);
        }

        .jesus-icon{
            background:linear-gradient(135deg,#27ae60,#087f43);
        }

        .dashboard-title{
            margin:0;
            font-size:14px;
            line-height:1.25;
            font-weight:800;
            color:#17233d;
        }

        .dashboard-small-title{
            font-size:11px;
            font-weight:700;
            text-transform:uppercase;
            letter-spacing:.7px;
            color:#78829a;
            display:block;
            margin-bottom:3px;
        }

        .level-badge{
            position:relative;
            z-index:2;
            width:100%;
            min-height:45px;
            margin-top:12px;
            border-radius:11px;
            padding:9px 12px;
            display:flex;
            align-items:center;
            justify-content:center;
            gap:8px;
            font-size:17px;
            font-weight:700;
            letter-spacing:.2px;
            box-shadow:
                inset 0 1px 0 rgba(255,255,255,.85),
                0 5px 13px rgba(37,47,70,.07);
        }

        .score-badge{
            background:#fff0ad;
            color:#a86400;
            border:1px solid #ffd75a;
        }

        .attendance-badge{
            background:#d8f4ff;
            color:#006c9c;
            border:1px solid #8fdcff;
        }

        .referral-badge{
            background:#eadfff;
            color:#6930b8;
            border:1px solid #cbb0ff;
        }

        .jesus-badge{
            background:#d9f7df;
            color:#13743a;
            border:1px solid #9de2ae;
        }

        .next-level{
            position:relative;
            z-index:2;
            margin-top:11px;
            padding:9px 10px;
            border-radius:11px;
            background:rgba(255,255,255,.68);
            border:1px solid rgba(255,255,255,.95);
            display:flex;
            justify-content:space-between;
            align-items:center;
            gap:8px;
            min-height:48px;
        }

        .next-level-text{
            font-size:11.5px;
            line-height:1.3;
            font-weight:600;
            color:#687085;
        }

        .next-level-points{
            min-width:39px;
            height:34px;
            padding:0 8px;
            border-radius:9px;
            background:#fff;
            display:flex;
            align-items:center;
            justify-content:center;
            font-size:16px;
            font-weight:900;
            color:#17233d;
            box-shadow:0 4px 11px rgba(28,39,65,.09);
        }

        .dashboard-shine{
            position:absolute;
            width:80px;
            height:230%;
            background:rgba(255,255,255,.28);
            transform:rotate(25deg);
            left:-120px;
            top:-80px;
            animation:dashboardShine 6s linear infinite;
            pointer-events:none;
        }

        @keyframes dashboardShine{
            0%{
                left:-130px;
            }

            35%,100%{
                left:130%;
            }
        }

        .dashboard-icon i{
            position:relative;
            z-index:3;
        }

        @media(max-width:991.98px){
            .dashboard-item{
                min-height:190px;
            }
        }

        @media(max-width:767.98px){

            .church-dashboard-section{
                padding:15px 6px;
            }

            .church-dashboard-wrapper{
                padding:12px;
                border-radius:16px;
            }

            .dashboard-item{
                min-height:auto;
                padding:12px;
                border-radius:15px;
            }

            .dashboard-top{
                min-height:52px;
                gap:11px;
            }

            .dashboard-icon{
                width:50px;
                height:50px;
                flex:0 0 50px;
                font-size:22px;
                border-radius:13px;
            }

            .dashboard-title{
                font-size:16px;
            }

            .level-badge{
                min-height:42px;
                font-size:16px;
                margin-top:9px;
            }

            .next-level{
                min-height:44px;
                margin-top:8px;
            }
        }

        @media(max-width:575.98px){

            .dashboard-title{
                font-size:15px;
            }

            .dashboard-small-title{
                font-size:10px;
            }

            .level-badge{
                font-size:15px;
            }

            .next-level-text{
                font-size:11px;
            }
        }



 


/* MAIN NEON BOX */
.neon-icon-box{
    position:relative;
    width: 50px;
    height: 50px;
    display:flex;
    align-items:center;
    justify-content:center;

    background:
        radial-gradient(circle at 50% 45%,
        rgba(0,255,255,.12),
        transparent 55%),
        #081018;

    border-radius:28px;

    overflow:hidden;
 
}


/* ANIMATED NEON BORDER */
.neon-icon-box::before{
    content:"";

    position:absolute;

    width:150%;
    height:150%;

    background:conic-gradient(
        transparent,
        #00ffff,
        #008cff,
        #8a2eff,
        #ff00cc,
        transparent 60%
    );

    animation:rotateNeon 4s linear infinite;
}


/* DARK INNER BACKGROUND */
.neon-icon-box::after{
    content:"";

    position:absolute;
    inset:4px;

    background:
        radial-gradient(circle at center,
        #142436 0%,
        #09121c 55%,
        #05090e 100%);

    border-radius:24px;

    box-shadow:
        inset 0 0 30px rgba(0,255,255,.08);
}


/* PNG ICON */
.neon-icon-box img{
    position:relative;
    z-index:5;

    width:135px;
    height:135px;

    object-fit:contain;

    filter:
        drop-shadow(0 0 5px rgba(0,255,255,.9))
        drop-shadow(0 0 15px rgba(0,153,255,.6));

    transition:.4s ease;
}


/* ICON HOVER */
.neon-icon-box:hover img{
    transform:scale(1.1) translateY(-4px);

    filter:
        drop-shadow(0 0 8px #00ffff)
        drop-shadow(0 0 20px #008cff)
        drop-shadow(0 0 35px rgba(0,140,255,.6));
}


/* EXTRA INNER NEON FRAME */
.inner-frame{
    position:absolute;

    z-index:4;

    inset:15px;

    border:0px solid rgba(0,255,255,.3);

    border-radius:18px;

    pointer-events:none;

    box-shadow:
        inset 0 0 12px rgba(0,255,255,.12),
        0 0 10px rgba(0,255,255,.12);
}


/* CORNER DECORATIONS */
.corner{
    position:absolute;

    width:28px;
    height:28px;

    z-index:6;
}

.corner.top-left{
    top:14px;
    left:14px;

    border-top:3px solid #00ffff;
    border-left:3px solid #00ffff;

    border-radius:7px 0 0 0;

    box-shadow:-2px -2px 8px #00ffff;
}

.corner.top-right{
    top:14px;
    right:14px;

    border-top:3px solid #008cff;
    border-right:3px solid #008cff;

    border-radius:0 7px 0 0;

    box-shadow:2px -2px 8px #008cff;
}

.corner.bottom-left{
    bottom:14px;
    left:14px;

    border-bottom:3px solid #8a2eff;
    border-left:3px solid #8a2eff;

    border-radius:0 0 0 7px;

    box-shadow:-2px 2px 8px #8a2eff;
}

.corner.bottom-right{
    bottom:14px;
    right:14px;

    border-bottom:3px solid #ff00cc;
    border-right:3px solid #ff00cc;

    border-radius:0 0 7px 0;

    box-shadow:2px 2px 8px #ff00cc;
}


/* SMALL GLOW BEHIND ICON */
.icon-glow{
    position:absolute;

    z-index:3;

    width:130px;
    height:130px;

    border-radius:50%;

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

    filter:blur(25px);

    animation:glowPulse 2.5s ease-in-out infinite;
}


@keyframes rotateNeon{
    0%{
        transform:rotate(0deg);
    }

    100%{
        transform:rotate(360deg);
    }
}


@keyframes glowPulse{
    0%,100%{
        transform:scale(.85);
        opacity:.5;
    }

    50%{
        transform:scale(1.2);
        opacity:1;
    }
}


@media(max-width:500px){

    .neon-icon-box{
        width:190px;
        height:190px;
        border-radius:24px;
    }

    .neon-icon-box::after{
        border-radius:20px;
    }

    .neon-icon-box img{
        width:105px;
        height:105px;
    }
}


/* ************************************************************************** */
 

        /* ============================
           MAIN SECTION
        ============================ */
        .bonus-section {
            position: relative;
            overflow: hidden;
            padding: 15px 0;
            background:
                radial-gradient(circle at 10% 15%, rgba(126,87,194,.10) 0 80px, transparent 81px),
                radial-gradient(circle at 90% 85%, rgba(0,188,212,.10) 0 110px, transparent 111px),
                linear-gradient(135deg, #f9fbff, #eef3fb);
        }

        /* background graphics */
        .bonus-section::before,
        .bonus-section::after {
            content: "";
            position: absolute;
            border-radius: 50%;
            pointer-events: none;
        }

        .bonus-section::before {
            width: 260px;
            height: 260px;
            top: -130px;
            right: -70px;
            border: 35px solid rgba(63,81,181,.05);
            animation: floatCircle 8s ease-in-out infinite;
        }

        .bonus-section::after {
            width: 180px;
            height: 180px;
            left: -70px;
            bottom: -80px;
            border: 28px solid rgba(255,152,0,.06);
            animation: floatCircle 10s ease-in-out infinite reverse;
        }

        @keyframes floatCircle {
            0%,100% {
                transform: translateY(0) rotate(0deg);
            }

            50% {
                transform: translateY(18px) rotate(15deg);
            }
        }

        .bonus-wrapper {
            position: relative;
            z-index: 2;
        }

        /* ============================
           CARD
        ============================ */
        .bonus-card {
            position: relative;
            overflow: hidden;
            height: 100%;
            min-height: 175px;
            padding: 17px;
            border-radius: 18px;
            border: 1px solid rgba(255,255,255,.8);
            box-shadow:
                0 15px 35px rgba(31,45,80,.12),
                inset 0 1px 0 rgba(255,255,255,.85);
            transition: all .4s ease;
            animation: cardEntrance .7s ease both;
        }

        .bonus-card:hover {
            transform: translateY(-7px);
            box-shadow:
                0 22px 45px rgba(31,45,80,.18),
                inset 0 1px 0 rgba(255,255,255,.9);
        }

        @keyframes cardEntrance {
            from {
                opacity: 0;
                transform: translateY(25px);
            }

            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        .col-card:nth-child(2) .bonus-card {
            animation-delay: .1s;
        }

        .col-card:nth-child(3) .bonus-card {
            animation-delay: .2s;
        }

        .col-card:nth-child(4) .bonus-card {
            animation-delay: .3s;
        }

        /* glossy top shine */
        .bonus-card::before {
            content: "";
            position: absolute;
            width: 140%;
            height: 70px;
            top: -45px;
            left: -20%;
            background: rgba(255,255,255,.35);
            transform: rotate(-5deg);
            filter: blur(7px);
        }

        /* decorative circle */
        .bonus-card::after {
            content: "";
            position: absolute;
            width: 100px;
            height: 100px;
            right: -35px;
            bottom: -45px;
            border-radius: 50%;
            border: 16px solid rgba(255,255,255,.25);
            transition: transform .5s ease;
        }

        .bonus-card:hover::after {
            transform: scale(1.2) rotate(25deg);
        }

        /* ============================
           DIFFERENT CARD COLORS
        ============================ */
        .card-intro {
            background: linear-gradient(145deg, #fff2f8, #ffe1ee);
        }

        .card-daily {
            background: linear-gradient(145deg, #ebfbff, #d8f5fc);
        }

        .card-monthly {
            background: linear-gradient(145deg, #fff9df, #ffefbc);
        }

        .card-streak {
            background: linear-gradient(145deg, #f2edff, #e5ddff);
        }

        /* ============================
           TOP ROW
        ============================ */
        .bonus-top {
            position: relative;
            z-index: 3;
            display: flex;
            align-items: center;
            gap: 13px;
            margin-bottom: 15px;
        }

        .bonus-icon {
            flex: 0 0 58px;
            width: 58px;
            height: 58px;
            border-radius: 17px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #fff;
            font-size: 25px;
            position: relative;
            overflow: hidden;
            box-shadow:
                0 10px 20px rgba(0,0,0,.18),
                inset 0 1px 2px rgba(255,255,255,.7);
        }

        /* glossy shine icon */
        .bonus-icon::before {
            content: "";
            position: absolute;
            width: 70px;
            height: 22px;
            top: -4px;
            left: -10px;
            background: rgba(255,255,255,.35);
            transform: rotate(-15deg);
        }

        .bonus-icon i {
            position: relative;
            z-index: 2;
            filter: drop-shadow(0 3px 3px rgba(0,0,0,.2));
        }

        .icon-intro {
            background: linear-gradient(135deg, #ff4081, #d81b60);
        }

        .icon-daily {
            background: linear-gradient(135deg, #00bcd4, #008ba3);
        }

        .icon-monthly {
            background: linear-gradient(135deg, #ffb300, #f57c00);
        }

        .icon-streak {
            background: linear-gradient(135deg, #7e57c2, #512da8);
        }

        .bonus-title {
            margin: 0;
            font-size: 15px;
            line-height: 1.25;
            font-weight: 800;
            color: #202742;
        }

        .bonus-small {
            display: block;
            margin-top: 3px;
            font-size: 11px;
            font-weight: 600;
            color: #788099;
            text-transform: uppercase;
            letter-spacing: .7px;
        }

        /* ============================
           POINT BADGE
        ============================ */
        .points-badge {
            position: relative;
            z-index: 3;
            width: 100%;
            min-height: 61px;
            border-radius: 13px;
            padding: 10px 14px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 10px;
            overflow: hidden;
            box-shadow:
                inset 0 1px 0 rgba(255,255,255,.8),
                0 8px 16px rgba(30,40,70,.08);
        }

        .points-badge::before {
            content: "";
            position: absolute;
            width: 100px;
            height: 100px;
            right: -45px;
            top: -50px;
            border-radius: 50%;
            background: rgba(255,255,255,.28);
        }

        .points-label {
            position: relative;
            z-index: 2;
            display: flex;
            align-items: center;
            gap: 7px;
            font-size: 13px;
            font-weight: 700;
        }

        .points-label i {
            font-size: 14px;
        }

        .points-number {
            position: relative;
            z-index: 2;
            font-size: 27px;
            line-height: 1;
            font-weight: 900;
        }

        .badge-intro {
            color: #a9134a;
            background: linear-gradient(135deg, #ffd4e4, #ffb7d0);
            border: 1px solid #ff9fc0;
        }

        .badge-daily {
            color: #006d7d;
            background: linear-gradient(135deg, #c8f5fc, #9feaf5);
            border: 1px solid #80deea;
        }

        .badge-monthly {
            color: #a95a00;
            background: linear-gradient(135deg, #ffedaa, #ffd875);
            border: 1px solid #ffc94e;
        }

        .badge-streak {
            color: #4f2a91;
            background: linear-gradient(135deg, #ded2ff, #cbbaff);
            border: 1px solid #b9a1fa;
        }

        /* animated sparkle */
        .sparkle {
            position: absolute;
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background: rgba(255,255,255,.85);
            top: 20px;
            right: 20px;
            animation: sparkle 2s infinite ease-in-out;
        }

        @keyframes sparkle {
            0%,100% {
                opacity: .2;
                transform: scale(.5);
            }

            50% {
                opacity: 1;
                transform: scale(1.3);
            }
        }

        /* ============================
           MOBILE
        ============================ */
        @media (max-width: 767.98px) {

            .nave_ext09 {
               height: 500px;
            }


            .bonus-section {
                padding: 25px 0;
            }

            .bonus-card {
                min-height: auto;
                border-radius: 15px;
                padding: 14px;
            }

            .bonus-top {
                margin-bottom: 11px;
            }

            .bonus-icon {
                width: 52px;
                height: 52px;
                flex-basis: 52px;
                border-radius: 14px;
                font-size: 22px;
            }

            .bonus-title {
                font-size: 17px;
            }

            .points-badge {
                width: 100%;
                min-height: 55px;
                padding: 9px 13px;
            }

            .points-label {
                font-size: 13px;
            }

            .points-number {
                font-size: 25px;
            }
        }

        @media (max-width: 400px) {
            .bonus-title {
                font-size: 16px;
            }

            .bonus-icon {
                width: 48px;
                height: 48px;
                flex-basis: 48px;
            }
        }