/* INDEX FILE */
@import url("index.css");

/* CONTACT US */
.contact-us {
  position: relative;
  padding: 0 30px;
  margin-bottom: 50px;
}
.contact-us h3 {
  font-size: 50px;
  font-family: "Rubik";
  color: #0a858a;
}
.contact-us .outline {
  height: 6px;
  width: 240px;
  border-radius: 10px;
}
.contact-us .group {
  position: relative;
  padding: 30px 0;
  clear: both;
}
.contact-us .group .icon {
  width: 70px;
  height: 70px;
  justify-content: center;
  overflow: hidden;
  display: flex;
  align-items: center;
  font-size: 22px;
  color: #fff;
  border-radius: 50px;
  transition: 0.4s all;
  float: left;
}
.contact-us .group .icon:hover {
  transform: translateY(-10px);
}
.contact-us .group .description {
  width: 86%;
  float: right;
  position: relative;
  top: 10px;
}
.contact-us .group .description h6 {
  color: #0a858a;
  font-weight: 600;
}
.contact-us .group .description p {
  font-size: 14px;
  margin: 2px 0;
  color: #1d1d1d;
}
.contact-us .group .description p a{
  color: initial;
}
.contact-us form {
  width: 90%;
  display: block;
  margin: 0 auto;
}
.contact-us form input {
  display: block;
  width: 100%;
  margin: 15px 0;
  border: 1px solid #c9c9c9;
  color: #0a858a;
  padding: 7px;
  font-size: 14px;
  border-radius: 3px;
}
.contact-us form textarea {
  display: block;
  width: 100%;
  font-size: 14px;
  height: 150px;
  margin: 15px 0;
  border: 1px solid #c9c9c9;
  color: #0a858a;
  padding: 7px;
  border-radius: 3px;
}
.contact-us form button {
  display: block;
  width: 100%;
  font-size: 14px;
  margin: 15px 0;
  border: 1px solid #c9c9c9;
  color: #0a858a;
  font-weight: bold;
  padding: 9px;
  border-radius: 3px;
}
.contact-us ::placeholder {
  color: #6d6d6d;
  font-size: 14px;
}

@media screen and (max-width: 1194px) {
  .contact-us .group .icon {
    width: 14%;
  }
  .contact-us .group .description {
    width: 84%;
    top: 20px;
  }
}
@media screen and (max-width: 991px) {
  .contact-us .group .icon {
    width: 18%;
  }
  .contact-us .group .description {
    width: 80%;
  }
}
@media screen and (max-width: 763px) {
  .contact-us {
    margin: 0 30px;
  }
  .contact-us h3 {
    font-size: 36px;
  }
  .contact-us .outline {
    width: 220px;
  }
  .contact-us .group .icon {
    width: 14%;
  }
  .contact-us .group .description {
    width: 84%;
  }
  .contact-us form {
    width: 100%;
  }
}
@media screen and (max-width: 530px) {
  .contact-us .group .icon {
    height: 60px;
  }
  .contact-us .group .description {
    top: 10px;
  }
}
@media screen and (max-width: 450px) {
  .contact-us .group .icon {
    background: none !important;
    color: #0a858a;
    justify-content: flex-start;
  }
}