/* hero index */
    .heroIndex{
        position: relative;
        width: 95%; height: 60dvh;
        padding: 16px;
        margin: 0 auto;
        border-radius: 16px;
        background-color: var(--bluebg);
    }
/* hero index */

/* section services */
    .services{
        margin-top: 100px;
    }
/* section services */

/* stats */
    .statistiques{
        position: absolute;
        bottom: 0; left: 50%;
        transform: translate(-50%,20%);
        width: 80%; height: 100px;
        display: grid;
        grid-template-columns: repeat(4,1fr);      
    }

    .stat{
        position: relative; 
        display: flex;
        justify-content: center;
        align-items: center;       
    }

    .stat:nth-child(odd){
        background-color: var(--blue);
    }
    
    .stat:nth-child(even){
        background-color: var(--yellow);
    }

    .stat:first-child{
        border-top-left-radius: 16px;
        border-bottom-left-radius: 16px;
    }
    
    .stat:last-child{
        border-top-right-radius: 16px;
        border-bottom-right-radius: 16px;
    }

    .statCount{
        font-size: 100px;
        font-weight: bolder;
        color: var(--white);
        zoom: 140%;
    }

    .statName{
        position: absolute;
        width: 100%;
        left: 0; top: 50%;
        transform: translateY(-50%);
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 5px;
        span{
            text-align: center;
            font-size: 18px;
            text-wrap: nowrap;
            color: var(--white);
        }
    }

    .stat:nth-child(odd) .statName{
        background-color: var(--blue);
    }

    .stat:nth-child(even) .statName{
        background-color: var(--yellow);
    }
/* stats */

/* section mvo */
    .container_mvo{
        display: grid;
        grid-template-columns: repeat(3,1fr);
        gap: 16px;
    }

    .content_mvo:nth-child(2){
        border-radius: 16px;
        background-color: var(--white);
        border: 1px solid var(--light-gray);
    }

    .box_img_mvo{
        position: relative;
        height: 495px;
        img{
            width: 100%;
            height: 100%;
            object-fit: contain;
            position: relative;
            z-index: 10;
        }
    }

    .content_mvo:first-child, .content_mvo:last-child{
        display: flex;
        flex-direction: column;
        gap: 16px;
    }
    
    .box_img_mvo:before{
        content: '';
        position: absolute;
        top: 50%; left: 50%;
        transform: translate(-50%,-50%);
        width: 340px; height: 340px;
        border-radius: 50%;
        background-color: var(--blue);
        background-image: url(../images/pattern_optitech.png);
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        z-index: 1;
    }
    
    .box_img_mvo:after{
        content: '';
        position: absolute;
        bottom: 0; left: 0;
        width: 100%; height: 15px;
        backdrop-filter: blur(10px);
        z-index: 10;
        border-radius: 0 0 16px 16px;
    }

    .box_mvo{
        background-color: var(--white);
        border: 1px solid var(--light-gray);
        border-radius: 16px;
        padding: 20px;
        height: 240px;
    }

    .box_icon_mvo{
        background-color: var(--yellow);
        width: 35px; height: 35px;
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 8px;
        i{
            color: var(--white);
        }
    }

    .box_mvo h3{
        margin: 8px 0;
        color: var(--blue);
        font-weight: 800;
    }

    .box_mvo p{
        text-align: justify;
        overflow-y: auto;
        max-height: 125px;
        padding-right: 5px;
        white-space: pre-line;
    }
/* section mvo */

