/* Global Styles */
body {
    font-family: 'Open Sans', sans-serif;
    color: #4F4F4F; /* Dark gray for body text */
    background-color: #F3F8FF; /* Main background */
    line-height: 1.6;
    box-sizing: border-box;
}

*, *::before, *::after {
    box-sizing: inherit;
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Poppins', sans-serif;
    color: #2F3640; /* Darker gray for headings */
    line-height: 1.2;
}

.poppins-font {
    font-family: 'Poppins', sans-serif;
}

/* Responsive Typography */
.site-title {
    font-size: 1.8rem;
}

h1 {
    font-size: 2.5rem; /* Desktop */
}

h2 {
    font-size: 2.2rem; /* Desktop */
}

.display-3 {
    font-size: 3.5rem;
}

.display-5 {
    font-size: 2.8rem;
}

.display-6 {
    font-size: 2.2rem;
}

@media (min-width: 768px) and (max-width: 1023px) {
    .site-title {
        font-size: 1.5rem;
    }
    h1 {
        font-size: 2.2rem; /* Tablet */
    }
    h2 {
        font-size: 2rem; /* Tablet */
    }
    .display-3 {
        font-size: 3rem;
    }
    .display-5 {
        font-size: 2.5rem;
    }
    .display-6 {
        font-size: 2rem;
    }
}

@media (max-width: 767px) {
    .site-title {
        font-size: 1.25rem; /* Mobile */
    }
    h1 {
        font-size: 1.8rem; /* Mobile */
    }
    h2 {
        font-size: 1.6rem; /* Mobile */
    }
    .display-3 {
        font-size: 2.5rem;
    }
    .display-5 {
        font-size: 2rem;
    }
    .display-6 {
        font-size: 1.8rem;
    }
    .navbar-brand {
        max-width: calc(100% - 60px); /* Prevent title from overlapping toggler */
    }
    .navbar-brand .site-title {
        white-space: normal;
        word-break: break-word;
        line-height: 1.2;
    }
}

/* Color Palette */
.bg-light-blue {
    background-color: #F3F8FF;
}

.bg-white {
    background-color: #FFFFFF !important;
}

.text-primary {
    color: #2D9CDB !important;
}

.btn-primary {
    background-color: #2D9CDB;
    border-color: #2D9CDB;
    color: #FFFFFF;
    transition: background-color 0.3s ease, border-color 0.3s ease;
}

.btn-primary:hover {
    background-color: #258ac7;
    border-color: #258ac7;
}

.text-dark {
    color: #2F3640 !important;
}

.text-secondary {
    color: #4F4F4F !important;
}

.text-decor {
    color: #B1C9E8;
}

.bg-dark-gray {
    background-color: #2F3640;
}

.bg-footer {
    background-color: #2F3640;
}

.bg-light-blue-gradient {
    background: linear-gradient(135deg, #F3F8FF 0%, #E0F2F7 100%);
}

/* Buttons */
.btn {
    text-decoration: none !important;
    white-space: normal;
    word-break: break-word;
    text-align: center;
    display: inline-block;
}

.glow-button {
    box-shadow: 0 0 15px rgba(45, 156, 219, 0.7); /* Static glow effect */
}

/* Header */
.navbar-brand img {
    height: 40px;
}

.navbar-nav .nav-link {
    color: #4F4F4F;
    font-weight: 600;
    padding: 0.5rem 1rem;
    transition: color 0.3s ease;
}

.navbar-nav .nav-link:hover,
.navbar-nav .nav-link.active {
    color: #2D9CDB;
}

.offcanvas-header {
    background-color: #F3F8FF;
}

.offcanvas-title {
    color: #2F3640;
}

/* Hero Section */
.hero-section {
    position: relative;
    background-size: cover;
    background-position: center;
    min-height: 70vh;
    display: flex;
    align-items: center;
    color: #FFFFFF;
    padding-top: 100px; /* Adjust for fixed header */
    padding-bottom: 50px;
}

.hero-section .overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5); /* Dark overlay */
    z-index: 0;
}

.hero-section .container {
    z-index: 1;
}

