.carousel {
    margin-top: 80px;
  }
  
  .carousel-cell {
    width: 66%;
    height: 300px;
    margin-right: 32px;
    background: #DBE7F8;
    border-radius: 20px;
    counter-increment: carousel-cell;
    padding: 48px;
    font-size: 24px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-start;
    transition-timing-function: ease-in;


    .testimonial {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        justify-content: space-between;
        align-items: center;
        width: 100%;

        img {
            margin-right: 12px;
            width: 64px;
            height: 64px;
        }

        h5 {
            font-size: 24px;
            font-weight: 700;
        }

        p {
            font-size: 16px;
            color: #83817F;
            font-weight: 600;
        }


        .person-info {
            display: flex;
            flex-direction: row;
            justify-content: flex-start;
            align-items: flex-start;
            width: 65%;
        }
    }
  }

 .carousel-cell:hover {
  background-color: #CADCF5;
 }

  .is-selected {
    height: 350px;
    transition-timing-function: ease-out;
    transition-duration: .4s;
  }

  .flickity-viewport {
    height: 400px !important;
  }


  @media only screen and (max-width: 1280px) {
    .carousel-cell {
      div {
        font-size: 18px;
      }
    }
  }

  @media only screen and (max-width: 1024px) {
     .carousel-cell {
        padding: 32px;
        font-size: 18px;
    }
  }

  @media only screen and (max-width: 800px) {

    .carousel-cell {
      height: auto;

      .testimonial {
        margin-top: 24px;
        flex-direction: column;

       .person-info {
        width: 100% ;
        margin-bottom: 32px;

        p {
          font-size: 13px;
        }
       }
    }
  
    }
      
   .flickity-viewport {
      height: 475px !important;
    }
   
  }

  @media only screen and (max-width: 600px) {
    .carousel-cell {
      margin-right: 20px;
      padding: 24px;
      padding-bottom: 32px;

     div {
      font-size: 16px;
     }

     .testimonial {
      h5 {
        font-size: 20px;
      }
      .person-info{
        p {
        font-size: 12px;
      }
      }
      
     }
    }
  }

  @media only screen and (max-width: 400px) {
    .carousel-cell {
      div {
        font-size: 12px;
      }

      .testimonial {
        .person-info {
          h5 {
            font-size: 16px;
          }
        }
      }
    }

    .flickity-viewport {
      height: 400px !important;
    }

    .primary-btn {
      font-size: 14px;

      svg {
        vertical-align: middle;
        width: 16px;
      }
    }

  }