/*------------------------------
    Testimonial Area
------------------------------*/
.testimonial-area{
    padding: 130px 0 110px;
    .review-area{
      &.style-01{
        .slick-prev{
          display: none !important;
          
        }
      }
    }
    &.style-02{
      padding: 120px 0 165px;
        .testimonial-slider-two{
            .slick-prev{
                color: transparent;
                border: 0;
                outline: none;
                background: transparent;
                position: absolute;
                top: 50%;
                left: -60px;
                transform: translateY(-50%);
                z-index: 1;
                cursor: pointer;
                @include transition($transition);
                i{
                  color: #fff;
                  width: 40px;
                  height: 40px;
                  line-height: 40px;
                  background-color:#F14B4B; 
                  border-radius: 50%;
                  text-align: center;
                  display: inline-block;
                  border-radius: 50%;
                  &:hover{
                    color: #F14B4B;
                    background-color:transparent;
                    border: 2px solid #F14B4B; 
                  }
                  &::before {
                    font-size: 20px;
                    display: contents;
                  }
                }
              }
              .slick-next{
                color: transparent;
                border: 0;
                outline: none;
                background: transparent;
                position: absolute;
                top: 50%;
                right: -60px;
                transform: translateY(-50%);
                z-index: 1;
                cursor: pointer;
                @include transition($transition);
                i{
                  color: #fff;
                  width: 40px;
                  height: 40px;
                  line-height: 40px;
                  background-color:#F14B4B; 
                  border-radius: 50%;
                  text-align: center;
                  display: inline-block;
                  border-radius: 50%;
                  &:hover{
                    color: #F14B4B;
                    background-color:transparent;
                    border: 2px solid #F14B4B; 
                  }
                  &::before {
                    font-size: 20px;
                    display: contents;
                  }
                }
              }
           
            .slick-dots {
                position: absolute;
                left: 50%;
                bottom: -60px;
                transform: translateX(-50%);
            }
        }
    }
    .testimonial-slider{
        padding-bottom: 80px;
        height: 380px;
    }
    .single-review-item {
        padding: 10px 20px 10px;
        margin: 10px;
        position: relative;
        box-shadow: 0px 0px 10px #0000001A;
        @include transition($transition);
        
        &.slick-current {
            box-shadow: 0px 0px 15px #0000001A;
        }
        .review-head{
            display: flex;
            .author-details {
                padding-left: 12px;
                margin-top: 7px;
            h5 {
                font-size: 16px;
                line-height: 16px;
                text-transform: capitalize;
                margin-top: 0; }
            .post {
                font-size: 13px;
                color: var(--active-color);
                font-weight: 700; }
            .rating{
                li {
                display: inline-block;
                font-size: 14px;
                color: var(--active-color);
                }
            }
            }
            .thumb {
                left: 20px;
                img {
                    border-radius: 5px; 
                }   
            } 
        }
        
        .desciption {
                padding-top: 0px;
                p{
                    color:#505050;
                }
                
            }
    }
    .slick-prev{
      color: transparent;
      border: 0;
      outline: none;
      background: transparent;
      position: absolute;
      top: 50%;
      left: -60px;
      transform: translateY(-50%);
      z-index: 1;
      cursor: pointer;
      @include transition($transition);
      i{
        color: #fff;
        width: 40px;
        height: 40px;
        line-height: 40px;
        background-color:#F14B4B; 
        border-radius: 50%;
        text-align: center;
        display: inline-block;
        border-radius: 50%;
        &:hover{
          color: #F14B4B;
          background-color:transparent;
          border: 2px solid #F14B4B; 
        }
        &::before {
          font-size: 20px;
          display: contents;
        }
      }
    }
      .slick-next{
        color: transparent;
        border: 0;
        outline: none;
        background: transparent;
        position: absolute;
        top: 40%;
        right: -60px;
        transform: translateY(-50%);
        z-index: 1;
        cursor: pointer;
        @include transition($transition);
        i{
          color: #fff;
          width: 40px;
          height: 40px;
          line-height: 40px;
          background-color:#F14B4B; 
          border-radius: 50%;
          text-align: center;
          display: inline-block;
          border-radius: 50%;
          &:hover{
            color: #F14B4B;
            background-color:transparent;
            border: 2px solid #F14B4B; 
          }
          &::before {
            font-size: 20px;
            display: contents;
          }
        }
      }
   
    .slick-dots {
        position: absolute;
        left: 6%;
        bottom: 0;
        transform: translateX(-50%);
    }
    .slick-dots li {
        display: inline;
        margin: 0 7px;
    }
    .slick-dots button {
        color: transparent;
        background: var(--paragraph-color);
        width: 15px;
        height: 15px;
        border: none;
        border-radius: 50%;
        opacity: .3;
        @include transition($transition);
        cursor: pointer;
    }
    .slick-dots .slick-active button {
        background: var(--active-color);
        width: 25px;
        height: 15px;
        border-radius: 5px;
        opacity: 1;
    }
}