@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@400;500;700&display=swap');

body {
    font-family: 'Barlow Condensed', sans-serif;
	font-size: 25px;
    background-color: #e4dbd6; /* Background color */
    color: #333; /* Text color */
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    min-height: 100vh; /* Ensure the footer is at the bottom */
    overflow-y: scroll; /* Always show vertical scrollbar */
	/* Custom scrollbar for Firefox */
	scrollbar-width: thin; /* Thin scrollbar */
    scrollbar-color: #333333 #e4dbd6; /* Thumb and track color */
}

h1, h2, h3, h4 {
    font-size: 2em; 
}

/* Custom scrollbar for WebKit browsers */
::-webkit-scrollbar {
    width: 8px; /* Width of the scrollbar */
    height: 8px; /* Height of the scrollbar */
}

::-webkit-scrollbar-track {
    background: #e4dbd6; /* Track color */
}

::-webkit-scrollbar-thumb {
    background: #333333; /* Scrollbar color */
}

::-webkit-scrollbar-thumb:hover {
    background: #d1699a; /* Darker color on hover */
}

header {
    background-image: url('images/cream background.png'); /* Set the background image */
    background-size: cover; /* Ensure the image covers the entire box */
    background-position: center; /* Center the image */
    background-repeat: no-repeat; /* Prevent the image from repeating */
    padding: 10px 0;
    position: relative; /* Enable positioning for child elements */
}

header, #small-header {
    transition: opacity 0.3s ease; /* Adjust as needed */
}

.header-container {
    display: flex;
    justify-content: center; /* Center the logo and nav */
    align-items: center; /* Center items vertically */
    max-width: 1200px;
    margin: auto;
    width: 100%; /* Ensure full width */
    flex-wrap: wrap; /* Allow items to wrap */
}

.header-navigation {
    display: flex; /* Use flexbox for navigation */
    align-items: center; /* Center vertically */
    justify-content: center; /* Center the nav items */
}

.header-navigation ul {
    list-style-type: none;
    padding: 0;
    display: flex;
    margin: 0; /* Remove margin */
    font-weight: bold;
}

.header-navigation li {
    margin: 0 35px; /* Space between items */
}

.header-navigation a {
    color: #333;
    text-decoration: none; /* No underline */
}

.header-navigation a.active {
    background-color: #e18fae; /* Background for active link */
    color: #333; /* Maintain text color */
}

/* Style for the menu icon */
.menu-icon {
    display: none; /* Initially hidden, shown only on smaller screens */
    position: absolute;
    top: 10px;
    cursor: pointer;
    padding: 10px;
    color: #e18fae;
    border-radius: 5px;
    z-index: 1000;
	font-size: 30px; /* Size for the menu icon */
    left: 20px; /* Distance from the right */
}

/* Fullscreen Menu Styles */
.fullscreen-menu {
    display: none; /* Hidden by default */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.9); /* Semi-transparent black background */
    z-index: 2000;
    align-items: center;
    justify-content: center;
    color: #fff;
}

#fullscreen-menu {
    transform: translateX(-100%); /* Start off-screen to the left */
    transition: transform 0.5s ease; /* Animate the slide-in effect */
}

#fullscreen-menu.active {
    transform: translateX(0); /* Slide in from the left */
}

.fullscreen-nav ul {
    list-style: none;
    padding: 0;
    text-align: center;
}

.fullscreen-nav ul li {
    margin: 20px 0;
}

.fullscreen-nav ul li a {
    font-size: 30px;
    color: #fff;
    text-decoration: none;
}

.fullscreen-nav ul li a:hover {
    color: #e18fae; /* Add hover effect */
}

/* Close Button */
.close-btn {
    position: absolute;
    top: 16px;
    left: 30px;
    font-size: 45px;
    cursor: pointer;
    color: #fff;
}

.logo-image {
    height: 90px; /* Adjust height as needed */
    width: auto; /* Maintain aspect ratio */
}

.social-media-links {
    display: flex; /* Use flexbox for layout */
    align-items: center; /* Center vertically */
}

