.tabs_wrapper {
    position: relative;
    height: 150vh;
    overflow: hidden;
}

.tabs_container {
    padding: 150px 0;
    max-width: 1792px;
    margin: 0 auto;
}

.tabs_card {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    height: 100%;
    position: sticky;
    padding: 0 0 64px 0;
}

.tabs_one {
    z-index: 1;
    top: 120px;
}

.tabs_two {
    z-index: 2;
    top: 140px;
}

.tabs_three {
    z-index: 3;
    top: 160px;
}

.right_block {
    background-image: url(../assets/white-paper.jpg);
    padding: 16px;
    box-shadow: 0px 8px 12px 6px rgba(0, 0, 0, 0.15), 0px 4px 4px 0px rgba(0, 0, 0, 0.30);
    display: flex;
    max-width: 1184px;
    flex-direction: column;
    gap: 10px;
}

body.dark .right_block {
    background-image: url(../assets/paper_black.jpg);
    background-size: cover;
}

.right_block_border {
    background: linear-gradient(180deg, #4D4336 0%, #714A27 63.5%, #AA8E75 79%, #5E5548 98.5%);
    width: 100%;
    height: 100%;
    padding: 2px;
}

body.dark .right_block_border {
    background: #877751;
}

.tabs_body {
    background-image: url(../assets/white-paper.jpg);
    width: 100%;
    height: 100%;
    padding: 32px 32px 32px;
    display: flex;
    flex-direction: column;
    gap: 32px;
}

body.dark .tabs_body {
    background-image: url(../assets/paper_black.jpg);
    background-size: cover;
}

.tabs_text {
    font-family: Evolventa;
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px;
}

.tabs_up {
    display: flex;
    flex-direction: row;
    gap: 32px;
}

.tabs_pic {
    display: block;
    width: 326px;
    min-width: 326px;
    height: 168px;
    position: relative;
    background: linear-gradient(0deg, rgba(1, 1, 1, 0.06) 0%, rgba(1, 1, 1, 0.06) 100%);
    box-shadow: 0px -1.25px 0.833px 0px #FFF inset, 0px -2.508px 0.502px 0px rgba(255, 255, 255, 0.30) inset, 0px 1.254px 2.508px 0px rgba(0, 0, 0, 0.40) inset, 0px 0.833px 0px 0px #FFF, 0px -0.833px 0px 0px rgba(0, 0, 0, 0.25);
}

body.dark .tabs_pic {
    box-shadow: 0px 1.25px 4.51px 0px #00000066 inset, 0px -2.51px 0.5px 0px #4d4c4c4d inset, 0px -1.25px 0.83px 0px #4f4f4f inset, 0px -0.83px 0px 0px #00000040, 0px 0.83px 0px 0px #373737;
}

.bd_pic {
    position: absolute;
    bottom: 2px;
}

.dwarf_pic {
    position: absolute;
    bottom: 2px;
}

.elf_pic {
    position: absolute;
    bottom: 2px;
}

.left_block {
    max-width: 472px;
    min-width: 472px;
    position: relative;
    transition: all 0.3s ease;
}

.tabs_one,
.tabs_two,
.tabs_three {
    opacity: 1;
    transition: opacity 0.3s linear;
}

.fading-out .left_block {
    opacity: 0;
}


.fading-out .right_block {
    box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.15), 0px 4px 4px 0px rgba(0, 0, 0, 0.30);
}


.little_text {
    font-family: Jost;
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: 36px;
    letter-spacing: -0.16px;
    text-transform: uppercase;
}

.left_block h2 {
    color: var(--red-70);
    padding-bottom: 8px;
}

body.dark .left_block h2 {
    color: #BD9C49;
    background: linear-gradient(180deg, #FFE5A3 0%, #CBA74C 63.5%, #EECE7F 79%, #8C7845 98.5%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-fill-color: transparent;
    text-shadow: none;
}

.red_romb {
    clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
    width: 16px;
    height: 16px;
    background: var(--red-70);
    position: absolute;
    top: 48px;
    left: -30px;
    display: block;
}

body.dark .red_romb {
    background: linear-gradient(180deg, #FFE5A3 0%, #CBA74C 63.5%, #EECE7F 79%, #8C7845 98.5%);
}

.tabs_bootom {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 32px;
}

.bottom_wind {
    min-height: 210px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 16px;
    background: linear-gradient(0deg, rgba(0, 0, 0, 0.02) 0%, rgba(0, 0, 0, 0.02) 100%);
    box-shadow: 0px 0.833px 0px 0px #FFF, 0px -0.833px 0px 0px rgba(0, 0, 0, 0.25), 0px -1.25px 0.833px 0px #FFF inset, 0px -2.508px 0.502px 0px rgba(255, 255, 255, 0.30) inset, 0px 1.254px 2.508px 0px rgba(0, 0, 0, 0.40) inset;
}

body.dark .bottom_wind {
    box-shadow: 0px 1.25px 4.51px 0px #00000066 inset, 0px -2.51px 0.5px 0px #4d4c4c4d inset, 0px -1.25px 0.83px 0px #4f4f4f inset, 0px -0.83px 0px 0px #00000040, 0px 0.83px 0px 0px #373737;
}

.bottom_wind_title {
    text-transform: uppercase;
    color: var(--red-70);
}

body.dark .bottom_wind_title {
    color: #BD9C49;
    background: linear-gradient(180deg, #FFE5A3 0%, #CBA74C 63.5%, #EECE7F 79%, #8C7845 98.5%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-fill-color: transparent;
    text-shadow: none;
}

.tabs_titles {
    display: flex;
    flex-direction: column;
    gap: 8px;

}

@media (max-width: 1865px) {
    .tabs_container {
        padding: 140px 50px 50px;
    }

    .tabs_card {
        gap: 32px;
    }
}

@media (max-width: 1600px) {
    .tabs_titles h2 {
        font-size: 28px;
        line-height: 36px;
    }

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

    .bottom_wind_title {
        font-size: 22px;
        line-height: 24px;
    }

    .left_block {
        min-width: 355px;
    }
}

@media (max-width: 1300px) {

    .fading-out .left_block {
        opacity: 1;
    }

    .fading-out .right_block {
        box-shadow: 0px 8px 12px 6px rgba(0, 0, 0, 0.15), 0px 4px 4px 0px rgba(0, 0, 0, 0.30);
    }

    .tabs_card {
        position: static
    }

    .tabs_card {
        flex-direction: column;
    }

    .red_romb {
        display: none;
    }

    .left_block {
        margin: 0 auto;
        text-align: center;
    }

    .tabs_one {
        z-index: 1;
        top: 110px;
    }

    .tabs_two {
        z-index: 2;
        top: 110px;
    }

    .tabs_three {
        z-index: 3;
        top: 110px;
    }
}

@media (max-width: 940px) {

    .tabs_pic {
        display: none;
    }

    .tabs_bootom {
        display: flex;
        flex-direction: column;
    }

    .tabs_container {
        padding: 100px 32px 50px;
    }

    .bottom_wind {
        min-height: 150px;
    }
}

@media (max-width: 600px) {

    .tabs_container {
        padding: 80px 16px 50px;
    }

    .right_block {
        padding: 8px;
    }

    .tabs_body {
        padding: 24px;
    }

    .tabs_titles h2 {
        font-size: 24px;
        line-height: 28px;
    }

    .tabs_text {
        font-size: 16px;
        line-height: 24px;
    }

    .tabs_bootom {
        gap: 16px;
    }
}