body {
    cursor: none;
    transition: all .5s ease-in-out;
}

#custom-cursor {
    position: fixed;
    top: 0;
    left: 0;
    /* padding: 1vw; */
    width: 1vw;
    height: 1vw;
    background: linear-gradient(50.27deg, #6AD143 27.17%, #00ADEF 72.83%);
    border-radius: 50%;
    pointer-events: none;
    transform: translate(-50%, -50%);
    transition: transform 0.1s ease;
    z-index: 99999;
}
div#custom-cursor::after {
    position: relative;
    top: 50%;
    left: 50%;
    content: "";
    display: block;
    width: 2vw;
    height: 2vw;
    background: transparent;
    border-radius: 50%;
    pointer-events: none;
    transform: translate(-50%, -50%);
    transition: transform 0.1s ease;
    border: 1px solid #2D2D2D;
}

/* ============================= HEADER ============================= */

header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    position: fixed;
    z-index: 999;
    padding: 1.25vw 5.138vw;
    background: transparent;
    transition: all .5s ease-in-out;
}
header.active {
    padding: .25vw 5.138vw;
    /* background: #00abef67; */
    /* background: #2D2D2D; */
    background: #494949;
    backdrop-filter: blur(12px);
}

header .logo {
    width: auto;
    height: 3.527vw;
}

header .logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

header .menu-link {
    display: flex;
    align-items: center;
    gap: 3.68vw;
}

header .menu-link .list-link {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 2.22vw;
    list-style-type: none;
    margin: 0;
}

header .menu-link a {
    font-family: var(--font-name);
    font-weight: 700;
    font-size: 1.11vw;
    line-height: 1.52vw;
    text-align: center;
    text-transform: capitalize;
    text-decoration: none;
    color: #FFF;
    position: relative;
    display: block;
    transition: all .5s ease-in-out;
}
header .menu-link .list-link li a::after {
    content: "";
    bottom: -.51vw;
    width: 10%;
    height: 1px;
    left: 0;
    display: block;
    background: white;
    position: absolute;
    transition: all .5s ease-in-out;
}
header .menu-link .list-link li {
    position: relative;
}
header .menu-link .list-link li a:hover::after,
header .menu-link .list-link li a.actif::after {
    width: 100%;
    display: block;
    transition: all .5s ease-in-out;
}
header.active .menu-link a {
    /* color: #000000; */
    color: #FFF;
    transition: all .5s ease-in-out;
}

header .menu-link .list-link.btn {
    display: flex;
}

header .menu-link .list-link.btn .input-select {
    cursor: pointer;
    padding: 0vw;
    display: flex;
    align-items: center;
    gap: 0vw;
}

header .menu-link .list-link.btn .btn-right form {
    display: flex;
    align-items: center;
}
header .menu-link .list-link.btn .btn-right .icon-globe i {
    font-size: 1.5vw;
    color: #FFF;
}
header .menu-link .list-link.btn .btn-right {
    border-radius: 5px;
    border: 1px solid white;
    background: transparent;
    padding: 0 1.2vw;
}
header .menu-link .list-link.btn .btn-right.contact {
    padding: 1vw;
    background: white;
    color: #000000;
    width: 11.875vw;
    font-family: var(--font-name);
    font-weight: 400;
    font-size: 1.111vw;
    line-height: 1.527vw;
    letter-spacing: normal;
    text-align: center;
    text-transform: capitalize;
}
header .menu-link .list-link.btn .btn-right.input-select {
}

/* CUSTOM BUTTON SELECT FOR CHANGE LANGUAGE  */

.custom-dropdown {
    position: relative;
    display: inline-block;
    cursor: pointer;
}

.selected-language {
    text-align: start;
    padding: 1vw 3vw 1vw 1vw;
    background: transparent;
    border: 1px solid transparent;
    width: -webkit-fill-available;
    transition: all .5s ease;
    font-size: 1.111vw;
    color: #ffffff;
}

footer .selected-language::after,
footer .selected-language {
    color: #000;
}

.selected-language::after {
    content: "\25BC";
    font-size: 1.5vw;
    color: #ffffff;
    position: absolute;
    top: 1.64vw;
    right: 0vw;
    bottom: 2px;
    transform: translateY(-50%);
    pointer-events: none;
    transition: all .5s ease;
}

