/* styles.css */

:root {
    --spacing: 20px;
    --spacing-mobile: 15px;
    --vh: 100%;
}

/* Global styles for the body and html */
body, html {
    margin: 0; /* Remove default margin */
    padding: 0; /* Remove default padding */
    height: 100%; /* Full height */
    width: 100%; /* Full width */
    font-family: Arial, sans-serif, monospace; /* Set font family */
    overflow: hidden; /* Hide overflow */
}

/* Fullscreen background for landing page */
.fullscreen-background-landing {
    position: relative; /* Positioned relative to its normal position */
    width: 100vw; /* Full viewport width */
    height: 100vh; /* Full viewport height */
    overflow: hidden; /* Hide overflow */
}

/* Background image styling for landing page */
.background-image-landing {
    width: 100vw; /* Full viewport width */
    height: 100vh; /* Full viewport height */
    object-fit: cover; /* Cover the full area without distortion */
}

/* Container for slideshow */
.slideshow-container {
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    position: absolute; /* Positioned absolute to its nearest positioned ancestor */
}

/* Individual slides within the slideshow */
.mySlides {
    position: absolute; /* Positioned absolute to its nearest positioned ancestor */
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    opacity: 0; /* Initial opacity */
    animation: fadeInOut 30s infinite; /* Fade in and out animation */
}

/* Keyframes for the fade-in and fade-out animation */
@keyframes fadeInOut {
    0%, 43.3%, 100% { opacity: 0; } /* Opacity at 0% */
    10%, 33.3% { opacity: 1; } /* Opacity at 100% */
}

/* Animation delay for the first slide */
.mySlides:nth-child(1) { animation-delay: 0s; }

/* Animation delay for the second slide */
.mySlides:nth-child(2) { animation-delay: 10s; }

/* Animation delay for the third slide */
.mySlides:nth-child(3) { animation-delay: 20s; }

/* Overlay container for landing page content */
.overlay-landing {
    position: absolute; /* Positioned absolute to its nearest positioned ancestor */
    top: 0; /* Position at the top */
    left: 0; /* Position at the left */
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    display: flex; /* Use flexbox layout */
    flex-direction: column; /* Flex direction as column */
    justify-content: center; /* Center items vertically */
    align-items: center; /* Center items horizontally */
    max-width: 100vw; /* Maximum width as viewport width */
}

/* Styling for the artist name on the landing page */
.artist-name-landing {
    font-size: min(12vh, 12vw); /* Responsive font size */
    color: white; /* White color */
    font-weight: bold; /* Bold text */
    text-transform: uppercase; /* Uppercase text */
    max-width: 100vw; /* Maximum width as viewport width */
}

/* Styling for the red letter within the artist name */
.artist-name-landing .red-letter {
    color: red; /* Red color */
}

/* Styling for the letter spacing within the artist name */
.artist-name-landing .letter-space {
    display: inline-block; /* Inline-block display */
    width: 0.5em; /* Width of 0.5em */
}

/* Styling for the gallery button on the landing page */
.gallery-button-landing {
    background-color: transparent; /* Transparent background */
    color: rgba(255, 255, 255, 0.5); /* Semi-transparent white text */
    padding: 1vw 2vw; /* Padding */
    text-decoration: none; /* No text decoration */
    font-size: max(2vh, 1.2vw); /* Responsive font size */
    border: max(0.25vh, 0.25vw) solid rgba(255, 255, 255, 0.5); /* Semi-transparent white border */
    cursor: pointer; /* Pointer cursor on hover */
    transition: background-color 0.3s, color 0.3s; /* Smooth transition for hover effect */
    position: absolute; /* Positioned absolute */
    left: 50%; /* Center horizontally */
    bottom: 15vh; /* Position 10vh from the bottom */
    transform: translateX(-50%); /* Center horizontally */
    max-width: 200px; /* Maximum width */
}

/* Hover and focus effects for the gallery button */
.gallery-button-landing:hover, .gallery-button-landing:focus {
    background-color: rgba(0, 0, 0, 0.25); /* Semi-transparent black background on hover */
    color: rgba(255, 0, 0, 0.5); /* Semi-transparent red text on hover */
    outline: none; /* Remove outline */
    border: 3px solid rgba(255, 0, 0, 0.5); /* Red border on hover */
}

