/* Add the @font-face rule to include the Montserrat font */
@font-face {
    font-family: 'Urbanist';
    src: url('fonts/Urbanist-Regular.ttf') format('truetype');
}

/* Reset some default styles */
body, h1, h2, h3, p, ul, li, html {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: Urbanist, Arial, sans-serif;
    line-height: 1.6;
}

header {
    display: flex;
    justify-content: center;  /* Center items horizontally */
    align-items: center;      /* This will keep the logo at the same vertical position */
    padding: 10px;
    background-color: rgba(255, 255, 255, 0.8);
    margin-bottom: 0;
}

.header-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 2; /* Make sure this is above the hero section */
    /* Add background color or styles as needed */
}

/* Adjust the menu, logo, and reservations button to be relative to the header container */
.menu-dropdown {
    z-index: 10000;
}
.logo-image,
.reservations-btn {
    position: absolute;
    /* Adjust top, right, left values as needed to place them */
}

.logo {
    font-family: "Urbanist", "serif";
    font-size: 30px;
    color: #2963e5;
}

.reservations-btn {
    font-family: "Montserrat-Regular", "serif";
    background-color: #2963e5;
    color: #fff;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-weight: bold;
    margin-top: 1px;
    position: relative;
}
@media screen and (max-width: 768px) {
    .reservations-btn {
        display: block; /* Show the button */
        position: fixed; /* Fixed position */
        left: 0; /* Align to the left */
        right: 0; /* Align to the right */
        bottom: 0; /* Stick to the bottom */
        width: 100%; /* Full width */
        z-index: 1000; /* Make sure it's on top of other elements */
        padding: 15px 0; /* Adjust padding as needed */
        text-align: center; /* Center the text */
        font-size: 1.2em;
    }
}
.button-container {
    display: flex;
    align-items: center;
    gap: 10px; /* Adjusts spacing between buttons */
}

.about-btn {
    font-family: "Montserrat-Regular", "serif";
    background-color: #ffffff; /* White background */
    color: #2963e5; /* Orange text to match branding */
    padding: 10px 20px;
    border: 2px solid #2963e5; /* Orange border */
    border-radius: 5px;
    cursor: pointer;
    font-weight: bold;
    text-decoration: none;
}

.about-btn:hover {
    background-color: #2c64e4; /* Orange background on hover */
    color: #ffffff; /* White text on hover */
}
@media (max-width: 768px) {
    .button-container {
        display: flex;
        justify-content: flex-end; /* Push buttons to the right */
        align-items: center;
        width: 100%;
        padding-right: 20px; /* Add spacing from the right edge */
        position: relative;
        z-index: 10;
    }

    .about-btn {
        position: relative;
        right: 0; /* Align to the right */
        margin-left: auto; /* Push it as far right as possible */
    }
}

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

.nav-link {
  text-decoration: none;
  font-weight: 500;
  color: #333;
  transition: color 0.2s ease;
}

.nav-link:hover {
  color: #3b82f6; /* match your site’s blue accent */
}



.logo-image {
    position: absolute;
    top: 20px; /* Adjust this value as per your requirements */
    left: 50%;
    transform: translateX(-50%);
    max-width: 100%;
    height: auto;
}

.logo-image img {
    width: 200px; /* Adjust this value to make the logo smaller */
    max-width: 100%; /* Ensures it doesn't stretch */
    height: auto; /* Maintains aspect ratio */
    display: block;
    margin: 0 auto;
    padding-top: 0;
}
@media (max-width: 768px) {
    .logo-image {
        position: absolute;
        top: 5px; /* Moves it up slightly */
        left: 50%;
        transform: translateX(-50%);
    }

    .logo-image img {
        width: 80px; /* Adjust for smaller screens */
        height: auto;
    }
}



.logo {
    font-family: Montserrat, sans-serif;
    font-size: 24px;
    color: #000;
}

.hero {
    position: relative;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    z-index: 1;
    padding-top: 0;
}

.hero::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-image: url('Images/SalesTeam.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 0.25;
    z-index: -1;
}

header {
    position: relative;
    z-index: 2;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
    background-color: rgba(255, 255, 255, 0.8);
}

.content {
    padding: 60px 0;
}

