/* General CSS Start */
:root {
    --primary-color: #D40030;       /* Fresh green */
    --secondary-color: #009B87;     /* Bright orange */
    --dark: #000000;      /* Deep dark gray */
    --White: #FFFFFF;    /* White */

    --accent-color: #2F2D4C; /* Dark text */
    --highlight-color: #D40073;     /* Warm pink */
    --muted-color: #F8F1E6;         /* Light gray background */
}
@media (min-width:992px) {
    html {
        font-size: 0.5208333333333333vw;
    }
    .hide_desk{
        display: none !important;
    }
    footer p a:hover {
        text-decoration: underline;
    }
    .footer-media a:hover img:nth-child(1){
        opacity: 0;
    }
    .footer-media a:hover img:nth-child(2){
        opacity: 1;
    }
    .media-share a:hover {
        transform: scale(1.1);
    }
    .primary-btn:hover,
    .primary-btn-card:hover {
        transform: scale(1.1);
        color: var(--primary-color);
    }
    .sec4_slide .slick-next:hover,
    .sec4_slide .slick-prev:hover {
        transform: translate(0, -50%) scale(1.3);
    }
    .sec3_card:hover {
        transform: scale(1.1);
    }
    .poup_bg_slide_close:hover{
        transform: scale(0.9);
    }
    .sec2_vod img:hover {
        transform: translate(-50%,-50%) scale(1.1);
    }
    .fixed_bar-urls a:hover {
        color: var(--White);
        background-image: none;
    }
    .custom-arrows .prev-arrow:hover,
    .custom-arrows .next-arrow:hover {
        transform: scale(1.3);
    }
}

