/* General Reset and Font (Replace with your actual font if needed) */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: sans-serif; /* Use your preferred gaming/modern font */
}

body {
    background-color: #0b0630; /* Dark background for the whole page */
    color: white;
}

/* --- Navigation Bar Styling --- */
.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 10%;
    position: relative; /* Stays above the banner background */
    z-index: 10;
}

.logo {
    font-size: 24px;
    font-weight: bold;
    color: #ff4747; /* Example logo color */
}

.nav-links a {
    color: white;
    text-decoration: none;
    margin: 0 15px;
    font-size: 14px;
    opacity: 0.7;
    transition: opacity 0.3s;
}

.nav-links a:hover {
    opacity: 1;
}

.user-actions a {
    text-decoration: none;
    color: white;
    margin-left: 20px;
    font-size: 14px;
}

.login-btn {
    opacity: 0.7;
}

.join-btn {
    background: #ff4747; /* Neon red */
    padding: 10px 20px;
    border-radius: 50px;
    font-weight: bold;
    color: white;
}


/* --- Banner Section Styling --- */

.banner-section {
    position: relative;
    height: 750px; /* Adjust height as needed */
    overflow: hidden;
    /* Set the main background image */
    background: url('./banner-bg.png') no-repeat center center;
    background-size: cover;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding-top: 100px;
}

.banner-content {
    position: relative;
    z-index: 5; /* Ensure text is above character images */
}

.subtitle {
    font-size: 18px;
    font-weight: 500;
    letter-spacing: 5px;
    margin-bottom: 10px;
    color: #a46dff; /* Purple accent */
}

