:root {
            --bg-dark: #0a0a0a;
            --card-bg: #19191A;
            --accent-gold: #B58448;
            --text-white: #FFFFFF;
            --text-muted: #D0D2D5;
        }

        html, body {
            height: 100%;
            margin: 0;
            background-color: var(--bg-dark);
            color: var(--text-white);
            font-family: 'Rethink Sans', sans-serif;
        }

        /* Background Ambient Effect */
        .glow-overlay {
            position: absolute;
            top: 0;
            left: 50%;
            transform: translateX(-50%);
            width: 100%;
            max-width: 1400px;
            height: 600px;
            background: radial-gradient(circle, rgba(181, 132, 72, 0.15) 0%, rgba(10, 10, 10, 0) 75%);
            z-index: 0;
            pointer-events: none;
        }

        main {
            position: relative;
            z-index: 1;
        }

        /* --- Custom UI Data CSS Styles --- */
        .main-title-gold {
            color: var(--accent-gold);
            font-size: 42px;
            font-weight: 800;
            line-height: 100%;
            margin-bottom: 8px;
        }

        .main-title-white {
            color: var(--text-white);
            font-size: 32px;
            font-weight: 800;
            line-height: 100%;
            margin-bottom: 24px;
        }

        .event-detail-desc {
            color: var(--text-muted);
            font-size: 16px;
            font-weight: 400;
            line-height: 25px;
            max-width: 654.58px;
        }

        .event-detail-img-wrapper {
            max-width: 499.28px;
            height: 314.60px;
            border-radius: 16px;
            overflow: hidden;
        }

        /* Related Events Section */
        .related-section-title {
            color: var(--accent-gold);
            font-size: 42px;
            font-weight: 800;
            line-height: 100%;
        }

        .btn-see-all {
            background-color: var(--accent-gold);
            color: var(--text-white);
            width: 129px;
            height: 44px;
            border-radius: 8px;
            font-size: 16px;
            font-weight: 700;
            line-height: 100%;
            border: none;
            transition: opacity 0.2s ease;
        }

        .btn-see-all:hover {
            opacity: 0.9;
            color: var(--text-white);
        }

        /* Related Cards Specification */
        .event-card {
            background: var(--card-bg);
            border-radius: 32px;
            max-width: 633.72px;
            min-height: 661.17px;
            padding: 26.2px 24.36px;
        }

        .card-img-wrapper {
            height: 314.6px;
            border-radius: 16px;
        }

        .event-date-tag {
            color: var(--accent-gold);
            font-size: 24px;
            font-weight: 800;
            line-height: 39px;
        }

        .event-title {
            font-size: 24px;
            font-weight: 800;
            line-height: 39px;
        }

        .event-description {
            color: var(--text-muted);
            font-size: 16px;
            font-weight: 400;
            line-height: 25px;
        }

        .btn-view-details {
            background: var(--accent-gold);
            color: #FFFFFF;
            width: 168px;
            height: 44px;
            border-radius: 8px;
            font-size: 16px;
            font-weight: 700;
            gap: 10px;
            transition: opacity 0.3s;
        }

        .btn-view-details:hover {
            opacity: 0.9;
            color: #FFFFFF;
        }

        /* Custom Dots Indicator Area */
        .carousel-indicators {
            position: relative;
            margin: 40px auto 0 auto;
            bottom: unset;
            left: unset;
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 12px;
            width: auto;
            height: auto;
            background-color: transparent;
            overflow: visible;
        }

        .carousel-indicators [data-bs-target] {
            box-sizing: border-box;
            flex: 0 0 auto;
            width: 10px;
            height: 10px;
            padding: 0;
            margin: 0;
            text-indent: -999px;
            cursor: pointer;
            background-color: #555555;
            border: none;
            border-radius: 50%;
            opacity: 1;
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        }

        /* Active Pill Shape */
        .carousel-indicators .active {
            width: 24px;
            height: 10px;
            background-color: var(--text-white);
            border-radius: 20px;
        }