/* General Styles */
body {
    margin: 0;
    padding: 0;
    font-family: Arial, sans-serif;
    background-image: url('background.jpg');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    min-height: 100vh;
}

/* Remove background image for the "Tommy 2023 Release" page */
body#tommy-2023-release {
    background-image: none;
}

/* Remove background image for the "Head for the sun EP" page */
body#head-for-the-sun-EP {
    background-image: none;
}

/* Center content on the page and add top margin to avoid overlap */
.content {
    width: 100%;
    max-width: 900px;
    margin: 20px auto 0; /* Top margin to ensure text is visible */
    padding: 40px;
    box-sizing: border-box; /* Include padding in the total width/height */
}

/* Hide/show content sections */
.hidden {
    display: none;
}

/* Menu Styles */
.menu {
    position: fixed;
    top: 350px; /* Space from the top */
    left: 10px; /* Space from the left */
    z-index: 1000; /* Ensure the menu is above other content */
    display: flex; /* Use flexbox */
    flex-direction: column; /* Stack items vertically */
    gap: 2px; /* Space between menu items */
    font-size: 16px; /* Font size */
    text-align: left;
}

.menu-item {
    color: #F26F3A; /* Text color: orange */
    margin-right: 10px; /* Space between menu items */
    font-size: 16px; /* Font size */
    font-weight: bold;
    cursor: pointer; /* Pointer cursor on hover */
    pointer-events: auto; /* Enable pointer events */
}

.menu-item.active {
    opacity: 0.5; /* Transparent text for active menu item */
}

/* Social Icons Styles */
.social-icons {
    position: fixed;
    top: 10px; /* Align icons to the top */
    right: 5px; /* Align icons to the right */
    z-index: 1000; /* Ensure icons are above other content */
}

.social-icons a {
    color: #F26F3A; /* Icon color: orange */
    text-decoration: none; /* Remove underline */
    font-size: 16px; /* Icon size */
    margin-left: 10px; /* Space between icons */
}

/* Section Styles */
.section {
    height: 100vh; /* Full viewport height */
}

/* Phony job section Styles */
/* Kyron Style */
.kyron {
    position: fixed;
    bottom: 5%; /* Adjust to position near the bottom */
    left: 0;
    width: 100%;
    background-color: rgba(0, 0, 0, 0.3); /* Semi-transparent background */
    color: white;
    padding: 2px 2px;
    font-size: 16px;
    font-weight: bold;
    text-align: center;
    overflow: hidden; /* Hide the overflow to create the scrolling effect */
    border-radius: 5px;
    z-index: 1000;
}

.kyron a {
    color: #F26F3A; /* Link color */
    text-decoration: underline;
}

.kyron a:hover {
    text-shadow: 1px 0 0 currentColor; /* Add underline on hover */
}

.kyron p {
    display: inline-block;
    white-space: nowrap; /* Prevent line break */
    padding-left: 100%; /* Start fully outside the right edge */
    animation: scroll-left 20s linear infinite;
}

/* Animation for scrolling */
@keyframes scroll-left {
    0% {
        transform: translateX(0); /* Start from the far right edge */
    }
    100% {
        transform: translateX(-100%); /* Move off to the left edge */
    }
}

/* Music Section Styles */
#music {
    position: fixed;
    top: 85%; /* Vertical center */
    left: 50%; /* Horizontal center */
    transform: translate(-50%, -50%); /* Precise centering */
    text-align: center; /* Center text */
    overflow: hidden; /* Disable text scrolling */
    z-index: 1000; /* Ensure content is above other elements */
}

#music ul {
    list-style-type: none; /* Remove bullets */
    padding: 0; /* Remove default padding */
    line-height: 2; /* Control vertical alignment */
    margin: 0; /* Remove default margin */
}

#music a {
    font-size: 18px; /* Font size: 24px */
    color: #F26F3A; /* Text color: orange */
    font-weight: bold;
}

/* Adjust font size and layout for smaller screens - Music */
@media (max-width: 768px) {
    #music {
        position: fixed;
        top: 97%; /* Vertical center */
        left: 50%; /* Horizontal center */
        transform: translate(-50%, -50%); /* Precise centering */
        text-align: center; /* Center text */
        overflow: hidden; /* Disable text scrolling */
        z-index: 1000; /* Ensure content is above other elements */
    }

    /* Adjust text size inside the Music section */

    #music ul li a {
        font-size: 12px; /* Adjust as needed */
        font-weight: bold;
        line-height: 1.5; /* Reduce spacing between lines */
        display: block;
    }
}

