/* Google Fonts - Poppins */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600&display=swap');

/*ESTILOS CONTAINER TESTIMONIOS*/

.container_testimonios--general{
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  background-color: #c9e7f4;
  margin-bottom: 70px;
  
}

.section_testimonios--content{
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: relative; 
}

.section_testimonios--titulo{
  width: 100%;
  display: flex;
  justify-content: center;
  margin-top: 80px;
  margin-bottom: 40px;
}


/*ESTILOS SLIDER*/

.slider-container{
    max-width: 1120px;
    width: 100%;
    padding: 40px 0;
  }

  .slide-content{
    margin: 0 40px;
    overflow: hidden;
    border-radius: 25px;
  }

  .box_testimonio{
    width: 300px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border-radius: 18px;
    padding-top: 15px;
    background-color: #FFF;
    box-shadow: 0px 1px 7px 1px rgba(26,113,163,0.58);
    -webkit-box-shadow: 0px 1px 7px 1px rgba(26,113,163,0.58);
    -moz-box-shadow: 0px 1px 7px 1px rgba(26,113,163,0.58);
}

.box_info{
    width: 80%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-bottom: 9px;
}

.box_info h5{
    color: rgb(10, 56, 155);
    margin: 8px  8px;
}

.box_info p{
    text-align: center;
}

.box_img{
    height: 150px;
    width: 150px;
    margin-top: 10px;
    position: relative;

}

.box_img img {
  height: 100%;
  width: 100%;
  object-fit: cover;
  border-radius: 50%;
}

/*OVERLAY*/
.overlay{
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
  background-color: #4070f4;
  border-radius: 25px 25px 0 25px;
}
.overlay::before,
.overlay::after{
  content: '';
  position: absolute;
  right: 0;
  bottom: -40px;
  height: 40px;
  width: 40px;
  background-color: #4070f4;
}
.overlay::after{
  border-radius: 0 25px 0 0;
  background-color: #fff;
}


/*Pagination CSS*/

.swiper-navBtn{
  color: #6e93f7;
  transition: color 0.3s ease;
}
.swiper-navBtn:hover{
  color: #4070f4;
}
.swiper-navBtn::before,
.swiper-navBtn::after{
  font-size: 35px;
}
.swiper-button-next{
  right: 0;
}
.swiper-button-prev{
  left: 0;
}
.swiper-pagination-bullet{
  background-color: #6e93f7;
  opacity: 1;
}
.swiper-pagination-bullet-active{
  background-color: #4070f4;
}


/******************************************/
/******************TESTIMONIOS BTN ******************/
/******************************************/

.container .button{
  width: 100%;
  display: flex;
  justify-content: center;
  margin: 20px;
}
.button label{
  height: 15px;
  width: 15px;
  border-radius: 20px;
  background: #fff;
  margin: 0 4px;
  cursor: pointer;
  transition: all 0.5s ease;
}
.button label.active{
  width: 35px;
}
#one:checked ~ .button .one{
  width: 35px;
}
#one:checked ~ .button .two{
  width: 15px;
}
#two:checked ~ .button .one{
  width: 15px;
}
#two:checked ~ .button .two{
  width: 35px;
}
input[type="radio"]{
  display: none;
}



/*MediaQueries*/

@media screen and(max-width: 768) {
  .slide-content{
    margin: 0 10px;
  }
  .swiper-navBtn{
    display: none;
  }
  
}