:root {
    --cards: 4;
    --cardHeight: 378px;
    --cardTopPadding: 60px;
    --cardMargin: 60px;
}

@media (max-width: 767px) {
    :root {
        --cardTopPadding: 80px;
        --cardMargin: 80px;
    }
}

.quality-page__video {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: -100;
    scale: 1.075;
}

.quality-page__video video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.quality-page__hero {
    height: 715px;
    box-sizing: border-box;
    position: relative;
}

.quality-page__hero:before {
    content: "";
    background: linear-gradient(0deg, #312E2B 3.12%, rgba(49, 46, 43, 0.00) 75.35%);
    width: 100%;
    height: 70%;
    display: block;
    position: fixed;
    bottom: 0;
    z-index: -1;
}

.quality-page__hero-inner {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
    max-width: 1922px;
    width: 100%;
    margin: 0 auto;
    box-sizing: border-box;
    position: relative;
    padding: var(--space-8);
    gap: var(--space-6);
}

.quality-page__description {
    color: var(--color-text-secondary);
}

.quality-page__hero-content {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: var(--column-gap-4);
}

.quality-page__hero-title {
    color: #FFF;
    grid-column: span 6;
}

.quality-page__hero-desc {
    color: #FFF;
    grid-column: span 6;
}

.quality-page__grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: var(--column-gap-4);
}

.quality-page__header {
    grid-column: span 5;
    position: relative;
}

.quality-page__header-inner {
    position: sticky;
    top: 100px;
}

.quality-page__cards {
    grid-column: 7/13;
    position: relative;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: repeat(var(--cards), var(--cardHeight));
    padding-bottom: calc(var(--cards) * var(--cardTopPadding));
    margin-top: calc(var(--cardMargin) * -1);;
}

#card1 {
    --index: 1;
}

#card2 {
    --index: 2;
}

#card3 {
    --index: 3;
}

#card4 {
    --index: 4;
}

.quality-card {
    gap: 120px;
    position: sticky;
    top: 0;
    padding-top: calc(var(--index) * var(--cardTopPadding));
}

.quality-card .quality-card__body:before {
    content: "";
    background-image: url("data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMjY4IDI3NiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGVsbGlwc2UgY3g9IjI2Ni41NTIiIGN5PSIyNjcuMjg0IiByeD0iODAuNCIgcnk9IjgwLjYyMSIgZmlsbD0id2hpdGUiLz4KPHBhdGggZD0iTTQ1MS4yNTQgMjY3LjI4NEM0NTEuMjU0IDE2NC45OTUgMzY4LjU2IDgyLjA3MzcgMjY2LjU1MSA4Mi4wNzM3QzE2NC41NDMgODIuMDczNyA4MS44NDg2IDE2NC45OTUgODEuODQ4NiAyNjcuMjg0QzgxLjg0ODYgMzY5LjU3MyAxNjQuNTQzIDQ1Mi40OTUgMjY2LjU1MSA0NTIuNDk1VjUzNC41NjhDMTE5LjMzOSA1MzQuNTY4IDAgNDE0LjkwMSAwIDI2Ny4yODRDMCAxMTkuNjY3IDExOS4zMzkgMCAyNjYuNTUxIDBDNDEzLjc2NCAwIDUzMy4xMDMgMTE5LjY2NyA1MzMuMTAzIDI2Ny4yODRDNTMzLjEwMyA0MTQuOTAxIDQxMy43NjQgNTM0LjU2OCAyNjYuNTUxIDUzNC41NjhWNDUyLjQ5NUMzNjguNTYgNDUyLjQ5NSA0NTEuMjU0IDM2OS41NzMgNDUxLjI1NCAyNjcuMjg0WiIgZmlsbD0id2hpdGUiLz4KPC9zdmc+");
    width: 268px;
    height: 276px;
    background-repeat: no-repeat;
    right: 0;
    bottom: 0;
    position: absolute;
    z-index: 1;
    opacity: .3;
}