.title {
    font-size: 80px;
    font-weight: 900;
    line-height: 1;
    margin-bottom: 20px;
    /* Create the gradient effect for the title text */
    background: linear-gradient(to right, #e290ff, #51ff82);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.description {
    font-size: 18px;
    max-width: 600px;
    margin: 0 auto 30px;
    line-height: 1.5;
}

.description strong {
    color: #ffeb3b; /* Highlighted text */
    font-weight: bold;
}

.cta-button {
    display: inline-flex;
    align-items: center;
    padding: 15px 30px;
    background: linear-gradient(to right, #ff3b71, #8e47ff); /* Gradient background for CTA */
    border: none;
    border-radius: 50px;
    color: white;
    text-decoration: none;
    font-weight: bold;
    font-size: 16px;
    transition: transform 0.2s;
}

.cta-button:hover {
    transform: scale(1.05);
}

.cta-button svg {
    margin-left: 10px;
    width: 14px;
    height: 14px;
}

/* --- Character Images Styling --- */

.banner-images {
    position: absolute;
    bottom: 0; /* Align characters to the bottom of the section */
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: flex-end; /* Ensures images sit on the bottom edge */
    z-index: 2; /* Below the text, above the background */
}

.left-character,
.right-character {
    position: absolute;
    /* We need to adjust these values based on the actual image size 
       to match the provided layout. These are approximations. */
    width: 500px; 
    height: auto;
    bottom: 0;
}

.left-character {
    left: 50%;
    transform: translateX(-100%); /* Center the character by half its width, then shift left */
    /* Fine-tune position */
    margin-left: -150px; 
    bottom: 70px; /* Pull up a bit for the effect */
}

.right-character {
    right: 50%;
    transform: translateX(100%); /* Center the character by half its width, then shift right */
    /* Fine-tune position */
    margin-right: -150px;
    bottom: 70px; /* Pull up a bit for the effect */
}

.versus-icon {
    position: absolute;
    bottom: 100px; /* Position it above the characters' hands */
    max-width: 100%;
    height: auto;
}

/* --- Available Games Bar Styling --- */


.games-wrapper {
    /* Main background: dark */
    background-color: #0b0222; 
    padding-top: 0px; 
    margin-top: -70px; /* Isse woh banner ke niche chipak jaayega */
}

.available-games-container {
   background: linear-gradient(178.07deg, #4609C3 -9.74%, #0E063D 82.69%);
    max-width: 911px;
    margin: 0 auto;
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
    padding: 47px 0 41px;
    text-align: center;
    position: relative;
}



.available-games {
    position: absolute;
    bottom: 0;
    width: 100%;
    background-color: #3b0769; /* Darker purple bar */
    text-align: center;
    padding: 25px 0;
    font-size: 24px;
    font-weight: bold;
    letter-spacing: 2px;
    z-index: 10; /* Ensure it covers the bottom of the characters */
}

/* --- Games Header and Carousel Arrows --- */
.games-header {
    /* Use padding to create space on the sides for the header content */
    padding: 0 5%;
    max-width: 100%; /* Use 100% of the parent container */
    margin-bottom: 30px; 

    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    position: relative;
}

.section-title {
    font-size: 36px;
    font-weight: 900;
    margin-bottom: 5px;
    letter-spacing: 2px;
    color: white;
}

.section-description {
    font-size: 16px;
    color: #cccccc;
}

/* Carousel Arrows (Positioned relative to the games-header) */
.carousel-nav {
    position: absolute;
    top: 0;
    right: 5%; /* Aligned to the right edge of the padding */
    display: flex;
}

.nav-arrow {
    background: none;
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: white;
    width: 35px;
    height: 35px;
    border-radius: 50%;
    margin-left: 10px;
    cursor: pointer;
    transition: background-color 0.3s, border-color 0.3s;
}

.nav-arrow:hover {
    background-color: rgba(255, 255, 255, 0.1);
    border-color: white;
}

/* --- Game Cards Styling --- */
.game-cards-container {
    display: flex;
    justify-content: center;
    gap: 0px;
    padding: 0 5%; /* Add side padding to keep cards off the edge */
    margin-bottom: 50px;
}

/* (Game Card styling is generally the same, ensuring max-width is handled correctly) */
.game-card {
    position: relative;
    width: 170px; 
    border-radius: 20px;
    overflow: hidden;
    transition: transform 0.3s, box-shadow 0.3s;
    cursor: pointer;
}

.game-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.3), 0 0 15px #ff00ff80;
}

.game-image {
    width: 167px;
    height: 206px;
    display: block;
    /* Optional: Add a slight purple-neon border effect on the image */
    border: 5px solid transparent; 
    border-image-slice: 1;
}

.game-info {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 10px 0;
    background: rgba(0, 0, 0, 0.4);
    text-align: center;
}

.game-name {
    font-size: 16px;
    font-weight: bold;
    color: white;
    letter-spacing: 1px;
}

/* --- View All Button Styling --- */
.view-all-btn {
    display: inline-block;
    padding: 15px 35px;
    background: linear-gradient(to right, #ff3b71, #8e47ff);
    border: none;
    border-radius: 50px;
    color: white;
    text-decoration: none;
    font-weight: bold;
    font-size: 16px;
    transition: transform 0.2s;
}

.view-all-btn:hover {
    transform: scale(1.05);
}


/* --- NEW PLAY NOW SECTION (Player of the Week style) --- */

.play-now-section {
    padding: 100px 5%;
    background: url('http://pixner.net/begam/images/players-week-bg.png') no-repeat center center;
    background-size: cover;
    background-attachment: fixed; /* For a subtle parallax/fixed background effect */
    position: relative;
    z-index: 1;
}

/* To overlay a dark filter for better text contrast */
.play-now-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: -1;
}

.section-header {
    text-align: center;
    margin-bottom: 25px;
}

.section-title-alt {
    font-size: 38px;
    font-weight: 900;
    letter-spacing: 2px;
    color: white;
    margin-bottom: 10px;
}

.section-description-alt {
    font-size: 18px;
    color: #cccccc;
}

.play-now-cards-container {
    display: flex;
    justify-content: center;
    gap: 40px; /* More space between bigger cards */
    max-width: 1200px;
    margin: 0 auto;
}

.play-now-card {
    /* Larger size for the card container */
    background: rgba(14, 6, 61, 0.5);
    box-shadow: -6px -12px 34px rgb(15 23 112 / 20%);
    border-radius: 20px;
    border: 1px solid #EDB8FF;

    width: 350px; 
    padding: 12px;
    text-align: center;
    transition: transform 0.3s, box-shadow 0.3s;
}

.play-now-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5), 0 0 20px #a46dff; /* Stronger glow effect */
}

.game-image-wrap {
    position: relative;
    width: 100%;
    padding-top: 90%;
    margin-bottom: 10px;
    overflow: hidden;
    border-radius: 15px;
}

.game-image-large {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    /* Optional: Add a neon outline around the image */
    box-shadow: 0 0 10px rgba(255, 71, 71, 0.5); 
}

.game-title-large {
    display: block;
    font-size: 24px;
    font-weight: bold;
    color: #ff4747; /* Neon text color */
    letter-spacing: 1.5px;
    margin-bottom: 20px;
}

