/* Global styles */
html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    padding: 0;
    font-family: Arial, sans-serif;
    background-color: #f5f5f5; /* Slightly grayish white for side margins */
    color: #333;
}

/* Header */
header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background-color: #2b4b99; /* Less saturated navy blue */
    color: white;
    padding: 8px 16px; /* Reduced padding for smaller height */
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: opacity 0.3s ease;
    z-index: 1000;
    border-bottom: 5px solid #FFEC3D; /* Brighter yellow border */
    box-sizing: border-box; /* Include padding/borders in size */
    min-width: 100%; /* Ensure full width */
}

header.hidden {
    opacity: 0;
    pointer-events: none;
}

.logo {
    display: flex;
    align-items: center;
}

.logo img {
    height: 48px; /* Reduced logo height */
    margin-right: 12px;
}

.logo h1 {
    margin: 0;
    font-size: 20px; /* Reduced font size */
}

nav {
    flex: 0 1 auto; /* Allow nav to shrink if needed */
    max-width: 50%; /* Limit nav width to avoid squeezing logo */
    overflow: visible; /* Prevent clipping */
    position: relative; /* For absolute positioning of dropdown */
}

nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap; /* Allow buttons to wrap if needed */
    overflow: visible; /* Prevent clipping */
}

nav ul li {
    margin-left: 8px; /* Reduced margin for more space */
}

nav ul li a {
    color: white;
    text-decoration: none;
    font-size: 18px; /* Increased font size */
    background-color: #1a3a7a; /* Darker blue background */
    border-left: 4px solid #FFEC3D; /* Yellow left border */
    padding: 8px 24px 8px 12px; /* Increased horizontal padding */
    transform: skewX(25deg); /* Left-leaning effect */
    display: inline-block;
    height: 45px; /* 70% of header height (~64px) */
    line-height: 45px; /* Center text vertically */
    vertical-align: middle;
}

nav ul li:last-child a {
    border-left: 4px solid #FFEC3D; /* Yellow left border */
    transform: skewX(25deg); /* Keep left-leaning skew */
    padding: 8px 24px 8px 12px; /* Match increased padding */
    height: 45px; /* Match reduced height */
    line-height: 45px; /* Match vertical centering */
}

nav ul li a span {
    display: inline-block;
    transform: skewX(-25deg); /* Counter skew for upright text */
    vertical-align: middle;
}

nav ul li:last-child a span {
    transform: skewX(-25deg); /* Consistent counter skew for upright text */
}

nav ul li a:hover {
    font-weight: bold;
    background-color: #0f2a5a; /* Slightly darker on hover */
}

.menu-toggle {
    display: none; /* Hidden by default (visible on mobile) */
}

.menu-toggle img {
    width: 32px;
    height: 32px;
    cursor: pointer;
}

/* Hero section */
.hero {
    position: relative;
    height: 60vh;
    background: url('assets/images/cover.jpg?v=<?php echo time(); ?>') no-repeat center center/cover; /* Updated cover image with cache-busting */
    display: flex;
    flex-direction: column; /* Stack title and call-to-action vertically */
    justify-content: center;
    align-items: center;
    text-align: center;
    max-width: 1400px; /* Limit width on desktop */
    margin: 0 auto; /* Center with side margins */
    background-color: #fafafa; /* Main content off-white */
}

.hero-title {
    color: #FFEC3D; /* Brighter yellow */
    font-size: 48px;
    font-weight: bold;
    border: 4px solid #2b4b99; /* Less saturated navy blue */
    padding: 20px;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); /* Slight shadow */
    background-color: transparent; /* Fully transparent */
}

.call-to-action {
    background-color: #FFEC3D; /* Yellow background */
    color: #1a3a7a; /* Darker blue text */
    font-size: 20px; /* Readable font size */
    padding: 12px 24px; /* Increased padding */
    border-radius: 20px; /* Rounded rectangle */
    margin-top: 20px; /* Space below title */
    display: inline-block; /* Fit content width */
    cursor: pointer; /* Indicate interactivity */
    font-weight: bold; /* Bold text */
}

/* Sections */
.sections, .faq-sections {
    max-width: 1200px;
    margin: 40px auto;
    padding: 0 20px;
    background-color: #fafafa; /* Main content off-white */
}

.section-container, .faq-container {
    background-color: #fafafa;
    border: 1px solid #ccc; /* Subtle border */
    border-radius: 10px;
    padding: 20px;
    box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.2); /* Slight shadow */
    transition: opacity 0.3s ease; /* Smooth fade effect */
    margin-bottom: 40px; /* Space between sections */
    background-size: cover; /* Cover the container with background image */
    background-position: center; /* Center the image */
    background-repeat: no-repeat; /* No tiling */
    position: relative;
    overflow: visible; /* Allow content to expand without clipping */
}

