.hero_section_tabs {
    --padding-space: 48px;
    background-image: linear-gradient(225deg, #5ba33f, #2ba650, #11703a);
    position: sticky;
    top: calc(var(--nav-bar-height) + calc(var(--padding-space) / 2));
    border-top-left-radius: 50px;
    border-bottom-right-radius: 50px;
    padding: calc(var(--padding-space) / 2);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

    .hero_section_tabs::before {
        content: '';
        background-color: rgb(250, 250, 250, 0.1);
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        width: 100%;
        z-index: 1;
    }

.hero_section_tabs-background {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 0;
}

.hero_section_tabs-items {
    position: relative;
    z-index: 1;
    padding: calc(var(--padding-space) / 2) 0 calc(var(--padding-space) / 2) 8px;
    letter-spacing: 0.1rem;
    text-underline-offset: 3px;
    overflow: hidden;
}

    .hero_section_tabs-items svg {
        min-width: 11px;
        min-height: 20px;
        position: absolute;
        left: 100%;
        top: 50%;
        transform: translate(-100%, -50%);
        transition: transform 0.5s ease, left 0.5s ease;
    }

    .hero_section_tabs-items p {
        color: var(--white-color);
        font-size: 22px;
        font-weight: 300;
        position: absolute;
        left: 0;
        top: 50%;
        width: 100%;
        transform: translateY(-50%);
        padding-right: 32px;
        animation: slideLeft 0.5s ease forwards;
    }

    .hero_section_tabs-items:hover svg {
        left: 0;
        transform: translate(0%, -50%);
    }

    .hero_section_tabs-items:hover p {
        animation: slideRight 0.5s ease forwards;
    }

@keyframes slideRight {
    0% {
        padding-left: 0;
        padding-right: 32px;
        opacity: 1;
    }

    30% {
        padding-right: 32px;
        padding-left: 0;
        opacity: 0;
    }

    60% {
        padding-right: 0;
        padding-left: 32px;
        opacity: 0;
        text-align: right;
    }

    100% {
        padding-right: 0;
        padding-left: 32px;
        right: 0;
        opacity: 1;
        text-align: right;
    }
}

@keyframes slideLeft {
    0% {
        opacity: 1;
        text-align: right;
    }

    30% {
        opacity: 0;
        text-align: right;
    }

    60% {
        opacity: 0;
        text-align: left;
    }

    100% {
        left: 0;
        opacity: 1;
        text-align: left;
    }
}

.hero_section_tabs-items.active p {
    padding-right: 0 !important;
    padding-left: 32px !important;
    right: 0 !important;
    opacity: 1;
    text-align: right !important;
    text-decoration: underline;
    font-weight: 500;
}

.hero_section_tabs-items.active svg {
    left: 0;
    top: calc(var(--padding-space) / 2 + 8px);
    transform: translate(0%, 0%);
}

@media (max-width: 569px) {
    .hero_section_tabs {
        --padding-space: 36px;
        border-top-left-radius: 32px;
        border-bottom-right-radius: 32px;
    }

    .hero_section_tabs-items p {
        font-size: 18px;
    }
}