/** Main Body / Hero Title **/
.welcome-section {
  background-image: url('./img/hero-background-1.jpg');
}


/** Main Body / Intro Section **/

.intro-section {
  position: relative;
  padding: 6rem 1.5rem 8rem;
}

.intro-content {
  max-width: 40rem;
  margin: 0 auto;
  text-align: center;
  color: var(--text-100);
}

.intro-content h2 {
  font-size: 4.5vw;
  font-weight: 600;
  margin-bottom: 1.25rem;
}

.intro-content p {
  line-height: 1.6;
}
 
  

  
  /** Main Body / History Section - Img and Text **/
  
  .cat-img img {
    width: 30vw; 
    height: auto; 
    max-width: 100%;
    display: block; 
    margin: 2rem 0;
  }
  
  .history-section {
    padding: 3rem 0;
  }
  
  .history-content {
    max-width: 50rem;
    margin: 4rem auto;
  }
  
  .history-item {
    display: flex;
    justify-content: space-between;
    color: var(--text-100);
    margin-bottom: 8rem;
    position: relative;
  }
  
  .history-text {
    width: 28rem;
    line-height: 1.5;
  }
  
  .history-text h2 {
    font-size: 1.25rem;
    font-weight: 600;
    margin-bottom: 1rem;
  }
  
  .img-leaf {
    width: 6vw;
    height: 6vw;
    margin-top: 2.5rem;
  }

  .flower-left {
    position: absolute;
    left: 0;
    top: 0;
    width: 80px;
    height: 80px;
    margin-top: 0;
  }

  .align-end {
    justify-content: flex-end;
  }

  .pos-right {
    margin-right: 10.9375rem;
  }
  
  .space-between {
    justify-content: space-between;
  }



/** Animation **/
/* No script adds an "animate" class and there's no hover on touch
   devices, so text gated behind opacity: 0 until hover/animate never
   appeared on mobile. Play the fade-in once on load instead, so the
   content is always reliably visible. */
.history-texts,
.history-text {
  animation: fadeInUp 0.8s ease both;
}


.history-section {
  scroll-margin-top: 50vh;
}


/** Responsive **/
@media (max-width: 900px) {
  .intro-section {
    padding: 4.5rem 1.25rem 6.5rem;
  }

  .cat-img img {
    width: 45vw;
    margin: 2rem auto;
  }

  .history-content {
    margin: 2rem auto;
    padding: 0 20px;
  }

  .history-item {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 1.5rem;
    margin-bottom: 4rem;
  }

  .history-text {
    width: 100%;
    max-width: 32rem;
  }

  .img-leaf {
    width: 80px;
    margin-top: 0;
  }

  .pos-right {
    margin-right: 0;
  }
}