.dropdown-options {
    display: none;
    position: absolute;
    background-color: white;
    border: 1px solid #ccc;
    z-index: 10;
    margin: -.51vw 0vw;
    padding: .41vw 0;
    border-radius: 0 0 6px 6px;
    box-shadow: 0px 7px 7px #0000003d;
}

.dropdown-options.show {
    display: block;
    transition: all .5s ease;
}

.dropdown-option {
    padding: 1vw 6vw 1vw 1vw;
    /* border-radius: 6px; */
    cursor: pointer;
    color: #000;
    font-weight: 700;
    font-size: 1.1vw;
    transition: all .5s ease;
}

.dropdown-option:hover,
.dropdown-option.active {
    background-color: #efefef;
    color: var(--primary-color);
    transition: all .5s ease;
    /* border-radius: 6px; */
}

/* ============================= STYLE FOR THE LOADER ============================= */

#global-loader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: white;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* From Uiverse.io by Nawsome */
.socket {
    width: 200px;
    height: 200px;
    position: absolute;
    left: 50%;
    margin-left: -100px;
    top: 50%;
    margin-top: -100px;
}

.hex-brick {
    /* background: var(--primary-color); */
    background: linear-gradient(215.4deg, rgba(106, 209, 67, 0.69) 16.68%, rgba(0, 173, 239, 0.69) 83.32%);
    width: 30px;
    height: 17px;
    position: absolute;
    top: 5px;
    animation-name: fade00;
    animation-duration: 2s;
    animation-iteration-count: infinite;
    -webkit-animation-name: fade00;
    -webkit-animation-duration: 2s;
    -webkit-animation-iteration-count: infinite;
}

.h2 {
    transform: rotate(60deg);
    -webkit-transform: rotate(60deg);
}

.h3 {
    transform: rotate(-60deg);
    -webkit-transform: rotate(-60deg);
}

.gel {
    height: 30px;
    width: 30px;
    transition: all .3s;
    -webkit-transition: all .3s;
    position: absolute;
    top: 50%;
    left: 50%;
}

.center-gel {
    margin-left: -15px;
    margin-top: -15px;
    animation-name: pulse00;
    animation-duration: 2s;
    animation-iteration-count: infinite;
    -webkit-animation-name: pulse00;
    -webkit-animation-duration: 2s;
    -webkit-animation-iteration-count: infinite;
}

.c1 {
    margin-left: -47px;
    margin-top: -15px;
}

.c2 {
    margin-left: -31px;
    margin-top: -43px;
}

.c3 {
    margin-left: 1px;
    margin-top: -43px;
}

.c4 {
    margin-left: 17px;
    margin-top: -15px;
}

.c5 {
    margin-left: -31px;
    margin-top: 13px;
}

.c6 {
    margin-left: 1px;
    margin-top: 13px;
}

.c7 {
    margin-left: -63px;
    margin-top: -43px;
}

.c8 {
    margin-left: 33px;
    margin-top: -43px;
}

.c9 {
    margin-left: -15px;
    margin-top: 41px;
}

.c10 {
    margin-left: -63px;
    margin-top: 13px;
}

.c11 {
    margin-left: 33px;
    margin-top: 13px;
}

.c12 {
    margin-left: -15px;
    margin-top: -71px;
}

.c13 {
    margin-left: -47px;
    margin-top: -71px;
}

.c14 {
    margin-left: 17px;
    margin-top: -71px;
}

.c15 {
    margin-left: -47px;
    margin-top: 41px;
}

.c16 {
    margin-left: 17px;
    margin-top: 41px;
}

.c17 {
    margin-left: -79px;
    margin-top: -15px;
}

.c18 {
    margin-left: 49px;
    margin-top: -15px;
}

.c19 {
    margin-left: -63px;
    margin-top: -99px;
}

.c20 {
    margin-left: 33px;
    margin-top: -99px;
}

.c21 {
    margin-left: 1px;
    margin-top: -99px;
}

.c22 {
    margin-left: -31px;
    margin-top: -99px;
}

.c23 {
    margin-left: -63px;
    margin-top: 69px;
}

.c24 {
    margin-left: 33px;
    margin-top: 69px;
}

