<!-- Testimonial Carousel -->
    <div class="testimonial-reel">


        <!-- Testimonial -->
        <div>

            <div class="box">

                <!-- Testimonial Image -->
                <figure class="image">
                    <img class="img-fluid rounded-circle" src="https://www.w3schools.com/howto/img_avatar.png">
                </figure>
                <!-- / Testimonial Image -->

                <div class="test-component">
                    <!-- Title -->
                    <article class="test-title">

                        <h4>
                            Efecha Omoware
                        </h4>

                    </article>
                    <!-- / Title -->

                    <article class="test-content">
                        <p>
                            I now enjoy financial freedom like I’ve never know before doing what I love.
                        </p>
                    </article>

                </div>

            </div>

        </div>
        <!-- / Testimonial -->

        <!-- Testimonial -->
        <div>

            <div class="box">

                <!-- Testimonial Image -->
                <figure class="image">
                    <img class="img-fluid rounded-circle" src="https://www.w3schools.com/howto/img_avatar.png">
                </figure>
                <!-- / Testimonial Image -->

                <div class="test-component">
                    <!-- Title -->
                    <article class="test-title">

                        <h4>
                            Efecha Omoware
                        </h4>

                    </article>
                    <!-- / Title -->

                    <article class="test-content">
                        <p>
                            I now enjoy financial freedom like I’ve never know before doing what I love.
                        </p>
                    </article>

                </div>

            </div>

        </div>
        <!-- / Testimonial -->

        <!-- Testimonial -->
        <div>

            <div class="box">

                <!-- Testimonial Image -->
                <figure class="image">
                    <img class="img-fluid rounded-circle" src="https://www.w3schools.com/howto/img_avatar.png">
                </figure>
                <!-- / Testimonial Image -->

                <div class="test-component">
                    <!-- Title -->
                    <article class="test-title">

                        <h4>
                            Efecha Omoware
                        </h4>

                    </article>
                    <!-- / Title -->

                    <article class="test-content">
                        <p>
                            I now enjoy financial freedom like I’ve never know before doing what I love.
                        </p>
                    </article>

                </div>

            </div>

        </div>
        <!-- / Testimonial -->

        <!-- Testimonial -->
        <div>

            <div class="box">

                <!-- Testimonial Image -->
                <figure class="image">
                    <img class="img-fluid rounded-circle" src="https://www.w3schools.com/howto/img_avatar.png">
                </figure>
                <!-- / Testimonial Image -->

                <div class="test-component">
                    <!-- Title -->
                    <article class="test-title">

                        <h4>
                            Efecha Omoware
                        </h4>

                    </article>
                    <!-- / Title -->

                    <article class="test-content">
                        <p>
                            I now enjoy financial freedom like I’ve never know before doing what I love.
                        </p>
                    </article>

                </div>

            </div>

        </div>
        <!-- / Testimonial -->

    </div>
    <!-- / Testimonial Carousel -->

$brand-orange: #f96d02;
$open-sans: "Open Sans", sans-serif;

.testimonial-reel {
  margin-bottom: 4rem !important;
  margin-top: 4rem;

  .box {
    position: relative;
    margin-bottom: 30px;

    .image {
      margin: 0 auto -45px;
      text-align: center;

      img {
        height: 130px;
        margin: 0 auto;
      }
    }

    .test-component {
      background-color: #fff;
      padding: 1rem 2.5rem;
      box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
      min-height: 200px;
    }

    .test-title {
      font-family: $open-sans;
      color: $brand-orange;
      text-align: center;
      margin-top: 3.3rem;
      margin-bottom: 15px;
    }

    .test-content {
      text-align: center;
    }
  }

  .slick-slide {
    opacity: 0.3;
    transition: opacity 0.3s;
    padding-left: 1rem;
    padding-right: 1rem;

    &.slick-cloned {
      opacity: 0.3;
      transition: opacity 0.3s;
    }

    &.slick-current.slick-active {
      opacity: 1;
      transition: opacity 0.3s;
    }
  }
}

//Slick Carousel Controllers
$(".testimonial-reel").slick({
  centerMode: true,
  centerPadding: "40px",
  dots: true,
  slidesToShow: 3,
  infinite: true,
  arrows: false,
  lazyLoad: "ondemand",
  responsive: [
    {
      breakpoint: 1024,
      settings: {
        slidesToShow: 2,
        centerMode: false
      }
    },
    {
      breakpoint: 767,
      settings: {
        slidesToShow: 1
      }
    }
  ]
});