/* Styles for the construction message */
.construction-message {
    font-family: Urbanist, Arial, sans-serif;
    color: #333;
    text-align: center;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 3;
}

.journey-text {
    font-size: 48px; /* Larger font size for the 'A Culinary Journey Awaits' text */
    margin-bottom: 20px; /* Space between the journey text and the separator line */
}

.separator-line {
    width: 80%; /* Width of the separator line, you can adjust as needed */
    height: 1px; /* Height of the separator line */
    background-color: #333; /* Color of the separator line */
    margin: 0 auto; /* Center the separator line horizontally */
    margin-bottom: 20px; /* Space between the separator line and the inquiry text */
}

.inquiry-text {
    font-size: 28px; /* Font size for the 'Click on Reservations for Table Inquiries' text */
}

@media (max-width: 768px) {
    .journey-text {
        font-size: 36px; /* Smaller font size for the journey text on smaller screens */
    }
    .inquiry-text {
        font-size: 24px; /* Smaller font size for the inquiry text on smaller screens */
    }
}


/* Overlay covering the entire screen, with proper stacking context */
.rectangle-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5); /* Semi-transparent black */
    z-index: 10; /* High z-index to ensure it overlays other content */
    display: none; /* By default, hide it */
}

/* Display the overlay when the form is active.
   */
.reservation-form.show-form ~ .rectangle-overlay {
    display: flex; /* Flex to enable centering of child content */
    justify-content: center; /* Center horizontally */
    align-items: center; /* Center vertically */
}

/* Reservation form styling */
.reservation-form {
    display: none; /* Hide form by default */
    flex-direction: column;
    justify-content: center;
    align-items: center; /* Align items horizontally */
    height: auto; /* Adjust height as necessary */
    padding: 2em;
    box-sizing: border-box;
    z-index: 1001; /* Ensure the form is above the overlay */
    position: fixed; /* Fixed to ensure it's placed relative to the viewport */
    top: 50%; /* Start at 50% from the top */
    left: 50%; /* Start at 50% from the left */
    transform: translate(-50%, -50%); /* Center form */
    background-color: #e0e0e0; /* Background color */
    box-shadow: 2px 2px 6px #a3a3a3, -2px -2px 6px #ffffff; /* Neumorphism effect */
    border-radius: 15px; /* Rounded corners */
    width: auto; /* Auto-width or fixed width as needed */
    margin: 0; /* No margin */
}

/* Show the form when the .show-form class is added */
.reservation-form.show-form {
    display: flex; /* Display the form */
}

/* Style for the form title */
.reserv-title {
    text-align: center;
    margin-bottom: 30px; /* Space below the title */
}

/* Add margin between form elements */
.form-group {
    margin-bottom: 20px; /* Add more space between form elements */
}

.form-group label {
    display: block; /* this will ensure the label is on its own line */
}

.form-group input {
    display: block; /* this will ensure the input is on its own line */
    width: 100%; /* optional: makes the input stretch to the width of its container */
    box-sizing: border-box; /* optional: ensures padding doesn't affect the overall width */
}

/* Adjust the close button */
.close-btn {
    /* Existing styles... */
    /* Add neumorphism style if needed */
    color: #333; /* Example color */
    font-size: 1.5rem; /* Larger to be easily clickable */
    background: none; /* No background for a minimalistic design */
    border: none; /* No border for a cleaner look */
    cursor: pointer;
    position: absolute;
    right: 10px;
    top: 10px;
}

.input-hint {
    font-size: 0.9rem; /* Smaller font size for hint text */
    color: #666; /* A less prominent color than your main text */
    margin-top: 5px; /* Space between the input field and the hint */
    /* Additional styling as needed */
}

@media (max-width: 768px) {
    .input-hint {
        font-size: 0.8rem; /* Even smaller on mobile devices */
        /* Other adjustments for mobile */
    }
}

@media (max-width: 768px) {
    .reservation-form {
        width: 90%; /* Increase the width */
        max-width: 400px; 
        padding: 1em; /* Adjust padding as needed */
        /* Other styles as needed */
    }
    .reserv-title {
        margin-top: 1em; /* Increase top margin */
        margin-bottom: 20px; /* Adjust bottom margin if needed */
    }
}

