@font-face {
    font-family: 'AmostelySignature';
    src: url('assets/fonts/Gonestones/Gonestone.woff2') format('woff2'), /* Modern browsers */
         url('assets//fonts/Gonestones/Gonestone.woff') format('woff'),   /* Older browsers */
         url('assets/fonts/amostely_signature/AmostelySignature.ttf') format('truetype'); /* Fallback */
    font-weight: normal;
    font-style: normal;
}


/* General Reset */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "Lato", sans-serif;
    /*background-color: #f2ece0;*/
}

body {
    font-family: "Lato", sans-serif;
    overflow-x: hidden;
    background-color: #110642!important;
}

/* Header and Navigation */
header {
    background-color: #110642!important;
    width: 100%;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    position: sticky;
    top: 0;
    left: 0;
    z-index: 1000;
    transition: background-color 0.3s ease, box-shadow 0.3s ease; /* Smooth transition effect */
}

.nav-container {
    width: 98%;
    margin: 0 auto;
    padding: 10px 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo a {
    text-decoration: none;
    color: #fff;
    font-size: 1.8rem;
    font-weight: bold;
    transition: transform 0.3s;
}

.logo a:hover {
    transform: scale(1.1); /* Zoom effect */
}

.responsive-image {
    max-width: 100%;
    height: auto;
    display: block; /* Prevents extra space below the image */
}

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

.nav-links {
    list-style: none;
    display: flex;
    align-items: center;
    gap: 10px;
    text-transform: uppercase;
}

.nav-links li {
    margin-left: 10px;
}

.nav-links a {
    text-decoration: none;
    color: #fff;
    font-size: 0.8rem;
    transition: color 0.3s;
    letter-spacing: 2px;
}

.nav-links a:hover, .active {
    color: #c99c59; /* Accent color on hover */
    text-decoration: underline;
    text-underline-offset: 10px;
}

.menu-divider {
    color: #c99c59;
    margin-left: 20px;
    display: inline-block;
    position: relative;
    z-index: 1;
}

/* Hamburger Menu for Mobile */
.hamburger {
    display: none;
    cursor: pointer;
    flex-direction: column;
    gap: 4px;
}

.bar {
    width: 25px;
    height: 3px;
    background-color: #fff;
    transition: all 0.3s;
}

/* Show hamburger on smaller screens */
@media (max-width: 1024px) {
    .nav-links {
        display: none; /* Hide default nav links */
    }

    .hamburger {
        display: flex; /* Show hamburger icon */
    }
}

/* Modal Menu */
.modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.5);
    justify-content: center;
    align-items: center;
    z-index: 1001;
    overflow: auto;
}

/* Show modal when active */
.modal.active {
    display: flex;
    justify-content: center;
    align-items: center;
}

.modal-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background-color: #110642!important;
    border-radius: 8px;
    width: 90%;
    max-width: 400px;
    position: relative;
    text-transform: uppercase;
    text-align: center;
}

.modal-header {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 20px;
    position: relative;
    border-bottom: 2px solid #c99c59 !important;
}

/* Close button styling */
.modal-close {
    position: absolute;
    right: 10px;
    background: none;
    border: none;
    font-size: 24px;
    cursor: pointer;
    color: #fff;
}

.modal-logo {
    max-width: 100px;
    transition: transform 0.3s ease;
    margin: auto;
}

.modal-logo:hover {
    transform: scale(1.2);
}

.modal-links {
    list-style: none;
    padding: 0;
}

.modal-links li {
    margin: 15px 0;
}

.modal-links a {
    text-decoration: none;
    color: #fff;
    font-size: 1rem;
    transition: color 0.3s;
    letter-spacing: 3px;
    text-align: center;
}

.modal-links a:hover {
    color: #c99c59; /* Accent color on hover */
}

/* Responsive Styling */
@media (max-width: 768px) {
    .modal-content {
        width: 90%;
        margin-top: 50px;
    }

    .logo img {
        max-width: 80px; /* Reduce logo size for small screens */
    }
}

.main{
    margin: 0;
}
/* Hero container styling */
.hero-container {
    position: relative;
    width: 100%;
    height: 100%;
    background-color: #fff;
    padding: 30px 15px;
    box-sizing: border-box;
    display: flex; /* Use Flexbox to center the content */
    justify-content: center; /* Center horizontally */
    margin-top: 0;
}

/* Hero video styling */
.hero-video {
    width: calc(100% - 20px); /* Full width minus the left/right padding */
    height: calc(100% - 40px); /* Full height minus the top/bottom padding */
    object-fit: cover; /* Cover the entire container */
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.5); /* Adds shadow to the video */
}

/* Gradient Overlay */
.gradient-overlay {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to left, rgba(0, 0, 128, 0.2), rgba(0, 0, 128, 0) 60%);
    pointer-events: none; /* Ensure it does not block interactions with other elements */
    z-index: 1; /* Ensure it is behind the text and logo but above the video */
}

/* Rotating Logo Container */
.logo-container {
    position: absolute;
    bottom: 200px; /* Position container from the bottom of the video */
    right: 150px;  /* Position container from the right of the video */
    text-align: center; /* Center-align text within the container */
    background-color: transparent; /* Ensure the background is transparent */
    z-index: 2;
}

/* Rotating Logo Styles */
.rotating-logo {
    width: 200px; /* Adjust the size as needed */
    height: auto;
    transition: transform 0.3s ease-out; /* Smooth transition for rotation */
    background-color: transparent; /* Ensure the background is transparent */
}

/* Static Paragraph Text Styles */
.static-text {
    font-family: "Lato", Sans-serif;
    margin-top: 10px; /* Add spacing between the logo and the text */
    font-size: 14px; /* Adjust the font size as needed */
    color: #fff; /* Set text color to white or any other color */
    background-color: transparent;
    font-size: 18px;
    letter-spacing: 2px;
    z-index: 2;
}

