/* .navBagColor {
  background: var(--themecolor);
  padding: 5px;
}

.searchBoxColor::placeholder {
  color: #b6b6b6;
  font-size: 12px;
}

.searchBoxColor {
  border-radius: 3px;
  min-width: 80px;
  max-width: 100px;
  min-height: 20px;
  max-height: 30px;
  background-image: url("../images/searchIcon.png");
  background-repeat: no-repeat;
  background-position-y: center;
  background-position-x: right;
}

#mainHeaderMenu ul li a {

  font-weight: 400;
  font-size: 16px;
  line-height: 14.06px;
  letter-spacing: 0%;
  color: #fff;
  text-decoration: none;
}

#mainHeaderMenu button.contactUsBtn {

  font-weight: 700;
  font-size: 13px;
  line-height: 16.41px;
  letter-spacing: 0%;
  background-color: #fbac1b;
}

.dropdown-menu li a {
  color: #000 !important;
  text-decoration: none;
}

.nav-item {
  padding: 3px;
}

.nav-item.active {
  background-color: var(--headerbtn);
}

.bottom.navbar {
  background: var(--themecolor);
  padding: 0px;
}

.navbar-nav .nav-item .nav-link {
  text-decoration: none;
  color: #fff;
  font-size: 14px;
}

.navbar-nav li a {
  font-size: 14px;
}

.nav-item.dropdown:hover .dropdown-menu {
  display: block;
} */

.navBagColor {
  background: #07294e;
}

.searchBoxColor::placeholder {
  color: #b6b6b6;
  font-size: 12px;
}

.searchBoxColor {
  border-radius: 3px;
  min-width: 80px;
  max-width: 100px;
  min-height: 20px;
  max-height: 30px;
  background-image: url("../images/searchIcon.png");
  background-repeat: no-repeat;
  background-position-y: center;
  background-position-x: right;
}

#mainHeaderMenu ul li a {

  font-weight: 400;
  font-size: 16px;
  line-height: 14.06px;
  letter-spacing: 0%;
  color: #fff;
  text-decoration: none;
  /* margin-right: 5px; */
}

#mainHeaderMenu ul li ul li a {

  font-weight: 400;
  font-size: 12px;
  line-height: 14.06px;
  letter-spacing: 0%;
  color: #000;
}

#mainHeaderMenu ul li:hover {
  background-color: var(--headerbtn);
}

.dropdown-item:focus,
.dropdown-item:hover {
  background-color: transparent;
}

#mainHeaderMenu ul li:hover>a {
  color: #fff;
}

#mainHeaderMenu ul li:hover>a .submenu-arrow i {
  color: #fff !important;
}

#mainHeaderMenu ul li ul li a {
  color: #000;
}

#mainHeaderMenu ul li ul li:hover a {
  border-radius: 0px;
  text-decoration: none;
}

#mainHeaderMenu ul li a.active {
  background-color: var(--headerbtn);
  color: #fff;
}

#mainHeaderMenu .dropdown-item.active,
.dropdown-item:active {
  background-color: var(--headerbtn);
  color: #fff;
  border-radius: 0px;
}

#mainHeaderMenu .dropdown-menu {
  padding: 0;

}

#mainHeaderMenu ul li ul li ul {

  top: 0;
}

#mainHeaderMenu button.contactUsBtn {

  font-weight: 700;
  font-size: 13px;
  line-height: 16.41px;
  letter-spacing: 0%;
  background-color: #fbac1b;
}

.dropdown-menu li {
  position: relative;
}

.submenu-arrow {
  /* float: right; */
  transition: transform 0.2s ease-in-out;
}
.dropdown-item .submenu-arrow {
  position: absolute;
  right: 1rem;
  top: 50%;
  transform: translateY(-50%);
}

.submenu-left .submenu-arrow {
  transform: rotate(180deg);
}

.dropdown-menu.submenu {
  /* display: flex; */
  flex-direction: unset;
  justify-content: unset;
}

.submenu-arrow {
  padding-left: 0;
  background-color: transparent;
  border-radius: 5px;
  /* padding: 4px 6px; */
}

@media all and (min-width: 992px) {
  .dropdown-menu li {
    position: relative;
  }

  .dropdown-menu .submenu {
    display: none;
    position: absolute;
    left: 100%;
    top: -7px;
    min-width: 200px;
    z-index: 1000;
  }

  /* Auto Left for Overflow */
  .dropdown-menu .submenu-left {
    right: 100%;
    left: auto;
  }

  .dropdown-menu>li:hover {
    background-color: #f1f1f1;
  }

  .dropdown-menu>li:hover>.submenu {
    display: block;
  }
}

/* ============ Small Devices ============ */
@media (max-width: 991px) {
  .dropdown-menu .dropdown-menu {
    margin-left: 0.7rem;
    margin-right: 0.7rem;
    margin-bottom: 0.5rem;
    background-color: beige;
  }
}

.navbar-expand-lg .navbar-nav {
  column-gap: 10px;
}

.dropdown-menu.drop-left {
  left: auto;
  right: 100%;
}



/* ============ Desktop Devices (min-width: 992px) ============ */
@media all and (min-width: 992px) {
  /* Common logic for all nested menus (2nd, 3rd, 4th level) */
  .dropdown-menu li {
    position: relative;
  }

  /* Sabhi levels ki positioning (3rd aur 4th level ke liye) */
  .dropdown-menu .submenu {
    display: none;
    position: absolute;
    left: 100%;      /* Apne parent ke right side mein khulega */
    top: 0;          /* Bilkul top se align rahega */
    min-width: 200px;
    z-index: 1000;
    margin-top: -1px; /* Borders align karne ke liye */
  }

  /* Hover effect: Jab kisi LI par hover ho, toh uska immediate UL (submenu) dikhe */
  .dropdown-menu > li:hover > .submenu {
    display: block;
  }

  /* 4th level specific adjustments (optional) */
  /* Agar aapka menu screen se bahar ja raha hai toh left side kholne ke liye */
  .dropdown-menu .submenu.submenu-left {
    right: 100%;
    left: auto;
  }
}

/* ============ Mobile Devices (max-width: 991px) ============ */
@media (max-width: 991px) {
  /* Mobile par nested menus ko stack karne ke liye */
  .dropdown-menu .submenu {
    position: static; /* Absolute hata kar normal flow mein layein */
    display: block;   /* Ya toggle logic lagayein */
    margin-left: 1rem;
    border: none;
    box-shadow: none;
    background-color: rgba(0,0,0,0.05); /* Thoda alag dikhne ke liye */
  }
}

/* Arrow Icon Alignment */
.dropdown-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.dropdown-item i.fa-angle-right {
  font-size: 12px;
  margin-left: 10px;
}