input[type="text"],
input[type="number"],
input[type='datetime-local'],
input[type="tel"]
{
    height: 40px; /* Adjust the height as needed */
    border-radius: 10px; /* This gives the inputs rounded corners */
    padding: 5px 10px; /* Add some padding inside the inputs for better text visibility */
    border: 1px solid #ccc; /* Optional: adds a border, you can change the color as needed */
    font-size: 1rem; /* Adjust font size as desired for better readability */
    box-sizing: border-box; /* Ensures padding does not add to the total width and height */
}



input[type="submit"] {
    height: 40px; /* Make the submit button taller */
    border-radius: 10px; /* Round the edges of the button */
    padding: 5px 20px;
    font-size: 1rem;
    cursor: pointer; /* Changes the mouse cursor to indicate it's clickable */
    background-color: #f0f0f0; /* Optional: background color for the button */
    border: 1px solid #ccc; /* Optional: adds a border, you can change the color as needed */
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2); /* Optional: adds a subtle shadow for depth */
    transition: background-color 0.3s ease; /* Optional: adds a transition for the hover effect */
}


input[type="submit"]:hover,
.reservations-btn:hover {
    background-color: #cacaca; /* Darken the button on hover */
    box-shadow: 2px 2px 6px #a3a3a3,
    -2px -2px 6px #ffffff;
}


/* Other existing styles should still apply and might need minor adjustments */

/* Ensure that the overlay covers the entire screen and the form is centered */
.rectangle-overlay {
    /* Other existing styles... */
    display: flex; /* Enable flex container */
    align-items: center; /* Center form vertically */
    justify-content: center; /* Center form horizontally */
}
/* Style for the dropdown button */
.menu-dropdown {
    position: fixed;
    display: inline-block;
    left: 0; /* Aligns it to the left */
    top: 0;
}

/* Style for the dropdown content (hidden by default) */
.menu-dropdown-content {
    display: none;
    position: absolute;
    left: 0;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
}

/* Style for the dropdown links */
.menu-dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}

/* Show the dropdown content on hover */
.menu-dropdown:hover .menu-dropdown-content {
    display: block;
}

/* Style for the dropdown button */
.menu-dropbtn {
    font-family: "Montserrat-Regular", "serif";
    background-color: #F4A41C; /* Change as per your color theme */
    color: white;
    padding: 16px;
    font-size: 16px;
    border: none;
    cursor: pointer;
}

/* Add more styles here for positioning and to match the theme of your website */

