.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: absolute;
        z-index: 9;
        background: white;
        top: clamp(270px, 25vw, 420px);
        display: flex;
        gap: 12px;
        width: max-content;
        right: 50%;
        transform: translateX(50%);
        padding: 8px;
        border-radius: 10px;
        box-shadow: 0px 6px 20px -4px #0000001A;
        .contact-item {
            padding: 8px 12px;
            border-radius: 10px;
            cursor: pointer;
            a {
                font-size: 16px;
                color: var(--color1);
                transition: 0.4s;
            }
            &:hover,
            &.active {
                background: var(--color1);
                a {
                    color: var(--white);
                }
            }
        }
    }
    .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 {
        margin-top: -134px;
        .information-item {
            display: flex;
            flex-direction: column;
            align-items: center;
            text-align: center;
            gap: 16px;
            background: white;
            border-radius: 20px;
            box-shadow: 0px 6px 20px -4px #0000001A;
            padding: clamp(24px, 2vw, 32px) clamp(24px, 3vw, 40px);
            min-height: -webkit-fill-available;
            .icon {
                width: clamp(40px, 4vw, 64px);
                height: clamp(40px, 4vw, 64px);
                display: flex;
                align-items: center;
                justify-content: center;
                font-size: 30px;
            }
            h4 {
                font-size: clamp(18px, 2vw, 24px);
                font-family: var(--Medium);
            }
            p,
            a {
                font-size: 16px;
                color: #212121;
            }
        }
    }
}
.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;
    }
    .map-container .information-map {
        margin-top: -64px;
    }
}