
/*

==================================
    8. testimonial
==================================

*/
.mariox{
   &__team{
      &-wrapper{
         background-color: var(--theme-1);
         padding-top: 120px;
         padding-bottom: 80px;
         text-align: center;
         margin-top: 130px;
         position: relative;
         border-radius: 20px;
         @include mq(md){
            margin-top: 0;
         }
         @include mq(sm){
            padding-top: 50px;
            padding-bottom: 21px;
         }
         &.team2{
            background-color: rgb(43 36 124 / 8%);
            max-height: 530px;
         }
      }
      &-activition{
         max-width: 643px;
         margin: auto;
      }
      &-quote{
         padding-bottom: 20px;
         @include mq(md){
            padding-bottom: 0;
         }
      }
      &-title{
         font-weight: 600;
         font-size: 36px;
         line-height: 1.5;
         text-align: center;
         color: var(--black-1);
         padding-bottom: 10px;
         @include mq(md){
            font-size: 17px;
         }       
      }
      &-name{
         font-weight: 700;
         font-size: 20px;
         line-height: 1.6;
         color: var(--black-1);
         span{
            color: #5E687C;
            font-weight: 400;
         }
      }
      &-oval2{
         position: absolute;
         left: 50%;
         top: 0;
         transform: translateX(-50%);
         height: 100%;
         @include mq(md){
            height: 100%;
            object-fit: cover;
         }
      }
      &-thumb{
         @include mq(sm){
            display: none;
         }
      }
      &-t1{
         position: absolute;
         top: 50px;
         left: 140px;
         animation: float-bob-y 5s infinite;
         @include mq(md){
            display: none;
         }    
      }
      &-t2{
         position: absolute;
         top: 50%;
         transform: translateY(-50%);
         left: 50px;
         @include mq(md){
            display: none;
         }
      }
      &-t3{
         position: absolute;
         bottom: 80px;
         left: 190px;
         animation: float-bob-y 3s infinite;
         @include mq(md){
            display: none;
         }
      }
      &-t4{
         position: absolute;
         bottom: 80px;
         right: 190px;
         @include mq(md){
            display: none;
         }
      }
      &-t5{
         position: absolute;
         top: 70px;
         right: 120px;
         animation: float-bob-y 3s infinite;
      }
   }
}

// index 3

.marioxxx{
   &__testimonial{
      background-color: #FCF8F2;
      padding: 140px 0;
      padding-bottom: 270px;
      position: relative;
      overflow: hidden;
      @include mq(md){
         padding: 90px 0;
         padding-bottom: 90px;
      }
      @include mq(sm){
         padding: 50px 0;
      }
      &-item{
         background: var(--white);
         border: 1px solid #AE347A;
         position: relative;
         max-width: 525px;
         padding: 70px 0;
         padding-left: 45px;
         padding-right: 45px;
         @include mq(sm){
            padding: 30px 0;
            padding-left: 19px;
            padding-right: 20px;
         }
         &:hover{
            &::before{
               right: -17px;
               bottom: -17px;
            }
         }
         @include mq(md){
            margin: auto;
         }
         &::before{
            content: "";
            position: absolute;
            right: 0;
            bottom: 0;
            transition: .3s;
            height: 100%;
            width: 100%;
            background-color: #AE347A;
            z-index: -1;
         }
      }
      &-dis{
         font-family: $headingFont;
         font-weight: 400;
         font-size: 30px;
         line-height: 1.5;
         color: var(--black-2);
         @include mq(md){
            font-size: 18px;
         }
      }
      &-info{
         display: flex;
         gap: 25px;
         padding-top: 15px;
         align-items: center;
         span{
            font-weight: 400;
            font-size: 16px;
            line-height: 2;
            color: #5E687C;
         }
      }
      &-ritem{
         border: 1px solid var(--black-2);
         border-radius: 10px;
         padding: 40px;
         position: absolute;
         top: 0;
         left: 85px;
         max-width: 255px;
         @include mq(md){
            position: static;
            margin-bottom: 30px;
         }
         @include mq(sm){
            margin: auto;
            margin-bottom: 20px;
         }
         &.white{
            background-color: var(--white);
            left: 0;
            animation: float-bob-y 2s infinite;
            top: 280px;
            box-shadow: 0px 40px 60px 5px rgba(0, 0, 0, 0.05);
            border-radius: 10px;
            border: 0;
            @include mq(md){
               position: absolute;
               top: 0;
               left: 300px;
            }
            @include mq(sm){
               position: static;
            }
         }
         &.theme4{
            background-color: #FFD07B;
            left: 288px;
            top: 180px;
            border: 0;
            h2{
               color: var(--white);
            }
         }
         img{
            margin-bottom: 40px;
         }
         h2{
            font-weight: 700;
            font-size: 20px;
            line-height: 1.5;
            color: var(--black-2);
            max-width: 175px;
         }
      }
      &-right{
         position: relative;
      }
      &-shape1{
         position: absolute;
         top: 50%;
         right: 0;
         transform: translateY(-50%);
         @include mq(md){
            display: none;
         }
      }
      &-shape2{
         position: absolute;
         top: 185px;
         left: 0;
         @include mq(md){
            display: none;
         }
      }
      &-active{
         @include mq(md){
            margin-bottom: 30px;
         }
      }
   }
}
.swiper-slide-active {
   padding-bottom: 30px;
}