/* Ensure the entire section takes full height */
#map-analysis {
    display: flex;
    height: 100vh; /* Full screen height */
    width: 100%;
}

/* This container ensures the map and info panel are side by side */
#container {
    display: flex;
    width: 100%;
    height: 100%;
}

.leaflet-popup-content-wrapper {
    background: #000;
    color: #fff;
    text-align: center;
    font-family: 'Special Elite', sans-serif;
    border-radius: 5px;
}

.leaflet-popup-tip {
    background: #000;
}

/* Map styling - takes up 60% of screen */
#map {
    width: 60vw; /* 60% width */
    height: 100vh;
    position: relative; /* Ensures absolute elements like menu position correctly */
}

/* Info panel - properly positioned on the right */
#info-panel {
    flex: 0 0 40%; /* 40% width */
    background-color: black; /* Dark background */
    color: white;
    padding: 20px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    justify-content: flex-start; /* Aligns content to the top */
    align-items: center;
    height: 100vh; /* Makes sure it matches map height */
}

/* Ensures panel text is properly centered */
#info-panel h2 {
    margin-top: 30px;
    font-size: 28px;
    margin-bottom: 10px;
    text-align: center;
    font-family: "Special Elite";
}

#info-panel p {
    font-size: 16px;
    line-height: 1.5;
    text-align: center;
    font-family: "Special Elite";
}