@use '../utils' as *;

/*----------------------------------------*/
/*  24. step css start
/*----------------------------------------*/
.it-step {
    &-title {
        font-weight: 600;
        font-size: 22px;
        margin-bottom: 15px;
        transition: .3s;
    }
    &-icon {
        border-radius: 50%;
        display: inline-block;
        height: 80px;
        width: 80px;
        line-height: 80px;
        text-align: center;
        display: inline-block;
        margin-bottom: 35px;
        color: var(--it-common-white);
        background-color: var(--it-theme-1);
        position: relative;
        & svg {
            transition: .3s;
            -webkit-transition: all 300ms ease;
            transition: all 300ms ease;
        }
        & > span {
            position: absolute;
            top: 2%;
            right: -11%;
            display: inline-block;
            font-weight: 500;
            font-size: 13px;
            border-radius: 50%;
            display: inline-block;
            height: 30px;
            width: 30px;
            line-height: 27px;
            text-align: center;
            color: var(--it-common-white);
            background-color: var(--it-theme-1);
            border: 2px solid var(--it-common-white);
        }
    }
    &-item {
        transition: .3s;
        padding: 40px 20px;
        position: relative;
        background-color: var(--it-gray-1);
        &::after {
            position: absolute;
            content: "";
            top: 50%;
            right: -100%;
            width: 100%;
            transform: translateY(-50%);
            border: 1px dashed var(--it-common-black);
            @media #{$xl,$lg,$md,$xs}{
                display: none;
            }
        }
        &::before {
            position: absolute;
            content: "";
            top: 50%;
            right: -36%;
            width: 17px;
            height: 15px;
            transform: translateY(-50%);
            background-color: var(--it-common-black);
            clip-path: polygon(0 0, 0% 100%, 100% 50%);
            @media #{$xl,$lg,$md,$xs}{
                display: none;
            }
            
        }
        & p {
            margin-bottom: 0;
            transition: .3s;
        }
        &:hover {
            & .it-step-icon svg {
                color: var(--it-common-white);
                -webkit-transform: scaleX(-1);
                transform: scaleX(-1);
            }
        }
    }
    &-area {
        & .row{
            [class*="col-"]{
                &:last-child{
                    & .it-step-item {
                        &::after{
                            display: none;
                        }
                        &::before{
                            display: none;
                        }
                    }
                }
            }
        }
    }
    &-bg {
        background-repeat: no-repeat;
        background-size: cover;
        & .it-step-item {
            background-color: var(--it-common-white);
        }
    }
}