/* HEADER */
.banner {
    background: url('https://d34za4dk7fsfj6.cloudfront.net/f20fb623-ec09-44d9-a495-3559ce319742/images/bg-filter-section.jpg');
    background-size: cover;
    padding: 30px;
    margin: 15px 0;
    position: relative;
}

.banner h1 {
    font-family: "Gilroy-Bold";
    margin: 0 0 20px 0;
    color: #fff;
    font-style: normal;
    font-weight: 400;
    font-size: 40px;
    line-height: 50px;
}

/* CITY BOX */
.city-box {
    display: flex;
    align-items: center;
}

.city-box div {
    border-radius: 10px;
    background: rgba(255, 255, 255, 1);
    margin: 0 20px 0 0;
    transition: all ease 0.3s;
    border: 1px solid #e0dfdf;
    height: 100%;
    width: 25%;
}

.city-box div h2 {
    font-family: 'Gilroy-Bold';
    font-size: 18px;
    font-weight: 400;
    text-align: left;
    margin: 0;
}

.city-box div h2 a {
    padding: 20px;
    display: block;
    color: var(--color-blue);
}

.city-box div h2 a:hover {
    color: var(--color-orange);
}

@media only screen and (max-width: 600px) {
    .city-box {
        justify-content: space-between;
    }

    .city-box div {
        width: 48%;
        margin: 0;
    }
}

/* NEW CSS FOR CITY PAGE */
.search-container {
    padding: 30px;
    border-radius: 15px;
    background: url(../images/city-banner-bkg.webp) center center no-repeat;
    background-size: cover;
    text-align: center;
    margin: 30px auto;
}

.search-container h1 {
    font-family: "Montserrat-Normal", sans-serif;
    font-weight: 600;
    font-size: 42px;
    text-align: center;
    color: #fff;
    margin: 0 0 5px 0;
}

.search-container h2 {
    font-family: "Montserrat-Normal", sans-serif;
    font-weight: 400;
    font-size: 20px;
    text-align: center;
    color: #fff;
    margin: 0 0 30px 0;
}

.search-container form.searchbox {
    border-radius: 10px;
    border: none;
    background-color: #fff;
    padding: 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0px auto;
}