.section-container::before, .faq-container::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: inherit; /* Inherit the background image */
    opacity: 0.1; /* Very light transparency */
    z-index: -1; /* Place behind content */
    border-radius: 10px; /* Match container border radius */
}

.section-container.animate {
    animation: scale-up-section 0.25s ease-out forwards;
}

.section-container:nth-child(odd) .section {
    flex-direction: row; /* Text left, media right */
}

.section-container:nth-child(even) .section {
    flex-direction: row-reverse; /* Text right, media left */
}

.section {
    display: flex; /* Enables side-by-side */
    flex-direction: row; /* Default: media left, text right */
    align-items: center; /* Vertically center content */
    justify-content: space-between; /* Space between media and text */
    gap: 20px; /* Space between elements */
    flex-wrap: wrap; /* Allow wrapping if needed */
}

/* Optional: Alternate order on desktop for visual variety */
.section-container:nth-child(even) .section {
    flex-direction: row-reverse; /* Text left, media right on even sections */
}

/* Ensure media and text take up roughly half the width on desktop */
.media, .text-content {
    flex: 1; /* Equal width */
    min-width: 0; /* Prevent overflow issues */
}

.text-content {
     background: linear-gradient(to bottom, #1a3a7a, #1c3c6e);
}

.media-container {
    background-color: #fafafa; /* White rounded rectangle */
    border-radius: 20px;
    padding: 10px;
    min-height: 350px; /* Reduced min-height */
    box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.2); /* Slight shadow */
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.media img, .media video {
    width: 100%;
    height: auto;
    border-radius: 10px;
}

.carousel {
    position: relative;
    overflow: hidden;
    width: 100%;
    height: 300px; /* Fixed height for carousel */
}

.carousel img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Crop images to fit */
    display: none;
    border-radius: 10px;
}

.carousel img.active {
    display: block;
}

.carousel-controls {
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 8px;
}

.carousel-bullet {
    width: 10px;
    height: 10px;
    background-color: #ccc;
    border-radius: 50%;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.carousel-bullet.active {
    background-color: #2b4b99; /* Less saturated navy blue */
}

.carousel-bullet:hover {
    background-color: #FFEC3D; /* Brighter yellow */
}

.youtube-thumbnail {
    position: relative;
    cursor: pointer;
    width: 100%;
}

.youtube-thumbnail img {
    width: 100%;
    height: auto;
}

.youtube-icon {
    position: absolute;
    bottom: 10px;
    right: 10px;
    width: 48px;
    height: 48px;
    background: url('https://upload.wikimedia.org/wikipedia/commons/0/09/YouTube_play_button_icon_%282013-2017%29.svg') no-repeat center/contain;
}

.youtube-video-container {
    position: relative;
    width: 100%;
}

.youtube-close {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 32px;
    height: 32px;
    background-color: #2b4b99; /* Less saturated navy blue */
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 20px;
    font-weight: bold;
    border: none;
}

.youtube-close:hover {
    background-color: #FFEC3D; /* Brighter yellow */
}

.text-content {
    flex: 1;
    color: white;
    padding: 20px;
    border-radius: 20px;
    min-height: auto; /* Allow content to dictate height on PC */
    box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.2); /* Slight shadow */
    box-sizing: border-box; /* Include padding/borders in size */
}

.text-content h2 {
    margin-top: 0;
    color: #FFEC3D; /* Brighter yellow */
    font-size: 28px; /* Larger title text */
}

/* Animations */
.animate-fade-in {
    opacity: 0;
    transition: opacity 0.5s ease-out;
}

.animate-fade-in.animate {
    opacity: 1;
}

.animate-slide-down {
    max-height: 0;
    opacity: 0;
}

.animate-slide-down.animate {
    animation: slide-down 0.5s ease-out forwards;
}

@keyframes scale-up-section {
    from { transform: scale(0.9); }
    to { transform: scale(1); }
}

@keyframes scale-up {
    from { transform: scale(0.8); }
    to { transform: scale(1); }
}

@keyframes slide-in-left {
    from { transform: translateX(-50px); }
    to { transform: translateX(0); }
}

@keyframes slide-in-right {
    from { transform: translateX(50px); }
    to { transform: translateX(0); }
}

@keyframes slide-in-top {
    from { transform: translateY(-50px); }
    to { transform: translateY(0); }
}

@keyframes slide-in-bottom {
    from { transform: translateY(50px); }
    to { transform: translateY(0); }
}

@keyframes fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes rotate-in {
    from { transform: rotate(45deg); }
    to { transform: rotate(0deg); }
}

@keyframes bounce {
    0% { transform: translateY(0); }
    40% { transform: translateY(-10px); }
    60% { transform: translateY(0); }
    80% { transform: translateY(-5px); }
    100% { transform: translateY(0); }
}

