:root {
    --blue-main: #063350;
    --green: #4BAC9A;
    --text: #373D45;
    --backgroung: #F6FAFF;
}

.rules__wrapper {
    width: 100%;
    padding-top: 140px;

}

.rules__name {
    width: 1313px;
    margin: 0 auto;
}

.rules__name h4 {
    color: var(--blue-main);
    font-size: 48px;
    font-weight: 800;
    margin-bottom: 20px;
}

.rules__content {
    width: 1313px;
    margin: 0 auto;

}

.rules__image {
    width: 100%;
    height: 571px;
    background-color: #D9D9D9;
    margin-bottom: 34px;
    border-radius: 8px;
}

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

.rules__text {
    width: 100%;
    margin-bottom: 15px;
    line-height: 117%;
}

.rules__text p {
    color: var(--blue-main);
    font-weight: 400;
    font-size: 16px;
    line-height: 20px;
}

.rules__p {
    color: var(--blue-main);
    font-size: 16px;
    margin-bottom: 15px;
    line-height: 117%;
}

.rules__p span {
    font-weight: 700;
    margin-bottom: 4px;
}


.rules__steps {
    width: 100%;
    background-color: var(--backgroung);
        padding-bottom: 100px;
}

.rules__steps-wrapper {
    width: 1300px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    padding-top: 10px;
}

.rules__steps-block {
    width: 1294px;
    height: 154px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 34px;
}

.rules__steps-number {
    width: 71px;
    height: 71px;
    background-color: var(--green);
    border-radius: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 32px;
    font-weight: 600;
}

.rules__steps-content {
    max-width: 954px;

}

.rules__steps-name {
    font-weight: 700;
    color: var(--green);
    font-size: 20px;
    margin-bottom: 17px;
}

.rules__steps-text {
    font-size: 16px;
    color: var(--blue-main);
}
.rules__steps-text  span {
    font-weight: 700;
}
.rules__steps-text p{
line-height: 117%;
}
    
.rules__steps-image {
    width: 154px;
    height: 154px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 5px;
    overflow: hidden;
}
.rules__steps-image img {
    width: 100%;
    height: 100%;
    object-fit: contain;

}


.rules__documents {
    width: 100%;
}

.rules__documents-wrapper {
    width: 1300px;
    margin: 0 auto; 
    padding-top: 55px;
    padding-bottom: 101px;
}

.rules__documents-name {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 55px;
}
.rules__documents-name h3 {
    color: var(--blue-main);
    font-size: 48px;
    font-weight: 700;
}
.rules__documents-name span {
    color: var(--green);
}

.rules__documents-content {
    width: 100%;
    display: flex;
    justify-content: space-between;

}

.rules__documents-element {
    width: 305px;
    height: 467px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    box-shadow: 0px 4px 26px 0px #0000001A;
    border-radius: 12px;
    overflow: hidden;
}

.rules__documents-image {
    width: 100%;
    height: 233px;
    padding: 22px;
    border-bottom: 1px solid #E8E8E8;
}
.rules__documents-image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.rules__documents-content-text {
    padding: 10px;
    width: 100%;

}
.rules__documents-element_name{
    height: 83px;
    color: var(--blue-main);
    font-size: 20px;
    font-weight: 600;
}
.rules__documents-desc {
    width: 100%;
    height: 70px;
}
.rules__documents-desc p {
    font-weight: #333333;
    font-size: 16px;
    font-weight: 400;
}
.rules__documents-ling {
    width: 100%;
    height: 40px;
    background-color: var(--blue-main);
    
}
.rules__documents-ling a {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-weight: 700;
    font-size: 16px;
}

    @media (max-width: 768px) {
        .rules__name{
            width: 95%;
            margin: 0 auto;
        }
        .rules__content{
            width: 95%;
            margin: 0 auto;
        }
        .rules__steps-wrapper{
            width: 95%;

        }
        .rules__documents-wrapper{
            width: 95%;
        }
        .rules__documents-content{
            flex-direction: column;
            align-items: center;
        }
        .rules__steps-block{
            width: 100%;
            height: initial;
            flex-direction: column-reverse;
            flex-wrap: wrap;
        }
        .rules__steps-image{
            width: 100%;
            height: 154px;
        }
        .rules__steps-number{
            width: 20%;
            max-width: 71px;
            display: none;
            visibility: hidden;
        }
        .rules__steps-text{
            width: 100%;

        }
        .rules__name h4{
            font-size: 31px;
        }
        .rules__image {
            width: 100%;
            height: 430px;
        }
        .rules__steps-image{
            margin-bottom: 10px;
        }
        .rules__documents-name h3{
            font-size: 31px;
        }
        .rules__documents-element{
            margin-bottom: 20px;
        }
    }