/* Container for the gallery layout */
.container {
    display: flex; /* Use flexbox layout */
    width: 100vw; /* Full viewport width */
    height: calc(var(--vh, 1vh) * 100); /* Full viewport height */
}

/* Add the new artist-name-and-menu container styles */
.artist-name-and-menu {
    display: flex;
    align-items: center;
    justify-content: space-between; /* Distribute space between items */
    padding: 0; /* Add padding */
    width: 100%;
}

/* Adjust the artist-name styles for the new container */
.artist-name {
    flex: 1;
    overflow: hidden; /* Hide overflow */
    padding: 0;
    margin: 0;
    display: flex;
    align-items: center; /* Center the name vertically */
}

.artist-name h1 {
    margin: 0;
    /* font-size: clamp(16px, 2.5vw, 24px); /* Adjust font size */
    /* line-height: 1.2; /* Adjust line height */
}

.artist-name a {
    color: inherit; /* Inherit color from parent */
    text-decoration: none; /* Remove underline */
}

/* Hover effect for links within artist-name */
.artist-name a:hover {
    color: red; /* Change color to red on hover */
}

/* Hamburger menu icon styling */
.hamburger-menu-icon {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    font-size: 36px; /* Font size of the icon */
    cursor: pointer; /* Pointer cursor on hover */
    background: none; /* No background */
    border: none; /* No border */
    padding: 0;
}

/* Hamburger menu content styling */
.hamburger-menu-content {
    display: none; /* Hidden by default */
    position: absolute; /* Positioned absolute */
    top: 100%; /* Align to the bottom of the .left-panel-gallery */
    left: 0; /* Align to the left */
    width: 100%; /* Full width */
    background-color: rgb(221, 221, 221); /* Light gray background */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Shadow for better visibility */
    z-index: 1000; /* Ensure it's on top */
    overflow-y: auto; /* Enable vertical scrolling */
    max-height: calc(var(--vh, 1vh) * 100 - 60px); /* Maximum height adjusted */
}


/* Style for the unordered list within the hamburger menu */
.hamburger-menu-content ul {
    list-style: none; /* Remove bullet points */
    padding: 0; /* Remove default padding */
    margin: 0; /* Remove default margin */
    text-align: center; /* Center align the list items */
}

/* Style for list items within the hamburger menu */
.hamburger-menu-content li {
    margin-bottom: 10px; /* Space between list items */
}

/* Style for links within the hamburger menu */
.hamburger-menu-content a {
    text-decoration: none; /* Remove underline from links */
    color: #333; /* Dark gray color */
    display: inline-block; /* Make the whole area of the list item clickable */
    padding: 10px 0; /* Padding for clickable area */
    transition: color 0.3s; /* Smooth transition for color change */
}

/* Style for links when hovered or clicked */
.hamburger-menu-content a:hover, .hamburger-menu-content a:active {
    color: #0056b3; /* Blue color change on hover/click */
}

/* Pages menu styling */
.pages-menu {
    margin-top: calc(2 * var(--spacing)); /* Space from the artist name */
    flex-shrink: 1; /* Shrink */
    overflow-y: auto; /* Enable vertical scrolling */
    padding: 0; /* Remove default padding */
}

/* Unordered list styling within pages menu */
.pages-menu ul {
    list-style: none; /* Remove bullet points */
    padding: 0; /* Remove default padding */
    margin: 0; /* Remove default margin */
}

/* List item styling within pages menu */
.pages-menu li {
    margin-bottom: 10px; /* Space between list items */
}

/* Link styling within pages menu */
.pages-menu a {
    text-decoration: none; /* Remove underline from links */
    color: rgba(0, 0, 0, 0.75); /* Dark gray color */
    font-size: 1rem; /* Font size */
    transition: color 0.3s; /* Smooth transition for color change */
    display: block; /* Ensure links take full width */
}

/* Link hover effect within pages menu */
.pages-menu a:hover {
    color: #0056b3 !important; /* Blue color change on hover */
}

/* Gallery page styles */

/* Painting grid styling */
.painting-grid {
    column-gap: 1em; /* Gap between columns */
    row-gap: 0.8em; /* Gap between columns */
    padding: 0; /* Padding */
    margin: 0; /* Margin at the bottom */
}

