* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {

  font-family: sans-serif;
  overflow-x: hidden;
  padding-top: 50px;
  padding: 0px;
}
h4, p{
  text-align: left;
  margin-left: 0px;
}
/* Force sections to take up the full screen height */
.page-section {
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow-x: hidden;
  overflow-y: visible;
  top: 50px;
}

.page-content {
  height: 100vh;
  display: flex;
  justify-content: start;
  align-items: start;
  overflow-x: hidden;
  overflow-y: visible;
  padding: 6px 6px 6px 6px;
  margin-top: 50px;
  position: relative;
}

.opening-section {
  height: 100vh;
}

/* Background flavors for visual distinction */
.bg-0 { background-color: #B4DDF2; color: #1f2937; }
.bg-1 { background-color: #B4DDF2; color: #1f2937; }
.bg-2 { background-color: #FFC761; color: #1f2937 }
.bg-3 { background-color: #B5DFCF; color: #1f2937 }
.bg-4 { background-color: #C7B7DA; color: #1f2937 }
.bg-5 { background-color: #ffb977;}
.price-color {
  color: #262262;
}
.header {
  position: fixed;
  top:0px;
  z-index: 12;
  margin-bottom: 50px;
}

.head-color {
  color: #43136D;
}

/* The INITIAL state of the content before it's scrolled into view */
.animate-right-1 {
  opacity: 0;
  transform: translateX(50%);
  transition: opacity 0.8s ease-out, transform 0.8s ease-out; /* Smooth transition */
}

.animate-right-2 {
  opacity: 0;
  transform: translateX(50%);
  transition: opacity 1.2s ease-out, transform 0.8s ease-out; /* Smooth transition */
}


.animate-main-pic {
  opacity: 0;
  transform: translateY(30%);
  transition: opacity 0.8s ease-out, transform 0.8s ease-out; /* Smooth transition */
  z-index: 10;
}

.animate-main-pic-accent {
  opacity: 0;
  transform: translateY(40%);
  transition: opacity 0.8s ease-out, transform 0.8s ease-out; /* Smooth transition */
  z-index: 1;
}

.price-box {
  background-image: url(./images/price-box.png);
  background-repeat: no-repeat;
  background-size: cover;
}

.animate-left {
  opacity: 0;
  transform: translateX(-50%);
  transition: opacity 0.8s ease-out, transform 0.8s ease-out; /* Smooth transition */
}

.animate-opening {
  opacity: 0;
  transform: translateY(140px);
  transition: opacity 0.8s ease-out, transform 0.8s ease-out; /* Smooth transition */
}

.animate-fair-text {
  opacity: 0;
  transform: translateY(-250px);
  transition: opacity 0.8s ease-out, transform 0.8s ease-out; /* Smooth transition */
}

/* The FINAL state triggered by JavaScript when the page is scrolled */
.animate-right-1.visible {
  opacity: 1;
  transform: translateX(0);
}

.animate-right-2.visible {
  opacity: 1;
  transform: translateX(0);
}

.animate-left.visible {
  opacity: 1;
  transform: translateX(0);
}

.animate-main-pic.visible {
  opacity: 1;
  transform: translateY(0);
}

.animate-main-pic-accent.visible {
  opacity: 1;
  transform: translateY(0);
}

.animate-opening.visible {
  opacity: 1;
  transform: translateY(0);
}

.animate-fair-text.visible {
  opacity: 1;
  transform: translateY(-250);
}

/* Optional: Respect user accessibility choices for reduced motion */
@media (prefers-reduced-motion: reduce) {
  .animate-right-1 .animate-right-2 .animate-left .animate-main-pic .animarte-main-pic-accent .animate-opening{
    opacity: 1;
    transform: none;
    transition: none;
  }
}