/* Hero Banner */

.banner {

    background: linear-gradient(90deg, #103852 0%, #0f212e 100%);

    border-radius: 8px;

    padding: 0;

    /* Remove padding to allow image to flush if needed, manage via internal divs */

    margin-top: 16px;

    position: relative;

    overflow: hidden;

    color: white;

    display: flex;

    /* Flex layout */

    align-items: center;

    justify-content: space-between;

    min-height: 360px;

}



.banner-content {

    flex: 1;

    z-index: 2;

    padding: 40px;

    max-width: 55%;

}



.banner-image {

    flex: 1;

    display: flex;

    justify-content: center;

    align-items: center;

    height: 100%;

}



.banner-image img {

    max-width: 100%;

    height: auto;

    object-fit: contain;

    mask-image: linear-gradient(to left, rgba(0, 0, 0, 1) 80%, rgba(0, 0, 0, 0) 100%);

    /* Optional fade effect */

}





.banner h1 {

    font-size: 32px;

    margin-bottom: 12px;

    line-height: 1.2;

}



.banner p {

    color: var(--color-text-secondary);

    margin-bottom: 24px;

}



/* Reduce internal circle distraction if we have real image */

.banner::after {

    display: none;

}



/* Mobile Tweaks */

@media (max-width: 768px) {

    .banner {

        flex-direction: column-reverse;

        text-align: center;

    }



    .banner-content {

        max-width: 100%;

    }



    .bonus-features li {

        justify-content: center;

    }

}





/* Game Grid */

.game-section {

    max-width: 1200px;

    margin: 0 auto;

}



.game-grid {

    display: grid;

    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));

    gap: 16px;

}



.game-card {

    background-color: var(--color-bg-card);

    border-radius: 8px;

    overflow: hidden;

    transition: transform 0.2s, box-shadow 0.2s;

    cursor: pointer;

    position: relative;

    aspect-ratio: 3/4;

    /* Standard poster ratio */

}



.game-card:hover {

    transform: translateY(-4px);

    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);

    background-color: var(--color-bg-card-hover);

}



.game-image {

    width: 100%;

    height: 100%;

    object-fit: cover;

    background-color: #213743;

    /* Placeholder color */

    display: flex;

    align-items: center;

    justify-content: center;

    color: var(--color-text-muted);

    font-weight: 600;

}



.game-overlay {

    position: absolute;

    bottom: 0;

    left: 0;

    right: 0;

    padding: 12px;

    background: linear-gradient(to top, rgba(0, 0, 0, 0.8), transparent);

    opacity: 0;

    transition: opacity 0.2s;

}



.game-card:hover .game-overlay {

    opacity: 1;

}



/* Live Bets Table */

.table-container {

    background-color: var(--color-bg-card);

    border-radius: 8px;

    overflow-x: auto;

}



.bets-table {

    width: 100%;

    border-collapse: collapse;

    font-size: 13px;

    text-align: left;

}



.bets-table th {

    background-color: #213743;

    padding: 12px 16px;

    color: var(--color-text-muted);

    font-weight: 600;

}



.bets-table td {

    padding: 10px 16px;

    border-bottom: 2px solid var(--color-bg-main);

    color: var(--color-text-primary);

}



.bets-table tr:last-child td {

    border-bottom: none;

}



.bets-table tbody tr {

    animation: fadeIn 0.5s ease;

}



@keyframes fadeIn {

    from {

        opacity: 0;

        transform: translateY(-5px);

    }



    to {

        opacity: 1;

        transform: translateY(0);

    }

}



/* Specific columns styles */

.text-green {

    color: var(--color-accent);

}



.text-white {

    color: white;

}



/* Info Block Styles */

.info-block {

    background-color: var(--color-bg-card);

    border-radius: 8px;

    padding: 32px;

}



.info-content {

    max-width: 1000px;

    margin: 0 auto;

}



.info-content h2,

.info-content h3 {

    color: white;

}



.info-content p,

.info-content li {

    font-size: 15px;

}



/* Mobile App Section */