.play-now-btn {
    display: inline-block;
    padding: 12px 30px;
    /* Neon button gradient */
    background: linear-gradient(to right, #51ff82, #a46dff); 
    border: none;
    border-radius: 50px;
    color: #0b0222; /* Dark text for contrast */
    text-decoration: none;
    font-weight: bold;
    font-size: 15px;
    transition: transform 0.2s, box-shadow 0.2s;
}

.play-now-btn:hover {
    transform: scale(1.05);
    box-shadow: 0 0 15px #51ff82;
}

/* Blur Overlay */
.overlay {
    position: fixed;
    top: 0; left: 0;
    width: 100%;
    height: 100%;
    backdrop-filter: blur(10px);
    background: rgba(0,0,0,0.6);
    display: none;
    z-index: 9998;
}

/* Center Modal */
.game-modal {
    position: fixed;
    top: 50%;
    left: 50%;
    width: 70%;
    max-width: 1000px;
    height: 70%;
    background: #111;
    border-radius: 15px;
    transform: translate(-50%, -50%) scale(0.7);
    opacity: 0;
    transition: all 0.3s ease-out;
    z-index: 9999;
    display: none;
    overflow: hidden;
    box-shadow: 0 0 40px rgba(0,0,0,0.6);
}

/* Modal header */
.modal-header {
    background: #000;
    color: #fff;
    padding: 12px 20px;
    font-size: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.close-btn {
    font-size: 30px;
    cursor: pointer;
}

#gameIframe {
    width: 100%;
    height: calc(100% - 60px);
    background: #001d39;
}

/* Show animation */
.game-modal.active {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
}
/* --- Call To Action Section Styling (Updated for Left-Center-Right Layout) --- */

#call-to-action {
    padding: 125px 0;
    background-color: #0b0728;
    background:url("./testimonials-bg.png");
    background-size: cover;
}

#call-to-action .container {
    max-width: 860px;
    margin: 0 auto;
    padding: 0 15px;
}

/* Main Content Wrapper - Use Flexbox for alignment */
#call-to-action .main-content {
    background: #161D85;
    border-radius: 12px;
    display: flex; 
    align-items: center; /* Vertically center all items */
    justify-content: space-between; /* Space out the left, center, and right groups */
    position: relative;
    overflow: hidden;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.4); 
    border: 1px solid rgba(255, 255, 255, 0.1);
}


#call-to-action .row {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: space-between;
}

/* Left Image (Award) Container */
#call-to-action .col-lg-4:nth-child(1) {
    display: flex;
    align-items: center;
}

#call-to-action .main-content img.left {
    height: 256px;
    width: auto;
    margin-right: -195px;
    position: relative;
    z-index: 2;
}

/* Center Text Container */
#call-to-action .col-lg-4:nth-child(2) {
    flex-grow: 1; /* Allows text to take up the middle space */
    text-align: center;
    padding: 0 30px; /* Padding to separate from images */
}

#call-to-action .section-item h4 {
    color: #ffffff;
    font-size: 24px;
    font-weight: 700;
    line-height: 1.4;
    margin: 0;
}

/* Right Group Container (Button + Right Image) */
#call-to-action .col-lg-4:nth-child(3) {
    display: flex;
    align-items: center;
    justify-content: flex-end; /* Push content to the right edge */
    position: relative; /* To position the floating image relative to this */
}

/* Button Area */
#call-to-action .btn-area {
    margin-right: 20px; /* Space between button and right edge */
    position: relative;
    z-index: 3; /* Ensure button is above the glowing image */
}

/* Right Image (The Glowing Circle) */
#call-to-action .col-lg-4:nth-child(3) img {
    height: auto;
    width: auto;
    position: absolute; 
    right: -40px; /* Move it slightly outside the box */
    top: 50%;
    transform: translateY(-50%);
    z-index: 1; /* Send it behind the button */
    opacity: 0.7;
}

/* Custom Button Styling */
#call-to-action a.cmn-btn {
    display: inline-block;
    padding: 12px 21px;
    background-image: linear-gradient(90deg, #ff4c8a 0%, #ff8a4c 100%);
    color: #ffffff;
    font-weight: 600;
    text-decoration: none;
    border-radius: 50px;
    transition: transform 0.3s ease;
    box-shadow: 0 5px 15px rgba(255, 76, 138, 0.4);
    text-transform: uppercase;
    font-size: 17px;
    border: none;
}

#call-to-action a.cmn-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(255, 76, 138, 0.6);
}

/* --- Responsive Adjustments --- */

@media (max-width: 992px) {
    #call-to-action .main-content {
        /* Stack vertically on mobile */
        flex-direction: column;
        text-align: center;
        padding: 30px 20px;
        gap: 20px;
    }
    
    #call-to-action .row {
        /* This row is now irrelevant because the main-content is stacked */
        flex-direction: column;
        gap: 20px;
    }

    /* Left Image (Award) - centered */
    #call-to-action .col-lg-4:nth-child(1) {
        justify-content: center;
        width: 100%;
    }

    /* Text Container - full width */
    #call-to-action .col-lg-4:nth-child(2) {
        text-align: center;
        padding: 0;
        width: 100%;
    }
    
    /* Right Group (Button + Glowing Image) - centered */
    #call-to-action .col-lg-4:nth-child(3) {
        justify-content: center;
        width: 100%;
        height: auto;
    }

    #call-to-action .btn-area {
        margin-right: 0;
    }
    
    /* Hide the floating image on small screens for better centering */
    #call-to-action .col-lg-4:nth-child(3) img {
        display: none; 
    }
}

