.home-footer {
  flex: 0 0 auto;
  width: 100%;
  height: 2px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background-color: var(--dl-color-gray-black);
  bottom: 0;
}

.home-footer1 {
  height: 6px;
  bottom: 0;
  left: 0;
  position: relative;
  background-color: #f8f8f8;
  width: 100%;
  display: flex;
  max-width: var(--dl-size-size-maxwidth);
  align-items: center;
  padding-top: var(--dl-space-space-fourunits);
  padding-left: var(--dl-space-space-threeunits);
  padding-right: var(--dl-space-space-threeunits);
  flex-direction: column;
  padding-bottom: var(--dl-space-space-fourunits);
  justify-content: space-between;
}

.home-icon-group1 {
  display: flex;
  align-items: center;
  flex-direction: row;
  justify-content: space-between;
}
.home-icon10 {
  fill: var(--dl-color-secondary-gray500);
  width: 24px;
  height: 24px;
  margin-right: var(--dl-space-space-twounits);
}
.home-icon12 {
  fill: var(--dl-color-secondary-gray500);
  width: 24px;
  height: 24px;
  margin-right: var(--dl-space-space-twounits);
}
.home-icon14 {
  fill: var(--dl-color-secondary-gray500);
  width: 24px;
  height: 24px;
}
.home-container {
  width: 100%;
  display: flex;
  overflow: auto;
  min-height: calc(100vh - 180px); /* Subtract the header height from the full viewport height */
  align-items: center;
  flex-direction: column;
}

.home-header {
  width: 100%;
  height: 130px;
  display: flex;
  align-items: center;
  padding-top: var(--dl-space-space-oneandhalfunits);
  flex-direction: column;
  padding-bottom: var(--dl-space-space-oneandhalfunits);
  background-color: var(--dl-color-primary1-blue80);
  z-index: 1000;
}
.home-navbar-interactive {
  height: 50px;
  width: 90%;
  display: flex;
  position: relative;
  max-width: var(--dl-size-size-maxwidth);
  align-items: center;
  padding-top:  var(--dl-space-space-oneandhalfunits);
  padding-left: var(--dl-space-space-threeunits);
  border-radius: 50px;
  padding-right: var(--dl-space-space-threeunits);
  padding-bottom: 8px var(--dl-space-space-oneandhalfunits);
  justify-content: space-between;
  background-color: var(--dl-color-gray-white);
   z-index: 1001;
}
.home-logo {
  font-size: 2em;
  font-family: "Lato";
  font-weight: bold;
  text-transform: uppercase;
}
.home-desktop-menu {
  flex: 1;
  display: flex;
  justify-content: space-between;
}
.home-links {
  flex: 1;
  display: flex;
  align-items: center;
  flex-direction: row;
  justify-content: center;
}

.home-mobile-menu {
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100vh;
  display: none;
  padding: 32px;
  z-index: 100;
  position: absolute;
  border-radius: 50px;
  flex-direction: column;
  justify-content: space-between;
  background-color: var(--dl-color-gray-white);
}
.home-nav {
  display: flex;
  align-items: flex-start;
  flex-direction: column;
}
.home-top {
  width: 100%;
  display: flex;
  align-items: center;
  margin-bottom: var(--dl-space-space-threeunits);
  justify-content: space-between;
}
.home-logo1 {
  font-size: 2em;
  font-weight: bold;
}
.home-close-menu {
  display: flex;
  align-items: center;
  justify-content: center;
}
.home-icon02 {
  fill: var(--dl-color-gray-900);
  width: var(--dl-size-size-xsmall);
  cursor: pointer;
  height: var(--dl-size-size-xsmall);
}
.home-links1 {
  flex: 0 0 auto;
  display: flex;
  align-self: flex-start;
  align-items: flex-start;
  flex-direction: column;
}





