/*=============== NAV ===============*/


.iniciarSecion{
    background: #00bef2;
    padding: 10px 20px;
    border-radius: 10px;
    text-decoration: none;
    color: white;
    font-weight: bold;
 }
  
  /*=============== NAV ===============*/
  
  
  
  
  
  
  
  /*=============== Modal Slider ===============*/
  
  :root {
  
    /*========== z index ==========*/
    --z-modal: 100000;
  }
  
  /*=============== MODAL ===============*/
  .modal__button{
  
    transition: .3s;
  }
  
  .modal__content{
    position: relative;
      background-color: var(--container-color);
      text-align: center;
      padding: 3rem 2rem 2rem;
      border-radius: 1rem;
      transition: all .3s;
      width: 90%;
      /*== effects1 ==*/
      transform: translateY(10%);
  }
  .medida{width: 60%}
  .modal__content h1{
    padding-top: 20px;
    color: white;
    font-size: 30px;
  }
  .modal__content button{
    background: #f3de4d;
    border-radius: 20px;
    width:90%;
    padding: 1.25rem;
    font-weight: bold;
  }
    .modal__container{
        position: absolute;
        top: 0;
        justify-content: center;
        width: 100%;
        height: 100%;
        display: grid;
        align-items: flex-end;
        overflow: hidden;
        transition:all .3s;
        z-index: var(--z-modal);
        visibility: hidden;
        opacity: 0;
        margin: auto;
        background-color: rgba(255, 255, 255, 0.705);
        border-radius: 6px;
        padding: 3em 2.5em;
        display: grid;
        gap: 1em;
        place-items: center;
        grid-auto-columns: 100%;
        transform: var(--transform);
        transition:var(--transition);
    }
  
  .modal__close{
    display: inline-flex;
    background-color: #f5df4d;
    border-radius: .25rem;
    color: #FFF;
    font-size: 2rem;
    position: absolute;
    right: 2rem;
    cursor: pointer;
  }
  .modal__title{
    font-size: var(--big-font-size);
    color: var(--title-color);
    font-weight: 500;
  }
  
  .modal__description{
    margin-bottom: 1.5rem;
  }
  .modal__button-width{
   width: 90%; 
  }
  .modal__button-link{
    display: block;
    margin: 1rem auto 0;
    background-color: transparent;
    color: black;
    font-weight: 500;
    
  
  
  }
  /* Show modal */
  .show-modal{
    visibility: visible;
    opacity: 1;
  }
  
  .show-modal .modal__content{
    transform: translateY(0);
  }
  /*=============== BREAKPOINTS ===============*/
  /* For small devices */
  
  @media screen and (min-width:576px) {
  
    .modal__content{
      margin: auto;
      border-radius: 1.25rem;
      width: 50%;
    } 
  }
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  /*=============== Modal Slider ===============*/
  
  .carousel-item button{
    background: none;
    color: transparent;
  }
  
  
  
  
  
  
  

  /*=============== quienes somos ===============*/
  
  .quienesSomos img{
    border-radius: 10px;
  }
  .quienesSomos{
  background: url("../img/fondo1.png");
    display: flex;
    justify-content: space-around;
    text-align: center;
    justify-content: center;
    align-items: center;
    padding: 20px;
    height: 400px;
              }
  .quienesSomos div{
    width: 500px;
    height: auto;
    text-align: center;
    justify-content: center;
    align-items: center;
  }
  @media screen and (max-width: 800px) {
  
    .quienesSomos{
      flex-direction: column;
      justify-content: flex-start;
      margin-bottom: 10vh;
    }
    .quienesSomos div{
      width: 40vh;
    }
    .quienesSomos p{font-size: 10px;
    }
    .quienesSomos img{
      width: 200px;
    }
  }
  
  
/*=============== quienes somos ===============*/
  
  
  /*=============== Beneficios==============*/
  
  .fondobeneficios{
    display: flex;
    background-image: url("../img/fondobeneficios.png");
    background-size: cover;
    background-repeat:no-repeat ;
    flex-direction: column;
  text-align: center;
    align-items: center;
    justify-content: center;
    height: auto;
    padding: 50px;  
  }
  .tituloBeneficio{
  padding: 10px 20px;
  padding-bottom: 30px;
  color: white;
  justify-content: center;
  align-items: center;
  }
  
  .beneficiosGlobla{
    padding-top: 2vh;
    padding-bottom: 7vh;
    background: rgba(255, 255, 255, 0.918);
  
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    
    border-radius: 40px;
  
  }
  
  .uno{
    width: 280px;
    height: 150px;
    text-align: center;
    justify-content: center;
    padding-left: 2vh;
    padding-right: 2vh;
    border-left: solid #f3de4d 5px;
  
  }

  .uno img{
    width: 8vh;
  }

  .uno p{
    text-align: justify;
    font-size: 1rem;
  }
  
  .uno:first-child{
    border-color: transparent;}
    @media screen and (max-width: 1000px) {
    .uno:last-child{
      border: none;
    }
    }
  @media screen and (max-width: 800px) {
  .uno{border: none;}
  }