@use "../../utils" as *;
.coaching{
    &__item{
        gap: 20px;
        @media #{$xs} {
            flex-direction: column;
            align-items: start !important;
        }
        &-midea{
            width: 100%;
            img{
                width: 100%;
                height: 100%;
                border-top-left-radius: 20px;
                border-bottom-left-radius: 20px;
                @media #{$xs} {
                    border-top-left-radius: 20px;
                    border-top-right-radius: 20px;
                    border-bottom-left-radius: 0;
                    border-bottom-right-radius: 0;
                }
            }
        }
        &-content{
            &-title{
                font-family: var(--rr-ff-heading);
                color: var(--rr-heading-primary);
                font-weight: var(--rr-fw-sbold);
                line-height: var(--rr-lh-h5);
                font-size: 18px;
                font-style: normal;
            }
            p{
                font-family: var(--rr-ff-body);
                color: var(--rr-text-body);
                font-weight: var(--rr-fw-regular);
                line-height: var(--rr-lh-h5);
                font-size: 15px;
                font-style: normal;
                margin-bottom: 30px;
            }
            a{
                font-family: var(--rr-ff-heading);
                line-height: var(--rr-lh-h5);
                font-weight: var(--rr-fw-sbold);
                color: var(--rr-theme-primary);
                font-style: normal;
                font-size: 14px;
                display: flex;
                align-items: center;
                gap: 10px;
                
                i{
                    transform: rotate(-45deg);
                    transition: .3s;
                }

                &:hover{
                    color: var(--rr-heading-primary);

                    i{
                        transform: rotate(1deg);
                    }
                }
            }
        }
    }

    &__bottom-btn{
        margin-top: 50px;
        display: flex;
        justify-content: center;
        position: relative;
        align-items: center;
        margin-bottom: 30px;
        &::before{
            background-color: #e3dbd8;
            content: "";
            width: 550px;
            height: 1px;
            position: absolute;
            top: 50%;
            left: 0;
            transform: translateY(-50%);
            z-index: 1;
        }

        &::after{
            background-color: #e3dbd8;
            content: "";
            width: 550px;
            height: 1px;
            position: absolute;
            top: 50%;
            right: 0;
            transform: translate(0, -50%);
            z-index: 1;
        }
    }
}