/* Individual painting styling */
.painting {
    background-color: white; /* White background */
    box-shadow: 0 0px 0px rgba(0, 0, 0, 0.1); /* Subtle shadow */
    padding: 0px; /* No padding */
    margin-bottom: 0px; /* No bottom margin */
    display: inline-block; /* Inline-block display */
    width: 100%; /* Full width */
    break-inside: avoid; /* Avoid breaking inside */
}

/* Painting image styling */
.painting img {
    width: 100%; /* Full width */
    height: auto; /* Maintain aspect ratio */
}

/* Painting title styling */
.painting h3 {
    font-size: 1rem; /* Responsive font size */
    margin-top: calc(0.1 * var(--spacing-mobile)); /* Top margin */
    margin-bottom: 0.3px; /* Bottom margin */
    color: #333; /* Dark gray color */
}

/* Painting description styling */
.painting p {
    font-size: 0.8rem; /* Responsive font size */
    margin-top: calc(0.2 * var(--spacing-mobile)); /* Top margin */
    margin-bottom: calc(0.5 * var(--spacing-mobile)); /* Bottom margin */
    color: #666; /* Gray color */
}

/* Current page styling */
.current-page {
    color: rgba(0, 0, 0, 1) !important; /* Black color */
    font-weight: bold; /* Bold text */
    /* font-style: italic; /* Italic text */
}

/* Common styles for copyright info */
.copyright-info {
    width: 100%; /* Full width */
    background-color: white; /* White background */
    color: rgba(0, 0, 0, 0.5); /* Dark text */
    display: flex; /* Use flexbox for alignment */
    justify-content: center; /* Center content horizontally */
    align-items: center; /* Center content vertically */
    position: relative; /* Positioned relative to its normal position */
    box-sizing: border-box; /* Include padding and margin in height calculation */
    padding: 0; /* Padding to ensure some space inside */
    text-align: center; /* Center text */
}

/* Common styles for copyright info paragraph */
.copyright-info p {
    margin: 0; /* Remove default margin */
    max-width: 100%; /* Full width */
}

.artwork-info {
    display: block; /* Display as block */
    margin-top: auto; /* Auto top margin */
    margin-bottom: calc(2 * var(--spacing));
}

.artwork-info h2 {
    font-size: 1.5rem;
    margin: 0; /* Remove default margin */
    color: rgba(0, 0, 0); /* Apply color */
    /* font-style: italic; /* Italic text */
    font-weight: bold; /* Bold text */
}

.artwork-info p {
    font-size: 1rem;
    margin: 0; /* Remove default margin */
    padding-top: 10px; /* Add padding if needed */
    color: rgba(0, 0, 0); /* Apply color */
    /* font-style: italic; /* Italic text */
}

.mobile-artwork-info {
    display: block; /* Display as block */
    text-align: left; /* Align text to the left */
    padding: 0;
    margin-top: var(--spacing-mobile); /* Bottom margin */
    margin-bottom: calc(1.5 * var(--spacing-mobile)); /* Bottom margin */
    width: 100%;
}

.mobile-artwork-info h2 {
    font-size: min(1.2rem, 8vw, 3vh);
    margin: 0; /* Remove default margin */
    color: rgba(0, 0, 0); /* Apply color */
    /* font-style: italic; /* Italic text */
    font-weight: bold; /* Bold text */
}

.mobile-artwork-info p {
    font-size: min(0.9rem, 6vw, 3vh);
    margin: 0; /* Remove default margin */
    padding-top: calc(0.5 * var(--spacing-mobile)); /* Add padding if needed */
    color: rgb(0, 0, 0); /* Apply color */
}

/* Media queries for different screen sizes */

