body {
    margin: 0;
}

.HeaderContact {
  background-image: url('../img/contactbanner.png');
  height: 200px;  
  justify-content: center;
  color: white;
  display: flex;
}

.HeaderContact h1 {
  position: absolute;
  top: 150px;
  z-index: 1;
  background-color: #ff9b45;
  border-radius: 20px;
  height: 100px;
  padding: 10px;
  box-shadow: 0 0 15px 0 #F36F25;
}
.nav-link.home {
  padding-top: 3% !important;
}
.ContactBody {
  display: flex;
  padding: 7% 10% 1% 10%;
  justify-content: space-between;
  flex-wrap: wrap;
}

.ContactBody h3 {
  font-weight: bold;
}
.details {
  margin-top: 35px;
}

.ContactForm {
  width: 40%;
  
}

.ContactDetails {
  width: 40%;
  display: flex;
  flex-direction: column;
}

.ContactDetails .rounded-circle {
  background-color: #ff9b45;
}
.success {
    background: #9fd2a1;
    padding: 0 5px;
    text-align:center;
    color: #326b07;
    border-radius: 4px;
    margin-top: 10px;
    
}

.failed {
  background: #ff5252;
  color: red;
  font-weight: 700;
  padding: 0 5px;
  text-align: center; 
  border-radius: 4px; 
  margin-top: 10px;
}
.footerCol {
  margin-left: 18%;
  font-size: large;
}

.footerCol p {
  margin-bottom: 30px;
}

.footerCol .fa-solid {
  color: #ff9b45;
}

input[type=text], input[type=email], select, textarea {
  width: 100%; /* Full width */
  padding: 12px; /* Some padding */ 
  border: 1px solid #ff9b45; /* Gray border */
  border-radius: 20px; /* Rounded borders */
  box-sizing: border-box; /* Make sure that padding and width stays in place */
  margin-bottom: 15px; /* Add a top margin */
  /* margin-bottom: 16px; Bottom margin */
  resize: vertical /* Allow the user to vertically resize the textarea (not horizontally) */
}

input:focus {
	box-shadow: 0 0 10px 0 #F36F25;
	outline: solid 2px #ff9b45;	
}
textarea:focus {
	box-shadow: 0 0 10px 0 #F36F25;
	outline: solid 2px #ff9b45;
}
/* Style the submit button with a specific background color etc */
input[type=submit] {
  background-color: #ff9b45;
  color: white;
  padding: 12px 23px;
  border: none;
  border-radius: 13px;
  cursor: pointer;
  font-size: large;
  transition: all 0.3s ease 0s;
}

/* When moving the mouse over the submit button, add a darker green color */
input[type=submit]:hover {
  background-color: #ffb471;
  transform: translateY(-5px);
}

.btn-social.contacticon:hover {
  color: darkblue;
}

label {
  margin-top: 15px;
  margin-bottom: 5px;
  padding-left: 5px;
}
/* Add a background color and some padding around the form */

.contactImg {
	width: 80%;
  text-align: center;
} 
.contactImg img {
	width: 100%;
}

.map h3 {
  background-color: #F1F3F4;
  color: #F36F25;
  margin: 0;
  height: 50px;
  text-align: center;
}

/* Responsive */
@media only screen and (max-width: 700px){
  .ContactBody {
    display: block;
    width: 100%;
  }
  .ContactForm  {
    width: 100%;
  }
}

@media (max-width:991px) {
  .HeaderContact {
    background-image: none;
    height: 100px;
  }
  .ContactDetails {
    width: 100%;
    margin-top: 70px;
  }
.contactImg {
  display: none;
}
.footerCol {
  margin-left: 0;
}
  .HeaderContact h1 {
    display: block;
    top: 0;
    background-color: #ff9b45;
    color: white;
    border-radius: 20px;
    height: 91px;
    width: 100%;
    padding: 5px;
    padding-top: 20px;
    margin: 5px;
    text-align: center;
    box-shadow: 0 0 15px 0 #F36F25;
    font-size: 2.6rem;
  }

  .ContactBody {
    display: block;
    width: 100%;
    margin-bottom: 20px;
  }
  .ContactForm  {
    width: 100%;
  }
  .md-sm-header {
      display: block;
      top: 100px;
      background-color: #ff9b45;
      color: white;
      border-radius: 20px;
      height: 91px;
      padding: 5px;
      padding-top: 20px;
      margin: 5px;
      text-align: center;
      box-shadow: 0 0 15px 0 #F36F25;
 
  }
}
/* Responsive */