body {
    background-image: url(/assets/img/contacts.webp);
    background-repeat: no-repeat;
    background-size: 100%;
    background-color: #F6F7FA;
}

.page-contact {
    padding: 0;
    color: var(--black-color);
    overflow-y: hidden;
}

.breadcrumbs {
    margin: 12px 0 0;
    position: relative;
    z-index: 1;
}

.breadcrumbs__list {
    list-style: none;
    border-top: 1px solid #EAEAEA;
    padding: 12px 0 0;
    margin: 0;
    display: flex;
    gap: 6px;
    align-items: center;
    color: var(--primary-color);
    font-size: 14px;
    font-weight: 500;
}

.breadcrumbs__item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.breadcrumbs__item:not(:last-child)::after {
    width: 17px;
    height: 17px;
    content: "";
    background-image: url("data:image/svg+xml,%3Csvg width='17' height='17' viewBox='0 0 17 17' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10.7424 8.46606C10.7727 8.49611 10.7968 8.53185 10.8132 8.57123C10.8296 8.61061 10.838 8.65286 10.838 8.69552C10.838 8.73818 10.8296 8.78042 10.8132 8.8198C10.7968 8.85919 10.7727 8.89493 10.7424 8.92497L7.70458 11.9628C7.62408 12.0519 7.52632 12.1237 7.41723 12.1738C7.30813 12.2239 7.18999 12.2513 7.06998 12.2543C6.94996 12.2573 6.83059 12.2359 6.7191 12.1914C6.60762 12.1469 6.50636 12.0801 6.42147 11.9952C6.33658 11.9104 6.26984 11.8091 6.2253 11.6976C6.18076 11.5861 6.15936 11.4667 6.16239 11.3467C6.16542 11.2267 6.19283 11.1086 6.24294 10.9995C6.29305 10.8904 6.36482 10.7926 6.45389 10.7121L8.45757 8.69552L6.44096 6.67891C6.27638 6.51291 6.18354 6.28893 6.18242 6.05518C6.18273 5.88047 6.23472 5.70975 6.33184 5.56453C6.42896 5.4193 6.56687 5.30604 6.72821 5.23902C6.88956 5.17199 7.06712 5.15419 7.23855 5.18786C7.40999 5.22153 7.56764 5.30516 7.69165 5.42822L10.7424 8.46606Z' fill='%231D1D1B'/%3E%3C/svg%3E%0A");
}

.breadcrumbs__link {
    color: inherit;
    font-size: 14px;
}

.breadcrumbs__link:hover {
    text-decoration: underline;
}

.breadcrumbs__current {
    color: var(--black-color);
}

.contact-page-head .contact-head-inner {
    display: flex;
    justify-content: space-between;
    padding: 48px 0;
    gap: 12px;
    flex-wrap: wrap;
}

.contact-head-title {
    font-size: clamp(1.5rem, 1.1471rem + 1.1765vw, 2.25rem);
    font-weight: 500;
    line-height: 130%;
}

.contact-head-text {
    font-size: clamp(0.9375rem, 0.8958rem + 0.1389vw, 1.0625rem);
    font-weight: 500;
    line-height: 160%;
    max-width: 484px;
}

.contact-details {
    padding: 48px 0 0;
}

.contact-details .inner {
    padding: 48px;
    border-radius: 32px;
    background-color: #fff;
    display: flex;
    flex-direction: column;
    gap: 96px;
}

.contact-details-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
}

.contact-details-title {
    font-weight: 500;
    font-size: clamp(1.5rem, 1.25rem + 0.8333vw, 2.25rem);
    line-height: 130%;
    max-width: 430px;
}

.contact-details-cta {
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-width: 270px;
}

.contact-details-cta-title {
    font-weight: 500;
    font-size: 17px;
    line-height: 160%;
}

.contact-details-cta-button {}

.contact-details-contacts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(310px, 1fr));
    gap: 24px;
}

.contact-details-contacts-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
    padding-bottom: 10px;
}

.contact-details-contacts-item:not(:last-child) {
    border-right: 1px solid #D2D2D2;
}

.contact-details-contacts-item-icon {
    width: 48px;
    height: 48px;
}

.contact-details-contacts-item-text {
    font-weight: 600;
    font-size: clamp(1.125rem, 1rem + 0.4167vw, 1.5rem);
    line-height: 140%;
}

.contact-details-contacts-item-text a {
    color: inherit;
    text-decoration: none;
}

@media (min-width:768px) {
    .contact-details-contacts-item-text {
        text-align: center;
    }
}

@media (max-width:768px) {
    .contact-page-head .contact-head-inner {
        padding: 24px 0;
    }

    .contact-details {
        padding: 24px 0 0;
    }

    .contact-details .container {
        padding: 0;
    }

    .contact-details .inner {
        padding: 48px 16px;
        gap: 48px;
    }

    .contact-details-contacts-item {
        padding-bottom: 0;
        flex-direction: row;
        align-items: normal;
        gap: 12px;
    }

    .contact-details-contacts-item-icon,
    .contact-details-contacts-item-icon svg {
        width: 32px;
        height: 32px;
    }

    .contact-details-contacts {
        display: flex;
        flex-direction: column-reverse;
    }
}