.c25 {
    margin-left: 1px;
    margin-top: 69px;
}

.c26 {
    margin-left: -31px;
    margin-top: 69px;
}

.c27 {
    margin-left: -79px;
    margin-top: -15px;
}

.c28 {
    margin-left: -95px;
    margin-top: -43px;
}

.c29 {
    margin-left: -95px;
    margin-top: 13px;
}

.c30 {
    margin-left: 49px;
    margin-top: 41px;
}

.c31 {
    margin-left: -79px;
    margin-top: -71px;
}

.c32 {
    margin-left: -111px;
    margin-top: -15px;
}

.c33 {
    margin-left: 65px;
    margin-top: -43px;
}

.c34 {
    margin-left: 65px;
    margin-top: 13px;
}

.c35 {
    margin-left: -79px;
    margin-top: 41px;
}

.c36 {
    margin-left: 49px;
    margin-top: -71px;
}

.c37 {
    margin-left: 81px;
    margin-top: -15px;
}

.r1 {
    animation-name: pulse00;
    animation-duration: 2s;
    animation-iteration-count: infinite;
    animation-delay: .2s;
    -webkit-animation-name: pulse00;
    -webkit-animation-duration: 2s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-delay: .2s;
}

.r2 {
    animation-name: pulse00;
    animation-duration: 2s;
    animation-iteration-count: infinite;
    animation-delay: .4s;
    -webkit-animation-name: pulse00;
    -webkit-animation-duration: 2s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-delay: .4s;
}

.r3 {
    animation-name: pulse00;
    animation-duration: 2s;
    animation-iteration-count: infinite;
    animation-delay: .6s;
    -webkit-animation-name: pulse00;
    -webkit-animation-duration: 2s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-delay: .6s;
}

.r1>.hex-brick {
    animation-name: fade00;
    animation-duration: 2s;
    animation-iteration-count: infinite;
    animation-delay: .2s;
    -webkit-animation-name: fade00;
    -webkit-animation-duration: 2s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-delay: .2s;
}

.r2>.hex-brick {
    animation-name: fade00;
    animation-duration: 2s;
    animation-iteration-count: infinite;
    animation-delay: .4s;
    -webkit-animation-name: fade00;
    -webkit-animation-duration: 2s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-delay: .4s;
}

.r3>.hex-brick {
    animation-name: fade00;
    animation-duration: 2s;
    animation-iteration-count: infinite;
    animation-delay: .6s;
    -webkit-animation-name: fade00;
    -webkit-animation-duration: 2s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-delay: .6s;
}

@keyframes pulse00 {
    0% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }

    50% {
        -webkit-transform: scale(0.01);
        transform: scale(0.01);
    }

    100% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }
}

