/* General Section Styling */
section {
    margin: 20px auto;
    padding: 20px;
    background-color: #ffffff;
    border: 1px solid #e0e0e0;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    max-width: 900px;
}

h1 {
    font-size: 28px;
    color: #333;
    margin-bottom: 15px;
    text-align: center;
}

h2 {
    font-size: 22px;
    color: #ff0000;
    margin-bottom: 10px;
}

/* Text and Images in Same Row Styling */
section .content-row {
    display: flex; /* Flex layout for row alignment */
    justify-content: space-between; /* Space between text and images */
    align-items: flex-start; /* Align text and images at the top */
    gap: 20px; /* Add space between text and images */
    flex-wrap: wrap; /* Wrap for smaller screens */
}

section .text-column {
    flex: 2; /* Text takes up more space */
    font-size: 16px;
    line-height: 1.6;
    color: #333;
}

section ul {
    margin: 10px 0 20px 20px;
    padding: 0;
    list-style: disc;
}

section ul li {
    margin-bottom: 10px;
}

section .image-row {
    flex: 1; /* Images take up less space */
    display: flex; /* Align images in a row */
    justify-content: center; /* Center images horizontally */
    align-items: center; /* Align images vertically */
    gap: 10px; /* Add space between images */
    flex-wrap: nowrap; /* Prevent wrapping to ensure all images stay in a single row */
}

section .image-row img {
    max-width: 150px; /* Adjust size for images */
    height: auto; /* Maintain aspect ratio */
    border-radius: 8px; /* Optional: Rounded corners */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Optional: Subtle shadow */
}

/* Sticky Navigation Styling */
.page-nav {
    display: flex;
    justify-content: center;
    background-color: #ffcc00;
    padding: 10px 0;
    margin-bottom: 20px;
    border-bottom: 2px solid #e0e0e0;
    position: sticky;
    top: 0;
    z-index: 1000;
}

.page-nav li {
    margin: 0 15px;
    list-style: none;
}

.page-nav a {
    text-decoration: none;
    font-size: 16px;
    color: #333;
    font-weight: bold;
    transition: color 0.3s;
}

.page-nav a:hover,
.page-nav a.active {
    color: #ff0000;
}

/* Footer Styling */
footer {
    text-align: center;
    padding: 15px 0;
    background-color: #f9f9f9;
    color: #666;
    font-size: 14px;
    border-top: 1px solid #e0e0e0;
    margin-top: 40px;
}

/* Mobile Optimization */
@media (max-width: 768px) {
    /* General Section Styling */
    section {
        padding: 15px;
        margin: 15px auto;
    }

    h1 {
        font-size: 24px; /* Smaller headline size */
        margin-bottom: 10px;
    }

    h2 {
        font-size: 18px; /* Adjust subheading size */
        margin-bottom: 8px;
    }

    /* Text and Images in Same Row Styling */
    section .content-row {
        flex-direction: column; /* Stack text and images vertically */
        gap: 15px; /* Add spacing between stacked elements */
    }

    section .text-column {
        font-size: 14px; /* Reduce text size for better readability */
    }

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

    section .image-row img {
        max-width: 100%; /* Make images responsive */
        height: auto;
    }

    /* Sticky Navigation Styling */
    .page-nav {
        flex-wrap: wrap; /* Allow navigation items to wrap on small screens */
        gap: 10px; /* Add spacing between links */
    }

    .page-nav li {
        margin: 5px 10px; /* Adjust margin for smaller links */
    }

    .page-nav a {
        font-size: 14px; /* Reduce link text size */
    }

    /* Footer Styling */
    footer {
        font-size: 12px; /* Reduce font size for footer */
        padding: 10px; /* Adjust padding */
    }
}