/**
 * Banner Block - Frontend Styles
 * These styles are loaded on the frontend
 */

.partners-logo-strip-block { padding: 119px 0 90px; overflow-x: hidden; }
.content-block { max-width: 497px; width: 100%; }
.content-block h3 { margin: 0 0 8px 0; font-size: 32px; }
.partners-logo-strip-wrap { position: relative; }
.logo-strip { position: absolute; right: 100px; top: 50%; transform: translateY(-10%); width: 50%; padding: 0 0 0 10px; }
.logo-strip-inner { position: relative; padding: 0 50px; max-width: 734px; width: 100%; }
.logo-strip-inner .slick-list:before, .logo-strip-inner .slick-list:after { content: ""; position: absolute; top: 40%; left: -10px; width: 50px; height: 100%; background: linear-gradient(270deg, rgba(24, 38, 51, 0) 0%, #182633 65%); transform: translateY(-50%); z-index: 1; }
.logo-strip-inner .slick-list:after { left: auto; right: -10px; background: linear-gradient(270deg, rgba(24, 38, 51, 0) 0%, #182633 65%); transform: translateY(-50%) rotate(180deg); }
.logo-strip-inner button.slick-arrow { position: absolute; top: -5px; background: transparent; border: 0; font-size: 0; width: 36px; height: 36px; cursor: pointer; }
.logo-strip-inner button.slick-prev { left: 0; }
.logo-strip-inner button.slick-next { right: 0; transform: rotate(180deg); }
.logo-strip-inner button.slick-next:hover svg rect, .logo-strip-inner button.slick-prev:hover svg rect { fill: var(--light-red-color); }
.logo-strip-inner button.slick-next:hover svg path, .logo-strip-inner button.slick-prev:hover svg path { fill: var(--white-color); }
.logo-strip-inner .slick-slide { outline: none; padding: 0 30px; }
.content-block h3 span { color: var(--light-red-color); }
.content-block p { font-size: 16px; line-height: 1.2; }

/*Responsive Css Start Here*/
@media only screen and (max-width: 1200px) {
    .logo-strip { right: 60px; }
    .partners-logo-strip-block {padding: 80px 0;}
    .logo-strip-inner .slick-slide { padding: 0 20px; }
}
@media only screen and (max-width: 1024px) {
    .partners-logo-strip-block {padding: 60px 0;}
    .logo-strip-inner .slick-slide { padding: 0 15px; }
    .logo-strip { right: 20px; width: 47%; }
}
@media only screen and (max-width: 991px) {
    .logo-strip { width: 100%; position: relative; left: 0; right: 0; padding: 0 30px; }
    .content-block { max-width: 100%; margin-bottom: 40px; }
}
@media only screen and (max-width: 767px) {
    .partners-logo-strip-block {padding: 50px 0;}
    .content-block h3 { font-size: 20px; line-height: 1.2; margin-bottom: 12px; }
    .content-block p { font-size: 14px; line-height: 1.6; }
}
@media only screen and (max-width: 480px) {
    .logo-strip-inner { padding: 0; }
}