/* General Styles */
* {
    font-family: 'Montserrat', sans-serif;
    box-sizing: border-box;
}

body {
    background-color: #0D0D0D; /* Dark background */
    color: #ECF0F1; /* Light text for readability */
    line-height: 1.6;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    position: relative;
}

/* Color Scheme Variables */
:root {
    --primary-purple: #8947c3; /* Main accent purple */
    --secondary-red: #E74C3C; /* Accent red for buttons/highlights */
    --dark-background: #0D0D0D;
    --darker-background: #1A1A1A;
    --light-text: #ECF0F1;
    --muted-text: #BDC3C7;
}

/* Text Colors */
.text-white {
    color: var(--light-text) !important;
}

.text-white-50 {
    color: var(--muted-text) !important;
}

.text-primary {
    color: var(--primary-purple) !important;
}

.text-secondary {
    color: var(--secondary-red) !important;
}

/* Buttons */
.btn-primary {
    background-color: var(--primary-purple);
    border-color: var(--primary-purple);
    color: var(--light-text);
    transition: background-color 0.2s, border-color 0.2s;
}

.btn-primary:hover {
    background-color: #6C3DA2;
    border-color: #6C3DA2;
    color: var(--light-text);
}

.btn-secondary {
    background-color: var(--secondary-red);
    border-color: var(--secondary-red);
    color: var(--light-text);
    transition: background-color 0.2s, border-color 0.2s;
}

.btn-secondary:hover {
    background-color: #F05C4C;
    border-color: #F05C4C;
    color: var(--light-text);
}

.custom-btn-hero {
    padding: 1rem 2.5rem;
    font-size: 1.25rem;
    border-radius: 50px;
}

.custom-btn-cta {
    padding: 1rem 2.5rem;
    font-size: 1.25rem;
    border-radius: 50px;
}

/* Header */
.header {
    background-color: rgba(26, 26, 26, 0.9); /* Semi-transparent dark background */
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
    z-index: 1030; /* Above other content */
}

.logo-img {
    height: 40px;
}

.nav-link {
    font-weight: 600;
    padding: 0.5rem 1rem;
    transition: color 0.2s;
}

.nav-link:hover {
    color: var(--primary-purple) !important;
}

.navbar-toggler {
    border-color: var(--primary-purple);
}

.navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%235A2D82' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}


.navbar-collapse {
    background-color: var(--darker-background);
    position: fixed;
    top: 80px;   /* сразу под хедером */
    left: 0;
    width: 100%;
    z-index: 99020;
    padding: 1rem; /* чтобы ссылки не прилипали к краям */
}
/* Hero Section */
.hero-section {
    background: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url('img/media/social-gaming-hero.jpg') no-repeat center center/cover;
    min-height: 80vh;
    padding-top: 100px; /* Adjust for fixed header */
    position: relative;
    overflow: hidden;
}

.hero-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(to right, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0.4) 50%, rgba(0,0,0,0.8) 100%);
    z-index: 1;
}

.hero-section .container-fluid, .hero-section .row {
    position: relative;
    z-index: 2;
}

.hero-image-col {
    display: flex;
    justify-content: center;
    align-items: center;
}

.hero-image-col img {
    max-height: 450px;
    object-fit: cover;
    border-radius: 15px !important;
    border: 3px solid var(--primary-purple);
}

@media (max-width: 767.98px) {
    .hero-image-col {
        margin-bottom: 2rem;
    }
    .hero-image-col img {
        max-height: 300px;
    }
    .hero-section .hero-content {
        padding: 0;
    }
}

/* About Section */
.about-section {
    background-color: var(--darker-background);
}

.about-card {
    background-color: var(--dark-background);
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: transform 0.2s ease-in-out;
}

.about-card:hover {
    transform: translateY(-5px);
}

/* Games Section */
.games-section {
    background-color: var(--dark-background);
}

.game-card {
    background-color: var(--darker-background);
    border-radius: 10px;
    overflow: hidden;
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}

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

.game-card .card-img-top {
    height: 200px;
    object-fit: cover;
    border-bottom: 3px solid var(--secondary-red);
}

.game-card .card-body {
    padding: 1.5rem;
}

.game-card .card-title {
    font-weight: 700;
    margin-bottom: 0.75rem;
}

.game-card .card-text {
    font-size: 0.95rem;
}

.game-link {
    display: block;
    text-decoration: none;
    color: inherit;
}

.play-game-btn {
    width: 100%;
    font-weight: 600;
}

/* Game Modal */
.modal-content {
    background-color: var(--darker-background);
    border-radius: 10px;
}

.modal-header {
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.modal-title {
    color: var(--light-text);
}

.btn-close-white {
    filter: invert(1) brightness(2);
}

.iframe-container {
    position: relative;
    width: 100%;
    padding-bottom: 56.25%; /* 16:9 Aspect Ratio */
    height: 0;
    overflow: hidden;
}

.iframe-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
}

/* How It Works Section */
.how-it-works-section {
    background-color: var(--darker-background);
}

.step-card {
    background-color: var(--dark-background);
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: transform 0.2s ease-in-out;
}

.step-card:hover {
    transform: translateY(-5px);
}