@media (max-width:991px) {
    html {
        font-size: 2.325581395348837vw;
    }
    .hide_mob{
        display: none !important;
    }
    h2, h2 *{
        font-size: 4.8rem;
        line-height: 100%;
    }
    .header_logo{
        width: 27.2rem;
        top: 1.9rem;
        left: 1.4rem;
    }
    .compte,
    .fixed_bar{
        display: none;
    }
    /* Section1 Start */
    .img-bg {
        width: 36.3rem;
        top: initial;
        left: -3rem;
        bottom: -14rem;
    }
    .section1_primary-btn {
        background-image: url(../img/primary_btn_sec1_m.png);
        width: 30.8rem;
        height: 9.4rem;
        position: fixed;
        left: 50%;
        transform: translateX(-50%);
        bottom: 1rem;
        z-index: 50;
    }
    .section1_primary-btn b {
        transform: initial;
        font-size: 2.8rem;
        line-height: 2.8rem;
        padding-right: 2rem;
    }
    .section1 h1 {
        font-size: 7.7rem;
        line-height: 94%;
        top: initial;
        left: 0.8rem;
        bottom: 21.4rem;
        transform: rotate(-4deg);
    }
    .vod_sec1 {
        right: 0;
        left: initial;
        width: 10.4rem;
        flex-direction: column;
        justify-content: center;
        bottom: initial;
        top: 15rem;
    }
    .vod_sec1-txt p {
        font-size: 1.4rem;
        line-height: 120%;
        text-align: center;
        width: 100%;
    }
    .vod_sec1-txt{
        width: 100%;
        padding-top: 0.5rem;
    }
    .vod_sec1_img2 {
        display: none;
    }
    .vod_sec1_img1 {
        width: 100%;
    }
    .section1 h1 span {
        font-size: 7.7rem;
        padding-left: 9.5rem;
    }
    .slick1_slide,
    .section1 {
        min-height: 89.2rem;
    }
    .slick1_slide1 {
        background-image: url(../img/ecran_1_1_2x.webp);
    }
    .slick1_slide2 {
        background-image: url(../img/ecran_1_2_2x.webp);
    }
    .slick1_slide3 {
        background-image: url(../img/ecran_1_3_2x.webp);
    }
    .slick1_slide4 {
        background-image: url(../img/ecran_1_4_2x.webp);
    }
    /* Section1 End */
    /* Section2 Start */
    .section2{
        padding: 2rem 0 12rem 0;
    }
    .section2 .container {
        flex-direction: column;
        justify-content: center;
        width: 39.9rem;
    }
    .sec2_vod {
        width: 100%;
        height: 71rem;
    }
    .sec2_content {
        width: 34.8rem;
        padding-top: 4.3rem;
    }
    .sec2_content p {
        line-height: 170%;
        font-weight: 300;
        width: 100%;
    }
    .sec2_content h3
     {
        font-size: 3.1rem;
    }
    .sec2_content h2 {
        font-size: 4.8rem;
        margin-bottom: 2.6rem;
    }
    .sec2_content h2 .span1, .sec2_content h2 .span2 {
        font-size: 4.8rem;
    }
    .sec2_content h2 .span1::after {
        width: 9.1rem;
        height: 4.6rem;
        background-image: url(../img/span1_m.png);
        top: 1.2rem;
        left: -0.5rem;
    }
    .sec2_content h2 .span2::after {
        width: 10.8rem;
        height: 4.7rem;
        background-image: url(../img/span2_m.png);
        top: 1rem;
        left: -0.6rem;
    }
    .sec4_card-content h4
     {
        font-size: 3rem;
        padding-left: 3.5rem;
        opacity: 1;
    }
    .sec4_card {
        padding-top: 4rem;
    }
    .section4 {
        background-color: #000000;
        padding-top: 10rem;
    }
    /* Section2 End */
    /* Section3 Start */
    .section3{
        background-image: url(../img/section3_m.png);
        height: 167.5rem;
        padding-top: 4rem;
    }
    .section3 h2 {
        font-size: 4.8rem;
        margin-bottom: 3rem;
    }
    .sec3_cards {
        width: 37rem;
        margin: 0 auto;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }
    .sec3_card {
        width: 37rem;
        height: 37rem;
        border-radius: 0.9rem;
        padding-bottom: 1.9rem;
        margin-bottom: 4.4rem;
    }
    .sec3_card:last-child{
        margin-bottom: 0;
    }
    .sec3_card img {
        width: 9rem;
        bottom: 15.2rem;
    }
    .sec3_card p {
        font-size: 2.8rem;
        line-height: 2.8rem;
    }
    .section3 h3 {
        font-size: 2.4rem;
        width: 22rem;
        margin: 3rem auto 2.3rem auto;
    }
    .section3 .primary-btn {
        background-image: url(../img/primary_btn_sec3_m.png);
        width: 27.9rem;
        height: 8.6rem;
        padding-top: 0.5rem;
    }
    .section3 .primary-btn b {
        font-size: 2.2rem;
        line-height: 110%;
    }
    .poup_bg_slide{
        width: 36.3rem;
        height: auto;
        background-image: url(../img/poup_bg_m.png);
        overflow: auto;
        background-position: center top 6rem;
        background-repeat: no-repeat;
    }
    .poup_bg_slide-slide {
        justify-content: center;
        flex-direction: column;
        width: 100%;
        padding-bottom: 3.9rem;
    }
    .poup_bg_slide-slick {
        width: 100%;
        z-index: 1;
    }
    .poup_bg_slide-video {
        width: 100%;
        height: 63.4rem;
        max-height: 66vh;
        max-height: calc(92.5vh - 23rem);
        margin-top: 6rem;
        height: calc(63.4rem - 6rem);
    }
    .poup_bg_slide-video-content img {
        display: none;
    }
    .poup_bg_slide-video-content p {
        font-size: 2rem;
        margin-top: 2rem;
    }
    .poup_bg_slide-video-content .primary-btn {
        background-image: url(../img/poup_bg_slide-primary-btn_m.png);
        width: 30.4rem;
        height: 9.3rem;
        margin-top: 2rem;
    }
    .poup_bg_slide-video-content .primary-btn b {
        font-size: 2.4rem;
        line-height: 2.4rem;
        transform: initial;
        padding-top: .5rem;
        padding-right: 1rem;
    }
    .poup_bg_slide-slick .slick-dots {
        display: none !important;
    }
    .poup_bg_slide-slick .slick-prev, .poup_bg_slide-slick .slick-prev:focus, .poup_bg_slide-slick .slick-prev:hover {
        width: 2rem;
        height: 2.1rem;
        right: initial;
        left: 2rem;
        bottom: 17.9rem;
    }
    .poup_bg_slide-slick .slick-next, .poup_bg_slide-slick .slick-next:focus, .poup_bg_slide-slick .slick-next:hover {
        width: 2rem;
        height: 2.1rem;
        right: 2rem;
        left: initial;
        bottom: 17.9rem;
    }
    .poup_bg_slide_close {
        z-index: 1;
    }
    .poup_bg_slide_close {
        width: 3.6rem;
    }
    /* Section3 End */
    /* Section4 Start */
    .sec4_slide .slick-dots {
        left: 6.4rem;
        bottom: 4rem;
    }
    .sec4_slide .slick-prev, .sec4_slide .slick-prev:focus, .sec4_slide .slick-prev:hover {
        width: 2rem;
        height: 2.1rem;
        top: initial;
        transform: initial;
        bottom: 4rem;
        left: 2.8rem;
    }
    .sec4_slide .slick-next, .sec4_slide .slick-next:focus, .sec4_slide .slick-next:hover {
        width: 2rem;
        height: 2.1rem;
        top: initial;
        transform: initial;
        bottom: 4rem;
        right: initial;
        left: 15.8rem;
    }
    .sec4_card-content {
        width: 100%;
        height: auto;
        top: 6.2rem;
        left: 0;
    }
    .sec4_card-content h2 {
        font-size: 3.6rem;
        line-height: 120%;
        margin-bottom: 1.7rem;
        padding-left: 3.5rem;
    }
    .sec4_card-content p {
        font-size: 1.8rem;
        padding-left: 3.5rem;
    }
    .sec4_card-content h3 {
        font-size: 2.4rem;
        line-height: 120%;
        text-align: center;
        margin-bottom: 6.7rem;
    }
    .sec4_card-content h3::after {
        background-image: url(../img/sec4_card_m.png);
        top: calc(100% + 2.5rem);
        left: 3.5rem;
        width: 30.7rem;
        height: 1.7rem;
    }
    /* Section4 End */
    /* Section5 Start */
    .section5{
        padding: 5.5rem 0 3rem 0;
    }
    .section5 h2 {
        margin-bottom: 2.5rem;
    }
    .section5 h2 span {
        width: 13.6rem;
        height: 6rem;
        display: block;
        margin: 0 auto;
    }
    .section5 h2 span::after {
        top: -0.5rem;
        background-image: url(../img/sec5_span_m.png);
    }
    .sec5-flex {
        flex-wrap: wrap;
        width: 34rem;
        margin: 0 auto;
    }
    .sec5-card:nth-child(1){
        background-image: url(../img/sec5_card_1_m.png);
        width: 15.6rem;
        height: 21.7rem;
        margin-bottom: 2rem;
    }
    .sec5-card:nth-child(2){
        background-image: url(../img/sec5_card_2_m.png);
        width: 15.6rem;
        height: 21.6rem;
        margin-top: 0;
        margin-bottom: 2rem;
    }
    .sec5-card:nth-child(3){
        background-image: url(../img/sec5_card_3_m.png);
        width: 16.2rem;
        height: 19.2rem;
        margin-top: 0;
    }
    .sec5-card:nth-child(4){
        background-image: url(../img/sec5_card_4_m.png);
        width: 15.6rem;
        height: 19.9rem;
    }
    .sec5-card:nth-child(1) img {
        width: 6.5rem;
        margin: 0 auto 0.6rem auto;
    }
    .sec5-card:nth-child(2) img {
        width: 7.5rem;
        margin: 0 auto 0.6rem 4rem;
    }
    .sec5-card:nth-child(3) img {
        width: 6.4rem;
        margin: 1.2rem auto 2.3rem auto;
    }
    .sec5-card:nth-child(4) img {
        width: 5.1rem;
        margin: 0rem auto 0.6rem auto;
    }
    .sec5-card p {
        font-size: 1.6rem;
        line-height: 120%;
        text-align: center;
    }
    /* Section5 End */
    /* Section6 Start */
    .section6{
        height: 75.1rem;
        background-image: url(../img/section6_m.png);
    }
    .section6 h2 {
        font-size: 4.8rem;
        line-height: 110%;
        margin-bottom: 3.4rem;
    }
    .sec6-flex {
        width: 29.4rem;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }
    .sec6-content2{
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
    }
    .sec6-content2 p {
        font-size: 1.8rem;
        line-height: 120%;
        padding: 0;
        margin: 0 auto 2rem auto;
        text-align: center;
    }
    .sec6-content2 .primary-btn {
        background-image: url(../img/primary_btn-sec6_m.png);
        width: 22rem;
        height: 7rem;
        padding-right: 1rem;
    }
    .sec6-content2 .primary-btn b {
        font-size: 2.2rem;
        line-height: 2.2rem;
    }
    .sec6-content1 {
        width: 19.5rem;
        height: 24.8rem;
        margin-bottom: 2.5rem;
        background-image: url(../img/sec6_graph.png);
    }
    .sec6-content1 h3 {
        font-size: 3rem;
        top: 2.5rem;
        left: 1.9rem;
    }
    .sec6-content1 h4 {
        font-size: 2.4em;
        bottom: 2.1rem;
        right: 2rem;
    }
    .sec6-content1 h4 b {
        font-size: 3rem;
    }
    /* Section6 End */
    /* Section7 Start */
    .section7{
        padding: 0 0 6rem 0;
    }
    .section7 h2 {
        margin-bottom: 2rem;
    }
    .section7 h2 span {
        width: 25.3rem;
        height: 6.3rem;
        display: block;
        margin: 0 auto;
        margin-bottom: -0.6rem;
    }
    .section7 h2 span::after {
        top: -0.6rem;
        left: 0;
        background-image: url(../img/sec8_span_m.png);
    }
    .card_holder {
        width: 100%;
        flex-direction: column;
        justify-content: center;
    }
    .card {
        width: 40.7rem;
        height: 30.8rem;
        background-image: url(../img/card_m.png);
        padding-left: 0rem;
        padding-top: 4rem;
        align-items: flex-start;
        position: relative;
        margin-bottom: 1.5rem;
    }
    .card img {
        width: 14.1rem;
    }
    .card-content {
        width: 18.8rem;
        margin-left: 2.2rem;
    }
    .card-content h3 {
        font-size: 2.8rem;
        line-height: 2.8rem;
        margin-bottom: 0.5rem;
    }
    .card-content p {
        font-size: 1.6rem;
        line-height: 130%;
        margin-bottom: 0;
        padding-right: 1rem;
    }
    .card4 .card-content p {
        font-size: 1.6rem;
        line-height: 126%;
        margin-bottom: 0;
        padding-right: 0;
    }
    .card4 .card-content {
        width: 19.8rem;
        margin-left: 1.2rem;
    }
    .primary-btn-card{
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        bottom: 2.5rem;
        margin: 0;
        width: 24rem;
        height: 8.2rem;
        background-image: url(../img/primary_btn_card_m.png);
    }
    .primary-btn-card b{
        font-size: 2rem;
        line-height: 2rem;
    }
    .primary-btn-card span{
        font-size: 1.3rem;
        line-height: 1.3rem;
    }
    .section7 .d-flex {
        margin-top: 0;
    }
    .section7 .primary-btn {
        width: 37.5rem;
        height: 8.9rem;
        background-image: url(../img/primary_btn_m.png);
    }
    .section7 .primary-btn b {
        font-size: 2rem;
        line-height: 2rem;
    }
    .section7 .primary-btn span {
        font-size: 1.3rem;
        line-height: 1.3rem;
    }
    .section7 .h3 {
        width: 32.6rem;
        font-size: 2.4rem;
        line-height: 120%;
        font-weight: 700;
    }
    .section7 .h3 img:first-child {
        display: none;
    }
    .section7 .h3 img {
        width: 3.2rem;
        top: 9rem;
        right: 4rem;
        transform: rotate(-20deg);
    }
    /* Section7 End */
    /* Section8 Start */
    .section8{
        overflow: hidden;
        height: auto;
        background-image: url(../img/section8_m.png);
        background-position: center top;
        padding: 4rem 0 4rem 0;
    }
    .section8 h2 {
        font-size: 4rem;
        line-height: 110%;
        margin-bottom: 2.6rem;
    }
    .media-share {
        width: 23.5rem;
        margin: 0 auto 0 5rem;
    }
    .media-share a {
        width: 4.7rem;
    }
    /* Section8 End */
    /* Footer Start */
    footer{
        padding: 2rem 0 14rem 0;
        height: auto;
    }
    footer .container{
        flex-direction: column;
        max-width: 32rem;
    }
    .footer-media{
        order: 2;
        margin: 0;
        width: 15.2rem;
    }
    .footer-media a {
        width: 4rem;
    }
    footer p {
        order: 1;
        font-size: 1.6rem;
        line-height: 1.6rem;
        margin-bottom: 2rem;
    }
    .poingleve{
        width: 9.2rem;
        right: 4.8rem;
        top: -11.2rem;
    }
    /* Footer End */
    .section9 h3 {
        font-size: 3.1rem;
        text-align: left;
    }
    .section9 .container {
        width: 34.8rem;
    }
}
