.documents-wrapper {
    padding: 60px 0;
}

.documents .title-big {
    margin-bottom: 25px;
}

.documents .text {
    margin-bottom: 60px;
}

.documents__filters {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 32px;
}

.documents__filter {
    font-size: 16px;
    cursor: pointer;
    display: block;
    position: relative;
    border-radius: 18px;
    border: 1px solid var(--gold);
    background-color: #fff;
    box-shadow: 0px 1.716px 2.214px 0px rgba(0, 0, 0, 0.18), 0px 4.123px 5.32px 0px rgba(0, 0, 0, 0.13), 0px 7.763px 10.017px 0px rgba(0, 0, 0, 0.11), 0px 13.849px 17.869px 0px rgba(0, 0, 0, 0.09), 0px 25.902px 33.422px 0px rgba(0, 0, 0, 0.07), 0px 62px 80px 0px rgba(0, 0, 0, 0.05);
    width: fit-content;
    padding: 10px 25px;
    color: #1e1e1e;
    font-family: Roboto Slab, sans-serif;
    text-transform: uppercase;
    transition: background-color 0.5s, box-shadow 0.5s, border-color 0.5s, color 0.5s;
}

.documents__filter:hover,
.documents__filter.active {
    border: 1px solid rgba(255, 255, 255, 0.2);
    background-color: var(--gold);
    color: #fff;
}

.documents__list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}


.documents__item {
    justify-content: space-between;
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    border-left: 3px solid var(--gold);
    padding-left: 25px;
    align-items: flex-start;
}

.documents__item-content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
}

.documents__item-category {
    font-size: 14px;
    color: var(--gold);
}

.documents__item-title {
    margin: 0;
    font-size: 20px;
    font-weight: 600;
    line-height: 1.4;
}

.documents__item-description {
    margin: 0;
    font-size: 16px;
    line-height: 1.5;
    color: #666;
}

.documents__item-format {
    font-size: 14px;
    color: #777;
    text-transform: uppercase;
}

.documents__item-btn {
    display: block;
    position: relative;
    border-radius: 18px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    background-color: var(--gold);
    box-shadow: 0px 1.716px 2.214px 0px rgba(0, 0, 0, 0.18), 0px 4.123px 5.32px 0px rgba(0, 0, 0, 0.13), 0px 7.763px 10.017px 0px rgba(0, 0, 0, 0.11), 0px 13.849px 17.869px 0px rgba(0, 0, 0, 0.09), 0px 25.902px 33.422px 0px rgba(0, 0, 0, 0.07), 0px 62px 80px 0px rgba(0, 0, 0, 0.05);
    width: fit-content;
    padding: 10px 25px;
    color: #fff;
    font-family: Roboto Slab, sans-serif;
    text-transform: uppercase;
    transition: background-color 0.5s, box-shadow 0.5s, border-color 0.5s, color 0.5s;
}

.documents__item-btn:hover {
    background: #fff;
    color: #1e1e1e;
    border: 1px solid var(--gold);
}

.documents__item[hidden] {
    display: none !important;
}

.documents__item[hidden],
.documents__empty[hidden] {
    display: none;
}

.text-wrapper,
.notice-wrapper {
    padding: 60px 0;
}

.text-wrapper .title-big,
.notice-wrapper .title-big {
    margin-bottom: 25px;
}

.notice-wrapper .notice {
    border-left: 3px solid var(--gold);
    padding-left: 25px;
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 60px;
}

.notice-list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px 20px;
}

.notice-list .notice-item {
    display: flex;
    flex-direction: column;
    gap: 16px;
    border-left: 3px solid var(--gold);
    padding-left: 25px;
    align-items: flex-start;
}

.notice-list .notice-item img {
    width: 50px;
    height: 50px;
    object-fit: cover;
}

.notice-list .notice-item .title {
    text-align: left;
}


.steps-wrapper {
    padding: 60px 0;
}

.steps-wrapper .title-big {
    align-items: center;
    margin-bottom: 25px;
}

.steps-list {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    gap: 40px;
}

.steps-list .steps-item {
    display: flex;
    flex-direction: column;
    gap: 16px;
    border-left: 3px solid var(--gold);
    padding-left: 25px;
    align-items: flex-start;
}


.documents-cta-wrapper {
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center right;
    background-image: url(../svg/home-about-bg.svg);
    padding: 60px 0;
}

.documents-cta-heading {
    display: flex;
    flex-direction: column;
    gap: 30px;
    align-items: center;
}

.documents-cta-block {
    display: flex;
    align-items: center;
    gap: 56px;
    padding-bottom: 40px;
}

.documents-cta-block .text {
    position: relative;
}

.documents-cta-block .text:before {
    content: '';
    width: 59px;
    height: 98px;
    display: block;
    background-color: var(--sky);
    box-shadow: 0px 3px 0px 0px #7b9fbf, 0px 3px 0px 0px #eaf5ff inset, 0px 2.767px 2.214px 0px rgba(0, 0, 0, 0.02), 0px 6.65px 5.32px 0px rgba(0, 0, 0, 0.03), 0px 12.522px 10.017px 0px rgba(0, 0, 0, 0.04), 0px 22.336px 17.869px 0px rgba(0, 0, 0, 0.04), 0px 41.778px 33.422px 0px rgba(0, 0, 0, 0.05), 0px 100px 80px 0px rgba(0, 0, 0, 0.07);
    position: absolute;
    top: 0;
    right: -86px;
}

.documents-cta-block .title {
    text-align: left;
    margin-bottom: 48px;
    position: relative;
}

.documents-cta-block .title:after {
    content: '';
    width: 100px;
    height: 1px;
    background-color: #002240;
    position: absolute;
    bottom: -23px;
    left: 0;
}