section h2{
    font-family: "AmostelySignature", Sans-serif !important;
    font-size: 45px;
    font-weight: 400;
    text-transform: none;
    letter-spacing: 3.5px;
}

section a h3{
    font-family: "AmostelySignature", Sans-serif !important;
    font-size: 35px;
    font-weight: 300;
    text-transform: none;
    letter-spacing: 3px;
    color: #fff;
    transition: transform 0.3s ease;
}

section a h3:hover{
    color: #110642;
    transform: scale(1.1)
}

.gold-underline2 {
    display: inline-block; /* Ensures the border width fits the text */
    border-bottom: 1px solid #fff; /* Adjust the thickness and color */
    padding-bottom: 10px; /* Adds space between the text and the line */
}

.gold-underline {
    display: inline-block; /* Ensures the border width fits the text */
    border-bottom: 3px solid #c99c59; /* Adjust the thickness and color */
    padding-bottom: 25px; /* Adds space between the text and the line */
}

.top-content{
    text-align: center;
    background-color: #fff !important;
}

.top-content p{
    font-family: "Lato", Sans-serif;
    font-size: 18px;
    font-weight: 300;
    text-transform: none;
    letter-spacing: 2px;
    margin-bottom: 1.5em;
}

/* Container to position the image and text */
.image-container {
    position: relative; /* Establishes a relative positioning context for absolute positioning */
    display: block; /* Keeps the image container size according to content */
    overflow: hidden; /* Ensures the hover effects are limited within the container */
}

/* Image styling */
.hover-image {
    /*display: block;  Removes any extra space around the image */
    height: auto;
    width: 100%; /* Makes the image responsive */
    transition: opacity 0.3s ease; /* Smooth transition for hover effect */
}

/* Text overlay styling */
.image-text {
    position: absolute; /* Positions text over the image */
    top: 50%; /* Vertically centers the text */
    left: 50%; /* Horizontally centers the text */
    transform: translate(-50%, -50%); /* Offsets for perfect centering */
    color: white; /* Text color */
    font-size: 18px; /* Font size */
    text-align: center; /* Centers text */
    opacity: 0; /* Initially hides the text */
    transition: opacity 0.3s ease; /* Smooth transition for text visibility */
    background: transparent;
    letter-spacing: 2px;
}

/* Hover effect for image and text */
.image-container:hover .hover-image {
    opacity: 0.7; /* Slightly darkens the image */
}

.image-container:hover .image-text {
    opacity: 1; /* Shows the text on hover */
}

.explore-box{
    background-color: #c99c59;
    text-align: center;
    padding: 30px 40px;
}

.explore-box h4{
    text-transform: uppercase;
    letter-spacing: 3.5px;
    background: transparent;
    color: #110642;
    font-weight: 200;
    font-size: 20px;
}

.explore-box p{
    background: transparent;
    color: #fff;
    font-size: 16px;
}

.explore-box a h3{
    background: transparent;
    color: #110642;
}

.explore-box a h3:hover{
    color: #fff;
}

/* Style for the gold horizontal line */
.gold-line {
    border: none; /* Removes the default border style */
    height: 1px; /* Adjusts the thickness of the line */
    width: 75%;
    background-color: #110642; /* Sets the color of the line */
    width: 100%; /* Spans the entire width of the page */
    margin: 20px 0; /* Adds vertical spacing around the line */
}

.event-photo img{
    width: 100% !important;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}

.stretch-image {
    width: 100%; /* Stretches the image to fill the column width */
    height: auto; /* Stretches the image to fill the column height */
    object-fit: cover; /* Ensures the image covers the entire column without distortion */
}

.social-box{
    width: 100%; /* Allows the width to be responsive */
    /* max-width: 1200px; /* Sets a maximum width for the box */
    background-color: #c99c59; /* Background color of the rectangle */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5); /* Adds shadow */
    /* margin: 20px; /* Adds some margin around the rectangle */
    padding: 20px; /* Optional padding for inner content */
    color: #f2ece0;
}

.social-box h3{
    font-family: "Quicksand", Sans-serif;
    font-size: 20px;
    letter-spacing: 3.5px;
    font-weight: 400;
    text-transform: uppercase;
}

.social-box ul{
    list-style-type: none;
}


.social-box ul li{
    display: inline-block;
    text-decoration: none;
    letter-spacing: 3.5px;
    margin: 20px;
}

.social-box ul li a{
    font-family: "AmostelySignature", Sans-serif;
    font-size: 30px;
    font-weight: 400;
    text-decoration: none;
    color: #f2ece0;
    transition: color 0.3s
}

.social-box ul li a:hover{
    color: #110642;
}

footer{
    font-family: "Quicksand", Sans-serif;
    background-color: #110529;
    color: #f2ece0;
    text-align: center;
    padding: 30px;
}

footer h3{
    letter-spacing: 3.5px;
    text-transform: uppercase;
}

footer p{
    max-width: 1200px;
    width: 100%;
    font-size: 12px;
    margin: 0 auto;
    text-align: center;
    letter-spacing: 2px;
}

footer hr{
    border: none; /* Removes default border */
    border-top: 3px solid #f2ece0; /* Creates a thicker white line */
    max-width: 1200px; /* Adjusts the width of the line */
    margin: 20px auto; /* Centers the line and adds vertical spacing */
    
}

footer .nav-container{
    display: flex; /* Flexbox for alignment */
    justify-content: center; /* Center the navbar horizontally */
    align-items: center; /* Aligns items vertically (if needed) */
}

footer .nav-links a{
    color: #fff;
    font-size: 10px;
}

footer .nav-links li {
    margin: 0 25px; /* Spacing between menu items */
}

footer img{
    width: 200px;
    transition:  transform 0.3s;

}

footer img:hover{
    opacity: 0.7;
    transform: scale(1.1);
}

footer .footer-social-box{
    border-left: solid 2px #c99c59;
    padding-left: 20px;
}