.orange-line, .setting-section {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

/* State of the elements after scrolling into view */
.fade-in {
    opacity: 1;
    transform: translateY(0);
}

.orange-line {
    height: 4px;
    background-color: #2963e5;
    width: 50%;
    margin-top: -10px;
    margin-bottom: 20px;
    margin-left: auto;
    margin-right: auto;
    display: block; /* Ensuring it's a block level element */
    position: relative; /* Using relative positioning */
    top: -60px; /* Moving it up with relative positioning */
}

.setting-section {
    text-align: center;
    padding-top: -70px; /* Reduce the top padding as needed */
    padding-bottom: 100px;
    margin-top: -25px;
    /* Other styles */
}

.setting-section h2 {
    font-size: 2em; /* Adjust size to your preference */
    margin-bottom: 0.5em; /* Adjust space below heading */
}

.setting-section p {
    font-size: 1em; /* Adjust size to your preference */
    max-width: 600px; /* Adjust width to your preference */
    margin: 0 auto; /* Center the paragraph */
}

.orange-line {
    height: 4px; /* Adjust the height to your preference for the thickness of the line */
    background-color: #2963e5; /* This is an orange color, adjust the shade as needed */
    width: 50%; /* Adjust the width as needed */
    margin: 0 auto; /* This will center the line horizontally */
}

@media screen and (max-width: 768px) {
    .setting-section h2 {
        font-size: 1.3em; /* Smaller font size for mobile */
        /* Add other mobile-specific adjustments here */
    }

    .setting-section p {
        font-size: 0.8em; /* Smaller font size for mobile */
        /* You can also adjust the width and margin if needed for mobile */
        /* For example, you might want a different max-width or side margins */
    }
}

/* "Experience" section styles */
.experience-section {
    background-color: #f5f5f5; /* Light grey background */
    padding: 50px 0; /* Adjust padding to your preference */
    text-align: center; /* Center-align the text */
}

.experience-images {
    display: flex;
    justify-content: center; /* Center the images horizontally */
    gap: 40px; /* Adds space between the images */
}

.experience-images img {
    width: calc(30% - 20px); /* Adjust width to account for the gap */
    height: auto; /* Maintain the aspect ratio */
    max-width: none; /* No maximum width, or set it to a larger value */
}

.experience-text {
    margin-top: 40px; /* Adds space between the images and the text */
    max-width: 600px; /* Restricts the width of the text to a maximum of 600px */
    margin-left: auto; /* Centers the text block horizontally */
    margin-right: auto; /* Centers the text block horizontally */
    padding-bottom: 10px;
}

.experience-text h2 {
    font-size: 2em; /* Sets the header font size to 2.5 times the base font size */
    margin-bottom: 0.5em; /* Adjust space below heading */
}

.experience-text p {
    font-size: 1em; /* Sets the paragraph text font size to 1.25 times the base font size */
    /* Add any other styling you want for the paragraph text */
    margin-bottom: 80px;
}

.experience-cards {
    display: flex;
    justify-content: center;
    gap: 30px; /* Space between cards */
    margin-top: 40px;
}

.experience-card {
    width: 300px;
    height: 350px;
    background: #fff;
    padding: 30px 20px; /* Increased top padding to move content down */
    text-align: center;
    border-radius: 15px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    justify-content: flex-start; /* Ensures content starts lower in the card */
}

.experience-card i {
    font-size: 50px; /* Icon size */
    color: #000; /* Default to black */
    margin-bottom: 40px;
    transition: color 0.3s ease; /* Smooth color transition */
}

.experience-card h3 {
    font-size: 1.5em;
    margin-bottom: 10px;
}

.experience-card p {
    font-size: 1em;
    color: #555;
    text-align: center;
    /* Removed flex-grow and alignment rules to revert to the original style */
}

/* Hover Effects */
.experience-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}

.experience-card:hover i {
    color: #2963e5; /* Change to orange on hover */
}

/* Responsive Design */
@media (max-width: 900px) {
    .experience-cards {
        flex-direction: column;
        align-items: center;
    }
    
    .experience-card {
        width: 80%; /* Adjust for smaller screens */
    }
}





/* Responsive adjustments for smaller screens */
@media (max-width: 768px) {
    .experience-images img {
        width: 80%; /* Larger percentage for smaller screens */
        max-width: none; /* No maximum width constraint */
        margin: 0 auto; /* Center images in a column */
        margin-bottom: 15px; /* Adds space between stacked images */
    }

}
/* Responsive adjustments for mobile screens */
@media (max-width: 768px) {
    .experience-images {
        flex-direction: column; /* Stack images vertically on small screens */
        align-items: center; /* Center align the flex items */
    }

    .experience-images img {
        width: 100%; /* Allow images to use full width of their container */
        max-width: 300px; /* Set a maximum width for the images */
        height: auto; /* Maintain aspect ratio */
        margin-bottom: 20px; /* Add space between stacked images */
    }

    .experience-text,
    .experience-images {
        flex-basis: 100%; /* Allow text and images to use the full width */
        padding: 0 10px; /* Add some padding on the sides */
    }

    .experience-text h2 {
        font-size: 1.3em; /* Smaller font size for mobile */
        /* Adjust heading styles for mobile if needed */
    }

    .experience-text p {
        font-size: 0.8em; /* Smaller font size for mobile */
        margin-bottom: 40px; /* Less space below paragraphs on mobile */
        /* Adjust paragraph styles for mobile if needed */
    }

}

/* "Enjoy" section styles */
.enjoy-section {
    background-color: #ffffff; /* White background */
    padding: 50px 0; /* Adjust padding to your preference */
    text-align: center; /* Center-align the text */
}

.enjoy-content {
    display: flex;
    justify-content: center;
    align-items: center;
    max-width: 700px; /* Adjust the width as necessary */
    margin: 0 auto; /* Center the content */
    padding: 0 15px; /* Add some padding on the sides */
}

.enjoy-text {
    flex: 0 0 auto; /* This means the text will not grow or shrink */
    width: calc(60% - 10px); /* Adjust width as needed, subtracting the desired space */
    margin-right: 80px; /* Adds space to the right of the text box */
    border: 2px solid #2963e5;
    padding: 20px;
    box-sizing: border-box;
}

