.contact-section{
  width: 100%;
  height: 53vw;
  box-sizing: border-box;
  background: linear-gradient(to right, rgba(var(--secondaryColorRgb), 0.5), rgba(var(--secondaryColorRgb), 0.7),  rgba(var(--secondaryColorRgb), 0.7), rgba(var(--secondaryColorRgb), 0.5)),
  url("/images/contactSection/contact-image-background.webp");
  background-position: center;
  background-size: cover;
  
}

.contact-section-container{
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}

.margin-top{
  margin-top: 1.5vw !important;
}

.row-container{
  width: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-top: 1vw;
  justify-content: space-between;
  flex-wrap: nowrap !important;
}

.form-element{
  width: 100%;
  height: 100%;
  padding: 6vw 4vw;
  box-sizing: border-box;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  
}

.form-inputs-container{
  width: 80%;
  height: max-content;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
}

.form-full-input-container{
  width: 100%;
  height: max-content;
  position: relative;
}

.form-half-input-container{
  width: 48%;
  height: max-content;
  position: relative;
}

.form-half-input-container:focus .form-input-label,
.form-full-input-container:focus .form-input-label{
  top: 0 !important;
  transform: translate(0, -50%);
}

.half-input:focus ~ .form-input-label,
.half-input:not(:focus):valid ~ .form-input-label,
.full-input:focus ~ .form-input-label,
.full-input:not(:focus):valid ~ .form-input-label{
  top: 0vw;
  left: 2vw;
  font-size: var(--subparagraphFontSize) !important;
  background-color: var(--tertiaryColor);
  padding: 0.1vw 0.6vw;
  border-radius: 0.2vw;
  font-weight: 700;
  color: var(--primaryColor) !important;
}

.form-input-icon{
  position: absolute;
  top: 50%;
  left: 0.5vw;
  transform: translate(0, -50%);
  color: var(--secondaryHeadingColor) !important;
  font-size: var(--subheadingFontSize) !important;
}

.form-input-label{
  position: absolute;
  top: 50%;
  left: 2.5vw;
  font-size: var(--subheadingFontSize) !important;
  transform: translate(0, -50%);
  color: var(--secondaryHeadingColor) !important;
  z-index: 2;
  pointer-events: none;
  transition: 0.2s ease all;
}

.form-container{
  width: 60%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  color: var(--tertiaryHeadingColor);
}

.contact-image-container{
  width: 40%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: flex-end;
  padding: 6vw 0;
  position: relative;
  box-sizing: border-box;
}

.form-title{
  font-family: var(--headingFont);
  font-size: var(--superheadingFontSize);
  line-height: var(--superheadingFontSize);
  font-weight: 900;
  text-align: left;
  margin: 0;
  margin-bottom: 2vw;
}

.form-message{
  font-family: var(--headingFont);
  font-size: var(--subheadingFontSize);
  line-height: var(--headingFontSize);
  font-weight: 400;
  text-align: left;
  margin: 0;
  margin-bottom: 4vw;
}


.form-subtitle{
  font-family: var(--headingFont);
  text-align: center;
  font-size: var(--subheadingFontSize);
  font-weight: 500;
  margin: 0;
  margin-top: 1.5vw;
  margin-bottom: 2vw;
}

.form-label{
  width: 100%;
  font-family: var(--headingFont);
  font-size: var(--subheadingFontSize);
  font-weight: 900;
  margin-top: 1vw;
}

.row-container .form-label:nth-of-type(even){
  margin-left: 10%;
}

[data-theme="light"] input{
  font-weight: 700;
}

.contact-section input{
  position: absolute;
  top: 0;
  left: 0;
  border: 0;
  box-shadow: inset 0.1vw 0.1vw 1vw 0 #00000020,
  inset -0.1vw -0.1vw 1vw 0 #ffffff20;
  background-color: rgba(var(--primaryColorRgb), 0.95);
  border-radius: 0.4vw;
  padding: 1vw;
  color: var(--secondaryHeadingColor);
  position: relative;
  font-weight: 500;
}

.contact-section input[type="checkbox"]{
  padding: 0.5vw;
  margin-right: 1vw;
}

.contact-section input[type="submit"]{
  border: 0;
  width: max-content;
  height: max-content;
  background-color: var(--tertiaryColor);
  color: var(--tertiaryHeadingColor);
  font-family: var(--headingFont);
  font-size: var(--paragraphFontSize);
  font-weight: 900;
  border-radius: 0.2vw;
  padding: 1vw 1.4vw;
  outline: none;
  margin-right: 2vw;
  cursor: pointer;
}

.contact-section textarea{
  /* border: solid 0.2vw var(--secondaryColorTheme); */
  border: 0;
  border-radius: 0.4vw;
  box-shadow: inset 0.1vw 0.1vw 1vw 0 #00000020,
  inset -0.1vw -0.1vw 1vw 0 #ffffff20;
  margin-bottom: 2vw;
  background-color: rgba(var(--primaryColorRgb), 0.95);
  color: var(--secondaryHeadingColor)
}

.contact-section input::placeholder, textarea::placeholder{
  color: rgba(var(--secondaryColorRgb), 1);
  font-size: var(--subheadingFontSize);
}