:root {
  --dl-color-gray-500: #595959;
  --dl-color-gray-700: #999999;
  --dl-color-gray-800: #595959;
  --dl-color-gray-900: #D9D9D9;
  --dl-size-size-large: 144px;
  --dl-size-size-small: 48px;
  --dl-color-danger-300: #A22020;
  --dl-color-danger-500: #BF2626;
  --dl-color-danger-700: #E14747;
  --dl-color-gray-black: #000000;
  --dl-color-gray-white: #FFFFFF;
  --dl-size-size-medium: 96px;
  --dl-size-size-xlarge: 192px;
  --dl-size-size-xsmall: 16px;
  --dl-space-space-unit: 16px;
  --dl-color-primary-100: #003EB3;
  --dl-color-primary-300: #0074F0;
  --dl-color-primary-500: #14A9FF;
  --dl-color-primary-700: #85DCFF;
  --dl-color-success-300: #199033;
  --dl-color-success-500: #32A94C;
  --dl-color-success-700: #4CC366;
  --dl-size-size-xxlarge: 288px;
  --dl-size-size-maxwidth: 1400px;
  --dl-radius-radius-round: 50%;
  --dl-space-space-halfunit: 8px;
  --dl-space-space-sixunits: 96px;
  --dl-space-space-twounits: 32px;
  --dl-color-primary1-blue80: #5228f5ff;
  --dl-radius-radius-radius2: 2px;
  --dl-radius-radius-radius4: 4px;
  --dl-radius-radius-radius8: 8px;
  --dl-space-space-fiveunits: 80px;
  --dl-space-space-fourunits: 64px;
  --dl-color-primary1-blue100: #291477ff;
  --dl-space-space-threeunits: 48px;
  --dl-color-secondary-gray500: #d9d9d9ff;
  --dl-color-secondary-grey400: #eff0f2ff;
  --dl-space-space-oneandhalfunits: 24px;
}
.button {
  color: var(--dl-color-gray-black);
  display: inline-block;
  padding: 0.5rem 1rem;
  border-color: var(--dl-color-gray-black);
  border-width: 1px;
  border-radius: 4px;
  background-color: var(--dl-color-gray-white);
}
.input {
  color: var(--dl-color-gray-black);
  cursor: auto;
  padding: 0.5rem 1rem;
  border-color: var(--dl-color-gray-black);
  border-width: 1px;
  border-radius: 4px;
  background-color: var(--dl-color-gray-white);
}
.textarea {
  color: var(--dl-color-gray-black);
  cursor: auto;
  padding: 0.5rem;
  border-color: var(--dl-color-gray-black);
  border-width: 1px;
  border-radius: 4px;
  background-color: var(--dl-color-gray-white);
}

