.intro {
    border-left: 0.2rem oklch(0.6303 0.0613 124.45) solid;

    padding-inline-start: 1rem;
    border-radius: 0.1rem;
    color: oklch(0.3255 0.0975 143.35);
    margin-block-end: 2rem;
}
h2  {
    color: oklch(0.3255 0.0975 143.35);
}
section{
    border-top: 0.1rem oklch(0.6303 0.0613 124.45 / 0.5) solid;
    border-radius: 0.1rem;
    padding-block-start: 2rem;
}
#map{
        max-width: 100%;
        max-height: 100%;
        width: 80rem;
        height: 20rem;
        border: 0.1rem solid oklch(0.5198 0.176858 142.4953);
        margin-block: 0;
        position: relative;
        z-index: 0;
    }
    #locateBtn {
        padding: 0.5rem 1rem;
        border: 0.2rem oklch(0.6303 0.0613 124.45) ridge;
        box-shadow: 0 0 0.1rem;
        border-radius: 0.5rem;
        cursor: pointer;
        margin-inline: 10%;
        margin-block: 0 1rem;
        position: relative;
        font-weight: bold;
        width: 80%;
        height: fit-content;
        font-size: 2rem;
        line-break: normal;
        transition: ease 0.2s;
        background: var(--background-color);
        color: oklch(0.3255 0.0975 143.35);
    }

    #locateBtn:hover {
        color: var(--background-color);
        background: oklch(0.3255 0.0975 143.35);
        border:  0.2rem oklch(0.3255 0.0975 143.35) solid;
        transform: translateY(-0.2rem) translateX(-0.2rem);
    }
    section{
        p{
            text-align: center;
        }
    }
    .popup-overlay {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: oklch(0 0 0 / 50%);
    }
    .popup {
        font-family: Arial, sans-serif;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        background: oklch(1 0 0);
        padding: 20px;
        border-radius: 8px;
        box-shadow: 0 0 10px oklch(0 0 0 / 20%);
    }
    .popup-content {
        text-align: center;
    }
    .popup .close {
        position: absolute;
        top: 10px;
        right: 10px;
        font-size: 20px;
        cursor: pointer;
        color: oklch(0.3211 0 0);
    }
    .popup #emailInput {
        width: 80%;
        padding: 10px;
        margin: 10px 0;
        border: 1px solid oklch(0.8975 0 0);
        border-radius: 4px;
    }
    .popup button {
        background-color: oklch(0.6731 0.1624 144.21);
        color: oklch(1 0 0);
        padding: 10px 20px;
        border: none;
        border-radius: 4px;
        cursor: pointer;
        font-size: 16px;
    }