.search-container form.searchbox input[type=text] {
    background-image: url("data:image/svg+xml,%3Csvg width='800px' height='800px' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M15.7955 15.8111L21 21M18 10.5C18 14.6421 14.6421 18 10.5 18C6.35786 18 3 14.6421 3 10.5C3 6.35786 6.35786 3 10.5 3C14.6421 3 18 6.35786 18 10.5Z' stroke='%23cccccc' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: 5px center;
    background-size: 5%;
    border: none;
    padding: 10px;
    font-family: "Montserrat-Normal", sans-serif;
    font-weight: 600;
    font-size: 14px;
    width: 78%;
    border-radius: 5px;
    padding-left: 40px;
    margin: 0;
}

.search-container form.searchbox input[type=submit] {
    background-color: #FC5F00;
    border: none;
    border-radius: 5px;
    font-family: "Montserrat-Normal", sans-serif;
    font-weight: 600;
    font-size: 16px;
    padding: 10px;
    width: 20%;
    text-align: center;
    color: #fff;
    margin: 0;
    outline: 0px;
}

.search-container form.searchbox input[type=text]:focus,
.search-container form.searchbox input[type=submit]:focus {
    border: none;
    outline: 0px;
}

.heading-box {
    border: none;
    margin: 0 0 30px 0;
    text-align: center;
}

.heading-box h2 {
    font-family: "Montserrat-Normal", sans-serif;
    font-weight: 600;
    font-size: 30px;
    color: #242477;
    margin: 0 0 5px 0;
}

.heading-box p {
    font-family: "Montserrat-Normal", sans-serif;
    font-weight: 500;
    font-size: 18px;
    color: #000;
    margin: 0;
}

.search-container .error {
    font-family: "Montserrat-Normal", sans-serif;
    font-weight: 500;
    font-size: 14px;
    margin-top: 10px;
    font-style: italic;
    color: #fff;
}

.cities-grid {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 10px;
    margin: 0 0 60px 0;
}

.cities-grid .cities {
    flex: 0 0 calc(20% - 10px);
    height: 150px;
    padding: 10px;
    border: none;
    position: relative;
    border-radius: 10px;
    overflow: hidden;
    margin: 0 0 20px 0;
}

.cities-grid .popular-venues {
    background-position: center center;
    background-size: cover;
}

.cities-grid .cities .cities-title {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border: none;
    padding: 10px 15px;
    background-image: linear-gradient(180deg, transparent, #000);
}

.cities-grid .cities .cities-title h2 {
    font-family: "Montserrat-Normal", sans-serif;
    font-weight: 600;
    font-size: 14px;
    margin: 0;
    color: #fff;
}

.cities-grid .cities .cities-title p {
    font-family: "Montserrat-Normal", sans-serif;
    font-weight: 500;
    font-size: 12px;
    margin: 0;
    font-style: italic;
    color: #fff;
}


/* CITIES BACKGROUNDS */
.asheville {
    background: url(../images/cities/asheville.webp) top center no-repeat;
    background-size: cover;
}

.atlanta {
    background: url(../images/cities/atlanta.webp) top center no-repeat;
    background-size: cover;
}

.austin {
    background: url(../images/cities/austin.webp) top center no-repeat;
    background-size: cover;
}

.boston {
    background: url(../images/cities/boston.webp) top center no-repeat;
    background-size: cover;
}

.chicago {
    background: url(../images/cities/chicago.webp) top center no-repeat;
    background-size: cover;
}

.cleveland {
    background: url(../images/cities/cleveland.webp) top center no-repeat;
    background-size: cover;
}

.denver {
    background: url(../images/cities/denver.webp) top center no-repeat;
    background-size: cover;
}

.detroit {
    background: url(../images/cities/detroit.webp) top center no-repeat;
    background-size: cover;
}

.houston {
    background: url(../images/cities/houston.webp) top center no-repeat;
    background-size: cover;
}

.kansas-city {
    background: url(../images/cities/kansas-city.webp) top center no-repeat;
    background-size: cover;
}

.las-vegas {
    background: url(../images/cities/las-vegas.webp) top center no-repeat;
    background-size: cover;
}

.los-angeles {
    background: url(../images/cities/los-angeles.webp) top center no-repeat;
    background-size: cover;
}

.memphis {
    background: url(../images/cities/memphis.webp) top center no-repeat;
    background-size: cover;
}

.miami {
    background: url(../images/cities/miami.webp) top center no-repeat;
    background-size: cover;
}

.milwaukee {
    background: url(../images/cities/milwaukee.webp) top center no-repeat;
    background-size: cover;
}

.minneapolis {
    background: url(../images/cities/minneapolis.webp) top center no-repeat;
    background-size: cover;
}

.nashville {
    background: url(../images/cities/nashville.webp) top center no-repeat;
    background-size: cover;
}

.new-orleans {
    background: url(../images/cities/new-orleans.webp) top center no-repeat;
    background-size: cover;
}

.new-york {
    background: url(../images/cities/new-york.webp) top center no-repeat;
    background-size: cover;
}

.philadelphia {
    background: url(../images/cities/philadelphia.webp) top center no-repeat;
    background-size: cover;
}

.portland {
    background: url(../images/cities/portland.webp) top center no-repeat;
    background-size: cover;
}

.san-francisco {
    background: url(../images/cities/san-francisco.webp) top center no-repeat;
    background-size: cover;
}

.seattle {
    background: url(../images/cities/seattle.webp) top center no-repeat;
    background-size: cover;
}

.st-louis {
    background: url(../images/cities/st-louis.webp) top center no-repeat;
    background-size: cover;
}

.washington {
    background: url(../images/cities/washington.webp) top center no-repeat;
    background-size: cover;
}

/* AUTOCOMPLETE */
.autocomplete {
    width: 100%;
    max-width: 60%;
    position: relative;
    display: inline-block;
}

.suggestions {
    position: absolute;
    background: white;
    border: none;
    max-height: 150px;
    overflow-y: auto;
    width: 100%;
    z-index: 1000;
    text-align: left;
    border-radius: 10px;
    font-weight: 600;
}

.suggestions div {
    padding: 12px;
    cursor: pointer;
}

.suggestions div:hover {
    background: #f0f0f0;
}

@media only screen and (max-width: 600px) {
    .search-container h1 {
        font-size: 24px;
    }

    .search-container h2 {
        font-size: 18px;
    }

    .search-container .searchbox {
        max-width: 100%;
    }

    .cities-grid .cities {
        flex: 0 0 calc(50% - 10px);
        height: 200px;
    }

    .heading-box h2 {
        font-size: 20px;
    }

    .heading-box p {
        font-size: 16px;
    }

    .search-container .searchbox input[type=text] {
        background-size: 10%;
    }

    .search-container .searchbox input[type=text] {
        width: 58%;
    }

    .search-container .searchbox input[type=submit] {
        width: 30%;
    }
}