/* Basic Reset */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Niramit', 'Arial', sans-serif;
    color: #333;
    background-color: #ffffff;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: #f00909; /* Your header background color */
    padding: 20px;
    position: fixed; /* Changed from relative to fixed */
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000; /* Ensures the header stays on top of other content */
    color: white;
}

main, .content-wrap { /* Use the correct selector for your main content */
    padding-top: 80px; /* Adjust this value based on the actual height of your header */
}

header::after {
    content: '';
    position: absolute;
    bottom: 0; /* Position at the bottom of the header */
    left: 0;
    width: 100%;
    height: 20px; /* Height of the wave effect */
    background: #f00909; /* Match the header background color */
    clip-path: polygon(0 0, 100% 0, 100% 100%, 100% 50%, 90% 90%, 85% 50%, 80% 90%, 75% 60%, 70% 60%, 65% 50%, 60% 90%, 55% 50%, 50% 20px, 45% 60%, 40% 60%, 35% 50%, 30% 70%, 30% 80%, 20% 30%, 15% 50%, 10% 90%, 5% 60%, 0 70%);
    transform: translateY(100%); /* Push the effect down to overlay content below */
    z-index: 2; /* Ensure it's above the content it should overlay */
}

.logo-container img {
    transform: scale(1.5); /* Adjust the scale value as needed */
    transform-origin: top left; /* Adjust the origin of the transformation */
    margin-top: -10px; /* Adjust based on your layout needs after scaling */
    margin-left: -10px; /* Adjust based on your layout needs after scaling */
}

.logo {
    height: 120px; /* Adjust this value to increase or decrease the logo size */
    width: auto; /* Maintains aspect ratio */
}

nav {
    display: flex;
    align-items: center;
}

nav ul {
    display: flex;
    list-style-type: none;
    padding: 0;
    margin: 0;
    align-items: center;
}

nav ul li {
    margin: 0 10px; /* Spacing between navigation items */
}

nav ul li a {
    color: #FFFFFF; /* Text color for links */
    text-decoration: none;
    padding: 5px 10px; /* Padding around links for easier clicking */
}

nav ul li a:hover {
    color: #FFD700; /* Color change on hover */
}

h1, h2 {
    color: #DAA520;
}

.featured-dishes img {
    width: 100%; /* Adjust as needed */
    height: 7px;
    border-radius: 5px;
    margin-bottom: 0;
    padding-bottom: 0;
}

.slider {
    width: 100%; /* Full width of the parent container */
    position: relative; /* Ensures positioning of the absolute elements within */
    overflow: hidden;
}

.slider-overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); /* Centers the overlay */
    color: #ffffff;
    font-size: 4rem; /* Font size for readability */
    font-weight: bold; /* Bold for the overlay text */
    z-index: 10; /* Above the images but below the arrows, if necessary */
    text-align: center;
    width: 100%; /* Full width to center the text properly */
    pointer-events: none; /* Allows interaction with elements underneath */
}

.slides {
    position: relative;
    width: 100%; /* Ensures that the slider takes up the full width of the container */
    height: 900px; /* Fixed height for the slider */
    overflow: hidden; /* Hide any overflow outside the slider */
}

.slides img {
    width: 100%; /* Ensures that the image takes up the full width of the slider */
    height: 900px; /* Fixed height to match the slider's height */
    object-fit: cover; /* Ensures that the image covers the slider area */
    position: absolute;
    left: 50%; /* Positions the center of the image in the middle of the slider */
    top: 50%; /* Positions the center of the image in the middle vertically */
    transform: translate(-50%, -50%); /* Center the image perfectly in the slider */
    opacity: 0; /* Images are transparent initially */
    transition: opacity 2s ease-in-out; /* Smooth transition for the opacity */
}

.slides img:first-child {
    opacity: 1; /* The first image in the slider is visible on load */
}



.prev, .next {
    cursor: pointer;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    padding: 16px;
    color: white;
    font-weight: bold;
    font-size: 18px;
    background-color: rgba(0,0,0,0.6);
    z-index: 3; /* Arrows should be above overlay and images */
    border-radius: 3px;
}

.next {
    right: 10px; /* Right arrow position */
}

.prev {
    left: 10px; /* Left arrow position */
}


