#page-loader {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--white);
  transition: opacity 0.4s ease, visibility 0.4s ease;
}

#page-loader img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

#page-loader.loader--hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

#page-loader {
    display: none;
}

.show-page-loader #page-loader {
    display: flex; /* or your original display value */
}
.main--header {

  position: sticky;

  top: 0;

  width: 100%;

  z-index: 99;

  transition: 0.3s;

  background: var(--white);

  box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);

}



.topbar--menu {

  /* background: linear-gradient(90deg, rgba(0, 0, 0, 0) 37.33%, #000000 98.61%); */

  background: linear-gradient(

    90deg,

    rgba(166, 200, 61, 0) 37.33%,

    #a6c83d 98.61%

  );

  transition: 0.3s;

}



/* .main--header.active--sticky {

  box-shadow: rgb(0 0 0 / 16%) 0px 3px 7px -3px;

} */



.main--header .navbar-brand {

  width: 146px;

  transition: 0.3s;

}



.main--header .navbar-brand > img {

  width: 100%;

  transition: 0.3s;

}



.main--header .topbar--menu > ul {

  margin-bottom: 0;

  list-style: none;

  display: flex;

  gap: 50px;

  min-height: 56px;

  align-items: center;

  justify-content: end;

  padding-right: 15px;

}



.main--header .topbar--menu > ul > li > a {

  color: var(--black);

  padding: 0;

}





.main--header .navbar-nav > li > a.nav-link {

  color: var(--black);

  font-size: 18px;

  padding: 20px 15px;

  transition: 0.3s;

  font-weight: 500;

}



.main--header .navbar {

  padding: 0px;

  border-bottom: 0.5px dashed var(--white);

  gap: 15px;

  justify-content: space-between;

  min-height: 80px;

}



.main--header .navbar-nav > .nav-item {

  position: relative;

}



.main--header .navbar-nav > .menu--btn .explore-btn {

    padding-left: 5px;

    padding-right: 20px;

}



.main--header .navbar-nav > .menu--btn .explore-btn:hover .icon{

  transform: none;

}



.main--header .navbar-nav {

    align-items: center;

}



.main--header .navbar-nav > .nav-item:before {

  content: "";

  width: 0%;

  height: 2px;

  background: var(--primary);

  position: absolute;

  left: 0;

  bottom: 0;

  transition: 0.3s;

  opacity: 0;

}



.main--header .navbar-nav > .nav-item:hover:before {

  width: 100%;

}



.main--header .navbar-nav > .nav-item:hover .nav-link {

  color: var(--primary);

}



.main--header .navbar-nav > .nav-item:before {

  background: var(--primary);

}



/* Inner page */

.inner--page .main--header {

  background: #faffe9;

}





.inner--page .main--header .navbar-brand > img {

  filter: none;

}



.inner--page .main--header .navbar-nav > li > a.nav-link {

  color: var(--black);

}



.inner--page .main--header .navbar-nav > .nav-item:before {

  background: var(--primary);

}



.inner--page .main--header .topbar--menu > ul > li > a {

  color: var(--black);

}

/* Inner page end */



/* Mega Menu */

.main--header .mega-menu-parent {

  position: relative;

}



.main--header .mega-menu {

  position: fixed;

  right: 0;

  width: calc(100% - 365px);

  top: 100%;

  background: var(--white);

  padding: 40px 50px;

  z-index: 999;

  border-top: 2px solid #b6d433;

  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);

  margin-top: -3px;

  visibility: hidden;

  opacity: 0;

  transform: translateY(50px);

  transition: 0.3s;

  background-image: url("../img/logo-icon.svg");

  background-repeat: no-repeat;

  background-position: calc(100% - 20px) calc(100% - 20px);

  padding-right: 0;

}



.main--header .mega-menu .mega-menu-content {

  max-width: 90%;

}



.main--header .mega-menu-parent:hover .mega-menu {

  visibility: visible;

  opacity: 1;

  transform: translateY(0px);

}



.main--header .mega-left h3 {

  font-size: 24px;

  font-weight: 700;

  margin-bottom: 10px;

}



.main--header .mega-left p {

  font-size: 20px;

  margin-bottom: 20px;

}



.main--header .mega-bottom-links {

  display: flex;

  gap: clamp(20px, 3vw, 60px);

  border-top: 1px solid #ccc;

  padding-top: 25px;

}



.main--header .mega-bottom-links a {

  text-decoration: none;

  color: var(--black);

  font-weight: 600;

  font-size: 16px;

  transition: 0.3s;

}



