/*
 * BRAINSCIENTIST - Hero Section
 * Clean parallax hero with smooth transitions
 */
body {
  margin: 0;
}
/* Hero container */
.hero {
  position: relative;
  height: 85vh;
  min-height: 500px;
  max-height: 900px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: white;
  overflow: hidden;
  background: var(--color-secondary);
}
.hero.with-background {
  background: transparent;
}
/* Parallax background image */
.plx {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 120%;
  /* Extra height for parallax movement */
  object-fit: cover;
  object-position: center;
  z-index: 0;
  /* Smooth fade at bottom */
  mask-image: linear-gradient(to bottom, black 0%, black 70%, transparent 100%);
  -webkit-mask-image: linear-gradient(to bottom, black 0%, black 70%, transparent 100%);
}
/* Hero wrapper for content centering */
.herowrapper {
  position: relative;
  z-index: 10;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
/* Overlay text container */
.overlay-text {
  position: relative;
  z-index: 10;
  padding: 2rem;
  max-width: 800px;
}
.overlay-text p, .overlay-text button {
  display: none;
}
/* Hero title / Logo */
.hero-title {
  margin: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}
.hero-title img {
  width: 100%;
  max-width: 450px;
  height: auto;
  transition: all var(--transition-slow);
}
/* Fixed header state (when scrolled) */
.hero-title.fixed-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  z-index: 1000;
  background: var(--color-primary, #6B4423);
  /* Brown background */
  box-shadow: var(--shadow-md);
  padding: 0;
  /* Remove padding, use height instead */
  height: 70px;
  /* Fixed height */
  display: flex;
  justify-content: center;
  align-items: center;
  /* This should center vertically */
  animation: none;
  /* Remove animation for smoother scroll */
}
@keyframes slideDown {
  from {
    transform: translateY(-100%);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}
.hero-title.fixed-header img {
  width: auto;
  max-width: 280px;
  height: 32px;
  /* Fixed height for logo */
  background: transparent !important;
  /* Remove any background */
  filter: brightness(0) invert(1);
  /* Better way to make logo white */
  display: block;
  margin: 0 auto;
  /* Extra centering */
}
/* Adjust herowrapper when fixed */
.herowrapper:has(.fixed-header) {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
  background: var(--color-primary);
  padding: 0;
  transition: none;
}
/* Ensure no backgrounds on any child elements in fixed state */
.hero-title.fixed-header, .hero-title.fixed-header * {
  background-color: transparent !important;
}
/* Only the header bar itself should have the brown background */
.hero-title.fixed-header {
  background: var(--color-primary, #6B4423) !important;
}
/* Body padding when header is fixed */
body:has(.fixed-header) {
  padding-top: 0;
  /* Handled by sections */
}
/* Mobile adjustments */
@media screen and (max-width: 768px) {
  .hero {
    height: 70vh;
    min-height: 400px;
  }
  .hero-title img {
    max-width: 280px;
  }
  .overlay-text {
    padding: 1rem;
  }
  .hero-title.fixed-header {
    height: 56px;
    padding: 0;
  }
  .hero-title.fixed-header img {
    height: 24px;
    max-width: 200px;
  }
}
/* Large screens */
@media screen and (min-width: 1200px) {
  .hero {
    height: 90vh;
  }
  .hero-title img {
    max-width: 500px;
  }
}

/*******************************************************************/
/* ftrtch dino */
/* [type: CSS] [file:home-hero] [54.374] DESIGN*/
/*******************************************************************/
/* 0.2 P>P */
/* db 84 */