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

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

.brands-bg {
    width: 100%;
    position: absolute;
    top: 0;
}

.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);
}

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

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

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

.brands-serttificates-wrapper {
    display: flex;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
}

.brands-serttificates-head {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.brands-serttificates-head-title {
    font-weight: 600;
    font-size: 20px;
    line-height: 140%;
}

.brands-serttificates-head-subtitle {
    font-weight: 400;
    font-size: 16px;
    line-height: 160%;
}

.brands-serttificates {
    display: flex;
    gap: 12px;
    align-items: flex-start;
}

.brands-serttificates img {
    flex-shrink: 0;
}

.brands-grid-wrapper {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(380px, 1fr));
    gap: 24px;
    padding: 48px 0;
}

.brands-grid-item {
    background-color: #fff;
    padding: 48px 24px;
    display: flex;
    flex-direction: column;
    gap: 24px;
    border-radius: 32px;
}

.brands-grid-item-logo {
    height: 60px;
    text-align: center;
    margin-bottom: 24px;
}

.brands-grid-item-content {
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex-grow: 1;
}

.brands-grid-item-title {
    font-weight: 500;
    font-size: 16px;
    line-height: 160%;
}

.brands-grid-item-desc {
    font-weight: 400;
    font-size: 14px;
    line-height: 140%;
}

.brands-grid-item-link {
    padding: 16px;
    border: 1px solid #EAEAEA;
    border-radius: 60px;
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 16px;
    font-weight: 600;
    line-height: 120%;
    text-decoration: none;
    color: inherit;
    width: fit-content;
    margin: auto 0 0;
}

.brands-grid-item-link-icon {
    width: 24px;
    height: 24px;
}

.brands-grid-item-link:hover {
    color: #fff;
}

.sertificates-slider {
    padding: 48px 0 96px;
}

.sertificates-slider-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 32px;
    margin-bottom: 48px;
}

.sertificates-slider-copy {
    max-width: 780px;
}

.sertificates-slider-title {
    font-weight: 500;
    font-size: clamp(1.5rem, 1.375rem + 0.4167vw, 1.875rem);
    line-height: 130%;
    color: #1d1d1b;
}

.sertificates-slider-swiper {
    overflow: hidden;
}

.sertificates-slider-slide {
    display: flex;
    align-items: center;
    justify-content: center;
    /* width: fit-content !important;
    height: auto !important; */
}

.sertificates-slider-logo {
    /* max-height: 60px; */
    width: auto;
    max-width: 100%;
    display: block;
    object-fit: contain;
}

.sertificates-slider-progress {
    margin-top: 48px;
    position: relative !important;
}

.sertificates-slider-progress.is-hidden {
    display: none;
}

@media (min-width:768px) {

    .sertificates-slider-swiper,
    .sertificates-slider-progress {
        width: calc(100% + (100vw - 100%) / 0.65) !important;
        overflow: visible;
    }
}

@media (max-width:768px) {
    .breadcrumbs__list {
        flex-wrap: nowrap;
        overflow-x: auto;
        white-space: nowrap;
    }

    .brands-products-sidebar-list:not(.is-open),
    .brands-products-filter {
        display: none;
    }

    .sertificates-slider {
        padding: 48px 0;
        position: relative;
    }

    .sertificates-slider-nav {
        display: none;
    }

    .sertificates-slider-progress {
        margin-top: 130px;
        position: absolute !important;
        left: 16px !important;
        width: calc(100% - 32px) !important;
    }
}