body {
  background: #0a0a0a;

}
.hero{
    background: #0a0a0a;
    width:100%;
    text-align:center;
    margin: auto;
  
}
 .hero-card{
    background:#fff;
    max-width:500px;
    margin:auto;
    border-radius:20px;
    padding:18px;
    box-shadow:0 25px 70px rgba(0,0,0,.25);
}

.custom-dropdown{
    position:relative;
    margin-bottom:14px;
}

.dropdown-trigger{
    height:60px;
    border:1.5px solid #B7B7B7;
    border-radius:16px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:0 20px;
    cursor:pointer;
    background:#fff;
}

.dropdown-list{
    display:none;
    position:absolute;
    top:65px;
    left:0;
    width:100%;
    background:#fff;
    border-radius:16px;
    box-shadow:0 15px 40px rgba(0,0,0,.15);
    z-index:999;
    max-height:260px;
    overflow-y:auto;
}

.dropdown-list div{
    padding:18px 20px;
    cursor:pointer;
}

.dropdown-list div:hover{
    background:#f5f5f5;
}
.row {
  justify-content: center;
}
#city {
  height: 90vh;
}
.btn-get-started{
    width:100%;
    border:none;
    height:60px;
    background:#e61e2a;
    color:#fff;
    font-size:18px;
    border-radius:16px;
    cursor:pointer;

}

.hero h1{
    color:#fff;
    font-size:56px;
    font-weight: 800;
    line-height:1.1;
    /* margin-bottom:15px; */
}

.hero p{
    color:#cfcfcf;
    margin-bottom:40px;
    font-size:24px;
}
.mr {
  margin: 0 10px;
}

@media (min-width:320px) and (max-width:395px) {
.hero h1{
   margin: 0 10px;
    font-size:34px;
    
}

}