/* FONTS */
@font-face {
  font-family: 'Gotham';
  src: url(assets/fonts/Gotham-Font/normals/Gotham-Thin.otf) format('opentype');
  font-weight: 100;    
}
@font-face {
  font-family: 'Gotham';
  src: url(assets/fonts/Gotham-Font/normals/Gotham-XLight.otf) format('opentype');
  font-weight: 200;    
}
@font-face {
  font-family: 'Gotham';
  src: url(assets/fonts/Gotham-Font/normals/Gotham-Light.otf) format('opentype');
  font-weight: 300;    
}
@font-face {
  font-family: 'Gotham';
  src: url(assets/fonts/Gotham-Font/normals/GothamBook.ttf) format('truetype');
  font-weight: 400;
}
@font-face {
  font-family: 'Gotham';
  src: url(assets/fonts/Gotham-Font/normals/GothamMedium.ttf) format('truetype');
  font-weight: 500;    
}
@font-face {
  font-family: 'Gotham';
  src: url(assets/fonts/Gotham-Font/normals/GothamBold.ttf) format('truetype');
  font-weight: 600;    
}
@font-face {
  font-family: 'Gotham';
  src: url(assets/fonts/Gotham-Font/normals/Gotham-Black.otf) format('opentype');
  font-weight: 800;    
}
@font-face {
  font-family: 'ChronicleTextG1';
  src: url(assets/fonts/ChronicleTextG1/Chronicle\ Text\ G1\ Roman.otf) format('opentype');
}
/* STYLES */
main {
  height: 70vh;
  width: 100%;
}
.headerContact {
  width: 100%;
  height: 35vh; 
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  overflow: hidden;
}
.headerContact div {
  width: 100%;
  height: 35vh;
  position: absolute;
  top: 0;
}
.headerContactBackground {
  background-image: url(assets/Campen-Laboratory2.jpg);
  background-size: cover;
  background-position: 50% 38%;
  width: 100%; 
  height: 35vh;
  top: 105px;
  position: absolute;
  filter: blur(5px);
}
h1 {
  position: relative;
  z-index: 10;
  font-size: 45px;
  color: #fff;
  text-align: center;
  text-shadow: 0 0 20px rgba(0, 0, 0, 0.654);
}
main section {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 100px;
  gap: 150px;
}
.contactUsFirst {
  width: 20%;
  height: 500px;
  border: solid 2px #007a86;
  border-radius: 10px;
  background-image: url(assets/Campen-Laboratory5.jpg);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat ;
  box-shadow: 5px 5px 20px rgba(0, 0, 0, 0.400);
}
.contactUsSecond {
  width: 20%;
  height: 500px;
}
form {
  width: 100%;
  color: #000;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
form input {
  box-shadow: 5px 5px 20px rgba(0, 0, 0, 0.400);
}
form textarea {
  box-shadow: 5px 5px 20px rgba(0, 0, 0, 0.400);
}
.flexNameForm {
  display: flex;
  gap: 8%;
  margin-bottom: 30px;
  width: 100%;
}
.firstName {
  width: 100%;
}
.lastName {
  width: 100%;
}
.email {
  width: 100%;
  margin-bottom: 20px;
}
.observations {
  width: 98%;
  height: 150px;
  margin-bottom: 30px;
  resize: none;
  font-family: 'Gotham';
  padding: 8px;
  margin-top: 15px;
  border-radius: 5px;
  border: 2.5px solid #007a86;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  outline: none;
}
form input {
  margin-top: 15px;
  margin-left: 0;
  border: #007a86 solid 2.5px;
  border-radius: 5px;
  width: 250px;
  height: 25px;
  padding: 5px;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  outline: none;
}
form input:focus {
  border: #ba0c2f solid 2px;
}
textarea:focus {
  border: #ba0c2f solid 2px;
}
form input:hover {
  transform: scale(1.01);
  border-color: #ba0c2f;
}
textarea:hover {
  transform: scale(1.01);
  border-color: #ba0c2f;
}
.submit {
  border: none;
  width: 103%;
  height: 40px;
  margin-top: 5px;
  color: #fff;
  cursor: pointer;
  background-color: #007a86;
  font-weight: bold;
}
.submit:hover {
  background-color: #ba0c2f;
}