/****** General ***********/
*,
*:after {
    font-family: 'Raleway', sans-serif;
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

:root {
    --main-color: #0065FC;
    --main-bg-color: #F2F2F2;
    --filter-bg-color: #DEEBFF;
}

.fa-solid {
    color: var(--main-color);
}

header {
    display: flex;
    justify-content: space-between;
}

body {
    display: flex;
    justify-content: center;
}

.main-container {
    width: 100%;
    max-width: 1440px;
    padding: 0 50px;
    box-sizing: border-box;
}

/*##################*/
/*##### NAVBAR #####*/
/*##################*/

.logo {
    width: 60px;
    height: 20px;
    margin: 15px;
    margin-left: 0;
}

nav {
    display: flex;
    width: 300px;
}

nav ul {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    width: 300px;
    margin: 0;
    align-items: center;
}

nav ul li {
    list-style-type: none;
}

.nav-link {
    position: relative;
    text-decoration: none;
    color: black;
    height: 30px;
    padding: 14px;
}

.nav-link:after {
    content: "";
    position: absolute;
    background-color: var(--main-color);
    height: 4px;
    width: 0%;
    left: 0;
    top: -3px;
}

.nav-link:hover:after {
    width: 100%;
}

.nav-link:visited {
    text-decoration: none;
    color: black;
}

.nav-link:hover {
    color: var(--main-color);
}

/*######################*/
/*##### END NAVBAR #####*/
/*######################*/

/*#######################*/
/*##### SEARCH FORM #####*/
/*#######################*/

.search-space {
    margin-top: 20px;
    padding: 15px;
}

form {
    padding-top: 25px;
    display: flex;
}

.location-icon {
    border: var(--main-bg-color) 1px solid;
    background-color: var(--main-bg-color);
    border-radius: 15px 0px 0px 15px;
    font-size: 15px;
    color: black;
    padding: 15px;
}

.search-form {
    border: var(--main-bg-color) 1px solid;
    padding: 15px;
    font-size: 15px;
    font-weight: bold;
    width: 160px;
}

.search-btn {
    border: var(--main-color) 1px solid;
    background-color: var(--main-color);
    font-family: 'Raleway', sans-serif;
    border-radius: 0px 15px 15px 0px;
    color: white;
    padding: 14px;
    font-size: 15px;
    font-weight: bold;
}

.search-btn-mobile {
    display: none;
}

.filter-btn-container {
    display: flex;
    margin-top: 25px;
    justify-content: space-around;
    width: 700px;
    font-size: 15px;
    font-weight: 600;
}

.form-filter-text {
    padding-top: 10px;
    font-size: 17px;
}

.icon-filter {
    margin-left: 5px;
    margin-right: 10px;
}

.filter-btn {
    border: var(--main-bg-color) 2px solid;
    background-color: white;
    font-family: 'Raleway', sans-serif;
    font-weight: bold;
    padding: 15px;
    border-radius: 25px 25px 25px 25px;
    height: 50px;
    display: flex;
    align-items: center;
}

.filter-btn:hover {
    background-color: var(--filter-bg-color);
}

.info-container {
    display: flex;
    margin-top: 30px;
    display: flex;
    flex-direction: row;
    width: 450px;
    justify-content: space-between;
}

.icone-info {
    border: var(--main-bg-color) 2px solid;
    padding: 3px;
    padding-left: 8px;
    padding-right: 8px;
    border-radius: 50%;
}

.info-text {
    padding-top: 5px;
}

/*###########################*/
/*##### END SEARCH FORM #####*/
/*###########################*/

.section-title {
    margin: 0;
    font-size: 22px;
}

.card {
    background-color: white;
    border-radius: 20px;
    padding: 5px;
    filter: drop-shadow(0px 3px 15px rgba(0, 0, 0, 0.1));
}

.card img {
    object-fit: cover;
}

.card-title {
    font-size: 16px;
}

.euro {
    font-weight: 700;
}

.neutralStar {
    color: var(--main-bg-color)
}

/****** Hebergements And Populaires ***********/

.hebergements-and-populaires {
    display: flex;
    justify-content: space-between;
    padding: 15px;
}

.hebergements-and-populaires section {
    background-color: var(--main-bg-color);
    border-radius: 20px;
    padding: 30px;
    box-sizing: border-box;
}

/*########################*/
/*##### HEBERGEMENTS #####*/
/*########################*/

.hebergements {
    width: 65%;
    display: flex;
    flex-direction: column;
}

.hebergements-cards {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-around;
}

.hebergements-cards .card-link {
    display: flex;
    text-decoration: none;
    width: 33%;
    justify-content: center;
}

.hebergements-cards .card-link:visited {
    text-decoration: none;
    color: black;
}

.hebergements-cards .card {
    display: flex;
    flex-direction: column;
    margin-top: 33px;
    width: 90%;
    height: 220px;
}

.hebergements-cards .card img {
    width: 100%;
    height: 115px;
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
    object-fit: cover;
}

.hebergements-cards .card-txt {
    margin-left: 10px;
}

.hebergements-cards .card-title {
    margin-top: 10px;
    color: black;
}

.hebergements-cards .card-subtitle {
    margin-top: 10px;
    color: black;
}

.hebergements-cards .card-rating {
    margin-top: 5px;
    margin-left: 10px;
}

.hebergements .show-more {
    text-decoration: none;
    margin-top: 25px;
    font-size: 20px;
    font-weight: 700;
    color: black;
}

.hebergements .show-more:visited {
    text-decoration: none;
    color: black;
}

/*############################*/
/*##### END HEBERGEMENTS #####*/
/*############################*/

/****** Populaires ***********/

.populaires {
    width: 32%;
}

.populaires-title {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.populaires-cards .card-link {
    text-decoration: none;
    color: black;
}

.populaires-cards .card-link:visited {
    text-decoration: none;
    color: black;
}

.populaires-cards .card {
    display: flex;
    margin-top: 33px;
}

.populaires-cards .card img {
    width: 33%;
    height: 134px;
    border-top-left-radius: 20px;
    border-bottom-left-radius: 20px;
}

.populaires-cards .card-content {
    width: 67%;
    padding-left: 15px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    box-sizing: border-box;
}

.populaires-cards .card-title {
    margin-top: 10px;
    margin-bottom: 4px;
}

.populaires-cards .card-subtitle {
    margin: 0;
}

.populaires-cards .card-rating {
    margin-bottom: 5px;
}

/*####################*/
/*##### ACTIVITY #####*/
/*####################*/

.activity-container {
    padding: 40px;
    display: flex;
    flex-direction: column;
}

.activity-cards {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    margin-top: 30px;
    width: 100%;
}

.activity-cards .card-link {
    text-decoration: none;
    color: black;
    width: 24%;
}

.activity-cards .card-link:visited {
    text-decoration: none;
    color: black;
}

.activity-cards .card {
    display: flex;
    flex-direction: column;
    height: 450px;
    padding: 0;
}

.activity-cards .card img {
    width: 100%;
    height: 90%;
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
}

.activity-cards .card-title {
    margin-top: 15px;
    margin-left: 20px;
}

/*########################*/
/*##### END ACTIVITY #####*/
/*########################*/

/*##################*/
/*##### FOOTER #####*/
/*##################*/

footer {
    background-color: var(--main-bg-color);
    display: flex;
    padding: 10px;
}

.footer-element {
    display: flex;
    flex-direction: column;
    padding-top: 10px;
    padding-left: 15px;
    width: 100%;
}

.footer-element ul {
    display: flex;
    flex-direction: column;
    margin-top: 10px;
}

.footer-element li {
    display: flex;
    margin-top: 5px;
}

.footer-element a {
    color: black;
    text-decoration: none;
    padding-top: 5px;
    padding-bottom: 5px;
}

.footer-element a:visited {
    color: black;
}

/*######################*/
/*##### END FOOTER #####*/
/*######################*/


/**************************************************** Media queries ****************************************************/

/***************************** Medium devices (tablets, less/equal than 1024px) *****************************/

@media screen and (min-width: 768px) and (max-width: 1024px) {

    /*##################*/
    /*##### NAVBAR #####*/
    /*##################*/

    nav {
        width: 32%;
    }

    .nav-link{
        font-size: 15px;
    }

    /*######################*/
    /*##### END NAVBAR #####*/
    /*######################*/

    /*#######################*/
    /*##### SEARCH FORM #####*/
    /*#######################*/

    .search-space h1{
        font-size: 22px;
        margin-bottom: 10px;
    }

    .search-form{
        width: 190px;
        font-size: 18px;
    }

    .search-btn{
        width: 140px;
        font-size: 18px;
    }

    .filter-btn-container {
        display: flex;
        justify-content: space-between;
        font-size: 15px;
        font-weight: 600;
        height: 120px;
        width: 90%;
        flex-wrap: wrap;
        flex-direction: row;
    }

    .filter-text-container {
        width: 100%;
    }

    .form-filter-text {
        font-size: 17px;
    }

    .filter-btn {
        min-width: 20%;
    }

    .info-container {
        margin-top: 20px;
    }

    /*###########################*/
    /*##### END SEARCH FORM #####*/
    /*###########################*/

    .hebergements-and-populaires {
        flex-direction: column;
        padding: 0;
        padding-top: 15px;
    }

    /*########################*/
    /*##### HEBERGEMENTS #####*/
    /*########################*/

    .hebergements {
        width: 100%;
    }

    .hebergements-cards .card img {
        height: 110px;
    }

    .hebergements .show-more {
        font-size: 18px;
    }

    /*############################*/
    /*##### END HEBERGEMENTS #####*/
    /*############################*/

    /*######################*/
    /*##### POPULAIRES #####*/
    /*######################*/

    .populaires {
        width: 100%;
        margin-top: 50px;
    }

    .populaires-cards {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        margin-top: 20px;
    }

    .populaires-cards .card-link {
        width: 32%;
    }

    .populaires-cards .card {
        height: 150px;
        margin-top: 0;
    }

    .populaires-cards .card-link img {
        height: 100%;
    }

    .populaires-cards .card-title {
        font-size: 15px;
    }

    .populaires-cards .card-subtitle {
        font-size: 13px;
    }

    /*##########################*/
    /*##### END POPULAIRES #####*/
    /*##########################*/

    /*####################*/
    /*##### ACTIVITY #####*/
    /*####################*/

    .activity-container {
        padding: 0px;
        padding-left: 20px;
        padding-right: 20px;
        margin-top: 40px;
        margin-bottom: 60px;
    }

    .activity-container .section-title {
        padding-left: 20px;
    }

    .activity-cards {
        justify-content: space-around;
    }

    .activity-cards .card-link{
        width: 23%;
    }

    .activity-cards .card {
        display: flex;
        flex-direction: column;
        height: 230px;
    }

    .activity-cards .card img {
        width: 100%;
        height: 75%;
        border-top-left-radius: 20px;
        border-top-right-radius: 20px;
        object-fit: cover;
    }

    .activity-cards .card-content {
        display: flex;
        align-items: center;
    }

    .activity-cards .card-title {
        margin-top: 10px;
    }

    /*########################*/
    /*##### END ACTIVITY #####*/
    /*########################*/

    footer {
        max-width: 1440px;
    }

}

/***************************** Small devices (phones, less than 768px) *****************************/

@media screen and (max-width: 768px) {

    body {
        display: flex;
    }

    .main-container {
        border: black 2px solid;
        max-width: 1440px;
        display: inline-block;
        width: 100%;
        padding: 0;
        margin: 0 !important;
    }

    header {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        width: 100%;
    }

    section {
        border-radius: 0px !important;
    }

    /*##################*/
    /*##### NAVBAR #####*/
    /*##################*/

    .logo {
        margin-top: 30px;
        margin-bottom: 15px;
        margin-left: 15px;
    }

    nav {
        width: 100%;
    }

    nav ul {
        width: 100%;
        height: 60px;
    }

    nav ul li {
        width: 100%;
    }

    .nav-link {
        display: flex;
        text-decoration: none;
        justify-content: center;
        align-items: center;
        position: relative;
        height: 100%;
        padding: 20px;
        font-size: 18px;
        border-bottom-style: solid;
        border-bottom-color: var(--main-bg-color);
    }

    .nav-link:after {
        content: "";
        position: absolute;
        background-color: var(--main-color);
        height: 2px;
        width: 0%;
        left: 0;
        top: 62px;
    }

    .nav-link:hover:after {
        width: 100%
    }

    .main-container {
        width: 100%;
        max-width: 1440px;
        box-sizing: border-box;
    }

    /*######################*/
    /*##### END NAVBAR #####*/
    /*######################*/

    /*#######################*/
    /*##### SEARCH FORM #####*/
    /*#######################*/

    .search-space p {
        margin-top: 10px;
    }

    .location-icon {
        border: var(--main-bg-color) 1px solid;
        background-color: var(--main-bg-color);
        border-radius: 15px 0px 0px 15px;
        font-size: 15px;
        color: black;
        padding: 15px;
    }

    .search-form {
        border: var(--main-bg-color) 1px solid;
        padding: 15px;
        font-size: 17px;
        font-weight: bold;
        width: 100%;
    }

    .search-btn {
        display: none;
    }

    .search-btn-mobile {
        display: block;
        border: var(--main-color) 1px solid;
        background-color: var(--main-color);
        border-radius: 15px;
        padding: 17px;
        margin-left: -15px;
    }

    .search-btn-mobile i {
        color: white;
    }

    .filter-btn-container {
        display: flex;
        justify-content: space-around;
        font-size: 15px;
        font-weight: 600;
        height: 180px;
        width: 100%;
        flex-wrap: wrap;
        flex-direction: row;
    }

    .filter-text-container {
        width: 100%;
    }

    .form-filter-text {
        font-size: 17px;
    }

    .filter-btn {
        width: 49%;
    }

    .info-container {
        width: 100%;
        align-items: center;
        justify-content: flex-start;
        margin-top: 10px;
    }

    .icone-info {
        margin-right: 15px;
    }

    .info-container .info-text {
        margin-bottom: 15px;
    }

    /*###########################*/
    /*##### END SEARCH FORM #####*/
    /*###########################*/

    /****** Hebergements And Populaires ***********/

    .hebergements-and-populaires {
        display: flex;
        flex-direction: column-reverse;
        padding: 0;
    }

    .hebergements-and-populaires section {
        background-color: var(--main-bg-color);
    }

    /*######################*/
    /*##### POPULAIRES #####*/
    /*######################*/

    .populaires {
        width: 100%;
        margin-top: 0;
    }

    .populaires-cards {
        display: flex;
        flex-direction: column;
        width: 100%;
    }

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

    /*##########################*/
    /*##### END POPULAIRES #####*/
    /*##########################*/

    /*########################*/
    /*##### HEBERGEMENTS #####*/
    /*########################*/

    .hebergements {
        display: flex;
        flex-direction: column;
        background-color: white !important;
        width: 100%;
    }

    .hebergements-cards {
        display: flex;
        flex-direction: column;
    }

    .hebergements-cards .card-link {
        margin-top: 10px;
        width: 100%;
    }

    .hebergements-cards .card {
        width: 100%;
        margin-top: 0;
    }

    /*############################*/
    /*##### END HEBERGEMENTS #####*/
    /*############################*/

    /*####################*/
    /*##### ACTIVITY #####*/
    /*####################*/

    .activity-container {
        padding: 20px;
        margin-top: 30px;
        margin-bottom: 60px;
    }

    .activity-cards {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        margin-top: 10px;
    }

    .activity-cards .card-link{
        width: 100%;
    }

    .activity-cards .card {
        width: 100%;
        height: 200px;
        margin-top: 15px;
        filter: drop-shadow(0px 3px 5px rgba(0, 0, 0, 0.1));
    }

    .activity-cards .card img {
        width: 100%;
        height: 70%;
        border-top-left-radius: 20px;
        border-top-right-radius: 20px;
    }

    .activity-cards .card-content {
        display: flex;
        align-items: center;
    }

    .activity-cards .card-txt {
        margin-top: 10px;
    }

    /*########################*/
    /*##### END ACTIVITY #####*/
    /*########################*/

    footer {
        flex-direction: column;
    }

    .footer-element {
        padding: 20px
    }

    footer h3 {
        margin-bottom: 5px;
    }
}