/* Shared Header
–––––––––––––––––––––––––––––––––––––––––––––––––– */

.section.brand-head {
    padding: 10px 0;
    background-color: #662d91;
}

.brand-head h6 {
    margin: 0;
    color: khaki;
    font-size: 1rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.2rem;
}



/* Shared Button
–––––––––––––––––––––––––––––––––––––––––––––––––– */

.button {
    border-radius: 100px;
    font-size: clamp(2.5rem, 2vw + 1rem, 3rem) !important;
    font-weight: 800 !important;
    -webkit-box-shadow: 0px 0px 12px 3px rgba(0,0,0,0.4); 
    box-shadow: 0px 0px 12px 3px rgba(0,0,0,0.4);
}



/* Hero
–––––––––––––––––––––––––––––––––––––––––––––––––– */

.landing-type-block {
    padding-bottom: 1rem;
}

.landing-type-block img.logo {
    width: 85%;
}

.fairy {
    height: 50vh; 
}

.section.hero {
    background-image: linear-gradient(180deg, #c40075 0%, #a2015f 100%);
}

.hero-heading {
    font-size: 6rem;
    font-weight: 200;
    line-height: 0.95;
    color: #fff;
    margin: 2rem auto 4rem auto;
    letter-spacing: -0.4rem;
}



/* Sections
–––––––––––––––––––––––––––––––––––––––––––––––––– */

.section {
    text-align: center;
    padding: 3rem 0;
}
.section-heading,
.section-description {
    margin-bottom: 1.2rem;
}

.section.events {
    background-color: lavender; 
    margin-top: 4rem;
    padding-top: 4rem;
    padding-bottom: 6rem;
}

.section.events h1 {
    color: #c40075;
}

.section.events h4 {
    font-weight: 700;
    color: #392F77;
    margin-bottom: 1rem;
}

.section.events .button {
    margin-top: 4rem;
    background-color: #392F77;
    border: none;
    color: #fff;
}

.pricing  {
    padding: 0 !important;
}


.pricing p {
    font-size: 1.5rem;
    font-weight: 300 !important;
    margin-bottom: 0.5rem !important;
}


/* Details
–––––––––––––––––––––––––––––––––––––––––––––––––– */

.one-third.column.details {
    padding: 1.5rem 1rem;
    color: #fff;
    background-color: #392F77;
    border-radius: 10px;
    margin-bottom: 2rem;
}

.one-third.column.details img {
    display: none;
}

.detail-subhead {
    margin-bottom: 1.5rem;
    color: #bad902;
    font-size: 3rem;
    font-weight: 300;
}

.detail-info {
    margin-bottom: 0.75rem;
    font-size: 2rem;
}

.detail-info a {
    color: #bad902;
    font-weight: 800;
    display: block;
    margin-top: 1.5rem;
}

.detail-info a:hover {
    color: #fff;
}


.details .button {
    font-size: 2rem !important;
    padding: 0 30px;
    margin-top: 1rem;
}



/* Other
–––––––––––––––––––––––––––––––––––––––––––––––––– */
hr {
    margin-top: 2rem;
    margin-bottom: 2.5rem;
    border-width: 0;
    border-top: 1px solid #bbb;
}


/* 550 and up
–––––––––––––––––––––––––––––––––––––––––––––––––– */

@media (min-width: 550px) {
  
  .brand-head h6 {
      font-size: 1.2rem;
  }

  .hero-heading {
      font-size: clamp(4rem, 6vw + 1rem, 9rem);
  }
  
  .landing-type-block {
      padding-bottom: 4rem;
  }
  
  .landing-type-block img.logo {
      width: 90%;
  }

  .section.hero {
      background-image: linear-gradient(180deg, #c40075 0%, #a2015f 100%);
  }

  .section.hero .container {
      width: 90%;
      margin-bottom: -3rem;
      background-image: url('../img/iolanthe-landing-page-fairy.png');
      background-repeat: no-repeat;
      background-size: 50%; 
      background-position: top right;
  }

  .row-details {
      display: flex; /* Creates the flex container */
      align-items: stretch; /* Default behavior: makes all items the same height */
  }
  
  .one-third.column.details {
      flex: 1; /* Optional: makes all columns equal width */
  }
  
  .one-third.column.details img {
      display: flex;
      border-radius: 10px;
      width: 100%;
  }
  
  .detail-subhead {
      /* font-size: clamp(1.25rem, 2vw + 1rem, 5rem); */
      font-size: 2.5rem;
      margin-bottom: 1rem;
  }

  .detail-info {
      font-size: 1.5rem;
      margin-bottom: 0.65rem;
  }

  .details .button {
      font-size: clamp(1rem, 1vw + 1rem, 2rem) !important;
      padding: 0 15px;
      margin: 0.5rem 0 2rem 0;
  }
  
  .section.events .container {
      width: 80%;  
  }
  
  .section.events h5 {
      font-size: 1.7rem;
  }

}



/* 750 and up
–––––––––––––––––––––––––––––––––––––––––––––––––– */

@media (min-width: 750px) {
  
  .brand-head h6 {
      font-size: 1.5rem;
  }
  
  .landing-type-block img.logo {
      width: 100%;
  }

  .one-third.column.details {
      color: #fff;
      width: 30.6666666667%; 
  }

  .detail-subhead {
      font-size: 3rem;
  }
  
  .detail-info {
      font-size: 1.65rem;
  }

  .section.events .container {
      width: 76%;  
  }
  
  .section.events h5 {
      font-size: 1.9rem;
  }
  
  
  
  
    
  .section-description {
      max-width: 60%;
      margin-left: auto;
      margin-right: auto;
  }
 
  .categories {
      padding: 15rem 0 8rem;
  }
}



/* 1000 and up
–––––––––––––––––––––––––––––––––––––––––––––––––– */

@media (min-width: 1000px) {
  
  .detail-subhead {
      /* font-size: clamp(1.25rem, 2vw + 1rem, 5rem); */
      font-size: 4rem;
  }

  .detail-info {
      font-size: 2rem;
  }

  .section.events .container {
      width: 72%;  
  }

  .section.events h5 {
      font-size: 2.1rem;
  }


}







/* Values
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.value-multiplier {
  margin-bottom: .5rem;
  color: #11DFC7;
}
.value-heading {
  margin-bottom: .3rem;
}
.value-description {
  opacity: .8;
  font-weight: 300;
}

/* Help
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.get-help {
  border-bottom: 1px solid #ddd;
}

/* Categories
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.categories {
  background-image: url('../images/values-bg.jpg');
  background-size: cover;
  color: #fff;
}
.categories .section-description { 
  margin-bottom: 4rem;
}