OwlCyberSecurity - MANAGER

Edit File: _process.scss

/* Process 1 ---------------------------------- */ 
.process-bg-shape2 {
    @include xxl {
        display: none;
    }
}
.process-card {
    &-wrap {
        margin-bottom: 0px;
        position: relative;
        @include lg {
            margin-bottom: -30px;
        }
        @include md {
            margin-bottom: 0;
        }
        .process-arrow {
            position: absolute;
            right: 0;
            top: 24px;
            transform: translate(50%, 0);
            @include xl {
                width: 110px;
                top: 50px;
            }
            @include lg {
                display: none;
            }
        }
        &:last-child {
            border-right: none;
            .process-arrow {
                display: none;
            }
        }
        &:nth-child(2) {
            .process-card_img {
                transform: rotate(30deg);
                img {
                    transform: rotate(-30deg) scale(1.3);
                }
            }
            .process-card_icon {
                right: 80px;
                left: auto;
            }
        }
    }
    text-align: center;
    max-width: 338px;
    margin: 0 auto 0 auto;
    position: relative;
    @include md {
        margin-top: 30px;
    }
    &_img {
        margin-bottom: 37px;
        transform: rotate(-30deg);
        border-radius: 20px;
        display: inline-block;
        overflow: hidden;
        width: 170px;
        height: 170px;
        img {
            transform: rotate(30deg) scale(1.3);
        }
    }
    &_icon {
        width: 80px;
        height: 80px;
        line-height: 72px;
        border-radius: 50%;
        border: 4px solid $white-color;
        background: $theme-color;
        position: absolute;
        top: -30px;
        left: 80px;
        img {
            transition: 0.4s;
        }
    }
    &_title {
        font-size: 22px;
        font-weight: 600;
        margin-bottom: 15px;
    }
    &_text {
        margin-bottom: -0.5em;
    }
    &:hover {
        .process-card_icon {
            img {
                transform: rotateY(180deg);
            }
        }
    }
}
/* Process 2 ---------------------------------- */ 
.process-card2 {
    &-wrap {
        border-right: 1px dashed #D0D7E3;
        margin-bottom: 40px;
        &:last-child {
            border-right: none;
        }
    }
    text-align: center;
    max-width: 290px;
    margin: 0 auto 0 auto;
    &_img {
        margin-bottom: 25px;
        img {
            border-radius: 999px;
        }
    }
    &_title {
        font-size: 22px;
        font-weight: 600;
        margin-bottom: 15px;
    }
    &_text {
        margin-bottom: -0.5em;
    }
}

@include md {
    .process-card2 {
        &-wrap {
            &:nth-child(2n) {
                border-right: none;
            }
        }
        &_img {
            margin-bottom: 20px;
        }
    }
}