/* Logo styles */
.logo img {
        max-width: 45px; /* Adjust logo size for larger screens */
        height: auto;
    }
}
.home-buttons {
  display: flex;
  align-items: center;
  flex-direction: row;
  justify-content: space-between;
}
.home-login {
  border-color: var(--dl-color-primary1-blue100);
  border-width: 1px;
  margin-right: var(--dl-space-space-twounits);
  padding-left: 1.5rem;
  border-radius: 45px;
  padding-right: 1.5rem;
}
.home-register {
  color: var(--dl-color-gray-white);
  transition: 0.3s;
  font-weight: bold;
  border-color: var(--dl-color-primary1-blue100);
  padding-left: 1.5rem;
  border-radius: 45px;
  padding-right: 1.5rem;
  background-color: var(--dl-color-primary1-blue100);
}
.home-register:hover {
  border-color: rgba(41, 20, 119, 0.9);
  padding-left: 1.5rem;
  padding-right: 1.5rem;
  background-color: rgba(41, 20, 119, 0.9);
}
.home-burger-menu {
  display: none;
}
.home-icon {
  width: var(--dl-size-size-xsmall);
  cursor: pointer;
  height: var(--dl-size-size-xsmall);
}
.home-mobile-menu {
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100vh;
  display: none;
  padding: 32px;
  z-index: 100;
  position: absolute;
  border-radius: 50px;
  flex-direction: column;
  justify-content: space-between;
  background-color: var(--dl-color-gray-white);
}
.home-nav {
  display: flex;
  align-items: flex-start;
  flex-direction: column;
}
.home-top {
  width: 100%;
  display: flex;
  align-items: center;
  margin-bottom: var(--dl-space-space-threeunits);
  justify-content: space-between;
}
.home-logo1 {
  font-size: 2em;
  font-weight: bold;
}
.home-close-menu {
  display: flex;
  align-items: center;
  justify-content: center;
}
.home-icon02 {
  fill: var(--dl-color-gray-900);
  width: var(--dl-size-size-xsmall);
  cursor: pointer;
  height: var(--dl-size-size-xsmall);
}
.home-links1 {
  flex: 0 0 auto;
  display: flex;
  align-self: flex-start;
  align-items: flex-start;
  flex-direction: column;
}
.home-nav11 {
  color: var(--dl-color-gray-black);
  margin-bottom: var(--dl-space-space-unit);
}
.home-nav21 {
  color: var(--dl-color-gray-black);
  margin-bottom: var(--dl-space-space-unit);
}
.home-nav31 {
  color: var(--dl-color-gray-black);
  margin-bottom: var(--dl-space-space-unit);
}
.home-nav41 {
  color: var(--dl-color-gray-black);
  margin-bottom: var(--dl-space-space-unit);
}
.home-nav51 {
  color: var(--dl-color-gray-black);
  margin-bottom: var(--dl-space-space-unit);
}
.home-buttons1 {
  display: flex;
  margin-top: var(--dl-space-space-unit);
  align-items: center;
  flex-direction: row;
  justify-content: space-between;
}
.home-login1 {
color: var(--dl-color-gray-white);
  transition: 0.3s;
  border-color: var(--dl-color-primary1-blue100);
  border-width: 1px;
  margin-right: var(--dl-space-space-twounits);
  padding-left: 1.5rem;
  border-radius: 30px;
  padding-right: 1.5rem;
}
.home-register1 {
  color: var(--dl-color-gray-white);
  transition: 0.3s;
  border-color: var(--dl-color-primary1-blue100);
  border-width: 1px;
  padding-left: 1.5rem;
  border-radius: 30px;
  padding-right: 1.5rem;
  background-color: var(--dl-color-primary1-blue100);
}
.home-register1:hover {
  border-color: #849492ff;
  background-color: #849492ff;
}
}

/* Container for the entire form */
.forms-container {
    width: 100%;
    max-width: 1900px;
    margin: 0 auto;
    padding: 20px;
}
/**/

.card-row {
    flex: 1;
    height: auto; /* Use auto for dynamic height based on content */
    width: 900px;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start; /* Adjust spacing between cards horizontally */
    align-items: flex-start; /* Align cards to start of the container */
    margin-bottom: 1px; /* Adjust spacing between rows */
}
/* Styles for the pop-up container */
.pop-up {
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 9999;
    background-color: #fff;
    border: 1px solid #ccc;
    padding: 20px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

/* Styles for the close button */
.close-btn {
    position: absolute;
    top: 5px;
    right: 5px;
    cursor: pointer;
}


/* Hover effect for the card */
.card:hover {
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    transition: box-shadow 0.3s ease;
}
/* For responsiveness: Adjust width for smaller screens */
@media screen and (max-width: 768px) {
    .card-row {
        width: calc(50% - 20px);
    }
}

/* For responsiveness: Adjust width for even smaller screens */
@media screen and (max-width: 480px) {
    .card-row {
        width: 100%;
    }
}
.containerw {
  width: 100%;
  display: flex;
  padding: var(--dl-space-space-twounits);
  position: fixed;
  align-items: flex-start;
  border-radius: var(--dl-radius-radius-radius8);

  flex-direction: row;
  justify-content: flex-start;
  background-color: var(--dl-color-gray-white);
    width: 300px;
    margin: 0 auto;
    padding: 20px;
    border: 1px solid #ccc;
    border-radius: 8px;
    background-color: #fff;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    flex-wrap: wrap;
    gap: 20px; /* Adjust the gap between cards */
    justify-content: space-between; /* Optional: Adjust alignment */
     width: calc(25% - 20px);
}
.containers {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  gap: 2px; /* Adjust the gap between cards */
  padding: var(--dl-space-space-twounits);
  border: 1px solid #ccc;
  border-radius: 8px;
  background-color: #fff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.container {
    display: flex; /* Set the display to flex */
    justify-content: flex-start; /* Align items at the start */
    width: 100%;
    max-height: calc(100vh - 100px); /* Adjust as needed based on header height */
    overflow-y: auto;
    padding: 20px;
    border: 1px solid #ccc;
    border-radius: 8px;
    background-color: #fff;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}


}
/* Search bar section */
#search-results {
    margin-top: 20px; /* Adjust margin as needed */
    margin-bottom: 20px;
}

