/* ========== Hero Section ========== */
/* Full viewport height hero section, minimum 600px for small screens.
   Flexbox centers content both vertically and horizontally.
   White text color via CSS variable. */
.hero-section {
  height: 100vh;                  /* Fill entire viewport height */
  min-height: 600px;              /* At least 600px tall */
  position: relative;             /* Needed for absolute overlay */
  display: flex;                  /* Flex container for centering */
  justify-content: center;        /* Center horizontally */
  align-items: center;            /* Center vertically */
  text-align: center;             /* Center text inside */
  color: var(--white-color);      /* White text via CSS variable */
}

/* Semi-transparent overlay above hero background image */
.hero-overlay {
  position: absolute;
  inset: 0;                       /* Top, right, bottom, left = 0 (fill parent) */
  background: rgba(0, 40, 85, .6);/* Navy blue with 60% opacity */
}

/* Hero content sits above overlay using z-index */
.hero-content {
  position: relative;
  z-index: 1;
}

/* Main hero title: big, bold, spacing below */
.hero-title {
  font-size: 3.5rem;
  margin-bottom: 1rem;
  font-weight: 700;
}

/* Hero subtitle: medium size, lighter font, faded slightly, spacing below */
.hero-subtitle {
  font-size: 1.4rem;
  margin-bottom: 2.5rem;
  font-weight: 300;
  opacity: .9;
}

/* ========== Entrance Animation on Page Load ========== */
/* Start slightly lower and invisible, animate upward and fade in */
.animate-on-load {
  opacity: 0;
  transform: translateY(30px);
  animation: fadeInUp .8s forwards;   /* Triggers keyframes below */
}
/* Add delay for staggered animation effect */
.animate-on-load.delay-1 { animation-delay: .3s; }
.animate-on-load.delay-2 { animation-delay: .6s; }
/* Keyframes for fade-in and move-up effect */
@keyframes fadeInUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ========== Scroll Down Indicator Styles ========== */
/* Bouncing icon at bottom center of hero section to indicate scrolling */
.scroll-down-indicator {
  position: absolute;
  bottom: 30px;
  left: 50%;
  transform: translateX(-50%);       /* Perfectly center horizontally */
  z-index: 1;                        /* Above overlay */
  animation: bounce 2s infinite;     /* Infinite bounce animation */
}
/* Icon inside the indicator: large, semi-transparent white */
.scroll-down-indicator i {
  font-size: 1.5rem;
  color: rgba(255,255,255,.7);
}
/* Keyframes for bounce animation */
@keyframes bounce {
  0%, 20%, 50%, 80%, 100% { transform: translateX(-50%) translateY(0); }
  40% { transform: translateX(-50%) translateY(-10px); }
  60% { transform: translateX(-50%) translateY(-5px); }
}