/*==============================================
    Process One (Updated for Font Awesome + 6 Steps)
===============================================*/

.work-process-one {
    position: relative;
    display: block;
    padding: 120px 0 60px;
    z-index: 1;
}

/* Background Shapes */

.work-process-one .shape1 {
    position: absolute;
    left: 0;
    bottom: 100px;
    z-index: -1;
}

.work-process-one .shape2 {
    position: absolute;
    top: 45px;
    right: -30px;
    z-index: -1;
}

.work-process-one .shape3 {
    position: absolute;
    top: 205px;
    right: -30px;
    z-index: -1;
}


/* Single Step Box */

.work-process-one__single {
    position: relative;
    display: block;
    margin-bottom: 40px;
    z-index: 1;
    text-align: center;
}


/* Zig-Zag Connector Lines */

.work-process-one__single .shape4,
.work-process-one__single .shape5,
.work-process-one__single .shape6 {
    position: absolute;
    right: -5px;
    height: 260px;
    border: 2px dashed var(--donatix-secondary);
}

.work-process-one__single .shape4 {
    bottom: 95px;
    transform: rotate(53deg);
}

.work-process-one__single .shape5 {
    top: 50px;
    transform: rotate(-53deg);
}

.work-process-one__single .shape6 {
    bottom: 80px;
    transform: rotate(53deg);
}


/* Step Number */

.work-process-one__single-count-text {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 56px;
    height: 56px;

    margin: 0 auto 22px;

    border-top: 5px solid var(--donatix-base);
    border-bottom-left-radius: 28px;
    border-bottom-right-radius: 28px;

    background: #fff;
    box-shadow: 0 4px 20px rgba(0,0,0,0.05);
}

.work-process-one__single-count-text h2 {
    font-size: 24px;
    font-weight: 700;
}


/* Title */

.work-process-one__single h2 {
    font-size: 22px;
    line-height: 32px;
    font-weight: 700;
    margin-bottom: 15px;
    color: var(--donatix-black);
}


/* Hexagon Icon Wrapper */

.work-process-one__single-icon {
    position: relative;

    display: flex;
    align-items: center;
    justify-content: center;

    width: 200px;
    height: 205px;

    margin: 0 auto;
    z-index: 1;
}


/* Hexagon Background */

.work-process-one__single-icon-bg {
    position: absolute;
    inset: 0;

    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;

    z-index: -1;
}


/* Icon */

.work-process-one__single-icon-inner i {
    font-size: 60px;
    line-height: 205px;
    color: var(--donatix-black);

    transition: transform 0.5s ease;
}


/* Hover Effect */

.work-process-one__single:hover
.work-process-one__single-icon-inner i {
    transform: rotateY(180deg);
}


/* Alternate Style (Zig Zag Effect) */

.work-process-one__single.style2 {
    margin-top: -25px;
}

.work-process-one__single.style2
.work-process-one__single-icon {
    margin-top: 0;
}

.work-process-one__single.style2
.work-process-one__single-count-text {
    margin: -20px auto 22px;
}


/* Responsive */

@media (max-width: 1199px) {

    .work-process-one__single-icon {
        width: 180px;
        height: 185px;
    }

    .work-process-one__single-icon-inner i {
        line-height: 185px;
        font-size: 55px;
    }

}

@media (max-width: 767px) {

    /* Remove Zig-Zag on Mobile */
    .work-process-one__single .shape4,
    .work-process-one__single .shape5,
    .work-process-one__single .shape6 {
        display: none;
    }

    .work-process-one__single.style2 {
        margin-top: 0;
    }

}
/* =====================================
   Extra Connectors for 6 Steps
===================================== */

.work-process-one__single:nth-child(5) .shape4 {
    bottom: 90px;
    transform: rotate(53deg);
}

.work-process-one__single:nth-child(6) .shape5 {
    top: 45px;
    transform: rotate(-53deg);
}


/* =====================================
   Icon Color Hover Effect
===================================== */

/* Default = Green */
.work-process-one__single-icon-inner i {
    color: #28a745 !important;
}

/* Hover = Theme Red */
.work-process-one__single:hover
.work-process-one__single-icon-inner i {
    color: var(--donatix-base) !important;
}