#search-results form {
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: 600px; /* Adjust as per design */
    margin: 0 auto;
}

#search-results label {
    margin-right: 10px; /* Adjust spacing between labels and inputs */
}

#search-results input[type="text"],
#search-results input[type="number"],
#search-results button {
    padding: 8px;
    border: 1px solid #ccc;
    border-radius: 3px;
    box-sizing: border-box;
    /* Additional styles as needed */
}
/* This assumes you want to style the search-results div with Material-UI classes */


#search-results {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); /* Auto-adjust based on card width */
  gap: 20px;
  padding: 20px;
}

/* You can add more specific styling for elements inside search-results if needed */
#search-results ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

#search-results li {
  /* Define individual card styles */
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Additional styles for the content within the cards */
#search-results li h3 {
  margin-top: 0;
  font-size: 18px;
  /* Adjust other heading styles as needed */
}

#search-results li p {
  margin: 5px 0;
  /* Adjust paragraph styles as needed */
}
/* Location container section */
.location-container {
    width: 100%;
    display: flex;
    padding: var(--dl-space-space-twounits);
    position: relative;
    align-items: flex-start;
    border-radius: var(--dl-radius-radius-radius8);
    flex-direction: row;
    justify-content: flex-start;
    background-color: var(--dl-color-gray-white);
    /* Additional styles as needed */
}

.location-link {
    text-decoration: none;
    color: #333;
}

.container img {
    width: 100%;
    height: auto;
    border-radius: 5px;
    /* Additional styles as needed */
}

.sectionTitle {
    margin-top: 10px;
    /* Additional styles as needed */
}

.sectionTitle h2 {
    font-size: 1.2em;
    margin-bottom: 5px;
    /* Additional styles as needed */
}

.sectionTitle p {
    margin: 5px 0;
    /* Additional styles as needed */
}

.sectionTitle h3 {
    font-size: 1em;
    margin-top: 10px;
    /* Additional styles as needed */
}


.containerxv {
    /* Ensure it takes available space and leaves 5cm allowance on the right */
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative;
    /* Subtract 5cm from 100% width to leave a 5cm allowance on the right */
    width: calc(100% - 6cm); /* Adjust based on your requirement */
    top: 25px;
    /* Other styles */
    /* ... */
}

/* Styles for the MUI grid and card rows */
.MuiGrid-root.jss2 {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    padding: 20px;
    /* Other styles */
    /* ... */
}
.cardq {
    width: calc(33.33% - 20px); /* Adjust card width with margins */
    margin: 5px; /* Reduced margin to create 1cm space between cards */
    border: 1px solid #ccc; /* Add a border for separation */
    border-radius: 8px; /* Add rounded corners */
    overflow: hidden; /* Hide overflow content */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Add shadow for elevation */
}

.card {
    width: auto; /* Adjust card width */
    margin: 0.05cm; /* Set margin to create 1cm space between cards */
    border: 1px solid #ccc; /* Add a border for separation */
    border-radius: 8px; /* Add rounded corners */
    overflow: hidden; /* Hide overflow content */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Add shadow for elevation */
}