/* Styles for screens with a maximum width of 768px */
@media screen and (max-width: 768px) {
    /* Show hamburger menu icon only on mobile screens */
    .hamburger-menu-icon {
        /* display: block; /* Display as block */
        /* display: flex;
        flex: 0 0 20%; */

        font-size: 6vw; /*clamp(16px, 2.5vw, 24px); /* Responsive font size */
        flex: 1 1 20%; /* Allow it to grow and shrink */
        justify-content: flex-end; /* Center content horizontally */
        align-items: center; /* Center content vertically */
        height: 100%; /* Take up all available height */
    }

    /* Adjust the height for the artist-name-and-menu container */
    .artist-name-and-menu {
        height: 100%; /* Full height of the parent container */
    }

    /* Artist name adjustments for mobile */
    .artist-name {
        font-size: min(16px, 2vw, 1.5vh); /*clamp(16px, 2.5vw, 24px); /* Responsive font size */
        flex: 1 1 80%; /* Allow it to grow and shrink */
        justify-content: flex-start; /* Center content horizontally */
        align-items: center; /* Center content vertically */
        height: 100%; /* Take up all available height */
    }



    /* Hide the default menu on mobile */
    .pages-menu {
        display: none; /* Hide */
    }

    /* Gallery container adjustments for mobile */
    .container-gallery {
        flex-direction: column; /* Stack children vertically */
        display: flex; /* Use flexbox */
        width: 100vw; /* Full viewport width */
        /* height: 100vh; /* Full viewport height */
        height: calc(var(--vh, 1vh) * 100); /* Use the custom property for height */
    }

    /* Left panel adjustments for mobile */
    .left-panel-gallery {
        width: 100% !important; /* Full width */
        height: 12%; /* Adjust height */
        flex-basis: auto; /* Auto flex basis */
        background-color: white; /* Light gray background */
        padding: var(--spacing-mobile); /* Padding */
        box-sizing: border-box; /* Include padding in width calculation */
        position: relative; /* Positioned relative */
    }

    /* Right panel adjustments for mobile */
    .right-panel-gallery {
        width: 100% !important; /* Full width */
        flex-basis: auto; /* Auto flex basis */
        margin-left: 0; /* Remove left margin */
        padding: var(--spacing-mobile); /* Padding */
        padding-bottom: 0;
        overflow-y: auto; /* Enable vertical scrolling */
        box-sizing: border-box; /* Include padding in width calculation */
        position: relative; /* Positioned relative */
        display: flex; /* Use flexbox */
        flex-direction: column; /* Stack children vertically */
        align-items: flex-start; /* Align items to the start */
        height: 88%; /* Full viewport height */
        justify-content: flex-start; /* Align items to the start */
    }

    /* Hide artwork info on mobile */
    .artwork-info {
        display: none; /* Hide */
    }

    .mobile-artwork-info {
        display: block;
    }

    /* Painting grid adjustments for mobile */
    .painting-grid {
        column-count: 1; /* Single column */
    }

    /* Mobile-specific styles */
    .copyright-info {
        height: var(--spacing-mobile);
        margin-top: calc(1.5 * var(--spacing-mobile)); /* Top margin for mobile */
        margin-bottom: calc(0.5 * var(--spacing-mobile)); /* Bottom margin for mobile */
        font-size: 0.6rem; /* Responsive font size for mobile */
        flex-wrap: wrap; /* Allow text to wrap */
    }

    /* Contact form adjustments for mobile */
    .contact-form {
        width: 90%; /* 90% width */
        margin: 10px auto; /* Center horizontally with margin */
    }
}

/* Styles for screens with a minimum width of 769px */
@media screen and (min-width: 769px) {
    /* Hide hamburger menu icon only on wide screens */
    .hamburger-menu-icon {
        display: none;
    }

    /* Gallery container adjustments for desktop */
    .container-gallery {
        display: flex; /* Use flexbox */
        width: 100vw; /* Full viewport width */
        height: 100vh; /* Full viewport height */
    }

    /* Left panel adjustments for desktop */
    .left-panel-gallery {
        position: fixed; /* Fixed position */
        width: 270px; /* Fixed width */
        height: 100%; /* Full height */
        background-color: white; /* Light gray background */
        padding: var(--spacing); /* Padding */
        padding-bottom: calc(2 * var(--spacing));
        box-sizing: border-box; /* Include padding in width calculation */
        display: flex; /* Use flexbox */
        flex-direction: column; /* Stack children vertically */
        justify-content: flex-start; /* Align items to the top */
    }

    /* Right panel adjustments for desktop */
    .right-panel-gallery {
        flex-grow: 1; /* Grow to fill available space */
        overflow-y: auto; /* Enable vertical scrolling */
        margin-left: 270px; /* Margin to the left */
        width: calc(100% - 270px); /* Remaining width */
        box-sizing: border-box; /* Include padding in width calculation */
        background-color: white; /* Light gray background */
        position: relative; /* Positioned relative */
        display: flex; /* Use flexbox */
        flex-direction: column; /* Stack children vertically */
        align-items: center; /* Center items horizontally */
        height: 100%; /* Full viewport height */
        padding: var(--spacing); /* Padding */
        padding-bottom: 0;
    }

    .artist-name {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        white-space: nowrap;
    }

    .artist-name h1 {
        margin: 0;
        padding: 0;
        font-size: 1em; /* Initial font size, will be adjusted dynamically */
    }

    /* Hide mobile artwork info on desktop */
    .artwork-info {
        display: block;
    }

    .mobile-artwork-info {
        display: none; /* Hide */
        height: 0;
    }

    /* Painting title and description adjustments for desktop */
    .painting h3, .painting p {
        display: none; /* Hide */
        margin-top: 0; /* No top margin */
        margin-bottom: 0; /* No bottom margin */
    }

    /* Desktop-specific styles */
    .copyright-info {
        height: var(--spacing);
        margin-top: var(--spacing); /* Top margin for desktop */
        font-size: 1rem; /* Responsive font size for desktop */
        flex-wrap: wrap; /* Allow text to wrap */
    }
}

