body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
}

nav {
    position: fixed; /* Fix the navbar position */
    top: 0;
    width: 100%;
    background-color: rgba(0, 0, 0, 0); /* Set the background color to fully transparent */
    color: white;
    padding: 10px 0;
    text-align: center;
    z-index: 1000; /* Ensure the navbar stays above other content */
}

nav a {
    text-decoration: none;
    color: green;
    padding: 10px 20px;
    display: inline-block; /* Added to align links side by side */
    font-weight: bold;
}

nav a:hover {
    background-color: #555;
}




.home {
    background-color:#A34343; /* Coffee bean color */
    color: white;
    padding: 10px 20px;
    border: 2px solid silver; /* Silver border */
    border-radius: 5px;
    /* Add other button styles as needed */

}

.home img {
    width: 20px; /* Adjust the width of the image */
    margin-right: 5px; /* Add some spacing between the text and the image */
    vertical-align: middle; /* Align the image vertically with the text */
}

.roast {
    background-color: #6C3428; /* Coffee bean color */
    color: white;
    padding: 10px 20px;
    border: 2px solid silver; /* Silver border */
    border-radius: 5px;
    /* Add other button styles as needed */

}

.roast img {
    width: 20px; /* Adjust the width of the image */
    margin-right: 5px; /* Add some spacing between the text and the image */
    vertical-align: middle; /* Align the image vertically with the text */
}

.hours {
    background-color: #795458; /* Coffee bean color */
    color: white;
    padding: 10px 20px;
    border: 2px solid silver; /* Silver border */
    border-radius: 5px;
    /* Add other button styles as needed */

}

.hours img {
    width: 20px; /* Adjust the width of the image */
    margin-right: 5px; /* Add some spacing between the text and the image */
    vertical-align: middle; /* Align the image vertically with the text */
}

.leaves-image {
    position: absolute;
    bottom: 0;
    /* Adjust left/right for the horizontal positioning */
    left: 10px;
    /* Adjust size of the image as needed */
    width: 10px;
    height: 10px;
}

/* CSS Reset or Normalize.css can be added here */

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

/* Parent element */
.parent-element {
    position: relative; /* Ensure parent element has relative positioning */
}

.logo-rectangle {
    width: 70px; /* Adjust width as needed */
    height: 70px; /* Adjust height as needed */
    background-color:#FEB941; /* Grey color */
    position: absolute; /* Positioning */
    top: 4.9%; /* Adjust vertical position */
    transform: translateY(-50%); /* Vertically center */
    left: 10px; /* Adjust horizontal position */
    z-index: 1; /* Ensure it's above other elements */
    border-radius: 10px; /* Adjust border radius to round the edges */
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.6); /* Add box shadow */
}

/* Styling for the "Beanii" logo */
.logo-image {
    width: 70px; /* Adjust size as needed */
    height: auto; /* Let height adjust proportionally */
    border-radius: 50%; /* Make it circular */
    position: absolute; /* Positioning */
    top: 2%; /* Vertically center */
    left: 12px; /* Adjust horizontal position */
    z-index: 1; /* Ensure it's above other elements */
}

/* Media query to hide logo and rectangle on mobile devices */
@media only screen and (max-width: 768px) {
    .logo-image,
    .logo-rectangle {
        display: none; /* Hide the logo and rectangle on mobile */
    }
}

/* Media query to hide logo and rectangle on mobile and tablet devices */
@media only screen and (max-width: 1024px) {
    .logo-image,
    .logo-rectangle {
        display: none; /* Hide the logo and rectangle on mobile and tablet */
    }
}





section {
    padding: 20px;
    text-align: center;
    padding: 1rem max(1rem,50% - 22rem) calc(2*var(--s));
}