footer .footer-social-box a h3{
    font-family: "AmostelySignature", Sans-serif;
    text-transform: none;
    font-size: 35px;
    font-weight: 300;
    letter-spacing: 3px;
    color: #fff;
    transition: transform 0.3s;
}


footer .footer-social-box a h3:hover{
    color: #c99c59;
    transform: scale(1.1)
}

footer .footer-social-box ul{
    list-style-type: none;
    margin:0;
    padding: 0;
}

footer .footer-social-box ul li{
    display: inline;
    margin: 0 10px;
}

footer .footer-social-box ul li a{
    color: #c99c59;
    font-size: 30px;
    transition: color 0.3s;
}

footer .footer-social-box ul li a:hover{
    color: #fff;
}
footer .footer-social-box a h6{
    color: #fff;
    letter-spacing: 2px;
    transition: transform 0.3s;
}

footer .footer-social-box a h6:hover{
    transform: scale(1.1);
}

.background-section {
    position: relative;
    display: flex;
    width: 100%;
    height: 100vh; /* Adjust the height as needed */
    background-image: url('assets/images/5-1.jpg'); /* Replace with your image URL */
    background-size: cover;
    background-position: center;
    padding: 20px;
  }

  .background-section2 {
    position: relative;
    display: flex;
    width: 100%;
    height: 100vh; /* Adjust the height as needed */
    background-image: url('assets/images/6-1.jpg'); /* Replace with your image URL */
    background-size: cover;
    background-position: center;
    padding: 20px;
  }
  
  .overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to right, rgba(0, 0, 139, 0.5), transparent); /* Dark blue fading to transparent */
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
.overlay-text {
    position: absolute;
    color: #fff;
    text-align: center;
    font-size: 18px;
    letter-spacing: 2px;
    padding: 20px;
    z-index: 1;
  }

  .overlay-text2 {
    position: absolute;
    color: #fff;
    text-align: left;
    font-size: 16px;
    letter-spacing: 2px;
    padding: 20px;
    z-index: 1;
  }
  

  .overlay-text2 h2{
    font-family: "Quicksand", Sans-serif !important;
    text-transform: uppercase;
    font-size: 24px;
    color: #c99c59;
    font-weight: 600;
  }

  .ul-services ul{
    list-style-type: none;
    padding: 0;
    margin: 0;
  }

  .ul-services ul li{
    font-size: 18px;
    letter-spacing: 2px;
    display: inline-block;
    color: #d3a10c;
    font-weight: 600;
    text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.4);
  }

  .ul-services ul li:hover{
    color: #f2ece0;
    cursor: pointer;
  }

  .ul-services ul li span{
    color: #fff;
  }

  .ul-services h5{
    font-size: 24px;
  }
  

  .overlay-text2 a h3{
    color: #c99c59;
    font-size: 36px;
    font-weight: 600;
  }

  .overlay-text2 a h3:hover{
    color: #fff;
  }

  .overlay-text a h3{
    color: #c99c59;
    font-size: 40px;
    font-weight: 600;
  }

  .overlay-text a h3:hover{
    color: #fff;
  }

/* Flex container for the image boxes */
.image-boxes-container {
    display: flex;
    justify-content: space-between; /* Spaces evenly between the boxes */
    align-items: center; /* Center the boxes vertically */
    width: 100%;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }
  
  /* Each image box */
  .image-box {
    position: relative;
    flex: 1; /* Allow each box to grow equally */
    height: 200px; /* Set a fixed height or adjust as needed */
    border: 0;
    overflow: hidden;
    box-sizing: border-box; /* Include padding and border in the element's total width and height */
  }
  
  /* Front and back image styles */
  .image-front,
  .image-back {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transition: transform 0.5s ease;
  }
  
  .image-front img,
  .image-back img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  
  .image-back {
    transform: translateX(100%); /* Hide the back image initially */
  }
  
  .image-box:hover .image-front {
    transform: translateX(-100%); /* Slide out the front image */
  }
  
  .image-box:hover .image-back {
    transform: translateX(0); /* Slide in the back image */
  }
  
  /* Overlay styles */
  .overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.3); /* Dark transparent overlay */
    display: flex;
    align-items: center;
    justify-content: center;
    color: white; /* Text color */
    text-align: center;
    padding: 10px; /* Optional padding */
    box-sizing: border-box;
  }
  
  .image-text {
    font-size: 1.5rem; /* Adjust font size as needed */
    font-weight: bold; /* Optional bold text */
  }
  

  .welcome-content{
    display: block;
    text-align: center !important;
    align-items: center;
    padding: 20px;
  }

  .welcome-content h3{
    font-family: "Raleway", sans-serif;
    letter-spacing: 1px;
    color: #c99c59 !important;
    font-weight: 600;
    font-size: 2.667rem !important;
    text-align: center;
  }

  .welcome-content p{
    font-size: 18px !important;
    color: #fff;
    letter-spacing: 2px;
    line-height: 2rem;
  }

  .empty-space{
    margin-top: 0.8rem !important;
    height: 3.333rem;
  }

  .ul-services{
    display: inline;
  }

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

  .specialize-section h2{
    font-family: "Raleway", sans-serif !important;
    font-weight: 400;
    text-transform: uppercase;
    color: #c99c59;
  }

  .specialize-section p{
    letter-spacing: 2px;
    font-size: 16px;
    margin: 40px 0;
    color: #fff;
  }
  
  .link-container {
    position: relative;
    overflow: hidden;
    margin-bottom: 20px; /* Space between the items */
}

.image-link {
    display: block;
    text-decoration: none;
    color: inherit;
    position: relative;
}

.image-wrapper {
    position: relative;
    width: 100%;
    overflow: hidden;
}

.image {
    width: 100%;
    display: block;
}

.gradient-overlay2 {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 30%; /* Adjust the height for the fade effect */
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 100%);
}

.info-box {
    position: relative;
    width: 100%;
    background-color: #fff;
    padding: 10px;
    text-align: center;
    overflow: hidden;
}

