.hero-container{
    display: flex;
    flex-direction: column;
    color: #FFF;
    position: relative;
    width: 100%;
    min-height: 150vh;
    overflow-x: hidden;
    align-items: center;
    & .hero-tilde-1, & .hero-tilde-2{
        display: flex;
        width: 100%;
        min-height: 625px;
        position: absolute;
        top: 0;
        left: 0;
        & img{
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        &:nth-child(1){
            transform: translate(-50%, -40%);
            z-index: -2;
        }
        &:nth-child(2){
            width: 175%;
            bottom: 0;
            left: unset;
            top: unset;
            right: 0;
            min-height: 923px;
            transform: translate(55%, 0%);
        }
    }
    & .hero-mobile-tilde{
        display: none;
    }
    & .hero-wrapper{
        height: 100vh;
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        padding-bottom: 2rem;
        width: 100%;
        max-width: 1440px;
        & .hero-text{
            display: flex;
            flex-direction: column;
            height: 50%;
            transform: translateY(-25%);
            gap: 1rem;
            & h1{
                font-weight: 200;
                margin: 0;
                padding-bottom: 1rem;
            }
            & h2{
                margin: 0;
            }
        }
        & .hero-footer{
            display: flex;
            justify-content: space-between;
            position: relative;
            z-index: 2;
            & .hero-social, & .hero-poles{
                font-size: var(--wp--preset--font-size--xs-text);
                display: flex;
                align-items: center;
                gap: 1rem;
            }
            & .hero-images-wrapper{
                display: flex;
                width: 30%;
                position: absolute;
                top: 0;
                right: 0;
                transform: translate(-40%, -25%);
                & img{
                    aspect-ratio: 1/1;
                    object-fit: cover;
                    border-radius: 100%;
                    position: relative;
                    z-index: -2;
                }
                &  .hero-arrow{
                    display: flex;
                    position: absolute;
                    top: 50%;
                    left: 50%;
                    transform: translate(-50%, -50%);
                    height: 88px;
                    width: 88px;
                    opacity: 0;
                    &::after{
                        content:"";
                        width: 100%;
                        height: 100%;
                        background: url(../../../assets/svg/arrow-devis.svg) no-repeat center;
                    }

                }
                & .hero-devis{
                    position: absolute;
                    bottom: 0;
                    left: 30%;
                    transform: translate(-100%, 0%);
                    & p{
                        margin: 0;
                    }
                }
            }
            & .hero-scrolldown{
                display: none;
            }
        }
    }
}
@media (max-width: 1600px) {
    .hero-container{
        & .hero-wrapper{
            padding: var(--container-space);
            padding-top: 0;
            padding-bottom: 2rem;
        }
    }
}
@media (max-width: 1100px) {
    .hero-container {
        & .hero-tilde-1, & .hero-tilde-2 {
            &:nth-child(1) {
                transform: translate(-50%, 0%);
            }
            &:nth-child(2) {
                transform: translate(55%, -30%);
            }
        }
    }
}
@media (max-width: 820px) {
    .hero-container {
        & .hero-tilde-1, & .hero-tilde-2 {
            &:nth-child(1) {
                transform: translate(-50%, 0%);
            }
            &:nth-child(2) {
                transform: translate(55%, -60%);
                min-height: 600px;
            }
        }
    }
}
@media (max-width: 768px) {
    .hero-container {
        & .hero-tilde-1, & .hero-tilde-2 {
            &:nth-child(2) {
                transform: translate(55%, -40%);
                min-height: 600px;
            }
        }
        & .hero-mobile-tilde{
            display: flex;
            position: absolute;
            top: 90%;
            left: 50%;
            transform: translate(-50%, -50%);
        }
        & .hero-wrapper {
            & .hero-footer {
                & .hero-images-wrapper {
                    & .hero-devis {
                        & div{
                            & p{
                                & span{
                                    font-size: 30px!important;
                                }
                            }
                        }
                    }
                    & .hero-arrow {
                        &::after {
                            scale: 0.5;
                        }
                    }
                }
            }
        }
    }
}
@media (max-width: 576px) {
    .hero-container {
        min-height: 700px;
        & .hero-tilde-1, & .hero-tilde-2 {
            min-height: 300px;
            opacity: 0.5;
            display: none;
            &:nth-child(1) {
                transform: translate(-50%, 10%);
            }
            &:nth-child(2) {
                min-height: 300px;
                transform: translate(55%, 30%);
            }
        }
        & .hero-wrapper {
            height: auto;
            position: absolute;
            top: 42%;
            left: 50%;
            transform: translate(-50%, -50%);
            & .hero-text{
                transform: translateY(0);
                & h2{
                    & span{
                        font-size: 17px!important;
                    }
                }
                & p{
                    line-height: 150%;
                }
                & .wp-block-button.is-style-arrow{
                    & a{
                        padding: calc(0.667em + 2px) 0rem calc(0.667em + 2px) 4rem;
                    }
                }
            }
            & .hero-footer {
                flex-direction: column;
                align-items: center;
                gap: 1rem;
                padding-top: 2rem;
                & .hero-images-wrapper {
                    display: none;
                    top: unset;
                    right: unset;
                    left: 50%;
                    bottom: -3rem;
                    transform: translate(0%, 100%);
                    & .hero-devis {
                        transform: translate(-110%, 0%);
                        & div{
                            & p{
                                & span{
                                    font-size: 30px!important;
                                }
                            }
                        }
                    }
                    & .hero-arrow {
                        &::after {
                            scale: 0.3;
                        }
                    }
                }
                & .hero-scrolldown{
                    display: flex;
                    position: absolute;
                    bottom: 0;
                    height: 50px;
                    transform: translateY(120%);
                    width: 1px;
                    & span{
                        position: absolute;
                        height: 25px;
                        width: 25px;
                        border-bottom: 2px solid #FFF;
                        border-right: 2px solid #FFF;
                        left: -50%;
                        transform: translateX(-50%) rotate(45deg);
                        &:nth-child(1){
                            top: 0;
                            border-color: var(--wp--preset--color--gris);
                            opacity: 0.2;
                        }
                        &:nth-child(2){
                            top: 25px;
                            border-color:  rgba(136, 136, 136, 0.80);
                            opacity: 0.2;
                        }
                        &:nth-child(3){
                            top: 50px;
                            border-color: #5137D4;
                            opacity: 0.2;
                        }
                    }
                }
            }
        }
    }
}
@keyframes fadeInSequence {
    0%, 100% {
        opacity: 0.2;
    }
    33% {
        opacity: 1;
    }
    66% {
        opacity: 0.2;
    }
}

.hero-container .hero-scrolldown span:nth-child(1) {
    animation: fadeInSequence 3s infinite;
    animation-delay: 0s;
}

.hero-container .hero-scrolldown span:nth-child(2) {
    animation: fadeInSequence 3s infinite;
    animation-delay: 0.5s;
}

.hero-container .hero-scrolldown span:nth-child(3) {
    animation: fadeInSequence 3s infinite;
    animation-delay: 1s;
}