/* =============================================
   PERFORMANCE CSS - Critical above-fold styles
   Merged from multiple inline <style> blocks
   ============================================= */

/* WhatsApp Float Button */
.float1 {
    position: fixed;
    width: 60px; height: 60px;
    bottom: 30px; left: 20px;
    background-color: #25d366;
    color: #FFF;
    border-radius: 50px;
    text-align: center;
    font-size: 40px;
    z-index: 100;
}
.my-float1 { margin-top: 10px; }
.logo-box-style2 img { height: 70px; }

/* Animations */
@keyframes seaFloat {
  0%,100% { transform: translateY(0px); }
  50% { transform: translateY(-8px); }
}
.sea-float {
  animation: seaFloat 4s ease-in-out infinite;
  display: inline-block;
}

@keyframes zigZagWave {
  0%,100% { transform: translateY(0); }
  25% { transform: translateY(-3px); }
  75% { transform: translateY(3px); }
}
.wave-word {
  display: inline-block;
  animation: zigZagWave 2.5s infinite ease-in-out;
  margin-right: 4px;
}

@keyframes subtleFloat {
  0%,100% { transform: translateY(0px); }
  50% { transform: translateY(-5px); }
}
.floating-logo {
  animation: subtleFloat 4s ease-in-out infinite;
  display: inline-block;
}

/* Nav wave bounce */
.main-menu .navigation > li {
  animation: zigZagWave 1.5s infinite ease-in-out;
  display: inline-block;
}
.main-menu .navigation > li:nth-child(1) { animation-delay: 0.0s; }
.main-menu .navigation > li:nth-child(2) { animation-delay: 0.15s; }
.main-menu .navigation > li:nth-child(3) { animation-delay: 0.30s; }
.main-menu .navigation > li:nth-child(4) { animation-delay: 0.45s; }
.main-menu .navigation > li:nth-child(5) { animation-delay: 0.60s; }
.main-menu .navigation > li:nth-child(6) { animation-delay: 0.75s; }
.main-menu .navigation > li:nth-child(7) { animation-delay: 0.90s; }

/* Highlight Boxes */
.single-highlight-box {
  box-shadow: 0 15px 40px rgba(0,0,0,0.12) !important;
  transition: transform 0.4s ease, box-shadow 0.4s ease !important;
  border-radius: 4px;
  background-color: #fff;
  z-index: 2;
  position: relative;
}
.single-highlight-box:hover {
  transform: translateY(-12px) !important;
  box-shadow: 0 30px 60px rgba(0,0,0,0.2) !important;
}