@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,600;0,700;0,800;0,900;1,200&display=swap');
/* GOOGLE FONTS */

body{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Poppins', sans-serif;
  /* outline: 1px solid firebrick; */
}




/* location */


.location {
  margin-top: 100px;
  
}

.location h1 {
  color: #c9a232;
}

.location .background-location {
  border: 5px solid #175738;
}

/* contact us */

.contact {
  padding-top:10px;
  background: #f5f5f7;
}

h1 {
  font-family: 'Poppins', sans-serif, 'arial';
  font-weight: 600;
  font-size: 36px;
  color: #175738;
  text-align: center;
}

h4 {
  font-family: 'Roboto', sans-serif, 'arial';
  font-weight: 400;
  font-size: 20px;
  color: #c9a232;
  line-height: 1.5;
}

/* ///// inputs /////*/

input:focus ~ label, textarea:focus ~ label, input:valid ~ label, textarea:valid ~ label {
  font-size: 0.75em;
  color: #175738;
  top: -5px;
  -webkit-transition: all 0.225s ease;
  transition: all 0.225s ease;
}

.styled-input {
  float: left;
  width: 293px;
  margin: 1rem 0;
  position: relative;
  border-radius: 4px;
}

@media only screen and (max-width: 768px){
  .styled-input {
      width:100%;
  }
}

.styled-input label {
  color: #175738;
  padding: 1.3rem 30px 1rem 30px;
  position: absolute;
  top: 10px;
  left: 0;
  -webkit-transition: all 0.25s ease;
  transition: all 0.25s ease;
  pointer-events: none;
}

.styled-input.wide { 
  width: 650px;
  max-width: 100%;
}

input,
textarea {
  padding: 30px;
  border: 1px solid #c9a232;
  width: 100%;
  font-size: 1rem;
  background-color: #f5f5f7;
  color: #1d1d1f;
  border-radius: 4px;
}

input:focus,
textarea:focus { outline: 0; }

input:focus ~ span,
textarea:focus ~ span {
  width: 100%;
  -webkit-transition: all 0.075s ease;
  transition: all 0.075s ease;
}

textarea {
  width: 100%;
  min-height: 15em;
}

.input-container {
  width: 650px;
  max-width: 100%;
  margin: 20px auto 25px auto;
}

.submit-btn {
  float: right;
  padding: 7px 35px;
  border-radius: 60px;
  display: inline-block;
  background-color: #4b8cfb;
  color: white;
  font-size: 18px;
  cursor: pointer;
  box-shadow: 0 2px 5px 0 rgba(0,0,0,0.06),
            0 2px 10px 0 rgba(0,0,0,0.07);
  -webkit-transition: all 300ms ease;
  transition: all 300ms ease;
}

.submit-btn:hover {
  transform: translateY(1px);
  box-shadow: 0 1px 1px 0 rgba(0,0,0,0.10),
            0 1px 1px 0 rgba(0,0,0,0.09);
}

@media (max-width: 768px) {
  .submit-btn {
      width:100%;
      float: none;
      text-align:center;
  }
}

input[type=checkbox] + label {
color: #ccc;
font-style: italic;
} 

input[type=checkbox]:checked + label {
color: #f00;
font-style: normal;
}




.contact .read-btn{
  font-weight: 500;
  font-size: 16px;
  color: #c9a232;
  background-color: #175738;
  padding: 5px 15px;
  border: solid #175738 2px;
  box-shadow: none;
  border-radius: 5px;
  transition : 1000ms;
  transform: translateY(0);
  display: flex;
  flex-direction: row;
  align-items: center;
  cursor: pointer;
  text-transform: uppercase;
  }
  
  
  .contact .read-btn {
    transform: translateX(0);
    opacity: 1;
    transition: 1s ease;
    transition-property: transform, opacity;
  }
  
  .contact .read-btn i{
    font-size: 1.6em;
    transition: 0.3s ease;
    font-weight: 500;
  }
  
  .contact .read-btn:hover i{
    transform: translateX(15px);
    
  }
  
  .contact .read-btn:hover{
    transition : 1000ms;
  padding: 5px 20px;
  transform : translateY(-0px);
  background-color: #c9a232;
  color: #175738;
  border: solid 2px #c9a232;
  
  }





/* end of contact us */