@keyframes fade00 {
    0% {
        background: #252525;
    }

    50% {
        background: #000000;
    }

    100% {
        background: #353535;
    }
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

/* ============================= STYLE FOR THE FLOATING ACTION BUTTON ============================= */

.floating-button-action {
    position: fixed;
    bottom: 2vw;
    right: 4vw;
    z-index: 100;
    background: white;
    border-radius: 50%;
    box-shadow: inset 0px -4px 4px #9696965c, 0px -3px 11px #96969642;
    /* box-shadow: inset 0px -4px 4px #969696, 0px -3px 11px #969696; */
    cursor: pointer;
    animation: showButton 2s linear;
    transition: all .5s ease-in-out;
}

.floating-button-action a {
    width: 5vw;
    height: 5vw;
    display: block;
    padding: .51vw;
}

.floating-button-action a img {
    /* color: var(--success-color-alt);
    font-size: 2vw; */
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: all .5s ease-in-out;
}

@keyframes showButton {
    0% {
        opacity: 0;
        transform: translateY(-50%);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ============================= FOOTER ============================= */

footer {
    display: flex;
    flex-direction: column;
    background: #f1fcee;
    padding-top: 2vw;
}

footer .between-footer,
footer .bottom-footer {
    padding: 0 5.138vw;
}

footer .left-list .right-content {
    display: flex;
    flex-direction: column;
    gap: 0vw;
}
footer .left-list .right-content .title {
    font-family: var(--font-name);
    font-weight: 700;
    font-size: 1.111vw;
    line-height: normal;
    text-transform: uppercase;
    color: black;
    padding: 0 .5vw;
    margin-top: 2vw;
}
footer .left-list .right-content .disposition {
    display: flex;
    flex-direction: column;
    gap: 0;
}
footer .left-list .right-content a i {
    color: var(--secondary-color);
    font-size: 1.4vw;
}

footer .left-list .right-content .social {
    display: flex;
    gap: 0 1vw;
    text-decoration: none;
    color: black;
}
footer .left-list .right-content .other-social{
    display: flex;
    flex-direction: column;
    gap: 1vw;
    text-decoration: none;
    color: black;
}
footer .left-list .right-content .other-social .social{
    padding: .5vw;
    display: flex;
    flex-direction: row;
    gap: 1vw;
    align-items: center;
}
footer .left-list .right-content .social a {
    padding: .75vw .95vw;
    margin-bottom: 1vw;
    margin-top: 1vw;
    border-radius: 5px;
    text-transform: uppercase;
    font-weight: 300;
    background: #ffffff;
}

footer .between-footer {
    display: flex;
    justify-content: space-between;
    padding-bottom: 2vw;
}
footer .between-footer .logo {
    width: 18vw;
    height: auto;
    display: block;
    margin-bottom: 2vw;
}
footer .between-footer .logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: top;
}

footer .between-footer .right-list {
    display: flex;
    gap: 2.5vw;
}
footer .between-footer .right-list label {
    font-family: var(--font-name);
    font-weight: 300;
    font-size: 1.111vw;
    line-height: 1.527vw;
    text-align: center;
    text-transform: capitalize;
    color: white;
    display: flex;
    gap: 1.3vw;
    position: relative;
}
footer .between-footer .right-list label::before {
    content: "\25BC";
    font-family: "Font Awesome 6 Free";
    font-size: 1vw;
    font-weight: 600;
    background: transparent;
    color: white;
    border-radius: 50%;
    border: 0px solid black;
    width: 4vw;
    position: absolute;
    right: 0;
    height: 1.5vw;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: 3.6058vw;
    transition: all .5s ease-in-out;
}
footer .between-footer .right-list ul {
    list-style-type: none;
}
footer .between-footer .right-list li {
    list-style-type: none;
}
footer .between-footer .right-list a {
    text-decoration: none;
    color: #000000;
    font-family: var(--font-name);
    font-weight: 700;
    font-size: 1.11vw;
    line-height: 2.013vw;
    text-transform: capitalize;
}
footer .between-footer .right-list form {
    height: fit-content;
    border: 1px solid #000000;
    padding: .51vw 2vw;
    border-radius: 5px;
    color: #000000;
}

footer .bottom-footer {
    display: flex;
    justify-content: space-between;
    background: #1A1A1A;
    color: white;
    padding-top: 2vw;
    padding-bottom: 2vw;
}
footer .bottom-footer p {
    margin-bottom: 0;
}
footer .bottom-footer span {
    font-family: var(--font-name);
    font-weight: 400;
    font-size: 0.972vw;
    line-height: 1.527vw;
    text-align: center;
    text-transform: capitalize;
    color: white;
}

/* MOBILE */

.mobile {
    padding: 7.25vw 5.138vw;
}
.mobile.active {
    padding: 7.25vw 5.138vw;
    color: white;
}
.mobile .menu-link.active {
    opacity: 1;
    transform: translateY(0vh);
    transition: all .5s ease-in-out;
    z-index: 10;
}
.mobile .menu-link {
    position: absolute;
    height: 100vh;
    top: 0;
    width: 100%;
    background: white;
    left: 0;
    justify-content: center;
    flex-direction: column;
    color: black;
    opacity: 0;
    z-index: 0;
    transform: translateY(-100vh);
    transition: all .5s ease-in-out;
}
header.mobile .menu-link .list-link {
    flex-direction: column;
    gap: 5.22vw;
}
header.mobile .menu-link .list-link.btn .btn-right.contact,
header.mobile .menu-link a {
    font-size: 6.11vw;
    line-height: normal;
    color: #000000;
    width: 100%;
}
header.mobile .logo {
    width: auto;
    height: 7vw;
}

header.mobile .icon-home.close {
    position: absolute;
    color: black;
    top: 7vw;
    right: 7vw;
    z-index: 12;
    display: none;
}
header.mobile .icon-home.active {
    display: block;
}
header.mobile .icon-home i {
    font-size: 10vw;
}

#cookies-policy .cookiesBtn__link {
    background: var(--secondary-color) !important;
    border: 1px solid var(--secondary-color) !important;
}
#cookies-policy .cookies__category input:checked+.cookies__box:after {
    background:  var(--secondary-color) !important;
}
#cookies-policy .cookies__details {
    color: var(--secondary-color) !important;
}