footer {
    background-color: #333;
    color: #FFFFFF;
    text-align: center;
    padding: 10px 0;
    width: 100%;
    bottom: 0;
}

@import url('https://fonts.googleapis.com/css2?family=Niramit&display=swap');

html, body {
    width: 100%;
    margin: 0;
    padding: 0;
    overflow-x: hidden; /* Prevents horizontal scrollbar due to overflow */
}

.content-wrap {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.story-inspiration {
    background-color: #F2F2F2; /* Light background for readability */
    color: #333; /* Primary text color */
    padding: 40px 60px; /* Adequate padding for spacing */
    text-align: center; /* Center-aligned text */
}

.story-inspiration h2 {
    color: #C8102E; /* Bold color for the heading inspired by the screenshot */
    font-size: 3em; /* Large font size for impact */
    margin-bottom: 20px; /* Space between the heading and paragraph */
    text-transform: uppercase; /* Uppercase for a striking appearance */
    letter-spacing: 2px; /* More spacing between letters for emphasis */
}

.story-inspiration p {
    font-size: 1.2em; /* Slightly larger font size for the body text */
    max-width: 800px; /* Maximum width for optimal reading experience */
    margin: 20px auto; /* Centers the text blocks and adds space between paragraphs */
    line-height: 1.5; /* Line height for better readability */
}

.inspiration-image {
    background-image: url("Resources\\Images\\Backgroundimg\\streets-of-food-bIfZam5h9H4-unsplash.jpg");
    background-size: cover;
    background-position: center;
    height: 900px; /* Increased height */
    width: 100%;
    display: block;
}

.contact-info {
    display: flex;
    justify-content: space-between;
    padding: 40px 20px;
    background-color: #ffffff; /* Changed to a white background for a clean look */
    border-top: 5px solid #f4f4f4; /* A subtle top border, can be adjusted for color */
}

.contact-info h3 {
    font-size: 2.5rem; /* Larger font size for headers */
    color: #C8102E; /* Bold color inspired by the image */
    margin-bottom: 0.5rem;
    position: relative; /* Needed for pseudo-element positioning */
}

.contact-info h3::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -10px;
    height: 3px; /* Height of the underline */
    width: 70%; /* Width of the underline */
    background-color: #C8102E; /* Color of the underline */
}

.opening-times, .find-us {
    flex: 1;
    margin: 0 10px;
    color: #333; /* Darker text for better readability */
}

.opening-times p, .find-us p {
    font-size: 1.2rem; /* Increased font size for better visibility */
    margin-bottom: 0.5rem; /* Consistent spacing between lines */
}

.social-media {
    margin-top: 20px; /* Added space above the social media links */
}

.social-media a {
    display: inline-block;
    margin-right: 10px;
    /* Other styles... */
}

.social-media img {
    width: 60px; /* Example size, adjust as needed */
    height: 60px; /* Maintain aspect ratio */
}


/* Add specific classes or style for social media icons if needed */



.restaurant-map {
    width: 100%; /* Ensure container spans full width of its parent */
    text-align: center;
    padding: 20px 0; /* Adjusted to remove horizontal padding */
    margin: 0 auto; /* Ensures the section is centered */
    background-color: #ffffff; /* Adjust as per your design */
    overflow: hidden; /* Prevents any potential overflow */
}

.restaurant-map h2 {
    margin-bottom: 20px;
    color: #dd3030; /* Or any color that fits your design */
}


.restaurant-map iframe {
    width: 100%; /* Full width of its container */
    height: 450px; /* Or any height you prefer */
    border: 0; /* Removes the border */
    border-radius: 8px; /* Optional: Adds rounded corners */
}


.newsletter-signup {
    background-color: #ffffff; /* Light background for the section */
    text-align: center;
    padding: 40px 20px;
    margin: 20px auto; /* Center the section with automatic horizontal margins */
    width: 1200px; /* Set the max-width to the width of the iframe for alignment */
}

.newsletter-signup h3 {
    margin-bottom: 10px;
    color: #dd3030; /* Heading color to match your theme */
    font-size: 40px;
}

.newsletter-signup p {
    margin-bottom: 20px;
    color: #333; /* Subtext color */
}