.header-logo {
    display: flex; /* Use flexbox for layout */
    align-items: center; /* Center vertically */
    position: absolute; /* Position it absolutely */
    left: 20px; /* Align to the far left */
    top: 50%; /* Center vertically */
    transform: translateY(-50%); /* Adjust for centering */
}

.social-media-links img {
    width: 100px; /* Size for social media icons */
    height: auto; /* Maintain aspect ratio */
}

.container {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    max-width: 1200px;
    margin: 20px auto;
    padding: 20px;
    flex: 1; /* Make the container take available space */
}

.pre-save {
    background-image: url('images/grey background.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    padding: 20px;
    max-width: 100%;
    margin: 0 auto;
    gap: 100px;
}

.pre-save img {
    width: 500px;
    height: auto;
    margin: 100px 0;
    margin-right: -20px;
    transition: transform 0.3s, box-shadow 0.3s;
}

.pre-save-image:hover img {
    transform: scale(1.05);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}

.pre-save-description {
    max-width: 500px;
    margin-left: -20px;
}

.pre-save-description h2,
.pre-save-description h3,
.pre-save-description p {
    margin: 10px 0;
    word-wrap: break-word;
}

.pre-save-description h3 {
    color: #e18fae;
}

/* Full-width new-release container with offset positioning */
.new-release {
    background-image: url('images/pink background.png'); /* Set the background image */
    background-size: cover; /* Ensure the image covers the entire box */
    background-position: center; /* Center the image */
    background-repeat: no-repeat; /* Prevent the image from repeating */
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    padding: 20px;
    /* width: 100%; /* Use full width of the container */
    max-width: 100%; /* Ensure it uses the full width of the body */
    margin: 0 auto; /* Center the new-release container */
    gap: 100px; /* Set gap to 100px between image and text */
}

.new-release img {
    width: 500px; /* Fixed width for image */
    height: auto;
    margin: 100px 0; /* Add 100px margin above and below the image */
    margin-right: -20px; /* Slight left offset */
    transition: transform 0.3s, box-shadow 0.3s; /* Smooth transition for scale and shadow */
}

.new-release-image:hover img {
    transform: scale(1.05); /* Slightly enlarge the image on hover */
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2); /* Add shadow on hover */
}

.new-release-description {
    max-width: 500px; /* Limit text width */
    margin-left: -20px; /* Slight right offset */
}

/* Ensure the text aligns with spacing */
.new-release-description h2,
.new-release-description h3,
.new-release-description p {
    margin: 10px 0;
    word-wrap: break-word; /* Force long text to wrap to the next line */
}

.new-release-description h3 {
	color: #333333;
}

/* New Video Section */
.new-video {
    background-image: url('images/cream background.png'); /* Set the background image */
    background-size: cover; /* Ensure the image covers the entire box */
    background-position: center; /* Center the image */
    background-repeat: no-repeat; /* Prevent the image from repeating */
    color: #333333; /* Text color */
    padding-bottom: 20px;
    width: 100%; /* Use full width of the container */
    max-width: 100%; /* Ensure it uses the full width of the body */
    margin: 0 auto; /* Center the new-video container */
    text-align: center; /* Center align text */
}

.new-video h4,
.new-video h2 {
    width: 90%;
    max-width: 90%;
    margin: 0 auto;
    display: block; /* Ensures width takes effect */
	padding: 20px;
}

.new-video h4 {
    font-size: 2.2rem; /* Adjust as needed */
}

.new-video h2 {
    font-size: 3rem; /* Adjust as needed */
}

.video-wrapper {
    width: 60%; /* Width of video is 60% of new-video section */
    margin: 0 auto; /* Center the video wrapper horizontally */
    position: relative; /* Needed for responsive iframe */
    padding-bottom: 33.75%; /* Sets a 16:9 aspect ratio */
    height: 0; /* Set height to 0 to allow padding to control aspect ratio */
}

