.search-engine {
    background: var(--dark-green);
    position: relative;
    /* overflow: hidden */
}

.search-engine.mobile-map-open {
    max-height: 100dvh;
    overflow-y: scroll;
    -ms-overflow-style: none;
    scrollbar-width: none
}

.search-engine.mobile-map-open::-webkit-scrollbar {
    display: none
}

.search-engine h3 {
    color: var(--white)
}

.search-engine--container {
    padding: 32px 16px 0;
    display: flex;
    flex-direction: column;
    gap: 40px;
    position: relative;
    z-index: 51
}

@media screen and (min-width: 1024px) {
    .search-engine--container {
        padding: 40px 16px
    }
}

@media screen and (min-width: 1312px) {
    .search-engine--container {
        padding-inline: 0
    }
}

.search-engine--title {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px
}

@media screen and (min-width: 1024px) {
    .search-engine--title {
        flex-direction: row;
        align-items: flex-end
    }
}

.search-engine--title img {
    height: 80px;
    -o-object-fit: contain;
    object-fit: contain
}

.search-engine--wrapper {
    display: flex;
    flex-direction: column;
    gap: 32px
}

@media screen and (min-width: 1024px) {
    .search-engine--wrapper {
        flex-direction: row;
        align-items: center;
        gap: 0
    }
}

.search-engine--select {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 8px 0;
    position: relative;
}

@media screen and (min-width: 1024px) {
    .search-engine--select {
        flex: 1;
        padding: 8px 2.91vw
    }

    .search-engine--select:first-child {
        padding-left: 0
    }
}

.search-engine--select::after {
    content: '';
    width: 100%;
    height: 1px;
    background: var(--white);
    position: absolute;
    bottom: -16px;
    right: 0;
    opacity: .2
}

@media screen and (min-width: 1024px) {
    .search-engine--select::after {
        height: 100%;
        width: 1px;
        bottom: 0
    }
}

.search-engine--select label {
    color: var(--light-green);
    font-size: 0.75rem;
    font-style: normal;
    font-weight: 400;
    line-height: 150%;
    letter-spacing: 1.68px;
    text-transform: uppercase;
    display: flex;
    gap: 8px
}

.search-engine--select label::before {
    content: '';
    width: 16px;
    height: 16px;
    background: var(--light-green)
}

.search-engine--select label.city-label::before {
    -webkit-mask: url("../images/location.svg") no-repeat center;
    mask: url("../images/location.svg") no-repeat center;
    -webkit-mask-size: contain;
    mask-size: contain
}

.search-engine--select label.typo-label::before {
    -webkit-mask: url("../images/typo.svg") no-repeat center;
    mask: url("../images/typo.svg") no-repeat center;
    -webkit-mask-size: contain;
    mask-size: contain
}

.search-engine--select label.surface-label::before {
    -webkit-mask: url("../images/surface.svg") no-repeat center;
    mask: url("../images/surface.svg") no-repeat center;
    -webkit-mask-size: contain;
    mask-size: contain
}

.search-engine--el {
    padding-top: 24px;
    padding-bottom: 32px;
    color: var(--white);
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px
}

@media screen and (min-width: 1024px) {
    .search-engine--el {
        padding-top: 0;
        padding-left: 2.91vw;
        padding-bottom: 0;
        margin-top: 0
    }
}

.search-engine--el>span {
    color: var(--white);
    font-size: 0.875rem;
    font-style: normal;
    font-weight: 400;
    line-height: 160%;
    letter-spacing: 0.56px;
    transition: all .4s ease
}

.search-engine--el>span.active {
    color: var(--light-green);
    -webkit-text-decoration-line: underline;
    text-decoration-line: underline;
    -webkit-text-decoration-style: solid;
    text-decoration-style: solid;
    -webkit-text-decoration-skip-ink: none;
    text-decoration-skip-ink: none;
    text-decoration-thickness: auto;
    text-underline-offset: auto;
    text-underline-position: from-font
}

.search-engine--illus {
    display: flex;
    gap: 48px;
    position: absolute;
    right: 0;
    top: 0;
    z-index: 0
}

.search-engine--illus div {
    background: var(--middle-green);
    height: 67px;
    width: 254px
}

.search-engine--illus div:nth-child(1) {
    -webkit-mask: url("../images/left-illus.svg") no-repeat center;
    mask: url("../images/left-illus.svg") no-repeat center;
    -webkit-mask-size: contain;
    mask-size: contain
}

.search-engine--illus div:nth-child(2) {
    -webkit-mask: url("../images/right-illus.svg") no-repeat center;
    mask: url("../images/right-illus.svg") no-repeat center;
    -webkit-mask-size: contain;
    mask-size: contain
}

.search-engine .map-container {
    position: absolute;
    top: 100%;
    height: 0;
    left: 0;
    width: 100%;
    background: var(--light-green);
    overflow: hidden;
    transform: translateX(100%);
    transition: all .6s .1s ease;
    z-index: 9;
    height: 152vw;
    max-height: calc(100dvh - 140px)
}

@media screen and (min-width: 1024px) {
    .search-engine .map-container {
        height: 39vw
    }
}

.search-engine .map-container.shown {
    transform: translateX(0);
    opacity: 1
}

.search-engine .map-container .map-wrapper {
    height: 100%;
    width: 100%
}

.search-engine .map-container.mobile-map-open {
    position: unset
}

.search-engine--el::before {
    -webkit-mask: url(../images/ellipse-left.svg) no-repeat center;
    mask: url(../images/ellipse-left.svg) no-repeat center;
    mask-size: auto;
    -webkit-mask-size: contain;
    mask-size: contain;
}

.search-engine--el::before,
.search-engine--el::after {
    content: '';
    background: white;
    width: 12px;
    height: 22px;
    transition: all .4s ease;
}

.search-engine--el::after {
    -webkit-mask: url(../images/ellipse-right.svg) no-repeat center;
    mask: url(../images/ellipse-right.svg) no-repeat center;
    mask-size: auto;
    -webkit-mask-size: contain;
    mask-size: contain;
}

.search-engine--el:hover::before {
    transform: translateX(-6px);
}

.search-engine--el:hover::after {
    transform: translateX(6px);
}