/* Small devices (phones, less than 768px) */
@media (max-width: 767.98px) {
    body {
        margin: 0%;
    }

    .main-container {
        padding: 0px;
    }

    /********* Header *********/
    header {
        flex-direction: column;
        align-items: center;
    }
    
    header nav {
        display: flex;
        width: 100%;
    }

    header a {
        width: 50%;
        margin-left: 0px;
        padding-bottom: 15px;
        text-align: center;
        border-bottom: 2px #F2F2F2 solid;
    }
    
    header a:hover {
        border-bottom: 2px #0065FC solid;
        border-top: none;
    }

    /********* Info-group *********/
    .info-group {
        padding: 0px 20px;
    }

    form {
        width: 100%;
    }

    input[type='text'] {
        width: 90%;
    }

    input[type='submit'] {
        display: none;
    }

    .fa-magnifying-glass {
        display: flex;
    }

    .filter-menu ul {
        flex-wrap: wrap;
        justify-content: space-around;
        gap: 10px;
        width: 100%;
    }

    .filter-menu li {
        width: 40%;
        font-size: 14px;
    }

    .info-group p {
        display: flex;
        align-items: center;
        margin-bottom: 0%;
    }

    .fa-info {
        height: 24px;
        width: 24px;
        display: block;
        padding: 3px 10px 20px 8px;
        margin-right: 10px;
        box-sizing: border-box;
    }

    /********* Hebergements and populaires *********/
    .hebergements-and-populaires {
        flex-direction: column-reverse;
        margin-top: 0px;
    }

    .hebergements-and-populaires section {
        padding: 30px 20px;
        border-radius: 0%;
    }

    .hebergements-and-populaires .hebergements {
        background-color: unset;
    }

    /********* Populaires *********/
    .populaires {
        margin-top: 35px;
    }

    .populaires-cards {
        flex-direction: column;
    }

    .populaires-cards .card {
        margin-top: 15px;
    }

    .populaires-cards a {
        width: 100%;
    }

    /********* Hebergements *********/
    .hebergements-cards {
        flex-direction: column;
    }

    .hebergements-cards .card {
        margin-top: 15px;
    }

    .hebergements-cards a {
        width: 100%;
    }

    .display-more {
        margin-top: 15px;
    }

    /****** Activites ***********/
    .activites-title {
        margin-bottom: 30px;
    }

    .activites-cards {
        flex-direction: column;
    }

    .activites-cards a {
        width: 100%;
    }

    .activites-cards .card {
        margin-top: 15px;
        height: 200px;
    }

    .activites-cards img {
        height: 141px;
    }

    /****** Footer ***********/
    footer {
        padding: 30px;
        flex-direction: column;
    }

    footer div {
        padding: unset;
        width: unset;
    }

    .a-propos-foot {
        margin-bottom: 50px;
    }

    .hebergements-foot {
        margin-bottom: 50px;
    }
}