.new-video-youtube {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%; /* Full width of the parent video-wrapper */
    height: 100%; /* Full height of the parent video-wrapper */
    border: none; /* Remove border if any */
    padding: 0; /* Remove any padding */
    margin: 0; /* Remove any margin */
}

.new-video p {
    max-width: 70%; /* Set max-width for the paragraph */
    margin: 20px auto 0; /* Center the text and add spacing */
    text-align: center; /* Center the paragraph text */
    word-wrap: break-word; /* Ensure long words break and wrap */
}

.bio-section {
    flex: 1;
    margin-right: 20px;
    text-align: left; /* Align bio text to the left */
}

.artist-photo {
    width: 750px; /* Maintain the width */
    height: auto; /* Maintain aspect ratio */
    border-radius: 10px; /* Ensure rounded corners */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Maintain the shadow */
}

.contact-info {
    margin-top: 10px;
}

footer {
    display: flex;
    justify-content: center; /* Center the items */
    align-items: center; /* Center vertically */
    background-color: #333; /* Footer color */
    color: white; /* White text for contrast */
    text-align: center;
    padding: 5px 10px; /* Reduced padding for a smaller footer */
    margin-top: auto; /* Push the footer to the bottom */
}

.email-signup {
    display: flex; /* Use flexbox for alignment */
    align-items: center; /* Center elements vertically */
}

.email-signup h5 {
    margin-right: 10px; /* Add margin to the right for spacing */
    /* font-size: 14px; /* Smaller font size */
}

.email-signup input {
    padding: 5px; /* Reduced padding */
    width: 150px; /* Smaller input width */
    border: 1px solid #ccc;
    border-radius: 5px;
    margin-right: 5px; /* Add margin to the right for spacing */
}

.email-signup button {
    padding: 5px 10px; /* Reduced padding */
    background-color: #555; /* Slightly lighter grey */
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    /* font-size: 14px; /* Smaller font size */
}

.email-signup button:hover {
    background-color: #777; /* Darker grey on hover */
}

.popup {
    padding: 20px;
    border: 1px solid black;
    width: 300px;
    background: #fff;
    border-radius: 10px;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.1);
    text-align: center;
    visibility: hidden;
    transition: transform 0.3s, visibility 0.3s;
}

.open-popup {
    visibility: visible;
    transform: translate(-50%, -50%) scale(1);
}

main {
    flex: 1; /* This allows the main content to grow and fill available space */
    text-align: center; /* Center the main content */
}

ul {
    list-style-type: none; /* Remove bullet points */
    padding: 0; /* Remove padding */
}

li {
    margin: 10px 0; /* Space out the list items */
}

li a {
    color: #333; /* Link color */
    text-decoration: none; /* Remove underline */
    display: block; /* Make the entire list item clickable */
    padding: 10px; /* Add padding for better click area */
    transition: background-color 0.3s; /* Transition effect */
}

li a:hover {
    background-color: #f0f0f0; /* Highlight on hover */
}

.gallery-grid {
    display: flex; /* Use flexbox for layout */
    flex-wrap: wrap; /* Allow images to wrap */
    justify-content: center; /* Center the images */
    gap: 10px; /* Space between images */
}

.gallery-grid img {
    height: 200px; /* Set uniform height for gallery images */
    width: auto; /* Maintain aspect ratio */
    object-fit: cover; /* Ensure aspect ratio is maintained and the image covers the area */
    border-radius: 10px; /* Optional: add rounded corners */
    transition: transform 0.3s, box-shadow 0.3s; /* Add transition for hover effect */
}

.gallery-grid img:hover {
    transform: scale(1.05); /* Slightly enlarge the image on hover */
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2); /* Add shadow on hover */
}

.image-popup {
    display: none; /* Hidden by default */
    position: fixed;
    top: 50%; /* Center vertically */
    left: 50%; /* Center horizontally */
    transform: translate(-50%, -50%);
    background-color: rgba(255, 255, 255, 0.9); /* Semi-transparent background */
    padding: 20px; /* Keep padding for spacing */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    z-index: 1000; /* Ensure it's above other content */
    max-width: 90vw; /* Limit width to 90% of viewport width */
    max-height: 90vh; /* Limit height to 90% of viewport height */
    overflow: hidden; /* Hide overflow */
}