/* Shows Section Style */
#shows {
    position: fixed;
    top: 54%; /* Vertical center */
    left: 90%; /* Horizontal center */
    transform: translate(-50%, -50%); /* Precise centering */
    text-align: left; /* Center text */
    overflow: hidden; /* Disable text scrolling */
    z-index: 1000; /* Ensure content is above other elements */
}

#shows h2 {
    font-size: 15px;
    color: #F26F3A; /* Same orange as your theme */
    margin-bottom: 10px;
}

#shows .show-item {
    font-size: 13px;
    color: #F26F3A; /* Same orange as your theme */
    margin-bottom: 10px;
}

/* Currently there are no links "a href" under listed shows */
#shows a {
    color: #F26F3A; /* Link color to match theme */
    text-decoration: none;
}

#shows a:hover {
    text-decoration: underline;
}

/* Adjust font size and layout for smaller screens - Shows */
@media (max-width: 768px) {
    #shows {
        position: fixed;
        top: 63%; /* Vertical center */
        left: 55%; /* Horizontal center */
        transform: translate(-50%, -50%); /* Precise centering */
        text-align: left; /* Center text */
        overflow: hidden; /* Disable text scrolling */
        z-index: 1000; /* Ensure content is above other elements */
    }

    /* Adjust h2 font size */
    #shows h2 {
        font-size: 10px; /* Change to preferred size */
    }

    /* Adjust shows layout */
    #shows .shows-container {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }

    /* Adjust text size inside show items */
    #shows .show-item {
        font-size: 10px;
        color: #F26F3A;
        font-weight: bold;
    }
}

/* Contact Section Style */
#contact {
    position: fixed;
    top: 110%; /* Vertical center */
    left: 50%; /* Horizontal center */
    transform: translate(-50%, -50%); /* Precise centering */
    text-align: center; /* Center text */
    overflow: hidden; /* Disable scrolling */
    z-index: 1000; /* Ensure content is above other elements */
}

#contact p {
    font-size: 16px; /* Adjust the font size as desired */
    color: #F26F3A; /* Text color */
    font-weight: bold;
}

#contact a {
    color: #F26F3A; /* Link color (orange to match your theme) */
    font-weight: bold;
    text-decoration: underline;
}

#contact a:hover {
    text-shadow: 1px 0 0 currentColor;
}

/* Adjust font size and layout for smaller screens - Contact */
@media (max-width: 768px) {
    #contact {
        position: fixed;
        top: 125%; /* Vertical center */
        left: 50%; /* Horizontal center */
        transform: translate(-50%, -50%); /* Precise centering */
        text-align: center; /* Center text */
        overflow: hidden; /* Disable text scrolling */
        z-index: 1000; /* Ensure content is above other elements */
    }

    /* Adjust font size */
    #contact p {
        font-size: 12px; /* Change to preferred size */
    }
}

/* TOMMY 2023 Release Page Styles */
#tommy-2023-release {
    display: flex;
    flex-direction: column;
    align-items: center; /* Center items horizontally */
    justify-content: flex-start; /* Align content at the start vertically */
    text-align: center;
    height: 100vh;
    margin: 0; /* Remove default margin */
    padding: 0; /* Remove default padding */
}

#tommy-2023-release img {
    max-width: 50%; /* Fit image within viewport */
    height: auto; /* Maintain aspect ratio */
    margin: 0 auto; /* Center image horizontally */
    display: block; /* Block element */
}

#tommy-2023-release h2 {
    font-size: 18px;
    margin: 0; /* Remove default margin */
    padding: 0; /* Remove default padding */
}

#tommy-2023-release p {
    margin: 0; /* Remove default margin */
    padding: 0; /* Remove default padding */
}

#tommy-2023-release a {
    color: #F26F3A; /* Link color: orange */
    text-decoration: underline;
}

#tommy-2023-release a:hover {
    color: #F26F3A; /* Link color: orange */
    text-shadow: 1px 0 0 currentColor;
}

