/* Hero Section Spacing Best Practices
   ==========================================
   Consistent top spacing for hero/banner sections across all pages
   Uses CSS custom properties for maintainability
   Responsive scaling based on device size
   ========================================== */

:root {
  /* Spacing scale - used for consistent margins/padding */
  --spacing-xs: 10px;
  --spacing-sm: 20px;
  --spacing-md: 30px;
  --spacing-lg: 60px;
  --spacing-xl: 80px;
  --spacing-xxl: 120px;
}

/* Hero/Banner section top spacing - applies to all pages */
.banner-area {
  padding-top: var(--spacing-xxl);
}

.breadcrumb-area {
  padding-top: var(--spacing-xl);
}

/* Adjust for different page types */
.banner-area.text-regular {
  padding-top: var(--spacing-xxl);
}

.banner-area.text-multi-weight {
  padding-top: var(--spacing-xxl);
}

/* City pages hero section */
.city-header {
  padding-top: var(--spacing-xl);
  margin-top: var(--spacing-md);
}

/* About page hero */
.about-style-four-area {
  padding-top: var(--spacing-lg);
}

/* Responsive adjustments */
@media (max-width: 1199px) {
  .banner-area {
    padding-top: var(--spacing-xl);
  }

  .breadcrumb-area {
    padding-top: var(--spacing-lg);
  }

  .city-header {
    padding-top: var(--spacing-lg);
  }

  .about-style-four-area {
    padding-top: var(--spacing-md);
  }
}

@media (max-width: 991px) {
  .banner-area {
    padding-top: var(--spacing-lg);
  }

  .breadcrumb-area {
    padding-top: var(--spacing-md);
  }

  .city-header {
    padding-top: var(--spacing-md);
    margin-top: var(--spacing-sm);
  }

  .about-style-four-area {
    padding-top: var(--spacing-md);
  }
}

@media (max-width: 767px) {
  .banner-area {
    padding-top: var(--spacing-lg);
  }

  .breadcrumb-area {
    padding-top: var(--spacing-lg);
  }

  .city-header {
    padding-top: var(--spacing-md);
  }

  .about-style-four-area {
    padding-top: var(--spacing-sm);
  }
}

@media (max-width: 576px) {
  .banner-area {
    padding-top: var(--spacing-lg);
  }

  .breadcrumb-area {
    padding-top: var(--spacing-lg);
  }

  .city-header {
    padding-top: var(--spacing-md);
  }

  .about-style-four-area {
    padding-top: var(--spacing-sm);
  }
}