.work-process-section {
    position: relative;

    .top-shape {
        position: absolute;
        top: 0;
        left: 0;
    }
}

.work-process-section-2 {
    position: relative;

    .top-shape {
        position: absolute;
        top: 0;
        left: 0;
    }
}

.process-work-wrapper {
    position: relative;
    z-index: 9;

    .work-process-items {
        position: relative;

        .line-shape {
            position: absolute;
            top: 12%;
            right: -55%;

            @include breakpoint (max-xl){
                display: none;
            }
        }

        .line-shape-2 {
            position: absolute;
            top: -32%;
            right: -55%;

            @include breakpoint (max-xl){
                display: none;
            }
        }

        .icon {
            width: 100px;
            height: 100px;
            line-height: 105px;
            text-align: center;
            margin: 0 auto;
            font-size: 40px;
            color: $white;
        }

        .content {
            margin-top: 30px;

            h4 {
                margin-bottom: 5px;
            }

            &.style-two {
                margin-top: 0;
                margin-bottom: 30px;
            }
        }

        &.style-2 {
            margin-top: 100px;

            @include breakpoint (max-xl){
                margin-top: 0;
            }
        }
    }

    &.style-padding {
        padding-top: 90px;
    }
}

.feature-value-section {
    position: relative;
    margin-top: -55px;

    .shape-1 {
        position: absolute;
        top: 20%;
        left: 0;
        animation: rounded 5s linear infinite;
        
        @include breakpoint (max-xxl){
            display: none;
        }
        
    }

    .shape-2 {
        position: absolute;
        top: 20%;
        right: 10px;

        @include breakpoint (max-xl){
            display: none;
        }
    }
}

.feature-value-items {
    margin-top: 30px;
    position: relative;
    z-index: 9;

    @include breakpoint (max-xxl){
        margin-bottom: -50px;
    }

    @include breakpoint (max-xl){
        margin-bottom: 0;
    }

    .value-icon-items {
        @include flex;
        gap: 20px;

        @include breakpoint (max-sm){
            flex-wrap: wrap;
            justify-content: center;
            text-align: center;
        }

        &:not(:last-child){
            margin-bottom: 30px;
        }

        .icon {
            width: 90px;
            height: 90px;
            line-height: 100px;
            text-align: center;
            border-radius: 8px;
            background: rgba(243, 159, 95, 0.2);
            border-radius: 8px;
            flex-basis: 40%;
            font-size: 40px;
            color: $theme-color;

            &.color-2 {
                background: rgba(88, 102, 235, 0.15);
                color: #5866EB;
            }

            &.color-3 {
                background: rgba(57, 192, 250, 0.15);
                color: #39C0FA;
            }

            &.color-4 {
                background: rgba(249, 37, 150, 0.15);
                color: #F92596;
            }
        }

        .content {
            h5 {
                margin-bottom: 10px;
            }
        }

        &.style-2 {
            .content {
                text-align: right;

                @include breakpoint (max-xl){
                    text-align: left;
                }

                 @include breakpoint (max-sm){
                    text-align: center;
                }
            }
        }
    }

    .feature-value-image {
        max-width: 290px;
        text-align: center;
        margin: 0 auto -120px;
        position: relative;
        z-index: 9;
        @include breakpoint (max-xl){
            margin: 0 auto 0;
        }

        img {
            @include imgw;
        }

        .value-shape {
            position: absolute;
            bottom: 0;
            left: -25px;
            z-index: -1;
            right: -30px;
            max-width: 340px;

            img {
                @include imgw;
            }
        }
    }
}

.counter-section {
    position: relative;
    z-index: 9;
    padding: 90px 0 120px;
    margin-bottom: -33px;

    @include breakpoint (max-xl){
        margin-bottom: -27px;
    }

    .counter-bg {
        position: absolute;
        top: -16px;
        left: 0;
        background-color: $theme-color-2;
        transition: all 500ms ease;
        mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1920 325"><path d="M0 325V29.4378V5.47337C38.0396 17.4556 143.614 5.47336 277.289 5.47337C423 5.47339 552.217 -6.50878 664 5.47347C806.815 23.114 1257.86 5.47337 1341 5.47337C1472 5.47337 1746.15 -6.84172 1920 5.47337V322.004C1750 298.138 1254 309.122 1138 309.122C885.21 309.122 608 314.114 396 309.122C69.2597 293.145 130 322.004 0 325Z" /></svg>');
        mask-repeat: no-repeat;
        mask-position: center center;
        mask-size: cover;
        width: 100%;
        height: 100%;
        z-index: -1;

        @include breakpoint (max-xl){
            top: 0;
        }
    }

    .line-shape {
        position: absolute;
        left: 0;
        bottom: 50px;

        @include breakpoint (max-xl){
            display: none;
        }
    }

    .box-shape {
        position: absolute;
        right: 0;
        bottom: 0;

        @include breakpoint (max-xl){
            display: none;
        }
    }
}

.counter-section-2 {
    background-color: $theme-color-2;
    background-position: top !important;

    @include breakpoint (max-md){
        background-size: initial !important;
    }
}

.counter-wrapper {

    .counter-items {
        text-align: center;
        border-right: 1px dotted $white;

        @include breakpoint (max-xl){
            border: none;
        }
    
        .content {
            margin-top: 15px;
    
            h2 {
                color: $white;
                margin-bottom: 5px;
            }
    
            p {
                color: $white;
                font-weight: 600;
                font-size: 18px;
            }
        }
    }

    &.style-2 {
        padding: 120px 0 80px;
    }
}

.certificate-image {
    img {
        @include imgw;
        border: 1px solid $border-color;
        border-radius: 20px;
    }
}

.feature-items {
    position: relative;
    z-index: 9;

    .bg-1 {
        position: absolute;
        top: 34%;
        left: 50%;
        transform: translate(-50%,-50%);
    }
    
    .feature-image {
        margin: 0 auto 20px;
        text-align: center;
        mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 270 270"><path fill-rule="evenodd" clip-rule="evenodd" d="M118.5 3.81329C145.5 3.81329 203.5 -11.1868 227.825 18.3132C252.409 42.9931 267.481 77.1202 269.793 113.268C272.216 151.147 253.052 186.574 227.825 213.041C202.968 239.12 170.036 253.795 135.37 254.298C100.213 254.809 65.6677 242.141 40.3938 215.762C14.7101 188.955 -2.27414 151.731 0.247487 113.268C2.63995 76.7756 42.1193 60.1621 67 35.3133C90.5999 11.7436 86.3466 3.40666 118.5 3.81329Z" /></svg>');
        mask-repeat: no-repeat;
        mask-position: center center;
        mask-size: cover;
        max-width: 270px;
        position: relative;
        z-index: 9;

        img {
            @include imgw;
        }
    }
}