/* Sticky Banner */
.sticky-banner {
    position: sticky;
    top: 0;
    background-color: #f5f5f5;
    border-bottom: 1px solid #ddd;
    z-index: 1000;
    padding: 10px 0;
    text-align: center;
}

.page-nav {
    list-style: none;
    display: inline-flex;
    gap: 20px;
    padding: 0;
    margin: 0;
}

.page-nav a {
    text-decoration: none;
    font-size: 14px;
    font-weight: bold;
    color: #333;
    padding: 5px 10px;
    transition: color 0.3s ease, background-color 0.3s ease;
}

.page-nav a:hover,
.page-nav a.active {
    color: #fff;
    background-color: #ffcc00;
    border-radius: 4px;
}

/* Smooth Scrolling */
html {
    scroll-behavior: smooth;
}

/* General Page Styling */
main {
    padding: 20px;
    max-width: 1200px;
    margin: 0 auto;
}

section {
    margin-bottom: 40px;
}

section h1 {
    font-size: 32px;
    margin-bottom: 20px;
    color: #333;
    border-bottom: 2px solid #ffcc00;
    padding-bottom: 5px;
}

.subsection {
    margin-bottom: 120px;
}

.subsection h2 {
    font-size: 24px;
    color: #ff0000;
    margin-bottom: 10px;
}

.subsection .content-row {
    display: flex;
    align-items: flex-start; /* Aligns text and images at the top */
    gap: 20px; /* Adds spacing between the text and the images */
}

.subsection .text-column {
    flex: 1; /* Takes up 1/3 of the space */
    max-width: 33%; /* Ensures consistent sizing */
    font-size: 16px;
    line-height: 1.6;
    color: #333;
}

.subsection .image-row {
    flex: 2; /* Takes up 2/3 of the space */
    display: flex;
    justify-content: center; /* Centers images horizontally */
    gap: 10px; /* Adds spacing between images */
}

.subsection .image-row img {
    max-width: 100%; /* Ensures images fit within the container */
    height: auto; /* Maintains aspect ratio */
    border-radius: 8px; /* Optional: rounded corners */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Optional: subtle shadow */
}

/* Ensure the images are larger */
.subsection .image-row img {
    max-height: 450px; /* Increases image height */
    object-fit: cover; /* Ensures the image scales properly */
}

#what-is .content {
    display: flex;
    align-items: center;
    gap: 20px; /* Space between the GIF and the text */
}

#what-is .content img {
    max-width: 300px; /* Restricts the GIF size */
    width: 100%;
    flex-shrink: 0; /* Prevents the image from shrinking */
    border-radius: 8px; /* Optional: rounded corners */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Optional: subtle shadow */
}

#what-is .content p {
    flex: 1; /* Allows the text to take up remaining space */
    font-size: 16px;
    line-height: 1.6;
    color: #333;
}


/* Mobile Optimization */
@media (max-width: 768px) {
    /* Sticky Banner */
    .sticky-banner {
        padding: 8px 0; /* Reduce padding for smaller screens */
    }

    .page-nav {
        flex-wrap: wrap; /* Allow navigation items to wrap */
        gap: 10px; /* Reduce spacing between items */
        justify-content: center; /* Center navigation links */
    }

    .page-nav a {
        font-size: 12px; /* Adjust font size for smaller screens */
        padding: 5px; /* Compact padding for better fit */
    }

    /* General Page Styling */
    main {
        padding: 15px; /* Reduce main padding */
    }

    section h1 {
        font-size: 24px; /* Scale down the section title */
        margin-bottom: 15px; /* Adjust spacing below the title */
    }

    .subsection {
        margin-bottom: 80px; /* Reduce spacing between subsections */
    }

    .subsection h2 {
        font-size: 20px; /* Adjust font size for subsection titles */
        margin-bottom: 8px; /* Reduce spacing below titles */
    }

    .subsection .content-row {
        flex-direction: column; /* Stack text and images vertically */
        gap: 15px; /* Adjust spacing between stacked elements */
    }

    .subsection .text-column {
        max-width: 100%; /* Allow text to take up full width */
        font-size: 14px; /* Reduce text size for readability */
        line-height: 1.4; /* Adjust line height */
    }

    .subsection .image-row {
        flex-wrap: wrap; /* Allow images to wrap */
        gap: 10px; /* Adjust gap between images */
        justify-content: center; /* Center images */
    }

    .subsection .image-row img {
        max-height: 300px; /* Scale down image height for smaller screens */
    }

    /* Hero Section */
    #what-is .content {
        flex-direction: column; /* Stack GIF and text vertically */
        text-align: center; /* Center-align content */
        gap: 15px; /* Adjust spacing between text and image */
    }

    #what-is .content img {
        max-width: 100%; /* Ensure image responsiveness */
        max-height: 250px; /* Scale down the GIF size */
    }

    #what-is .content p {
        font-size: 14px; /* Adjust font size for text */
        line-height: 1.4; /* Adjust line height for readability */
    }
}