/* Adjust vertical spacing */
.spacing-reduced h2, .spacing-reduced p {
    margin: 0; /* Adjust to control spacing */
    padding: 0; /* Remove padding */
}

/* Additional Info Section Styles - Tommy Release Page */
.additional-info {
    display: flex;
    justify-content: space-between; /* Space between columns */
    width: 100%;
    max-width: 1400px; /* Increase max-width for more space */
    margin: 20px auto; /* Center section with top margin */
    padding: 0 -1px; /* Increase padding around columns */
    box-sizing: border-box; /* Include padding in total width */
}

/* Adjust individual column styles */
.additional-info div {
    flex: 1; /* Equal space for each column */
    padding: 8px; /* Padding inside each column */
    min-width: 0; /* Allow columns to shrink */
    box-sizing: border-box; /* Include padding in width calculation */
    margin: 0 -8px; /* Adjust horizontal margin to separate columns */
}

/* Add space below column titles */
.additional-info .track-list h3,
.additional-info .credits h3 {
    margin-bottom: 10px; /* Adjust the spacing as needed */
}

/* Make lyrics columns wider */
.additional-info .lyrics-song1,
.additional-info .lyrics-song2 {
    flex: 2; /* Increase flex value for wider columns */
}

/* Ensure track-list and credits columns are narrower */
.additional-info .track-list,
.additional-info .credits {
    flex: 1; /* Default flex value for narrower columns */
}

/* Lyrics Styling */
.lyrics {
    white-space: pre-wrap; /* Preserve white spaces and line breaks */
    font-family: Arial, sans-serif; /* Consistent font style */
    overflow-wrap: break-word; /* Break and wrap long words */
    font-size: 12px; /* Font size */
}

/* Responsive adjustments for Tommy */
@media (max-width: 768px) {
    .additional-info-tommy-2023 {
        flex-direction: column;
        align-items: center;
        gap: 20px;
    }

    #tommy-2023-release .track-list, .credits, .lyrics {
        max-width: 90%; /* Make them take most of the screen width */
        text-align: center;
    }

    #tommy-2023-release .track-list p {
        font-size: 9px; /* Adjust as needed */
        line-height: 1; /* Improves readability */
    }

    #tommy-2023-release .credits p {
        font-size: 9px; /* Adjust as needed */
        line-height: 1; /* Improves readability */
    }

    .content img {
        max-width: 80%; /* Resize artwork */
        height: auto;
    }

    #tommy-2023-release p a {
        font-size: 12px;
    }

    #tommy-2023-release h2 {
        font-size: 12px;
    }

    #tommy-2023-release h3 {
        font-size: 10px;
    }

    .lyrics-song1 .lyrics, 
    .lyrics-song2 .lyrics {
        font-size: 9px; /* Adjust as needed */
        line-height: 1; /* Adjust for better readability */
        white-space: pre-wrap; /* Ensures proper text wrapping on smaller screens */
    }
}

/* Head for the sun EP Page Styles */
#head-for-the-sun-EP {
    text-align: center;
}

#head-for-the-sun-EP h2 {
    font-size: 18px;
    margin: 0; /* Remove default margin */
    padding: 0; /* Remove default padding */
}

#head-for-the-sun-EP p {
    margin: 0; /* Remove default margin */
    padding: 0; /* Remove default padding */
}

#head-for-the-sun-EP a {
    color: #F26F3A; /* Link color: orange */
    text-decoration: underline;
}

#head-for-the-sun-EP a:hover {
    color: #F26F3A; /* Link color: orange */
    text-shadow: 1px 0 0 currentColor;
}

/* Head for the Sun EP - Layout Adjustments */
.additional-info-head-for-the-sun-EP {
    display: flex;
    justify-content: center; /* Center content */
    width: 100%;
    max-width: 1000px; /* Reduce max-width to bring columns closer */
    margin: 20px auto; /* Center the section */
    margin-top: -30px; /* Reduce space between artwork and text */
}

/* Wrapper to keep Track List & Credits close together */
.additional-info-head-for-the-sun-EP .info-wrapper {
    display: flex;
    justify-content: center; /* ✅ Keeps columns together */
    align-items: flex-start;
    gap: 10px; /* Adjust spacing between columns */
    max-width: 650px;
    width: 100%;
}

