*{
    box-sizing:border-box;
    font-family:Arial;
}


body{

    margin:0;
    padding:0;
}


.map-container{

    width:100%;
    height:100vh;
    position:relative;

}


#map{

    width:100%;
    height:100%;

}



.search-box{

    position:absolute;

    top:20px;
    right:20px;

    width:350px;

    background:white;

    padding:15px;

    border-radius:15px;

    box-shadow:0 5px 25px #0003;

    z-index:5;

}

.gps-btn{

    background:#0d6efd;
    margin-bottom:10px;

} 

.input-group{

    display:flex;

    align-items:center;

    margin-bottom:12px;

    background:#f5f5f5;

    border-radius:10px;

    padding:10px;

}


.input-group input{

    border:0;

    outline:none;

    background:none;

    width:100%;

    font-size:16px;

}



.icon{

    font-size:22px;

    margin-left:10px;

}



button{

    width:100%;

    background:#000;

    color:white;

    border:0;

    padding:14px;

    border-radius:10px;

    font-size:18px;

    cursor:pointer;

}



.result-box{

    position:absolute;

    bottom:20px;

    left:20px;

    background:white;

    width:350px;

    padding:20px;

    border-radius:20px;

    box-shadow:0 5px 25px #0003;

    z-index:5;

    display:flex;

    justify-content:space-between;

    text-align:center;

}



.result-box div{

    display:flex;

    flex-direction:column;

    gap:8px;

}



.result-box strong{

    font-size:18px;

}



@media(max-width:600px){


.search-box,
.result-box{

    width:90%;

    right:5%;

}


}