:root {
            --primary-bg: #0d0e14;
            --secondary-bg: #1c1f2b;
            --accent-orange: #ff9100;
            --text-light: #ffffff;
            --text-muted: #a0a4b3;
            --card-bg: #222533;
            --border-color: #383c50;
        }

        body {
            font-family: 'Roboto', sans-serif;
            background-color: var(--primary-bg);
            color: var(--text-light);
            margin: 0;
            padding: 0;
            overflow-x: hidden;
        }

        









        /* --- Custom CSS for the Header --- */

        .top-header {
            background-color: #d21f41;
            padding: 1rem 1.5rem;
            display: flex;
            justify-content: space-between;
            align-items: center;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
            position: relative;
            z-index: 100;
        }

        .logo a img {
            height: 60px;
            width: auto;
        }

        .nav-menu {
            display: flex;
            list-style: none;
            margin: 0;
            padding: 0;
        }

        .nav-menu li {
            margin: 0 1.25rem;
        }

        .nav-menu a {
            color: #e6e6e6;
            text-decoration: none;
            font-weight: 500;
            font-size: 17px;
            font-family:Verdana, Geneva, Tahoma, sans-serif;
            padding: 0.5rem 0;
            position: relative;
            transition: color 0.3s ease;
            
        }

        .nav-menu a:hover {
            color: #ffd700;
        }

        .nav-menu a::after {
            content: '';
            position: absolute;
            bottom: -5px;
            left: 0;
            width: 0;
            height: 2px;
            background-color: #ffd700;
            transition: width 0.3s ease-in-out;
        }

        .nav-menu a:hover::after {
            width: 100%;
        }

       





/* Auth button styling */
.auth-btn {
    display: inline-block;
    padding: 0px 20px;
    background: linear-gradient(45deg, #ff9900, #ff9900);
    color: white;
    text-align: center;
    text-decoration: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 21px;
}

/* The Modal (background) */
.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
    padding-top: 60px;
}

/* Modal Content/Box */
.modal-content {
    background-color: #1a1a1a;
    margin: 5% auto; /* 5% from the top and centered */
    padding: 20px;
    border: 1px solid #333;
    width: 80%; /* Could be more or less, depending on screen size */
    max-width: 450px;
    border-radius: 10px;
    position: relative;
    color: #f0f0f0;
}

/* The Close Button */
.close-btn {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
}

.close-btn:hover,
.close-btn:focus {
    color: #fff;
    text-decoration: none;
    cursor: pointer;
}

/* Form container */
.form-container {
    text-align: center;
}

.form-container h2 {
    font-size: 1.8em;
    margin-bottom: 5px;
}

.form-container p {
    font-style: italic;
    color: #bbb;
    margin-bottom: 20px;
}

/* Input fields */
input[type=text],
input[type=email],
input[type=password],
.select-wrapper select {
    width: 100%;
    padding: 10px;
    margin: 8px 0;
    display: inline-block;
    border: none;
    border-bottom: 2px solid #555;
    background: #1a1a1a;
    color: #fff;
    box-sizing: border-box;
    outline: none;
}

input[type=text]:focus,
input[type=email]:focus,
input[type=password]:focus,
.select-wrapper select:focus {
    border-bottom: 2px solid #fff;
}

/* Labels */
label {
    display: block;
    text-align: left;
    margin-top: 15px;
    color: #fff;
    font-size: 0.9em;
}

/* Select dropdown wrapper */
.select-wrapper {
    position: relative;
    margin-top: 15px;
}

.select-wrapper select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    padding-right: 30px; /* Space for the arrow */
    cursor: pointer;
}

.select-wrapper::after {
    content: '▼';
    position: absolute;
    top: 50%;
    right: 10px;
    transform: translateY(-50%);
    color: #fff;
    pointer-events: none;
}

/* Checkbox and terms */
.terms {
    display: flex;
    align-items: center;
    justify-content: left;
    margin-top: 20px;
    font-size: 0.8em;
}

.terms input[type="checkbox"] {
    width: auto;
    margin-right: 10px;
}

.terms a {
    color: #ff9900;
    text-decoration: none;
}

.terms a:hover {
    text-decoration: underline;
}

/* Submit button */
.submit-btn {
    background: linear-gradient(45deg, #ff9900, #ff9900);
    color: white;
    padding: 14px 20px;
    margin-top: 20px;
    border: none;
    cursor: pointer;
    width: 100%;
    font-size: 1em;
    border-radius: 5px;
}

.submit-btn:hover {
    background-color: #0056b3;
}

/* Confirmation Message */
.confirmation-message {
    padding: 20px;
    border-radius: 5px;
    text-align: center;
    color: #4CAF50;
}








/* Apply the border-radius and glowing effect to the main container */
.container-casino.story-layout {
    /* Existing styles, ensure these are present in your CSS */
    display: flex;
    align-items: center;
    gap: 30px;
    background-color: #1a1a1a;
    padding: 40px;
    position: relative;
    overflow: hidden;
    margin-top: 100px;

    /* Rounded corners for the container */
    border-radius: 30px;

    /* The glowing effect on all sides */
    box-shadow: 0 0 25px 8px rgba(254, 197, 39, 0.7);

    /* Optional: Add a pulsating animation for a more dynamic effect */
    animation: glow-pulse 1s infinite alternate;
}

/* Define the keyframes for the pulsating glow animation */
@keyframes glow-pulse {
    from {
        box-shadow: 0 0 15px 5px rgba(65, 105, 225, 0.5);
    }
    to {
        box-shadow: 0 0 35px 12px rgb(248, 196, 25);
    }
}


/* Example: making the glow stronger */
.container-casino.story-layout {
    box-shadow: 0 0 50px 20px rgb(222, 225, 65);
}





        /* --- Mobile Styles & Hamburger Menu --- */
        .hamburger {
            display: none;
            flex-direction: column;
            cursor: pointer;
        }

        .bar {
            height: 3px;
            width: 25px;
            background-color: #e6e6e6;
            margin: 4px 0;
            transition: transform 0.4s ease;
        }

        @media (max-width: 991px) {
            .nav-menu {
                position: fixed;
                top: 0;
                left: -100%;
                width: 100%;
                height: 100%;
                flex-direction: column;
                justify-content: center;
                align-items: center;
                background-color: rgba(12, 11, 26, 0.95);
                backdrop-filter: blur(5px);
                transition: left 0.5s ease-in-out;
            }

            .nav-menu.active {
                left: 0;
            }

            .nav-menu li {
                margin: 2rem 0;
            }

            .nav-menu a {
                font-size: 1.5rem;
                padding: 1rem 0;
                display: block;
            }

            .auth-btn {
                display: none; /* Hide on mobile to be part of the menu */
            }

            .hamburger {
                display: flex;
                z-index: 101; /* Above the menu */
            }

            /* Hamburger animation */
            .hamburger.active .bar:nth-child(2) {
                opacity: 0;
            }
            .hamburger.active .bar:nth-child(1) {
                transform: translateY(7px) rotate(45deg);
            }
            .hamburger.active .bar:nth-child(3) {
                transform: translateY(-7px) rotate(-45deg);
            }
        }

        



@media (max-width: 768px) {
    .hero-fullscreen-v9 {
        /* This is the key change */
        padding-top: 50px; 
        padding-bottom: 50px;
        /* You can adjust this value as needed */
    }

    .hero-title-v9 {
        font-size: 2.5rem;
    }

    .hero-tagline-v9 {
        font-size: 1rem;
    }

    .hero-cta-buttons-v9 {
        flex-direction: column;
        gap: 15px;
    }

    .cta-btn-v9 {
        width: 100%;
        max-width: 250px;
    }
}







.container-casino {
    max-width: 1400px;
    margin: 0 auto;
    padding: 20px;
}



.hero-content-casino h1 {
    font-size: 3.8em;
    color: #fff;
    text-shadow: 0 0 20px rgba(255, 204, 0, 0.7);
    margin-bottom: 25px;
    letter-spacing: 2px;
}

.hero-content-casino p {
    font-size: 1.4em;
    max-width: 800px;
    margin: 0 auto;
    color: #d0d0d0;
    font-weight: 300;
}

/* Casino Story Section (Image Right, Content Left) */
.casino-story-section {
    
    padding: 50px 0;
   
    margin-top: -70px;

}

.story-layout {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 50px; /* Space between text and image */
}

.story-content {
    flex: 1 1 55%; /* Text takes more space on desktop */
    min-width: 320px;
    order: 1; /* Text on left */
    padding-right: 20px; /* Some padding for desktop */
}

.story-content h2 {
    font-size: 2.6em;
    line-height: 1.2;
    margin-bottom: 25px;
}

.story-content p {
    font-size: 1.1em;
    margin-bottom: 20px;
    color: #c0c0c0;
    text-align: justify;
}

.story-image {
    flex: 1 1 35%; /* Image takes less space on desktop */
    min-width: 300px;
    order: 2; /* Image on right */
    position: relative;
    transform: translateY(20px); /* Subtle lift for the image */
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
    border-radius: 15px;
    overflow: hidden; /* Ensures image corners are rounded */
}

.story-image img {
    width: 100%;
    height: 450px;
    display: block;
    border-radius: 15px;
    transition: transform 0.4s ease-in-out;
}

@media (max-width: 992px) {
    .story-image img {
        height: auto; /* Overrides the fixed height on smaller screens */
    }
}



.story-image:hover img {
    transform: scale(1.03);
}

/* Button Style */
.btn-casino-main {
    background: linear-gradient(45deg, #ff9900, #ff9900); /* Golden gradient */
    color: #d21f41; /* Dark text on button */
    padding: 15px 45px;
    border-radius: 50px;
    font-size: 1.1em;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: all 0.3s ease;
    box-shadow: 0 6px 20px rgba(255, 204, 0, 0.4);
    display: inline-block;
    margin-top: 30px;
}

.btn-casino-main:hover {
    background: linear-gradient(45deg, #ff9900, #ff9900);
    box-shadow: 0 8px 25px rgba(255, 204, 0, 0.6);
    transform: translateY(-3px) scale(1.02);
    text-decoration: none;
}

/* Casino Values Section */
.casino-values-section {
    padding: 30px 0;
    text-align: center;
}

.casino-values-section h2 {
    margin-bottom: 60px;
    font-size: 3em;
}

.values-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 40px;
}

.value-item {
    background-color: #d21f41;
    padding: 40px 30px;
    border-radius: 15px;
    box-shadow: 0 5px 25px rgba(0, 0, 0, 0.4);
    border: 1px solid #ff990022;
    transition: all 0.3s ease;
}

.value-item:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 40px rgba(255, 204, 0, 0.2);
    border-color: #ff9900;
}

.value-item i {
    font-size: 3.5em;
    color: #ff9900;
    margin-bottom: 25px;
    display: block; /* Ensures icon is block-level for margin */
}

.value-item h3 {
    font-size: 1.8em;
    color: #fff;
    margin-bottom: 15px;
}

.value-item p {
    font-size: 1em;
    color: #b0b0b0;
}

/* Responsive adjustments */
@media (max-width: 992px) {
    .casino-about-hero h1 {
        font-size: 3em;
    }
    .hero-content-casino p {
        font-size: 1.2em;
    }
    .story-layout {
        flex-direction: column; /* Stack columns on smaller desktops and tablets */
        gap: 40px;
    }
    .story-content, .story-image {
        flex: 1 1 100%;
        padding: 0;
    }
    .story-image {
        order: 1; /* Image on top when stacked */
        transform: translateY(0);
    }
    .story-content {
        order: 2; /* Text below image when stacked */
    }
    .story-image img {
        width: 100%;
        margin-left: 0;
    }
    .story-content h2 {
        font-size: 2.2em;
    }
}

@media (max-width: 768px) {
    .casino-about-hero h1 {
        font-size: 2.5em;
    }
    .hero-content-casino p {
        font-size: 1em;
    }
    .casino-values-section h2 {
        font-size: 2.5em;
    }
    .value-item h3 {
        font-size: 1.5em;
    }
}

@media (max-width: 480px) {
    .casino-about-hero h1 {
        font-size: 2em;
        letter-spacing: 1px;
    }
    .casino-about-hero p {
        font-size: 0.9em;
    }
    .story-content h2 {
        font-size: 1.8em;
    }
    .story-content p {
        font-size: 0.9em;
    }
    .btn-casino-main {
        padding: 12px 30px;
        font-size: 0.9em;
    }
    .value-item {
        padding: 30px 20px;
    }
    .value-item i {
        font-size: 3em;
    }
}








        
        







@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Montserrat:wght@400;700&display=swap');

html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    overflow-x: hidden;
}