/* Ensure the image is fully visible */
.image-popup img {
    max-width: 100%; /* Limit width to 100% of the popup */
    max-height: 60vh; /* Limit height to 80% of viewport height for better fit */
    width: auto; /* Maintain aspect ratio */
    height: auto; /* Maintain aspect ratio */
    display: block; /* Center the image in the popup */
    margin: auto; /* Center image horizontally */
}

.image-popup .close {
    position: absolute;
    top: 10px;
    right: 10px;
    cursor: pointer;
    font-size: 30px; /* Increased font size */
    color: #fff; /* Change icon color to white */
    background-color: #333; /* Grey background */
    padding: 5px 10px; /* Add padding around the icon */
    border-radius: 5px; /* Optional: rounded corners */
}

.image-popup .close:hover {
    background-color: #e18fae;
}

.arrow-button {
    background-color: rgba(51, 51, 51, 0.2);
    color: #fff;
    border: none;
    cursor: pointer;
    padding: 10px;
    font-size: 24px; /* Larger font for arrows */
    border-radius: 5px; /* Optional: rounded corners */
    z-index: 1001; /* Ensure it's above the image */
    position: absolute; /* Position them relative to the popup */
    top: 50%;
    transform: translateY(-50%);
}

.arrow-left {
    left: 9px; /* Position to the left, adjust as necessary */
}

.arrow-right {
    right: 9px; /* Position to the right, adjust as necessary */
}

.preloader {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #e4dbd6; /* Background color for preloader */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 9999; /* Ensure it's on top */
    transition: opacity 0.3s ease; /* Smooth transition for opacity */
    opacity: 1; /* Fully visible initially */
}

.loading-bar-container {
    width: 30%; /* Adjust width as needed */
    background-color: #f0f0f0; /* Background for the loading bar */
    border-radius: 5px;
    overflow: hidden; /* Hide overflow */
}

.loading-bar {
    height: 10px; /* Height of the loading bar */
    background-color: #e18fae; /* Color of the loading bar */
    width: 0; /* Start at 0 width */
    transition: width 0.2s; /* Smooth transition for width change */
}

.loading-text {
    font-weight: bold;
    font-size: 20px; */
    margin-bottom: 10px; /* Space between text and loading bar */
}

.newsfeed {
    display: flex;
    flex-direction: column;
    gap: 20px; /* Space between event posts */
    margin: 20px auto; /* Center the feed */
    width: 80%; /* Take up two-thirds of the page width */
    max-width: 1200px; /* Optional: Set a max-width */
    padding: 0 15%; /* Add padding to create gaps on the sides */
}

.event-container {
	margin: 0px 0;
}

.event-box {
    display: flex;
    align-items: center;
    border-radius: 0px 0px 10px 10px; /* Optional rounding */
    padding: 10px; /* Add padding for aesthetics */
    background-image: url('images/grey background.png'); /* Set the background image */
    background-size: cover; /* Ensure the image covers the entire box */
    background-position: center; /* Center the image */
    background-repeat: no-repeat; /* Prevent the image from repeating */
    flex-wrap: wrap; /* Ensure content wraps on smaller screens */
	color: #fff;
}

.event-image {
    width: 40%; /* Adjust percentage as needed */
    max-width: 300px; /* Sets a maximum width for larger screens */
    height: auto; /* Maintain aspect ratio */
    margin-right: 15px; /* Space between image and text */
    transition: width 0.3s ease; /* Smooth resizing */
}

.event-details {
    flex: 1; /* Take remaining space */
}

.event-description {
    margin: 5px 0; /* Adjust spacing as needed */
}

.event-title {
    margin: 0; /* Reset margin */
    /* font-size: 2em; /* Adjust title size */
}

