/* link font caroussel */
@import url('https://fonts.googleapis.com/css2?family=Archivo+Black&display=swap');

/* caroussel index */
    .caroussel_container{
        width: 95%;
        height: 27rem;
        margin: 10px auto -10px auto;
        position: relative;
    }

    .caroussel_container .image{
        width: 100%;
        height: 100%;
        display: none;
        position: absolute;
    }

    .caroussel_container .image:before{
        content: '';
        position: absolute;
        top: 0; left: 0;
        width: 100%; height: 100%;
        background: #00000050;
        z-index: 1;
        border-radius: 15px;
    }

    .caroussel_container .image.active {
        display: block;
        border-radius: 15px;
    }

    .caroussel_container .image img{
        object-fit: cover;
        border-radius: 15px;
        overflow: hidden;
    }

    .caroussel_container .button{
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        width: 100%;
        display: flex;
        justify-content: space-between;
        z-index: 5;
    }

    .caroussel_container .button div{
        width: 40px;
        height: 40px;
        text-align: center;
        line-height: 40px;
        vertical-align: middle;
        align-items: center;
        cursor: pointer;
        color: white;
        background: var(--orange);
        font-size: 20px;
        user-select: none;
    }

    .caroussel_container .button div:hover{
        background: var(--blue);
    }

    .caroussel_container .button .prev{
        border-radius: 0 5px 5px 0;
    }

    .caroussel_container .button .next{
        border-radius: 5px 0 0 5px;
    }

    .dots{
        position: absolute;
        bottom: 0px;
        left: 50%;
        transform: translateX(-50%);
        padding: 5px;
    }

    .dot{
        cursor: pointer;
        padding: .3rem;
        border-radius: 50%;
        background: #bbb;
        display: inline-block;
        margin: 0 2px;
    }

    .caroussel_container .active, .dot:hover{
        background: var(--orange);
    }

    .content_caroussel{
        position: relative;
        width: 100%;
        height: 100%;
    }

    .name_enterprise{
        position: absolute;
        transform: translatey(-15px);
        z-index: 10;
    }

    .name_enterprise h1{
        font-size: 120px;
        font-family: "Archivo Black", sans-serif;
        letter-spacing: 6px;
        color: white;
        -webkit-text-stroke: 7px var(--blue);
    }

    .name_enterprise p{
        background: var(--blue);
        font-size: 30px;
        font-weight: bolder;
        font-family: arial black;
        color: var(--orange);
        letter-spacing: 30px;
        transform: translatey(-10px);
        border-radius: 15px;
    }

    .name_enterprise span{
        font-size: 20px;
        font-weight: bold;
        color: white;
    }

    .caroussel_annonce{
        width: 65%;
        position: absolute;
        margin: 0 4rem;
        z-index: 10;
    }

    .caroussel_annonce h1{
        font-size: 45px;
    }

    .caroussel_annonce p{
        position: relative;
        max-height: 5rem;
        font-size: 20px;
        margin: 1rem 0;
        overflow-y: auto;
        padding-right: .3rem;
        z-index: 100;
    }

    .caroussel_annonce p::-webkit-scrollbar{
        width: .3rem;
        height: .3rem;
    }
    
    .caroussel_annonce p::-webkit-scrollbar-track{
        background-color: white;
        border-radius: .7rem;
    }
    
    .caroussel_annonce p::-webkit-scrollbar-thumb{
        background-color: black;
    }

    .caroussel_annonce p:hover::-webkit-scrollbar{
        width: .5rem;
        height: .5rem;
    }
/* caroussel index */