.newsletter-signup iframe {
    width: 100%; /* Full width of the container */
    min-height: 320px; /* Minimum height */
    border: none; /* Remove the border */
    border-radius: 5px; /* Rounded corners for the iframe */
    margin-top: 20px; /* Spacing above the iframe */
}


/* For small devices (landscape phones, 576px and up) */
@media (max-width: 576px) {
    header {
        flex-direction: column;
        padding: 10px;
    }

    .logo-container img {
        margin-top: 0;
        margin-left: 0;
        transform: scale(1); /* Scales down the logo for smaller screens */
    }

    
  
    /* Adjustments for navigation or nav elements inside header could be included here */
    /* Example for adjusting nav ul, li, or a elements for better display on small screens */
}

/* For extra small devices (portrait phones, less than 576px) */
@media (max-width: 575.98px) {

  
    /* If you implement a hamburger menu, you'd add the styles for it here */
  
    header {
      padding: 5px; /* Less padding on the smallest screens */
    }
  }

  .slider-overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 2rem; /* Adjust size as necessary for small devices */
    width: 100%; /* This should span the full width of the .slider */
    z-index: 10; /* Ensure it's above the images */
    text-align: center;
}
    
/* Medium devices (tablets, less than 992px) */
@media only screen and (max-width: 991.98px) {
    header {
        position: fixed; /* Keep the header fixed at the top */
        top: 0;
        left: 0;
        width: 100%; /* Ensure full width */
        z-index: 1050; /* Higher than the slider to overlap */
    }

    .slider-overlay {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        font-size: 2rem; /* Adjust size as necessary for small devices */
        width: 100%; /* This should span the full width of the .slider */
        z-index: 10; /* Ensure it's above the images */
        text-align: center;
    }

.featured-dishes img, .slider, .slides img, .contact-info, .restaurant-map iframe, .newsletter-signup {
        /* Adjust layout, font sizes, and images for tablet viewing */
        font-size: smaller; /* Adjust font size */
        padding: smaller; /* Adjust padding */
        width: 100%; /* Make images and containers use full width */
    }

    .slider-overlay {
        position: absolute;
        top: 40%;
        left: 50%;
        transform: translate(-50%, -50%);
        font-size: 2rem; /* Adjust size as necessary for small devices */
        width: 100%; /* This should span the full width of the .slider */
        z-index: 10; /* Ensure it's above the images */
        text-align: center;
    }

    .slides {
        height: 500px; /* Adjust slider height */
    }

    .slides img {
        height: 500px; /* Match adjusted slider height */
    }

    .contact-info, .opening-times, .find-us {
        flex-direction: column; /* Stack these elements vertically on smaller screens */
        text-align: center;
    }

    .restaurant-map iframe {
        height: 300px; /* Adjust map height for better fit */
    }

    .newsletter-signup {
        width: auto; /* Allow the signup section to adjust width */
        padding: 20px; /* Reduce padding */
    }

    main, .content-wrap { /* Adjust the top padding to ensure content doesn't overlap the fixed header */
        padding-top: -100px; /* Increase this value if the header height increases */
    }

    
}

/* Small devices (phones, less than 768px) */
@media only screen and (max-width: 767.98px) {
.featured-dishes img, .slider, .slides img, .contact-info, .restaurant-map iframe, .newsletter-signup {
        font-size: smaller; /* Further reduce font size */
        padding: smaller; /* Further reduce padding */
    }

    .slider-overlay {
        position: absolute;
        top: 40%;
        left: 50%;
        transform: translate(-50%, -50%);
        font-size: 2rem; /* Adjust size as necessary for small devices */
        width: 100%; /* This should span the full width of the .slider */
        z-index: 10; /* Ensure it's above the images */
        text-align: center;
    }

    .slides {
        height: 300px; /* Adjust slider height for smaller devices */
    }

    .slides img {
        height: 300px; /* Match adjusted slider height */
    }

    .restaurant-map iframe {
        height: 250px; /* Adjust map height for a better fit on small screens */
    }

    .newsletter-signup iframe {
        min-height: 200px; /* Adjust iframe height in the newsletter signup */
    }

    main, .content-wrap { /* Adjust the top padding for small devices */
        padding-top: -100px; /* Adjust based on header height */
    }
}