/* General Styles */
body {
  font-family: 'Montserrat', sans-serif;
  color: #fff;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  background-color: #FF4545; /* Add your desired background color here */
}

header {
  background-color: #FF4545;
  color: #fff;
  padding: 1rem;
  text-align: center;
}

header .logo {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

header .logo img {
  max-width: 500px; /* Set the maximum width to 500px */
  height: auto; /* Maintain aspect ratio */
  display: block; /* Ensure the image is treated as a block element */
  margin: 0.5rem auto; /* Reduce bottom margin to bring it closer to the next section */
  width: 100%; /* Make it responsive */
}

main {

}

.audio-player {
  margin: 1rem 0; /* Reduce top margin to bring it closer to the header */
  text-align: center;
}

.images, .contact {
  margin: 2rem 0;
  text-align: center;
}

.album-image img {
  max-width: 150px; /* Set the maximum width to 150px */
  height: auto; /* Maintain aspect ratio */
  display: block; /* Ensure the image is treated as a block element */
  margin: 1rem auto; /* Center the image and add spacing */
}

.language-menu {
  margin-top: 1rem;
  text-align: center;
}

.gallery {
    padding: 20px;
    text-align: center;
}

/* Default gallery styles */
.gallery-container {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
}

/* Horizontal scrolling for mobile browsers */
@media (max-width: 768px) {
    .gallery-container {
        flex-wrap: nowrap; /* Prevent wrapping */
        overflow-x: auto; /* Enable horizontal scrolling */
        gap: 8px; /* Reduce spacing between images */
        padding: 10px 0; /* Add some padding for better appearance */
    }

    .gallery-container a {
        flex: 0 0 auto; /* Prevent shrinking and ensure images stay in a row */
        width: 70%; /* Adjust width for smaller screens */
        aspect-ratio: 16 / 9; /* Maintain aspect ratio */
    }

    .gallery-container img {
        width: 100%;
        height: 100%;
        object-fit: cover; /* Ensure images fill their containers */
        border-radius: 8px; /* Optional: Add rounded corners */
    }
}

.gallery-container a {
    display: block;
    width: calc(25% - 10px); /* Adjust width for responsiveness */
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease;
}

.gallery-container a:hover {
    transform: scale(2.0); /* zoom effect on hover */
    z-index: 1; /* Bring the hovered image to the front */
}

.gallery-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.social-icons {
    display: flex;
    justify-content: center;
    align-items: center; /* Align icons vertically */
    gap: 10px; /* Reduce space between icons */
    margin-top: 20px;
}

.social-icons a img {
    width: 70px; /* Default size for larger screens */
    height: 70px;
    object-fit: contain;
    transition: transform 0.3s ease;
}

.social-icons a img:hover {
    transform: scale(1.1); /* zoom effect on hover */
}

a.email {
    text-decoration: none;
    color: #fff; /* Change to white for better visibility */
    font-size: 1.2rem; /* Increase font size */
    margin-top: 20px;
    display: block; /* Make it a block element for better spacing */
}

a.email:hover {
    text-decoration: underline; /* Underline on hover */
}

/* Responsive adjustments for smaller screens */
@media (max-width: 768px) {
    .social-icons a img {
        width: 60px; /* Smaller size for tablets and phones */
        height: 60px;
    }

    .social-icons {
        gap: 6px; /* Reduce spacing between icons */
    }
}

@media (max-width: 480px) {
    .social-icons a img {
        width: 50px; /* Even smaller size for very small screens */
        height: 50px;
    }

    .social-icons {
        gap: 4px; /* Further reduce spacing between icons */
    }
}


/* Carousel Styles */

.carousel {
    position: relative;
    overflow: hidden;
    width: 100%;
    max-width: 500px; /* Adjust as needed */
    margin: 0 auto;
}

.carousel-track {
    display: flex;
    transition: transform 0.5s ease-in-out;
}

.carousel-image {
    width: 100%; /* Make the image responsive */
    height: auto; /* Maintain aspect ratio */
    object-fit: contain; /* Ensure the entire image is visible without cropping */
    flex-shrink: 0; /* Prevent shrinking */
    background-color: #000; /* Optional: Add a background color for empty space */
}

.carousel-button {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: rgba(0, 0, 0, 0.5);
    color: white;
    border: none;
    padding: 10px;
    cursor: pointer;
    z-index: 10;
    opacity: 0; /* Initially hidden */
    transition: opacity 0.3s ease;
    pointer-events: none; /* Prevent interaction when hidden */
}

.carousel-button.prev {
    left: 10px;
}

.carousel-button.next {
    right: 10px;
}

/* Show buttons on hover */
.carousel:hover .carousel-button {
    opacity: 1; /* Make buttons visible */
    pointer-events: auto; /* Enable interaction */
}

/* Ensure carousel arrows are always visible on mobile devices */
@media (max-width: 768px) {
    .carousel-button {
        opacity: 1; /* Make buttons always visible */
        pointer-events: auto; /* Enable interaction */
    }
}