/* ================= FONT IMPORTS ================= */
@import url("https://fonts.googleapis.com/css2?family=Archivo+Black&family=Josefin+Sans:ital,wght@0,100..700;1,100..700&family=Marcellus&display=swap");

/* ================= FONT FAMILIES ================= */
.font-josefin {
  font-family: "Josefin Sans", sans-serif;
  font-optical-sizing: auto;
  font-style: normal;
}

/* ================= BODY & HTML ================= */
html,
body {
  height: 100%;
  margin: 0;
}

/* ================= MARQUEE ANIMATION ================= */
@keyframes marquee {
  0% {
    transform: translateX(100%);
  }

  100% {
    transform: translateX(-100%);
  }
}

.marquee {
  overflow: hidden;
  white-space: nowrap;
}

.marquee span {
  display: inline-block;
  padding-left: 100%;
  animation: marquee 20s linear infinite;
}

/* ================= SWIPER PAGINATION ================= */
.swiper-pagination-bullet {
  background: white;
  opacity: 0.5;
}

.swiper-pagination-bullet-active {
  opacity: 1;
}

/* ================= PREMIUM CARD HOVER EFFECT ================= */
.premium-card {
  transition: 0.4s ease;
}

.premium-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 40px rgba(212, 175, 55, 0.25);
}

/* ================= FACILITY SWIPER ALIGNMENT ================= */
.facilitySwiper .swiper-wrapper {
  align-items: stretch;
}

.facilitySwiper .swiper-slide {
  height: auto;
  display: flex;
}

.facilitySwiper .swiper-slide > div {
  height: 100%;
}

/* ================= CARD HOVER EFFECT ================= */
.card {
  transition: 0.4s ease;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
}

.card:hover {
  transform: translateY(-8px);
  box-shadow: 0 25px 50px rgba(31, 44, 108, 0.18);
}

/* ================= GALLERY IMAGE HOVER ================= */
.gallery-img {
  transition: transform 0.5s ease;
}

.gallery-img:hover {
  transform: scale(1.1);
}

/* ================= RESPONSIVE UTILITIES ================= */
@media (max-width: 768px) {
  .text-4xl {
    font-size: 2rem;
  }

  .text-6xl {
    font-size: 3rem;
  }
}
