body {
    margin: 0;
    padding: 0;
    background-color: rgb(228, 226, 226);
    font-family:Georgia, 'Times New Roman', Times, serif;
}


header {
    height: 70vh;
    background-image: url(../images/movie_stills_come_to_life_in_these_captivating_cinemagraphs_27.gif);
    background-size: cover;
}
.navbar {
    border-radius: 0 0 5px 5px;
    opacity: 60%;
}
.logo {
    width: 8%;
}
.nav-link:hover , .dropdown-item:hover{
    color: red !important;
}

h1 ,h2 ,h3 {
    color: rgba(0,175,244);
}

.zone {
    list-style: none;
}

.card {
    width: 45%;
    margin: auto;
}

.events {
    display: flex;
    flex-wrap: wrap;
}

.eventPicture {
    width: 100%;
}

.card:hover {
    background-color: rgba(0,175,244) !important;
    color: white !important;
}
.card:hover > h3 , .card:hover > h2{
    color: white;
}


.pict {
    background-image: url(../images/auto.jpg);
    background-size: cover;
    background-position: center;
    border-bottom: 2px black solid;
    width: 100%;
    height: 60vh;
}
.permis {
    width: 50%;
    height: 100%;
}

.partenaire {
    height: 40vh;
    display: flex;
    align-items: center;
}
.acc {
    width: 32%;
}

.code {
    height: 35vh;
}
.imgCode {
    width: 100%;
    height: 50%;
    background-position: center;
    background-size: cover;
}
.c1 {
    background-image: url(../images/examen-du-code-les-milles-conduite-1536x1152.jpg);
}
.c2 {
    background-image: url(../images/ici-code2-e1626781920186.png);
}

footer {
    color: white;
}
.reso {
    width: 10%;
}

.hp-60 {
    height: 60vh;
}


@media screen and (max-width: 800px) {
    header {
        height: 50vh !important
    }

    section {
        flex-direction: column;
    }
    
    .pourcent{
        flex-direction: column;
    }
    
    .card {
        width: 100%;
    }

    .comment > article > .w-50 {
        width: 80% !important;
        margin-bottom: 5%;
    }
    .comment > article {
        flex-direction: column;
    }
    .comment > article > .pe-5 , .ps-5 {
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 0% !important;
    }

    .acc {
        width: 100%;
    }

    .imgCode {
        margin: auto;
        width: 60%;
    }

    footer > section > .w-25 {
        margin: auto;
        width: 75% !important;
    }

    .reso {
        width: 30%;
    }

}