.enjoy-image {
    flex: 0 0 auto; /* This means the image will not grow or shrink */
    width: calc(50% - 20px); /* Adjust width as needed, subtracting the desired space */
}

.enjoy-image img {
    width: 400; /* Set a fixed width */
    height: 400; /* Set a fixed height */
    object-fit: cover; /* Ensures the image scales properly */
}


/* Responsive adjustments */
@media (max-width: 768px) {
    .enjoy-content {
        flex-direction: column;
    }

    .enjoy-text,
    .enjoy-image {
        padding-right: 15px; /* Adjust padding as per design */
        padding-left: 15px;
        margin-right: 0; /* Ensure it doesn't push the content off-center */
        margin-left: 0; /* Align content properly to the viewport */
        margin-bottom: 20px; /* Adds space below the text before the image */
        box-sizing: border-box;
        width: 100%; /* Allow text and image to fill the screen minus any padding */
    }

    .enjoy-text {
        margin-bottom: 20px; /* Give some space before the image */
    }

    .enjoy-image {
        display: flex; /* Turn .enjoy-image into a flex container */
        justify-content: center; /* Center the image horizontally */
        align-items: center; /* Center the image vertically */
        width: 100%; /* Full width of the container */
        margin-bottom: 20px; /* Maintain margin for spacing purposes */
    }

    .enjoy-image img {
        margin-top: 20px;
        width: auto; /* Adjust to 'auto' or a specific percent to maintain aspect ratio */
        max-width: 100%; /* Ensure image is not more than 100% of its parent */
        height: auto; /* Maintain the aspect ratio */
    }
}



.info-section {
    text-align: center;
    background-color: #FFF; /* Assuming you want a white background */
    padding: 50px 0;
}

.social-icons {
    /* ... */
}

.social-icon {
    font-size: 3em; /* Adjust the size as needed */
    margin: 0 10px;
    color: #333; /* Set your desired color */
    /* Add other styles such as hover effects if you want */
}

.operational-hours p {
    margin: 5px 0;
    font-size: 1em;
}

