/*=============== TESTIMONIAL CARD ===============*/
.testimonial{
   height: 100vh;
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   overflow: hidden;

   &__swiper{
      padding-bottom: 7rem;
   }
   &__title{
      font-size: var(--h1-font-size);
      text-align: center;
      margin-bottom: 3rem;
   }
   &__card{
      width: 280px;
      background-color: var(--container-color);
      box-shadow: 0 8px 16px hsla(265, 75%, 4%, .1);
      padding: 2rem 1.5rem 3rem;
      border-radius: 1.5rem;
      text-align: center;
   }
   &__img{
      width: 100px;
      border-radius: 4rem;
      border: 4px solid var(--first-color);
      margin: 0 auto .5rem;
   }
   &__name{
      font-size: var(--h3-font-size);
      margin-bottom: 2rem;
   }
   &__rating{
      display: flex;
      justify-content: center;
      align-items: center;
      column-gap: 1rem;
      margin-bottom: .75rem;
   }
   &__stars{
      display: flex;
      align-items: center;
      column-gap: .25rem;

      & i{
         font-size: 1rem;
         color: var(--second-color);
      }
   }
   &__number{
      font-size: var(--h3-font-size);
   }
}

/* Swiper class */
.testimonial{
   & .swiper-pagination-bullets{
      bottom: 4rem;
   }
   & .swiper-pagination-bullet{
      background-color: var(--first-color);
      transition: opacity .4s;
   }
   & .swiper-button-prev{
      left: calc(50% - 3rem);
   }
   & .swiper-button-next{
      right: calc(50% - 3rem);
   }
   & .swiper-button-prev::after,
   & .swiper-button-next::after{
      content: '';
   }
   & :is(.swiper-button-prev, .swiper-button-next){
      top: initial;
      bottom: 0;
      width: 2.5rem;
      height: 2.5rem;
      background-color: var(--first-color);
      color: var(--white-color);
      border-radius: 50%;
      font-size: 1.5rem;
   }
}