@keyframes fade-in-faq {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes slide-down {
    from { max-height: 0; opacity: 0; }
    to { max-height: 500px; opacity: 1; }
}

.faq-foldout-icon {
    width: 24px; /* Default size for desktop */
    height: 24px;
    max-width: 24px; /* Prevent oversized scaling */
    max-height: 24px;
    vertical-align: middle; /* Align with question text */
    margin-left: 10px; /* Space from question */
    transition: transform 0.3s ease; /* Smooth rotation for expanded state */
}

.faq-foldout-icon.expanded {
    transform: rotate(180deg); /* Rotate arrow when FAQ is expanded */
}

/* Ensure FAQ question container aligns content properly */
.faq-question-container {
    display: flex;
    align-items: center; /* Vertically center question and icon */
    justify-content: space-between; /* Space out question and icon */
    padding: 10px 15px; /* Consistent padding */
    cursor: pointer; /* Indicate clickability */
}

/* Optional: Ensure FAQ container doesn't stretch icons */
.faq-container {
    box-sizing: border-box; /* Prevent padding/border from affecting size */
}

/* Footer */
footer {
    background: linear-gradient(170deg, #1a3a7a, #4b6cb7) !important; /* Base gradient matching lightest column */
    color: white;
    padding: 20px 0; /* Adjusted padding for full-width */
    display: flex;
    justify-content: center; /* Center the wrapper */
    text-align: center;
    border-top: 5px solid #FFEC3D; /* Brighter yellow border */
    font-weight: bold; /* Bolder text */
    width: 100%; /* Full viewport width */
    margin: 0; /* Remove margin for full-width effect */
}

.footer-wrapper {
    max-width: 1400px; /* Constrain content width */
    width: 100%;
    display: flex;
    justify-content: space-between;
}

.footer-column {
    flex: 1;
    padding: 20px 20px 0; /* Add padding-top to push content down */
    position: relative;
    transform: skewX(-10deg); /* Skew right side by 10° */
    background-color: transparent; /* Transparent to show footer gradient */
}

.footer-column:nth-child(1) {
    background: linear-gradient(170deg, rgba(26, 58, 122, 0.8), rgba(75, 108, 183, 0.8)) !important; /* Semi-transparent lightest gradient */
}

.footer-column:nth-child(2) {
    background: linear-gradient(170deg, rgba(22, 47, 101, 0.8), rgba(63, 90, 154, 0.8)) !important; /* Semi-transparent darker gradient */
}

.footer-column:nth-child(3) {
    background: linear-gradient(170deg, rgba(18, 36, 80, 0.8), rgba(51, 72, 125, 0.8)) !important; /* Semi-transparent darkest gradient */
}

.footer-column:not(:last-child) {
    border-right: 3px solid #FFEC3D; /* Yellow vertical divider */
}

.footer-column h3, .footer-column p, .footer-column ul {
    transform: skewX(10deg); /* Counter-skew content to remain upright */
}

.footer-column ul li {
    margin-bottom: 10px;
    display: flex;
    align-items: center;
}

.footer-column ul li a {
    color: white;
    text-decoration: none;
    font-weight: bold; /* Bolder links */
}

.footer-icon {
    width: 24px !important; /* Explicit size to prevent scaling */
    height: 24px !important; /* Explicit size to prevent scaling */
    margin-right: 8px;
    vertical-align: middle;
    transform: skewX(10deg); /* Counter-skew icons to remain upright */
    object-fit: contain; /* Ensure icons don't distort */
}

.footer-column h3 {
    color: #FFEC3D; /* Brighter yellow */
    font-size: 20px;
    margin: 0 0 10px 0;
    font-weight: bold;
    text-decoration: underline; /* Underline titles */
}

/* Mobile responsiveness */
@media (max-width: 768px) {

    /* Fresh Mobile Nav: Full-width dropdown below header */
    .menu-toggle {
        display: block; /* Show hamburger */
        order: 2; /* Push to right in flex header */
    }

    .hero, footer, header {
        max-width: 100%; /* Full width on mobile */
        margin: 0;
    }

    .sections, .faq-sections {
        padding: 0 10px;
    }

    .faq-container {
        flex-direction: column; /* Stack image above text */
    }

    .section {
        flex-direction: column !important; /* Stack vertically, overriding any row or row-reverse */
        align-items: stretch; /* Stretch to full width */
        justify-content: flex-start; /* Start from top */
        gap: 20px; /* Vertical space between media and text */
    }

    /* Text below */
    .text-content {
        width: 100%; /* Full width */
    }

    /* Optional: Adjust sizes for mobile readability */
    .text-content h2 {
        font-size: 24px; /* Example: Smaller heading */
    }

    .text-content p {
        font-size: 16px; /* Example: Smaller text */
    }

    /* Make media full-width and on top */
    .media {
        width: 100%; /* Full width */
        margin-bottom: 20px; /* Space below media */
        order: -1; /* Explicitly force media to top (redundant but safe if order changes) */
    }

    .media-container {
        min-height: auto; /* Remove min-height on mobile */
    }

    .carousel {
        height: 200px; /* Smaller fixed height for mobile */
    }

    .text-content {
        width: 100%; /* Full width for text */
        min-height: 200px; /* Smaller min-height on mobile */
    }

    .carousel, .youtube-thumbnail {
        min-height: auto; /* Remove min-height on mobile */
    }

    .logo img {
        height: 36px; /* Further reduced for mobile */
    }

    .logo h1 {
        font-size: 16px; /* Further reduced for mobile */
    }

    nav {
        position: static; /* Reset to flow naturally in header flex */
        flex: 0 0 auto; /* Don't grow/shrink */
        max-width: none; /* Ignore desktop 50% */
    }

    nav ul {
        display: none; /* Hidden by default */
        position: absolute; /* Break out of parent flow */
        top: 100%; /* Directly below header */
        left: 0; /* Start at viewport left edge */
        width: 100vw; /* Full screen width */
        margin: 0;
        padding: 0 0 10px 0; /* Add bottom padding to prevent cut-off */
        background-color: #2b4b99; /* Match header bg */
        flex-direction: column;
        z-index: 999; /* Above body, below header */
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3); /* Subtle drop shadow for depth */
        overflow: visible; /* No clipping */
    }

    nav.open ul {
        display: flex; /* Show as flex column */
    }

    nav ul li {
        margin: 0;
        width: 100%; /* Full width items */
        border-bottom: 1px solid #FFEC3D; /* Small yellow divider */
    }

    nav ul li:last-child {
        border-bottom: none;
    }

    nav ul li a {
        display: block; /* Full-width links */
        width: 100%;
        padding: 15px 20px; /* Generous touch targets */
        font-size: 16px; /* Readable */
        background-color: transparent; /* No bg, inherit from ul */
        border-left: none; /* Remove yellow border on mobile */
        border-radius: 0; /* No rounding */
        transform: none; /* No skew */
        height: auto;
        line-height: 1.4; /* Natural text */
        text-align: left; /* Align left for list feel */
        box-sizing: border-box;
    }

    nav ul li a:last-child {
        border-left: none; /* Remove yellow border on mobile */
    }

    nav ul li a span {
        transform: none; /* No counter-skew */
        display: block; /* Stack if needed, but inline here */
    }

    nav ul li a:hover {
        background-color: rgba(255, 255, 255, 0.1); /* Subtle hover */
    }

    /* Ensure header allows absolute child to escape */
    header {
        overflow: visible !important;
        position: fixed; /* Keep fixed */
    }

    /* Close menu on outside click (optional enhancement) */
    body.menu-open {
        overflow: hidden; /* Prevent body scroll when menu open */
    }

    .hero-title {
        font-size: 32px;
        padding: 15px;
    }

    .call-to-action {
        font-size: 16px; /* Smaller font size for mobile */
        padding: 10px 20px; /* Increased padding for mobile */
        margin-top: 15px; /* Reduced margin for mobile */
        color: #1a3a7a; /* Darker blue text */
    }

    .youtube-icon {
        width: 36px;
        height: 36px;
    }

    .youtube-close {
        width: 24px;
        height: 24px;
        font-size: 16px;
    }

    .faq-foldout-icon {
        width: 20px; /* Smaller for mobile */
        height: 20px;
        max-width: 20px;
        max-height: 20px;
        margin-left: 8px; /* Slightly less spacing */
    }

    .footer-icon {
        width: 20px !important; /* Explicit size for mobile */
        height: 20px !important; /* Explicit size for mobile */
        transform: none; /* Remove skew on mobile */
    }

    .footer-column:not(:last-child) {
        border-right: none; /* Remove dividers on mobile */
    }

    .footer-column h3 {
        font-size: 18px; /* Slightly smaller on mobile */
        transform: none; /* Remove skew on mobile */
    }

    .footer-column {
        transform: none; /* Remove skew on mobile */
        background: transparent !important; /* Ensure no gradient on mobile */
        padding: 15px 10px 0; /* Reduced padding-top for mobile */
    }

    .footer-column p, .footer-column ul {
        transform: none; /* Remove counter-skew on mobile */
    }

    .faq-question-container h2 {
        font-size: 20px; /* Smaller font size for mobile */
    }

    .faq-answer {
        font-size: 16px; /* Smaller font size for mobile */
    }

    footer {
        background: #2b4b99 !important; /* Solid blue on mobile */
    }

    .footer-wrapper {
        flex-direction: column; /* Stack columns vertically on mobile */
        padding: 0 10px; /* Adjusted padding for mobile */
    }
}