/* ----------------------------------------------------
   GLOBAL SMOOTH SCROLL (extra safety)
----------------------------------------------------- */
html {
  scroll-behavior: smooth;
}

/* ----------------------------------------------------
   NAVIGATION LINKS
----------------------------------------------------- */
.nav-link {
  @apply text-gray-700 dark:text-gray-200 hover:text-green-700 dark:hover:text-green-400 transition;
}

.nav-link-mobile {
  @apply py-2 text-gray-800 dark:text-gray-200 border-b border-gray-200 dark:border-gray-700;
}

/* ----------------------------------------------------
   REVEAL ON SCROLL ANIMATION
----------------------------------------------------- */
.reveal {
  opacity: 0;
  transform: translateY(25px);
  transition: all 0.75s ease-out;
}

.reveal.show {
  opacity: 1;
  transform: translateY(0);
}

/* ----------------------------------------------------
   SWIPER CUSTOM STYLING
----------------------------------------------------- */

/* Pagination bullets */
.swiper-pagination-bullet {
  background: rgba(255, 255, 255, 0.7) !important;
  opacity: 1;
  width: 10px;
  height: 10px;
}

.swiper-pagination-bullet-active {
  background: #22c55e !important; /* Tailwind green-500 */
}

/* Navigation arrows */
.swiper-button-next,
.swiper-button-prev {
  color: white !important;
  text-shadow: 0 0 10px rgba(0, 0, 0, 0.8);
  transition: transform 0.25s ease;
}

.swiper-button-next:hover,
.swiper-button-prev:hover {
  transform: scale(1.15);
}

/* Hide arrows on small screens */
@media (max-width: 480px) {
  .swiper-button-next,
  .swiper-button-prev {
    display: none;
  }
}

/* ----------------------------------------------------
   CONTACT FORM INPUT HIGHLIGHT
----------------------------------------------------- */
input,
textarea,
select {
  transition: border 0.3s ease, box-shadow 0.3s ease;
}

input:focus,
textarea:focus,
select:focus {
  border-color: #22c55e !important;
  box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.35);
}

/* ----------------------------------------------------
   SERVICE CARD EFFECT
----------------------------------------------------- */
.service-card {
  transition: all 0.3s ease;
}

.service-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 15px 32px rgba(0, 0, 0, 0.15);
}

/* ----------------------------------------------------
   WHATSAPP POPUP ANIMATION
----------------------------------------------------- */
#whatsapp-popup {
  animation: fadeInPopup 0.4s ease-out;
}

@keyframes fadeInPopup {
  from {
    opacity: 0;
    transform: translateY(25px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ----------------------------------------------------
   SCROLL TOP BUTTON
----------------------------------------------------- */
#scroll-top {
  transition: all 0.3s ease;
}

#scroll-top:hover {
  transform: scale(1.15);
}

/* Dark mode image tweak */
.dark img {
  opacity: 0.97;
}

/* ----------------------------------------------------
   MOBILE MENU SMOOTH OPEN
----------------------------------------------------- */
#mobile-menu {
  transition: max-height 0.4s ease;
}

/* JS adds "open" class dynamically */
#mobile-menu.open {
  max-height: 280px;
}