/* <carousel-1> */
.carousel-1 {
  position: relative;
  width: 100%;
  aspect-ratio: 3/1;
  min-height: 280px;
  overflow: hidden;
}

/* Images */
.carousel-1>img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 1.3s ease-in-out;
}

.carousel-1 img.active {
  opacity: 1;
}

/* Overlay */
.carousel-1 .overlay {
  position: absolute;
  top: 50%;
  left: 10%;
  transform: translateY(-50%);
  display: flex;
  align-items: flex-end;
}

.carousel-1 .overlay-text {
  color: #fff;
  max-width: 600px;
  font-family: 'Montserrat', sans-serif;
}

.carousel-1 .overlay-text h1 {
  font-size: 42px;
  font-weight: 600;
  margin-bottom: 5px;
  letter-spacing: 1px;
  text-transform: capitalize;
}

.carousel-1 .overlay-text p {
  font-size: 30px;
  line-height: 1.6;
  opacity: 0.9;
}

/* Dots */
.carousel-1 .dots {
  position: absolute;
  top: 70%;
  left: 10%;
  display: flex;
  gap: 10px;
}

.carousel-1 .dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.4);
  cursor: pointer;
  transition: transform 0.3s, background 0.3s;
  position: relative;
}

.carousel-1 .dot.active {
  background: transparent;
  border: 2px solid white;
  transform: scale(1.3);
}

.carousel-1 .dot.active::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  height: 5px;
  width: 5px;
  background: white;
  border-radius: 50%;
}

/* Border bottom */
.carousel-1>.border-bottom {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -5px;
  aspect-ratio: 15/1;
  overflow: hidden;
}

.carousel-1>.border-bottom>img {
  width: 100%;
  height: 100%;
}

@media (max-width: 785px) {
  .carousel-1 .overlay-text h1 {
    font-size: 25px;
  }

  .carousel-1 .overlay-text p {
    font-size: 18px;
  }
}

/* </carousel-1> */

/* <carousel-2> */
.carousel-wrap {
  margin: auto;
  padding: 0 5%;
  width: 100%;
  position: relative;
}

/* fix blank or flashing items on carousel */
.owl-carousel .item {
  position: relative;
  z-index: 100;
  -webkit-backface-visibility: hidden;
}

/* end fix */
.owl-nav>div {
  margin-top: -26px;
  position: absolute;
  top: 50%;
  color: var(--theme-color2); /* #cdcbcd */
}

.owl-nav i {
  font-size: 52px;
}

.owl-nav .owl-prev {
  left: -30px;
}

.owl-nav .owl-next {
  right: -30px;
}
/* </carousel-2> */