/* Hero Spacing Utility - Accounts for Fixed Navbar */
:root {
  --navbar-height: 70px; /* Approximate navbar height */
  --navbar-height-mobile: 60px; /* Mobile navbar height */
}

/* Apply to all hero sections to account for fixed navbar */
.hero,
.cinematic-hero,
.about-hero-section,
.services-hero-section {
  padding-top: calc(var(--navbar-height) + 2rem) !important;
}

/* Mobile adjustments */
@media (max-width: 768px) {
  .hero,
  .cinematic-hero,
  .about-hero-section,
  .services-hero-section {
    padding-top: calc(var(--navbar-height-mobile) + 1.5rem) !important;
  }
}

@media (max-width: 480px) {
  .hero,
  .cinematic-hero,
  .about-hero-section,
  .services-hero-section {
    padding-top: calc(var(--navbar-height-mobile) + 1rem) !important;
  }
}

/* Ensure hero content is properly positioned */
.hero-parallax-content {
  min-height: calc(100vh - var(--navbar-height));
}

@media (max-width: 768px) {
  .hero-parallax-content {
    min-height: calc(100vh - var(--navbar-height-mobile));
  }
}

/* Dynamic navbar height detection */
@media (max-width: 768px) {
  :root {
    --navbar-height: var(--navbar-height-mobile);
  }
}