.game-card-stack {
    position: relative;
    width: 250px;
    height: 300px;
    margin: 0 auto;
}

.game-card {
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 15px;
    transform-origin: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    backface-visibility: hidden;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.game-card:nth-child(1) {
    transform: rotate(-8deg) translateY(-10px);
    z-index: 2;
    box-shadow: 0 10px 20px rgba(0,0,0,0.2);
}

.game-card:nth-child(2) {
    transform: rotate(8deg) translateY(10px);
    z-index: 1;
    box-shadow: 0 10px 20px rgba(0,0,0,0.2);
}

.game-card:hover {
    transform: translateY(-20px) scale(1.05);
    box-shadow: 0 15px 30px rgba(0,0,0,0.3);
    z-index: 3; /* Bring hovered card to front */
}

.game-card img {
    max-height: 180px;
    object-fit: cover;
    width: 100%;
}

/* Game of the Week Card */
.game-of-week-card {
    border-radius: 20px;
    overflow: hidden;
}

.game-of-week-card img {
    border-radius: 15px;
    height: 300px;
    object-fit: cover;
    width: 100%;
}

/* Game Cards for Local Games Section */
.game-card-item {
    border-radius: 15px;
    overflow: hidden;
}

.game-img-fixed {
    height: 200px; /* Fixed height for game images */
    object-fit: cover;
    width: 100%;
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
}

.game-card-item .card-body {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
}

.game-card-item .card-title {
    margin-bottom: 0.5rem;
}

.game-card-item .card-text {
    flex-grow: 1;
}

/* Leaderboards Tabs */
.nav-tabs .nav-link {
    color: #4F4F4F;
    font-weight: 600;
    border: none;
    border-bottom: 3px solid transparent;
    transition: all 0.3s ease;
    white-space: nowrap;
}

.nav-tabs .nav-link:hover {
    color: #2D9CDB;
    border-color: #B1C9E8;
}

.nav-tabs .nav-link.active {
    color: #2D9CDB;
    background-color: transparent;
    border-color: #2D9CDB;
}

.tab-content .list-group-item {
    border-bottom: 1px dashed #B1C9E8 !important;
}

.tab-content .list-group-item:last-child {
    border-bottom: none !important;
}

/* FAQ Accordion */
.accordion-button {
    background-color: #FFFFFF;
    color: #2F3640;
    font-weight: 700;
    padding: 1rem 1.25rem;
    border-radius: 0.25rem;
    transition: background-color 0.3s ease;
}

.accordion-button:not(.collapsed) {
    color: #2D9CDB;
    background-color: #F3F8FF;
    box-shadow: inset 0 -1px 0 rgba(0,0,0,.125);
}

.accordion-button:focus {
    box-shadow: none;
    border-color: #2D9CDB;
}

.accordion-body {
    background-color: #FFFFFF;
    color: #4F4F4F;
    padding: 1rem 1.25rem;
}

/* Testimonials */
.avatar-small {
    width: 60px;
    height: 60px;
    object-fit: cover;
}

/* Form Validation */
.form-control:focus {
    border-color: #2D9CDB;
    box-shadow: 0 0 0 0.25rem rgba(45, 156, 219, 0.25);
}

/* Disclaimer Section */
.disclaimer-section {
    background-color: #2F3640;
    border-top: 5px solid #2D9CDB;
    padding: 2rem 0;
}

/* Footer */
.bg-footer {
    background-color: #2F3640;
}

.footer-partners {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 20px; /* Spacing between logos */
}

.footer-logo {
    max-width: 120px; /* Adjust based on number of logos */
    height: auto;
    object-fit: contain;
    filter: brightness(0.8) contrast(1.2); /* Slight filter for better visibility on dark background */
}

.footer-logo-18plus {
    max-width: 60px;
    height: auto;
    object-fit: contain;
}

.text-white-50 {
    color: rgba(255, 255, 255, 0.7) !important;
}

.text-white-50:hover {
    color: #FFFFFF !important;
}

/* Game Modal */
.game-modal-fullscreen .modal-dialog {
    margin: 0;
    width: 100vw;
    height: 100vh;
    max-width: none;
    max-height: none;
}

.game-modal-fullscreen .modal-content {
    height: 100%;
    border-radius: 0;
    background-color: rgba(0, 0, 0, 0.9); /* Dark overlay for modal background */
}

.game-modal-fullscreen .modal-header {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 1060; /* Ensure close button is above iframe */
    padding: 1rem;
}

.game-modal-fullscreen .modal-body {
    position: relative;
    height: 100%;
    padding: 0;
}

.game-modal-fullscreen #gameIframe {
    width: 100%;
    height: 100%;
    border: none;
    background-color: #000;
}