.event-date {
    background-image: url('images/grey background.png'); /* Set the background image */
    background-size: cover; /* Ensure the image covers the entire box */
    background-position: center; /* Center the image */
    background-repeat: no-repeat; /* Prevent the image from repeating */
	color: #fff;
    padding: 10px;
    font-weight: bold;
    text-align: center;
	border-radius: 10px 10px 0px 0px; /* Optional rounding */
}

.event-button {
    display: inline-block;
    background-color: #e18fae; /* Button color */
    color: #fff; /* Text color */
    padding: 10px 15px; /* Padding */
    border-radius: 5px; /* Rounded corners */
    text-decoration: none; /* Remove underline */
    transition: background-color 0.3s, transform 0.3s, box-shadow 0.3s; /* Smooth color change */
}

.event-button:hover {
	transform: scale(1.05); /* Slightly enlarge the image on hover */
	box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2); /* Add shadow on hover */
}

.new-release-button {
    display: inline-block;
    background-color: #fff; /* Button color */
    color: #333333; /* Text color */
    padding: 10px 15px; /* Padding */
    border-radius: 5px; /* Rounded corners */
    text-decoration: none; /* Remove underline */
    transition: background-color 0.3s, transform 0.3s, box-shadow 0.3s; /* Smooth color change */
	font-weight: bold; /* Make the text bold */
}

.new-release-button:hover {
	transform: scale(1.05); /* Slightly enlarge the image on hover */
	box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2); /* Add shadow on hover */
}

/** gallery-grid img:hover {
    transform: scale(1.05);  Slightly enlarge the image on hover 
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);  Add shadow on hover 
} **/

.social-footer {
    display: none; /* Hidden by default */
	width: 100%;
	text-align: center;
	position: relative;
	left: 50%;
	transform: translateX(-50%);
    background-color: #333333; /* Change as needed */
    padding: 0px; /* Adjust padding as needed */
	padding-bottom: 0px;
}

.footer-social-media {
    display: flex; /* Use flexbox for centering */
    justify-content: center; /* Center the icons horizontally */
    flex-wrap: wrap; /* Allow wrapping if needed */
}

.footer-social-media a {
    margin: 10px 15px; /* Space out the icons */
	display: inline-block;
}

.footer-social-media img {
	width: 30px; /* Size for social media icons */
	height: auto; /* Maintain aspect ratio */
}


@media (max-width: 500px) {
    .footer-social-media img {
        width: 24px; /* scale down slightly */
    }
    
    .footer-social-media a {
        margin: 10px 10px; /* Space out the icons */
    	display: inline-block;
    }
}

@media (max-width: 400px) {
    .footer-social-media img {
        width: 20px; /* scale down more for very small screens */
    }
    .footer-social-media a {
        margin: 10px 7px; /* Space out the icons */
    	display: inline-block;
    }
}

/* Centering the music grid on the page */
.music-container {
    display: flex; /* Use flexbox for centering */
    justify-content: center; /* Center horizontally */
    padding: 20px; /* Padding around the container */
}

/* Music grid for displaying covers */
.music-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); /* Responsive columns */
    gap: 20px; /* Space between grid items */
    max-width: 1200px; /* Set a max width for the grid */
    width: 100%; /* Ensure it uses the full width of the container */
    margin: 0 auto; /* Center the grid within its container */
}

.music-item {
    display: block; /* Make the anchor fill the grid cell */
    text-align: center; /* Center align content in each grid item */
    position: relative;
    z-index: 0;
}

.music-item:hover {
    z-index: 1; /* Bring hovered item to front */
}

/* New wrapper for image overflow handling */
.music-image-wrapper {
    overflow: visible; /* Allow hover scaling to extend beyond wrapper */
    transition: transform 0.3s ease;
}

/* Image styles */
.music-item img {
    width: 100%; /* Responsive image width */
    height: auto; /* Maintain aspect ratio */
    display: block;
    margin: 0 auto;
    transition: transform 0.3s, box-shadow 0.3s; /* Smooth scaling and shadow transition */
}

/* Hover zoom effect */
.music-item:hover img {
    transform: scale(1.05);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
}

.video {
	max-width: 95%
}

