@charset "UTF-8";
/* CSS Document */

#subBanner{
  background: none;
  padding: 8vh 0 0;
}

.cta-btn.primary{
  max-width: none;
  width: fit-content;
}

.text-wrap .cta-btn{
  margin-top: 1em;
}

.image-gfx{
  margin: 0rem auto;
}

.image-gfx::before {
  width: 450px;
  height: 450px;
}

.image-gfx::after{
  max-width: 400px;
  max-height: 400px;
}

.text-wrap .space-left{
  max-width: none;
}

#section1 .textSection::before{
  content: '';
  display: block;
  width: 95vw;
  height: calc(100% + 120px);
  background: var(--navy) url(thumbnaillarge/bg-dark-section.jpg) no-repeat top center / cover;
  position: absolute;
  top: -60px;
  left: 0;
  padding:0;
  border-radius: 0px 40px 40px 0px;
}

#section1 h1{
  color: white;
  font-size: clamp(3rem, 5.5vw, 5rem);
}

section .siteContent{
  max-width: none;
}

#section1 .siteContent,
#section2 .siteContent .grid-12{
  max-width: 1000px;
  margin: 0 auto;
}
 
#section3 .textSection::before{
  content: '';
  display: block;
  width: 100vw;
  height: calc(100% + 80px);
  background: var(--navy) url(thumbnaillarge/bg-dark-section.jpg) no-repeat bottom center / cover;
  position: absolute;
  right: auto;
  left: 0;
  top: -40px;
  padding:0;
  border-radius: 0;
}

#section3 .siteContent{
  max-width: none;
}

#section3 .siteContent ul {
  display: flex;
  justify-content: center;
  align-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}

#section3 .siteContent ul li{
  display: flex;
  justify-content: flex-start;
  align-items: center;

  border: 2px solid var(--green);
  padding: 1em 1em 1em 2.5em;
  border-radius: 10em;
  min-width: 250px;
  font-size: 1.3rem;
  font-weight: 700;
  box-shadow: 1px 1px 20px rgba(0,0,0,.8);
  

  background: rgba(0,0,0,.1);
  color: white;
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
}

#section3 .siteContent ul li:before{
  top: calc(50% - 14px);
  left: 16px;
  width: 24px;
  height: 24px;
}

#section3 .siteContent ul li a{
  color: var(--cyan);
}

#section6 .image-gfx{
  margin: 4rem auto;
}

#section8 .grid-6-6{
  gap: 0px 10px;
  margin-top: 2em;
} 

#section8 .grid-6-6 li{
  margin: .5em 0;
}

#section8::before, #section8::after {
  content: '';
  display: flex;
  background: var(--grey10);
  width: 100%;
  height: 100%;
  position: absolute;
  top: -5%;
  left: 0;
  z-index: -10;
}

#section8::after {
  top: auto;
  bottom: -40%;
}

@media (min-width: 701px) and (max-width: 1000px) {
  main #subBanner{
    background: none;
    padding: 8vh 0 0;
  }  
}

@media (max-width: 700px) {
  main #subBanner{
    background: none;
    padding: 60px 0 0;
  }
  
  #section1 .textSection::before{
    width: 100vw;
    border-radius: 0;
  }
  
  #section1 h1{
    text-align: center;
  }
  .text-wrap.left{
    padding: 20px;
  }
  #section2 .grid-6-6 .text-wrap{
    order: -1;
  }
  #section3 .siteContent ul li{
    font-size: 1rem;
  }
  #section3 .siteContent ul li::before{
    width: 18px;
    height: 18px;
    top: calc(50% - 10px);
    left: 14px;
  }
}
@media (max-width: 550px) {
  #section3 .siteContent ul li{
    width: 100%;
  }
}