.hero-fullscreen-v9 {
    position: relative;
    width: 100%;
    height: 100vh;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.background-visual-v9 {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

.background-visual-v9 img,
.background-visual-v9 video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.visual-overlay-v9 {
   
    
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(5px); /* This property blurs the content behind the overlay */
    background-image: radial-gradient(circle, transparent 10%, #0d0d1a 80%);
}

.hero-content-v9 {
    position: relative;
    z-index: 2;
    text-align: center;
    color: #fff;
    max-width: 900px;
    padding: 0 2rem;
    animation: fadeIn-v9 1.5s ease-out;
}

@keyframes fadeIn-v9 {
    from { opacity: 0; transform: translateY(30px); }
    to { opacity: 1; transform: translateY(0); }
}

.hero-title-v9 {
    font-family: 'Bebas Neue', cursive;
    font-size: 5rem;
    font-weight: 400;
    letter-spacing: 5px;
    color: #fff;
    text-shadow: 0 0 20px rgba(0, 240, 255, 0.7);
    line-height: 1.1;
    margin: 0 0 1rem 0;
}

.hero-tagline-v9 {
    font-family: 'Montserrat', sans-serif;
    font-size: 1.5rem;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.8);
    margin-bottom: 2.5rem;
}

.hero-cta-buttons-v9 {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 1.5rem;
}

.cta-btn-v9 {
    padding: 1.2rem 3rem;
    border: none;
    border-radius: 50px;
    font-family: 'Bebas Neue', cursive;
    font-size: 1.2rem;
    letter-spacing: 1px;
    text-decoration: none;
    text-transform: uppercase;
    transition: all 0.3s ease;
    box-shadow: 0 0 10px rgba(0, 240, 255, 0.4);
}

.primary-btn-v9 {
    background: linear-gradient(45deg, #ff9900, #ff9900);
    color: #0d0d1a;
    font-weight: 700;
}

.primary-btn-v9:hover {
    transform: scale(1.05);
    background: linear-gradient(45deg, #ff9900, #ff9900);
    box-shadow: 0 0 25px rgba(255, 204, 0, 0.6);
}

.secondary-btn-v9 {
    background: transparent;
    border: 2px solid #ff9900;
    color: #ff9900;
    font-weight: 700;
}

.secondary-btn-v9:hover {
    background: rgba(0, 240, 255, 0.2);
    transform: translateY(-5px);
    box-shadow: 0 5px 20px rgba(0, 240, 255, 0.4);
}

@media (max-width: 768px) {
    .hero-title-v9 {
        font-size: 3rem;
    }
    .hero-tagline-v9 {
        font-size: 1rem;
    }
    .hero-fullscreen-v9 {
        height: auto;
        min-height: 80vh;
    }
}






















/* --- Neo-Glow Casino Games Section CSS --- */

/* Basic Reset & Body Styling */
:root {
    --dark-bg: #1a1a2e; /* Deep dark background */
    --card-bg: #1e1e3f; /* Slightly lighter dark for cards */
    --text-light: #e0e0e0;
    --text-muted: #a0a0b0;
    --accent-glow: #ff9900; /* Cyan glow */
    --accent-button: #ff007f; /* Magenta button */
    --gradient-glow: linear-gradient(45deg, #ff9900, #8a2be2); /* Cyan to purple */
    --font-heading: 'Poppins', sans-serif;
    --font-body: 'Open Sans', sans-serif;
}

body {
    margin: 0;
    padding: 0;
    background-color: var(--dark-bg);
    color: var(--text-light);
    font-family: var(--font-body);
    line-height: 1.6;
    overflow-x: hidden; /* Prevent horizontal scroll */
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
}

/* Section Header */
.neo-glow-games-section .section-header {
    text-align: center;
    margin-bottom: 3rem;
    padding-top: 2rem;
}

.neo-glow-games-section .section-header h2 {
    font-family: var(--font-heading);
    font-size: 2.8rem;
    color: var(--text-light);
    margin-bottom: 0.8rem;
    text-shadow: 0 0 15px rgba(0, 240, 255, 0.5); /* Soft glow for heading */
}

.neo-glow-games-section .section-header p {
    font-size: 1.1rem;
    color: var(--text-muted);
    max-width: 700px;
    margin: 0 auto;
}

/* Game Categories Navigation (Tabs) */
.game-categories-nav {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 15px;
    margin-bottom: 3rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    padding-bottom: 15px;
}

.category-tab {
    background: transparent;
    border: none;
    padding: 12px 25px;
    border-radius: 30px;
    color: var(--text-muted);
    font-family: var(--font-heading);
    font-size: 1.05rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 8px;
    position: relative;
    overflow: hidden;
}

.category-tab::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--gradient-glow);
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: 0;
}

.category-tab:hover {
    color: var(--text-light);
    transform: translateY(-3px);
}

.category-tab.active {
    color: #fff;
    font-weight: 700;
    box-shadow: 0 0 15px rgba(0, 240, 255, 0.5);
    background: var(--gradient-glow);
    background-size: 200% 200%;
    animation: gradientShift 3s ease infinite alternate;
}

/* Ensure text is above the ::before pseudo-element */
.category-tab .icon,
.category-tab span {
    position: relative;
    z-index: 1;
}

@keyframes gradientShift {
    0% { background-position: 0% 50%; }
    100% { background-position: 100% 50%; }
}

/* Games Display Grid */
.games-display-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); /* Responsive columns */
    gap: 25px;
}

/* Individual Game Card */
.game-card {
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    background-color: var(--card-bg);
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.08);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    cursor: pointer;
    aspect-ratio: 4/3; /* Maintain aspect ratio for uniform cards */
}

