/* ===============================
   Header Height Optimization Fix
   =============================== */

/* Global adjustment */
.header .main-menu {
  padding: clamp(8px, 0.6vw, 16px) 0 !important;
}

.header .main-menu .navigation .left-side {
  gap: clamp(10px, 0.8vw, 24px) !important;
}

.header .main-menu .navigation .left-side .header-logo {
  width: clamp(100px, 7vw, 240px) !important;
}

/* Sticky header spacing */
.stricky-header .sticky-header__content {
  padding: clamp(6px, 0.5vw, 14px) !important;
}

/* Mobile-specific optimizations */
@media (max-width: 480px) {
  .header .main-menu {
    padding: 6px 0 !important;
  }

  .header .main-menu .navigation .left-side .header-logo {
    width: 90px !important;
  }
}
/* ===============================
   HERO CLOUD OVERLAP FIX (mobile portrait)
   =============================== */

/* Ensure hero is a positioning context */
.hero-banner{
  position: relative;
  overflow: hidden;
}

/* Keep the actual hero content above clouds */
.hero-banner .row{
  position: relative;
  z-index: 5;
}

/* Clouds stay at bottom */
.hero-banner .cloud-bg,
.hero-banner .cloud{
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
}

/* MOBILE PORTRAIT: push clouds down + shrink them a bit */
@media (max-width: 576px) and (orientation: portrait){
  .hero-banner .cloud-bg,
  .hero-banner .cloud{
    transform: translateY(28px) scaleY(0.85);
    transform-origin: bottom;
  }
}

/* Optional: if still slightly covering, increase translateY a little */
@media (max-width: 380px) and (orientation: portrait){
  .hero-banner .cloud-bg,
  .hero-banner .cloud{
    transform: translateY(38px) scaleY(0.80);
  }
}