.decorative-line {
    border: 0;
    height: 1px;
    background-image: linear-gradient(to right, transparent, #2963e5, transparent);
    margin: 20px 0;
}

.logo-contact {
    margin: 20px 0;
}

.logo-contact .footer-logo {
    max-width: 200px; /* Adjust to the size of your logo */
    margin-bottom: 10px;
}

/* Add media queries and other CSS as needed for responsiveness */
/* Basic styles */
/* ... other styles ... */

/* Responsive adjustments for mobile screens */
@media (max-width: 768px) {
    .social-icons {
        display: flex;
        justify-content: center;
        margin-bottom: 20px;
        font-size: 1em;
    }

    .social-icon img {
        width: 40px; /* Adjust the size of the icons for mobile */
        height: auto;
    }

    .operational-hours p {
        font-size: 0.9em; /* Adjust the font size for mobile */
    }

    .logo-contact .footer-logo {
        width: 150px; /* Adjust the logo size for mobile */
        height: auto;
    }

    .logo-contact p {
        font-size: 1em; /* Adjust the contact font size for mobile */
    }

    .decorative-line {
        margin: 15px auto; /* Adjust the spacing for mobile */
    }
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.header-container header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.location-link {
    margin: 0 100px; /* Adjust the margin to create space around the link */
    margin-top: -23px;
}

.location-link a {
    color: black;          /* Sets the text color to black */
    text-decoration: none; /* Removes the underline from the link */
    transition: color 0.3s ease; /* Smooth transition for the color change on hover */
    font-size: 1.2em;
}

.location-link a:hover {
    text-decoration: underline; /* Adds an underline on hover for visual feedback */
    /* Or any other hover effect you want, like changing the color */
    color: #555; /* Dark grey color on hover, change as desired */
}

.location-container {
    animation: fadeIn 1s ease-in-out forwards;
    background-color: #f5f5f5; /* Light grey background */
    padding: 40px; /* Add padding as needed */
    margin: 20px auto; /* Centers the div and adds space above and below */
    width: 77%; /* Adjust the width as needed */
    box-sizing: border-box; /* Ensures padding is included in the width */
    position: relative; /* Use relative positioning for layout */
    padding-top: 200px;
}

.location-container h1 {
    text-align: center; /* Centers the LOCATION title */
    margin-bottom: 20px; /* Adds space below the title */
}

.location-container p {
    text-align: center; /* Justifies the text, or use 'left' for left-aligned text */
    /* Add any other styling for your paragraph text here */
}

.location-image-container {
    animation: fadeIn 1s ease-in-out forwards;
    width: 77%; /* Assuming the location container is also 80% */
    margin: 0 auto; /* This centers the container */
}

.location-image-container img {
    width: 100%; /* Makes the image stretch to the full width of its container */
    height: auto; /* Maintains the aspect ratio of the image */
    display: block; /* Removes any default inline spacing */
    opacity: 0.8; /* 1 is fully opaque and 0 is fully transparent */
   

}

.split-section {
    margin-top: 50px; /* Keep the space above this section */
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px; /* This sets a gap between the flex items */
    margin-bottom: 40px;
}

.split-image {
    flex: 1; /* or use 'none' if you do not want it to grow or shrink */
    max-width: 50%; /* Adjust this width to give more space for the text if necessary */
    padding-left: 80px; /* Reduce the left padding to bring the image closer to the text */
    padding-right: 20px; /* Add some right padding to push the image slightly away from the text */
}

.split-image img {
    width: 72%; /* Adjust this percentage to make the image smaller */
    height: auto; /* Maintain aspect ratio */
    display: block; /* Ensures the image is block level */
    margin-left: auto; /* Centers the image within the .split-image container */
    margin-right: auto; /* Centers the image within the .split-image container */
}

.split-text {
    animation: fadeIn 1s ease-in-out forwards;
    flex: 0 0 auto; /* This means the text will not grow or shrink */
    width: calc(40% - 20px); /* Adjust width as needed, subtracting the desired space */
    margin-right: 200px; /* Adds space to the right of the text box */
    padding: -5px;
}

.split-text h2 {
    margin-bottom: 30px;
    color: #2963e5; /* Replace 'orange' with a specific orange color code if needed */
}

@media (max-width: 768px) {
    .header-container header {
        flex-direction: column; /* Stack the header items vertically */
        padding: 10px; /* Reduce padding */
    }

    .location-link {
        margin: 0 20px; /* Adjust margins for smaller screens */
        margin-top: 0; /* Reset negative margin */
    }

    .location-link a {
        font-size: 1.25em; /* Adjust font size for smaller screens */
        margin-left: 250px;
    }

    .location-container {
        padding: 20px; /* Reduce padding */
        margin: 20px auto;
        width: 100%; /* Full width */
        padding-top: 170px; /* Reduce padding at the top */
    }

    .location-image-container,
    .split-section {
        flex-direction: column; /* Stack flex items vertically */
    }

    .split-image,
    .split-text {
        /* Reset any flex-grow, flex-shrink, and flex-basis properties */
        flex: none;
        max-width: 70%; /* Each child takes full width */
        padding: 0; /* Reset padding if needed */
        margin: 0; /* Reset margin to remove any horizontal spacing */
    }

    .split-image img {
        width: auto; /* Adjust if you want to maintain the original image width */
        height: auto; /* Maintain aspect ratio */
        max-width: 100%; /* Ensure it doesn't overflow the screen width */
    }

    .split-text {
        /* Adjust the order if you want text to come first */
        order: 2;
        width: 100%; /* Full width for the text container */
        padding: 20px 10px; /* Add padding for text readability */
    }

    /* Adjust the heading and paragraph separately if needed */
    .split-text h2,
    .split-text p {
        text-align: center; /* Center align text for mobile */
        margin-top: 10px; /* Add some space on the top of text elements */
        margin-bottom: 50px;
    }

}

.map-image-container img {
    width: 55%;
    height: auto;
    display: block;
    margin: 0 auto; /* Centers the image horizontally */
    margin-bottom: 40px
}

/* Mobile styles */
@media (max-width: 768px) {
    .map-image-container img {
        width: 80%; /* Increase the width for smaller screens */
        margin-bottom: 20px; /* Adjust the space below the image for smaller screens */
    }
}