.carousel-cards {
    background: #f8f8f8;
    margin: auto;
    max-width: 1920px;
    overflow: hidden;
    padding: 30px 0;
    position: relative;
    width: 100%;
}

.carousel-cards .container {
    margin-left: auto;
    margin-right: auto;
    padding-left: 12.5px;
    padding-right: 12.5px;
}

.carousel-cards .container:before,
.carousel-cards .container:after {
    content: " ";
    display: table;
}

.carousel-cards .container:after {
    clear: both;
}

@media (min-width: 768px) {
    .carousel-cards .container {
        width: 750px;
    }
}

@media (min-width: 992px) {
    .carousel-cards .container {
        width: 970px;
    }
}

@media (min-width: 1200px) {
    .carousel-cards .container {
        width: 1170px;
    }
}

@media (min-width: 1230px) {
    .carousel-cards .container {
        width: 1225px;
    }
}

/* H2 Title Styles - FROM YOUR BROWSER INSPECTOR */
h2.h2-07-black .line-1,
h2.h2-07-white .line-1 {
    font-family: Lumios Marker, sans-serif;
    font-weight: 400;
    line-height: 100%;
    font-size: 70px;
    margin-bottom: 25px;
    display: block;
}

h2.h2-07-black .line-2,
h2.h2-07-white .line-2 {
    font-family: Dinamit, sans-serif;
    font-weight: 600;
    line-height: 120%;
    font-size: 20px;
    margin-bottom: 30px;
    display: block;
}

/* Circle decorations - FROM YOUR BROWSER INSPECTOR */
h1[class*=h1-0][class*=circle] b:after,
h2[class*=h2-0][class*=circle] b:after,
h3[class*=h3-0][class*=circle] b:after,
p[class*=title-0][class*=circle] b:after {
    background-position: 50%;
    background-repeat: no-repeat;
    background-size: contain;
    display: block;
    height: 160%;
    left: 50%;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 160%;
    z-index: -1;
}

/* Circle SVG backgrounds - using theme URLs */
h1[class*=h1-0].circle-black b:after,
h2[class*=h2-0].circle-black b:after,
h3[class*=h3-0].circle-black b:after,
p[class*=title-0].circle-black b:after {
    background-image: url('/wp-content/themes/hello-elementor-child/assets/images/circle-black.svg');
}

h1[class*=h1-0].circle-blue b:after,
h2[class*=h2-0].circle-blue b:after,
h3[class*=h3-0].circle-blue b:after,
p[class*=title-0].circle-blue b:after {
    background-image: url('/wp-content/themes/hello-elementor-child/assets/images/circle-blue.svg');
}

h1[class*=h1-0].circle-green b:after,
h2[class*=h2-0].circle-green b:after,
h3[class*=h3-0].circle-green b:after,
p[class*=title-0].circle-green b:after {
    background-image: url('/wp-content/themes/hello-elementor-child/assets/images/circle-green.svg');
}

h1[class*=h1-0].circle-pink b:after,
h2[class*=h2-0].circle-pink b:after,
h3[class*=h3-0].circle-pink b:after,
p[class*=title-0].circle-pink b:after {
    background-image: url('/wp-content/themes/hello-elementor-child/assets/images/circle-pink.svg');
}

h1[class*=h1-0].circle-yellow b:after,
h2[class*=h2-0].circle-yellow b:after,
h3[class*=h3-0].circle-yellow b:after,
p[class*=title-0].circle-yellow b:after {
    background-image: url('/wp-content/themes/hello-elementor-child/assets/images/circle-yellow.svg');
}

h2.h2-07-black .line-1 b,
h2.h2-07-white .line-1 b {
    position: relative;
    display: inline-block;
}

.carousel-cards .swiper-container {
    overflow: visible;
}

.carousel-cards .swiper-button {
    align-items: center;
    background: #102335;
    border: 0;
    border-radius: 50%;
    color: #fff;
    display: flex;
    height: 40px;
    justify-content: center;
    left: unset;
    margin-top: -20px;
    opacity: 0;
    right: -20px;
    transition: .25s ease-in-out;
    width: 40px;
    cursor: pointer;
    position: absolute;
    top: 50%;
    z-index: 10;
}

.carousel-cards .swiper-button:after {
    content: none;
}

.carousel-cards .swiper-button .icon-next {
    display: block;
  
}

