/* estilos titulos de seccion */

.titulo {
    margin-top: 1em;
    text-align: center;
  }
  
  .titulo h2 {
    color: var(--blue);
  }
  
  .titulo h4 {
    color: var(--green);
  }


/* estilos seccion hero */

.hero {
    display: grid;
      grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
      gap: 1rem;
      /* outline: 1px solid blue; */
      margin: 0 auto;
      width: 75%;
      justify-content: center;
      align-items: start;
  }
  
  
  /* Start hero_information section */
  .hero_text h1 {
      color: #3DCA2D; 
      font-size: 36px;
      text-align: left ;
  }
  
  .hero_text p {
      color: #000;
      padding-top: 1em;
  }
  /* End hero_information section */
  
  /* Styles hero_form*/
  .hero_form {
      /* outline: 1px solid red; */
      padding: 16px 10px;
    }
    
    .hero_form form {
      /* outline: 1px solid blue; */
      padding: 10px;
      position: relative;
    }

    .hero_form form input {
      display: inline-block;
    }
    
    .hero_form form input:first-child {
      width: 70%;
      padding: 2%;
      border: solid gray 1px;
      border-radius: 5px;
    }
    
    .hero_form form input:last-child {
      width: 25%;
      padding: 2%;
      background-color: #063690;
      color: #fff;
      border-radius: 5px;
      border: none;
    }
  
    .hero_cifras {
      display: flex;
      /* outline: 1px solid green; */
      padding-top: 1em;
      width: 100%;
    }
  
    .hero_cifras div {
      padding: 2px;
    }
  
    .hero_cifras div p {
      display: inline-block;
    }
  
    .hero_cifras span {
      font-size: 2em;
      font-weight: 700;
    }
    .hero_image img {
      width: 100%;
      height: auto;
    }


/* estilos slider brands */

.dos {
    background-color: rgb(61 202 45 / 13%);
  }
  @keyframes slide {
    from {
        transform: translateX(0);
    }
    to {
        transform: translateX(-100%);
    }
    
  }
  
  .clientes {
    overflow: hidden;
    white-space: nowrap;
    width: 90%;
    margin: 0 auto;
    position: relative;
    /* outline: 2px solid red; */
  }
  
  .clientes h2 {
    padding-top: 1em;
  }
  
  .clientes:before {
    position: absolute;
    top: 0;
    right: 0;
    width: 200px;
    height: 100%;
    /* background: linear-gradient(to right, rgba(255, 255, 255, 0.087), rgba(61, 202, 45, 0.206)); */
    content: " ";
    z-index: 2;
  
  }
  
  .clientes:after {
    position: absolute;
    top: 0;
    left: 0;
    width: 200px;
    height: 100%;
    /* background: linear-gradient(to left, rgba(255, 255, 255, 0.087), rgba(61, 202, 45, 0.206)); */
    content: " ";
    z-index: 2;
  
  }
  
  .clientes:hover .logos-clientes {
    animation-play-state: paused ;
  }
  
  .logos-clientes {
    display: inline-block;
    animation: 15s slide infinite linear;
  }


  
/* estilos seccion Servicios */

.servicios {
    margin: 10px auto;
    width: 80%;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
    gap: 10px;
    justify-items: center;
    align-items: center;
    padding: 1rem;
}

.servicios article {
    border-radius: 1rem;
    box-shadow: inset rgba(0, 0, 0, 0.09) 0px 4px 4px 0, rgba(0, 0, 0, 0.09) 0px 4px 2px, rgba(0, 0, 0, 0.09) 0px 8px 4px, rgba(0, 0, 0, 0.09) 0px 16px 8px, rgba(0, 0, 0, 0.09) 0px 32px 16px;
    display: grid;
    place-items: center;
    padding: 20px;
    margin-bottom: 20px;
    width: 18rem;
}

article span {
    color: #3DCA2D;
}

article h2 {
    color: #063690;
    font-family: "Poppins", sans-serif; 
    font-size: 1rem;
    font-weight: 800;
}

.boton {
    padding: 0.5rem;
    border-radius: 5px;
    background-color: var(--blue);
    font-weight: 500;
    color: var(--white);
    margin-top: 1rem;
    transform: scale(0.90);
}

.boton:hover {
  background-color: var(--green);
  cursor: pointer;
  transition: all 40ms ease;
  transform: scale(1);
}

.contain {
    width: 90%;
    margin: 30px auto;
    padding: 10px;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 2fr));
    grid-auto-flow: dense;
    gap: 2rem;
  }
   
  .contain div:first-child {
    grid-column: 1 / 2;
    grid-row: 1 / 3;
  }
  

  .uno {
    padding: 10px;
    -webkit-box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.11);
  -moz-box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.11);
  box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.11);
  }


  .nosotros {
    background-color: rgb(61 202 45 / 13%);
    margin-top: 1em;
    padding: 10px;
  }

  

  .icons {
  width: 80%;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  }

/* Estilos seccion nosotros */
  .experiencia {
    width: 150px;
    
  }
  
  .experiencia div {
    margin: 10px;
    text-align: center;
  }
  
  .experiencia div p {
      display: inline-block;
      font-size: 12px;
      text-align: left;
  }
  
  .experiencia img {
    width: 100%;
    
  }
  
  .experiencia span {
      font-size: 1.8em;
      font-weight: 700;
    }

  .par {
    color:#063690;
  }

  .inpar {
    color: #3DCA2D;
  }
  

  .text {
    padding-bottom: 1.5em;
  }

  .text h2 {
    padding-bottom: 0.5em;
  }

  .text p {
    margin-bottom: 0.3em;
  }

  .text span {
    font-weight: 800;
  }



  /* ---------------------------------------------
Contact Page Style
--------------------------------------------- 
*/
.text {
    padding-bottom: 1.5em;
  }
  
  .text h2 {
    color: var(--blue);
    padding-bottom: 0.5em;
  }
  
  .text p {
    margin-bottom: 0.3em;
  }
  
  .text p span {
    color: var(--green);
  }
  
  .text span {
    font-weight: 800;
  }
  
  .contacto {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
    gap: 30px;
    justify-items: center;
    align-items: center;
    width: 70%;
    margin: 0 auto;
  }
  
  .contacto .image {
  width: 80%;
  /* outline: 1px solid red; */
  }
  
  
  
  .image img {
  width:100%;
  padding: 1em;
  }
  
  .contact_form div h2 {
    color: var(--blue);
    padding-bottom: 0.5em;
    /* outline: 1px solid red; */
  
  }
  
  
  .contact_form form input {
    border: 1px solid gray;
    border-radius: 5px;
    display: inline-block;
    padding: 0.5em;
    margin-bottom: 1em;
    width: 49%;
  }
  
  .contact_form form input:nth-child(3) {
    width: 100%;
    margin-bottom: 0;
  }
  
  .contact_form form input:last-child {
    width: 100%;
    margin-top: 1em;
    padding: 3%;
    background-color: #063690;
    color: #fff;
    border-radius: 5px;
    border: none;
    text-align: center;
  }