main{
  margin-top: 5rem;
}

section{
 width: 100%;
}

.heroSection{
 width: 100%;
 height: 90vh;
 display: flex;
}

.heroText{
 width: 50%;
 background: var(--sea-green);
 padding: 2rem;
 color: white;
 display: flex;
 align-items: center;
}
.heroText h1{
 font-size: 3rem;
 padding-bottom: 1rem;
}

.heroImgContainer{
 width: 50%;
 height: 100%;
}

.heroImgContainer img{
 width: 100%;
 height: 100%;
 object-fit: cover;
}

.formSection{
 display: flex;
 flex-direction: column;
 align-items: center;
 justify-content: center;
 margin: 4rem 0;
}

.formSection h1{
 font-size: xx-large;
 color: var(--sea-green);
}

form {
 width: 40%;
 padding: 1rem;
}

form h2{
 text-align: center;
 font-weight: bold;
 margin-bottom: 2rem;
}

.input_section{
 width: 100%;
}

.input_section label{
 width: 100%;
 display: flex;
 flex-direction: column;
 margin-bottom: 1.5rem;
}

.input_section label input,
.input_section label textarea{
 border: 1px solid #928F8F;
 outline: none;
 padding: .5rem;
 background: #F6F3F380;
}

.checkBox{
 display: flex;
 align-items: center;
 gap: .2rem;
 margin-bottom: 1rem;
}

form button{
 width: 100%;
 background: var(--sea-green);
 color: var(--hero-title-color);
 border-radius: 5px;
 padding: .5rem;
}

@media screen and (max-width: 768px) {
 .heroSection{
  height: 80vh;
  flex-direction: column;
 }

 .heroText{
  width: 100%;
  height: 50vh;
 }

 .heroText h1{
  font-size: 2rem;
 }

 .heroImgContainer{
  width: 100%;
  height: 50vh;
 }

 form {
  width: 100%;
  padding: 1rem;
 }
}