/* START GLOBAL SETTINGS */
:root {
  --swiper-pagination-color: transparent;
}

body {
  font-family: "Cairo", sans-serif;
  overflow-x: hidden;
}

html {
  scroll-behavior: smooth;
}

::-webkit-scrollbar {
  width: 4px;
}

::-webkit-scrollbar-track {
  background-color: #353f49;
}

::-webkit-scrollbar-thumb {
  background-color: #bca560;
}

* {
  box-sizing: border-box;
}

.container {
  padding: 0.5rem 1rem;
  margin: 0 auto;
}

@media (min-width: 1280px) {
  .container {
    padding: 0.5rem 5rem;
  }
}

/* END GLOBAL SETTINGS */

/* START HEADER */
.nav-active {
  color: #bca560 !important;
  font-weight: 600;
  position: relative;
}

.nav-active::after {
  content: '';
  position: absolute;
  bottom: 0px;
  right: 0px;
  height: 2.7px;
  width: 25px;
  border-radius: 99px;
  background-color: #bca560;
}

/* END HEADER */

/* START MAIN */
/* OVERLAY */
.cards-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(180deg, rgba(30, 30, 30, 0) 39.06%, rgba(0, 0, 0, 0.8) 69.17%);
  z-index: 0;
  transition: all 0.5s ease;
}

/* SWIPER BUTTONS */
.swiper-button-prev, .swiper-rtl .swiper-button-next {
  left: unset;
  right: unset;
}

.swiper-button-next,
.swiper-button-prev {
  inset: unset;
  bottom: 10px;
  right: 0;
}

.swiper-button-next {
  right: 80px !important;
}

.swiper-button-prev {
  right: 15px !important;
}

.swiper-button-next:after, .swiper-rtl .swiper-button-prev:after {
  color: #fff;
  font-size: 33px;
}

/* END MAIN */


/* START DESTINATIONS */
#destinations .cards-overlay,
#section_destinations .cards-overlay {
  border-radius: 12px;
}

@media(min-width: 640px) {

  #destinations .destinations-cards .destination-card:nth-of-type(odd),
  #section_destinations .destinations-cards .destination-card:nth-of-type(odd) {
    transform: translateY(50px);
    margin-bottom: 50px;
  }
}

/* END DESTINATIONS */





/* ********** START ANIMATION ********** */
.animate-top-bottom {
  /* animation: top-and-bottom 4s linear infinite; */
}

@keyframes top-and-bottom {

  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(30px);
  }
}

/* ********** END ANIMATION ********** */