.interactive-map {
    overflow: hidden;
    /* background: linear-gradient(to bottom, #01535e 50%, transparent); */
    /* padding: 10rem 0 6rem 0; */
    --municipality-title-margin: 0 0 1rem 3rem;
}
.interactive-map #map-saudia {
    margin-bottom: 2rem;
}
.interactive-map #map-saudia #saudi-svg {
    display: block;
    fill: rgba(206, 234, 217, 53);
    width: 100%;
    height: 70%;
    object-fit: fill;
}
.interactive-map #map-saudia #saudi-svg g {
    position: relative;
}
.interactive-map #map-saudia #saudi-svg g text {
    display: block;
    fill: black;
    font-size: 2rem;
}
.interactive-map #map-saudia #saudi-svg g.active, .interactive-map #map-saudia #saudi-svg g:hover {
    cursor: pointer;
    /* fill: var(--bs-blue); */

    fill: #25935F;
     /* stroke: #fff; */
    /* stroke: #fff; */
    stroke-width: 1rem !important;
}
.interactive-map #map-saudia #saudi-svg path {
    stroke-width: 2;
}
.interactive-map .wrapper {
    background-color: var(--bs-white);
    border-radius: 18px;
    box-shadow: 0 4px 34px rgba(0, 0, 0, 9);
    padding: 2rem;
}
.interactive-map .content {
    overflow-y: scroll;
    text-align: initial;
    max-height: 40rem;
}
.interactive-map .content > * {
    margin-bottom: 1rem;
}
.interactive-map .content.hide_all .municipality:not(.active) {
    display: none;
}
.interactive-map .content .municipality__title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid var(--bs-gray-500);
    margin: var(--municipality-title-margin);
    cursor: pointer;
}
.interactive-map .content .municipality__title svg {
    transition: transform 0.5s ease;
}
.interactive-map .content .municipality__content {
    transition: max-height 0.5s ease;
    max-height: 0;
    overflow: hidden;
}
.interactive-map .content .municipality .municipality__content.expanded {
    transition: max-height 0.5s ease;
    max-height: 200px;
}
.interactive-map .content .municipality .municipality__title.expanded svg {
    transform: rotate(180deg);
}
.interactive-map .content .municipality__name {
    color: var(--bs-blue);
    color: #009266;
}
.interactive-map .content .municipality__opportunities, .interactive-map .content .municipality__investment {
    display: flex;
    align-items: center;
    gap: 1rem;
}
.interactive-map .content .municipality .count {
    color: var(--bs-green);
    color: #009266;
    flex: 0 0 5rem;
    font-size: 2rem;
    line-height: 1;
    text-align: center;
}
.interactive-map .content .municipality .text {
    font-size: 1.25rem;
    color: #8c9091;
}
.interactive-map ::-webkit-scrollbar {
    height: 0.5rem;
    width: 0.75rem;
    background-color: var(--bs-gray-300);
    border-radius: 5rem;
}
.interactive-map ::-webkit-scrollbar-thumb {
    border-radius: 5rem;
    background-color: var(--bs-blue);
}
.interactive-map[lang="en"] {
    --municipality-title-margin: 0 3rem 1rem 0;
}
@media all and (min-width: 800px) {
    .interactive-map #map-saudia {
        margin-bottom: initial;
    }
    .interactive-map .content {
        max-height: initial;
    }
    .interactive-map .wrapper {
        height: 53rem;
        display: flex;
        justify-content: center;
        padding: 6rem;
        gap: 3rem;
    }
    .interactive-map .wrapper > * {
        flex: 1 1 0;
    }
}
@media all and (max-width: 1250px) {
    .interactive-map {
        padding: 10rem 2rem 6rem 2rem;
    }
}


 .map .content {
    height: 60%;
}