.section1 {
    position: relative; /* Set the section position to relative */
    background-color: #102C57;
    height: 700px;
    padding: 0; /* Remove padding from .section1 */
    --s: 1.5em; /* the size of the wave */
    --p: 2.0;    /* the curvature of the wave [0 2] */

    --R: calc(var(--s)*sqrt(var(--p)*var(--p) + 1)) at 50%;
    mask:
    radial-gradient(var(--R) calc(100% - var(--s)*(1 + var(--p))), #000 99%, #0000 101%) 
    calc(50% - 2*var(--s)) 0/calc(4*var(--s)),
    radial-gradient(var(--R) calc(100% + var(--s)*var(--p)), #0000 99%, #000 101%) 
    50% calc(-1*var(--s))/calc(4*var(--s)) repeat-x;
}

.section2 {
    text-align: center;
    margin-top: 50px;
    height: 400px; /* Adjust the height as needed */
}

.carousel {
    position: relative;
    display: flex;
    overflow-x: scroll;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch; /* Enable smooth scrolling on iOS */
    border: 1px solid #ccc; /* Add border */
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); /* Add box shadow */
    background-color: #f8f8f8; /* Add background color */
    margin-top: 100px; /* Shift the carousel downwards */
}

.carousel-container {
    display: flex;
    transition: transform 0.5s ease;
}

.carousel-slide {
    flex: 0 0 auto;
    width: 300px; /* Adjust the width of each slide */
    scroll-snap-align: start;
    margin-right: 20px; /* Adjust spacing between slides */
}

.carousel-image {
    width: 200px; /* Adjust the width as needed */
    height: 200px; /* Adjust the height as needed */
    object-fit: cover; /* This ensures the image is scaled to fit within the width and height */
}


/* Navigation button styles */
.prev, .next {
    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;
}

.prev {
    left: 10px;
}

.next {
    right: 10px;
}

@keyframes carouselAnimation {
    0% { transform: translateX(0); }
    100% { transform: translateX(-100%); }
}

img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.section1 img {
    width: 100%;
    object-fit: cover;
    margin: 0; /* Remove any default margin */
    padding: 0; /* Remove any default padding */
}

.content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white; /* Adjust text color for visibility */
    text-align: center;
    z-index: 1; /* Ensure content is above the image */
}


/* Testimonials section */
.section3 {
    text-align: center;
    padding: 50px 0;
}

.testimonial {
    max-width: 600px;
    margin: 0 auto 30px;
    padding: 20px;
    background: #F6F5F1;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    margin-top: 80px; /* Shift the carousel downwards */
    background-size: cover; /* Make sure the background covers the entire testimonial */
    background-position: center; /* Center the background image */
    background-repeat: no-repeat; /* Prevent the background from repeating */
    border: 2px solid silver; /* Add silver border */
}


.testimonial img {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    margin-bottom: 20px;
    transition: transform 0.2s ease-in-out; /* Add transition for smooth zoom effect */
}

.testimonial-image img {
    width: 100%; /* Make the image fill the circular container */
    height: 100%; /* Make the image fill the circular container */
    object-fit: cover; /* Ensure the image covers the circular container */
    position: absolute; /* Position the image absolutely within the container */
    top: 50%; /* Move the image vertically to the center */
    left: 50%; /* Move the image horizontally to the center */
    transform: translate(-50%, -50%); /* Center the image within the circular container */
}

  
 .testimonial img:hover {
    transform: scale(1.3); /* Zoom in on hover */
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15); /* Increase shadow on hover */
}



.testimonial-content {
    flex: 1; /* Take remaining space */
}

.quote {
    font-style: italic;
    margin-bottom: 10px;
    color: black;
    padding: 10px; /* Add padding for better readability */
    border-radius: 5px; /* Optional: add rounded corners */
    display: inline-block; /* Optional: to make the background fit the text */
    max-width: 100%; /* Ensure it doesn't overflow */

}
.author {
    font-weight: bold;
    color: Black;
    padding: 10px; /* Add padding for better readability */
    border-radius: 5px; /* Optional: add rounded corners */
    display: inline-block; /* Optional: to make the background fit the text */
    max-width: 100%; /* Ensure it doesn't overflow */

}


footer {
    background-color: #FEB941; /* Example footer background color */
    color: black; /* Example text color */
    text-align: center;
    padding: 1px 0;
    font-weight: Bold;
}

/* Move the image for the testimonial with src="customer1.jpg" */
.testimonial img[src="images/Yoshi.png"] {
    margin-bottom: 10px; /* Remove default margin bottom */
    margin-top: 10px; /* Add margin top to move the image up */
}


/* Section 4 styling */
.section4 {
    text-align: center;
    padding: 50px 0;
}

.map-container {
    margin: 0 auto; /* Center the container horizontally */
    margin-bottom: 20px;
    max-width: 60%; /* Set maximum width */
    border: 2px solid #ccc; /* Add border */
    border-radius: 10px; /* Add border radius */
    overflow: hidden; /* Hide overflow to prevent map from protruding */
}

.map-container img {
    max-width: 100%; /* Ensure map image doesn't exceed its container */
    margin: 0; /* Remove default margin */
    padding: 0; /* Remove default padding */
    display: block; /* Ensure image behaves as block element */
}


.location-info {
    max-width: 600px;
    margin: 0 auto;
    text-align: center;
}