.game-card:hover {
    transform: translateY(-8px) scale(1.02);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.5), 0 0 25px var(--accent-glow);
}

.game-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: filter 0.3s ease, transform 0.3s ease;
}

.game-card:hover img {
    filter: brightness(0.6); /* Darken image on hover */
    transform: scale(1.05); /* Slight zoom on image */
}

.game-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0) 50%);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    padding: 20px;
    opacity: 0; /* Hidden by default */
    transition: opacity 0.3s ease;
}

.game-card:hover .game-overlay {
    opacity: 1; /* Show overlay on hover */
}

.game-title {
    font-family: var(--font-heading);
    font-size: 1.5rem;
    margin-bottom: 5px;
    color: var(--text-light);
    text-align: center;
    transform: translateY(20px); /* Start below and move up */
    opacity: 0;
    transition: transform 0.3s ease, opacity 0.3s ease;
    transition-delay: 0.1s;
}

.game-type {
    font-size: 0.9rem;
    color: var(--text-muted);
    margin-bottom: 15px;
    transform: translateY(20px);
    opacity: 0;
    transition: transform 0.3s ease, opacity 0.3s ease;
    transition-delay: 0.15s;
}

.play-btn {
    background-color: var(--accent-button);
    color: #fff;
    border: none;
    padding: 10px 25px;
    border-radius: 30px;
    font-family: var(--font-heading);
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 0 15px rgba(255, 0, 127, 0.4);
    transition: all 0.3s ease;
    transform: translateY(20px);
    opacity: 0;
    transition-delay: 0.2s;
}

.game-card:hover .game-title,
.game-card:hover .game-type,
.game-card:hover .play-btn {
    transform: translateY(0); /* Move elements into view */
    opacity: 1;
}

.play-btn:hover {
    background-color: #ff3399; /* Slightly lighter on hover */
    box-shadow: 0 0 25px rgba(255, 0, 127, 0.7);
}

/* --- Responsive Adjustments --- */
@media (max-width: 768px) {
    .neo-glow-games-section .section-header h2 {
        font-size: 2.2rem;
    }

    .neo-glow-games-section .section-header p {
        font-size: 1rem;
    }

    .game-categories-nav {
        justify-content: flex-start; /* Align tabs to start on smaller screens */
        overflow-x: auto; /* Enable horizontal scrolling for tabs */
        padding-bottom: 10px;
        -webkit-overflow-scrolling: touch; /* Smooth scrolling for iOS */
    }

    .category-tab {
        flex-shrink: 0; /* Prevent tabs from shrinking */
        font-size: 0.95rem;
        padding: 10px 20px;
    }

    .games-display-grid {
        grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); /* Smaller cards */
        gap: 20px;
    }

    .game-title {
        font-size: 1.3rem;
    }

    .game-type {
        font-size: 0.85rem;
    }

    .play-btn {
        padding: 8px 20px;
        font-size: 0.9rem;
    }
}

@media (max-width: 480px) {
    .neo-glow-games-section .section-header h2 {
        font-size: 1.8rem;
    }

    .neo-glow-games-section .section-header p {
        font-size: 0.9rem;
    }

    .category-tab {
        font-size: 0.9rem;
        padding: 8px 15px;
    }

    .games-display-grid {
        grid-template-columns: 1fr; /* Single column on very small screens */
        gap: 15px;
    }

    .game-title {
        font-size: 1.2rem;
    }
}











@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&family=Bebas+Neue&display=swap');

.game-universe-v4 {
    width: 100%;
    max-width: 1400px;
    margin: 6rem auto;
    padding: 2rem;
    color: #fff;
    font-family: 'Montserrat', sans-serif;
}

.game-container-v4 {
    position: relative;
}

.section-header-v4 {
    text-align: center;
    margin-bottom: 3.5rem;
}

.section-title-v4 {
    font-family: 'Bebas Neue', cursive;
    font-size: 3.5rem;
    font-weight: 400;
    letter-spacing: 5px;
    color: #ff9900;
    text-shadow: 0 0 15px rgba(0, 240, 255, 0.8);
    margin: 0 0 0.5rem 0;
}

.section-tagline-v4 {
    font-size: 1.2rem;
    color: rgba(255, 255, 255, 0.7);
    margin: 0;
}

/* Category Navigation */
.game-categories-nav-v4 {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 3rem;
    border: 1px solid rgba(0, 240, 255, 0.1);
    border-radius: 50px;
    padding: 0.5rem;
    background: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(10px);
}

.category-tab-v4 {
    background: transparent;
    border: none;
    padding: 0.8rem 1.5rem;
    color: rgba(255, 255, 255, 0.6);
    font-family: 'Montserrat', sans-serif;
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
    border-radius: 50px;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    text-transform: uppercase;
}

.category-tab-v4:hover {
    color: #ff9900;
}

.category-tab-v4.active {
    color: #fff;
    background: rgba(0, 240, 255, 0.1);
    box-shadow: 0 0 15px rgba(0, 240, 255, 0.5);
    border: 1px solid rgba(0, 240, 255, 0.3);
}

.category-tab-v4 .icon {
    font-size: 1.2rem;
}

/* Games Grid */
.games-display-grid-v4 {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 2rem;
}

.game-card-v4 {
    position: relative;
    border-radius: 15px;
    overflow: hidden;
    cursor: pointer;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border: 1px solid rgba(0, 240, 255, 0.2);
    box-shadow: 0 0 20px rgba(0, 240, 255, 0.1);
}

.game-card-v4 img {
    width: 100%;
    height: auto;
    display: block;
}

.game-card-v4:hover {
    transform: translateY(-10px) scale(1.05);
    box-shadow: 0 0 40px rgba(0, 240, 255, 0.4);
}

.card-overlay-v4 {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(5px);
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.game-card-v4:hover .card-overlay-v4 {
    opacity: 1;
}

.overlay-content-v4 {
    text-align: center;
}

.game-title-v4 {
    font-family: 'Bebas Neue', cursive;
    font-size: 1.5rem;
    letter-spacing: 2px;
    color: #fff;
    text-shadow: 0 0 10px rgba(0, 240, 255, 0.8);
    margin: 0 0 0.5rem 0;
}

.game-type-v4 {
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.7);
    margin: 0 0 1rem 0;
}

