#loader {
  height: 100vh;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.loader {
  width: 100px;
  aspect-ratio: 1;
  display: grid;
  -webkit-mask: conic-gradient(from 15deg, #0000, #000);
  animation: l26 1s infinite steps(12);
}
.loader,
.loader:before,
.loader:after {
  background: radial-gradient(closest-side at 50% 12.5%, #38b3a0 96%, #0000) 50%
      0/20% 80% repeat-y,
    radial-gradient(closest-side at 12.5% 50%, #38b3a0 96%, #0000) 0 50%/80% 20%
      repeat-x;
}
.loader:before,
.loader:after {
  content: "";
  grid-area: 1/1;
  transform: rotate(30deg);
}
.loader:after {
  transform: rotate(60deg);
}

@keyframes l26 {
  100% {
    transform: rotate(1turn);
  }
}

/* sliders */
.slider-container {
  margin-top: 75px;
  height: calc(100vh - 75px);
}
#sliderContainer {
  display: none;
}

.swiper {
  width: 100%;
  height: 100%;
}
.swiper-slide {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.swiper-slide picture img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.swiper-slide-prev picture img,
.swiper-slide-active picture img,
.swiper-slide-duplicate-active picture img {
  animation-name: zoomIn;
  animation-duration: 14s;
  animation-fill-mode: forwards;
}
@keyframes zoomIn {
  from {
    transform: scale(1);
  }

  to {
    transform: scale(1.15);
  }
}

@keyframes zoomInSlow {
  from {
    transform: scale(1);
  }

  to {
    transform: scale(1.1);
  }
}

.swiper-caption {
  position: absolute;
  bottom: 45%;
  left: 10%;
  color: #000;
  font-weight: 500;
  font-size: 2.5rem;
  padding: 15px 15px 16px 15px;
  background-color: #fff;
  margin: 0;
  letter-spacing: 0.3em;
  line-height: 1;
  text-wrap: nowrap;
  text-align: center;
}

.swiper-caption p span {
  letter-spacing: -1.5rem;
}

.custom-dots {
  position: absolute;
  top: 50% !important;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 1rem;
  z-index: 10;
  align-items: flex-end;
  justify-content: center;
}
.custom-dots .swiper-pagination-bullet {
  width: 10px !important;
  height: 10px !important;
  border-radius: 50%;
  border: none;
  opacity: 1;
  background-color: #ccc;

  margin: 0 10px !important;
}

.custom-dots .swiper-pagination-bullet-active {
  background-color: #333;
}
@media (max-width: 1024px) {
  .slider-container {
    margin-top: 60px;
    height: calc(100vh - 60px);
  }

  .loader {
    width: 45px;
  }
}

@media (max-width: 880px) {
  .swiper-caption {
    font-size: 1.6rem;
    padding: 14px;
  }
  .swiper-caption p span {
    letter-spacing: -0.8rem;
  }
}
@media (max-width: 570px) {
  .swiper-caption {
    font-size: 1.5rem;
    letter-spacing: 0.2em;
    /* bottom: 40%; */
    left: 5%;
  }

  .swiper-caption p span {
    letter-spacing: -0.6rem;
  }
}

@media (max-width: 450px) {
  .swiper-caption {
    font-size: 1rem;
    letter-spacing: 0.2em;
    /* bottom: 35%; */
    left: 5%;
  }

  .swiper-caption p span {
    letter-spacing: -0.5rem;
  }
}

@media (orientation: portrait) and (max-width: 768px) {
  .slider-container {
    margin-top: 60px;
  }
}

@media (min-aspect-ratio: 4/5) and (max-aspect-ratio: 5/4) {
  .swiper-slide-prev picture img,
  .swiper-slide-active picture img,
  .swiper-slide-duplicate-active picture img {
    animation-name: zoomInSlow;
    animation-duration: 14s;
    animation-fill-mode: forwards;
  }
}