/* Styles for screens with a minimum width of 769px and a maximum width of 1000px */
@media screen and (min-width: 769px) and (max-width: 1000px) {
    .painting-grid {
        column-count: 2; /* Two columns */
    }
}

/* Styles for screens with a minimum width of 1001px and a maximum width of 1400px */
@media screen and (min-width: 1001px) and (max-width: 1400px) {
    .painting-grid {
        column-count: 3; /* Three columns */
    }
}

/* Styles for screens with a minimum width of 1401px and a maximum width of 1800px */
@media screen and (min-width: 1401px) and (max-width: 1800px) {
    .painting-grid {
        column-count: 4; /* Four columns */
    }
}

/* Styles for screens with a minimum width of 1801px */
@media screen and (min-width: 1801px) {
    .painting-grid {
        column-count: 5; /* Five columns */
    }
}

/* Responsive image styling */
.responsive-image {
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    max-height: 100%; /* Maximum height */
    max-width: 100%; /* Maximum width */
    object-fit: contain; /* Contain within the container */
    display: block; /* Display as block */
    margin: 0 auto; /* Center horizontally */
    padding: 0; /* Padding */
    box-sizing: border-box; /* Include padding in width/height calculations */
}

/* Contact form styling */
.contact-form {
    width: min(100%, 768px); /* Full width */
    height: 100%; /* Full height */
    max-height: 100%; /* Maximum height */
    display: block; /* Display as block */
    margin: 0 auto; /* Center horizontally */
    box-sizing: border-box; /* Include padding in width/height calculations */
    overflow-y: auto; /* Enable vertical scrolling */
    background-color: white; /* Light gray background */
    /* box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Box shadow */
    /* border-radius: 0px; /* Rounded corners */
}

/* Contact form heading styling */
.contact-form h2 {
    text-align: center; /* Center align text */
    margin-bottom: 20px; /* Bottom margin */
    font-size: 1.5em; /* Font size */
}

/* Contact form label styling */
.contact-form label {
    display: block; /* Display as block */
    margin-top: 10px; /* Top margin */
    font-weight: bold; /* Bold text */
}

/* Contact form input and textarea styling */
.contact-form input, .contact-form textarea {
    width: 100%; /* Full width */
    padding: 10px; /* Padding */
    margin-top: 5px; /* Top margin */
    margin-bottom: 10px; /* Bottom margin */
    border: 1px solid #ccc; /* Gray border */
    border-radius: 0px; /* Rounded corners */
    box-sizing: border-box; /* Include padding in width calculation */
}

/* Contact form button styling */
.contact-form button {
    display: block; /* Display as block */
    width: 100%; /* Full width */
    padding: 10px; /* Padding */
    background-color: #333; /* Dark gray background */
    color: white; /* White text */
    border: none; /* No border */
    border-radius: 0px; /* Rounded corners */
    font-size: 1em; /* Font size */
    cursor: pointer; /* Pointer cursor on hover */
    transition: background-color 0.3s ease; /* Smooth background color transition */
}

