/* General Body Styles */
body {
    font-family: 'Roboto', sans-serif;
    background-color: #f8f9fa; /* Light background for overall page */
    color: #343a40; /* Default text color */
    line-height: 1.6;
}

/* Hero Section */
.hero-section {
    background: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%); /* Blue-purple gradient */
    /* Alternative: background-image: url('{{hero-background}}'); background-size: cover; background-position: center; */
    min-height: 100vh; /* Ensure it takes full viewport height */
    position: relative;
    overflow: hidden;
    padding: 60px 0; /* Add some padding for smaller screens */
}

/* Optional: Dark overlay for background image */
/* .hero-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.4);
    z-index: 1;
}
.hero-section > * {
    position: relative;
    z-index: 2;
} */


.hero-logo {
    width: 100%; /* Adjust size as needed */
    height: 550px;
    object-fit: contain;
    display: block;
    margin: 0 auto;
}

.hero-section h1 {
    color: #ffffff;
    font-size: 3.5rem; /* Larger font for main title */
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}

.hero-section .lead {
    color: rgba(255, 255, 255, 0.85);
    font-size: 1.5rem;
}

.app-info .text-warning {
    color: #ffc107 !important; /* Bootstrap yellow for stars */
}

.app-info .text-white-75 {
    color: rgba(255, 255, 255, 0.75) !important;
}

.play-now-btn {
    background-color: #ffc107; /* Bright yellow for button */
    border-color: #ffc107;
    color: #343a40; /* Dark text for contrast */
    padding: 15px 40px;
    font-size: 1.5rem;
    font-weight: bold;
    border-radius: 50px; /* Pill-shaped button */
    transition: background-color 0.1s ease-in-out, border-color 0.1s ease-in-out, color 0.1s ease-in-out;
}

.play-now-btn:hover {
    background-color: #e0a800; /* Darker yellow on hover */
    border-color: #e0a800;
    color: #343a40;
}

/* Main Content Sections */
section {
    padding: 80px 0;
}

.section-title {
    font-size: 2.5rem;
    font-weight: 700;
    color: #28a745; /* Green for section titles */
    margin-bottom: 3rem;
}

/* About Section */
.about-section {
    background-color: #ffffff;
    color: #343a40;
}

.about-section .lead {
    font-size: 1.25rem;
    color: #5a6268;
}

/* How to Play Section */
.how-to-play-section {
    background-color: #e9ecef; /* Light grey background */
    color: #343a40;
}

.gameplay-list li {
    font-size: 1.15rem;
    color: #495057;
    margin-bottom: 1.5rem;
}

.gameplay-list li:last-child {
    margin-bottom: 0;
}

.gameplay-list .icon-lg {
    font-size: 1.8rem;
    color: #007bff; /* Blue for icons */
    min-width: 40px; /* Ensure icon spacing */
}

/* Why You'll Love It Section */
.why-love-it-section {
    background-color: #ffffff;
    color: #343a40;
}

.features-list li {
    font-size: 1.15rem;
    color: #495057;
    margin-bottom: 1.5rem;
}

.features-list li:last-child {
    margin-bottom: 0;
}

.features-list .icon-lg {
    font-size: 1.8rem;
    color: #28a745; /* Green for icons */
    min-width: 40px; /* Ensure icon spacing */
}

/* Additional Information Section */
.additional-info-section {
    background-color: #f8f9fa; /* Lighter grey background */
    color: #343a40;
}

.info-list dt {
    font-weight: 500;
    color: #212529;
    margin-bottom: 0.5rem;
    text-align: end;
}

.info-list dd {
    margin-bottom: 0.5rem;
    color: #6c757d;
}

.info-list dt i {
    color: #6c757d; /* Grey for info icons */
}


/* Footer */
.footer {
    background-color: #343a40; /* Dark background */
    color: #ffffff;
    padding: 40px 0;
}

.footer-logo {
    max-width: 100px; /* Smaller logo in footer */
    height: auto;
}

.footer p {
    color: rgba(255, 255, 255, 0.75);
    font-size: 0.9rem;
}

.footer-link {
    color: #ffffff;
    text-decoration: none;
    font-size: 0.9rem;
    padding: 0 10px;
    transition: color 0.1s ease-in-out;
}

.footer-link:hover {
    color: #ffc107; /* Yellow on hover */
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .hero-section h1 {
        font-size: 2.5rem;
    }

    .hero-section .lead {
        font-size: 1.2rem;
    }

    .play-now-btn {
        padding: 12px 30px;
        font-size: 1.2rem;
    }

    .section-title {
        font-size: 2rem;
    }

    .gameplay-list li,
    .features-list li,
    .info-list dt,
    .info-list dd {
        font-size: 1rem;
    }

    .gameplay-list .icon-lg,
    .features-list .icon-lg {
        font-size: 1.5rem;
        min-width: 30px;
    }

    .info-list dt,
    .info-list dd {
        text-align: center !important;
    }
}

@media (max-width: 576px) {
    .hero-logo {
        max-width: 180px;
    }
    .hero-section h1 {
        font-size: 2rem;
    }
    .hero-section .lead {
        font-size: 1rem;
    }
    .play-now-btn {
        font-size: 1rem;
        padding: 10px 25px;
    }
    .section-title {
        font-size: 1.8rem;
    }
    .footer-link {
        display: block;
        padding: 5px 0;
    }
    .info-list dt,
    .info-list dd {
        text-align: center !important;
    }
    .info-list dt {
        margin-bottom: 0;
    }
}