.step-icon-circle {
    width: 80px;
    height: 80px;
    background-color: rgba(90, 45, 130, 0.2); /* Primary purple with transparency */
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 1rem;
    border: 2px solid var(--primary-purple);
}

/* Call to Action Section */
.cta-section {
    background: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url('img/media/cta-background_7.jpg') no-repeat center center/cover;
    background-attachment: fixed;
    position: relative;
    overflow: hidden;
}

.cta-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(to right, rgba(231,76,60,0.6) 0%, rgba(90,45,130,0.6) 100%);
    z-index: 1;
}

.cta-section .container {
    position: relative;
    z-index: 2;
}

/* Disclaimer Section */
.disclaimer-section {
    background-color: #2C0F4A; /* A distinct, darker purple */
    border-top: 5px solid var(--secondary-red);
    border-bottom: 5px solid var(--secondary-red);
    padding: 3rem 0;
    margin-top: 3rem;
}

.disclaimer-content {
    background-color: rgba(0, 0, 0, 0.3); /* Slightly transparent dark */
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: 2rem;
    text-align: center;
}

.disclaimer-content i {
    color: #F39C12; /* A warning yellow/orange */
}

/* Footer */
.footer {
    background-color: var(--darker-background);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding-top: 2rem;
    padding-bottom: 2rem;
}

.logo-img-footer {
    height: 50px;
    opacity: 0.8;
}

.footer-links a {
    font-size: 0.9rem;
}

.footer-links .separator {
    color: var(--muted-text);
}

.footer-logos {
    gap: 15px; /* Space between logos */
}

.footer-logo-img {
    max-width: 120px; /* Adjust based on count, 100-150px range */
    height: auto;
    display: block; /* Ensures proper sizing with max-width */
}

.18plus-icon-red {
    max-width: 60px; /* Smaller for the 18+ icon */
    filter: invert(10%) sepia(90%) saturate(7000%) hue-rotate(350deg) brightness(100%) contrast(100%); /* Makes it red */
}

/* Cookie Banner */
.cookie-banner {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    z-index: 1050;
    border-top: 3px solid var(--primary-purple);
    transform: translateY(100%);
    transition: transform 0.5s ease-out;
}

.cookie-banner.show {
    transform: translateY(0);
}

.cookie-banner a {
    color: var(--primary-purple) !important;
}

.cookie-banner a:hover {
    color: var(--secondary-red) !important;
}

/* Age Verification Modal Specifics */
#ageVerificationModal .modal-content {
    background: linear-gradient(135deg, var(--darker-background) 0%, #2C0F4A 100%);
    border: 2px solid var(--primary-purple);
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.7);
}

#ageVerificationModal .modal-title {
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--secondary-red);
}

#ageVerificationModal .modal-body p {
    font-size: 1.1rem;
    color: var(--light-text);
}

#ageVerificationModal .btn-primary {
    background-color: var(--primary-purple);
    border-color: var(--primary-purple);
}

#ageVerificationModal .btn-secondary {
    background-color: #555; /* Darker grey for 'No' */
    border-color: #555;
}
/* Styles for content within .userClauseNet */
.userClauseNet {
    padding: 2rem; /* Adds padding around the content block on all sides */
}

/* Headings */
.userClauseNet h1 {
    font-size: 2.2rem; /* Moderate size for main headings */
    font-weight: 700; /* Bold font weight */
    margin-top: 0; /* No top margin for the very first element in the block */
    margin-bottom: 1.5rem; /* Space below heading */
    color: var(--light-text); /* Light text color for headings, matching general theme */
}

.userClauseNet h2 {
    font-size: 1.8rem; /* Smaller than h1 */
    font-weight: 700;
    margin-top: 2rem; /* Space above heading */
    margin-bottom: 1.2rem;
    color: var(--light-text);
}

.userClauseNet h3 {
    font-size: 1.5rem; /* Smaller than h2 */
    font-weight: 700;
    margin-top: 1.8rem;
    margin-bottom: 1rem;
    color: var(--light-text);
}

.userClauseNet h4 {
    font-size: 1.2rem; /* Smaller than h3 */
    font-weight: 700;
    margin-top: 1.5rem;
    margin-bottom: 0.8rem;
    color: var(--light-text);
}

.userClauseNet h5 {
    font-size: 1rem; /* Smallest heading, similar to body text but bold */
    font-weight: 700;
    margin-top: 1.2rem;
    margin-bottom: 0.6rem;
    color: var(--light-text);
}

/* Paragraphs */
.userClauseNet p {
    font-size: 1rem; /* Standard body text size */
    line-height: 1.7; /* Good line height for readability */
    margin-bottom: 1rem; /* Space after paragraphs */
    color: var(--light-text); /* Light text color for paragraphs */
}

/* Unordered Lists */
.userClauseNet ul {
    list-style-type: disc; /* Default disc bullet points */
    margin-top: 1rem; /* Space above the list */
    margin-bottom: 1rem; /* Space below the list */
    padding-left: 25px; /* Indentation for list items */
    color: var(--light-text); /* List text color */
}

/* List Items */
.userClauseNet li {
    font-size: 1rem; /* Standard text size for list items */
    line-height: 1.6; /* Line height for readability */
    margin-bottom: 0.5rem; /* Space between individual list items */
    color: var(--light-text); /* List item text color */
}


    #hero{
        padding: 120px 0 !important;
    }