@use '../../utils' as *;

.testimonial-3 {

    &__space {
        padding-top: 85px;
        padding-bottom: 175px;

        @media #{$lg} {
            padding-top: 80px;
            padding-bottom: 120px;
        }
        @media #{$md} {
            padding-top: 80px;
            padding-bottom: 80px;
        }
        @media #{$sm,$xs} {
            padding-top: 70px;
            padding-bottom: 70px;
        }
        @media #{$xs} {
            padding-top: 0px;
        }
    }

    &__media {
        position: relative;
        margin-left: 60px;

        @media #{$lg, $md, $sm, $xs} {
            margin-left: 0;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        @media #{$xs} {
            flex-direction: column;
        }
    }

    &__thumb-1 {
        position: relative;
        display: inline-block;

        &::before {
            content: "";
            width: 100%;
            z-index: -1;
            height: 100%;
            rotate: -20.74deg;
            position: absolute; 
            @include border-radius(4px);
            border: 4.03px solid #0E3311;

            @media #{$xs} {
                display: none;
            }
        }
        &::after {
            left: 0;
            z-index: 9;
            content: "";
            width: 100%;
            z-index: 2;
            height: 100%;
            rotate: -34.76deg;
            position: absolute; 
            @include border-radius(4px);
            border: 4.03px dashed rgb(14 51 17 / 40%);

            @media #{$xs} {
                display: none;
            }
        }

        img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            @include border-radius(20px);
        }
    }
    &__thumb-2 {
        position: absolute;
        left: 214px;
        top: 277px;
        z-index: 5;

        @media #{$lg, $md, $sm} {
           top: 300px;
           left: 50%;
           transform: translate(-50%, 0%);
        }

        @media #{$xs} {
            position: initial;
            margin-top: -40px;
        }
        img {
            @include border-radius(4px);
            outline: 2px solid #0E3311;
        }
    }

    &__slider-wrapper {
        margin-top: -76px;

        @media #{$lg, $md, $sm} {
            margin-top: 190px;
        }
        @media #{$xs} {
            margin-top: 70px;
        }
    }

    &__content {
        background-color: #E5F9ED;
        @include border-radius(20px);
        padding: 50px 40px 25px;

        @media #{$xs} {
            padding: 30px 20px;
        }

        p {
            font-size: 30px;
            line-height: 50px;

            @media #{$sm} {
                font-size: 25px;
                line-height: 35px;
            }
            @media #{$xs} {
                font-size: 18px;
                line-height: 30px;
            }
        }
    }

    &__item {

        &-author {
            gap: 20px;
            margin-top: 36px;

            &-thumb {
                width: 54px;
                height: 54px;
                display: flex;
                @include border-radius(500px);
            }

            &-content {
                h5 {
                    color: var(--rr-theme-black);
                }
            }
        }
    }

    &-wrapper {
        gap: 30px;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;

        &__rating {
            gap: 5px;
            display: flex;
            flex-wrap: wrap;
            list-style: none;
            align-items: center;

            li {
                i {
                    color: #CFBE21;
                    font-size: 14px;
                }
            }
        }
    }

    &__slider {

        &-dot {
          display: flex;
          align-items: center;
          gap: 3px;
          padding: 0;
          z-index:1;
          justify-content: end;
          right: 0px !important;
          top: inherit !important;
          left: inherit !important;
          bottom: 19px !important;
          position: absolute !important;
    
          @media (max-width: 480px) {
            display: none;
          }
    
          .swiper-pagination-bullet {
            width: 24px;
            height:24px;
            padding: 0;
            margin: 0 !important;
            @include border-radius(500px);
            overflow: hidden;
            background: transparent;
            display: flex;
            position: relative;
            border: 2px solid transparent;
            @extend %rr-transition-3;
            opacity: 1;
    
            &:after {
              position:absolute;
              width: 10px;
              height: 10px;
              content: "";
              top: calc(50% - 5px);
              background: var(--rr-theme-black);
              @include border-radius(500px);
              left: calc(50% - 5px);
            }
    
            &-active {
              border-color: var(--rr-theme-black);
    
              &:after {
                background: var(--rr-theme-black);
              }
            }
          }
        }
    }
}