.info-text {
    transition: transform 0.3s ease;
}

.info-text p{
    font-size: 18px;
    font-weight: 600;
    color: #110642 !important;
}


.more-info {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    text-align: center;
    transform: translateY(100%);
    transition: transform 0.3s ease;
}

.more-info p{
    font-size: 14px;
    display: inline-block;
    margin-top: 20px;
    padding: 5px 20px;
    background-color: #c99c59;
    color: #fff;
    text-align: center;
    border-radius: 10px;
}

.image-link:hover .info-text {
    transform: translateY(-20px); /* Move main text up */
}

.image-link:hover .more-info {
    transform: translateY(0); /* Bring "More Info" text in from the bottom */
}


/*======================= ABOUT US START=====================================*/
/* General Reset */
section .hero-section {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Hero Section Styles */
.hero-section {
    height: 60vh; /* Full viewport height */
    background-image: url('assets/images/background/chef5.jpg'); /* Replace with your hero image */
    background-size: cover;
    background-attachment: fixed; /* Parallax effect */
    background-position: center;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}

.hero-content {
    text-align: center;
    color: #fff;
}

.hero-title {
    font-family: "Raleway", sans-serif !important;
    font-size: 3rem;
    font-weight: bold;
}

.underline {
    width: 100px;
    height: 4px;
    background-color: #c99c59;
    margin: 20px auto;
}

.hero-subheading {
    font-size: 39px;
    margin-top: 10px;
    font-family: "Alex Brush", cursive;
    text-shadow: 2px 2px 5px rgba(0, 0, 139, 0.5);
}

.who-we-are{
    background-color: #fff !important;
    text-align: center;
    padding: 100px 0;
}

.who-we-are h2{
    font-family: "Raleway", sans-serif !important;
    text-transform: uppercase;
    font-size: 36px;
    line-height: 1.22em;
}

.who-we-are p.subtext{
    font-size: 39px;
    font-family: "Alex Brush", cursive;
    color: rgba(0, 0, 0, .6);
    line-height: 1em;
}

.know-wrapper{
    display: block;
    text-align: left !important;
}

.know-wrapper h5{
    text-transform: uppercase;
    font-size: 16px;
    letter-spacing: 2px;
}

.know-wrapper p{
    color: rgba(0, 0, 0, .6);
}

.know-wrapper img{
    width: 100%;
}


/* Two Boxes Section */
.two-boxes-section {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    display: flex;
    height: 80vh; /* Full viewport height */
}

.box {
    width: 50%;
    background-size: cover;
    background-position: center;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
}

/* Left Box (with content) */
.left-box {
    background-image: url('assets/images/background/about-background.jpg'); /* Replace with your left box image */
    color: white;
}

.box-content {
    padding: 20px;
}

.box-title {
    font-family: "Raleway", sans-serif !important;
    font-size: 36px;
    margin-bottom: 10px;
    text-transform: uppercase;
    letter-spacing: 3.5px;
}

.box-subtitle {
    font-family: "Alex Brush", cursive;
    font-size: 39px;
    margin-bottom: 20px;
    color: #f2ece0;
}

.box-paragraph {
    font-size: 1rem;
    margin-bottom: 30px;
    color: #fff;
    width: 500px;
    font-size: 16px !important;
    letter-spacing: 2px;
}

.box-button {
    padding: 10px 20px;
    background-color: #c99c59;
    border: none;
    color: black;
    cursor: pointer;
    font-size: 1rem;
    transition: background-color 1s ease;
}

.box-button:hover{
    background-color: #f2ece0;
}

/* Right Box (background image only) */
.right-box {
    background-image: url('assets/images/background/about-background2.jpg'); /* Replace with your right box image */
}

/* Modal Styles */
.modal2 {
    display: none; /* Hidden by default */
    position: fixed;
    z-index: 1;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5); /* Black background with opacity */
    justify-content: center;
    align-items: center;
    z-index: 1001;
    overflow: auto;
}

.modal-content2 {
    background-color: #c99c59 !important;
    color: #110642 !important;
    padding: 20px;
    border-radius: 10px;
    text-align: justify;
    width: 80%;
    max-width: 600px;
    text-transform: none;
    position: relative;
}

.signed{
    font-family: "Alex Brush", cursive;
    font-size: 24px;
    text-align: center;
}

.close {
    position: absolute;
    top: 10px;
    right: 20px;
    font-size: 1.5rem;
    cursor: pointer;
}

.special-moment{
    background-color: #fff !important;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    display: flex;
    height: 100vh; /* Full viewport height */
    background-size: cover;
    background-position: center;
    justify-content: center;
    align-items: center;
}

.special-image-box{
    overflow: hidden;
    width: 100%;
    height: auto; /* The container will adjust its height based on the content */
    position: relative;
}

.special-image-box img{
    width: 100%;
    height: auto; /* Maintains the aspect ratio */
    object-fit: cover;
    margin-top: 20px;
}

.special-content{
    padding: 50px;
}

.special-content h4{
    font-family: "Raleway", sans-serif !important;
    letter-spacing: 3.5px;
}

.special-text{
    font-family: "Raleway", sans-serif !important;
    letter-spacing: 3.5px;
    color: #c99c59;
    font-weight: 400;
}

/* Mobile View: Only the left box is visible */
@media (max-width: 768px) {
    .box {
        width: 100%;
    }

    .right-box {
        display: none;
    }
}


/*======================= ABOUT US END=====================================*/

/*======================= CONTACT US START ===============================*/
.contact-hero-section {
    height: 60vh; /* Full viewport height */
    background-image: url('assets/images/background/chef14.jpg'); /* Replace with your hero image */
    background-size: cover;
    background-attachment: fixed; /* Parallax effect */
    background-position: center;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}

.contact-hero-content {
    text-align: center;
    color: #fff;
    text-shadow: 2px 2px 5px rgba(0, 0, 139, 0.5);
}

