:root {
    --main-bg: #FCFCFC;
    --black-color:  #011710;
    --gren-color: #B3E5BE;
    --blue-color: #DCEBF0;
}

/******* BURGER MENU *******/

.container-menu-burger, .burger, .container-menu-mob{
    display: none;
}

@media screen and (max-width: 890px) {

    h2{
        font-size: 31px;
    }

    .title-banner{
        font-size: 43px;
        line-height: 50px;
        min-width: auto !important;
    }

    .container-txt-banner{
        width: auto;
    }

    .p-banner{
        min-width: 300px;
    }

    .carousel-container{
        top: 335px;
    }

    .container{
        flex-direction: column;
        gap: 64px;
    }

    .card{
        width: 100%;
    }

    .img-rea{
        opacity: 1;
    }

    #card4, #card5{
        display: none;
    }

    .card:hover{
        width: 100%;
    }

    #container-content-title-rea{
        margin-top: 120px;
    }

    .container-crea{
        flex-wrap: wrap;
    }

    .container-img-crea{
        width: 100%;
        max-height: 350px;
        min-height: 350px;
    }

    .container-img-crea-default{
        width: 100%;
        max-height: 350px;
        min-height: 350px;
    }

    .img-crea-default{
        position: relative;
        z-index: 9999;
        min-width: 100%;
        max-height: 350px;
        min-height: 350px;
    }

    .img-crea{
        max-height: 350px;
        min-height: 350px;
        width: 0%;
        min-width: 0%;
        max-width: 100%;
        z-index: 9999;
    }

    .img-crea-hovered{
        z-index: 9999;
        max-height: 350px;
        min-height: 350px;
    }

    .img-crea-not-hovered{
        z-index: 999;
    }

    .background-b {
        height: 2280px;
    }

    .container-selector-crea{
        gap: 40px;
    }

    .selector{
        height: 72px;
    }

    .selector::before{
        height: 72px;
    }

    .container-card-services-home{
        flex-direction: column;
    }

    .card-services-home{
        width: auto;
        gap: 40px;
    }

    .container-card-services-home{
        gap: 24px;
    }

}

@media screen and (max-width: 630px) {
    .container-menu-item{
        display: none;
    }

    .btn{
        max-width: none;
    }

    .btn span{
        max-width: none;
    }

    .hero-banner {
        padding-top: 40px;
    }

    .container-banner{
        padding-top: 16px;
    }

    .container-txt-banner {
        gap: 80px;
    }

    .carousel-container {
        top: 328px;
    }

    #logo, .container-menu-burger{
        z-index: 99999;
    }

    /******* BURGER MENU *******/

    .container-menu-burger, .burger{
        display: flex;
        flex-direction: column;
        gap: 8px;
    }

    .container-menu-burger{
        margin-right: 16px;
        margin-top: 8px;
        cursor: pointer;
        opacity: 0;
        animation: fade .8s cubic-bezier(0.23, 0.75, 0.31, 0.98) .8s forwards;    
    }

    .burger{
        height: 14px;
        position: relative;
    }

    .line-burger{
        position: absolute;
        width: 100%;
        height: 3px;
        background-color: var(--black-color);
    }

    #line-top-burger{
        top: 0;
        transition: 0.2s cubic-bezier(0.1, 0.82, 0.76, 0.965);
    }

    #line-bot-burger{
        bottom: 0;
        transition: 0.2s cubic-bezier(0.1, 0.82, 0.76, 0.965);
    }

    .top-active{
        rotate: 45deg;
    }

    .bot-active{
        top: 0;
        rotate: -45deg;
    }

    .title-burger{
        font-family: 'ClashDisplay-Variable';
        font-weight: 550;
        font-size: 15px;
        color: var(--black-color);
    }

    .container-menu{
        align-items: center;
    }

    .container-menu-mob{
        position: fixed;
        width: 100vw;
        height: 100vh;
        background-color: var(--main-bg);
        right: -100%;
        top: 0;
        z-index: 9999;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        transition: cubic-bezier(0.23, 0.75, 0.31, 0.98) 550ms;
        opacity: 0.95;
        backdrop-filter: blur(1px); /* Appliquer le flou au fond */
    }

    .block-rsx-mob{
        height: 120px;
        display: flex;
        justify-content: center;
        align-items: center;
        background: var(--black-color);
    }

    .open{
        right: 0;
        box-shadow: -20px 0px 80px -15px rgba(1, 23, 16, .3);
        opacity: 1;
        backdrop-filter: blur(1px); /* Appliquer le flou au fond */
    }


    .container-item-mob{
        display: flex;
        flex-direction: column;
        width: 100%;
        max-width: 100vw;
        margin-top: 35%;
        gap: 24px;
        margin-left: 16px;
    }
    
    .link{
        justify-content: start;
    }
    
    .item{
        position: relative;
        width: max-content;
        opacity: 0;
        margin-top: 24px;
        transition: cubic-bezier(0.23, 0.75, 0.31, 0.98) 500ms;
    }

    .line {
        transform: translate(-50%);
        top: 45%;
        position: absolute;
        display: block;
        width: 100%;
        height: 5px;
    }
    
    .item > a{
        color: var(--black-color);
        font-family: 'ClashDisplay-Variable';
        font-weight: 550;
        font-size: 30px;
    }

    body.menu-open {
        overflow: hidden !important;
    }

    /* MENU ITEM ANIM */

    @keyframes fadeup {
        0% {
            opacity: 0;
            margin-top: 24px;
        }
    
        100% {
            opacity: 1;
            margin-top: 0;
        }
    }

    .fadeup{
        animation: fadeup cubic-bezier(0.23, 0.75, 0.31, 0.98) 550ms forwards;
    }

    .item:nth-child(1) {
        animation-delay: 275ms;
    }
    
    .item:nth-child(2) {
        animation-delay: 400ms;
    }
    
    .item:nth-child(3) {
        animation-delay: 525ms;
    }

    .item:nth-child(4) {
        animation-delay: 650ms;
    }

    #services-card{
        margin-left: auto;
        width: 95vw;
        margin-right: auto;
    }

}

@media screen and (max-width: 500px) {

    /****** MAIN HOME ******/

    #main-home{
        margin-top: 120px;
    }


    /****** UX.UI ******/

    .background-b{
        height: 2200px;
    }

    .container-rea, .container-crea{
        margin-bottom: 120px;
    }

    .container-hero-projet-content {
        padding-top: 20%;
        padding-bottom: 10%;
    }

    .container-product-projet {
        gap: 64px;
    }

    .container-content-product-projet{
        gap: 64px;
        flex-wrap: wrap;
    }

    .card-projet, .card-second {
        margin-top: 0;
    }

    .p-banner{
        max-width: 95% !important;
    }

    /* PROJETS */

    #main-projets{
        margin-top: 40px;
    }

    .container-card-project{
        margin-bottom: 120px !important;
    }

    /* SERVICES */

    .container-services-home{
        padding-top: 80px;
        padding-bottom: 80px;
    }

    .container-card-services-home{
        margin-top: 48px;
        gap: 16px;
    }


    /* CONTACT */

    .container-img-form-contact, .img-form-contact {
        max-height: 250px !important;
    }

    .img-form-contact {
        min-height: 250px !important;
    }

    footer{
        height: 95vh;
    }

}


@media screen and (max-width: 430px) {


    h1{
        font-size: 40px !important;
    }

    h2{
        font-size: 29px !important;
    }

    p{
        font-size: 19px !important;
    }

    .title-banner{
        width: 100%;
    }

}