/* Page Lead */
.page-lead p.subtitle{
  color: var(--pink);
  margin-top:-20px;
  font-size: 26px;
  line-height: 36px;
}
.page-lead{
  position: relative;
  padding: 5% 0 5.5%;
}
.page-lead img.page-lead-image{
  position: absolute;
  top:0;
  left:0;
  right:-100px;
  margin: 0 auto;
  max-height: 320px;
}
.page-lead h1{
  font-size: 46px;
  line-height: 56px;
}
div#sign_up{ scroll-margin-top: 170px;  }
div#why{ scroll-margin-top: 200px; }

/* People Bow */
.people-bow{
  background: url('People Bow.svg');
  background-size: 1700px;
  background-position: center top;
  padding-top: 165px;
  background-repeat: no-repeat;
}
.people-bow .video-container{ margin-top: 30px }

/* Switch images */
.switch-images svg g[inkscape\:label="visible_image_group"] :is(use,image){ 
  opacity:0; 
  transition: all .8s;
}
.switch-images svg g.active[inkscape\:label="visible_image_group"] :is(use,image){ opacity:1 }
.switch-images svg g[id="Layer_1"] :is(path:nth-of-type(1),path:nth-of-type(2)){ display:none!important }
.switch-images{ transform: scale(1.12) }

/* Result Page */
.result-page .col-6{
  display: flex;
  flex-direction: column;
  justify-content: end;
  padding-top: 50px
}
.result-page{ padding-bottom:260px  }

/* Images */
img.page-block-icons{
  width: 170px;
  margin: -65px 0 -20px;
}

/* Contained reviews */
.contained-review{ 
  max-width:280px; 
  margin: 0 auto;
}
.contained-review .person-line{
  min-height: 80px;
  padding-left:100px;
  margin-top: 25px;
}
.contained-review .person-line img{
  width: 80px;
  height: 80px;
}
.contained-review .person-line p{
  font-size:14px;
  line-height: 23px;
}
.contained-review .person-line p.bold{
  font-size:16px;
  line-height: 25px;
}

/* Added Value */
.added-value-bow{
  background: url('Added Value Background.svg');
  background-size: 1700px;
  background-position: center top;
  padding-top: 90px;
  background-repeat: no-repeat;  
}
.added-value-bow .bottom-part{ padding: 60px 0 120px }
.added-value-bow .bottom-part .quote{
  color:var(--dark-blue);
  font-style: italic;
  font-size: 19px;
  line-height: 28px;
  font-weight: 400;
}
.added-value-bow img{ 
  margin: 30px 20px 20px 20px;
  max-width: 100px;
}

/* CTA Background */
.cta-bow{
  background: url('CTA Background.svg');
  background-size: 1700px;
  background-position: center top;
  padding-top: 180px;
  background-repeat: no-repeat;    
}

/* Footer */
.outer-footer{ background:var(--blue-gradient) }
.footer{ 
  background-size: 1700px;
  background-position: center top;
  padding: 50px 0;
  background-repeat: no-repeat;
  margin-top: 100px;  
}
.footer .row{ gap: 50px }
.footer *{ color:white }
.footer img.footer-image{
  max-width: 550px;
  margin: 20px auto 50px auto;
}

/* Responsive */
@media screen and (min-width: 768px){
  .switch-images{
    transform: scale(1);
    margin: 50px 0 -80px 0;
  }
}
@media screen and (max-width: 768px){
  .page-lead{ padding-top:0 }
  .added-value-bow{
    background: transparent;
  }
  .added-value-bow img{ 
    margin: 10px 20px;
    max-width: 80px;
  }
  .added-value-bow .bottom-part .quote{
    font-size: 16px;
    line-height: 26px;
  }
  .added-value-bow .bottom-part{ 
    padding: 100px 0 90px 0;
    margin-top: -30px;
    background-image: url('Added Value Background Bottom XS.svg');
    background-repeat: no-repeat;
    background-size:930px;
    background-position: center top;
    position: relative;   
  }
  .people-bow {
    background-image: url('People Bow XS.svg');
    background-size: 100%;
    padding-top: 90px;
    padding-bottom: 0;
  }
  .cta-bow{
    background-size: 768px;
    padding-top: 100px;
    margin-top: 20px;
  }
  img.page-block-icons{
    width: 150px;
    margin: -75px 0 10px;
  }
  .result-page .col-6{ padding-top: 0 }
  .result-page{ padding-bottom:100px }
  .switch-images{ transform: scale(1.2) }
  .contained-review .person-line{ padding-left:0 }
  .people-bow .video-container{ width:220px }
}
@media screen and (max-width: 400px){
  .people-bow { 
    background-size: 400px; 
  }
}
@media screen and (max-width: 370px){
  h2 { 
    font-size: 20px;
  }
  ul, li, p{ 
    font-size:15px;
    line-height: 24px;
  }
  .added-value-bow .bottom-part .quote{
    margin-bottom: 5px;
  }
}