/* section newsletter */
    .box_newsletter {
        background-color: var(--blue);
        background-image: url(../images/pattern_optitech.png);
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        margin: 0 auto;
        border-radius: 16px;
        border: 3px solid var(--yellow);
        position: relative;
    }

    .box_newsletter::before{
        content: '';
        width: 100%; height: 100%;
        position: absolute;
        top: 0; left: 0;
        backdrop-filter: blur(3px);
        border-radius: 16px;
        z-index: 1;
    }
    
    .content_newsletter{
        padding: 48px;
        display: flex;
        flex-direction: column;
        align-items: center;
        position: relative;
        z-index: 10;
    }
    
    .titre_newsletter {
        font-size: 30px;
        font-weight: bolder;
        color: var(--white);
    }
    
    .newsletter_text {
        width: 60%;
        margin: 13px auto;
        font-size: 18px;
        text-align: center;
        color: var(--white);
    }
    
    .box_newsletter form {
        position: relative;
        width: 480px;
        display: flex;
        align-items: center;
    }
    
    .box_newsletter form input {
        width: 100%;
        padding: 10px;
        border-radius: 8px;
        font-size: 15px;
        outline: none;
        border: none;
    }
    
    .box_newsletter form button {
        position: absolute;
        width: 56px; height: calc(100% - 2px);
        right: 1px;
        padding: 10px;
        border: none;
        border-radius: 0 8px 8px 0;
        background: var(--yellow);
        font-size: 20px;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        i{
            color: var(--white);
        }
    }
    
    .box_newsletter form button:hover{
        background: var(--blue);
    }
/* section newsletter */

/* responsive */
    /* stats */
        @media screen and (max-width: 1100px) {
            .statCount{
                font-size: 80px;
            }
        }
        
        @media screen and (max-width: 950px) {
            .statistiques{
                width: 95%;
            }
        }

        @media screen and (max-width: 800px) {
            .statCount{
                font-size: 70px;
            }

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

        @media screen and (max-width: 650px) {
            .statistiques{
                width: 85%;
                grid-template-columns: repeat(2,1fr); 
            }

            .services{
                margin-top: 170px;
            }

            .stat:nth-child(1), .stat:nth-child(4){
                background-color: var(--blue);
            }
            
            .stat:nth-child(2), .stat:nth-child(3){
                background-color: var(--yellow);
            }

            .stat:nth-child(1){
                border-radius: 16px 0 0 0;
            }
            
            .stat:nth-child(2){
                border-radius: 0 16px 0 0;
            }
            
            .stat:nth-child(3){
                border-radius: 0 0 0 16px;
            }
            
            .stat:nth-child(4){
                border-radius: 0 0 16px 0;
            }

            .stat:nth-child(3) .statName{
                background-color: var(--yellow);
            }

            .stat:nth-child(4) .statName{
                background-color: var(--blue);
            }
        }

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

            .statName{
                padding: 1px;
            }

            .statCount{
                font-size: 60px;
            }

            .services{
                margin-top: 130px;
            }
        }
        
        @media screen and (max-width: 380px) {
            .statCount{
                font-size: 55px;
            }

            .services{
                margin-top: 115px;
            }
        }
    /* stats */

    /* section mvo */
        @media screen and (max-width: 1150px){
            .container_mvo{
                grid-template-columns: repeat(1,1fr);
            }
            
            .box_mvo{
                height: auto;
            }
        }
        
        @media screen and (max-width: 450px){
            .box_img_mvo:before{
                width: 300px; height: 300px;
            }
        }
        
        @media screen and (max-width: 400px){
            .box_img_mvo:before{
                width: 270px; height: 270px;
            }
        }
    /* section mvo */

    /* section newsletter */
        @media screen and (max-width: 1000px){
            .content_newsletter{
                padding: 48px 16px;
            }
            
            .newsletter_text{
                width: 80%;
            }
        }
        
        @media screen and (max-width: 800px){
            .titre_newsletter {
                font-size: 25px;
            }
            
            .newsletter_text {
                font-size: 16px;
            }
            
            .box_newsletter form{
                width: 400px;
            }
        }
        
        @media screen and (max-width: 650px){
            .content_newsletter{
                padding: 32px 16px;
            }
            
            .newsletter_text{
                width: 90%;
            }
            
            .box_newsletter form{
                width: 350px;
            }
        }
        
        @media screen and (max-width: 550px){
            .newsletter_text {
                font-size: 15px;
            }
            
            .box_newsletter form{
                width: 95%;
            }
        }
    /* section newsletter */
/* responsive */