/* Contact form button hover effect */
.contact-form button:hover {
    background-color: #555; /* Lighter gray background on hover */
}

/* Contact form span styling */
.contact-form span {
    color: red; /* Red color */
}

/* Contact form paragraph styling */
.contact-form p {
    color: #666; /* Gray color */
    font-size: 0.9em; /* Font size */
    margin-top: -10px; /* Negative top margin */
    margin-bottom: 10px; /* Bottom margin */
}

/* About page content styling */
.about-content {
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    max-height: 100%; /* Maximum height */
    display: block; /* Display as block */
    margin: 0 auto; /* Center horizontally */
    box-sizing: border-box; /* Include padding in width/height calculations */
    overflow-y: auto; /* Enable vertical scrolling */
}

/* Text content styling within about page */
.text-content {
    flex: 3; /* Flex grow factor */
    text-align: justify;
}

/* Image content styling within about page */
.image-content {
    flex: 2; /* Flex grow factor */
    display: flex; /* Use flexbox */
    justify-content: center; /* Center items horizontally */
    align-items: center; /* Center items vertically */
}

/* About page image styling */
.about-image {
    max-width: 100%; /* Maximum width */
    height: auto; /* Maintain aspect ratio */
    display: block; /* Display as block */
    /* margin-top: 20px; /* Top margin */
}

/* Styles for screens with a minimum width of 769px */
@media screen and (min-width: 769px) {
    /* About content adjustments for desktop */
    .about-content {
        display: flex; /* Use flexbox */
        flex-direction: row; /* Stack children horizontally */
        align-items: flex-start; /* Align items to the top */
        padding: calc(1.5 * var(--spacing));
    }

    .text-content {
        padding-right: calc(1.5 * var(--spacing)); /* Left margin */
    }

    /* About image adjustments for desktop */
    .about-image {
        padding-left: var(--spacing);; /* Left margin */
    }
}

/* Styles for screens with a maximum width of 768px */
@media screen and (max-width: 768px) {
    .about-content {
        display: block; /* Display as block */
        padding: var(--spacing-mobile);
    }
}

/* Navigation buttons styling */
.navigation-buttons-desktop,
.navigation-buttons-mobile {
    display: none; /* Hide by default */
    width: 100%; /* Full width */
    position: relative; /* Position relative for absolute positioning of buttons */
    text-align: center; /* Center content */
    display: flex; /* Use flexbox */
    align-items: center; /* Center items vertically */
    justify-content: space-between; /* Distribute space between items */
    font-size: 0.9rem; /* Adjust font size as needed */
    height: auto; /* Ensure height adjusts to content */
    padding: 0; /* Add padding for better visual appearance */
    box-sizing: border-box; /* Include padding in height calculation */
}

.navigation-buttons-desktop a,
.navigation-buttons-mobile a {
    text-decoration: none; /* Remove underline */
    color: inherit; /* Inherit color */
    flex: 1; /* Allow flex items to grow */
    text-align: center; /* Center text */
    padding: 0; /* Add padding for clickable area */
}

.navigation-buttons-desktop a#prevButtonDesktop,
.navigation-buttons-mobile a#prevButtonMobile {
    text-align: left; /* Align text to the left */
}

.navigation-buttons-desktop a#nextButtonDesktop,
.navigation-buttons-mobile a#nextButtonMobile {
    text-align: right; /* Align text to the right */
}

.navigation-buttons-desktop a:hover,
.navigation-buttons-mobile a:hover {
    color: blue; /* Change color on hover */
}

.navigation-buttons-desktop .separator,
.navigation-buttons-mobile .separator {
    display: none; /* Hide the separator */
}

/* Media queries for different screen sizes */
@media screen and (max-width: 768px) {
    /* Show mobile navigation buttons on mobile screens */
    .navigation-buttons-mobile {
        display: flex;
    }

    /* Hide desktop navigation buttons on mobile screens */
    .navigation-buttons-desktop {
        display: none;
    }
}

@media screen and (min-width: 769px) {
    /* Show desktop navigation buttons on wide screens */
    .navigation-buttons-desktop {
        display: flex;
    }

    /* Hide mobile navigation buttons on wide screens */
    .navigation-buttons-mobile {
        display: none;
    }
}

/* Additional styles for navigation, footer, etc. */