.contact-hero-title {
    font-family: "Raleway", sans-serif !important;
    font-size: 3rem;
    font-weight: bold;
}

.contact-hero-subheading {
    font-size: 39px;
    margin-top: 10px;
    font-family: "Alex Brush", cursive;
    text-shadow: 2px 2px 5px rgba(0, 0, 139, 0.5);
}

.title-contact-section {
    position: relative;
    width: 100%;
    height: 60vh; /* Full viewport height */
    background-image: url('assets/images/background/chef6.jpg'); /* Replace with your image URL */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    display: flex;
    justify-content: center;
    align-items: center;
}

 /* Centered title text */
 .title-contact-title {
    color: white;
    font-size: 3em;
    text-align: center;
    text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.7);
}

/* Responsive font size */
@media (max-width: 768px) {
    .title-contact-title {
        font-size: 2em;
    }
}

@media (max-width: 480px) {
    .title-contact-title {
        font-size: 1.5em;
    }
}

/* Centered title text */
.contact-title {
    color: white;
    font-size: 3em;
    text-align: center;
    text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.7);
}

.top-contact-section{
    background-color: #fff !important;
    text-align: center;
    padding: 50px 0;
    display: flex;
    position: relative;
    width: 100%;
    height: 100vh; /* Full viewport height */
    display: flex;
    justify-content: center; /* Centers content horizontally */
    align-items: center; /* Centers content vertically */
}

.top-contact-section p{
    font-family: "Raleway", sans-serif !important;
    font-size: 16px;
    letter-spacing: 2px;
}

.contact-details{
    text-align: left !important;
    margin: 0 auto !important;
    background-color: #110642;
    max-width: 800px;
    padding: 20px;
}

.contact-details ul{
    font-family: "Raleway", sans-serif !important;
    font-size: 16px;
    letter-spacing: 2px;
    list-style-type: none;
}

.contact-details ul li{
    padding: 10px;
    color: #c99c59;
}

.contact-details ul li:hover{
    color: #fff;
}

.contact-details i{
    margin-right: 20px;
}

.contact-details ul li a{
    text-decoration: none;
    color: #c99c59;
    display: block;
}

.contact-details ul li a:hover{
    color: #fff;
}



/* Contact Section */
.contact-section {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    display: flex;
    width: 100vw; /* Full width of the viewport */
    height: auto; /* Let the section adapt to its content */
    min-height: 100vh; /* Ensure minimum full viewport height */
    flex-wrap: wrap; /* Allow wrapping in mobile view */
}

/* Left Half: Google Map */
.contact-map {
    flex: 1;
    height: auto; /* Full viewport height */
    width: 100%; /* Full width */
    position: relative; /* Ensure that the map fills its parent */
}

/* Ensure iframe fills the entire container */
.contact-map iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
}

/* Right Half: Contact Form */
.contact-form {
    flex: 1;
    background-color: #110642; /* Dark blue background */
    color: white; /* White text */
    padding: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.contact-form h2 {
    text-align: center;
    margin-bottom: 20px;
    font-family: "Alex Brush", cursive !important;
    font-size: 2em;
}

.contact-form form {
    width: 100%;
    max-width: 500px;
}

.form-group {
    margin-bottom: 20px;
}

.form-group input,
.form-group select,  /* Add select here */
.form-group textarea {
    width: 100%;
    background: transparent;
    border: none;
    border-bottom: 2px solid #c99c59; /* Only bottom border */
    padding: 10px;
    color: #c99c59;
    font-size: 16px;
    appearance: none; /* Removes default arrow from select in some browsers */
}

/* Style the select dropdown */
.form-group select {
    background-color: #110642; /* Dark blue background */
    color: #c99c59; /* White text */
    border-bottom: 2px solid #c99c59; /* Bottom border */
    padding: 10px;
    font-size: 16px;
    cursor: pointer;
    appearance: none; /* Removes the default browser appearance for the dropdown */
    -webkit-appearance: none;
    -moz-appearance: none;
    position: relative;
}

/* Custom dropdown arrow */
.form-group select::after {
    content: '\25BC'; /* Unicode character for the downward arrow */
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none; /* Prevent interaction with the arrow */
    color: white;
}

/* Style when the select dropdown is focused */
.form-group select:focus {
    outline: none;
    border-bottom: 2px solid #f0c14b; /* Highlight the bottom border on focus */
}

.form-group input:focus,
.form-group select:focus,  /* Add select here */
.form-group textarea:focus {
    outline: none;
    border-bottom: 2px solid #fff; /* Optional: Highlight bottom border on focus */
}

button {
    background-color: #c99c59;
    color: #003366;
    border: none;
    padding: 10px 20px;
    cursor: pointer;
    font-size: 16px;
    width: 100%;
}

button:hover {
    background-color: #d3a10c;
}

/* Mobile View */
@media (max-width: 768px) {
    .contact-section {
        flex-direction: column; /* Stack the sections vertically */
        height: auto; /* Let the section adapt to its content */
        min-height: auto; /* Remove minimum height for mobile */
    }

    .contact-form {
        order: 1; /* Form comes first */
        padding: 20px;
        height: auto; /* Allow content to determine height */
    }

    .contact-map {
        margin-top: 50px;
        order: 2; /* Map comes second */
        height: 100vh; /* Ensure the map takes 50% of the viewport height */
        min-height: 600px; /* Ensure a minimum height for the map */
    }

    /* Ensure iframe fills the container */
    .contact-map iframe {
        width: 100%;
        height: 100%; /* Allow iframe to expand with the map container */
        border: none;
    }
}



/*======================= CONTACT US END =================================*/

/*======================= OUR FOOD START =================================*/

.food-contact-section {
    position: relative;
    width: 100%;
    height: 60vh; /* Full viewport height */
    background-image: url('assets/images/background/chef8.jpg'); /* Replace with your image URL */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    display: flex;
    justify-content: center;
    align-items: center;
}

 /* Centered title text */
 .food-contact-title {
    color: white;
    font-size: 3em;
    text-align: center;
    text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.7);
}