.quality-card__body {
    border-radius: 30px;
    background: var(--color-bg-secondary, #EAEDF5);
    box-sizing: border-box;
    padding: 30px;
    height: var(--cardHeight);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: relative;
}

.quality-card__content {
    display: flex;
    gap: 109px;
    align-items: flex-end;
}

.quality-card__image {
    max-width: 115px;
    width: 100%;
    height: auto;
}

.quality-card__title {
    max-width: 454px;
    position: relative;
    z-index: 2;
}

.quality-card__description {
    color: #222;
    position: relative;
    z-index: 2;
}

.quality-card.quality-card_primary .quality-card__body {
    background: radial-gradient(213.17% 170.07% at 41.35% 69.79%, #DA5D32 0%, #FFBC3B 100%);
}

.quality-card.quality-card_primary .quality-card__body:before {
    content: "";
    background-image: url("data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMjY4IDI3NiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGVsbGlwc2UgY3g9IjgwLjQiIGN5PSI4MC42MjEiIHJ4PSI4MC40IiByeT0iODAuNjIxIiB0cmFuc2Zvcm09Im1hdHJpeCgxIDAgMCAtMSAxODYuMTUgODkuMzM2OSkiIGZpbGw9IiNGNUY3RkQiLz4KPHBhdGggZD0iTTQ1MS4yNTQgOC43MTU3OUM0NTEuMjU0IDExMS4wMDUgMzY4LjU2IDE5My45MjYgMjY2LjU1MSAxOTMuOTI2QzE2NC41NDMgMTkzLjkyNiA4MS44NDg2IDExMS4wMDUgODEuODQ4NiA4LjcxNTc5QzgxLjg0ODYgLTkzLjU3MzIgMTY0LjU0MyAtMTc2LjQ5NSAyNjYuNTUxIC0xNzYuNDk1Vi0yNTguNTY4QzExOS4zMzkgLTI1OC41NjggMCAtMTM4LjkwMSAwIDguNzE1NzlDMCAxNTYuMzMzIDExOS4zMzkgMjc2IDI2Ni41NTEgMjc2QzQxMy43NjQgMjc2IDUzMy4xMDMgMTU2LjMzMyA1MzMuMTAzIDguNzE1NzlDNTMzLjEwMyAtMTM4LjkwMSA0MTMuNzY0IC0yNTguNTY4IDI2Ni41NTEgLTI1OC41NjhWLTE3Ni40OTVDMzY4LjU2IC0xNzYuNDk1IDQ1MS4yNTQgLTkzLjU3MzIgNDUxLjI1NCA4LjcxNTc5WiIgZmlsbD0iI0Y1RjdGRCIvPgo8L3N2Zz4=");
    width: 268px;
    height: 276px;
    background-repeat: no-repeat;
    right: 0;
    top: 0;
    position: absolute;
    z-index: 1;
    opacity: .1;
}

.quality-card.quality-card_primary .quality-card__title {
    color: var(--color-text-contrast, #FFF);
}

.quality-card.quality-card_primary .quality-card__description {
    color: var(--color-text-contrast, #FFF);
}

.quality-card.quality-card_dark .quality-card__body {
    background: var(--color-card-secondary, radial-gradient(145.68% 94.57% at 33.24% 26.73%, #474A4B 0%, #2E3031 100%));
    color: var(--color-text-contrast, #FFF);
}

.quality-card.quality-card_dark .quality-card__body:before {
    content: "";
    background-image: url("data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMjY4IDI3NiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGVsbGlwc2UgY3g9IjI2Ni41NTIiIGN5PSIyNjcuMjg0IiByeD0iODAuNCIgcnk9IjgwLjYyMSIgZmlsbD0id2hpdGUiLz4KPHBhdGggZD0iTTQ1MS4yNTQgMjY3LjI4NEM0NTEuMjU0IDE2NC45OTUgMzY4LjU2IDgyLjA3MzcgMjY2LjU1MSA4Mi4wNzM3QzE2NC41NDMgODIuMDczNyA4MS44NDg2IDE2NC45OTUgODEuODQ4NiAyNjcuMjg0QzgxLjg0ODYgMzY5LjU3MyAxNjQuNTQzIDQ1Mi40OTUgMjY2LjU1MSA0NTIuNDk1VjUzNC41NjhDMTE5LjMzOSA1MzQuNTY4IDAgNDE0LjkwMSAwIDI2Ny4yODRDMCAxMTkuNjY3IDExOS4zMzkgMCAyNjYuNTUxIDBDNDEzLjc2NCAwIDUzMy4xMDMgMTE5LjY2NyA1MzMuMTAzIDI2Ny4yODRDNTMzLjEwMyA0MTQuOTAxIDQxMy43NjQgNTM0LjU2OCAyNjYuNTUxIDUzNC41NjhWNDUyLjQ5NUMzNjguNTYgNDUyLjQ5NSA0NTEuMjU0IDM2OS41NzMgNDUxLjI1NCAyNjcuMjg0WiIgZmlsbD0id2hpdGUiLz4KPC9zdmc+");
    width: 268px;
    height: 276px;
    background-repeat: no-repeat;
    right: 0;
    bottom: 0;
    position: absolute;
    z-index: 1;
    opacity: .1;
}

.quality-card.quality-card_dark .quality-card__title {
    color: var(--color-text-contrast, #FFF);
}

.quality-card.quality-card_dark .quality-card__description {
    color: var(--color-text-contrast, #FFF);
}

@media (max-width: 1899px) {
    .quality-page__hero-content {
        display: flex;
        flex-direction: column;
        gap: 24px;
    }

    .quality-card__content {
        gap: 60px;
    }

    .quality-card {
        gap: 42px;
    }
}

@media (max-width: 1279px) {
    .quality-page__grid {
        grid-template-columns: repeat(8, 1fr);
    }

    .quality-page__header {
        grid-column: span 4;
    }

    .quality-page__cards {
        grid-column: span 4;
    }

    .quality-card {
        gap: 32px;
    }

    .quality-card__content {
        flex-direction: column;
        align-items: center;
        gap: 32px;
    }
}

@media (max-width: 767px) {
    .quality-page__video {
        max-height: 530px;
    }

    .quality-card__body {
        padding: 24px;
    }

    .quality-page__grid {
        grid-template-columns: repeat(2, 1fr);
        row-gap: 32px;
    }

    .quality-page__header {
        grid-column: span 2;
        grid-row: 1;
    }

    .quality-page__cards {
        grid-column: span 2;
        grid-row: 2;
    }
}

.quality-page__certificates {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: var(--column-gap-4);
    margin-top: var(--space-6);
}

.quality-page__certificate {
    border-radius: 30px;
    border: 1px solid #C3C7D1;
    padding: 32px;
    display: flex;
    flex-direction: column;
    gap: 54px;
    cursor: pointer;
    box-sizing: border-box;
}

.quality-page__certificate-image {
    width: 175px;
    align-self: center;
}

.quality-page__certificate-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 60px;
}

.quality-page__certificate-btn {
    display: none;
}

.quality-page__certificate:hover {
    background: linear-gradient(302deg, rgba(255, 255, 255, 0.00) 5.97%, #FFF 70.3%);
    border: none;
}

.quality-page__certificate:hover .quality-page__certificate-btn {
    display: inline-block;
}

.quality-page__certificate-title {
    color: var(--color-text-primary, #312E2B);
}

.quality-page__certificate-status {
    text-transform: uppercase;
    color: #B7B9BE;
    font-weight: 600;
}

.quality-page__certificate-active-to {
    color: var(--color-text-primary, #312E2B);
    font-weight: 500;
}

.quality-page__video img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

@media (max-width: 1279px) {
    .quality-page__certificates {
        display: flex;
        -ms-overflow-style: none;
        scrollbar-width: none;
        margin-left: -40px;
        margin-right: -40px;
        padding-left: 40px;
        padding-right: 40px;
        overflow: auto;
    }

    .quality-page__certificate {
        width: 360px;
        flex: none;
    }
}

@media (max-width: 767px) {
    .quality-page__hero {
        height: 419px;
    }

    .quality-page__video img {
        width: 100%;
        height: 100%;
    }

    .quality-page__certificates {
        display: flex;
        gap: 16px;
        -ms-overflow-style: none;
        scrollbar-width: none;
        margin-left: -16px;
        margin-right: -16px;
        padding-left: 16px;
        padding-right: 16px;
        overflow: auto;
    }

    .quality-page__certificate {
        width: 320px;
        flex: none;
    }

    .quality-page__certificate:hover .quality-page__certificate-btn {
        display: none;
    }
}