:root {
    --Card: #FFFFFF;
    --background-light: #EDE6E0;
    --background-dark: #BAA087;
    --stroke: #997154;
    --primary: #F8723D;
    --hover: #EF4A09;
    --head: #241301;
    --main-text: #5B4E41;
    --accent: #CEB792;
}


#ability-block {
    background-color: #F8F5F3;
    margin-top: 100px;
    position: relative;
}

#ability-block .title_ability {
    color: var(--Head, #241301);
    font-size: 46px;
    font-style: normal;
    font-weight: 700;
    line-height: 120%;
    padding-top: 60px;
    font-family: PT Serif;
}

#ability-block .container {
    top: 0;
    display: flex;
    left: 0;
    right: 0;
    position: relative;
    z-index: 1;
    flex-direction: column;
}

#ability-block .ability_bg {
    max-width: 1125px;
    max-height: 660px;
    margin-left: auto;
    position: absolute;
    right: 0;
    top: 160px;
}

#ability-block .ability_bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}


#ability-block .texts_holder {
    display: flex;
    flex-direction: row;
    max-width: 770px;
    padding-top: 30px;
    background: var(--Card, #FFF);
    border-left: 5px solid var(--Background-dark, #BAA087);
}



#ability-block .texts_block {
    flex-shrink: 0;
    margin-top: 85px;
    box-shadow: 0px 10px 20px 0px rgba(36, 19, 1, 0.05);
    align-items: center;
    max-width: 770px;
    width: fit-content;
    display: flex;
    flex-direction: column;
    gap: 5px;
    transition: 0.5s;
}

#ability-block .count {
    width: 70px;
    height: 63px;
    flex-shrink: 0;
    background-color: var(--Background-dark, #BAA087);
    color: var(--Card, #FFF);
    font-size: 20px;
    font-style: normal;
    font-weight: 700;
    line-height: 120%;
    align-items: center;
    justify-content: center;
    display: flex;
    transition: 0.5s;
}

#ability-block .text {
    color: var(--Head, #241301);
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 130%;
    max-width: 630px;
    padding-left: 30px;
    padding-bottom: 30px;
    padding-right: 40px;
    transition: 0.5s;
}

#ability-block .texts_holder svg {
    display: none;
}

#ability-block .texts_holder:hover svg {
    display: flex;
}

#ability-block .texts_holder:hover svg {
    display: flex;
}

#ability-block .texts_holder:hover .count_wrap {
    display: none;
}

#ability-block .texts_holder:hover {
    background-color: #F8723D;
}

#ability-block .texts_holder:hover {
    border-left: #F8723D;
}

#ability-block .texts_holder:hover .count {
    background-color: #FFF;
}



@media (max-width: 477px) {
    #ability-block .title_ability {
        padding-top: 30px;
        font-size: 40px;
    }
}