/* Styles for the image within the card */
.gallery-card3-image {
    width: 100%;
    height: 205px;
    border-radius: 8px 8px 0 0; /* Rounded top corners */
    /* Other image styles */
    /* ... */
}

/* Styles for the information section within the card */
.location-info {
    padding: 10px;
    /* Other styles for information section */
    /* ... */
}

/* Style the heading inside the information section */
.location-info h2 {
    font-size: 1.5rem;
    margin-bottom: 5px;
    /* Other heading styles */
    /* ... */
}

/* Style other paragraphs or content inside the information section */
.location-info p {
    margin-bottom: 5px;
    /* Other paragraph styles */
    /* ... */
}

/* Media query for mobile phones */
@media (max-width: 768px) {
    .MuiGrid-root,
    .MuiGrid-item,
    .MuiPaper-root,
    .MuiGrid-container,
    .MuiGrid-spacing-xs-2,
    .MuiGrid-grid-xs-12,
    .MuiGrid-grid-sm-6,
    .MuiGrid-grid-lg-3,
    .MuiGrid-grid-xl-3,
    .MuiGrid-direction-xs-column,
    .MuiGrid-align-items-xs-center,
    .MuiGrid-justify-content-xs-space-between,
    .MuiGrid-zeroMinWidth,
    .MuiGrid-grid-xs-true,
    .card-row {
        /* Adjust styles for mobile phones */
        width: 100%; /* Full width for mobile screens */
        margin: 5px; /* Adjust margin for spacing */
    }

    /* Additional styles for specific elements */
    .card {
        /* Adjust card width for mobile screens */
        width: calc(100% - 10px); /* Two cards per row */
    }
    /* Styles for mobile view */
    .home-mobile-body {
        width: 100%; /* Ensure full width */
        padding: 10px; /* Add some padding for better spacing */
        box-sizing: border-box; /* Include padding in width calculation */
    }

    /* Header styles for mobile */
    header {
       /* Add styles for your header */
       /* Ensure it fits within the mobile screen */
       width: 100%;
       max-width: 100%;
       /* Add additional styles as needed */
    }

    /* Search results styles for mobile */
    .search-results {
       /* Add styles for search results */
       /* Ensure it fits within the mobile screen */
       width: 100%;
       max-width: 100%;
      /* Add additional styles as needed */
    }


    .gallery-card3-image {
        /* Adjust image size for mobile screens */
        max-width: 100%; /* Make the image responsive */
        height: auto; /* Maintain aspect ratio */
    }
}



/* Your navbar styles */
.home-navbar-interactive {
  height: 105px;
  background-color: #fff; /* Background color */
  padding: 20px; /* Padding around the navbar */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Shadow for a subtle lift */
}

.home-navbar-interactive .logo img {
  max-width: 85px; /* Adjust the width of the logo */
  height: auto; /* Maintain aspect ratio */
}

.home-navbar-interactive .home-logo {
  font-size: 24px; /* Size of the text */
  font-weight: bold; /* Text weight */
  color: #333; /* Text color */
  margin-left: 10px; /* Spacing from the logo */
}

/* Adjust styles for the toggler icon */
.home-navbar-interactive .toggler {
  display: none; /* Hide the toggler on desktop */
}

/* Media query for mobile view */
@media screen and (max-width: 768px) {
  .home-navbar-interactive {
    padding: 10px; /* Adjust padding for mobile */
  }

  .home-navbar-interactive .toggler {
    display: block; /* Show the toggler on mobile */
    cursor: pointer; /* Add cursor pointer */
    /* Adjust other styles for the toggler icon */
  }
}


/* Initially hide the navigation links */
.home-navbar-interactive .home-links {
  display: none;
}

/* Show the links when the toggler is clicked */
.home-navbar-interactive .toggler {
  display: block; /* Show the toggler */
  cursor: pointer;
}

