#aboutSection{
  width: 100%;
}

#aboutLeft {
  width: 50%;
  background-size: cover;
}

#aboutRight {
  width: 50%;
  padding-top: 15%;
  padding-bottom: 15%;
  padding-left: 10%;
  padding-right: 10%;
}

header .bg-gray {
  background:transparent;
}
main {
  padding-top:0;
}
header {
  position:absolute;
  padding-top: 38px;
}

.text-area-solutions{
  max-width: 700px;
}



#swiperSection{
  width: 100%;
  position:relative;
  padding-left:60px;
  padding-right:60px;
}
#swiperSection .swiper-slide {
  height:40vw;
}
.swiper-button-prev{
  outline: none;
  color:var(--color-gray);
}

.swiper-button-next{
  outline: none;
  color:var(--color-gray);
}

.swiper-container{
  height: 100%;
  width: 100%;
  margin-left: 0;
  margin-right: 0;
}


.swiper-wrapper{
}

.caseImageContainer{
  max-width: 100%;
  max-height: 60%;

}

.caseImage{
  width: auto;
  max-width: 100%;
  max-height: 100%;
}

.caseContainer .caseHeader{
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  padding:12px;
}

.caseName{
  max-width: 100%;
  text-align: center;
  padding-bottom: 50px;
}

.caseContainer{
  height: 100%;
}

#serviceList{
  display: none;
}

#contactSection{
  width: 100%;
}

#contactLeft{
  width: 50%;
  padding-top: 15%;
  padding-bottom: 15%;
  padding-left: 10%;
  padding-right: 10%;
}

#contactRight{
  width: 50%;
  padding-top: 15%;
  padding-bottom: 15%;
  padding-left: 10%;
  padding-right: 10%;
}
#iconGridSection {
  background:#fafafa;
}

#contactForm{
  width: 100%;
  display: inline-block;
  padding-top: 10px;
}

#formHeader{
  padding-left: 16px;
}

#formNames{
  width: 100%;
}

#formEmailAndPhone{
  width: 100%;
}

.standardInput{
  width: 47%;
  margin-right: 3%;
}

.textAreaInput{
  width: 97%;
}

.standardInput #firstOption:first-child{
  color: var(--color-lt-gray);
}

.button{
  border: none;
  padding: 0;
  font-family: "Termina";
  font-weight: bold;
}

.gridDiv {
  grid-column-gap:4em;
  padding-bottom:30px;
}
.gridDiv .span-3{
  display: flex;
  flex-direction: column;
  text-align: center;
  justify-content: flex-start;
}

.gridDiv .span-3 h3{
  margin-top: 15px;
  margin-bottom: 15px;
}

.gridDiv .span-3 img{
  width: 50%;
  margin-left: auto;
  margin-right: auto;
  max-width:150px;
}

@media screen and (max-aspect-ratio: 1/1) {

  #aboutSection{
    width: 100%;
  }

  #aboutLeft {
    width: 100%;
    background-size: cover;
    height: 50vh;
  }

  #aboutRight {
    width: 100%;
    padding-top: 15%;
    padding-bottom: 15%;
    padding-left: 10%;
    padding-right: 10%;
  }

  #contactSection{
    width: 100%;
  }

  #contactLeft{
    width: 100%;
    padding-top: 15%;
    padding-bottom: 15%;
    padding-left: 10%;
    padding-right: 10%;
  }

  #contactRight{
    width: 100%;
    padding-top: 15%;
    padding-bottom: 15%;
    padding-left: 10%;
    padding-right: 10%;
  }

  #contactForm{
    width: 100%;
    display: inline-block;
    padding-top: 10px;
  }

  #formHeader{
    padding-left: 16px;
  }

  #formNames{
    width: 100%;
  }

  #formEmailAndPhone{
    width: 100%;
  }

  .gridDiv .span-3 img {
    width: 100%;
  }

  #iconGridSection .gridDiv .span-3{
    grid-column: span 12;
    padding-bottom: 30px;
  }

  .standardInput{
    width: 100%;
    margin-right: 0;
    padding-left: 0;
    background-color: white;
    border-bottom: 3px solid var(--color-lt-gray);
    border-top: 0;
    border-left: 0;
    border-right: 0;
  }

  .textAreaInput{
    width: 100%;
    padding-left: 0;
    background-color: white;
    border-bottom: 3px solid var(--color-lt-gray);

  }

  .button{
    border: none;
    padding: 0;
  }

  #swiperSection{
    width: 100%;
    height: 50vh;
    display: none;
  }

  #serviceList{
    display: block;
    color: white;
  }

  .serviceImage{
    height: 40vh;
    position: relative;
    display:block;
  }

  .serviceImage .caseHeader{
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
  }

  .gridDiv {
    grid-column-gap:0px;
  }


}