.food-top-section {
    padding: 50px 0;
    font-family: "Raleway", sans-serif !important;
    text-align: center;
    background-color: #fff !important;

}

.food-top-section p{
    letter-spacing: 1px;
    font-size: 16px;
    text-align: justify;
}

/* Responsive font size */
@media (max-width: 768px) {
    .food-contact-title {
        font-size: 2em;
    }

    .food-top-section{
        padding: 30px;
    }
}

@media (max-width: 480px) {
    .food-contact-title {
        font-size: 1.5em;
    }

    .food-top-section{
        padding: 30px;
    }
}

.parallax-section {
    position: relative;
    background-image: url('assets/images/background/chef9.jpg'); /* Replace with your image URL */
    min-height: 100vh;
    height: 100%;
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.parallax-section2 {
    position: relative;
    background-image: url('assets/images/5-1.jpg'); /* Replace with your image URL */
    min-height: 100vh;
    height: 100%;
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

/* Content inside the parallax section */
.parallax-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    color: white;
    max-width: 800px; /* Set the maximum width of the content */
    width: 90%; /* Ensure it adapts to smaller screens */
    margin: 0 auto; /* Center the content horizontally */
}

.parallax-content p{
    font-family: "Raleway", sans-serif !important;
    letter-spacing: 2px;
    font-size: 16px;
    line-height: 1.5em;
}



/* Title styling */
.parallax-title {
    font-size: 3em;
    text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.7);
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .parallax-title {
        font-size: 2em;
    }

    .parallax-content h2 {
        font-size: 24px !important;
    }
}

@media (max-width: 480px) {
    .parallax-title {
        font-size: 1.5em;
    }

    .parallax-content h2 {
        font-size: 24px !important;
    }
}


.food-services{
    background-color: #fff !important;
}

.food-services-wrapper{
    padding: 30px;
    text-align: center;
}

 /* General styling for the container */
 .scroll-list {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px;
}

/* List items styling */
.scroll-list li {
    list-style-type: none;
    margin: 0 20px;
    padding: 10px;
    cursor: pointer;
    position: relative;
    z-index: 1;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
}

/* Gold vertical line between list items */
.scroll-list li:not(:last-child)::after {
    content: '';
    width: 2px;
    height: 100%; /* Slightly higher and lower than the list items */
    background-color: #c99c59;
    position: absolute;
    right: -80px; /* Adjust this to control space between the items and line */
    top: -10%;
}

/* Link styling */
.scroll-list a {
    text-decoration: none;
    color: black;
    font-size: 1.2em;
    transition: all 0.3s ease;
}

/* Hover effect */
.scroll-list li:hover a {
    color: #c99c59;
    font-size: 1.25em;
}

/* Media query for mobile view */
@media (max-width: 768px) {
    .scroll-list {
        flex-direction: column;
    }

    /* Gold underline for list items in mobile view */
    .scroll-list li::after {
        display: none;
    }

    .scroll-list li {
        margin: 10px 0;
        border-bottom: 2px solid #c99c59;
    }
}

/* Section content styling for demonstration */
section {
    padding: 20px;
    height: 50%;
    /*border-bottom: 1px solid #ccc;*/
}

.buffet{
    text-align: center !important;
    color: #fff;
}

.buffet p{
    font-family: "Raleway", sans-serif !important;
    font-size: 16px;
    letter-spacing: 1px;
    line-height: 2em;
}

.family-style-bowl{
    text-align: center !important;
}

.family-style-bowl p{
    font-family: "Raleway", sans-serif !important;
    font-size: 16px;
    letter-spacing: 1px;
    line-height: 2em;
}

/*====================UNIQE IMAGE SECTION=================================*/

.unique-image-section {
    padding: 0;
}

.unique-image-container {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    gap: 5px 20px; /* Equal space on all sides between images */
}

.unique-image-box {
    flex: 1 0 calc(50% - 20px); /* Two images per row with equal margins */
    height: 300px; /* Adjust as needed */
    background-size: cover;
    background-position: center;
    position: relative;
    transition: filter 0.3s;
    margin-bottom: 20px; /* Space between rows */
}

.unique-image-box:hover {
    filter: brightness(0.7); /* Darken the image on hover */
    cursor: pointer;
}

.unique-title {
    font-family: "Raleway", sans-serif !important;
    letter-spacing: 2px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #fff;
    text-shadow: 2px 2px 3px rgba(0, 0, 0, 0.8);
    font-size: 1.5rem;
    text-align: center;
    text-transform: uppercase;
    font-weight: bold;
}

/* Modal styling */
.unique-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8);
    justify-content: center;
    align-items: center;
    z-index: 1001;
}

.unique-modal-content {
    background-color: #c99c59;
    padding: 20px;
    border-radius: 8px;
    width: 90%;
    max-width: 500px;
    position: relative;
    text-align: center;
}

.unique-modal-close {
    position: absolute;
    top: 10px;
    right: 10px;
    font-size: 2rem;
    color: #333;
    cursor: pointer;
}

.emptyspace{
    width: 100%;
    height: 50px;
}

.emptyspace2{
    width: 100%;
    height: 30px;
}

@media (max-width: 768px) {
    .unique-image-box {
        flex: 1 0 100%; /* Stack images vertically */
        margin-bottom: 20px; /* Space between images */
    }

    .unique-modal-content {
        width: 100%;
        height: 100%;
        border-radius: 0;
    }

    .emptyspace{
        width: 100%;
        height: 20px;
    }

    .emptyspace2{
        display: none;
    }
}

/*======================= OUR FOOD END ===================================*/

/*======================= WEDDINGS AND EVENTS START ======================*/

