.sub-menu-custom {
    columns: 2 !important;/* This splits the list into two columns */
    column-gap: 30px !important; /* Space between the columns */
    list-style: none !important; /* Remove bullets */
    padding-left: 0 !important; /* Remove left padding */
    position: absolute;
    width: 550px !important;
    background-color: #4a2552e8 !important;
    left: -200%;
  }

  .sub-menu-custom li {
    margin-bottom: 10px !important; /* Space between each item */
  }

  .sub-menu-custom a {
    text-decoration: none !important;
     /* Change link color if needed */
  }

  .sub-menu-custom a:hover {
    text-decoration: underline !important; /* Optional hover effect */
  }

  .menu-carousel {
    width: 300px; /* Adjust as needed */
    height: 400px; /* Height for the visible portion */
    overflow: hidden;
    position: relative;
  }

  .menu {
    display: flex;
    flex-direction: column;
    animation: scrollUp 100s linear infinite; /* Carousel effect */
  }

  .carousel-item {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 5px 0;
  }

  @keyframes scrollUp {
    0% {
      transform: translateY(0);
    }
    100% {
      transform: translateY(-100%);
    }
  }

  .responsive-image {
    max-width: 50%;    /* Allows the image to resize within its container */
    height: auto;       /* Maintains aspect ratio */
    margin: 0 auto;     /* Centers the image */
    display: block;     /* Makes it a block element */
}

@media (max-width: 768px) {
  #company-formation {
      padding: 2rem !important; /* Reduce padding for medium screens */
  }
}

/* Small screens (mobile) */
@media (max-width: 576px) {
  #company-formation {
      padding: 1rem !important; /* Further reduce padding for small screens */
  }
}

/* Adjust for smaller screens to maintain usability */
@media (max-width: 768px) {
  .sub-menu-custom {
      columns: 2 !important; /* Keep two columns */
      column-gap: 15px !important; /* Reduce gap for smaller screens */
      width: 100% !important; /* Fit within the screen width */
      left:0px;
  }

  .sub-menu-custom a {
    line-height: 15px !important;
    padding: 3px 0; /* Adjust padding for smaller screens if needed */
}
}

/* Further tweaks for very small screens */
@media (max-width: 576px) {
  .sub-menu-custom {
      columns: 2 !important; /* Maintain two columns */
      column-gap: 10px !important; /* Minimize gap further */
      width: 100% !important; /* Ensure full width for small devices */
      left:0px;
  }

  .sub-menu-custom a {
    line-height: 15px !important;
    padding: 2px 0; /* Further adjust padding for very small screens */
}
}

.card-contact button {
  width: 20%;
  margin-top: 15px;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  background-color: #fff;
  color: #902c72;
  font-size: 1em;
  font-weight: bold;
  cursor: pointer;
  transition: background-color 0.3s, color 0.3s;
}

@media (max-width: 768px) {
  .card-contact button {
      width: 50%; /* Increase button width for better visibility */
      font-size: 0.9em; /* Slightly reduce font size */
      padding: 8px 15px; /* Adjust padding */
  }
}

/* Adjust for mobile devices */
@media (max-width: 576px) {
  .card-contact button {
      width: 100%; /* Full width for mobile screens */
      font-size: 0.85em; /* Further reduce font size */
      padding: 8px 10px; /* Adjust padding for small screens */
  }
}

@media (max-width: 768px) {
  #contact {
    margin-top: 0px !important; 
    padding-top: 15px !important;
  }
}

/* Adjust for mobile devices */
@media (max-width: 576px) {
  #contact {
    margin-top: 0px !important; 
    padding-top: 15px !important;
  }
}

@media (max-width: 768px) {
  #contact-section-details {
    margin-left: 0px !important; 
  }
}

/* Adjust for mobile devices */
@media (max-width: 576px) {
  #contact-section-details {
    margin-left: 0px !important; 
  }
}

@media (max-width: 768px) {
  #contact-section-details .col-lg-6 {
    padding-left: 0px !important;
    margin-bottom: 5px;
}
}

/* Adjust for mobile devices */
@media (max-width: 576px) {
  #contact-section-details .col-lg-6 {
    padding-left: 0px !important;
    margin-bottom: 5px;
}
}

.map-container {
  width: 100%; /* Ensures full width */
  padding-top: 56.25%; /* Maintains a 16:9 aspect ratio */
  position: relative;
  border-radius: 15px;
  overflow: hidden;
  z-index: 2;
}

#map-zone {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: none; /* Removes default iframe border */
  border-radius: 15px; /* Ensures consistent styling */
}

/* Responsive Adjustments */
@media (max-width: 768px) {
  .map-container {
    padding-top: 75%; /* Adjust aspect ratio for tablets */
  }
}

@media (max-width: 576px) {
  .map-container {
    padding-top: 100%; /* Adjust aspect ratio for mobile */
  }
}

@media (max-width: 768px) {
  .menu-carousel {
    width: 100%; /* Adjust aspect ratio for tablets */
  }
}

@media (max-width: 576px) {
  .menu-carousel {
    width: 100%;  /* Adjust aspect ratio for mobile */
  }
}

@media (max-width: 768px) {
  .copy-right-res {
   margin: 5px 0px !important;
   font-size: 10px;
  }
  .social-icons-res{
    width: 12%;
  }

  .res-icons{
    margin-top: 3px !important;
  }
}

@media (max-width: 576px) {
  .copy-right-res {
    margin: 5px 0px !important;
   font-size: 10px;
  }

  .social-icons-res{
    width: 12%;
  }

  .res-icons{
    margin-top: 3px !important;
  }
}

@media (max-width: 768px) {
  .sub-menu-custom li a {
    background-color: #5a3962;
    color: #fff;
    border: none;
    padding: 8% !important;
  }

  .sub-menu-custom li {
    background-color: #5a3962 !important;
    border: none;
  }
}

@media (max-width: 576px) {
  .sub-menu-custom li a {
    background-color: #5a3962;
    color: #fff;
    border: none;
    padding: 8% !important;
  }
  .sub-menu-custom li {
    background-color: #5a3962 !important;
    border: none;
  }
}