/* ==========================================
   DESKTOP NAVIGATION
========================================== */

.nav-link {
  position: relative;
  display: inline-flex;
  align-items: center;

  color: #0f2d5b;

  /* Active underline */
  background-image: linear-gradient(to right, #00b4f0, #00b4f0);

  background-repeat: no-repeat;
  background-position: center bottom;
  background-size: 0% 3px;

  transition:
    color 0.25s ease,
    background-size 0.3s ease;
}

.nav-link:hover {
  color: #00b4f0;
}

.nav-link.active {
  color: #00b4f0 !important;
  background-size: 100% 3px;
}
/* ==========================================
   FLOATING WHATSAPP BUTTON
========================================== */

.whatsapp-float {
  position: fixed;
  right: 24px;
  bottom: 24px;

  width: 60px;
  height: 60px;

  z-index: 999999;

  display: flex;
  align-items: center;
  justify-content: center;

  border-radius: 50%;

  background: #25d366;

  text-decoration: none;

  box-shadow:
    0 8px 25px rgba(0, 0, 0, 0.2),
    0 4px 12px rgba(37, 211, 102, 0.25);

  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease;
}

/* WhatsApp SVG */

.whatsapp-float img {
  display: block;

  width: 30px;
  height: 30px;

  object-fit: contain;

  transition: transform 0.25s ease;
}

/* Hover */

.whatsapp-float:hover {
  transform: scale(1.1);

  box-shadow:
    0 12px 30px rgba(0, 0, 0, 0.28),
    0 5px 16px rgba(37, 211, 102, 0.4);
}

.whatsapp-float:hover img {
  transform: scale(1.05) rotate(-6deg);
}

/* ==========================================
   PULSE ANIMATION
========================================== */

.whatsapp-float::before {
  content: "";

  position: absolute;

  inset: 0;

  z-index: -1;

  border-radius: 50%;

  background: #25d366;

  animation: whatsappPulse 2.2s ease-out infinite;
}

@keyframes whatsappPulse {
  0% {
    transform: scale(1);
    opacity: 0.45;
  }

  70% {
    transform: scale(1.55);
    opacity: 0;
  }

  100% {
    transform: scale(1.55);
    opacity: 0;
  }
}

/* ==========================================
   MOBILE
========================================== */

@media (max-width: 640px) {
  .whatsapp-float {
    right: 16px;
    bottom: 16px;

    width: 54px;
    height: 54px;
  }

  .whatsapp-float img {
    width: 27px;
    height: 27px;
  }
}