.blockquote-bg{ background: transparent url(../png/quote-bg-2.png) 100% 100% no-repeat; background-size: contain;} 
.blockquote{ width: 46%; max-width: 800px; margin: 0 auto; border: 1px solid var(--g-grey); border-radius: 12px; position: relative; padding: 20px 30px; background: white; }
    .blockquote::before{     content: " ";
    width: 8px;
    height: 100%;
    background: var(--gradient-primary);
    display: block;
    position: absolute;
    left: 0;
    top: 0; 
    border-radius: 8px 0 0 8px;
}
.blockquote img.icon{ transform: translate(-140%, 0); max-height: 100px; height: 40%; width: auto;}
.blockquote-header{ margin-bottom: 30px;}
.blockquote-footer{ margin: 0;}
.blockquote-footer h4{ font-size: 1.5rem; line-height: 1.5;}
.blockquote-footer p{ font-size: 13px; line-height: 1.2;}
.blockquote-footer::before{ content: unset;}
.blockquote-bg .swiper-pagination{ position: relative; width: 46%; margin: 20px auto 0; text-align: left;}
.blockquote-bg .swiper-pagination-bullet-active{ transform: scale(1.5);}

/* Medium devices (tablets, less than 992px) */
@media (max-width: 991.98px) { 
    .blockquote img.icon{ height: 6vw;}
    .blockquote{ width: 80%; padding: 20px;}
    
 }
 @media (max-width: 768.98px) {
    figure.blockquote.w-100.ms-5{ margin-left: 0!important;}
    .blockquote-bg img.icon{ width: unset; margin: unset; position: relative!important; margin-left: 0; transform: translate(10%, 0) !important;
      margin-bottom: 16px; height: 10vw;} 
  }
  @media (min-width: 768px) and (max-width: 991.98px) { 
    .blockquote-bg h2.fs-1{ font-size:20px!important;}
    .blockquote-bg p{ font-size:13px; line-height:1.2; padding: 0;}
    .blockquote-bg .card{ padding: 20px 10px 10px !important;}
 }