@media (max-width: 420px) {
    .hero-logo{
        height: auto;
    }
}

/* Ensure standard text color is always set */
p, li, span, a, dt, dd {
    color: inherit; /* Inherit from parent, then specific styles override */
}

/* Explicitly set fallback colors for common elements */
body {
    color: #343a40; /* Default body text */
}

h1, h2, h3, h4, h5, h6 {
    color: #212529; /* Default heading color */
}

a {
    color: #007bff; /* Default link color */
}/* Container for rights-related content */
.rightsFieldUnit {
    padding: 60px 30px; /* Top/bottom padding, and side padding */
    max-width: 960px; /* Max width for readability */
    margin: 0 auto; /* Center the container */
    color: #343a40; /* Default text color for this unit */
}

/* Heading styles within .rightsFieldUnit */
.rightsFieldUnit h1 {
    font-size: 2.2rem; /* Moderate size for main headings */
    line-height: 1.2;
    margin-top: 2rem;
    margin-bottom: 1.5rem;
    color: #212529; /* Darker color for headings */
}

.rightsFieldUnit h2 {
    font-size: 1.8rem; /* Slightly smaller than h1 */
    line-height: 1.25;
    margin-top: 1.8rem;
    margin-bottom: 1.2rem;
    color: #212529;
}

.rightsFieldUnit h3 {
    font-size: 1.5rem; /* Standard sub-heading size */
    line-height: 1.3;
    margin-top: 1.5rem;
    margin-bottom: 1rem;
    color: #212529;
}

.rightsFieldUnit h4 {
    font-size: 1.25rem; /* Smaller heading for sections */
    line-height: 1.35;
    margin-top: 1.2rem;
    margin-bottom: 0.8rem;
    color: #212529;
}

.rightsFieldUnit h5 {
    font-size: 1.1rem; /* Smallest heading, useful for minor titles */
    line-height: 1.4;
    margin-top: 1rem;
    margin-bottom: 0.6rem;
    color: #212529;
}

/* Paragraph styles within .rightsFieldUnit */
.rightsFieldUnit p {
    font-size: 1rem; /* Standard paragraph font size */
    line-height: 1.6;
    margin-bottom: 1rem; /* Space between paragraphs */
    color: #495057; /* Slightly lighter text for body copy */
}

/* Unordered list styles within .rightsFieldUnit */
.rightsFieldUnit ul {
    list-style-type: disc; /* Default disc for unordered lists */
    margin-top: 1rem;
    margin-bottom: 1rem;
    padding-left: 25px; /* Indent for list markers */
    color: #495057;
}

/* Ordered list styles within .rightsFieldUnit (added for completeness) */
.rightsFieldUnit ol {
    list-style-type: decimal; /* Default decimal for ordered lists */
    margin-top: 1rem;
    margin-bottom: 1rem;
    padding-left: 25px; /* Indent for list markers */
    color: #495057;
}

/* List item styles within .rightsFieldUnit */
.rightsFieldUnit li {
    font-size: 1rem; /* Standard list item font size */
    line-height: 1.6;
    margin-bottom: 0.5rem; /* Space between list items */
    color: #495057;
}

/* Last list item in a block should not have bottom margin */
.rightsFieldUnit li:last-child {
    margin-bottom: 0;
}

/* Responsive adjustments for .rightsFieldUnit */
@media (max-width: 768px) {
    .rightsFieldUnit {
        padding: 40px 20px; /* Reduce padding on smaller screens */
    }
    .rightsFieldUnit h1 {
        font-size: 1.8rem;
    }
    .rightsFieldUnit h2 {
        font-size: 1.5rem;
    }
    .rightsFieldUnit h3 {
        font-size: 1.3rem;
    }
    .rightsFieldUnit h4 {
        font-size: 1.1rem;
    }
    .rightsFieldUnit h5 {
        font-size: 1rem;
    }
    .rightsFieldUnit p,
    .rightsFieldUnit ul,
    .rightsFieldUnit ol,
    .rightsFieldUnit li {
        font-size: 0.95rem;
    }
}

@media (max-width: 576px) {
    .rightsFieldUnit {
        padding: 30px 15px; /* Further reduce padding on very small screens */
    }
    .rightsFieldUnit h1 {
        font-size: 1.6rem;
        margin-bottom: 1rem;
    }
    .rightsFieldUnit h2 {
        font-size: 1.3rem;
        margin-bottom: 0.8rem;
    }
    .rightsFieldUnit h3 {
        font-size: 1.1rem;
        margin-bottom: 0.6rem;
    }
    .rightsFieldUnit h4 {
        font-size: 1rem;
        margin-bottom: 0.5rem;
    }
    .rightsFieldUnit h5 {
        font-size: 0.95rem;
        margin-bottom: 0.4rem;
    }
    .rightsFieldUnit p,
    .rightsFieldUnit ul,
    .rightsFieldUnit ol,
    .rightsFieldUnit li {
        font-size: 0.9rem;
        line-height: 1.5;
    }
    .rightsFieldUnit ul,
    .rightsFieldUnit ol {
        padding-left: 20px;
    }
}