/* ++++++++++++++++++++++++++++++++++

======> NAV BAR

++++++++++++++++++++++++++++++++++ */

#Offcn-account.offcanvas-sec.sm .offcanvas .offcanvas-body {

  display: none;

}



header nav {

  width: 100%;

  padding: 0 24px;

  background: white;

  transition: var(--Ltrns);

}

header nav.fixTop {

  position: fixed;

  transition: var(--Ltrns);

  width: 100%;

  top: 0;

  left: 0;

  z-index: +10;

  box-shadow: rgba(40, 39, 39, 0.082) 0px 4px 6px -1px,

    rgba(51, 51, 51, 0.06) 0px 2px 4px -1px;

  animation: naveffect 1.2s ease;

}

@keyframes naveffect {

  0% {

    top: -60px;

  }

  100% {

    top: 0;

  }

}



header nav .container {

  display: flex;

  gap: 0.9rem;

  padding: 0.8rem 0;

  border-bottom: 1px solid #ececec;

}

header nav .container .mini-About {

  display: none;

}



/* ===> Logo col */

header nav .logo-nav-col {

  flex-shrink: 0;

  display: flex;

  align-items: center;

}

header nav .logo-nav-col img {

  height: 40px;

  width: auto;

}



/* ===> Nav Link col */

header nav .nav-link-col {

  flex-grow: 1;

  display: flex;

  align-items: center;

  justify-content: flex-end;

  padding-right: 0.8rem;

}

header nav .nav-link-col .nav-ul {

  display: flex;

  list-style: none;

  padding: 0;

  margin: 0;

}

header nav .nav-link-col .nav-ul li:not(:last-child) {

  margin-right: 1.875rem;

}

header nav .nav-link-col .nav-ul .nav-link {

  font-family: var(--secoundry-font);

  font-size: var(--nav-link-f-size);

  padding: 0.75rem 0;

  color: var(--nav-link-color);

  font-weight: 600;

  transition: var(--Ltrns);

}

header nav .nav-link-col .nav-ul .nav-link:hover {

  color: var(--nav-link-hover-color);

}

header nav .nav-link-col .nav-ul .nav-link:is(.active, .active:hover) {

  color: var(--nav-link-active-color);

}



/* ===> Nav 3rd col */

header nav .nav-3rd-col {

  flex-shrink: 0;

  display: flex;

  align-items: center;

}

header nav .nav-3rd-col > *:not(:last-child) {

  margin-right: 0.9rem;

}

header nav .nav-3rd-col .nav-btn {

  flex-shrink: 0;

  padding: 0.5rem;

  text-align: center;

  color: var(--text-100);

  transition: var(--Ltrns);

}

header nav .nav-3rd-col .nav-btn:hover,

header nav .nav-3rd-col .nav-btn.active {

  color: var(--primary);

}

header nav .nav-3rd-col .nav-btn i {

  font-size: var(--nav-btn-i-size);

}



header nav .nav-3rd-col .nav-btn .sm-menu-title {

  display: none;

}

header nav .nav-3rd-col .home-btn {

  display: none;

}



/* --- Wish list / Cart Button */



.account-ul {

  width: 100%;

  border-radius: 0;

  background: transparent;

  padding: 0;

  display: grid;

  border: none;

  box-shadow: none;

  grid-template-columns: repeat(1, 1fr);

  gap: 0;

}



.account-ul li .Link {

  font-family: var(--secoundry-font);

  width: 100%;

  display: flex;

  align-items: center;

  gap: 5px;

  padding: 10px;

  font-size: 13px;

  text-decoration: none;

  color: var(--nav-link-color);

  text-transform: capitalize;

  font-weight: 400;

  border-radius: var(--radious-sec);

  transition: var(--Ltrns);

}



.account-ul li .Link {

  padding: 0.75rem 0;

  border-bottom: var(--border-lite);

  font-size: 13px;

  font-weight: 600;

}



.account-ul li .Link:hover,

.account-ul li .Link.active {

  color: var(--secoundry);

}



.account-ul li .sign-out:hover {

  color: rgb(250, 78, 78);

}



.account-ul li span {

  display: inline-block;

  width: 25px;

  flex-shrink: 0;

}



.booking-btn {

  display: flex;

  flex-shrink: 0;

  padding: 0.5rem 1rem;

  text-align: center;

  color: var(--secoundry);

  border: 2px solid var(--secoundry);

  border-radius: 50px;

  font-size: 0.9rem;

  background-color: var(--primary);

  transition: var(--Ltrns);

}

@media (min-width: 800px) {

  .booking-btn:hover {

    transform: scale(1.1);

  }

}