.wedding-section {
    position: relative;
    width: 100%;
    height: 60vh; /* Full viewport height */
    background-image: url('assets/images/background/chef10.jpg'); /* Replace with your image URL */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    display: flex;
    justify-content: center;
    align-items: center;
}

 /* Centered title text */
 .wedding-title {
    color: white;
    font-size: 3em;
    text-align: center;
    text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.7);
}

.wedding-top-section {
    padding: 50px 0;
    font-family: "Raleway", sans-serif !important;
    text-align: center;
    background-color: #fff !important;

}

.wedding-top-section p{
    font-family: "Raleway", sans-serif !important;
    letter-spacing: 1px;
    font-size: 18px;
    text-align: center;
}

/* Responsive font size */
@media (max-width: 768px) {
    .wedding-title {
        font-size: 2em;
    }

    .corporate-title {
        font-size: 2em;
    }

    .wedding-top-section{
        padding: 30px 0;
    }

    .wedding-top-section h2{
        font-size: 24px !important;
        font-weight: 600px;
    }
}

@media (max-width: 480px) {
    .wedding-title {
        font-size: 1.5em;
    }

    .corporate-title {
        font-size: 1.5em;
    }

    .wedding-top-section{
        padding: 30px;
    }

    .wedding-top-section h2{
        font-size: 24px !important;
        font-weight: 600px;
    }
}

.wedding-parallax-section {
    position: relative;
    background-image: url('assets/images/background/chef11.jpg'); /* Replace with your image URL */
    min-height: 100vh;
    height: 100%;
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    display: flex;
    justify-content: center;
    align-items: center;
}

.zeas-offerings {
    background-color: #110642;
    padding: 30px;
    margin: 50px 0;
}

.zeas-offerings h4{
    font-family: "Raleway", sans-serif !important;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 2px;
    line-height: 1.5em;
    font-size: 20px;
    color: #c99c59;
}

.zeas-offerings ul{
    list-style-type: none;
    text-align: center;
    margin: 0;
    padding: 0;
}

.zeas-offerings ul li{    
    font-size: 34px;
    padding: 15px;
}

.zeas-offerings ul li a{
    font-family: "Alex Brush", cursive !important;
    letter-spacing: 3.5px;
    text-decoration: underline;
    text-decoration-color: #c99c59; /* Optional, if you want to change the color of the underline */
    text-underline-offset: 15px;
    text-decoration-thickness: 1px; /* Adjust the thickness of the underline */
    display: block;
    color: #fff;
    transition: all 0.3s ease;
}

.zeas-offerings ul li a:hover{
    color: #c99c59;
    font-size: 38px;
}

.wedding-bottom-section{
    background-color: #fff !important;
    text-align: center;
}

.wedding-bottom-section h4{
    font-family: "Raleway", sans-serif !important;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 2px;
    line-height: 1.5em;
    font-size: 20px;
}

.wedding-bottom-section p{
    font-family: "Raleway", sans-serif !important;
    font-size: 17px;
    letter-spacing: 1px;
    line-height: 1.5em;
}

.wedding-bottom-content{
    padding: 0 50px;
}

/*Image Gallery*/
.custom-img-container img {
    width: 100%;
    transition: 0.3s ease;
}

.custom-img-container img:hover {
    filter: brightness(0.7);
}

/* Custom Modal Styles */
.custom-modal-content {
    background: none;
    border: none;
}

.custom-gallery-arrows {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    font-size: 30px;
    color: white;
    cursor: pointer;
    z-index: 10;
}

.custom-prev-arrow {
    left: 20px;
}

.custom-next-arrow {
    right: 20px;
}

/* Responsive Image - Make image fill the modal responsively */
.custom-gallery-image {
    width: 100%;
    height: auto;
    max-height: 90vh; /* Ensure the image doesn't exceed 90% of the viewport height */
    object-fit: cover; /* Ensure the image covers the modal without distortion */
}

/* Modal should fill the screen */
.modal-dialog {
    max-width: 100%;
    margin: 0;
}

.modal-content {
    height: auto;
    border: none;
}

.modal-body {
    padding: 0;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

@media (max-width: 768px) {
    .custom-gallery-arrows {
        font-size: 24px;
    }
}

/*======================= WEDDINGS AND EVENTS END ======================*/

/*====================== CORPORATE START ===============================*/

.corporate-section {
    position: relative;
    width: 100%;
    height: 60vh; /* Full viewport height */
    background-image: url('assets/images/background/chef12.jpg'); /* Replace with your image URL */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Centered title text */
.corporate-title {
    color: white;
    font-size: 3em;
    text-align: center;
    text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.7);
}

/*====================== CORPORATE END =================================*/

/*====================== TESTIMONIALS START ============================*/

.testimonials-section {
    position: relative;
    width: 100%;
    height: 60vh; /* Full viewport height */
    background-image: url('assets/images/background/chef13.jpg'); /* Replace with your image URL */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Centered title text */
.testimonials-title {
    color: white;
    font-size: 3em;
    text-align: center;
    text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.7);
}

.testimonials1 {
    text-align: center;
}

.testimonials-wrapper h2{
    font-family: "Raleway", sans-serif !important;
    text-transform: uppercase;
    color: #c99c59;
    font-size: 32px;
}

.testimonials-wrapper h6{
    font-family: "Raleway", sans-serif !important;
    color: #c99c59;
    letter-spacing: 2px;
    font-size: 18px;
}
.testimonials-wrapper p {
    font-family: "Raleway", sans-serif !important;
    letter-spacing: 1px;
    color: #fff;
    font-size: 18px;
}

.testimonial-provider{
    font-size: 20px;
    text-transform: capitalize;
    color: #c99c59;
}

.testimonials2 {
    text-align: center;
    background-color: #fff !important;
}

.testimonials-wrapper2 h2{
    font-family: "Raleway", sans-serif !important;
    text-transform: uppercase;
    font-size: 32px;
}

.testimonials-wrapper2 h6{
    font-family: "Raleway", sans-serif !important;
    color: #222222;
    letter-spacing: 2px;
    font-size: 18px;
}
.testimonials-wrapper2 p {
    font-family: "Raleway", sans-serif !important;
    letter-spacing: 1px;
    color: #110642;
    font-size: 18px;
}

.testimonial-provider2{
    font-size: 20px;
    text-transform: capitalize;
    color: #222222;
}


/*====================== TESTIMONIALS END ==============================*/


/*====================== VENUES START ==================================*/

.venues-image-container {
    padding: 0; /* Removes default padding */
    position: relative;
  }
  
  .venues-image-wrapper {
    width: 100%;
    height: 100%;
    overflow: hidden;
  }
  
  .venues-image-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: all 0.3s ease;
  }
  
  .venues-image-wrapper:hover img {
    filter: brightness(50%); /* Darkens the image on hover */
  }
  
  /* Removes spacing between the images */
  .no-gutters {
    margin-right: 0;
    margin-left: 0;
  }
  
  .row.no-gutters [class*='col-'] {
    padding-right: 0;
    padding-left: 0;
  }

  /*===================== VENUES END ================================*/
  
  .buffet-service {
    background-color: #fff !important;
    text-align: center;
  }

  .menu-list {
    background-color: #fff !important;
    text-align: center;
  }

  .menu-list ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
  }

  .menu-list ul li {
    font-family: "Raleway", sans-serif !important;
    font-size: 18px;
    display: inline-block;
  }

  .menu-list ul li a {
    border-right: solid 1px #c99c59;
    padding: 0 30px;
    color: #212530;
    text-decoration: none;
    transition: color ease 0.3s;
  }

  .menu-list ul li a:hover{
    border-bottom: solid 1px #c99c59;
    padding-bottom: 3px;
    color: #c99c59;
  }

  .menu-active {
    border-bottom: solid 1px #c99c59;
  }

  /* Responsive Styles */

  @media (max-width: 768px) {
    .menu-list ul li {
        display: block;
        margin-top: 20px;
    }

    .menu-list ul li a{
        border: 0;
    }
  }

  