footer {
    margin: 0;
    padding: 0;
}

.contact-info-section {
    margin-top: -20px;
    padding-top: 0;
}

.social-footer {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}

.contact-info h5 {
    margin: 0 !important;
    padding: 5px 0 !important;
}

.copy-email {
    cursor: pointer;
    color: #e18fae;
    font-weight: bold;
    text-decoration: underline;
    transition: color 0.3s;
}

.copy-email:hover {
    color: #ffffff;
}

.highlight-link {
    color: #333333;
    font-weight: bold;
    text-decoration: underline;
    transition: color 0.3s;
    cursor: pointer;
}

.highlight-link:hover {
    color: #ffffff;
}

.presave-highlight-link {
    color: #e18fae;
    font-weight: bold;
    text-decoration: underline;
    transition: color 0.3s;
    cursor: pointer;
}

.presave-highlight-link:hover {
    color: #ffffff;
}

@media (min-width: 1450px) {
    .social-media-links {
        position: absolute;
        right: 20px; /* Align to the far right */
        top: 100%; 
        transform: translateY(-50%);
		margin-top: 20px;
		margin-bottom: -20px;
    }
	
	.social-media-links a {
		margin-left: 20px; /* Space between icons */
	}
	
	.social-media-links img {
		width: 30px; 
		height: auto; 
	}
	
    #small-header {
        position: fixed;
        top: 0;
        width: 100%;
        height: 50px; /* Adjust as needed */
        background-color: rgba(228, 219, 214, 1); /* last # for semi-transparent background */
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0 20px;
        z-index: 1000;
    }

    #small-header h2 {
        /* font-size: 1.5em; */
        color: #ffffff;
    }

    .small-logo {
        height: 40px; /* Smaller logo size */
    }
	
	.new-video {
		margin-bottom: 20px;
	}
	
	.contact-info {
		margin-bottom: 10px;
	}
}

