@import url("https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@200;300;400;500;600;700&display=swap");

* {
  padding: 0;
  box-sizing: border-box;
  font-family: "Plus Jakarta Sans", sans-serif;
}

ul {
  padding: 0;
  margin: 0;
}

ul li {
  list-style: none;
}

ul li a {
  text-decoration: none;
  color: inherit;
}

.contain-menu {
  width: 90%;
  white-space: nowrap;
  position: relative;
}

/* .contain-menu:hover > .current{
    color: #fff !important;
} */
.contain-menu .slider {
  top: 7%;
  left: 0;
  background: yellow;
  height: 87%;
  font-size: 15px;
  width: 12.5%;
  transition: 0.3s;
  z-index: 3;
  position: absolute;
  background: #866dcf;
  /* color: #4A5E88; */
  border-radius: 44px;
  font-weight: 700;
}

.nav-item-menu {
  width: 12.5%;
  font-size: 15px;
  display: inline-block !important;
  /* padding: 0.75em 1em; */
  z-index: 5;
  cursor: pointer;
  position: relative;
  transition: 0.3s;
  text-align: center;
  font-weight: 700;
}

/* .nav-item-menu a{
    text-decoration: none;
    color: #4A5E88;
} */

.nav-item-menu:nth-child(1).current ~ .slider {
  transform: translateX(3%);
  color: #fff;
}

.nav-item-menu:nth-child(2).current ~ .slider {
  transform: translateX(100%);
}

.nav-item-menu:nth-child(3).current ~ .slider {
  transform: translateX(200%);
}

.nav-item-menu:nth-child(4).current ~ .slider {
  transform: translateX(300%);
}

.nav-item-menu:nth-child(5).current ~ .slider {
  transform: translateX(400%);
}

.nav-item-menu:nth-child(6).current ~ .slider {
  transform: translateX(500%);
}

.nav-item-menu:nth-child(7).current ~ .slider {
  transform: translateX(600%);
}

.nav-item-menu:nth-child(8).current ~ .slider {
  transform: translateX(697%);
}

.nav-item-menu.current ~ .slider {
  color: #fff;
}

.contain-menu ul li a,
.contain-menu ul li a {
  color: inherit !important;
  transition: all 0.5s ease !important;
}

.contain-menu ul.mobile-menu li a {
  color: #7a7a7a !important;
  transition: all 0.5s ease !important;
  line-height: 21px;
}

.contain-menu ul.mobile-menu li a:hover {
  color: #7a7a7a !important;
}

.contain-menu ul li a:hover {
  color: #fff !important;
  z-index: 9 !important;
}

.contain-menu ul:not(:hover) li.current {
  color: #fff !important;
}

.nav-item-menu:nth-child(1):hover ~ .slider {
  transform: translateX(3%);
}

.nav-item-menu:nth-child(2):hover ~ .slider {
  transform: translateX(100%);
}

.nav-item-menu:nth-child(3):hover ~ .slider {
  transform: translateX(200%);
}

.nav-item-menu:nth-child(4):hover ~ .slider {
  transform: translateX(300%);
}

.nav-item-menu:nth-child(5):hover ~ .slider {
  transform: translateX(400%);
}

.nav-item-menu:nth-child(6):hover ~ .slider {
  transform: translateX(500%);
}

.nav-item-menu:nth-child(7):hover ~ .slider {
  transform: translateX(600%);
}

.nav-item-menu:nth-child(8):hover ~ .slider {
  transform: translateX(697%);
}

.nav .slider {
  margin: 0;
}

.contain-menu ul {
  color: #4a5e88;
}

.nav-item-menu.dropdown:hover {
  color: #fff;
}

.py-5 {
  padding-top: 37px !important;
  padding-bottom: 37px !important;
}

@media only screen and (min-width: 769px) and (max-width: 991px) {
  .temple-open {
    padding: 0px 8px !important;
  }
}

@media only screen and (max-width: 768px) {
  .contain-menu ul.mobile-menu li ul#dropdownMobile a {
    color: #363750 !important;
    font-size: 17px;
    font-weight: 800;
  }

  .owl-carousel .owl-stage {
    transform: translate(0px, 0px) !important;
  }

  .py-5 {
    padding-top: 10px !important;
    padding-bottom: 10px !important;
  }
}

@media only screen and (max-width: 400px) {
  .d-n-360 {
    display: none;
  }

  .temple-open {
    padding: 0px 8px !important;
  }
}

@media only screen and (max-width: 359px) {
  .temple-open {
    padding: 0px 5px !important;
  }

  .gap-3 {
    gap: 0.3rem !important;
  }

  .logo-iskon {
    max-width: 50px;
  }
}

@media only screen and (max-width: 1300px) and (min-width: 1000px) {
  .app-download-btn {
    display: none !important;
  }
}

@media only screen and (min-width: 768px) and (max-width: 768px) {
  .contain-menu ul:not(:hover) li.current,
  .contain-menu ul li a:hover {
    color: #866dcf !important;
    font-weight: bold !important;
  }
}