.main--header .mega-bottom-links a:hover {

  color: var(--primary);

}

.main--header .mega-mobile-top {

  display: none;

}

.main--header .mega-mobile-top button {

  border: none;

  background: no-repeat;

  margin-bottom: 15px;

  font-size: 15px;

}

.main--header .topbar--menu .mega-menu {

  top: 58px;

  z-index: 9999;

}

.main--header .topbar--menu .mega-menu-parent .nav-link i {

  margin-top: 1px;

}

.mobile--navbar--close, .mobile--top--menu{

  display: none;

}

/* Mega Menu end */



/* Media */



@media (max-width: 1280px) {

  .main--header .mega-menu {

    width: calc(100% - 200px);

  }

}



@media (max-width: 991px) {

  .main--header .mega-mobile-top {

    display: block;

  }

  .main--header .mega-menu {

    width: 100%;

    height: calc(100vh + 10px);

    top: 0;

    opacity: 1;

    visibility: visible;

    padding: 20px;

  }

  .main--header .mega-menu {

    transform: translateX(100%) !important;

  }



  .main--header .mega-menu.active {

    transform: translateX(0) !important;

  }



  .main--header .mega-mobile-top button {

    border: none;

    background: no-repeat;

    margin-bottom: 15px;

    font-size: 15px;

  }



  .main--header .mega-bottom-links {

    gap: 10px;

    flex-direction: column;

  }



  .main--header .mega-menu .mega-menu-content {

    max-width: 100%;

    padding-top:30px;

  }



  .main--header .mega-left p {

    font-size: 15px;

  }



  .main--header .mega-left h3 {

    font-size: 20px;

  }



  .main--header .mega-bottom-links a {

    font-size: 14px;

    padding: 0;

  }

  .mobile--top--menu{

    display: block;

  }

  .mobile--top--menu ul {

      list-style: none;

      padding: 0;

      margin: 0;

      background: #f3f0f0;

      margin-top: 50px;

  }



  .mobile--top--menu ul li a {

      padding: 10px;

      display: block;

      color: var(--black);

      font-size: 14px;

  }

  .main--header .mega-menu-parent .nav-link {

    display: flex;

    align-items: center;

    gap: 5px;

    justify-content: space-between;

  }



  .main--header .mega-menu-parent .nav-link i {

    transform: rotate(-90deg);

  }

  .main--header .topbar--menu .mega-menu-parent .nav-link i {

    transform: none;

  }

  .main--header .navbar-nav > .nav-item:not(:last-child) {

      border-bottom: 1px solid #ccc;

  }

  .main--header .navbar-nav {

      align-items: flex-start;

      width: 100%;

  }



  .main--header .navbar-nav > .nav-item {

      width: 100%;

  }



  .main--header .navbar-nav > .nav-item.menu--btn {

      padding-top: 20px;

  }



  .main--header .topbar--menu .mega-menu {

    top: 0;

  }

  .topbar--menu{

    display: none;

  }



  .main--header .navbar {

    padding: 10px 0px;

  }



  .main--header .navbar-nav > .nav-item:before {

    background: var(--primary);

  }

  .main--header .topbar--menu > ul > li > a {

    font-size: 14px;

  }

  .main--header .topbar--menu > ul {

    gap: 10px;

    padding-right: 0px;

  }



  .main--header .navbar-toggler {

    background: var(--primary);

    padding: 0;

    width: 33px;

    aspect-ratio: 1 / 1;

    font-size: 15px;

  }

  .main--header .navbar-toggler i {

      color: var(--black);

  }



  .main--header .main--navbar {

    position: fixed;

    top: 0;

    left: 0;

    width: 100%;

    height: 100vh;

    background: #fff;

    z-index: 9999;

    overflow: hidden;

    padding: 15px;

    transform: translateX(100%);

    transition: 0.4s;

    display: block !important;

  }



  .main--header .main--navbar.show{

      transform: translateX(0);

  }



  .mobile--navbar--close{

      display: block;

       padding-left: 10px;

       margin-bottom:40px

  }



  .mobile--navbar-back-btn{

      border: none;

      background: none;

      font-size: 20px;

      padding: 0;

      line-height: 1;

      font-family: sans-serif;

      color: var(--black);

  }





  .main--header .navbar-brand {

    width: 146px;

  }



  .main--header .navbar-nav > li > a.nav-link {

    color: var(--black);

    font-size: 14px;

    padding: 10px;

  }

}