#contact {
  padding-top: 50px;
}

.contact-subtitle {
  color: white;
  padding-top: 1rem;
}

.contact-subtitle span {
  font-size: 0.9rem;
  color: rgb(104, 104, 104);
}

.contact-form-container {
  height: max-content;
  width: 100%;
  display: grid;
  grid-template-columns: 5fr 3fr;
  margin-top: 0.5rem;
}

/* Left Side Contact Section _________________________________________________________________*/

.contact-left {
  width: 100%;
  height: max-content;
}

.contact-left form {
  display: grid;
  width: 100%;
  height: 100%;
  grid-template-columns: 1fr 1fr;
}

/* Left Form */

.contact-left form .left-form {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding-top: 1rem;
}

.contact-left form .left-form .input-box {
  width: 100%;
  height: 50px;
  position: relative;
  display: flex;
  align-items: center;
}

.contact-left form .left-form .input-box input {
  width: 100%;
  height: 75%;
  background-color: transparent;
  border: none;
  border-bottom: solid 1px rgb(114, 114, 114);
  color: rgb(255, 255, 255);
  padding: 5px 13px;
  outline: none;
  font-size: 1rem;
  border-radius: 2px;
  font-weight: 400;
}
.input-name {
  text-transform: capitalize;
}

.contact-left form .left-form .input-box input:focus,
.contact-left form .left-form .input-box input:valid {
  background-color: rgba(0, 0, 0, 0.63);
}

.contact-left form .left-form .input-box input:focus ~ span,
.contact-left form .left-form .input-box input:valid ~ span {
  transform: translateY(-30px);
  font-size: 0.8rem;
  transition: 00.5s;
  font-weight: bold;
  color: rgb(255, 255, 255);
}

.contact-left form .left-form .input-box span {
  color: white;
  position: absolute;
}

/* Right Form */

.contact-left form .right-form {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding-top: 1rem;
}

.contact-left form .right-form .input-message {
  width: 100%;
  height: 100%;
  padding-top: 6px;
  padding-left: 0.5rem;
  padding-bottom: 0.4rem;
  display: flex;
  position: relative;
}

.contact-left form .right-form .input-message span {
  position: absolute;
  color: white;
}

.contact-left form .right-form .input-message textarea {
  width: 100%;
  height: 100%;
  background-color: transparent;
  border: none;
  border-bottom: solid 1px rgb(114, 114, 114);
  color: rgb(255, 255, 255);
  padding: 5px 13px;
  outline: none;
  font-size: 1rem;
  border-radius: 2px;
  font-weight: 400;
  resize: none;
}

.contact-left form .right-form .input-message textarea:focus {
  background-color: rgba(0, 0, 0, 0.63);
}

.contact-left form .right-form .input-message textarea:focus ~ .text-field {
  transform: translateY(-20px);
  font-size: 0.8rem;
  transition: 00.5s;
  font-weight: bold;
  color: rgb(255, 255, 255);
}
/* Button Send */

.btn-send {
  width: 80px;
  height: 30px;
  color: white;
  background-color: #ff9900;
  outline: none;
  border: none;
  margin-top: 1rem;
}

.btn-send:active {
  transform: translate(-2px, 1px);
  /* transform: translateX(-1px); */
}

/* Right Side Contact Section _________________________________________________________________*/

.contact-right {
  background-color: #ff9900;
  background-image: url(https://images.unsplash.com/photo-1511140973288-19bf21d7e771?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=667&q=80);
  background-size: cover;
  background-position: center;
  margin: 0px 10px;
}

/* Responsive */

@media (max-width: 540px) {
  .contact-form-container {
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
  }

  .contact-right {
    display: none;
  }

  .contact-left form {
    grid-template-columns: 1fr;
    grid-template-rows: 1fr 1fr;
  }

  .btn-send {
    width: 100%;
  }
}