.pricingHero {
  position: relative;
  width: 100%; 
  padding: 70px 10px; 
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-repeat: no-repeat;
  background-position: right top; 
  background-size: cover;
  min-height: 330px;

}

.pricingHero > div {z-index: 5; position: relative;}
.pricingHero p {margin: 0;}
.pricingHero .pricingSection {
  overflow: hidden; 
  margin: 0 auto; 
  background-color: #ADD893; 
  color: #fff; 
  width: auto; 
  max-width: 95%;  
  border-radius: 10px; 
  display: inline-block; 
  padding: 0 2rem; 
  box-shadow: 10px 10px 20px rgba(0 0 0 / .1); 
  position: absolute;
    top: 71%;

}
.pricingHero h1 {color: #fff; max-width: 500px; text-align: center; line-height: 1.5; font-size: 30px!important; margin-bottom: 60px;}
.pricingHero .pricingSection a:hover, .pricingHero .pricingSection a:visited h2 {text-decoration: none;}
 a#viewPricing:visited h2.viewLink {
    text-decoration: none !important;
  }
.pricingHero .pricingSection .date {font-size: 16px;}
.pricingHero .bgImage {height: 100%; width: 100%; position: absolute; z-index: -1; object-fit: cover;}
.pricingHero:after {content: ''; inset:0; background-color: #45AED6; opacity: 80%; position: absolute; opacity: 80%; z-index: 0; pointer-events: none;}
.pricingHero .pricingSection .top {transition: all 1s ease-in-out; height: 63px; overflow: hidden;}
.pricingHero .bottom {max-height: 0; transition: max-height 600ms ease-in-out; }
.pricingHero .flex {display:flex; justify-content: center; align-items: center;}
.pricingHero #viewPricing {font-size: 22px; color: #fff; text-align: center; display: flex; align-items: center; justify-content: center; height: 63px; width: 100%;}
.pricingHero .bottom.showPricing {max-height: 3300px;}
.pricingHero .viewLink {color: #fff; text-decoration: none; margin: 0 auto; display: inline; font-size: 26px;}
.pricingHero .priceBox p:first-of-type {font-size: 18px; font-weight: 600; letter-spacing: 1px;}
.pricingHero .cards {display: flex; gap: 2rem; justify-content: center; padding: 20px 10px; flex-wrap: wrap;}
.pricingHero .card {background-color: #37A9DD; border-radius: 10px; color: #fff; width: 200px; text-align: center; overflow: hidden; display: flex; flex-direction: column; }
.pricingHero .card .header {padding: 20px 10px; display: flex; flex-direction: column; justify-content: flex-start; align-items: center; flex: 1; background-color: #37A9DD;}
.pricingHero .colorWhite {color: #fff;}

.pricingHero .bottomText {padding: 20px 10px; font-style: italic; text-align: center;}

.pricingHero .card  .seasonTitle {font-size: 20px; margin-bottom: 5px; letter-spacing: 2px;}
.pricingHero .prices > div {background-color: #fff; color: #000;}
.pricingHero .prices > div:last-child {background-color: #F2F1F1;}
.pricingHero .priceBox {flex:1; padding: 20px 5px; color: #000; background: #fff; height: 100%;r}


.circle {
  width: 24px;
  height: 24px;
  background-color: #fff; /* Circle background color */
  border-radius: 50%; /* Make it round */
  position: relative;
  display:inline-block;
  right: -10px;
  cursor: pointer;
  
}

.circle::before,
.circle::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  background-color: #ADD893; /* Plus sign color */
}

/* Horizontal line of the plus sign */
.circle::before {
  width: 70%;
  height: 10%;
  margin-top: -5%; /* Half of height */
  margin-left: -35%; /* Half of width */

}

/* Vertical line of the plus sign */
.circle::after {
    opacity: 1;
  transition: opacity 300ms ease-in-out;
  width: 10%;
  height: 70%;
  margin-left: -5%; /* Half of width */
  margin-top: -35%; /* Half of height */
}
.circle.clicked::after {
opacity: 0;
}

@media (max-width:860px){
  .pricingHero .card .seasonTitle {font-size: 18px;}
  .pricingHero .viewLink {font-size: 18px; margin: 0 auto;}  
  .pricingHero #viewPricing {height: 45px;}
  .circle {height: 20px; width: 20px;}
  .pricingHero .cards {gap:1rem;}
  .pricingHero.containBG {background-size: contain;}
  .pricingHero .card {width: auto;}
  .pricingHero .pricingSection {padding: 0 5px;   left: 10px; right: 10px;}
  .pricingHero .pricingSection .date {line-height: 1.25; font-size: 13px;}
  .pricingHero .priceBox p:first-of-type {font-size: 14px; line-height:1.2;}
}