@import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,400;0,700;1,400&family=Roboto&family=Yusei+Magic&display=swap');

/* General */

body {
    padding: 0;
    margin: 0;
    font-family: Roboto;
}

.container {
    margin: 0 36px;
}

.flex {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
}

@media screen and (min-width: 768px) {
    .flex {
        display: flex;
        flex-direction: row;
        justify-content: space-around;
        align-items: center;
    }
}


.heading-2 {
    padding: 10px 0;
    font-size: 24px;
    text-align: center;
}

/* Navbar */

.nav-top-container {
    width: 100%;
    height: 100px;
    background-color: #fff;
    display: flex;
    align-items: center;
    justify-content: space-around;
}

.nav-brand {
    cursor: pointer;
}

.nav-brand-link {
    color: #333;
    text-decoration: none;
}

.search-input {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.search-btn {
    height: 31px;
    background-color: rgb(3, 3, 3);
    color: #fff;
    border-radius: 5px;
    cursor: pointer;
}

.search-query {
    height: 25px;
}

.navigation-bar-bottom {
    width: 100%;
    height: 50px;
    background-color: rgb(3, 3, 3);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 999;
}

.nav-item {
    padding: 0 18px;
}

.nav-links {
    font-size: 20px;
    color: #fff;
    text-decoration: none;
}

.nav-item:hover {
    transition: 0.2s;
    transition-timing-function: linear;
    transform: scale(1.1);
}

/* Banner */
.banner-section {
    width: 100%;
    height: 70vh;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
}

.banner {
    min-width: 110%;
    height: 110vh;
    position: relative;

    /* https://pixabay.com/photos/travel-lake-feet-resting-hiking-1749508/ */
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    z-index: -1;
}

.fade {
    animation-name: fader;
    animation-duration: 1s;
}

@keyframes fader {
    from {
        opacity: 0.1;
    }

    to {
        opacity: 1;
    }
}

.banner-content {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.carousel {
    display: flex;
}

.banner-title {
    width: 50%;
    color: #fff;
    text-align: center;
    font-size: 50px;
}

#next {
    width: 25%;
    height: inherit;
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    right: 0;
}

#next:hover {
    cursor: pointer;
    background-image: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2));
}

.fa-chevron-right {
    color: #fff;
    font-size: 70px;
}

#prev {
    width: 25%;
    height: inherit;
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    left: 0;
}

#prev:hover {
    cursor: pointer;
    background-image: linear-gradient(90deg, rgba(255, 255, 255, 0.2), transparent);
}

.fa-chevron-left {
    color: #fff;
    font-size: 70px;
}



/* Destionation */

.section-height {
    min-height: 75vh;
}

.cards-section {
    padding: 20px 0;
}

.destination-card {
    max-width: 500px;
    min-width: 300px;

    margin: 20px 20px;
    border: solid 1px #333;
}

@media screen and (min-width: 1024px) {
    .destination-card {
        max-width: 400px;
    }
}

.cards {
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    align-items: center;
    justify-content: space-around;
    /* display: grid;
    grid-template-columns: auto;
    place-items: center; */
}

@media screen and (min-width: 992px) {
    .cards {
        display: flex;
        flex-direction: row;
        /* display: grid;
        grid-template-columns: auto auto auto;
        place-items: center; */
    }
}

.cards-home {
    /* display: grid;
    grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr));
    place-items: center; */

    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
}

@media screen and (min-width: 992px) {
    .cards-home {
        display: flex;
        flex-direction: row;
    }
}

.card-padding {
    padding: 20px;
}

.turkey-img {
    width: 100%;
    height: 300px;
    background-image: url('../images/Turkey.jpg');
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.mauritius-img {
    width: 100%;
    height: 300px;
    background-image: url('../images/Mauritius.jpg');
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.singapore-img {
    width: 100%;
    height: 300px;
    background-image: url('../images/Singapore.jpg');
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.indonesia-img {
    width: 100%;
    height: 300px;
    background-image: url('../images/Indonesia.jpg');
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.japan-img {
    width: 100%;
    height: 300px;
    /* https://pixabay.com/photos/mount-fuji-volcano-japan-2305606/ */
    background-image: url('../images/Japan.jpg');
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.korea-img {
    width: 100%;
    height: 300px;
    /* https://pixabay.com/photos/scenery-han-river-seoul-sky-river-1214950/ */
    background-image: url('../images/Korea.jpg');
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}



/* Map */
#resultsContainer {
    padding-bottom: 25px;
}

.map-section {
    color: white;
    text-align: center;
    background-color: rgb(24, 24, 24);
    padding-top: 20px;
    padding-bottom: 70px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.map-input-spacing {
    padding: 0 20px
}

#map {
    width: 90%;
    height: 70vh;
}

.map-info-text-color {
    color: #333;
}



/* Search Section */
.heading-2-search {
    font-size: 24px;
    text-align: center;
}

.search-bg {
    height: 60vh;
    color: #fff;
    /* https://pixabay.com/photos/beach-sun-evening-summer-sea-2836300/ */
    background-image: url('../images/Beach.jpg');
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
    display: flex;
    justify-content: center;
    align-items: center;
}

.search-big-container {
    width: 100%;
    display: flex;
}

.search-query-big {
    width: 100%;
    height: 40px;
    border-radius: 5px;
    padding: 0 15px;
    font-size: 18px;
}

.search-btn-big {
    width: 45px;
    height: 43px;
    background-color: rgb(3, 3, 3);
    color: #fff;
    border-radius: 5px;
    cursor: pointer;
}

.suggestions-container {
    display: block;
}

.search-suggestion {
    width: 95%;
    height: 30px;
    color: #333;
    background-color: white;
    padding-left: 10px;
    z-index: 999;
    display: flex;
    align-items: center;
}

.search-suggestion:hover {
    background-color: azure;
    cursor: pointer;
}

#suggestionsList {
    padding: 0;
    margin: 0;
}



/* Footer */
.footer {
    color: #fff;
    /* background-color: rgb(47, 47, 47); */
    /* height: 200px; */
    background-color: rgb(36, 36, 36);
    height: 130px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.social-media-icons-footer {
    padding: 0;
    font-size: 2em;
    display: flex;
}

.facebook-footer {
    list-style: none;
    color: black;
}

.fa-facebook {
    padding: 0 20px;
    color: white;
}

.fa-instagram {
    padding: 0 20px;
    color: white;
}

.fa-youtube {
    padding: 0 100px;
    color: white;
}

.twitter-footer {
    list-style: none;
    color: black;
}

.youtube-footer {
    list-style: none;
    color: black;
}

.instagram-footer {
    list-style: none;
    color: black;
}