.documents-cta-block .btns {
    display: flex;
    flex-direction: column;
    gap: 15px 25px;
    margin-top: 25px;
}

.documents-cta-block img {
    object-fit: cover;
    object-position: top;
    width: 100%;
    max-width: 580px;
    max-height: 380px;
    box-shadow: 0px 2.767px 2.214px 0px rgba(0, 0, 0, 0.02), 0px 6.65px 5.32px 0px rgba(0, 0, 0, 0.03), 0px 12.522px 10.017px 0px rgba(0, 0, 0, 0.04), 0px 22.336px 17.869px 0px rgba(0, 0, 0, 0.04), 0px 41.778px 33.422px 0px rgba(0, 0, 0, 0.05), 0px 100px 80px 0px rgba(0, 0, 0, 0.07);
    border-radius: 10px;
    border: 1px solid #B5BBBF;
}


.direction-wrapper {
    display: flex;
    background-color: #eff4f8;
    background-image: url("../svg/home-advantage-bg.svg");
    padding: 60px 0;
    align-items: center;
}

.direction-wrapper .title-big {
    margin-bottom: 25px;
}

.direction {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    width: 100%;
    gap: 20px;
    justify-content: space-between;
    margin-top: 60px;
}

.direction-item {
    border: 1px solid #b5bbbf;
    background-color: #eff4f8;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    max-width: 100%;
    transition: border-color 0.3s, box-shadow 0.3s;
    box-shadow: 0px 2.767px 2.214px 0px rgba(0, 0, 0, 0.02),
    0px 6.65px 5.32px 0px rgba(0, 0, 0, 0.03),
    0px 12.522px 10.017px 0px rgba(0, 0, 0, 0.04),
    0px 22.336px 17.869px 0px rgba(0, 0, 0, 0.04),
    0px 20.778px 20.422px 0px rgba(0, 0, 0, 0.05),
    0px 50px 40px 0px rgba(0, 0, 0, 0.07);
}

.direction-item .button {
    padding: 10px 62px 10px 15px;
    font-size: 12px;
    margin-top: auto;
}

.direction-item > img {
    width: 100%;
    height: 150px;
    object-fit: cover;
}

.direction-item:hover {
    border-color: var(--gold);
    box-shadow: 0px 6.65px 5.786px 0px rgba(0, 0, 0, 0.03),
    0px 22.336px 19.433px 0px rgba(0, 0, 0, 0.04),
    0px 50px 40px 0px rgba(0, 0, 0, 0.07);
}

.direction-item-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
    height: 100%;
    padding: 0 16px 24px;
}

.direction-item-stick {
    height: 1px;
    width: 55px;
    background-color: var(--gold);
}

.about-info-wrapper {
    padding: 60px 0 0;
}

.about-info {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    align-items: stretch;
    gap: 32px;
}

/* Левая часть */

.about-info__content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 24px;
    border-radius: 16px;
    color: #fff;
    box-shadow: 0px 2.767px 2.214px 0px rgba(0, 0, 0, 0.02), 0px 6.65px 5.32px 0px rgba(0, 0, 0, 0.03), 0px 12.522px 10.017px 0px rgba(0, 0, 0, 0.04), 0px 22.336px 17.869px 0px rgba(0, 0, 0, 0.04), 0px 20.778px 20.422px 0px rgba(0, 0, 0, 0.05), 0px 50px 40px 0px rgba(0, 0, 0, 0.07);
    border: 1px solid #b5bbbf;
    background-color: #eff4f8;
    padding: 36px 24px;
}

.about-info__content .title {
    margin: 0 0 16px;
}

.about-info__content .text {
    margin-bottom: 20px;
}

/* Правая часть */

.about-info__stats {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-around;
    gap: 32px;
    padding: 16px 0;
}

.about-info__stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 12px;
    max-width: 420px;
}

.about-info__stat-number {
    font-size: 56px;
    font-weight: 400;
    line-height: 1;
    color: #1e1e1e;
}

.about-info__stat-title {
    margin: 0;
    font-size: 20px;
    font-weight: 400;
    line-height: 1.3;
    color: #1e1e1e;
}

.about-info__stat-text {
    margin: 0;
    font-size: 15px;
    line-height: 1.4;
    color: #1e1e1e;
}

@media screen and (max-width: 1024px) {
    .documents .text {
        margin-bottom: 25px;
    }

    .documents__item-title {
        font-size: 18px;
    }

    .documents__item-description {
        font-size: 14px;
    }

    .documents__item-btn,
    .documents__filter {
        font-size: 12px;
    }

    .notice-wrapper .notice {
        font-size: 14px;
    }

    .direction {
        grid-template-columns: repeat(2, 1fr);
        margin-top: 25px;
    }

    .about-info__stat-number {
        font-size: 48px;
    }
}

@media screen and (max-width: 768px) {
    .mains .btns {
        flex-direction: column;
        align-items: flex-start;
    }

    .documents__item-btn, .documents__filter {
        font-size: 10px;
        padding: 10px;
    }

    .documents__list {
        grid-template-columns: repeat(1, minmax(0, 1fr));
    }

    .wrapper {
        padding: 40px 0;
    }

    .notice-list {
        grid-template-columns: repeat(1, 1fr);
    }

    .documents-cta-block {
        flex-direction: column-reverse;
    }

    .documents-cta-block .text:before {
        display: none;
    }

    .direction {
        grid-template-columns: repeat(1, 1fr);
    }

    .about-info {
        grid-template-columns: repeat(1, 1fr);
    }

    .about-info__content {
        order: 2;
    }

    .about-info__stats{
        order: 1;
    }
}