.mobile-app-section {

    background: linear-gradient(135deg, var(--color-bg-card) 0%, #2f4553 100%);

    border-radius: 8px;

    padding: 40px;

    position: relative;

    overflow: hidden;

}



.app-content {

    display: flex;

    align-items: center;

    justify-content: space-between;

    max-width: 900px;

    margin: 0 auto;

    position: relative;

    z-index: 2;

}



.app-text h2 {

    font-size: 28px;

    margin-bottom: 12px;

    line-height: 1.2;

    color: white;

}



.app-text p {

    color: var(--color-text-secondary);

    margin-bottom: 24px;

    max-width: 400px;

    font-size: 16px;

}



.app-buttons {

    display: flex;

    gap: 16px;

}



.app-visual {

    display: flex;

    justify-content: center;

    align-items: center;

}



.mobile-icon {

    width: 100px;

    height: 180px;

    border: 4px solid var(--color-text-muted);

    border-radius: 16px;

    position: relative;

    background-color: var(--color-bg-main);

    display: flex;

    justify-content: center;

    align-items: center;

    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);

}



.mobile-icon .screen {

    width: 85%;

    height: 80%;

    background-color: var(--color-bg-card);

    border-radius: 4px;

    display: flex;

    justify-content: center;

    align-items: center;

}



.mobile-icon .home-button {

    width: 12px;

    height: 12px;

    border-radius: 50%;

    border: 2px solid var(--color-text-muted);

    position: absolute;

    bottom: 8px;

}



@media (max-width: 768px) {

    .app-content {

        flex-direction: column;

        text-align: center;

        gap: 32px;

    }



    .app-text p {

        margin-left: auto;

        margin-right: auto;

    }



    .app-buttons {

        justify-content: center;

    }

}



/* Official Website Section */

.official-website-section {

    max-width: 1200px;

    margin: 0 auto;

}



.official-split {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 40px;

    align-items: center;

}



@media (max-width: 768px) {

    .official-split {

        grid-template-columns: 1fr;

    }



    .official-image-side {

        order: -1;

        /* Image on top on mobile */

    }

}



/* How to Start Playing Section */

.how-to-start-section {

    max-width: 1200px;

    /* Wider for 3 cards */

    margin: 0 auto;

}



.steps-grid {

    display: grid;

    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));

    gap: 24px;

}



.step-card {

    background-color: var(--color-bg-card);

    /* Dark theme consistency */

    border: 1px solid #2f4553;

    border-radius: 12px;

    padding: 24px;

    display: flex;

    flex-direction: column;

}



.step-header {

    margin-bottom: 16px;

}



.step-label {

    display: inline-block;

    background-color: rgba(87, 75, 201, 0.1);

    color: var(--color-accent);

    font-size: 12px;

    font-weight: 700;

    padding: 4px 8px;

    border-radius: 4px;

    margin-bottom: 8px;

}



.step-card h3 {

    font-size: 18px;

    color: white;

    margin: 0;

}



.step-card p {

    color: var(--color-text-secondary);

    font-size: 14px;

    line-height: 1.5;

    flex-grow: 1;

}



/* Visual Mockups */

.step-visual {

    background-color: #0f1923;

    border-radius: 8px;

    overflow: hidden;

    padding: 16px;

    min-height: 160px;

    display: flex;

    align-items: center;

    justify-content: center;

}



/* Mockup 1: Header */

.mockup-header {

    width: 100%;

    height: 40px;

    background-color: #1a2c38;

    border-radius: 4px;

    display: flex;

    align-items: center;

    padding: 0 12px;

    justify-content: space-between;

    margin-bottom: 10px;

}



.mockup-logo {

    width: 20px;

    height: 20px;

    background-color: var(--color-accent);

    border-radius: 50%;

}



.mockup-btn {

    width: 60px;

    height: 20px;

    background-color: var(--color-accent);

    border-radius: 4px;

    font-size: 10px;

    display: flex;

    align-items: center;

    justify-content: center;

    color: white;

}



