#progress {
    overflow: hidden;
    padding: 0 0 112px;
    max-width: 1920px;
    margin: 0 auto;
}

.progress_img {
    background: url(../assets/bgprog.jpg) top / cover no-repeat;
}

#progress .main_gradient {
    padding: 0 0 112px;
}

.prog_container {
    width: 1488px;
    display: flex;
    margin: 0 auto;
    gap: 32px;
}

.prog_slide {
    min-width: 348px;
    height: 724px;
    cursor: pointer;
    color: #fff;
    flex: 1;
    background: linear-gradient(180deg, #BD9C49 0%, #E6B843 63.5%, #EECE7F 79%, #8C7845 98.5%);
    position: relative;
    transition: all 0.5s ease-in;
    padding: 3px;
    transform: translateY(100px);
    opacity: 0;
}

.prog_slide.visible {
    transform: translateY(0);
    opacity: 1;
}

.prog_bg {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    padding: 40px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    width: 100%;
    height: 100%;
    position: relative;
}

.prog_slide.active .linecard,
.prog_slide.active .corner {
    opacity: 1;
}

.linecard {
    background-position: center;
    position: absolute;
    z-index: 10;
    opacity: 0;
    transition: all 0.3s ease-in;
    pointer-events: none;
}

.lc_one {
    background-image: url(../assets/cornerlt.png);
    top: 5px;
    left: 40px;
    width: calc(100% - 80px);
    height: 6px;
}

.lc_two {
    background-image: url(../assets/cornerrt.png);
    bottom: 40px;
    right: 5px;
    transform: rotate(360deg);
    height: calc(100% - 80px);
    width: 6px;
}

.lc_three {
    background-image: url(../assets/cornerrt.png);
    bottom: 40px;
    left: 5px;
    transform: rotate(360deg);
    height: calc(100% - 80px);
    width: 6px;
}

.lc_four {
    background-image: url(../assets/cornerlt.png);
    bottom: 5px;
    left: 40px;
    transform: rotate(180deg);
    width: calc(100% - 80px);
    height: 6px;
}

.corner {
    background-image: url(../assets/corner.png);
    width: 36px;
    height: 36px;
    background-position: center;
    background-repeat: no-repeat;
    position: absolute;
    z-index: 10;
    pointer-events: none;
    opacity: 0;
    transition: all 0.3s ease-in;
}

.corner_one {
    top: 5px;
    left: 5px;
}

.corner_two {
    top: 5px;
    right: 5px;
    transform: rotate(90deg);
}

.corner_three {
    bottom: 5px;
    left: 5px;
    transform: rotate(-90deg);
}

.corner_four {
    bottom: 5px;
    right: 5px;
    transform: rotate(180deg);
}

.prog_slide::before,
.prog_slide::after {
    content: " ";
    background: linear-gradient(180deg, rgba(18, 18, 18, 0.00) 0%, #121212 100%);
    width: calc(100% - 6px);
    height: calc(100% - 6px);
    position: absolute;
    top: 3px;
    left: 3px;
    pointer-events: none;
    transition: all 0.5s linear;
    z-index: 1;
    will-change: opacity;
}

.prog_slide:hover::before {
    filter: brightness(2.05);
}

.prog_slide::after {
    background: #271d10;
    ;
    opacity: 0;
}

.prog_slide.active::after,
.prog_slide.active::before {
    opacity: 1;
}


.prog_slide .mini_text {
    position: absolute;
    opacity: 1;
    z-index: 2;
    left: 0;
    bottom: 0;
}

.prog_slide.active {
    flex: 15;
}

.prog_slide.active .mini_text {
    opacity: 0;
    transition: opacity 0.3s ease-in 0.2s;
}

.prog_slide .big_text {
    opacity: 0;
    display: flex;
    flex-direction: column;
    gap: 32px;
    height: 100%;
    position: relative;
    z-index: 2;
}

.prog_slide.active .big_text {
    opacity: 1;
    transition: opacity 0.3s ease-in 0.4s;
}

.first_card {
    background-image: url('../assets/card1.jpg');
}

.second_card {
    background-image: url('../assets/card2.jpg');
}

.third_card {
    background-image: url('../assets/card3.jpg');
}


.mini_text {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 0px 0 30px 29px;
}

.mini_name {
    background: linear-gradient(180deg, #AF934C 0%, #DEBC66 50%, #AF934C 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-family: Colus;
    font-size: 32px;
    line-height: 36px;
    letter-spacing: -0.32px;
    position: relative;
}

.mini_points {
    color: #FFF;
    font-size: 18px;
    line-height: 27px;
    padding-left: 22px;
    list-style: none;
}

.mini_points li {
    position: relative;
}

.mini_points li::before {
    content: "";
    position: absolute;
    width: 8px;
    height: 8px;
    transform: rotate(-45deg);
    background: linear-gradient(180deg, #BD9C49 0%, #E6B843 63.5%, #EECE7F 79%, #8C7845 98.5%);
    top: 10px;
    left: -20px;
}

.big_part::before,
.big_part::after {
    content: " ";
    background: linear-gradient(90deg, rgba(255, 227, 204, 0.00) 0%, rgba(255, 227, 204, 0.07) 50%, rgba(255, 227, 204, 0.00) 100%);
    width: 100%;
    height: 2px;
    position: absolute;
    left: 0;
    pointer-events: none;
    z-index: 1;
}

.big_part::before {
    top: 0;
}

.big_part::after {
    bottom: 0;
}

.big_part {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 16px 20px;
    background: linear-gradient(90deg, rgba(255, 227, 204, 0.00) 0%, rgba(255, 227, 204, 0.03) 50%, rgba(255, 227, 204, 0.00) 100%);
}

.big_top {
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.big_text {
    display: flex;
    flex-direction: column;
    gap: 32px;
}

.big_title {
    color: #FFD286;
    font-family: Colus;
    font-size: 24px;
    font-style: normal;
    line-height: 28px;
    letter-spacing: -0.192px;
    text-transform: uppercase;
}

.big_top_discript {
    color: #FFF4E7;
    font-family: "OpenSans";
    font-size: 20px;
    line-height: 26px;
}

.big_discript {
    color: #FFF4E7;
    font-family: "OpenSans";
    font-size: 18px;
    line-height: 24px;
}

.big_name {
    font-family: Colus;
    font-size: 32px;
    line-height: 36px;
    letter-spacing: -0.32px;
    background: linear-gradient(180deg, #BD9C49 0%, #E6B843 63.5%, #EECE7F 79%, #8C7845 98.5%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    position: relative;
}

@media (max-width: 1570px) {

    .prog_slide {
        min-width: 304px;
        height: 724px;
    }

    .prog_container {
        width: 1312px;
    }

    .prog_bg {
        padding: 40px 30px 32px;
    }
}

@media (max-width: 1430px) {

    .mini_text {
        padding: 0px 29px 30px 29px;
        width: 100%;
    }

    .mini_name::before {
        content: " ";
        background: url(../assets/gold_arrow.svg) center / cover no-repeat;
        width: 16px;
        height: 10px;
        position: absolute;
        top: 12px;
        right: 0px;
        pointer-events: none;
    }

    .big_name::before {
        content: " ";
        background: url(../assets/gold_arrow.svg) center / cover no-repeat;
        width: 16px;
        height: 10px;
        position: absolute;
        top: 12px;
        right: 0px;
        pointer-events: none;
        transform: rotate(180deg);
    }

    .prog_slide.active .mini_text {
        opacity: 0;
        transition: opacity 0.3s ease-in;
    }

    .prog_slide.active .big_text {
        opacity: 1;
        transition: opacity 0.3s ease-in 0.3s;
    }

    .prog_slide:hover::before {
        filter: none;
    }

    .prog_slide::before {
        background: linear-gradient(90deg, #121212 0%, #12121288 40%, rgba(18,18,18,0) 60%, #12121292 90%, #121212 100%);
    }

    .prog_slide::before,
    .prog_slide::after {
        transition: all 0.3s linear;
    }

    .prog_slide.active {
        flex: auto;
        max-height: 700px;
        height: 100%;
    }

    .prog_container {
        width: 896px;
        flex-direction: column;
        height: max-content;
    }

    .prog_slide {
        min-width: 100%;
        max-height: 184px;
        flex: auto;
        transition: all 0.3s ease-in;
        overflow: hidden;
    }

    .big_name {
        font-size: 28px;
        line-height: 36px;
    }

    .big_top_discript {
        font-size: 18px;
        line-height: 22px;
    }

    .big_title {
        font-size: 20px;
        line-height: 20px;
        letter-spacing: -0.16px;
    }

    .prog_slide .big_text {
        gap: 16px;
    }

    .big_discript {
        font-size: 16px;
        line-height: 22px;
    }

    .big_part {
        padding: 20px;
    }

    .mini_name {
        font-size: 24px;
        line-height: 28px;
        letter-spacing: -0.24px;
    }
}

@media (max-width: 930px) {

    .prog_container {
        width: 100%;
        height: 1006px;
        padding: 0 16px;
    }

    .prog_bg {
        padding: 19px 11px 19px;
    }
}

@media (max-width: 700px) {
    .prog_container {
        height: 1025px;
    }
}

@media (max-width: 560px) {

    .prog_slide::before {
        background: linear-gradient(269deg, rgba(18, 18, 18, 0.42) 1%, rgba(18, 18, 18, 0.76) 21.58%, #121212 99%);        
    }

    .big_title {
        font-size: 18px;
        line-height: 22px;
        letter-spacing: -0.144px;
    }

    .prog_container {
        height: fit-content;
    }

    .big_discript {
        font-size: 16px;
        line-height: 20px;
    }

    .prog_slide.active {
        flex: auto;
        max-height: 900px;
        height: 100%;
    }
}