.banner-home-nosotros {

  background-image: url(../img/webp/campo-azul.webp);

  width: 100%;

  height: 500px;

  background-repeat: no-repeat;

  position: relative;

  background-size: cover;

  display: flex;

  justify-content: center;

  align-items: center;

}

@media (max-width: 768px) {

  .banner-home-nosotros {

    background-position: center;

    height: 430px;

    align-items: center;

  }

}

/* ++++++++++++++++++ Contenido principal ++++++++++++++++++ */

main.content-us {

  align-items: center;

  background-color: rgb(255, 255, 255);

  display: flex;

  flex-direction: column;

  height: auto;

  margin-bottom: 30px;

  width: 70%;

  margin: auto;

}

@media (max-width: 768px) {

  main.content-us {

    width: 90%;

  }

}



section.contain-card-us {

  display: flex;

  height: auto;

  flex-direction: column;

  width: 100%;

  background-color: #f2f3f4;

  border-radius: 15px;

  margin-top: -60px;

  z-index: 0;

}

div.div-img-us {

  height: auto;

  width: auto;

  margin-top: 25px;

  display: flex;

  justify-content: space-around;

  align-items: center;

}

@media (max-width: 768px) {

  div.div-img-us {

    margin-top: 10px;

  }

}

div.div-img-us .img-us {

  width: 28%;

  height: auto;

}

div.div-text-us {

  width: auto;

  margin: 20px;

  height: 100%;

}

div.div-text-us .text-us {

  font-family: "ClearSans", sans-serif;

  font-size: 16px;

  width: 95%;

  text-align: justify;

  margin: auto;

  line-height: 1.1em;

  color: #182828;

}



section.contain-map-us {

  display: flex;

  height: auto;

  margin-top: 50px;

  margin-bottom: 30px;

  width: 100%;

  border-radius: 15px;

}

@media (max-width: 768px) {

  section.contain-map-us {

    margin-top: 20px;

  }

}

section.contain-map-us .map-us {

  width: 100%;

  height: 350px;

  border-radius: 15px;

}



.img-nostros {

  display: grid;

  width: 95%;

  grid-template-columns: repeat(3, 1fr);

  grid-gap: 1em;

}

@media (max-width: 768px) {

  .img-nostros {

    grid-gap: 0.5em;

  }

}

.item-nosotros {

  width: 100%;

  height: 245px;

  overflow: hidden;

  border-radius: 20px;

}

@media (max-width: 768px) {

  .item-nosotros {

    height: 100px;

    border-radius: 10px;

  }

}

.item-nosotros img {

  width: auto;

  height: 100%;

}



/* formulario tabaja con nosotros */

div.content-title {

  margin-top: 0px;

}

@media (max-width: 768px) {

  div.content-title {

    margin-top: 0px;

  }

}



.contact-form {

  display: flex;

  width: 90%;

  flex-direction: column;

  height: auto;

  gap: 1vw;

  padding: 10px 30px;

}

@media (max-width: 768px) {

  .contact-form {

    width: 90%;

    gap: 3vw;

    padding: 0px;

  }

}



.input-group {

  position: relative;

}



.input {

  border: solid 1.5px #9e9e9e;

  border-radius: 1rem;

  background: none;

  padding: 1rem;

  width: 100%;

  font-size: 1rem;

  color: black;

  transition: border 150ms cubic-bezier(0.4, 0, 0.2, 1);

}



.user-label {

  position: absolute;

  left: 15px;

  font-weight: 600;

  font-family: "Clearsans", sans-serif;

  color: rgb(26, 25, 25);

  pointer-events: none;

  transform: translateY(1rem);

  transition: 150ms cubic-bezier(0.4, 0, 0.2, 1);

}



.input-file label {

  font-family: "Clearsans", sans-serif;

  font-weight: 600;

}



.input:focus,

input:valid {

  outline: none;

  border: 1.5px solid #65b32e;

}



.input:focus ~ label,

input:valid ~ label {

  transform: translateY(-50%) scale(0.8);

  background-color: white;

  padding: 0 0.2em;

  color: #65b32e;

}



.contact-form input[type="submit"] {

  background-color: #65b32e;

  color: white;

  padding: 10px 20px;

  border: none;

  border-radius: 10px;

  cursor: pointer;

  width: 100%;

  height: 50px;

  margin-top: 15px;

  font-size: 1.5vw;

  font-family: "Clearsans";

}



@media (max-width: 768px) {

  .contact-form input[type="submit"] {

    font-size: 1.2rem;

  }

}



.contact-form input[type="submit"]:hover {

  background-color: #5da32a;

}