/* Responsive Styles */
@media (max-width: 768px) {
    .nav-container {
        flex-direction: column; /* Stack items vertically */
        align-items: center; /* Center items horizontally */
    }

    .nav-links {
        display: none; /* Hide main menu items */
    }

    .hamburger {
        display: flex;
        justify-content: center;
        margin-top: 10px; /* Add spacing between logo and hamburger menu */
    }
    
    .hero-container{
        padding: 15px 10px;
    }

    .hero-video {
        width: 100%; /* Ensure the video fills the width of the screen */
        object-fit: contain; /* Makes sure the video fits within the container */
        height: auto;
    }

    .gradient-overlay {
        display: none; /* Hide the gradient overlay on screens smaller than 768px */
    }
    
    .logo-container{
        display: none;
    }

    section h2{
        font-size: 35px;
    }

    section a h3{
        font-size: 24px;
    }

    .social-box h3{
        font-size: 16px;
    }

    .social-box ul li{
        margin: 10px;
    }

    .social-box ul li a{
        font-size: 20px;
    }

    footer .footer-social-box{
        border: 0;
    }
    .image-box{
        width: 100%;
        height: 15vh;
    }
    .specialize-section h2{
        font-size: 24px;
    }
    .specialize-section p{
        font-size: 14px;
    }

    .specialize-section a{
        text-decoration: none;
    }
    .white-box{
        background-color: #fff !important;
        padding: 30px;
    }  

    .overlay-text2 h2{
        font-size: 18px;
        text-shadow: 2px 2px 5px rgba(0, 0, 139, 0.7);
    }

    .overlay-text2 p{
        font-size: 14px;
    }

    .explore-box{
        padding: 15px 10px;
    }

    .explore-box h4{
        font-size: 18px;
    }

    .explore-box p{
        font-size: 14px;
    }
    
    footer h3{
        font-size: 18px;
    }

    .empty-space{
        margin: 0 !important;
        height: 2em;
      }

      .welcome-content h3{
        font-size: 24px;
      }

      .testimonials-title{
        font-size: 1.5em;
      }

      .ul-services ul li{
        font-size: 16px;
        display: block;
      }

      .ul-services ul li span{
        display: none;
      }

    /*================ABOUT===============*/
    .hero-title {
        font-size: 2.5rem;
    }

    .hero-subheading {
        font-size: 2rem;
    }

    .hero-section {
        background-attachment: scroll; /* Disable parallax effect on mobile */
        background-size: contain; /* Ensure the entire image fits inside the container */
        height: auto; /* Adjust height based on content */
        min-height: 100vh; /* Ensure it still takes up full height */
        background-repeat: no-repeat; /* Prevents the image from repeating */
        background-size: cover; /* Ensures the image covers the entire section */
        background-position: center; /* Centers the image */
    }

    .box-paragraph{
        width:100%;
    }

    .modal-content2 {
        width: 100%;
        height: 100%; /* Make modal content fill the screen */
        border-radius: 0; /* Remove border-radius to cover entire screen */
        max-width: none;
        padding: 20px;
        box-sizing: border-box;
        overflow-y: auto; /* Allow scrolling within the modal content */
    }

    /* Adjust close button positioning in mobile view */
    .close {
        font-size: 2rem;
        top: 15px;
        right: 25px;
    }

    .know-wrapper{
        margin-top: 20px;
    }

    .who-we-are p.subtext{
        font-size: 32px;
    }
    /*==============ABOUT END==============*/

    .testimonials-wrapper h2{
        font-size: 20px;
    }

    .testimonials-wrapper2 h2{
        font-size: 20px;
    }

    .wedding-bottom-section{
        padding: 0;
    }
}

@media (max-width: 1200px){
    .logo-container {
        position: absolute;
        bottom: 500px; /* Position container from the bottom of the video */
        right: 300px;  /* Position container from the right of the video */
    }
}

@media (max-width: 1024px){
    .logo-container {
        display: none;
    }
}