/* assets/css/style.css */

/* Responsive YouTube background video */
.video-iframe {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
}

/* Mobile Portrait (vertical phone) — fill height, crop sides */
@media (orientation: portrait) {
  .video-iframe {
    width: 177.78vh;
    /* 16:9 ratio */
    height: 100vh;
  }
}

/* Desktop & Landscape — fill width, crop top/bottom */
@media (orientation: landscape) {
  .video-iframe {
    width: 100vw;
    height: 56.25vw;
    /* 9/16 ratio */
  }
}

/* Optional: subtle hover glow for social buttons */
.social-btn:hover {
  box-shadow: 0 0 20px rgba(255, 255, 255, 0.4);
  transform: translateY(-2px);
}

/* Background Animation Effects */
@keyframes float {
  0%,
  100% {
    transform: translateY(0px) translateX(0px);
  }

  50% {
    transform: translateY(-20px) translateX(10px);
  }
}

@keyframes float-slow {
  0%,
  100% {
    transform: translateY(0px);
  }

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

@keyframes gradient-move {
  0% {
    transform: translateX(-15%) translateY(-10%);
  }

  50% {
    transform: translateX(10%) translateY(10%);
  }

  100% {
    transform: translateX(-15%) translateY(-10%);
  }
}

.animate-gradient {
  animation: gradient-move 12s ease-in-out infinite alternate;
}

.animate-float {
  animation: float 6s ease-in-out infinite;
}

.animate-float-slow {
  animation: float-slow 9s ease-in-out infinite;
}

/* Floating Effects */
@keyframes smoothFloat {
  0%,
  100% {
    transform: translateY(0px);
  }

  50% {
    transform: translateY(-18px);
  }
}

.animate-float-icon {
  animation: smoothFloat 6s ease-in-out infinite;
}

/* Testimonials Slider */
.testimonial-slide {
  display: none;
}

.testimonial-slide.active {
  display: block;
}

/* Glow Line Animation */
@keyframes pulseLine {
  0% {
    width: 0%;
  }

  100% {
    width: 100%;
  }
}

.animated-line {
  animation: pulseLine 2s ease forwards;
}

.testimonial-slide {
  min-height: 240px;
  display: none;
  opacity: 0;
  transition: opacity 0.4s ease-in-out;
}

.testimonial-slide.active {
  display: block;
  opacity: 1;
}
/* <!-- Floating Animation CSS --> */
@keyframes float {
  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-10px);
  }
}

.animate-float {
  animation: float 5s ease-in-out infinite;
}

.animate-float-delay {
  animation: float 7s ease-in-out infinite;
}

.kerala-main-nav {
  order: 3;
  width: 100%;
  padding-top: 0.75rem;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
  color: #111827;
  font-size: 18px;
  font-weight: 600;
}

.kerala-main-nav__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.5rem 1rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.kerala-main-nav__link,
.kerala-main-nav__trigger {
  color: inherit;
  white-space: nowrap;
  transition: color 0.2s ease;
}

.kerala-main-nav__link:hover,
.kerala-main-nav__trigger:hover {
  color: #047857;
}

.kerala-main-nav
  .dropdown.current
  > .kerala-main-nav__dropdown
  > .kerala-main-nav__trigger {
  color: #047857;
}

.kerala-main-nav__dropdown {
  position: relative;
}

.kerala-main-nav__trigger {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
  list-style: none;
}

.kerala-main-nav__trigger::-webkit-details-marker {
  display: none;
}

.kerala-main-nav__submenu {
  position: absolute;
  top: 100%;
  left: 50%;
  z-index: 50;
  display: none;
  width: min(20.5rem, calc(100vw - 2rem));
  margin: 0;
  padding: 1rem 0;
  transform: translateX(-50%);
  background: #fff;
  border-radius: 0.75rem;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
  list-style: none;
  font-size: 18px;
  font-weight: 400;
  overflow: hidden;
}

.kerala-main-nav__dropdown[open] > .kerala-main-nav__submenu {
  display: block;
}

.kerala-main-nav__submenu a {
  display: block;
  padding: 1rem 2.5rem;
  color: #111827;
}

.kerala-main-nav__submenu a:hover,
.kerala-main-nav__submenu a:focus-visible {
  background: #f3f4f6;
}

@media (min-width: 1280px) {
  .kerala-main-nav {
    position: absolute;
    top: 50%;
    left: 50%;
    width: max-content;
    padding-top: 0;
    transform: translate(-50%, -50%);
    border-top: 0;
    font-size: 18px;
  }

  .kerala-main-nav__list {
    flex-wrap: nowrap;
  }
}