.btn-close-white {
    filter: invert(1) grayscale(100%) brightness(200%);
}

/* Prevent body scroll when modal is open */
.modal-open {
    overflow: hidden;
    padding-right: 0 !important; /* Prevent content shift */
}

/* Mobile navigation overflow */
@media (max-width: 1199px) {
    .navbar-nav {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    .navbar-nav .nav-item {
        flex-shrink: 0;
    }
    .offcanvas-body .navbar-nav {
        flex-direction: column;
        overflow-x: hidden;
    }
}

/* Custom scrollbar for offcanvas on desktop if needed */
@media (min-width: 1200px) {
    .offcanvas-body {
        overflow-y: auto;
    }
}
/*
 * Base styles for the law matrix node container.
 * Provides padding around the content within the node.
 */
.lawMatrixNode {
    padding: 1.5em; /* Padding for top, right, bottom, and left sides */
}

/*
 * Heading styles for h1 within .lawMatrixNode.
 * Font sizes are kept moderate as requested, with appropriate margins for spacing.
 */
.lawMatrixNode h1 {
    font-size: 1.8em; /* Moderately sized font for main headings */
    margin-top: 1.5em; /* Space above the heading */
    margin-bottom: 0.8em; /* Space below the heading */
    font-weight: bold; /* Ensures the heading is bold */
    line-height: 1.2; /* Tighter line height for headings */
}

/*
 * Heading styles for h2 within .lawMatrixNode.
 */
.lawMatrixNode h2 {
    font-size: 1.6em;
    margin-top: 1.4em;
    margin-bottom: 0.7em;
    font-weight: bold;
    line-height: 1.2;
}

/*
 * Heading styles for h3 within .lawMatrixNode.
 */
.lawMatrixNode h3 {
    font-size: 1.4em;
    margin-top: 1.3em;
    margin-bottom: 0.6em;
    font-weight: bold;
    line-height: 1.3;
}

/*
 * Heading styles for h4 within .lawMatrixNode.
 */
.lawMatrixNode h4 {
    font-size: 1.2em;
    margin-top: 1.2em;
    margin-bottom: 0.5em;
    font-weight: bold;
    line-height: 1.4;
}

/*
 * Heading styles for h5 within .lawMatrixNode.
 */
.lawMatrixNode h5 {
    font-size: 1.1em;
    margin-top: 1.1em;
    margin-bottom: 0.4em;
    font-weight: bold;
    line-height: 1.4;
}

/*
 * Paragraph styles within .lawMatrixNode.
 * Sets base font size, line height for readability, and bottom margin.
 */
.lawMatrixNode p {
    font-size: 1em; /* Base font size for paragraphs */
    line-height: 1.6; /* Standard line height for good readability */
    margin-bottom: 1em; /* Space below each paragraph */
}

/*
 * Unordered and Ordered List container styles within .lawMatrixNode.
 * Provides vertical spacing for the entire list and left padding for markers.
 */
.lawMatrixNode ul,
.lawMatrixNode ol {
    margin-top: 1em; /* Space above the list */
    margin-bottom: 1em; /* Space below the list */
    padding-left: 1.5em; /* Indentation for list bullet points or numbers */
}

/*
 * List Item styles within .lawMatrixNode.
 * Provides vertical spacing between individual list items.
 */
.lawMatrixNode li {
    margin-bottom: 0.5em; /* Space between individual list items */
    line-height: 1.5; /* Line height for list item text */
}
#hero h1 {
    color: #2D9CDB !important;
}
iframe {
    width: 100%;
    /* height: 100vh; */
}
.frame-wrap {
    width: 100%;
    height: 100vh;
}