/* Adjust individual column styles */
.additional-info-head-for-the-sun-EP .track-list,
.additional-info-head-for-the-sun-EP .credits {
    flex: none; /* ✅ Prevents them from stretching */
    width: 30%; /* ✅ Keeps them from going too far left/right */
    text-align: left; /* Align text to the left */
}

/* 1️⃣ Match font sizes to Tommy 2023 page */
.additional-info-head-for-the-sun-EP .track-list h3,
.additional-info-head-for-the-sun-EP .credits h3 {
    font-size: 14px; /* Match Tommy 2023 */
    margin-bottom: 8px; /* Adjust spacing below titles */
}

.additional-info-head-for-the-sun-EP .track-list p,
.additional-info-head-for-the-sun-EP .credits p {
    font-size: 12px; /* Match content font size to Tommy 2023 */
}

/* Ensure Image & Content Stay Balanced */
#head-for-the-sun-EP img {
    max-width: 50%; /* Reduce image size if needed */
    height: auto;
    display: block;
    margin: 0 auto; /* Keep it centered */
}

/* Responsive: Stack on smaller screens */
@media (max-width: 768px) {
    .additional-info-head-for-the-sun-EP .info-wrapper {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 20px;
    }

    .additional-info-head-for-the-sun-EP .track-list,
    .additional-info-head-for-the-sun-EP .credits {
        width: 100%;
        text-align: center;
    }
}

/* Ensure space between "LISTEN HERE" and the artwork - Tommy and Head for the sun pages */
.content p a {
    display: inline-block; 
    padding-bottom: 20px; /* Adds spacing below the "LISTEN HERE" text */
}

/* Column Titles Styling */
.additional-info h3 {
    font-size: 14px; /* Font size for titles */
    margin: 0; /* Remove default margin */
    padding: 0; /* Remove default padding */
}

/* Column Content Styling */
.additional-info p {
    font-size: 12px; /* Font size for content */
    margin: 0; /* Remove default margin */
    padding: 0; /* Remove default padding */
}

/* Apply box-sizing to all elements */
*,
*::before,
*::after {
    box-sizing: border-box;
}

/* WOO HOO Head page style */
/* General Styles */
body {
    margin: 0;
    padding: 0;
    font-family: Arial, sans-serif;
}

/* WOO HOO Head page style */
body#woo-hoo-head {
    overflow: hidden; /* Hide scrollbars only on this page */
}

/* Remove background image for the "Woo Hoo Head" page */
body#woo-hoo-head {
    background-image: none;
}

/* Video Background */
.video-background {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw; /* Full width of the viewport */
    height: 100vh; /* Full height of the viewport */
    overflow: hidden;
    z-index: -1; /* Ensure the video is behind content */
}

/* Ensure the video fits and covers the screen - responsiveness on mobile devices  */
#bg-video {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw; /* Full width of the viewport */
    height: 100vh; /* Full height of the viewport */
    object-fit: cover; /* Cover the entire viewport */
    object-position: center; /* Center the video */
    z-index: -1;
}

/* Content Overlay */
.content-overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    color: #F26F3A; /* Text color */
}

.content-overlay h1 {
    font-size: 36px;
    margin-bottom: 20px;
}

.content-overlay p {
    font-size: 18px;
    margin-bottom: 20px;
}

.content-overlay a {
    display: block;
    font-size: 18px;
    color: #F26F3A;
    text-decoration: none;
    margin: 10px 0;
}

.content-overlay a:hover {
    text-decoration: underline;
}

/* Add new Woo Hoo Head specific styles below */

/* Ensure consistent spacing from the top for all sections on the page */
#woo-hoo-head .content-overlay {
    margin-top: 20px; /* Adjust the spacing as needed */
}

/* Adjust font size for links */
#woo-hoo-head .content-overlay a {
    font-size: 18px;
    color: #F26F3A; /* Keep the same color as your theme */
}

#woo-hoo-head .content-overlay a:hover {
    text-decoration: underline; /* Ensure links are visually clear */
}