.mockup-hero {

    width: 100%;

    height: 80px;

    background: linear-gradient(90deg, #1a2c38, #233645);

    border-radius: 4px;

}



/* Mockup 2: Form */

.mockup-form {

    width: 100%;

    background-color: #1a2c38;

    padding: 16px;

    border-radius: 4px;

}



.mockup-title {

    color: white;

    font-size: 12px;

    margin-bottom: 12px;

    text-align: center;

}



.mockup-input {

    width: 100%;

    height: 24px;

    border: 1px solid #2f4553;

    border-radius: 4px;

    margin-bottom: 8px;

    display: flex;

    align-items: center;

    padding-left: 8px;

}



.mockup-input span {

    font-size: 10px;

    color: #55657e;

}



.mockup-submit {

    width: 100%;

    height: 28px;

    background-color: #e91e63;

    /* Use a red/accent for contrast or stick to purple */

    border-radius: 4px;

    color: white;

    font-size: 11px;

    display: flex;

    align-items: center;

    justify-content: center;

}



/* Mockup 3: Modal */

.mockup-modal {

    width: 180px;

    background-color: #1a2c38;

    padding: 16px;

    border-radius: 4px;

    text-align: center;

}



.mockup-modal h4 {

    color: white;

    font-size: 12px;

    margin-bottom: 4px;

}



.mockup-modal p {

    font-size: 10px;

    margin-bottom: 12px;

    color: #8b9bb4;

}



.mockup-confirm-btn {

    width: 100%;

    height: 24px;

    background-color: #f44336;

    border-radius: 4px;

    color: white;

    font-size: 10px;

    display: flex;

    align-items: center;

    justify-content: center;

}



/* FAQ Section */

.faq-section {

    max-width: 1000px;

    margin: 0 auto;

}



.faq-grid {

    display: flex;

    flex-direction: column;

    gap: 12px;

}



.faq-item {

    background-color: var(--color-bg-card);

    border-radius: 8px;

    overflow: hidden;

    border: 1px solid #2f4553;

}



.faq-item summary {

    padding: 16px 24px;

    cursor: pointer;

    font-weight: 600;

    color: white;

    list-style: none;

    /* Remove default triangle */

    display: flex;

    justify-content: space-between;

    align-items: center;

    transition: background-color 0.2s;

}



.faq-item summary::-webkit-details-marker {

    display: none;

}



.faq-item summary:hover {

    background-color: rgba(255, 255, 255, 0.05);

}



.faq-item summary::after {

    content: '+';

    font-size: 20px;

    font-weight: 400;

    color: var(--color-accent);

    transition: transform 0.2s;

}



.faq-item[open] summary::after {

    transform: rotate(45deg);

}



.faq-content {

    padding: 0 24px 24px;

    color: var(--color-text-secondary);

    font-size: 14px;

    line-height: 1.6;

    border-top: 1px solid rgba(255, 255, 255, 0.05);

    padding-top: 16px;

}



/* Sports & Esports Section */

.sports-section {

    max-width: 1200px;

    margin: 0 auto;

}



.sports-grid {

    display: grid;

    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));

    gap: 24px;

}



.sport-card {

    border-radius: 12px;

    overflow: hidden;

    position: relative;

    min-height: 240px;

    display: flex;

    justify-content: space-between;

    transition: transform 0.2s, box-shadow 0.2s;

}



.sport-card:hover {

    transform: translateY(-4px);

    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.4);

}



.sport-betting {

    background: linear-gradient(135deg, #1a2c38 0%, #2c4c3b 100%);

    border: 1px solid #3d6e52;

}



.esports-betting {

    background: linear-gradient(135deg, #1a2c38 0%, #3a2c4c 100%);

    border: 1px solid #5a3d6e;

}



.sport-content {

    padding: 24px;

    z-index: 2;

    flex: 1;

    display: flex;

    flex-direction: column;

}



.sport-content h4 {

    font-size: 24px;

    color: white;

    margin-bottom: 8px;

}



.sport-content p {

    color: var(--color-text-secondary);

    font-size: 14px;

    margin-bottom: 16px;

    max-width: 80%;

}



.sport-list {

    list-style: none;

    padding: 0;

    margin-bottom: 24px;

}



.sport-list li {

    font-size: 14px;

    color: white;

    margin-bottom: 6px;

    display: flex;

    align-items: center;

    gap: 8px;

}



.sport-visual {

    position: absolute;

    right: 0;

    bottom: 0;

    width: 150px;

    height: 100%;

    overflow: hidden;

    opacity: 0.2;

    /* Subtler background */

    pointer-events: none;

}



/* CSS Shapes/Icons for Visuals */

.visual-ball {

    position: absolute;

    border-radius: 50%;

}



.cricket {

    width: 60px;

    height: 60px;

    background: #d32f2f;

    right: 20px;

    bottom: 20px;

    border: 2px solid rgba(255, 255, 255, 0.2);

}



.football {

    width: 80px;

    height: 80px;

    background: white;

    right: 60px;

    bottom: 60px;

    border: 2px solid rgba(0, 0, 0, 0.2);

}



.visual-icon {

    position: absolute;

    background: var(--color-accent);

}



.joystick {

    width: 60px;

    height: 40px;

    right: 30px;

    bottom: 40px;

    border-radius: 8px;

    transform: rotate(-15deg);

}



.headset {

    width: 50px;

    height: 50px;

    border: 4px solid #fff;

    border-radius: 50% 50% 0 0;

    border-bottom: 0;

    right: 80px;

    bottom: 80px;

    transform: rotate(15deg);

}