.title{
    margin-top: 1%;
    display: none;
}


background-image.img{
    opacity: 0.5;
}
.progress-col {
    display: flex;
    justify-content: center;
    align-items: center;
    padding-top: 0px;

}

.step {
    width: 32px;
    height: 32px;
    border: 2px solid #ffa500;;
    border-radius: 50%;
    text-align:center ;
    background-color: #fff;
    color: #ffa500;;
    padding-top: 1.5%;
    font-weight: bold;
    margin-right: 2%;
    font-size: 16px;
}

.step.active {
    background-color: #ffa500;;
    color: #fff;
}

.vertical-progress {
    position: relative; /* Permet de positionner le libellé par rapport à ce conteneur */
}

.step-label {
    position: absolute; /* Positionnement absolu par rapport au conteneur parent */
    bottom: -30px; /* Distance par rapport au bas de la barre de progression */
    left: 55%; /* Centre horizontalement */
    transform: translateX(-50%); /* Centrage horizontal */
    font-size: 14px; /* Taille de la police */
    color: #000; /* Couleur du texte */
}

/* Ajoutez cette règle pour cacher tous les libellés sauf celui de l'étape active */
.step-label:not(.active) {
    display: none;
}

.LogoCeet1 img {
    width: 191px; /* Largeur du logo en pixels */
    height: 189px; /* Hauteur du logo en pixels */
    left: 43px; /* Distance par rapport au bord gauche de son conteneur en pixels */
}



        .welcom h1 {
            width: 554px;
            height: 285px;
            left: 229px;
            top: 40px;
            position: absolute;
            color: #E30613;
            font-size:  64px;
            font-family: 'Open Sans';
            font-weight: 400;
            line-height: 76px;
            word-wrap: break-word;
        }
        .welcom h4 {
            width: 567px;
            left: 234px;
            top: 300px;
            position: absolute;
            color: black;
            font-size: 24px;
            font-family: 'Open Sans';
            font-weight: 400;
            line-height: 28px;
        }
        .copyright {
            margin-top: 25px;
            margin-left: 800px;
            position: absolute;
            color: black;
            font-size: 12px;
            font-family: 'Open Sans';
            font-weight: 700;
            word-wrap: break-word;
                    }
                    .need-help {
                        text-align: center; /* Centrer le texte */
                    }
                    .v-line {
                        width: 2px;
                        background-color: #ffa500;;
                        margin-left: 8%;
                        margin-top: -2%;
                        
                        height: 3em;                     
                    }

                      .mobile{
                        display:flex;
                      }

                      .span{
                        padding: 3%;
                    }

        @media (max-width: 768px) { /* Cible les écrans de taille xs et sm */

            .vertical-progress{
                display: flex;
                justify-content: space-between;
                width:100%;
            }

            .step {
                width: 32px;
                height: 32px;
                border: 2px solid #ffa500;;
                border-radius: 50%;
                text-align:center ;
                background-color: #fff;
                color: #ffa500;;
                padding-top: 10%;
                font-weight: bold;
                margin-right: 2%;
                font-size: 16px;
            }

            .v-line {
                width: 4em;
                background-color: #ff9d00;
                margin-left: 0%;
                margin-top: 7%;
                
                height:2px; 
            }

              .mobile{
                display:flex;
            } 

              .span{
                padding: 3%;
            }

            .mobile{
                display: initial;

            }

            .span{
                margin-top:3%;
                margin-left:5%;
                display:none;
            }

            .in_div{
                padding-left: 2%;
            }

            .title{
                display: initial;
            }

           

            #info{
                margin-left:10%;
            }

            #logo{
                padding-left:40%;
            }

        }