.map-container {
    z-index: 0;
    position: relative;
    border-radius: 32px 32px !important;
    overflow: hidden;
    padding-bottom: 24px;
    iframe {
        border-radius: clamp(24px, 3vw, 40px);
    }
    #contact-tab {
        position: relative;
        display: flex;
        gap: 20px;
        width: max-content;
        margin: 32px auto 40px;
        .contact-item {
            position: relative;
            a {
                transition: 0.4s;
                min-width: 180px;
                background: #8F8F8F;
                display: flex;
                align-items: center;
                justify-content: center;
                min-height: 44px;
                border-radius: 12px;
                color: var(--white);
                font-size: 16px;
                font-family: var(--Medium);
            }
            &:hover,
            &.active {
                a {
                    background: var(--color1);
                }
            }
        }
    }
    .contact-dir-button {
        position: absolute;
        top: clamp(340px, 29vw, 500px);
        right: 50%;
        transform: translateX(50%);
        display: flex;
        gap: 10px;
        width: max-content;
        a {
            background: var(--white);
            padding: 8px 12px;
            border-radius: 10px;
            box-shadow: 0px 6px 20px -4px #0000001A;
            display: flex;
            gap: 8px;
            align-items: center;
            font-size: clamp(12px, 2vw, 16px);
            font-family: var(--Regular);
            transition: 0.4s;
            img {
                max-width: clamp(24px, 2vw, 32px);
                max-height: clamp(24px, 2vw, 32px);
            }
            &:hover {
                background: var(--color1);
                color: white;
            }
        }
    }
    .information-map {
        .information-item {
            display: flex;
            text-align: center;
            gap: 16px;
            .icon {
                width: clamp(40px, 4vw, 64px);
                height: clamp(40px, 4vw, 64px);
                flex: 0 0 clamp(40px, 4vw, 64px);
                display: flex;
                align-items: center;
                justify-content: center;
                font-size: clamp(24px, 3vw, 32px);
                background: #F5F5F7;
                border-radius: 50%;
            }
            div:not(.icon) {
                display: flex;
                flex-direction: column;
                align-items: flex-start;
                text-align: right;
                gap: 4px;
            }
            h4 {
                font-size: clamp(16px, 2vw, 20px);
                font-family: var(--SemiBold);
            }
            p, a {
                font-size: 16px;
                color: var(--color1);
                font-family: var(--Medium);
            }
        }
    }
}
.social-contact {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-top: 20px;
    background: var(--accent);
    border-radius: 20px;
    padding: clamp(16px, 2vw, 24px);
    box-shadow: 0px 6px 20px -4px #0000001A;
    font-size: 16px;
    font-family: var(--Medium);
    /*background-image: url(../../img/pattern-social.png);*/
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}
.webinja-contact-form {
    background: white;
    border-radius: 20px;
    box-shadow: 0px 6px 20px -4px #0000001A;
    padding: clamp(24px, 3vw, 40px);
}
@media only screen and (max-width: 768px) {
    .information-item {
        margin-bottom: 24px;
    }
    .social-contact {
        flex-direction: column;
        text-align: center;
    }
}