#hero .text-wrapper p {
  font-weight: 600;
}
#hero .text-wrapper {
  align-items: center;
  justify-content: center;
  text-align: center;
}
#hero .text {
  max-width: 40em;
}
#hero .text h1 {
  font-size: clamp(1.75rem,1.75rem + 2vw, 3.75rem);
  margin-bottom: .25em;
}
#hero .text p {
  font-weight: 500;
}


#intro .text-wrapper {
  flex-basis: calc(55% - 7.5%);
  max-width: 45em;
}

#intro picture {flex-basis: calc(100% - 55% - 7.5%);}

#intro img {
  width:100%;
  min-width: 25em;
}

#intro .list {
  margin-top: 2em;
}
#intro .list b {
  font-weight: 800;
}
#intro .list li {
  font-size: 1.05rem;
  margin-bottom: 1em;
}
#intro .list li:last-child {
  margin:0 auto
}

/* Itinerary */
#itinerary .container {
    flex-direction: column;
    max-width: 80em;
    padding: clamp(2.5em,3.5em + 5vw,7.5em) 5em
}
#itinerary .text-wrapper {
  max-width: 40em;
}
#itinerary .text-wrapper h2 {
  text-align: center;
}
.accordion {
    margin-top: clamp(1.5em, 1em + 2vw, 3em);
}
.accordion article {
  display: flex;
  background-color:white;
  margin-bottom: 1em;
  cursor: pointer;
  box-shadow: 0 0 15px hsla(0,0%,0%,.01);
  transition: box-shadow .35s ease;
}
.accordion article:last-child {
  margin-bottom: 0;
}
.accordion button {
    display: flex;
    flex-direction: column;
    position: relative;
    font-weight: 400;
    flex-basis: 12.5%;
    min-width: 5em;
    max-width: 6em;
    padding:1.75em 1em;
    color:var(--gold-color);
    background-color:white;
    border:none;
    border-right: 1px solid var(--powder-color);
    cursor: pointer;
    transition: color .35s ease, background-color .35s ease;
  }
  .accordion button .day-count {
    display: flex;
    flex-direction: column;
  }
  .accordion button .day {
    font-weight: 800;
    font-size: .825em;
    text-transform: uppercase;
    letter-spacing: .125em;
    margin-bottom: .25em;
  }
  .accordion button .count {
    font-size: clamp(1.5rem, 1rem + 1vw, 2.25rem);
  }
  .accordion article:hover button, .accordion .active button {
    color:white;
    background-color: var(--gold-color);
  }
  .accordion article:hover, .accordion .active {
    box-shadow: 0 0 15px hsla(0,0%,0%,.15);
  }
  .accordion .panel {
    flex-basis: 87.5%;
    padding:1.75em;
  }
  .accordion .title {
    display: none;
  }
  .accordion .panel h3 {
    font-family: var(--font-header);
    font-weight: 500;
    font-size: clamp(1.425rem, 1rem + .5vw, 1.5rem);
    color:var(--brown-color);
    margin: 0 0 .5em;
  }
  .accordion .panel p {
    font-size: clamp(.9375rem, .5rem + .5vw, 1rem);
    line-height: 1.8;
    margin:0;}
  .accordion .panel ul {
    margin:.5em
  }
  .accordion ul li {
    position: relative;
    padding-left: 1.25em;
    margin-bottom: .5em;
    line-height: 1.8;
  }
  .accordion ul li:last-child {margin-bottom: 0;}
  .accordion ul li::after {
    content:"";
    position: absolute;
    top:12px;
    left:0;
    width:6px;
    height:6px;
    border-radius:50%;
    background-color:var(--gold-color)
  }
  
  #itinerary .buttons {
    display: flex;
    flex-direction: row;
    margin-top: 3em;
    width: 100%;
    justify-content: center;
  }
  #itinerary .buttons button, #itinerary .buttons a {
    display: flex;
    flex-basis: 50%;
    max-width: 20em;
    justify-content: center;
    align-items: center;
    color: white;
    background-color: var(--gold-color);
    border: none;
    border-radius: 3.5em;
    padding: .85em 1.25em;
    font-size: 1.125rem;
    line-height: 1.4;
    text-align: center;
    transition: background-color 0.35s ease, color .35s ease;
  }
  #itinerary .buttons button {
    flex-basis: calc(50% - .75em);
    margin-right: .75em;
    padding-right: 1em;
    cursor: pointer;
    min-width: 11em;
    background-color: var(--black-olive-color);
  }
  #itinerary .buttons i {
    display: flex;
    transform: rotate(-90deg);
    margin-left: .25em;
    color: var(--gold-color);
    transition: color .35s ease
  }
  #itinerary .buttons button:hover {
    background-color: var(--gold-color);
  }
  #itinerary .buttons button:hover i {
    color:white
  }
  #highlights .container {
    align-items: flex-start;
  }
  #highlights .text-wrapper {
    max-width: 35em;
    flex-basis: calc(60% - 7.5%);
  }
  #highlights img {
    width:100%;
  }
  #highlights li {
  position: relative;
  margin-bottom:.75em;
  padding-left: 1.25em;
  line-height: 1.8;
  }
  #highlights li:after {
  content:"";
  position: absolute;
  top:13px;
  left:0;
  width:6px;
  height:6px;
  border-radius:50%;
  background-color:var(--gold-color)
  }
  #highlights li:last-child {margin-bottom: 0;}

  #emblems {
    margin-top: .125em;
  }

  #CTA .container {
    flex-direction: row-reverse;
  }
  #CTA .text-wrapper.left {
    margin-right: 7.5%;
    margin-left: 0;
  }

 
  @media only screen and (max-width: 64rem) {
    #intro .container, #highlights .container {
      flex-direction: column;
    }
    #intro .text-wrapper.right{
      width:100%;
      margin-right: 0;
      margin-bottom: clamp(2.5em,2.5em + 3vw,5em)
    }
    #intro picture {flex-basis:100%;}
    #highlights .text-wrapper.left {
      margin-left: 0;
      flex-basis: 100%;
      max-width: 45em;
      margin-top: clamp(2.5em,2.5em + 3vw,5em)

    }
    #itinerary .container {
      padding: clamp(2.5em,3.5em + 5vw,7.5em) 1.5em;
      max-width: 55em;
    }    
    #CTA .container {
      padding-left: 1.5em!important;
      padding-right: 0;
    }
  }
  @media only screen and (max-width:40rem){
    .accordion h3 {
      display: none;
    }
    .accordion article {
      flex-direction: column;
      margin-bottom: .5em;
    }
    .accordion button {
      max-width: none;
      width: 100%;
      text-align: left;
      flex-direction: row;
      justify-content: space-between;
      align-items: center;
      padding:0;
      border-bottom:1px solid var(--powder-color);
      transition: color .35s ease, background-color .35s ease, border .35s ease
    }
    .accordion .active button {
      border-bottom: 1px solid #e2e1e0;
    }
    .accordion article:hover button, .accordion .active button {
      color:var(--brown-color);
      background-color: white;
    }
    .accordion button .day-count {
      padding: 1em 1em .85em;
      font-size: .875rem;
      text-align: center;
      color:white;
      background-color: var(--gold-color);
      margin-right: 1.25em;
      min-width:4em
    }
    .accordion button .day {font-weight: 700;}
    .accordion .panel {
      padding:0;
      margin: 0 1em;
      max-height: 0;
      overflow: hidden;
      transition: max-height .5s, margin .5s;
    }
    .accordion .itinerary-header {
      display: flex;
      flex-direction: row;
      align-items: center;
    }
    .accordion .title {
      display: block;
      font-family: var(--font-header);
      font-size: clamp(1.125rem, .5rem + .5vw, 1.25rem);
      color: var(--brown-color);
      font-weight: 500;
    }
    .accordion .active .panel {
      max-height:100em;
      margin: 1.25em 1em;
    }
    .accordion .active p,.accordion .active ul{
      opacity:1;
      visibility: visible;
      transition: opacity .75s .25s, visibility .75s .25s;
  }
  
  .accordion p, .accordion ul {
      opacity: 0;
      visibility: hidden;
      transition: opacity .35s, visibility .35s;
  }
    .icon-accordion {
      display: inline-block;
      position: relative;
      width: 12px;
      min-width: 12px;
      margin:0 1.25em;
      transition: transform .35s ease,width .35s ease;
    }
    
    .icon-accordion:before, .icon-accordion:after {
      content: '';
      height: 2px;
      left: 0;
      position: absolute;
      top: 50%;
      width: 100%;
      transform: translate3d(0,-50%,0) rotate(180deg);
      transition: transform 500ms ease,background-color .5s ease;
      background: var(--brown-color)
    }
    .icon-accordion:after {
      transform-origin: center;
      transform: translate3d(0,-50%,0) rotate(90deg);
    }
    
   .accordion .active .icon-accordion:before, .accordion .active .icon-accordion:after{
        transform: none;
        background-color: var(--gold-color);
    }

    #itinerary .buttons a {
      flex-basis: 100%;
      max-width: 15em;
    }

  }

  @media only screen and (max-width:32.5rem){
  #itinerary .buttons {
    flex-direction: column;
  }
  #itinerary .buttons a, #itinerary .buttons button {
    flex-basis: 100%;
    max-width: none;
  }
  #itinerary .buttons button {
    margin-right: 0;
    margin-bottom: .5em
  }

  }