body {
    margin: 0;
    background: #f3efe6;
}

/* HEADER */
.header {
    padding: 20px;
    background: #f3efe6;
    position: relative;
    font-family: "Sora", Sans-serif;
}

.title {
    font-size: 32px;
    font-weight: bold;
    color: #2e6b2e;
    font-family: "Sora", Sans-serif;
}

.subtitle {
    color: #777;
    margin-top: 5px;
    font-family: "Sora", Sans-serif;
}

/* SEARCH */
.search-box {
    margin-top: 15px;
    display: flex;
    gap: 10px;
    font-family: "Sora", Sans-serif;
}

.search-box input {
    flex: 1;
    padding: 12px;
    border-radius: 10px;
    border: none;
    font-size: 14px;
    font-family: "Sora", Sans-serif;
}

.menu-btn {
    width: 45px;
    height: 45px;
    background: #2e6b2e;
    border-radius: 10px;
    font-family: "Sora", Sans-serif;
}

/* FILTER BUTTONS */
.filters {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    margin-top: 15px;
    font-family: "Sora", Sans-serif;
}

.filter-btn {
    padding: 10px 15px;
    border-radius: 10px;
    background: #e0e0e0;
    cursor: pointer;
    white-space: nowrap;
}

.filter-btn.active {
    background: #2e6b2e;
    color: white;
}

/* BADGE */
.badge {
    position: absolute;
    right: 20px;
    top: 20px;
    background: #3b82c4;
    color: white;
    padding: 20px;
    border-radius: 50%;
    text-align: center;
    font-weight: bold;
}

/* MAP */
#map {
    width: 100%;
    height: calc(100vh - 220px);
    font-family: "Sora", Sans-serif;
}

#map-loader {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: white;
    padding: 10px 20px;
    border-radius: 5px;
    z-index: 9999;
}

.locationWrap{
    display: flex;
    gap: 10px;
    font-family: "Sora", Sans-serif;
}

.locationImgae{
    max-width: 100px;
}

.locationImgae img{
    width: 100%;
}

.locationDetails li{
    list-style: none;
}