.booking-btn span.i-span {

  display: inline-block;

  padding-right: 0.5rem;

  margin-right: 0.5rem;

  border-right: 2px solid var(--secoundry);

}



/* ===> Nav 4th col */

header nav .nav-4th-col {

  display: none;

  align-items: center;

  flex-shrink: 0;

}

header nav .nav-4th-col .toggle-btn {

  flex-shrink: 0;

  padding: 0.5rem;

  text-align: center;

  font-size: 1rem;

  color: var(--text-100);

}



@media (max-width: 900px) {

  #Offcn-account.offcanvas-sec.sm .offcanvas .offcanvas-body {

    display: block;

  }



  header nav .container {

    justify-content: space-between;

    padding: 0.7rem 0;

  }



  header nav .nav-3rd-col {

    flex-grow: 1;

    justify-content: flex-end;

  }

  header nav .nav-3rd-col > *:not(:last-child) {

    margin-right: 0.8rem;

  }



  header nav .nav-4th-col {

    display: flex;

  }



  /* ===> Nav Link col */

  header nav .nav-link-col {

    display: block;

    padding-right: 0;

  }



  header nav .nav-link-col .nav-ul {

    display: grid;

    grid-template-columns: repeat(1, 1fr);

  }



  header nav .nav-link-col .nav-ul li {

    margin-right: 0;

  }



  header nav .nav-link-col .nav-ul .nav-link {

    padding: 0.75rem 0;

    display: block;

    border-bottom: var(--border-lite);

  }



  header nav .container .mini-About {

    display: block;

    margin-top: 30px;

  }



  header nav .container .mini-About .about-crd {

    padding: 6px 0;

    margin-bottom: 10px;

  }



  header nav .container .mini-About .about-crd h6 {

    color: var(--prim-100);

    font-size: 13px;

    font-weight: 700;

    margin-bottom: 2px;

  }



  header nav .container .mini-About .about-crd a {

    display: block;

    color: var(--text-200);

    font-weight: 500;

    font-size: 0.75rem;

    margin: 0;

  }



  /* Acount Manus CSS */

  .account-ul li .Link:hover,

  .account-ul li.Link.active {

    background-color: transparent;

  }

}



@media (max-width: 800px) {

  header nav .container {

    padding: 0.6rem 0;

  }



  header nav .logo-nav-col img {

    height: 2rem;

    width: auto;

  }



  header nav .nav-3rd-col > *:not(:last-child) {

    margin-right: 0;

  }



  header nav .nav-3rd-col .nav-btn .sm-menu-title {

    display: block;

    font-size: 10px;

    font-weight: 600;

    text-transform: capitalize;

    margin: 2px 0 0 0;

  }



  header nav .nav-3rd-col {

    position: fixed;

    display: grid;

    grid-template-columns: repeat(3, 1fr);

    justify-content: center;

    align-items: center;

    bottom: 0;

    left: 0;

    width: 100%;

    background: var(--bg-400);

    border-top: var(--border-100);

    z-index: +6;

    padding: 0.4rem 0.8rem;

  }



  header nav .nav-3rd-col .home-btn {

    order: 1;

    display: inline-block;

  }

  header nav .nav-3rd-col .user-btn {

    order: 3;

  }

  header nav .nav-3rd-col .booking-btn {

    order: 2;

  }



  .booking-btn {

    padding: 0.5rem;

    text-align: center;

    color: var(--text-100);

    transition: var(--Ltrns);

    font-size: 1.1rem;

    border: none;

    display: flex;

    flex-direction: column;

    align-items: center;

    background: transparent;

  }



  .booking-btn span.i-span {

    border: none;

    padding: 0;

    margin: 0;

    font-size: var(--nav-btn-i-size);

  }

  .booking-btn span.txt {

    font-size: 10px;

    font-weight: 600;

    text-transform: capitalize;

    margin: 2px 0 0 0;

  }

}

.nav-item {

    position: relative; /* Positioning for the dropdown */

}



.dropdown-menu {

    display: none; /* Hide the dropdown by default */

    position: absolute; /* Position it absolutely */

    background-color: white; /* Background color for the dropdown */

    border: 1px solid #ccc; /* Optional border */

    z-index: 1000; /* Ensure it appears above other elements */

    max-height: 150px; /* Set a maximum height */

    overflow-y: auto; /* Enable vertical scrolling */

}



.nav-item:hover .dropdown-menu {

    display: block; /* Show the dropdown on hover */

}



/* Optional: Style for dropdown items */

.dropdown-item {

    padding: 10px 15px; /* Padding for dropdown items */

    text-decoration: none; /* Remove underline */

    color: black; /* Text color */
    width: 100%;

}



.dropdown-item:hover {

    background-color: #0c6238; /* Background color on hover */

}