body {
    font-family: 'Poppins', sans-serif;
    background-color: #F8F9FA;
    color: #343A40;
}

:root {
    --primary-green: #28A745; /* Bootstrap success green */
    --dark-green: #1E8449; /* A darker shade of green */
    --black: #000000;
    --white: #FFFFFF;
    --red-stars: #DC3545; /* Bootstrap danger red */
    --blue-cta: #17A2B8; /* Bootstrap info blue */
    --light-grey: #E9ECEF;
}

.age-banner {
    background-color: #ff0000;
    font-size: 0.9rem;
    padding: 8px 0;
}

.header-section {
    background: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url(img/content/french-city-night.jpg) no-repeat center center/cover;
    color: var(--white);
    padding: 60px 0;
    text-align: center;
}

.header-section h1 {
    font-size: 3rem;
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: 15px;
}

.header-section .lead {
    font-size: 1.25rem;
    margin-bottom: 30px;
}

.logo-img {
    max-height: 80px;
    width: auto;
}

.custom-cta-button {
    background-color: var(--primary-green);
    border-color: var(--primary-green);
    font-weight: 600;
    padding: 12px 30px;
    font-size: 1.1rem;
    text-decoration: none;
}

.custom-cta-button:hover {
    background-color: var(--dark-green);
    border-color: var(--dark-green);
}

.section-title {
    display: flex;
    justify-content: center;
    text-align: center;
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--black);
    position: relative;
    margin-bottom: 3rem;
}

.section-title::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: -10px;
    transform: translateX(-50%);
    width: 60px;
    height: 4px;
    background-color: var(--primary-green);
    border-radius: 2px;
}

.section-title.text-white::after {
    background-color: var(--white);
}

.bg-light-green {
    background-color: var(--light-grey);
}

.offer-card {
    background-color: var(--white);
    border: 1px solid #E0E0E0;
    border-radius: 10px;
    overflow: hidden;
    display: flex;
    flex-direction: row;
    align-items: center;
    height: 100%;
}

.offer-card .card-body {
    padding: 20px;
}

.offer-card .offer-logo {
    object-fit: contain;
    width: 100%;
    height: 250px;
    margin: auto;
    display: block;
}

.offer-card .card-title {
    font-size: 1.8rem;
    font-weight: 600;
    color: var(--black);
    margin-bottom: 10px;
}

.offer-card .small-description {
    font-size: 0.95rem;
    color: #555;
    margin-bottom: 15px;
}

.offer-card .license-link {
    color: var(--primary-green);
    font-weight: 600;
    text-decoration: none;
}

.offer-card .license-link:hover {
    text-decoration: underline;
}

.rating-stars {
    color: var(--red-stars);
    font-weight: 600;
}

.payment-icons img {
    height: 24px;
    margin-right: 8px;
    vertical-align: middle;
}

.offer-cta-button {
    background-color: var(--blue-cta);
    border-color: var(--blue-cta);
    font-weight: 600;
    padding: 15px 30px;
    font-size: 1.2rem;
    text-decoration: none;
    width: 100%;
    max-width: 250px;
}

.offer-cta-button:hover {
    background-color: #138496;
    border-color: #138496;
}

@media (max-width: 767.98px) {
    .offer-card {
        flex-direction: column;
        text-align: center;
    }
    .offer-card .col-md-3, .offer-card .col-md-6 {
        width: 100%;
    }
    .offer-card .offer-logo {
        margin-bottom: 15px;
    }
    .offer-cta-button {
        max-width: none;
    }
}

.accordion-button:not(.collapsed) {
    color: var(--white);
    background-color: var(--primary-green);
    box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.125);
}

.accordion-button {
    font-weight: 600;
    color: var(--black);
    text-decoration: none;
}

.accordion-button:focus {
    border-color: transparent;
    box-shadow: none;
}

.accordion-item {
    border: 1px solid #dee2e6;
    margin-bottom: 10px;
    border-radius: 5px;
    overflow: hidden;
}

.accordion-body {
    background-color: var(--white);
    color: #333;
}

.review-card {
    background-color: var(--white);
    border: 1px solid #E0E0E0;
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.avatar-img {
    width: 60px;
    height: 60px;
    object-fit: cover;
    border: 2px solid var(--primary-green);
}

.bg-dark-green {
    background-color: var(--dark-green);
}

.bg-dark-green h3 {
    color: var(--white);
}

.bg-dark-green .p {
    color: var(--white);
}

.bg-dark-green a {
    color: var(--white);
}

.disclaimer-box {
    background-color: #FFFBE6; /* Light yellow background */
    border: 2px solid #FFC107; /* Warning yellow border */
    color: #333;
    position: relative;
}

.disclaimer-title {
    text-align: center;
    color: #DC3545; /* Red for emphasis */
    font-weight: 700;
}

.disclaimer-box ul {
    list-style-type: disc;
    padding-left: 20px;
}

.disclaimer-box ul li a {
    color: #333;
}

.disclaimer-box ul li a:hover {
    color: #000;
}

.footer-section {
    background-color: var(--black);
    color: var(--white);
    font-size: 0.9rem;
}

.footer-section a {
    color: var(--white);
    text-decoration: none;
}

.footer-section a:hover {
    text-decoration: underline;
}

.logo-img-footer {
    max-height: 60px;
    width: auto;
}

.footer-logos {
    gap: 15px;
}

.footer-logo-item {
    max-width: 120px;
    height: auto;
    filter: none; /* Ensure no grayscale */
    transition: none; /* No transition on hover */
}

/* Cookie Banner */
.cookie-banner {
    position: fixed;
    bottom: 20px;
    right: 20px;
    max-width: 350px;
    z-index: 1050;
    border: 1px solid #ccc;
    display: none; /* Hidden by default */
}

.cookie-banner p {
    font-size: 0.9rem;
    line-height: 1.4;
}

/* Age Verification Modal Customization */
.custom-modal-content {
    background-color: var(--white);
    border-radius: 10px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
    color: var(--black);
}

.custom-modal-content .modal-header {
    border-bottom: none;
    padding-bottom: 0;
}

.custom-modal-content .modal-title {
    font-weight: 700;
    font-size: 1.5rem;
}

.custom-modal-content .modal-body p {
    font-size: 1.1rem;
    line-height: 1.6;
}

.custom-modal-content .btn-success {
    background-color: var(--primary-green);
    border-color: var(--primary-green);
}

.custom-modal-content .btn-success:hover {
    background-color: var(--dark-green);
    border-color: var(--dark-green);
}

.custom-modal-content .btn-danger {
    background-color: var(--red-stars);
    border-color: var(--red-stars);
}

.custom-modal-content .btn-danger:hover {
    background-color: #BD2130;
    border-color: #BD2130;
}

/* Cookie Settings Modal Customization */
#cookieSettingsModal .modal-header {
    background-color: var(--primary-green);
    color: var(--white);
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
}