.contact-section input:focus, .contact-section textarea:focus{
  outline: none;
}

.contact-section label{
  font-family: var(--headingFont);
  font-size: var(--paragraphFontSize);
  color: var(--primaryColor);
  font-weight: 500;
}

.full-textarea{
  height: 8vw;
  width: 100%;
  padding: 0.6vw;
  box-sizing: border-box;
  font-family: var(--headingFont);
  font-size: var(--paragraphFontSize);
  font-weight: 500;
  resize: none;
}

.full-input,
.half-input{
  width: 100%;
  box-sizing: border-box;
  font-family: var(--headingFont);
  font-size: var(--paragraphFontSize);
  font-weight: 500;
  padding-left: 2.5vw !important;

}

.contact-image{
  width: 37.8vw;
  height: 40vw;
  background-color: var(--primaryColor);
  box-shadow: inset 0 0 1vw 0 #00000080;
  border-radius: 0.2vw;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  background-image: url("/images/contactSection/contact-image-aside.jpg");
  background-size: cover;
  background-position: 100% 50%;
  background-repeat: no-repeat;
}

.full-textarea::-webkit-scrollbar-track{
  width: 0.2vw;
  background-color: transparent;
}

.full-textarea::-webkit-scrollbar-thumb{
  background-color: var(--tertiaryColor);
}

.form-action-container{
  display: flex;
  align-items: center;
  justify-content: center;
}


@media(max-width: 672px){
  .contact-section{
    height: 156vw;
  }
  
  .contact-section-container{
    width: 100%;
    height: 100%;
  }
  
  .margin-top{
    margin-top: 3vw !important;
  }
  
  .row-container{
    width: 100%;
    margin-top: 2vw;
    flex-wrap: wrap !important;
  }
  
  .form-element{
    width: 100%;
    height: 100%;
    padding: 12vw 6vw;
  }
  
  .form-inputs-container{
    width: 100%;
  }
  
  .form-full-input-container{
    width: 100%;
  }
  
  .form-half-input-container{
    width: 48%;
  }
  
  .half-input:focus ~ .form-input-label,
  .half-input:not(:focus):valid ~ .form-input-label,
  .full-input:focus ~ .form-input-label,
  .full-input:not(:focus):valid ~ .form-input-label{
    top: 0vw;
    left: 4vw;
    font-size: var(--subparagraphFontSize) !important;
    padding: 0.2vw 1.2vw;
    border-radius: 0.4vw;
  }
  
  .form-input-icon{
    top: 50%;
    left: 2vw;
    font-size: var(--paragraphFontSize) !important;
  }
  
  .form-input-label{
    top: 50%;
    left: 8vw;
    font-size: var(--subheadingFontSize) !important;
  }
  
  .form-container{
    width: 100%;
    height: 100%;

  }

  .form-action-container{
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 8vw;
  }
  
  .contact-image-container{
    width: 40%;
    height: 100%;
    padding: 12vw 0;
  }
  
  .form-title{
    font-size: var(--superheadingFontSize);
    line-height: var(--superheadingFontSize);
    margin-bottom: 4vw;
  }
  
  .form-message{
    font-size: var(--subheadingFontSize);
    line-height: var(--headingFontSize);
    margin-bottom: 8vw;
  }
  
  
  .form-subtitle{
    font-size: var(--subheadingFontSize);
    margin-top: 3vw;
    margin-bottom: 4vw;
  }
  
  .form-label{
    width: 100%;
    font-size: var(--subheadingFontSize);
    margin-top: 2vw;
  }
  
  .row-container .form-label:nth-of-type(even){
    margin-left: 10%;
  }
  
  .contact-section input{
    box-shadow: inset 0.2vw 0.2vw 2vw 0 #00000020,
    inset -0.2vw -0.2vw 2vw 0 #ffffff20;
    border-radius: 0.8vw;
    padding: 2vw;
  }
  
  .contact-section input[type="checkbox"]{
    padding: 1vw;
    margin-right: 2vw;
  }
  
  .contact-section input[type="submit"]{
    font-size: var(--paragraphFontSize);
    border-radius: 0.4vw;
    padding: 2vw 2.8vw;
    margin-right: 4vw;
  }
  
  .contact-section textarea{
    border-radius: 0.8vw;
    box-shadow: inset 0.2vw 0.2vw 2vw 0 #00000020,
    inset -0.2vw -0.2vw 2vw 0 #ffffff20;
    margin-bottom: 4vw;
  }
  
  .contact-section input::placeholder, textarea::placeholder{
    font-size: var(--subheadingFontSize);
  }
  
  .contact-section label{
    font-size: var(--paragraphFontSize);
  }
  
  .full-textarea{
    height: 16vw;
    width: 100%;
    padding: 1.2vw;
    font-size: var(--paragraphFontSize);
  }
  
  .full-input,
  .half-input{
    width: 100%;
    font-size: var(--paragraphFontSize);
    padding-left: 8vw !important;
  }
  
  .contact-image{
    width: 75.6vw;
    height: 80vw;
    box-shadow: inset 0 0 2vw 0 #00000080;
    border-radius: 0.4vw;
  }
  
  .full-textarea::-webkit-scrollbar-track{
    width: 0.4vw;
  }
}