/* caroussel index */
    /* first caroussel / button / dot */
        @media screen and (max-width: 850px) {
            .caroussel_container{
                height: 25rem;
            }

            .name_enterprise h1{
                font-size: 100px;
            }

            .name_enterprise p{
                font-size: 25px;
                border-radius: 10px;
            }

            .name_enterprise span{
                font-size: 18px;
            }
        }

        @media screen and (max-width: 680px) {
            .caroussel_container{
                height: 20rem;
            }

            .name_enterprise h1{
                font-size: 80px;
                -webkit-text-stroke: 5px var(--blue);
            }

            .name_enterprise p{
                font-size: 20px;
            }

            .name_enterprise span{
                font-size: 17px;
            }
        }

        @media screen and (max-width: 530px) {
            .caroussel_container{
                height: 18rem;
            }

            .caroussel_container .button div{
                width: 35px;
                height: 35px;
                line-height: 35px;
                font-size: 15px;
            }

            .name_enterprise h1{
                font-size: 70px;
                letter-spacing: 5px;
                -webkit-text-stroke: 2px var(--blue);
            }

            .name_enterprise p{
                font-size: 18px;
                letter-spacing: 25px;
            }

            .name_enterprise span{
                font-size: 16px;
            }
        }

        @media screen and (max-width: 480px) {
            .caroussel_container{
                height: 17rem;
            }

            .caroussel_container .button div{
                width: 30px;
                height: 30px;
                line-height: 30px;
            }

            .dot{
                padding: .2rem;
            }

            .name_enterprise h1{
                font-size: 65px;
            }

            .name_enterprise p{
                font-size: 16px;
                letter-spacing: 22px;
                transform: translatey(-7px);
            }

            .name_enterprise span{
                font-size: 15px;
            }
        }

        @media screen and (max-width: 440px) {
            .caroussel_container{
                height: 16rem;
            }

            .caroussel_container .button div{
                width: 25px;
                height: 25px;
                line-height: 25px;
                font-size: 13px;
            }

            .name_enterprise{
                display: flex;
                flex-direction: column;
                align-items: center;
            }

            .name_enterprise h1{
                font-size: 58px;
            }

            .name_enterprise p{
                font-size: 14px;
                letter-spacing: 18px;
            }

            .name_enterprise span{
                font-size: 13px;
            }
        }

        @media screen and (max-width: 350px) {
            .caroussel_container{
                height: 15rem;
            }

            .caroussel_container .button div{
                width: 25px;
                height: 25px;
                line-height: 25px;
                font-size: 13px;
            }

            .name_enterprise h1{
                font-size: 50px;
                -webkit-text-stroke: 3px var(--blue);
            }

            .name_enterprise p{
                font-size: 14px;
                letter-spacing: 16px;
            }

            .name_enterprise span{
                font-size: 12px;
            }
        }
    /* first caroussel / button / dot */

    /* the others caroussel */
        @media screen and (max-width: 850px) {
            .caroussel_annonce{
                width: 85%;
            }

            .caroussel_annonce h1{
                font-size: 40px;
            }
        }

        @media screen and (max-width: 785px) {
            .caroussel_annonce h1{
                font-size: 35px;
            }

            .caroussel_annonce p{
                font-size: 18px;
            }
        }

        @media screen and (max-width: 760px) {
            .caroussel_annonce{
                width: 82%;
            }
        }

        @media screen and (max-width: 680px) {
            .caroussel_annonce{
                width: 81%;
            }

            .caroussel_annonce h1{
                font-size: 30px;
            }

            .caroussel_annonce p{
                font-size: 17px;
            }
        }

        @media screen and (max-width: 600px) {
            .caroussel_annonce{
                width: 80%;
            }

            .caroussel_annonce p{
                font-size: 16px;
                margin: .5rem 0;
            }
        }

        @media screen and (max-width: 550px) {
            .caroussel_annonce{
                width: 76%;
            }
        }

        @media screen and (max-width: 500px) {
            .caroussel_annonce h1{
                font-size: 28px;
            }

            .caroussel_annonce p{
                max-height: 6rem;
                font-size: 15px;
            }
        }

        @media screen and (max-width: 450px) {
            .caroussel_annonce{
                width: 70%;
            }

            .caroussel_annonce h1{
                font-size: 23px;
            }

            .caroussel_annonce p{
                font-size: 14px;
            }
        }

        @media screen and (max-width: 400px) {
            .caroussel_annonce{
                width: 72%;
            }

            .caroussel_annonce h1{
                font-size: 20px;
            }

            .caroussel_annonce p{
                font-size: 13px;
            }
        }
    /* the others caroussel */
/* caroussel index */