body#woo-hoo-head .content-overlay {
    position: absolute;
    top: 5%; /* Move the text up */
    left: 50%;
    transform: translate(-50%, -30%); /* Adjust this value if needed */
    text-align: center;
    color: #F26F3A; /* Text color */
}

/* SESSION AT DOWN THERE STUDIO page style */
body#session-at-down-there-studio {
    overflow: hidden; /* Hide scrollbars only on this page */
}

/* Remove background image for the "Session at Down There Studio" page */
body#session-at-down-there-studio {
    background-image: none;
}

/* Video Background */
.video-background {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw; /* Full width of the viewport */
    height: 100vh; /* Full height of the viewport */
    overflow: hidden;
    z-index: -1; /* Ensure the video is behind content */
}

/* Ensure the video fits and covers the screen - responsiveness on mobile devices  */
#bg-video {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw; /* Full width of the viewport */
    height: 100vh; /* Full height of the viewport */
    object-fit: cover; /* Cover the entire viewport */
    object-position: center; /* Center the video */
    z-index: -1;
}

/* Content Overlay */
.content-overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    color: #F26F3A; /* Text color */
}

.content-overlay h1 {
    font-size: 36px;
    margin-bottom: 20px;
}

.content-overlay p {
    font-size: 18px;
    margin-bottom: 20px;
}

.content-overlay a {
    display: block;
    font-size: 18px;
    color: #F26F3A;
    text-decoration: underline;
    margin: 10px 0;
}

.content-overlay a:hover {
    color: #F26F3A; /* Link color: orange */
    text-shadow: 1px 0 0 currentColor;
}

/* Add new "Session at Down There Studio" specific styles below - ako se sve skloni do EPK samo se tekst pomeri na sred ekrana umesto gore */

/* Ensure consistent spacing from the top for all sections on the page */
#session-at-down-there-studio .content-overlay {
    margin-top: 20px; /* Adjust the spacing as needed */
}

/* Adjust font size for links */
#session-at-down-there-studio .content-overlay a {
    font-size: 18px;
    color: #F26F3A; /* Keep the same color as your theme */
}

#session-at-down-there-studio .content-overlay a:hover {
    text-decoration: underline; /* Ensure links are visually clear */
}

body#session-at-down-there-studio .content-overlay {
    position: absolute;
    top: 5%; /* Move the text up */
    left: 50%;
    transform: translate(-50%, -30%); /* Adjust this value if needed */
    text-align: center;
    color: #F26F3A; /* Text color */
}

/* FAR AWAY page style */
body#far-away {
    overflow: hidden; /* Hide scrollbars only on this page */
}

/* Remove background image for the "Far away" page */
body#far-away {
    background-image: none;
}

/* Ensure consistent spacing from the top for all sections on the page */
#far-away .content-overlay {
    margin-top: 20px; /* Adjust the spacing as needed */
}

/* Adjust font size for links */
#far-away .content-overlay a {
    font-size: 18px;
    color: #F26F3A; /* Keep the same color as your theme */
    text-decoration: underline;
}

#far-away .content-overlay a:hover {
    color: #F26F3A; /* Link color: orange */
    text-shadow: 1px 0 0 currentColor;
}

body#far-away .content-overlay {
    position: absolute;
    top: 5%; /* Move the text up */
    left: 50%;
    transform: translate(-50%, -30%); /* Adjust this value if needed */
    text-align: center;
    color: #F26F3A; /* Text color */
}

/* KVAKA page style */
body#live-at-catch22 {
    overflow: hidden; /* Hide scrollbars only on this page */
}

/* Remove background image for the "Kvaka" page */
body#live-at-catch22 {
    background-image: none;
}

/* Ensure consistent spacing from the top for all sections on the page */
#live-at-catch22 .content-overlay {
    margin-top: 20px; /* Adjust the spacing as needed */
}

/* Adjust font size for links */
#live-at-catch22 .content-overlay a {
    font-size: 18px;
    color: #F26F3A; /* Keep the same color as your theme */
    text-decoration: underline;
}

#live-at-catch22 .content-overlay a:hover {
    color: #F26F3A; /* Link color: orange */
    text-shadow: 1px 0 0 currentColor;
}

body#live-at-catch22 .content-overlay {
    position: absolute;
    top: 5%; /* Move the text up */
    left: 50%;
    transform: translate(-50%, -30%); /* Adjust this value if needed */
    text-align: center;
    color: #F26F3A; /* Text color */
}

