.features_main
    .row
        align-items: stretch
        row-gap: 1.5rem
    .features_cards
        opacity: 0
        animation-duration: 900ms
        animation-fill-mode: forwards
        animation-timing-function: cubic-bezier(0.25, 0.8, 0.25, 1)
        will-change: transform, opacity
        background: #FFFFFF
        box-shadow: 0px 3px 20px #00000014
        border-radius: 20px
        padding: 10px
        height: 100% !important
        display: flex
        flex-direction: column
        @include phone
            margin-bottom: 1.5rem
        @include tablet
            flex-direction: column
            height: 100%
            display: flex
            flex-direction: column
        .features_card_description
            display: flex
            flex: 1
            flex-direction: column
            justify-content: space-evenly
            padding: 0 1rem
            @include tablet
                height: 100% !important
            h3
                font-size: 1.625rem
                font-weight: 600
                color: #000
                line-height: 1.3
            p
                font-size: 1rem
                font-weight: 400
                color: #000000
            a
                text-decoration: none
                transition: .4s ease-in-out
                font-size: 1.375rem
                color: #92288F
                font-weight: 600
                &:hover
                    color: #00000080
        &.tip_distribution
            transform: translateY(40px)
            animation-name: fadeUp
            animation-delay: 0.1s
            margin-bottom: 1.5rem
            .features_card_description
                height: 11rem
        &.sharing_software
            transform: translateX(-40px)
            animation-name: fadeLeft
            animation-delay: 0.25s
            margin-bottom: 1.5rem
            .features_card_description
                height: 11rem
        &.manager_dashboard
            transform: translateX(40px)
            animation-name: fadeRight
            animation-delay: 0.4s
            margin-bottom: 1.5rem
            .features_card_description
                height: 11rem
                @include phone
                    height: auto
        &.pooling_software
            transform: translateY(40px)
            animation-name: fadeUp
            animation-delay: 0.55s
            .features_card_description
                height: 11rem
                margin-top: .8rem
                @include phone
                    height: auto
                @include desktop
                    margin-top: .4rem
        &.payout_options
            transform: scale(0.92)
            animation-name: fadeScale
            animation-delay: 0.7s
            .features_card_description
                height: 11rem
                margin-top: .8rem
                @include phone
                    height: auto
@keyframes fadeUp
    to
        opacity: 1
        transform: translateY(0)

@keyframes fadeLeft
    to
        opacity: 1
        transform: translateX(0)

@keyframes fadeRight
    to
        opacity: 1
        transform: translateX(0)

@keyframes fadeScale
    to
        opacity: 1
        transform: scale(1)
.features_hero
    padding-bottom: 5rem !important
    @include phone
        padding-bottom: 0 !important
    .hero_description
        h1
            margin: 0 auto 2rem auto
            line-height: 1.3
            @include desktop
                font-size: 2.7rem



.features_hero
  height: 100dvh
  margin-bottom: -27rem
  @include phone
    height: 63dvh
  @include desktop
    margin-bottom: -20rem
  @media screen and (min-width: 700px) and (max-width: 768px)
    margin-bottom: -77rem !important
  @include tablet
    margin-bottom: -81rem