.top{
    position:relative;
    height:calc(100vh-30rem);
    min-height: 42rem;
    max-height:57rem;
    margin-bottom:4rem;
}

.top .bg-image{
    position:absolute;
    z-index:-1;
    top:0;
    left:0;
    height:calc(100vh - 30rem);
    min-height: 42rem;
    max-height:57rem;
    width:100%;
    height:100%;
    object-fit: cover;
}

.top .center-content{
    position:absolute;
    bottom: calc(50% - 11.1rem);
    left:50%;
    transform:translatex(-50%);
    display:flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width:100%;
    overflow:none;
}

main .main-logo{
    height:6rem;
    width:30rem;
    position:relative;
}

main .top h1{
    font-size:3.6rem;
    color:white;
    font-weight:200;
    text-align: center;
    margin-top: 3rem;
}

main .top .city{
    font-weight:400;
}

.search-container{
    display:flex;
    flex-direction: row;
    background-color: white;
    border-radius: 0.8rem;
    margin-top: 3rem;
    border:1px solid rgb(232,232,232);
    height:5.4rem;
    width:777px;
    align-items: center;
}

main .top .search-container input{
    border:none;
    outline:none;
}

main .top .search-container .location{
    padding:0.1rem;
    width:24rem;
    display:flex;
    align-items:center;
    height:100%;
    justify-content: space-around;
}

main .top .search-container .location svg{
    color: rgb(255,126,139);
}

main .top .search-container .location .chevron{
    color: rgb(136,136,136);
}

main .top .search-container .line{
    width:0rem;
    height:2rem;
    border:0.05rem solid rgb(207,207,207);
}

main .top .search-container .search{
    width:53rem;
    display:flex;
    align-items:center;
    height:100%;
}

main .top .search-container .search input{
    flex:1;
}

main .top .search-container .search .search-icon{
    width:6rem;
    margin:-1px 0.6rem -1px -1px;
    display:flex;
    justify-content:center;
}

main .top .search-container .search .search-icon svg{
    color: rgb(136,136,136);
}

main .top .search-container .search input{
    font-size: 1.4rem;
    width:100%;
}

@media (max-width:800px){
    .main-logo{
        height:3rem!important;
        width:16rem!important;
        position:relative;
    }

    main .top .search-container{
        flex-direction:column!important;
        width:calc(100% - 2.4rem)!important;
    }

    main .top .search-container .location{
        /* margin-top: 1.2rem;
        margin-bottom: 0.8rem; */
        padding: 1.5rem 1rem;
        justify-content: space-between;
        align-items:center;
        width: 100% !important;
        gap: 2rem;
        height: 5rem;
    }
    

    main .search-container .location input {
        flex: 1;
      }

    main .search-container .search {
        margin-top: 1.8rem;
        background-color: white;
        padding: 1.5rem 1rem;
        width: 100%!important;
        justify-content: space-between;
        border-radius:0.8rem;
      }

      main .search-container .search .search-icon {
        width: fit-content!important;
      }
    
      main .search-container .search input {
        margin-left: 1.5rem;
      }
}