#about-us-section .overlays {
   
    background-repeat: no-repeat;
    background-position: bottom;
    padding-bottom: 440px;
    margin-top: -40px;}
    #about-us-section .section-header .title, #about-us-section .section-header p {
    margin-bottom: 30px;
}
#about-us-section{
padding: 80px 131px 20px;
}
#counter-section {
    background-image: url("./counter-bg.png");
    background-size: 100%;
    background-repeat: no-repeat;
}
.counter-dark {
    padding: 80px 0;
    background: #0b0630;
    position: relative;
}

.counter-row {
    display: flex;
    justify-content: center;
    gap: 40px;
    flex-wrap: wrap;
}

.counter-box {
    width: 250px;
    height: 240px;
    border: 2px solid rgba(255,255,255,0.2);
    border-radius: 20px;
    text-align: center;
    padding: 40px 20px;
    background: rgba(255, 255, 255, 0.02);
    backdrop-filter: blur(10px);
    transition: all 0.3s ease;
}

.counter-box:hover {
    border-color: rgba(118, 56, 255, 1);
    transform: translateY(-5px);
}

.icon-wrap img {
    width: 70px;
    margin-bottom: 20px;
}

.counter-box h3 {
    font-size: 32px;
    font-weight: 700;
    margin-bottom: 5px;
    color: #ffffff;
}

.counter-box p {
    font-size: 14px;
    font-weight: 500;
    color: #39ff14; /* neon green just like screenshot */
    text-transform: uppercase;
    letter-spacing: 1px;
}
#footer-section {
    background-image: url("./footer-bg.png");
    background-repeat: no-repeat;
    padding-top: 60px;
}
#footer-section 

/* Disclaimer text */
.footer-bottom p {
    color: #cfcfe4;
    line-height: 1.8;
    font-size: 14px;
    max-width: 900px;
    margin: auto;
}

/* Divider line */


/* Divider line */
.footer-line {
    width: 100%;
    height: 1px;
    background: rgba(255,255,255,0.2);
    margin: 40px 0;
}

/* Wrapper to perfectly center menu */
.footer-menu-wrapper {
    display: flex;
    justify-content: center;
    width: 100%;
    margin-top: 20px;
    padding-bottom: 20px;
}

/* Menu styles */
.footer-menu {
    display: flex;
    gap: 50px;
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-menu li a {
    color: #ffffff;
    font-size: 14px;
    text-transform: capitalize;
    letter-spacing: 1px;
    transition: .3s;
}

.footer-menu li a:hover,
.footer-menu li a.active {
    color: #00e7ff;
}

/* Copyright */
.footer-copy {
    text-align: center;
    color: #ffffff;
    margin-top: 30px;
    font-size: 16px;
}

.footer-copy .brand {
    color: #00e7ff;
    font-weight: 600;
}

/* Responsive */
@media (max-width: 768px) {
    .footer-menu {
        gap: 20px !important;
    }

    .footer-menu li a {
        font-size: 14px;
    }
}
/* FAQ Section Background */
.faq-section {
    /* background: #130a18;  */
    background-image: url("./about-bg.png");
    background-repeat: no-repeat;
    padding: 55px;
}

/* Title */
.faq-title {
    text-align: center;
    font-size: 38px;
    color: #fff;
    font-weight: 700;
    margin-bottom: 10px;
}

/* Subtitle */
.faq-subtitle {
    text-align: center;
    color: #bfbfbf;
    margin-bottom: 50px;
}

/* Wrapper */
.faq-wrapper {
    max-width: 850px;
    margin: auto;
}

/* FAQ Item */
.faq-item {
    background: #0b052e;
    border: 1px solid rgba(0, 230, 255, 0.15);
    padding: 0;
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 20px;
    transition: 0.3s;
}

.faq-item.open {
    border-color: #00e7ff;
    box-shadow: 0 0 15px rgba(0, 230, 255, 0.3);
}

/* Question Button */
.faq-question {
    width: 100%;
    text-align: left;
    background: transparent;
    border: none;
    padding: 18px 20px;
    font-size: 20px;
    font-weight: 600;
    color: #fff;
    cursor: pointer;
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.faq-toggle {
    font-size: 28px;
    color: #00e7ff;
    transition: 0.3s;
}

/* Answer */
.faq-answer {
    display: none;
    padding: 0 20px 20px;
    color: #ccc;
    font-size: 16px;
    line-height: 1.6;
}