.carousel-cards .swiper-button .icon-next:before {
    content: "\e90b";
    font-family: icomoon !important;
    speak: never;
    font-style: normal;
    font-variant: normal;
    font-weight: 400;
    line-height: 1;
    text-transform: none;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.carousel-cards .swiper-button-prev {
    left: -20px;
    right: unset;
    transform: scaleX(-1);
}

.carousel-cards .swiper-button.swiper-button-disabled {
    opacity: 0;
}

@media (max-width: 991px) {
    .carousel-cards .swiper-button {
        display: none;
    }
}

.carousel-cards .swiper-scrollbar {
    background: transparent;
    cursor: pointer;
    height: 8px;
    margin-top: 30px;
    position: relative;
    width: 100%;
}

.carousel-cards .swiper-scrollbar:before {
    background: hsla(0, 0%, 77%, .4);
    border-radius: 10px;
    content: "";
    height: 2px;
    left: 0;
    position: absolute;
    top: 3px;
    transition: all .25s;
    width: 100%;
    z-index: 1;
}

.carousel-cards .swiper-scrollbar-drag {
    background: #102335;
    height: 2px;
    top: 3px;
    transition: all .25s !important;
    z-index: 1 !important;
}

.carousel-cards .carousel-cards-item {
    align-items: flex-start;
    background-repeat: no-repeat;
    background-size: cover;
    color: #fff;
    display: flex;
    flex-direction: column;
    height: auto;
    justify-content: flex-end;
    min-height: 280px;
    padding: 10px 25px 25px;
    position: relative;
    width: 280px;
}

@media (min-width: 360px) {
    .carousel-cards .carousel-cards-item {
        min-height: 322px;
        padding: 25px;
        width: 322px;
    }
}

@media (min-width: 992px) {
    .carousel-cards .carousel-cards-item {
        background-position: 50%;
        background-size: 100%;
        min-height: 384px;
        padding: 33px;
        transition: transform .3s;
        width: 389.5px;
    }

    .carousel-cards .carousel-cards-item:hover {
        transform: scale(1.03);
        transition: transform .3s;
    }
}

.carousel-cards .carousel-cards-item:has(a:focus-visible) {
    outline: 2px solid #005fcc !important;
    outline-offset: 2px !important;
}

.carousel-cards .carousel-cards-item__wrap-img {
    display: flex;
    flex: 1 1 0;
    justify-content: flex-start;
    overflow: hidden;
    padding-bottom: 10px;
    width: 100%;
}

.carousel-cards .carousel-cards-item__wrap-img .carousel-cards-item__picto {
    height: 100%;
    margin-bottom: 0;
    max-width: 100%;
}

.carousel-cards .carousel-cards-item__picto {
    height: 100px;
    margin-bottom: 10px;
    width: auto;
}

.carousel-cards .carousel-cards-item__title {
    font-family: Dinamit, sans-serif;
    font-size: 20px;
    font-weight: 700;
    line-height: 27px;
    margin: 0 0 20px;
}

@media (min-width: 768px) {
    .carousel-cards .carousel-cards-item__title {
        font-size: 22px;
    }
}

.carousel-cards .carousel-cards-item__link {
    color: inherit;
    font-size: 12px;
    font-weight: 600;
    padding-bottom: 6px;
    position: relative;
    transition: .25s ease-in-out;
}

.carousel-cards .carousel-cards-item__link:after {
    border-bottom: 2px solid;
    bottom: 0;
    color: inherit;
    content: "";
    left: 0;
    position: absolute;
    width: 100%;
}

.carousel-cards .carousel-cards-item__link-wrap {
    height: 100%;
    left: 0;
    opacity: 0;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 1;
}

.carousel-cards .carousel-cards-item:focus-within .carousel-cards-item__link,
.carousel-cards .carousel-cards-item:hover .carousel-cards-item__link {
    color: #fff;
}

.carousel-cards .carousel-cards-item.bloc-blue-bg {
    background-color: #284b73;
}

.carousel-cards .carousel-cards-item.bloc-blue2-bg {
    background-color: #409498;
}

.carousel-cards .carousel-cards-item.bloc-blue3-bg {
    background-color: #b7c6d1;
}

.carousel-cards .carousel-cards-item.bloc-yellow-bg {
    background-color: #f9de53;
}

.carousel-cards .carousel-cards-item.bloc-sunflower-bg {
    background-color: #eab818;
}

.carousel-cards .carousel-cards-item.bloc-safran-bg {
    background-color: #e1bb34;
}

.carousel-cards .carousel-cards-item.bloc-pink-bg {
    background-color: #de9ba8;
}

.carousel-cards .carousel-cards-item.bloc-red-bg {
    background-color: #d16b69;
}

.carousel-cards .carousel-cards-item.bloc-parme-bg {
    background-color: #ba4e8e;
}

.carousel-cards .carousel-cards-item.bloc-green-bg {
    background-color: #a6c0a9;
}

.carousel-cards .carousel-cards-item.bloc-green2-bg {
    background-color: #628173;
}

.carousel-cards .carousel-cards-item.bloc-celadon-bg {
    background-color: #709b96;
}

.carousel-cards .carousel-cards-item.bloc-givre-bg {
    background-color: #96c9d4;
}

.carousel-cards .carousel-cards-item.light-text .carousel-cards-item__link,
.carousel-cards .carousel-cards-item.light-text .carousel-cards-item__title {
    color: #fff;
}

.carousel-cards .carousel-cards-item.light-text .carousel-cards-item__link:after {
    border-bottom: 2px solid #fff;
}

.carousel-cards .carousel-cards-item.light-text:focus-within .carousel-cards-item__link,
.carousel-cards .carousel-cards-item.light-text:hover .carousel-cards-item__link {
    color: #fff;
}

.carousel-cards .carousel-cards-item.light-text:focus-within .carousel-cards-item__link:after,
.carousel-cards .carousel-cards-item.light-text:hover .carousel-cards-item__link:after {
    border-bottom: 2px solid #fff;
}

.carousel-cards .carousel-cards-item.dark-text .carousel-cards-item__link,
.carousel-cards .carousel-cards-item.dark-text .carousel-cards-item__title {
    color: #102335;
}

.carousel-cards .carousel-cards-item.dark-text .carousel-cards-item__link:after {
    border-bottom: 2px solid #102335;
}

.carousel-cards:focus-within .swiper-scrollbar-drag,
.carousel-cards:focus-within .swiper-scrollbar:before,
.carousel-cards:hover .swiper-scrollbar-drag,
.carousel-cards:hover .swiper-scrollbar:before {
    height: 8px;
    top: 0;
    transition: all .25s !important;
}

.carousel-cards:focus-within .swiper-button:not(.swiper-button-disabled),
.carousel-cards:hover .swiper-button:not(.swiper-button-disabled) {
    opacity: 1;
}

/* Screen reader only */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}
