@charset "UTF-8";
.testimonials {
  gap:8px;
  .slider-nav{
    padding-bottom: 18px;
    position:absolute;
    left:-5px;
    right:-5px;
    bottom:50%;
  }
  .slider__item{
    width:340px;
    padding-bottom:30px;
    &>.has-motion{
      opacity:1;
    }
    .testimonial{
      padding:23px 10px 37px;
      .testimonial_inner{
        padding:12px 24px;
      }
      .testimonial__quote{
        min-height:54px;
      }
      .testimonial__author-image {
        width: 60px;
        transform: translate(-50%, 50px);
      }
      .testimonial-stars{
        gap: 3px;
        img{
          width:10px;
        }
      }
    }
  }
}

.testimonial__quote--with-mark::before,
.testimonial__quote--with-mark::after {
  content: "“";
  display: block;
  color: rgba(var(--link-color)/1);
  font-size: 35px;
  font-weight: bold;
  line-height:0;
  position:absolute;
}
.testimonial__quote--with-mark::before{
  left:0;
}
.testimonial__quote--with-mark::after {
  content: "”";
  right:0;
  bottom:0;
}

@media (min-width: 769px) {
  .testimonials {
    gap:48px;
    .slider-nav{
      padding-bottom:36px;
      left: 10px;
      right: 10px;
    }
    .slider__item{
      width:640px;
      padding-bottom:60px;
      &>.has-motion{
        opacity:1;
      }
      .testimonial{
        padding:50px 50px 76px;
        .testimonial_inner{
          padding:26px 40px;
        }
        .testimonial__quote{
          min-height:81px;
        }
        .testimonial__author-image {
          width: 120px;
          transform: translate(-50%, 100px);
        }
        .testimonial-stars{
          gap: 6px;
          img{
            width:16px;
          }
        }
      }
    }
  }
  .testimonial__quote--with-mark::before,
  .testimonial__quote--with-mark::after{
    font-size: 75px;
  }
}

.brand-section-testimonials {
  .section__header{
    margin-bottom: 70px;
  }
  .slideshow__slide {
    padding-bottom: 0;
    background-color: #f2f1f1;
  }
  .testimonials {
    position: relative;
    padding: 0 126px 64px;
  }
  .flex-testimonial{
    gap: 60px;
  }
  .testimonial-content {
    max-width: 540px;
    .title{
      color: #000;
    }
  }
  .testimonial {
    margin-top: 30px;
    padding: 85px 42px 42px;
    background-color: #ffffff;
    &::before {
      content: '';
      position: absolute;
      top: 0px;
      left: 0px;
      width: 100%;
      height: 100%;
      background: 
        linear-gradient(to left, #ff5a05, #ff5a05) 100% 0 / 22px 4px, 
        linear-gradient(to bottom, #ff5a05, #ff5a05) 100% 0 / 4px 22px, 
        linear-gradient(to right, #ff5a05, #ff5a05) 0 100% / 22px 4px, 
        linear-gradient(to top, #ff5a05, #ff5a05) 0 100% / 4px 22px,
        linear-gradient(to left, #ff5a05, #ff5a05) 100% 100% / 22px 4px,
        linear-gradient(to top, #ff5a05, #ff5a05) 100% 100% / 4px 22px;
      background-repeat: no-repeat;
      pointer-events: none;
    }
    p{
      font-size: 18px;
      color: #434242;
    }
  }
  .testimonial__author-image {
    position: absolute;
    left: -13px;
    top: -7px;
  }
  .testimonial-stars {
    margin-top: 28px;
  }
  .testimonial__author{
    margin-top: 0;
  }
  .slideshow-pagination{
    .page-btn {
      color: #e5e5e5;
      .page-btn__bg-circle{
        fill: #e5e5e5;
        stroke: #e5e5e5;
      }
      &.active{
        color: #ff5a05;
        .page-btn__bg-circle{
          fill: #ff5a05;
          stroke: #ff5a05;
        }
      }
    }
  }
  .slideshow-ctrl{
    bottom: 0;
  }
  .slideshow-nav {
    .btn{
      padding: 0;
      width: 72px;
      height: 72px;
      border-radius: 50%;
      background: #d6d6d6;
      svg{
        width: 60px;
        height: 60px;
        color: #fff;
      }
    }
  }
  @media(max-width: 767px){
    .section__header{
      margin-bottom: 30px;
    }
    .testimonials {
      padding: 0 0 55px;
    }
    .flex-testimonial{
      gap: 0;
    }
    .testimonial-image{
      width: 100%;
    }
    .testimonial-content {
      max-width: 100%;
      padding: 14px 27px 16px;
      .title{
        text-align: center;
      }
    }
    .testimonial {  
      margin-top: 20px;
      padding: 27px 23px 19px 37px;
      &::before {
        background: 
          linear-gradient(to left, #ff5a05, #ff5a05) 100% 0 / 12px 2px, 
          linear-gradient(to bottom, #ff5a05, #ff5a05) 100% 0 / 2px 12px, 
          linear-gradient(to right, #ff5a05, #ff5a05) 0 100% / 12px 2px, 
          linear-gradient(to top, #ff5a05, #ff5a05) 0 100% / 2px 12px,
          linear-gradient(to left, #ff5a05, #ff5a05) 100% 100% / 12px 2px,
          linear-gradient(to top, #ff5a05, #ff5a05) 100% 100% / 2px 12px;
        background-repeat: no-repeat;
        pointer-events: none;
      }
      p{
        font-size: 11px;
      }
    }
    .testimonial__author-image {
      position: absolute;
      left: -13px;
      top: -7px;
    }
    .testimonial-stars {
      margin-top: 8px;
    }
    .slideshow-pagination{
      .page-btn {
        color: #e5e5e5;
        svg{
          width: 20px;
        }
        .page-btn__bg-circle{
          fill: #e5e5e5;
          stroke-width: 1px;
        }
        &.active{
          color: #ff5a05;
          .page-btn__bg-circle{
            fill: #ff5a05;
          }
        }
      }
    }
    .slideshow-ctrl{
      z-index: 12 !important;
    }
    .slideshow-nav{
      margin: auto;
      top: auto;
      transform: translateY(0);
      bottom: 0;
      .btn{
        width: 30px;
        height: 30px;
        svg{
          width: 20px;
          height: 20px;
        }
      }
    }
  }
}