/* Full-screen overlay menu */

.mobile-menu-container {

  position: relative;

  top: 0;

  left: 0;

  width: 100%;

  height: auto;

  background: #f5f5f5;

  z-index: 20;

  overflow-y: auto;

  padding: 0;

}



.mt-4 {

  margin-top: 0 !important;

}



/* Header info */

.mobile-menu-header {

  background: #000;

  color: #fff;

  padding: 0;

  display: none;

  justify-content: space-between;

  font-size: 14px;

}



.mobile-menu-header .contact-button a {

  font-weight: 700;

  color: #9c1b31;

}



/* Logo and close icon */

.mobile-menu-top {

  display: flex;

  justify-content: space-between;

  align-items: center;

  padding: 20px 0;

}



.mobile-logo-button {

  display: flex;

  justify-content: space-between;

  padding: 20px;

  background: #fff;

}

.mobile-menu-close {

  background: #9c1b31;

  color: #fff;

  border: none;

  border-radius: 6px;

  width: 36px;

  height: 36px;

  font-size: 40px;

  line-height: 36px;

  text-align: center;

  cursor: pointer;

  display: none;

  justify-content: center;

  align-items: center;

  /* font-weight: 200; */

}



/* Section title */

.mobile-menu h2 {

  font-size: 24px;

  font-weight: bold;

  margin-bottom: 20px;

}



/* Menu Items */

.mobile-menu ul {

  list-style: none;

  padding: 0;

  margin: 0;

}



.mobile-menu-item {

  /* padding: 10px 0 8px; */

  padding: 0 0 15px;

  /* border-bottom: 1px solid #ccc; */

  font-weight: bold;

  display: flex;

  align-items: flex-start;

  gap: 0;

  position: relative;

  flex-direction: column;

}



.mobile-menu-item a:hover {

  color: #9c1b31;

  border-bottom: 1px solid #9c1b31;

}



#mobile-menu-toggle {

  background: #9c1b31;

  color: #fff;

  border: none;

  border-radius: 5px;

  width: 36px;

  /* height: 36px; */

  font-size: 24px;

  line-height: 36px;

  text-align: center;

  cursor: pointer;

  display: flex;

  align-items: center;

  justify-content: center;

}



.mobile-menu-item {

  position: relative; /* Needed for ::before positioning */

}

.mobile-menu-header a {

  color: #fff;

}

.mobile-menu-item::before {

  content: "";

  display: none;

  width: 2px;

  height: 33%;

  background-color: #9c1b31;

  position: absolute;

  left: 0;

  top: 33%;

  transition: height 0.4s ease, top 0.4s ease; /* Animate height & top */

}



.mobile-menu-item.open::before {

  height: 70%;

  top: 20%;

}

.mobile-menu-link {

  color: black;

  text-decoration: none;

  /* padding-left: 10px; */

  display: flex;

  justify-content: flex-start;

  width: fit-content;

  font-weight: 600;

  font-family: "Google Sans";

}



/* Submenu items (optional if used) */

.mobile-submenu-item {

  padding: 5px 0 0 20px;

}



.mobile-submenu-link {

  color: #333;

  text-decoration: none;

}



.dropdown-icon {

  font-size: 10px;

  display: flex;

  align-items: center;

  margin-left: 5px;

}



/* Footer Links */

.mobile-menu-footer {

  display: flex;

  justify-content: space-between;

  margin-top: 40px;

  font-size: 14px;

}



.mobile-menu-footer a {

  color: black;

  text-decoration: none;

}



.mobile-menu .sub-menu {

  max-height: 0;

  overflow: hidden;

  transition: max-height 0.3s ease;

}

.contact-form-service .wpcf7-spinner {
  background-color:#9b1c31 ;
}



/* .mobile-menu li.open > .sub-menu {

  max-height: 500px;

} */



/* Hide all submenus by default */

/* .mobile-menu .mega-submenu {

  display: none;

} */



/* When parent <li> has .open class, show its submenu */

/* .mobile-menu li.open > .mega-submenu{

     display: flex;

    flex-direction: column;

    text-align: start;

    width: 100%;

} */



/* Base submenu styles */

.mobile-menu .mega-submenu {

  max-height: 0;

  opacity: 0;

  overflow: hidden;

  transition: max-height 0.4s ease-in-out, opacity 0.4s ease-in-out;

  flex-direction: column;

  text-align: start;

  width: 100%;

  display: flex; /* Keep as flex to preserve layout */

}



/* Show submenu when parent li is open */

.mobile-menu li.open > .mega-submenu {

  max-height: 500px; /* Adjust based on your content */

  opacity: 1;

}



/* nav.mobile-menu {

  max-height: 0;

  overflow: hidden;

  transition: max-height 0.1s ease-in-out, padding 0.2s ease-in-out;

  flex-direction: column;

  justify-content: space-between;

  padding: 0; 

}



nav.mobile-menu.active {

  max-height: 5000px; 

  padding: 20px; 

  min-height: 80vh;

  display: flex;

  

} */



nav.mobile-menu {

  /* Keep element present */

  display: flex;

  flex-direction: column;

  justify-content: flex-start;

  background-color: #fff;

  /* Collapsed state */

  max-height: 0;

  overflow: hidden;

  opacity: 0;

  transform: translateY(-12px);

  pointer-events: none;

  visibility: hidden;



  padding: 0 20px;



  transition:

    /* max-height 0.35s ease, */ opacity 0.25s ease,

    /* transform 0.25s ease, */ visibility 0s;

}



/* Open state */

nav.mobile-menu.active {

  max-height: 5000px; /* must exceed content height */

  min-height: calc(100vh - 80px);



  opacity: 1;

  transform: translateY(0);

  pointer-events: auto;

  visibility: visible;



  padding: 45px 20px 20px;



  transition: max-height 0.35s ease, opacity 0.25s ease, transform 0.25s ease,

    visibility 0s;

}



/*  */



/*  */

.mobile-menu-close {

  display: none;

}



/* Show close, hide hamburger when menu is active */

#mobile-menu.active ~ .mobile-logo-button .mobile-menu-close {

  display: inline-block;

}



#mobile-menu.active ~ .mobile-logo-button #mobile-menu-toggle {

  display: none;

}



.our-office {

  padding-top: 25px;

}



.hide-menu {

  display: none !important;

}



.mobile-header-border {

  border-bottom: 1px solid #ccc; 

  margin-bottom: 15px;

}





.mobile-menu-contact{

  padding-top: 32px;

}

.mobile-menu-contact a{

background-color: #9B1C31;

padding: 15px;

color: #fff;

font-weight: bold;

text-transform: uppercase;

border-radius: 5px;

}