*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
.contact-hero {
  background-image: url("https://images.pexels.com/photos/4831/hands-coffee-smartphone-technology.jpg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260");
  /* background-image: url("https://scontent-jnb1-1.xx.fbcdn.net/v/t39.30808-6/fr/cp0/e15/q65/243121164_104422882008674_4604228356694126874_n.jpg?_nc_cat=108&ccb=1-5&_nc_sid=0be424&efg=eyJpIjoidCJ9&_nc_eui2=AeF2CiL4BGhf5q29SHt1Pyv_DlXZJfl3broOVdkl-XduukBOcApANsQBU8xTmnBHBG8&_nc_ohc=QckXcvPq1NoAX9_zGlJ&_nc_ht=scontent-jnb1-1.xx&oh=3fdd7e8f3a131a191b4db035fb078e64&oe=6157C26B"); */
  height: 90vh;

  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}
/* ! Contact Page */
.contact-container h2 {
  text-align: center;
  margin-top: 4rem;
}
.contact-wrapper {
  margin-top: 4rem;
  margin-bottom: 4rem;
  display: flex;
  flex-wrap: wrap;
}
.form-container {
  padding: 15px;
  width: 50%;
  display: flex;
  flex-wrap: wrap;
  background-color: #ffff;
}
.map {
  padding: 15px;
  width: 50%;
}
.company-map {
  width: 100%;
  height: 100%;
}

form {
  width: 70%;
  padding: 0px;
  display: block;
  margin-left: auto;
  margin-right: auto;
  position: relative;
}

.form-container .single-form {
  position: relative;
  margin-bottom: 25px;
  width: 100%;
}
.form-container .single-form input,
.form-container .single-form textarea {
  width: 100%;
  padding: 10px;
  outline: none;
  border: 0.11px solid grey;
  border-radius: 4px;
}

.form-container .single-form input:focus + label,
.form-container .single-form input:valid + label,
.form-container .single-form textarea:focus + label,
.form-container .single-form textarea:valid + label {
  color: var(--background-deep);
  font-size: 1rem;
  font-weight: bold;
  top: -10px;
}

.form-container .single-form input:focus + label:after,
.form-container .single-form input:valid + label:after,
.form-container .single-form textarea:focus + label:after,
.form-container .single-form textarea:valid + label:after {
  content: ":";
}
.form-container .single-form textarea {
  height: 120px;
}

.form-container label {
  position: absolute;
  top: 12px;
  left: 10px;
  color: #777;
  font-size: 1rem;
  background: #fff;
  transition: ease-in-out 0.2s;
}

button[id="submit"] {
  position: relative;
  padding: 8px 36px;
  background: var(--background-off);
  border: none;
  outline: none;
  border-radius: 2px;
  cursor: pointer;
  margin-top: 1.5rem;
}
button[id="submit"]:active {
  position: relative;
  padding: 8px 36px;
  background: var(--background-deep);
  border: none;
  outline: none;
  border-radius: 2px;
  cursor: pointer;
}
.form-control {
  color: black;
  width: 100%;
  border: 0.11px solid grey;
}
/* ! contact Page End*/



  @media only screen and (max-width: 640px) {

    .contact-wrapper .form-container {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    background-color: #ffff;
  }
  .contact-wrapper .map {
    width: 100%;
    height: 250px;
  }
  .map h3 {
    text-align: center;
    margin-bottom: 30px;
  }
  .container h3 {
    margin-top: 100px;
    margin-bottom: 30px;
  }
  .social-wrapper {
    width: 95%;
    display: block;
    margin-left: auto;
    margin-right: auto;
  }
    
}