@use "../../helpers/animation" as *;
@use "../../helpers/extend" as *;


.mainHeading {
    padding-bottom: 8vh;
    h2 {
        color: var(--blackY);
        &::after , &::before{
            @extend %A_B;
        }
        &::before {
            width: 90%;
            height: 1.5px;
            background-color: var(--hover-main);
            bottom: -2.5px;
            opacity: .7;
            @extend %centerX;
        }

        &::after {
            @extend %centerX;
            width: 50px;
            height: 5px;
            background-color: var(--hover-main);
            bottom: -4px;
            border-radius: 12px;
            animation: MovingLine 10s cubic-bezier(.84, .36, .23, .85) infinite;
        }
    }
    p{
        max-width: 340px;
        margin-inline: auto;
        color: var(--blackY);
        opacity: .7;
        // text-wrap: balance
    }

}

@include movingLine(MovingLine);