#cookieSettingsModal .modal-title {
    color: var(--white);
}

#cookieSettingsModal .btn-close {
    filter: invert(1);
}

#cookieSettingsModal .form-check-input:checked {
    background-color: var(--primary-green);
    border-color: var(--primary-green);
}

#cookieSettingsModal .btn-primary {
    background-color: var(--primary-green);
    border-color: var(--primary-green);
}

#cookieSettingsModal .btn-primary:hover {
    background-color: var(--dark-green);
    border-color: var(--dark-green);
}

.text-muted {
    color: #6c757d !important;
}

/* Ensure all offer cards have equal height */
.offer-card {
    height: 100%;
}

/* Ensure review cards have equal height */
.review-card {
    height: 100%;
}

/* Ensure about section cards have equal height */
#about-section .p-4 {
    height: 100%;
}

/* Ensure responsible gaming cards have equal height */
#responsible-gaming-section .p-4 {
    height: 100%;
}

.smooth-scroll {
    text-decoration: none;
}

.smooth-scroll:hover {
    text-decoration: none;
}
/* Styles for the main container */
.rightsFieldUnit {
    padding: 20px; /* Padding inside the container on all sides */
    margin-top: 30px; /* Margin above the container */
    margin-bottom: 30px; /* Margin below the container */
    /* You might want to add a max-width and center it for better readability on large screens, e.g.: */
    /* max-width: 800px; */
    /* margin-left: auto; */
    /* margin-right: auto; */
}

/* Heading styles */
.rightsFieldUnit h1 {
    font-size: 1.8rem; /* Moderate H1 font size (approx. 28.8px if root font-size is 16px) */
    font-weight: 700; /* Bold font weight */
    margin-top: 1.5em; /* Space above the heading */
    margin-bottom: 0.8em; /* Space below the heading */
    line-height: 1.2; /* Tighter line height for headings */
}

.rightsFieldUnit h2 {
    font-size: 1.5rem; /* Moderate H2 font size (approx. 24px) */
    font-weight: 700;
    margin-top: 1.4em;
    margin-bottom: 0.7em;
    line-height: 1.3;
}

.rightsFieldUnit h3 {
    font-size: 1.25rem; /* Moderate H3 font size (approx. 20px) */
    font-weight: 700;
    margin-top: 1.3em;
    margin-bottom: 0.6em;
    line-height: 1.4;
}

.rightsFieldUnit h4 {
    font-size: 1.1rem; /* Moderate H4 font size (approx. 17.6px) */
    font-weight: 700;
    margin-top: 1.2em;
    margin-bottom: 0.5em;
}

.rightsFieldUnit h5 {
    font-size: 1rem; /* Moderate H5 font size (approx. 16px, similar to body text) */
    font-weight: 700;
    margin-top: 1.1em;
    margin-bottom: 0.4em;
}

/* Paragraph styles */
.rightsFieldUnit p {
    font-size: 1rem; /* Base font size for paragraphs (approx. 16px) */
    line-height: 1.6; /* Good readability line height */
    margin-bottom: 1em; /* Space between paragraphs */
}

/* Unordered list styles */
.rightsFieldUnit ul {
    list-style-type: disc; /* Default disc bullets */
    margin-top: 1em; /* Space above the list */
    margin-bottom: 1em; /* Space below the list */
    padding-left: 25px; /* Indent for list items */
}

/* List item styles */
.rightsFieldUnit li {
    font-size: 1rem; /* Inherit or set explicitly to base font size */
    line-height: 1.6; /* Consistent line height with paragraphs */
    margin-bottom: 0.5em; /* Space between list items */
}

/* Optional: Remove bottom margin from the last paragraph/list item if it's directly before another block */
.rightsFieldUnit p:last-child,
.rightsFieldUnit ul:last-child,
.rightsFieldUnit li:last-child {
    margin-bottom: 0;
}
@media (max-width:576px) {
    .cookie-banner {
    max-width: 320px;
    right: 5%;
    left: 5%;
    }
   .header-section h1 {
        font-size: 25px;
    }
    .age-banner {
        padding: 8px;
    }
}