/* Page Components - Card Slider v3 */

section.card-slider-v3 { overflow-x: clip; background-position: center center; overflow: hidden; }
section.three-column-content-v3:before { content: ""; position: absolute; top: 0; bottom: 0; left: 0; right: 0; background-image: radial-gradient(circle at 92% 62%, rgba(246, 12, 122, 0.26), rgba(207, 7, 101, 0.06) 24%, rgba(113, 100, 107, 0) 40%, rgba(238, 238, 238, 0) 53%); background-size: cover; opacity: 0.4; }
section.card-slider-v3:after { content: ""; position: absolute; width: 1100px; height: 80%; right: -18%; bottom: -27%; z-index: 2; background-image: url('../../assets/images/dna-blur-pattern-opt.png'); background-size: contain; pointer-events: none; background-repeat: no-repeat; }
section.card-slider-v3 h3 { margin-bottom: 2rem; }
section.card-slider-v3 .row { position: relative; z-index: 3; }
.card-slider-v3-swiper-container { margin-top: 2rem; }
.card-slider-v3-swiper { padding-bottom: 3rem; width: 100%; }
.card-slider-v3-swiper .swiper-slide { max-width: 34rem; opacity: 0.6; transition: var(--global-transition); box-sizing: border-box; margin-right: 40px; height: auto; }
.card-slider-v3-swiper .swiper-slide.swiper-slide-active { opacity: 1; }
.card-slider-v3-swiper .swiper-slide .card-container { padding: 2.222rem; box-sizing: border-box; background-color: var(--accent-quaternary); border: 1px solid var(--darker-gray); border-radius: 0.833rem; height: 100%; }
.card-slider-v3-swiper .swiper-slide .image-container { width: 60%; height: 6.389rem; }
.card-slider-v3-swiper .swiper-slide .image-container img { object-fit: contain; object-position: left center; width: 100%; height: 100%; }
.card-slider-v3-swiper .swiper-slide .heading-container { display: flex; justify-content: space-between; gap: 1rem; margin-bottom: 0.75rem; }
.card-slider-v3-swiper .swiper-slide .image-container + .heading-container { padding-top: 1.8rem; }
.card-slider-v3-swiper .swiper-slide .heading-container h3 { margin-bottom: 0; flex: 1 1 auto; }
.card-slider-v3-swiper .swiper-slide .content-container { color: var(--white); }
.card-slider-v3-swiper .swiper-slide .content-container > *:last-child { margin-bottom: 0; }
.card-slider-v3-swiper .swiper-slide .navigation-container {
    --swiper-navigation-color: var(--secondary);
    --swiper-navigation-size: 0.8rem;

    position: relative; opacity: 0; transition: var(--global-transition); flex: 1 0 auto; width: 5.5rem; top: -2px;
}
.card-slider-v3-swiper .swiper-slide.swiper-slide-active .navigation-container { opacity: 1; }
.card-slider-v3-swiper .swiper-slide .navigation-container .swiper-button-prev { left: unset; right: 4rem; }
.card-slider-v3-swiper .swiper-slide .navigation-container .swiper-button-next:after,
.card-slider-v3-swiper .swiper-slide .navigation-container .swiper-button-prev:after { font-family: var(--icon-family); content: "\ea29"; }
.card-slider-v3-swiper .swiper-slide .navigation-container .swiper-button-prev:after { transform: rotate(180deg); }
.card-slider-v3-swiper .swiper-pagination {
    --swiper-pagination-color: var(--white);
    --swiper-pagination-bottom: 0;
    --swiper-pagination-top: unset;
    --swiper-pagination-bullet-inactive-color: transparent;
    --swiper-pagination-bullet-inactive-opacity: 1;
    --swiper-pagination-bullet-width: 0.722rem;
    --swiper-pagination-bullet-height: 0.722rem;
    --swiper-pagination-bullet-horizontal-gap: 0.417rem;

    text-align: left;
}
.card-slider-v3-swiper .swiper-pagination .swiper-pagination-bullet { border: 1px solid var(--white); }
.card-slider-v3-swiper .swiper-pagination .swiper-pagination-bullet:first-child { margin-left: 0; }


@media (max-width: 1200px) {
    section.card-slider-v3:after { opacity: 0.5; right: -22%; width: 1000px; }
}
@media (max-width: 800px) {
    .card-slider-v3-swiper .swiper-slide .navigation-container { width: 5rem; }
    .card-slider-v3-swiper .swiper-slide .navigation-container .swiper-button-prev { right: 3.5rem; }
    .card-slider-v3-swiper .swiper-slide .card-container { padding: 2rem; }
}
@media (max-width: 700px) {
    .card-slider-v3-swiper .swiper-slide .card-container { padding: 1.5rem; }
}
@media (max-width: 650px) {
    section.card-slider-v3:after { right: -50%; }
}