/* Media query for mobile view */
@media screen and (max-width: 768px) {
  .home-navbar-interactive .home-links {
    display: none; /* Hide the links by default */
  }

  .home-navbar-interactive .toggler {
    display: block; /* Show the toggler */
  }

  .home-navbar-interactive .toggler.clicked + .home-links {
    display: block; /* Show links when toggler is clicked */
  }
}

/* General styles */
.wrapper {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.navigation-buttons {
    /* Styles for navigation buttons */
    /* You can add your specific styles here */
}

.main-content {
    /* Styles for the main content area */
    /* You can set width, margins, padding, etc. */
    flex: 1; /* This will make it take the remaining space */
}

.side-navigation {
    /* Styles for the side navigation */
    /* You can set width, margins, padding, etc. */
    width: 250px; /* Adjust this width as needed */
}

/* Example styles for the side navigation content */
.side-columns {
    /* Styles for the side navigation content */
    /* You can set background, padding, margins, etc. */
    background-color: #f2f2f2;
    padding: 20px;
    border-radius: 5px;
}

/* Base Swiper Container */
.swiper-container {
  width: 100%;
  max-width: 1440px; /* Maximum width for large screens */
  margin: 0 auto;
  padding: 0 20px;
  box-sizing: border-box;
}

/* Swiper Wrapper and Slides */
.swiper {
  --slide-width: 100%; /* Default slide width */
  --slides-per-view: 1; /* Default slides visible */

  width: 100%;
  height: 600px; /* Desktop height */
  overflow: hidden;
}

.swiper-slide {
  width: var(--slide-width);
  height: 100%;
  flex-shrink: 0;
  padding: 10px;
  box-sizing: border-box;
  transition: transform 0.3s ease;
}

/* Desktop Wide Screens (1440px+) */
@media (min-width: 1440px) {
  .swiper {
    padding: 0 50px;
  }
  .swiper-slide {
    max-width: 900px; /* Restrict slide width */
    margin: 0 auto;
  }
}

/* Medium Desktops & Laptops (1024px - 1439px) */
@media (max-width: 1439px) and (min-width: 1024px) {
  .swiper {
    height: 500px;
    --slide-width: 50%; /* 2 slides per view */
  }
  .swiper-slide {
    padding: 15px;
  }
}

/* Tablets (768px - 1023px) */
@media (max-width: 1023px) and (min-width: 768px) {
  .swiper {
    height: 400px;
    --slide-width: 33.33%; /* 3 slides per view */
    padding: 0 30px;
  }
  .swiper-slide {
    padding: 10px;
  }
}

/* Mobile Landscape (480px - 767px) */
@media (max-width: 767px) and (min-width: 480px) {
  .swiper {
    height: 300px;
    --slide-width: 50%; /* 2 slides per view */
    padding: 0 15px;
  }
  .swiper-slide {
    padding: 5px;
  }
}

/* Mobile Portrait (0px - 479px) */
@media (max-width: 479px) {
  .swiper {
    height: 250px;
    --slide-width: 100%; /* 1 slide per view */
    padding: 0 10px;
  }
  .swiper-slide {
    padding: 0;
  }
}

/* Navigation Arrows Responsive */
.swiper-button-prev,
.swiper-button-next {
  width: clamp(30px, 3vw, 50px); /* Responsive sizing */
  height: clamp(30px, 3vw, 50px);
}

/* Pagination Responsive */
.swiper-pagination-bullet {
  width: clamp(8px, 1.5vw, 12px);
  height: clamp(8px, 1.5vw, 12px);
  margin: 0 clamp(3px, 0.7vw, 6px) !important;
}

/* Progress Bar (Alternative) */
.swiper-pagination-progressbar {
  height: 3px !important;
}

/* Scrollbar Responsive */
.swiper-scrollbar {
  height: 4px !important;
}

/* Slide Content Scaling */
.swiper-slide-active {
  transform: scale(1);
  z-index: 2;
}

.swiper-slide-next,
.swiper-slide-prev {
  transform: scale(0.95);
  opacity: 0.7;
}