.contact-widget {
    position: fixed;
    right: 30px;
    bottom: 30px;
    z-index: var(--z-index-1000);
    font-family: var(--font-geologica), sans-serif;
}

.contact-widget__button {
    width: clamp(70px, 3.646vw, 3.646vw);
    aspect-ratio: 1 / 1;
    background: transparent;
    border: none;
    cursor: pointer;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-transition: var(--transition-transform-btn);
    transition: var(--transition-transform-btn);
}

.contact-widget__button:hover {
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
}

.contact-widget__notification {
    position: absolute;
    right: clamp(80px, 4.2vw, 4.2vw);
    bottom: clamp(12px, 0.625vw, 0.625vw);
    background: var(--color-black);
    padding: clamp(8.4px, 0.625vw, 0.625vw) clamp(14px, 1.042vw, 1.042vw);
    border-radius: clamp(7px, 0.521vw, 0.521vw);
    font-size: clamp(9.8px, 0.729vw, 0.729vw);
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    -webkit-transform: translateX(clamp(20px, 1.042vw, 1.042vw));
    transform: translateX(clamp(20px, 1.042vw, 1.042vw));
    -webkit-transition: all var(--transition-500) ease;
    transition: all var(--transition-500) ease;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    flex-direction: column;
}

.contact-widget__notification span {
    color: var(--color-white);
    font-family: var(--font-geologica);
    font-size: clamp(14px, 0.729vw, 0.729vw);
    font-style: normal;
    font-weight: 300;
    line-height: .9;
}

.contact-widget__notification::after {
    content: '';
    position: absolute;
    right: clamp(-0.417vw, -0.417vw, -8px);
    top: 67%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    border-top: clamp(6px, 0.313vw, 0.313vw) solid transparent;
    border-bottom: clamp(6px, 0.313vw, 0.313vw) solid transparent;
    border-left: clamp(8px, 0.417vw, 0.417vw) solid var(--color-black);
}

@media (max-width: 48rem) {
    .contact-widget__notification::after {
        right: -8px;
    }
}

.contact-widget__notification.show {
    opacity: 1;
    visibility: visible;
    -webkit-transform: translateX(0);
    transform: translateX(0);
}

.contact-widget__card {
    position: absolute;
    bottom: clamp(90px, 4.688vw, 4.688vw);
    right: 0;
    background: var(--color-white);
    padding: clamp(30px, 1.563vw, 1.563vw) clamp(25px, 1.302vw, 1.302vw) clamp(30px, 1.563vw, 1.563vw) clamp(21px, 1.094vw, 1.094vw);
    opacity: 0;
    visibility: hidden;
    -webkit-transform: translateY(clamp(20px, 1.042vw, 1.042vw));
    transform: translateY(clamp(20px, 1.042vw, 1.042vw));
    -webkit-transition: all var(--transition-400) ease;
    transition: all var(--transition-400) ease;
    border-radius: clamp(10px, 0.521vw, 0.521vw);
    border: 1px solid var(--color-widget-border);
    box-shadow: var(--box-shadow-clamp);
    width: clamp(250px, 13.021vw, 13.021vw);
    aspect-ratio: 250 / 320;
}

.contact-widget--open .contact-widget__card {
    opacity: 1;
    visibility: visible;
    -webkit-transform: translateY(0);
    transform: translateY(0);
}

.contact-widget--open .contact-widget__notification {
    display: none;
}

.contact-widget__close {
    position: absolute;
    top: clamp(13px, 0.677vw, 0.677vw);
    right: clamp(13px, 0.677vw, 0.677vw);
    background: none;
    border: none;
    cursor: pointer;
    width: clamp(12px, 0.625vw, 0.625vw);
    aspect-ratio: 1 / 1;
}

.contact-widget__close svg {
    width: 100%;
}

.contact-widget__header {
    color: var(--color-black);
    font-family: var(--font-geologica);
    font-size: clamp(12px, 0.625vw, 0.625vw);
    font-style: normal;
    font-weight: 300;
    line-height: .9;
    width: 100%;
    margin-bottom: clamp(17px, 0.885vw, 0.885vw);
}

.contact-widget__manager {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    gap: clamp(18px, 0.938vw, 0.938vw);
    margin-bottom: clamp(20px, 1.042vw, 1.042vw);
}

.contact-widget__avatar {
    width: clamp(79px, 4.115vw, 4.115vw);
    border-radius: 50%;
    overflow: hidden;
    aspect-ratio: 79 / 80;
}

.contact-widget__avatar img {
    width: 100%;
    object-fit: cover;
}

.contact-widget__name {
    color: var(--color-black);
    font-family: var(--font-geologica);
    font-size: clamp(14px, 0.729vw, 0.729vw);
    font-style: normal;
    font-weight: 600;
    line-height: .9;
}

.contact-widget__info {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    flex-direction: column;
    gap: clamp(10px, 0.521vw, 0.521vw);
    margin-bottom: clamp(45px, 2.344vw, 2.344vw);
}

.contact-widget__info svg {
    width: clamp(14px, 0.729vw, 0.729vw);
    aspect-ratio: 1/1;
}

.contact-widget__link {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    gap: clamp(7px, 0.365vw, 0.365vw);
    color: var(--color-black);
    font-family: var(--font-geologica);
    font-size: clamp(12px, 0.625vw, 0.625vw);
    font-style: normal;
    font-weight: 300;
    line-height: .9;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
}

.contact-widget__link.email {
    color: var(--color-email);
}

.contact-widget__socials {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    gap: clamp(12px, 0.625vw, 0.625vw);
}

.social-btn {
    width: clamp(40px, 2.083vw, 2.083vw);
    aspect-ratio: 1 / 1;
    border-radius: 10px;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-transition: -webkit-transform var(--transition-200);
    transition: transform var(--transition-200);
}

.social-btn:hover {
    -webkit-transform: scale(1.05);
    transform: scale(1.05);
}

.social-btn svg {
    width: 100%;
}