/* Adjustments for smaller screens */
@media (max-width: 768px) {
    /* Push social icons further up */
    .social-icons {
        position: fixed;
        top: 10px; /* Adjust as needed to move icons higher */
        left: 50%;
        transform: translateX(-50%);
        z-index: 1000;
        display: flex; /* Use flexbox for a horizontal layout */
        justify-content: center; /* Center the icons horizontally */
        align-items: center; /* Center the icons vertically */
        flex-wrap: wrap; /* Allow wrapping on very small screens */
        gap: 2px;
    }
    .social-icons a {
        font-size: 12px;
    }

    /* Center and resize the heading */
    .content-overlay h1 {
        font-size: 20px; /* Adjust font size for smaller screens */
        margin-bottom: 10px; /* Add spacing below the heading */
        margin-top: 50px;
        justify-content: center; /* Center the icons horizontally */
    }

    /* Ensure text positioning is better on mobile */
    .content-overlay {
        top: 60%; /* Move text further down */
        transform: translate(-50%, -50%);
        padding: 10px; /* Add padding to prevent text from touching edges */
    }

    /* Ensure menu positioning is better on mobile */
    .menu {
        position: fixed;
        top: 350px; /* Space from the top */
        left: 10px; /* Space from the left */
        z-index: 1000; /* Ensure the menu is above other content */
        display: flex; /* Use flexbox */
        flex-direction: column; /* Stack items vertically */
        gap: 2px; /* Space between menu items */
        font-size: 12px; /* Font size */
        text-align: left;
    }
    
    .menu-item {
        color: #F26F3A; /* Text color: orange */
        margin-right: 10px; /* Space between menu items */
        font-size: 12px; /* Font size */
        font-weight: bold;
        cursor: pointer; /* Pointer cursor on hover */
        pointer-events: auto; /* Enable pointer events */
    }
    
    .menu-item.active {
        opacity: 0.5; /* Transparent text for active menu item */
    }
}


/* EPK Page Specific Styles */
body#epk-page {
    padding: 20px;
    font-family: Arial, sans-serif;
    background-color: #f9f9f9; /* Light background for contrast */
}

/* Remove background image for the "EPK" page */
body#epk-page {
    background-image: none;
}

/* General EPK Section Styling */
.epk-section {
    margin-bottom: 40px;
    padding: 20px;
    border-bottom: 1px solid #ccc; /* Separator between sections */
}

.epk-section h2 {
    color: #F26F3A; /* Heading color */
    font-size: 24px; /* Larger font size for headings */
    margin-bottom: 10px;
}

.epk-section p, .epk-section a {
    font-size: 16px;
    color: #333; /* Dark color for text */
}

.epk-section img {
    max-width: 100%;
    height: auto;
    display: block;
    margin-bottom: 10px; /* Space below images */
}

/* Gallery Styling */
#epk-page .gallery {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
}

#epk-page .gallery img {
    width: auto;
    height: 200px; /* Adjust height as needed */
    object-fit: cover; /* Cover the container, might crop if necessary */
    max-width: 100%;
}

a {
    color: #F26F3A;
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

/* PDF Download Button */
.download-btn {
    background-color: #F26F3A; /* Orange color */
    color: white;
    padding: 5px 10px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 14px;
    text-transform: uppercase;
    transition: background-color 0.3s ease;
}

.download-btn:hover {
    background-color: #d9562f; /* Slightly darker on hover */
}

/* Add media queries to adjust the layout for different screen sizes */
@media (max-width: 768px) {
    .gallery {
        flex-direction: column; /* Stack gallery items vertically on small screens */
    }

    .epk-section {
        padding: 10px; /* Reduce padding on smaller screens */
    }
}

/* BIO Section Styling */
#epk-page #bio p {
    text-align: justify;
}

@supports (-webkit-touch-callout: none) {
    body {
        background-attachment: scroll !important;
        background-size: cover !important;
        background-position: center center !important;
    }
}

@media screen and (max-width: 768px) and (orientation: portrait) {
    body {
      background-attachment: scroll !important;
      background-size: cover !important;
      background-position: 45% center !important;
    }
}