.play-btn-v4 {
    display: inline-block;
    padding: 0.8rem 2rem;
    background: linear-gradient(45deg, #ff9900, #ff6b6b);
    border-radius: 50px;
    color: #fff;
    text-decoration: none;
    font-family: 'Bebas Neue', cursive;
    font-size: 1.2rem;
    letter-spacing: 1px;
    text-transform: uppercase;
    box-shadow: 0 0 10px rgba(255, 204, 0, 0.6);
    transition: transform 0.3s ease;
}

.play-btn-v4:hover {
    transform: scale(1.1);
}


















@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@700&family=Bebas+Neue&display=swap');

/* Main container for the new layout */
.winning-section-v5 {
    width: 100%;
    max-width: 1300px;
    padding: 1rem 2rem 2rem;
    color: #fff;
    font-family: 'Montserrat', sans-serif;
    margin-top: 100px;
}

.winning-header-v5 {
    text-align: center;
    margin-bottom: 2rem;
}

/* This is the fix to reduce the top gap */
.winning-section-v5 .winning-header-v5 .section-title-v5 {
    font-family: 'Bebas Neue', cursive;
    font-size: 4rem;
    font-weight: 400;
    letter-spacing: 5px;
    color: #ff9900;
    text-shadow: 0 0 10px rgba(255, 204, 0, 0.8), 0 0 20px rgba(255, 204, 0, 0.5);
    margin-top: 0 !important; /* Forcefully removes the top margin */
    padding-top: 0 !important; /* Ensures no top padding remains */
}

.section-tagline-v5 {
    font-size: 1.2rem;
    color: rgba(255, 255, 255, 0.8);
    margin-top: 0.5rem;
    letter-spacing: 1px;
}

.winning-grid-v5 {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 2rem;
}

.game-card-v5 {
    position: relative;
    width: 100%;
    border-radius: 20px;
    overflow: hidden;
    transform: rotateX(15deg) rotateY(-5deg);
    transform-style: preserve-3d;
    perspective: 1000px;
    transition: transform 0.6s cubic-bezier(0.19, 1, 0.22, 1);
}

.game-card-v5:hover {
    transform: rotateX(0deg) rotateY(0deg) scale(1.05);
}

.card-glass-panel {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(10px);
    border: 2px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
    border-radius: 20px;
    z-index: 1;
}

.card-content-v5 {
    position: relative;
    z-index: 2;
    padding: 2rem 1.5rem;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    background: linear-gradient(to top, rgba(0,0,0,0.8), rgba(0,0,0,0));
    opacity: 0.9;
}

.game-title-v5 {
    font-family: 'Bebas Neue', cursive;
    font-size: 2.2rem;
    letter-spacing: 2px;
    text-shadow: 0 0 10px currentColor;
    margin-bottom: 1rem;
    margin-top: -50px;
}

.game-card-v5[data-game="slot-winners"] .game-title-v5 { color: #00ff8c; }
.game-card-v5[data-game="table-winners"] .game-title-v5 { color: #ff6347; }
.game-card-v5[data-game="roulette-winners"] .game-title-v5 { color: #00bfff; }
.game-card-v5[data-game="live-dealer"] .game-title-v5 { color: #8a2be2; }

.winner-list-container {
    height: 250px;
    overflow: hidden; /* Hide the scrollbar */
}

.winner-list-v5 {
    list-style: none;
    padding: 0;
    margin: 0;
    animation: scroll-v5 30s linear infinite; /* Animation applied here */
}

.winner-item-v5 {
    display: flex;
    justify-content: space-between;
    padding: 1rem 0;
    border-bottom: 1px dashed rgba(255, 255, 255, 0.2);
}

.winner-item-v5:last-child {
    border-bottom: none;
}

.winner-name {
    font-weight: bold;
    color: #ff9900;
    letter-spacing: 1px;
}

.winner-winnings {
    font-size: 1.2rem;
    font-weight: bold;
    text-shadow: 0 0 5px #ff9900;
}

/* The CSS Animation for automatic scrolling */
@keyframes scroll-v5 {
    from {
        transform: translateY(0);
    }
    to {
        /* Move the list up by half its height to create a smooth loop */
        transform: translateY(-50%);
    }
}





@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@700&family=Bebas+Neue&display=swap');

.faqs-section-v2 {
    width: 100%;
    max-width: 1000px;
    margin: 4rem auto;
    padding: 2rem;
    color: #fff;
    font-family: 'Montserrat', sans-serif;
    text-align: center;
}

.faqs-title-v2 {
    font-family: 'Bebas Neue', cursive;
    font-size: 3rem;
    font-weight: 400;
    letter-spacing: 4px;
    color: #ff9900; /* A cyan glow */
    text-shadow: 0 0 15px rgba(0, 240, 255, 0.8), 0 0 30px rgba(0, 240, 255, 0.5);
    margin-bottom: 2.5rem;
}

.accordion-v2 {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    text-align: left;
}

.accordion-item-v2 {
    position: relative;
    background: rgba(255, 255, 255, 0.03);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    padding: 1.5rem 2rem;
    box-shadow: 
        0 0 20px rgba(0, 240, 255, 0.1), /* Outer glow */
        0 0 10px rgba(255, 255, 255, 0.05) inset; /* Inner light effect */
    transition: all 0.4s ease;
    cursor: pointer;
    overflow: hidden;
    transform: perspective(1000px) rotateX(2deg) translateY(0);
}

.accordion-item-v2:hover {
    box-shadow: 
        0 0 35px rgba(0, 240, 255, 0.4), 
        0 0 20px rgba(255, 255, 255, 0.1) inset;
    transform: perspective(1000px) rotateX(0deg) translateY(-8px);
}

.accordion-header-v2 {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    position: relative;
}

.toggle-icon {
    font-size: 2.5rem;
    font-weight: bold;
    line-height: 1;
    color: #ff9900;
    text-shadow: 0 0 10px #ff9900;
    transition: transform 0.4s ease, color 0.4s ease;
}

.accordion-item-v2.active .toggle-icon {
    transform: rotate(135deg);
    color: #ff9900;
    text-shadow: 0 0 10px #ff9900;
}

.accordion-question-v2 {
    font-size: 1.4rem;
    margin: 0;
    color: #fff;
    font-weight: 700;
    letter-spacing: 1px;
}

.accordion-content-v2 {
    max-height: 0;
    opacity: 0;
    transition: max-height 0.5s cubic-bezier(0.86, 0, 0.07, 1), opacity 0.5s cubic-bezier(0.86, 0, 0.07, 1);
    padding: 0 0 0 4rem;
}

.accordion-content-v2 p {
    font-size: 1rem;
    color: rgba(255, 255, 255, 0.8);
    line-height: 1.6;
    margin-top: 1rem;
    text-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
}

/* Optional: Add a subtle animation to the container */
.accordion-v2 {
    animation: fadeIn 1.5s ease-out forwards;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}









@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&family=Bebas+Neue&display=swap');

.testimonials-section-v1 {
    width: 100%;
    max-width: 1300px;
    margin: 6rem auto;
    padding: 2rem;
    color: #fff;
    font-family: 'Montserrat', sans-serif;
    text-align: center;
}

.testimonials-title-v1 {
    font-family: 'Bebas Neue', cursive;
    font-size: 3.5rem;
    font-weight: 400;
    letter-spacing: 5px;
    color: #ff9900;
    text-shadow: 0 0 15px rgba(255, 204, 0, 0.8), 0 0 30px rgba(255, 204, 0, 0.5);
    margin-bottom: 3.5rem;
}

/* This is the key change for the 3+3 layout */
.testimonial-grid-v1 {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* Creates three equal columns */
    gap: 2.5rem;
}

.testimonial-card-v1 {
    position: relative;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(15px);
    border-radius: 15px;
    padding: 2.5rem;
    box-shadow: 0 0 25px rgba(0, 240, 255, 0.1), inset 0 0 10px rgba(0, 240, 255, 0.05);
    overflow: hidden;
    transform: perspective(1000px) rotateY(2deg) translateY(-5px);
    transition: all 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    border: 1px solid rgba(0, 240, 255, 0.2);
}

.testimonial-card-v1:hover {
    transform: perspective(1000px) rotateY(0deg) translateY(0px) scale(1.05);
    box-shadow: 0 0 40px rgba(0, 240, 255, 0.4), inset 0 0 15px rgba(0, 240, 255, 0.2);
}

.card-glow-border {
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    border-radius: 17px;
    background: linear-gradient(45deg, #ff5100, #e82174, #ff6a00);
    background-size: 200% 200%;
    filter: blur(8px);
    z-index: 0;
    opacity: 1;
    transition: opacity 0.5s ease;
    animation: gradientShift 8s ease infinite;
}

@keyframes gradientShift {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

.card-content {
    position: relative;
    z-index: 1;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.testimonial-quote {
    font-size: 1.15rem;
    line-height: 1.8;
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: 1.5rem;
    font-style: italic;
    text-shadow: 0 0 5px rgba(0, 0, 0, 0.4);
}

.testimonial-author {
    font-size: 1rem;
    color: rgba(255, 255, 255, 0.7);
    font-weight: 400;
    text-shadow: 0 0 3px rgba(0, 0, 0, 0.3);
}

.author-name {
    font-weight: 700;
    color: #ffffff;
    text-shadow: 0 0 8px rgba(255, 204, 0, 0.6);
}

.testimonial-card-v1 {
    opacity: 0;
    transform: translateY(30px) scale(0.95);
    animation: fadeInSlideUp 0.8s ease forwards;
}

.testimonial-card-v1:nth-child(1) { animation-delay: 0.1s; }
.testimonial-card-v1:nth-child(2) { animation-delay: 0.2s; }
.testimonial-card-v1:nth-child(3) { animation-delay: 0.3s; }
.testimonial-card-v1:nth-child(4) { animation-delay: 0.4s; }
.testimonial-card-v1:nth-child(5) { animation-delay: 0.5s; }
.testimonial-card-v1:nth-child(6) { animation-delay: 0.6s; }

@keyframes fadeInSlideUp {
    to {
        opacity: 1;
        transform: translateY(-5px) scale(1);
    }
}


















@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&family=Bebas+Neue&display=swap');

.how-to-play-v1 {
    width: 100%;
    max-width: 1200px;
    margin: 6rem auto;
    padding: 2rem;
    color: #fff;
    font-family: 'Montserrat', sans-serif;
    text-align: center;
}

.how-to-play-title-v1 {
    font-family: 'Bebas Neue', cursive;
    font-size: 3.5rem;
    font-weight: 400;
    letter-spacing: 5px;
    color: #ff9900; /* Aqua color */
    text-shadow: 0 0 15px rgba(0, 240, 255, 0.8), 0 0 30px rgba(0, 240, 255, 0.5);
    margin-bottom: 0.5rem;
}

.how-to-play-tagline-v1 {
    font-size: 1.2rem;
    color: rgba(255, 255, 255, 0.7);
    margin-bottom: 3.5rem;
}

.steps-grid-v1 {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2.5rem;
}

.step-card-v1 {
    position: relative;
    background: rgba(255, 255, 255, 0.05); /* Semi-transparent white */
    backdrop-filter: blur(20px);
    border-radius: 20px;
    padding: 3rem 2rem;
    border: 1px solid rgba(0, 240, 255, 0.2);
    box-shadow: 0 0 30px rgba(0, 240, 255, 0.1), inset 0 0 15px rgba(0, 240, 255, 0.1);
    transition: transform 0.4s ease, box-shadow 0.4s ease;
    cursor: pointer;
    transform: perspective(1000px) rotateX(5deg);
}

.step-card-v1:hover {
    transform: perspective(1000px) rotateX(0deg) scale(1.05);
    box-shadow: 0 0 50px rgba(0, 240, 255, 0.4), inset 0 0 20px rgba(0, 240, 255, 0.3);
}

.step-number {
    position: absolute;
    top: -20px;
    left: 50%;
    transform: translateX(-50%);
    font-family: 'Bebas Neue', cursive;
    font-size: 4rem;
    font-weight: 700;
    z-index: 0;

    /* Unique gradient color for the numbers */
    background: linear-gradient(45deg, #ff9900, #ff6b6b);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    opacity: 1; /* Made fully opaque */
    text-shadow: 0 0 10px rgba(255, 204, 0, 0.5);
}

.step-icon {
    font-size: 3rem;
    margin-bottom: 1rem;
    position: relative;
    color: #ff9900; /* Gold for contrast */
    text-shadow: 0 0 15px rgba(255, 204, 0, 0.8);
    z-index: 1;
    transition: transform 0.3s ease;
    margin-top: 2rem; /* Added gap below the numbers */
}

.step-card-v1:hover .step-icon {
    transform: scale(1.1) rotate(-5deg);
}

.step-title-v1 {
    font-family: 'Bebas Neue', cursive;
    font-size: 2rem;
    letter-spacing: 2px;
    color: #fff;
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
    margin-top: 0;
    margin-bottom: 1rem;
}

.step-description-v1 {
    font-size: 1.1rem;
    color: rgba(255, 255, 255, 0.8);
    line-height: 1.6;
}

/* Animation for cards on load */
.step-card-v1 {
    opacity: 0;
    transform: translateY(30px);
    animation: fadeInSlideUp 0.8s ease forwards;
}

.step-card-v1:nth-child(1) { animation-delay: 0.1s; }
.step-card-v1:nth-child(2) { animation-delay: 0.2s; }
.step-card-v1:nth-child(3) { animation-delay: 0.3s; }

@keyframes fadeInSlideUp {
    to {
        opacity: 1;
        transform: translateY(0) perspective(1000px) rotateX(5deg);
    }
}















@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&family=Bebas+Neue&display=swap');

.featured-game-v3 {
    width: 100%;
    max-width: 1200px;
    margin: 4rem auto;
    padding: 2rem;
    color: #fff;
    font-family: 'Montserrat', sans-serif;
    position: relative;
}

.game-info-card-v3 {
    position: relative;
    background: #111; /* Solid dark background */
    border: 2px solid rgba(0, 240, 255, 0.2);
    border-radius: 20px;
    padding: 2rem;
    display: flex;
    flex-direction: column;
    gap: 2rem;
    box-shadow: 0 0 20px rgba(0, 240, 255, 0.2);
    z-index: 1;
}

.card-glow-v3 {
    position: absolute;
    top: -5px;
    left: -5px;
    right: -5px;
    bottom: -5px;
    border-radius: 25px;
    background: linear-gradient(45deg, #ff9900, #ff9900, #8a2be2);
    background-size: 200% 200%;
    filter: blur(10px);
    opacity: 0.6;
    animation: gradientPulse 10s ease infinite;
    z-index: 0;
}

@keyframes gradientPulse {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

.game-content-v3 {
    position: relative;
    z-index: 2;
}

.game-title-v3 {
    font-family: 'Bebas Neue', cursive;
    font-size: 3rem;
    font-weight: 400;
    letter-spacing: 4px;
    color: #f6f6f6;
    text-shadow: 0 0 10px rgba(0, 240, 255, 0.8);
    margin: 0 0 1rem 0;
}

.game-stats-v3 {
    display: flex;
    gap: 2rem;
    margin-bottom: 2rem;
}

.stat-item-v3 h4 {
    font-size: 1.1rem;
    color: rgba(255, 255, 255, 0.8);
    margin: 0 0 0.2rem 0;
}

.stat-item-v3 span {
    font-size: 1.5rem;
    font-weight: bold;
    color: #ffffff;
    text-shadow: 0 0 8px rgba(255, 204, 0, 0.7);
}

.game-description-v3 {
    font-size: 1rem;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.9);
}

.play-btn-wrapper-v3 {
    position: relative;
    z-index: 2;
    text-align: center;
}

.play-btn-v3 {
    display: inline-block;
    padding: 1rem 3rem;
    background: linear-gradient(45deg, #ff9900, #8a2be2);
    border: none;
    border-radius: 50px;
    color: #fff;
    text-decoration: none;
    font-family: 'Bebas Neue', cursive;
    font-size: 1.5rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    box-shadow: 0 0 20px rgba(0, 240, 255, 0.6);
    transition: all 0.4s ease;
}

.play-btn-v3:hover {
    transform: scale(1.05);
    box-shadow: 0 0 40px rgba(0, 240, 255, 0.8);
}















@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&family=Bebas+Neue&display=swap');

.tournament-section-v2 {
    width: 100%;
    max-width: 1200px;
    margin: 6rem auto;
    padding: 2rem;
    position: relative;
    overflow: hidden; /* Contains the animated background */
    display: flex;
    justify-content: center;
    align-items: center;
    height: 500px;
    font-family: 'Montserrat', sans-serif;
}

/* Animated grid background effect */
.tournament-background-grid {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: 50px 50px;
    background-image: 
        linear-gradient(to right, rgba(0, 240, 255, 0.1) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(0, 240, 255, 0.1) 1px, transparent 1px);
    opacity: 0.3;
    animation: grid-pan 10s linear infinite;
    z-index: 0;
}

@keyframes grid-pan {
    from { background-position: 0 0; }
    to { background-position: -50px 0; }
}

.tournament-card-v2 {
    position: relative;
    padding: 3rem 4rem;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(15px);
    border-radius: 20px;
    text-align: center;
    border: 2px solid rgba(0, 240, 255, 0.3);
    box-shadow: 0 0 40px rgba(0, 240, 255, 0.3);
    z-index: 1;
    transform: perspective(1000px) rotateY(-5deg) rotateX(5deg);
    transition: all 0.5s ease;
}

.tournament-card-v2:hover {
    transform: perspective(1000px) rotateY(0deg) rotateX(0deg) scale(1.05);
    box-shadow: 0 0 60px rgba(0, 240, 255, 0.5), 0 0 20px rgba(255, 204, 0, 0.3);
}

.card-glow-v2 {
    position: absolute;
    top: -5px;
    left: -5px;
    right: -5px;
    bottom: -5px;
    border-radius: 25px;
    background: linear-gradient(45deg, #ff9900, #ff9900, #8a2be2);
    background-size: 200% 200%;
    filter: blur(10px);
    opacity: 0.7;
    animation: gradientPulse 8s ease-in-out infinite;
    z-index: -1;
}

@keyframes gradientPulse {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

.tournament-title-v2 {
    font-family: 'Bebas Neue', cursive;
    font-size: 4rem;
    font-weight: 400;
    letter-spacing: 5px;
    color: #fff;
    text-shadow: 0 0 15px rgba(0, 240, 255, 0.8), 0 0 30px rgba(0, 240, 255, 0.5);
    margin: 0 0 1rem 0;
}

.tournament-tagline-v2 {
    font-size: 1.2rem;
    color: rgba(255, 255, 255, 0.8);
    margin-bottom: 2.5rem;
}

.join-btn-v2 {
    display: inline-block;
    padding: 1rem 3rem;
    background: linear-gradient(45deg, #ff9900, #ff6b6b);
    border: none;
    border-radius: 50px;
    color: #fff;
    text-decoration: none;
    font-family: 'Bebas Neue', cursive;
    font-size: 1.5rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    box-shadow: 0 0 20px rgba(255, 204, 0, 0.6);
    transition: all 0.4s ease;
    animation: buttonPulse 2s infinite alternate;
}

.join-btn-v2:hover {
    transform: scale(1.1);
    box-shadow: 0 0 30px rgba(255, 204, 0, 0.8), 0 0 10px rgba(255, 107, 107, 0.8);
}

@keyframes buttonPulse {
    0% { box-shadow: 0 0 10px rgba(255, 204, 0, 0.6); }
    100% { box-shadow: 0 0 25px rgba(255, 204, 0, 0.8); }
}








@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&family=Bebas+Neue&display=swap');

.why-choose-us-v3 {
    width: 100%;
    max-width: 1300px;
    margin: 1rem auto;
    padding: 2rem;
    color: #fff;
    font-family: 'Montserrat', sans-serif;
    text-align: center;
}

.choose-us-header-v3 {
    margin-bottom: 4rem;
}

.choose-us-title-v3 {
    font-family: 'Bebas Neue', cursive;
    font-size: 3.5rem;
    font-weight: 400;
    letter-spacing: 5px;
    color: #ff9900;
    text-shadow: 0 0 15px rgba(0, 240, 255, 0.8), 0 0 30px rgba(0, 240, 255, 0.5);
    margin-bottom: 0.5rem;
}

.choose-us-tagline-v3 {
    font-size: 1.2rem;
    color: rgba(255, 255, 255, 0.7);
    margin: 0;
}

.benefit-cores-grid-v3 {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 3rem;
}

.benefit-core-v3 {
    position: relative;
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(20px);
    border-radius: 20px;
    padding: 3rem 2rem;
    border: 1px solid rgba(0, 240, 255, 0.2);
    box-shadow: 0 0 30px rgba(0, 240, 255, 0.1), inset 0 0 15px rgba(0, 240, 255, 0.1);
    transition: all 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    transform: perspective(1000px) rotateY(5deg) scale(0.95);
    overflow: hidden;
}

.benefit-core-v3:hover {
    transform: perspective(1000px) rotateY(0deg) scale(1.05);
    box-shadow: 0 0 60px rgba(0, 240, 255, 0.4), inset 0 0 20px rgba(0, 240, 255, 0.3);
}

/* Animated glow effect on hover */
.benefit-core-v3::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(0, 240, 255, 0.3) 0%, transparent 70%);
    opacity: 0;
    transition: opacity 0.5s ease;
    animation: core-spin 10s linear infinite;
}

.benefit-core-v3:hover::before {
    opacity: 1;
}

@keyframes core-spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.core-icon {
    font-size: 3.5rem;
    display: inline-block;
    color: #ff9900;
    text-shadow: 0 0 15px rgba(255, 204, 0, 0.8);
    margin-bottom: 1.5rem;
    transition: transform 0.3s ease;
}

.benefit-core-v3:hover .core-icon {
    transform: scale(1.1) rotate(10deg);
}

.core-title-v3 {
    font-family: 'Bebas Neue', cursive;
    font-size: 2rem;
    letter-spacing: 2px;
    color: #fff;
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
    margin-top: 0;
    margin-bottom: 1rem;
}

.core-description-v3 {
    font-size: 1rem;
    color: rgba(255, 255, 255, 0.8);
    line-height: 1.6;
}























/* JavaScript for interactivity */
/* You will need to add this script to your HTML file to make the accordion work */



        /* Content Sections */
        .content-container {
            padding: 4rem 2rem;
            max-width: 1400px;
            margin: 0 auto;
        }

        .section-header {
            text-align: center;
            margin-bottom: 3rem;
        }

        .section-header h2 {
            font-family: 'Orbitron', sans-serif;
            font-size: 2.5rem;
            font-weight: 700;
            margin-bottom: 0.5rem;
        }

        .section-header p {
            font-size: 1rem;
            color: var(--text-muted);
        }

        .games-grid, .providers-grid, .blog-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
            gap: 1.5rem;
        }

        .game-card {
            background-color: var(--card-bg);
            border-radius: 12px;
            overflow: hidden;
            box-shadow: 0 5px 20px rgba(0,0,0,0.2);
            transition: transform 0.3s, box-shadow 0.3s;
            position: relative;
            cursor: pointer;
        }

        .game-card:hover {
            transform: translateY(-8px);
            box-shadow: 0 10px 30px rgba(0,0,0,0.4);
        }

        .game-card img {
            width: 100%;
            height: 200px;
            object-fit: cover;
            transition: transform 0.5s;
        }

        .game-card:hover img {
            transform: scale(1.05);
        }

        .game-info {
            padding: 1rem;
            text-align: center;
        }

        .game-info h4 {
            font-size: 1.1rem;
            margin: 0;
            color: var(--text-light);
        }

        .game-info p {
            font-size: 0.8rem;
            color: var(--text-muted);
            margin: 0.25rem 0 0;
        }

        /* Promo Section */
        .promo-section {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 2rem;
            margin-top: 4rem;
        }

        .promo-card {
            background-color: var(--card-bg);
            border-radius: 12px;
            padding: 2rem;
            text-align: center;
            box-shadow: 0 5px 20px rgba(0,0,0,0.2);
            transition: transform 0.3s;
        }
        
        .promo-card:hover {
            transform: translateY(-8px);
        }

        .promo-card i {
            font-size: 3rem;
            color: var(--accent-orange);
            margin-bottom: 1rem;
        }

        .promo-card h3 {
            font-family: 'Orbitron', sans-serif;
            font-size: 1.5rem;
            margin: 0 0 0.5rem;
        }

        .promo-card p {
            color: var(--text-muted);
        }

        /* Getting Started Section */
        .getting-started-section {
            background-color: var(--secondary-bg);
            border-radius: 12px;
            padding: 3rem;
            margin-top: 4rem;
            text-align: center;
        }

        .getting-started-section h2 {
            font-family: 'Orbitron', sans-serif;
            font-size: 2rem;
            font-weight: 700;
            margin-bottom: 1rem;
        }

        .getting-started-section p {
            color: var(--text-muted);
            font-size: 1rem;
            max-width: 800px;
            margin: 0 auto 2rem;
        }

        .steps-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 2rem;
        }

        .step-card {
            background-color: var(--card-bg);
            border-radius: 12px;
            padding: 2rem;
            text-align: left;
            box-shadow: 0 5px 20px rgba(0,0,0,0.2);
        }

        .step-card i {
            font-size: 2.5rem;
            color: var(--accent-orange);
            margin-bottom: 1rem;
        }

        .step-card h4 {
            font-family: 'Orbitron', sans-serif;
            font-size: 1.25rem;
            margin: 0 0 0.5rem;
        }

        .step-card p {
            font-size: 0.9rem;
            color: var(--text-muted);
        }

        /* New Sections */
        .benefits-grid, .crypto-grid, .testimonials-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 1.5rem;
        }

        .benefit-card {
            background-color: var(--card-bg);
            border-radius: 12px;
            padding: 2rem;
            text-align: center;
            box-shadow: 0 5px 20px rgba(0,0,0,0.2);
        }

        .benefit-card i {
            font-size: 2.5rem;
            color: var(--accent-orange);
            margin-bottom: 1rem;
        }

        .benefit-card h4 {
            font-family: 'Orbitron', sans-serif;
            font-size: 1.2rem;
            margin: 0 0 0.5rem;
        }

        .benefit-card p {
            font-size: 0.9rem;
            color: var(--text-muted);
        }


        .crypto-card {
            background-color: var(--card-bg);
            border-radius: 12px;
            padding: 2rem;
            text-align: center;
        }

        .crypto-card i {
            font-size: 3rem;
            color: var(--accent-orange);
            margin-bottom: 1rem;
        }

        .crypto-card h4 {
            font-size: 1.2rem;
            margin: 0;
        }

        .testimonial-card {
            background-color: var(--card-bg);
            border-radius: 12px;
            padding: 2rem;
            box-shadow: 0 5px 20px rgba(0,0,0,0.2);
        }

        .testimonial-card blockquote {
            margin: 0;
            font-style: italic;
            color: var(--text-light);
            font-size: 1rem;
        }

        .testimonial-card cite {
            display: block;
            margin-top: 1rem;
            font-weight: 700;
            color: var(--accent-orange);
        }

        .tournament-section {
            background: url('https://images.unsplash.com/photo-1621376882068-085e68344e1c?q=80&w=1770&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D') no-repeat center center/cover;
            border-radius: 12px;
            padding: 5rem 2rem;
            margin-top: 4rem;
            text-align: center;
            box-shadow: 0 10px 30px rgba(0,0,0,0.4);
            position: relative;
        }

        .tournament-overlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.7);
            border-radius: 12px;
        }

        .tournament-content {
            position: relative;
            z-index: 1;
        }

        .tournament-content h2 {
            font-family: 'Orbitron', sans-serif;
            font-size: 3rem;
            font-weight: 900;
            color: var(--accent-orange);
            text-shadow: 0 0 15px rgba(255, 145, 0, 0.5);
            margin-bottom: 1rem;
        }

        .tournament-content p {
            font-size: 1.2rem;
            max-width: 800px;
            margin: 0 auto 2rem;
            color: var(--text-light);
        }

        .provider-logo {
            background-color: var(--card-bg);
            border-radius: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 1.5rem;
            height: 100px;
            box-shadow: 0 5px 15px rgba(0,0,0,0.2);
            transition: transform 0.3s;
        }

        .provider-logo:hover {
            transform: scale(1.05);
        }

        .provider-logo img {
            max-width: 100%;
            max-height: 100%;
            object-fit: contain;
        }

       













        @import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Montserrat:wght@400;700&display=swap');

.bonus-stack-v5 {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    max-width: 700px;
    margin: 8rem auto;
    position: relative;
}

.bonus-layer-v5 {
    position: relative;
    width: 100%;
    text-align: center;
    padding: 2.5rem 3rem;
    box-shadow: 0 0 30px rgba(0, 240, 255, 0.3);
    border-radius: 15px;
    transform: skewY(-3deg);
    transition: transform 0.4s ease-in-out, box-shadow 0.4s ease-in-out;
}

.bonus-stack-v5:hover .bonus-layer-v5 {
    transform: skewY(0deg);
}

.bonus-layer-v5.layer-top {
    background: linear-gradient(135deg, rgba(0, 255, 255, 0.1), rgba(0, 150, 255, 0.15));
    border: 2px solid rgba(0, 255, 255, 0.5);
    z-index: 3;
    margin-bottom: -1rem;
}

.bonus-layer-v5.layer-middle {
    background: linear-gradient(135deg, rgba(0, 150, 255, 0.15), rgba(0, 200, 255, 0.1));
    border: 2px solid rgba(0, 255, 255, 0.4);
    z-index: 2;
    margin-bottom: -1rem;
}

.bonus-layer-v5.layer-bottom {
    background: linear-gradient(135deg, rgba(0, 100, 255, 0.2), rgba(0, 50, 255, 0.1));
    border: 2px solid rgba(0, 255, 255, 0.3);
    z-index: 1;
}

.bonus-title-v5 {
    font-family: 'Bebas Neue', cursive;
    font-size: 3.5rem;
    color: #ff9900;
    letter-spacing: 3px;
    text-shadow: 0 0 20px rgba(0, 240, 255, 0.7);
    margin: 0;
}

.bonus-subtitle-v5 {
    font-family: 'Montserrat', sans-serif;
    font-size: 1.2rem;
    font-weight: 700;
    color: #fff;
    letter-spacing: 1px;
}

.bonus-details-v5 {
    text-align: left;
    color: #fff;
}

.details-heading {
    font-family: 'Bebas Neue', cursive;
    font-size: 2rem;
    color: #ff9900;
    text-shadow: 0 0 10px rgba(255, 204, 0, 0.5);
    margin-bottom: 1rem;
}

.details-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.details-list li {
    font-family: 'Montserrat', sans-serif;
    font-size: 1.1rem;
    margin-bottom: 0.8rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.9);
}

.list-icon {
    margin-right: 0.8rem;
}

.claim-btn-v5 {
    display: inline-block;
    padding: 1.2rem 3rem;
    background: linear-gradient(45deg, #ff9900, #ff8c00);
    border: none;
    border-radius: 50px;
    color: #000;
    text-decoration: none;
    font-family: 'Bebas Neue', cursive;
    font-size: 1.5rem;
    letter-spacing: 1px;
    text-transform: uppercase;
    box-shadow: 0 0 20px rgba(255, 140, 0, 0.6);
    transition: all 0.4s ease;
}

.claim-btn-v5:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(255, 140, 0, 0.8), 0 0 10px rgba(255, 204, 0, 0.8);
    background: linear-gradient(45deg, #ff8c00, #ff9900);
}

















@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&family=Bebas+Neue&display=swap');

.blog-section-v6 {
    width: 100%;
    max-width: 1200px;
    margin: 6rem auto;
    padding: 2rem;
    color: #fff;
    font-family: 'Montserrat', sans-serif;
}

.blog-header-v6 {
    text-align: center;
    margin-bottom: 4rem;
}

.blog-title-v6 {
    font-family: 'Bebas Neue', cursive;
    font-size: 3.5rem;
    font-weight: 400;
    letter-spacing: 5px;
    color: #ff9900;
    text-shadow: 0 0 15px rgba(0, 240, 255, 0.8);
    margin: 0 0 0.5rem 0;
}

.blog-tagline-v6 {
    font-size: 1.2rem;
    color: rgba(255, 255, 255, 0.7);
    margin: 0;
}

.blog-grid-v6 {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 2.5rem;
}

.blog-card-v6 {
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(10px);
    border-radius: 15px;
    overflow: hidden;
    border: 1px solid rgba(0, 240, 255, 0.2);
    box-shadow: 0 0 20px rgba(0, 240, 255, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    display: flex;
    flex-direction: column;
}

.blog-card-v6:hover {
    transform: translateY(-10px);
    box-shadow: 0 10px 40px rgba(0, 240, 255, 0.4);
}

.card-image-v6 img {
    width: 100%;
    height: auto;
    display: block;
}

.card-content-v6 {
    padding: 1.5rem;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

.blog-category-v6 {
    display: inline-block;
    background: #ff9900;
    color: #000;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 1px;
    padding: 0.3rem 0.8rem;
    border-radius: 50px;
    text-transform: uppercase;
    margin-bottom: 1rem;
}

.blog-post-title-v6 {
    font-family: 'Bebas Neue', cursive;
    font-size: 1.8rem;
    letter-spacing: 1px;
    color: #fff;
    margin: 0 0 0.5rem 0;
}

.blog-excerpt-v6 {
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.8);
    line-height: 1.5;
    flex-grow: 1;
}

.card-footer-v6 {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 1.5rem;
}

.read-time {
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.5);
}

.read-more-btn-v6 {
    text-decoration: none;
    font-weight: bold;
    color: #ff9900;
    transition: color 0.3s ease;
}

.read-more-btn-v6:hover {
    color: #ff9900;
}













@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&family=Bebas+Neue&display=swap');

.footer-layout-v7 {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 3rem 5%;
    background: rgba(0, 0, 0, 0.4);
    border-top: 2px solid rgba(0, 255, 255, 0.2);
    position: relative;
    color: #fff;
    font-family: 'Montserrat', sans-serif;
    gap: 2rem;
}

.footer-layout-v7::before {
    content: '';
    position: absolute;
    top: -2px;
    left: 0;
    width: 100%;
    height: 2px;
    background: linear-gradient(90deg, transparent, #ff9900, transparent);
    box-shadow: 0 0 10px #ff9900;
}

.footer-primary-v7,
.footer-secondary-v7 {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.footer-logo-v7 {
    margin-bottom: 1.5rem;
}

.footer-logo-v7 h2 {
    font-family: 'Bebas Neue', cursive;
    font-size: 2.5rem;
    color: #fff;
    letter-spacing: 2px;
    margin: 0;
}

.footer-logo-v7 h2 span {
    color: #ff9900;
    text-shadow: 0 0 10px rgba(0, 240, 255, 0.5);
}

.social-icons-v7 {
    display: flex;
    gap: 1.5rem;
}

.social-icons-v7 a {
    color: rgba(255, 255, 255, 0.6);
    font-size: 1.5rem;
    transition: color 0.3s ease, transform 0.3s ease;
}

.social-icons-v7 a:hover {
    color: #ff9900;
    transform: translateY(-5px) scale(1.1);
}

.footer-secondary-v7 {
    align-items: flex-end;
    text-align: right;
}

.footer-links-v7 {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 1.5rem;
    margin-bottom: 1.5rem;
}

.footer-links-v7 li a {
    color: rgba(255, 255, 255, 0.8);
    text-decoration: none;
    font-size: 1rem;
    transition: color 0.3s ease;
}

.footer-links-v7 li a:hover {
    color: #ff9900;
}

.copyright-v7 {
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.4);
    margin: 0;
}

@media (max-width: 768px) {
    .footer-layout-v7 {
        flex-direction: column;
        text-align: center;
        padding: 2rem 5%;
    }

    .footer-primary-v7,
    .footer-secondary-v7 {
        align-items: center;
    }

    .footer-links-v7 {
        justify-content: center;
    }

    .footer-links-v7 li {
        margin: 0.5rem 0;
    }
}








.video-loader-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.9);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
}

.video-loader-container video {
    max-width: 500px; /* Adjust size as needed */
    height: auto;
}




/* Container for the unique breadcrumb */
.casino-breadcrumb-tag {
    background-color: #1a1a1a;
    padding: 10px;
    border-radius: 8px;
    display: inline-block;
    font-family: 'Segoe UI', Arial, sans-serif;
    width: 1550px;
}

/* List container */
.casino-breadcrumb-tag ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
}

/* Base styles for list items (the tags) */
.casino-breadcrumb-tag li {
    font-size: 1em;
    position: relative;
    padding: 8px 15px;
    background-color: #2e2e2e; /* Darker gray background for each tag */
    color: #f0f0f0;
    margin-right: 15px; /* Space between tags */
    border-radius: 5px;
    transition: background-color 0.3s ease;
}

/* Create the angled separator using a pseudo-element */
.casino-breadcrumb-tag li:not(:last-child)::after {
    content: '';
    position: absolute;
    top: 0;
    right: -15px; /* Position the separator */
    width: 0;
    height: 0;
    border-top: 18px solid transparent;
    border-bottom: 18px solid transparent;
    border-left: 15px solid #2e2e2e; /* Color of the angled piece */
    z-index: 1; /* Ensures it is on top */
}

/* Hover effect on tags */
.casino-breadcrumb-tag li:hover {
    background-color: #444;
}

/* Styling for the links */
.casino-breadcrumb-tag a {
    text-decoration: none;
    color: #f0f0f0;
}

/* The unique, glowing style for the active tag */
.casino-breadcrumb-tag .active-tag {
    background: linear-gradient(45deg, #ff9900, #ff9900); /* A vibrant blue background */
    font-weight: bold;
    box-shadow: 0 0 15px 5px rgba(0, 123, 255, 0.7); /* The glowing effect */
    animation: glow-pulse 2.5s infinite alternate; /* A pulsating animation */
    padding-right: 15px; /* No space for separator on the last tag */
}

/* Animation for the active tag glow */
@keyframes glow-pulse {
    from {
        box-shadow: 0 0 10px 3px #ff9900;
    }
    to {
        box-shadow: 0 0 20px 8px #ff9900;
    }
}














/* Overall Section Styling */
.contact-section {
    background-color: #0d0d0d;
    padding: 80px 20px;
    font-family: Arial, sans-serif;
    color: #f0f0f0;
    display: flex;
    justify-content: center;
}

/* Main Form Container - The Unique Element */
.contact-form-container {
    background-color: #1a1a1a;
    border-radius: 20px;
    padding: 40px;
    max-width: 800px;
    width: 100%;
    box-shadow: 0 0 25px 5px rgba(0, 191, 255, 0.2);
    transition: box-shadow 0.3s ease;
}

/* Form Header */
.contact-form-header {
    text-align: center;
    margin-bottom: 30px;
}

.contact-form-header h2 {
    font-size: 2.5em;
    margin-bottom: 10px;
    color: #fff;
}

.contact-form-header p {
    color: #b0b0b0;
    font-style: italic;
}

/* Layout for name and email on one row */
.form-row {
    display: flex;
    gap: 20px;
    margin-bottom: 20px;
}

.form-group {
    flex: 1;
    margin-bottom: 20px;
}

.form-group label {
    display: block;
    margin-bottom: 8px;
    font-weight: bold;
    color: #b0b0b0;
}

/* Unique Glowing Input Fields */
.form-group input,
.form-group textarea {
    width: 100%;
    padding: 12px;
    background-color: #2b2b2b;
    border: 1px solid #444;
    color: #f0f0f0;
    border-radius: 8px;
    box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.3); /* Subtle inner shadow */
    transition: border-color 0.3s, box-shadow 0.3s;
}

/* The Glowing Effect on Focus */
.form-group input:focus,
.form-group textarea:focus {
    outline: none;
    border-color: #00bfff; /* Bright blue border on focus */
    box-shadow: 0 0 10px rgba(0, 191, 255, 0.7); /* The glowing effect */
}

/* Captcha Placeholder */
.captcha-placeholder {
    height: 60px;
    background-color: #2b2b2b;
    border: 1px dashed #444;
    border-radius: 8px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #777;
    margin-bottom: 25px;
}

/* Submit Button */
.submit-btn {
    display: block;
    width: 100%;
    padding: 15px;
    background-color: #00bfff; /* Vibrant accent color */
    color: #1a1a1a;
    border: none;
    border-radius: 8px;
    font-size: 1.2em;
    font-weight: bold;
    cursor: pointer;
    box-shadow: 0 0 15px rgba(0, 191, 255, 0.5);
    transition: background-color 0.3s, transform 0.3s, box-shadow 0.3s;
}

.submit-btn:hover {
    background-color: #0099cc;
    transform: translateY(-2px);
    box-shadow: 0 5px 20px rgba(0, 191, 255, 0.7);
}

/* Confirmation Message */
.confirmation-message {
    text-align: center;
    padding: 50px 20px;
}

.confirmation-icon {
    font-size: 4em;
    color: #4CAF50;
    margin-bottom: 20px;
    animation: bounce-in 1s ease-out;
}

@keyframes bounce-in {
    0% { transform: scale(0); opacity: 0; }
    50% { transform: scale(1.2); opacity: 1; }
    100% { transform: scale(1); }
}

@media (max-width: 768px) {
    .form-row {
        flex-direction: column;
        gap: 0;
    }
}













/* Overall Section Styling */
.newsletter-section {
    background-color: #0d0d0d;
    padding: 80px 20px;
    font-family: Arial, sans-serif;
    color: #f0f0f0;
    display: flex;
    justify-content: center;
}

/* Form Container */
.newsletter-form-container {
    background-color: #1a1a1a;
    border-radius: 20px;
    padding: 40px;
    max-width: 500px;
    width: 100%;
    text-align: center;
    box-shadow: 0 0 25px 5px rgba(0, 191, 255, 0.2);
}

.newsletter-form-container h2 {
    font-size: 2.5em;
    margin-bottom: 10px;
    color: #fff;
}

.newsletter-form-container p {
    color: #b0b0b0;
    margin-bottom: 30px;
}

/* Form Groups and Inputs */
.form-group {
    margin-bottom: 20px;
}

.form-group label {
    display: block;
    text-align: left;
    margin-bottom: 8px;
    font-weight: bold;
    color: #b0b0b0;
}

.form-group input {
    width: 100%;
    padding: 12px;
    background-color: #2b2b2b;
    border: 1px solid #444;
    color: #f0f0f0;
    border-radius: 8px;
    transition: border-color 0.3s, box-shadow 0.3s;
}

/* Glowing effect on focus */
.form-group input:focus {
    outline: none;
    border-color: #00bfff;
    box-shadow: 0 0 10px rgba(0, 191, 255, 0.7);
}

/* Custom Checkbox Styling */
.checkbox-group {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.checkbox-group input[type="checkbox"] {
    width: auto;
}

.checkbox-group a {
    color: #00bfff;
    text-decoration: none;
}

/* Subscribe Button */
.subscribe-btn {
    display: block;
    width: 100%;
    padding: 15px;
    background-color: #00bfff;
    color: #1a1a1a;
    border: none;
    border-radius: 8px;
    font-size: 1.2em;
    font-weight: bold;
    cursor: pointer;
    box-shadow: 0 0 15px rgba(0, 191, 255, 0.5);
    transition: background-color 0.3s, transform 0.3s, box-shadow 0.3s;
}

.subscribe-btn:hover {
    background-color: #0099cc;
    transform: translateY(-2px);
    box-shadow: 0 5px 20px rgba(0, 191, 255, 0.7);
}

/* Confirmation Message */
.confirmation-message {
    text-align: center;
    padding: 50px 20px;
}

.confirmation-icon {
    font-size: 4em;
    color: #4CAF50;
    margin-bottom: 20px;
    animation: bounce-in 1s ease-out;
}

@keyframes bounce-in {
    0% { transform: scale(0); opacity: 0; }
    50% { transform: scale(1.2); opacity: 1; }
    100% { transform: scale(1); }
}