/* Counter 1  start ---------------------------------- */
.counter-area {
    position: relative;
    background-color: $theme-color;
    z-index: 2;

    .counter-shape {
        position: absolute;
        top: -60px;
        left: 0;
        width: 100%;
        height: 70px;
        background-size: auto;
        background-repeat: repeat-x;
        background-position: top left;
        background-color: $theme-color;
        z-index: 5;
        mask-size: auto;
        mask-repeat: repeat-x;
    }
}

.counter-sec {
    padding: 54px 0 120px 0;

    @include lg {
        padding: 20px 0 80px 0;
    }

    @include md {
        padding: 0px 0 60px 0;
    }

    @include xs {
        padding: 0 0 40px 0;
    }
}


.counter-card {
    display: flex;
    justify-content: flex-start;
    gap: 10px;
    transition: all 0.6s ease-in-out;

    &.style2 {
        gap: 20px;
    }

    @include lg {
        padding: 30px 0;
        display: block;
        text-align: center;
        border-right: 1px dashed rgba(255, 255, 255, 0.4);
        border-bottom: 1px dashed rgba(255, 255, 255, 0.4);
    }

    @include xs {
        border-right: 1px dashed transparent;
    }

    &-wrap {
        &:nth-child(2) {
            .counter-card {
                border-right: 1px dashed transparent;
            }
        }

        &:nth-child(3) {
            .counter-card {
                border-bottom: 1px dashed transparent;

                @include xs {
                    border-bottom: 1px dashed rgba(255, 255, 255, 0.4);
                }
            }
        }

        &:last-child {
            .counter-card {
                border-right: 1px dashed transparent;
                border-bottom: 1px dashed transparent;
            }
        }
    }

    @include xs {
        display: block;
        margin: auto;
        text-align: center;
    }

    .icon {
        min-width: 63px;
        transition: all 0.6s ease-in-out;

        @include lg {
            margin-bottom: 20px;
        }

        .svg-img path {
            fill-opacity: 1;
            stroke: $white-color;
            fill: $white-color;
            stroke-width: 1;
            stroke-dasharray: 2500;
            stroke-dashoffset: 2500;
        }
    }

    .box-number {
        font-size: 54px;
        font-weight: 700;
        line-height: 54px;
        color: $title-color;
        margin-bottom: 0px;
        margin-top: -0.5rem;
    }

    .box-text {
        font-family: $title-font;
        font-size: 20px;
        font-weight: 500;
        line-height: 30px;
    }

    .counter-title {
        margin-bottom: 6px;
        font-size: 20px;

        @include md {
            font-size: 18px;
        }

        @include sm {
            font-size: 20px;
        }
    }

    .counter-text {
        @include md {
            font-size: 16px;
        }
    }

    .media-body {
        flex: 1;
        //max-width: 312px;

        @include xs {
            max-width: 100%;
        }

    }

    @include lg {}

    &:hover {
        .icon {
            path {
                animation: fillAni 7s ease-in-out;
                stroke: $white-color;
                fill: $white-color;
            }
        }
    }
}

// counter card  end --------------------------------

/* counter card  start --------------------------------*/
.counter-area2 {
    background-color: $theme-color;
    padding: 80px 0;

    @include lg {
        padding: 50px 0;
    }
}