@media (max-width: 1450px) {
	.event-box {
		display: block;
	}
	
	#small-header {
        display: none;
    }
	
	.pre-save {
		display: block;
		text-align: center;
		gap: 20px;
		padding: 20px 0;
		margin: 0 auto;
		max-width: 100%;
	}

	.pre-save img {
		width: 50%;
		margin: 0 auto;
		display: block;
	}

	.pre-save-description {
		max-width: 80%;
		margin: 20px auto 0;
	}
	
    .new-release {
        display: block;
        text-align: center; /* Center text inside the container */
        gap: 20px;
        padding: 20px 0;
        margin: 0 auto; /* Center the new-release container */
        max-width: 100%; /* Ensure it uses the full width of the screen */
    }

    .new-release img {
        width: 50%;
        margin: 0 auto; /* Center the image */
        display: block; /* Ensure it behaves like a block element for centering */
    }

    .new-release-description {
        max-width: 80%;
        margin: 20px auto 0; /* Center text with auto margins */
    }
	
    .new-video {
        padding: 20px 0px; /* Maintain padding */
        text-align: center; /* Ensure text remains centered */
    }

    .video-wrapper {
        width: 80%; /* Adjusted width for the video wrapper */
        padding-bottom: 56.25%; /* Maintain aspect ratio of 16:9 */
        margin: 0 auto; /* Center the video wrapper */
    }

    .new-video p {
        max-width: 70%; /* Limit text width to ensure readability */
        margin: 20px auto 0; /* Center paragraph and space it above */
        text-align: center; /* Center the paragraph text */
    }
	
    .header-social-media {
        display: none !important; /* Hide the top social media bar */
    }
	
	.social-media-links {
        justify-content: center; /* Center horizontally */
        margin: -10px 0 10px; /* Optional: Add vertical spacing */
        /* Additional styles can go here */
    }
	
	.social-media-links a {
		margin-left: 30px; /* Space between icons */
	}
	
    .social-footer {
        display: block; /* Show the social media footer */
		padding-top: 20px; /* creates space inside */
    }
	
    .artist-photo {
        width: 100%; /* Full width for small screens */
        max-width: 750px; /* Max width to maintain aspect ratio */
    }

    .header-logo img {
        display: none; /* Hide logo images */
    }

    .container {
        flex-direction: column; /* Stack bio and photo */
        align-items: center; /* Center items */
    }

    .gallery-grid img {
        height: 300px; /* Further increase height for larger images on mobile */
    }

    .image-popup {
        padding: 5px; /* Keep padding for spacing */
        max-width: 100%; /* Limit width to 100% of the popup */
        max-height: 60vh; /* Limit height to 80% of viewport height for better fit */
        width: 95%; /* Allow image to take full width of the popup */
        height: auto; /* Maintain aspect ratio */
        display: block; /* Center the image in the popup */
        margin: auto; /* Center image horizontally */
		display: none; /* Hide popup on small screens */
    }
    
    /* Ensure the image is fully visible */
    .image-popup img {
        max-width: 100%; /* Allow image to take full width of the popup */
    }
	
	.email-signup {
		justify-content: center; /* Center the content horizontally */
		/* margin-bottom: 20px; /* Adds space below the email signup */
	}

	.email-signup input {
		margin-right: 10px; /* Space between input and button */
		width: auto; /* Adjust to fit the line */
	}

	.email-signup button {
		width: auto; /* Adjust button width to fit */
	}

    .loading-text {
        /* font-size: 16px; /* Smaller loading text */
    }

    .loading-bar-container {
        width: 80%; /* Wider loading bar */
    }

    .arrow-button {
        /* font-size: 20px; /* Smaller arrow buttons */
        padding: 8px; /* Reduced padding */
    }

    .image-popup .close {
        /* font-size: 24px; /* Smaller close icon */
    }

    .header-container {
        flex-direction: column;
        align-items: middle; /* Align items to the left */
        text-align: left;
        padding: 10px 0; /* Remove padding to reach the edges */
        position: fixed; /* Fix the header to the top */
        top: 0;
        left: 0;
		background-image: url('images/grey background.png'); /* Set the background image */
		background-size: cover; /* Ensure the image covers the entire box */
		background-position: center; /* Center the image */
		background-repeat: no-repeat; /* Prevent the image from repeating */
        z-index: 1000; /* Ensure it stays on top */
		max-width: 100% !important;
    }

    .header-navigation {
        flex-direction: row;
        width: 100%;
        margin-top: 10px;
        display: none; /* Initially hide for mobile */
    }

    .header-navigation ul {
        flex-direction: row;
    }

    .header-logo {
        align-self: flex-start; /* Align logo to the start */
        margin-bottom: 10px;
    }

    .menu-icon {
        display: block; /* Show menu icon */
    }

    .header-navigation a {
        color: #e18fae;
    }

    .header-navigation.left,
    .header-navigation.right {
        display: none; /* Ensure nav is hidden */
    }

    .logo-image {
        height: 60px; /* Adjust height as needed */
    }

    /* Styles for the mobile nav */
    .mobile-nav {
        display: none; /* Initially hidden */
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(225, 143, 174, 0.95); /* Semi-transparent pink */
        z-index: 999; /* Below the header but above content */
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-align: center;
    }

    .mobile-nav a {
        margin: 10px 0; /* Spacing between links */
        font-size: 24px; /* Larger font for mobile */
        color: #e18fae; /* Set text color to pink */
        text-decoration: none; /* Remove underline from links if needed */
    }

    body {
        padding-top: 40px; /* Adjust this value based on your header's height */
        margin: 0; /* Ensure no default margins are applied */
    }
	
	main:not(.index-page) {
		padding: 30px;
	}
	
	.newsfeed {
        width: 90%; /* Wider on small screens for better visibility */
        padding: 0 5%; /* Reduce side padding */
    }

    .event-image {
        width: 60%; /* Full width for images on mobile */
		max-width: 50%;
    }

    .event-details {
        text-align: center; /* Center text on mobile */
    }
	
	.contact-info {
		color: #e18fae;
		text-align: center; /* Center text on mobile */
	}
}