@media (max-width:768px) {

    .floating-button-action a {
        width: 16vw;
        height: auto;
        padding: 3vw;
    }
    footer {
        padding-top: 5vw;
    }
    
    footer .left-list .right-content .title {
        font-size: 6.111vw;
    }
    footer .left-list .right-content .social {
        gap: 0vw 4vw;
    }
    footer .left-list .right-content .social a {
        padding: 3.75vw 3.95vw;
    }
    footer .left-list .right-content a i {
        color: var(--secondary-color);
        font-size: 7.4vw;
    }
    footer .left-list .right-content .other-social {
        gap: 3vw;
        margin-top: 3vw;
        margin-bottom: 3vw;
    }
    footer .left-list .right-content .other-social .social {
        padding: .5vw;
        gap: 4vw;
        font-size: 5vw;
    }
    footer .left-list .right-content .other-social .social span {
        font-size: 5vw;
    }
    
    footer .between-footer {
        flex-direction: column;
    }
    footer .between-footer .logo {
        width: auto;
        height: 23vw;
    }
    footer .between-footer .right-list {
        flex-direction: column;
        gap: 2vw;
    }
    footer .between-footer .right-list ul {
        gap: 3vw 9vw;
        display: flex;
        flex-wrap: wrap;
        padding: 0;
    }
    footer .between-footer .right-list a {
        font-weight: 300;
        font-size: 4.11vw;
        line-height: normal;
    }
    footer .between-footer .right-list form {
        padding: 1.51vw 2vw;
        margin-top: 3vw;
        width: fit-content;
    }
    
    .selected-language {
        padding: 3vw 14vw 1vw 4vw;
        font-size: 4.333vw;
        background: gray;
    }
    .selected-language::after {
        font-size: 4.5vw;
        top: 3.64vw;
        right: 1vw;
        bottom: 22px;
    }
    .dropdown-options {
        margin: 2.49vw 0vw;
        padding: 2.41vw 9.399px;
    }
    .dropdown-option {
        padding: 1vw 25vw 1vw 1vw;
        font-size: 4.1vw;
    }

    footer .between-footer .right-list form .icon-globe i {
        font-size: 5vw;
    }

    footer .bottom-footer {
        padding-top: 5vw;
        padding-bottom: 5vw;
        flex-direction: column;
        gap: 3vw;
    }
    footer .bottom-footer span {
        font-size: 3.972vw;
        font-weight: 300;
        line-height: normal;
        text-align: start;
    }

    /* GESTION DU STYLE DES COOKIES */
    #cookies-policy.cookies {
        max-height: inherit !important;
        max-width: inherit !important;
    }
    #cookies-policy .cookies__alert {
        /* width: 100% !important; */
        /* max-width: 100% !important; */
        width: inherit !important;
        max-width: inherit !important;
    }
    #cookies-policy .cookies__wrapper {
        padding: 2em 3.5em !important;
    }
    #cookies-policy .cookies__title {
        font-weight: 700;
        line-height: normal;
        font-size: 4vw;
    }
    #cookies-policy .cookies__intro p {
        margin-top: 1em;
        font-size: 4vw;
        line-height: normal;
    }
    #cookies-policy .cookiesBtn__link span {
        font-size: 4vw;
    }
    #cookies-policy .cookies__btn--customize span {
        font-size: 4vw;
        line-height: normal;
    }
    #cookies-policy .cookies__details {
        font-size: 4vw !important;
    }
    #cookies-policy .cookies__box, #cookies-policy .cookies__category {
        display: block;
        overflow: hidden;
        position: relative;
        font-size: 4vw !important;
    }

}