9B534B8686E580E0E01768F00155B461

at path：ROOT / wp-content / themes / kadu / assets / scss / components / _counter.scss

run：R W Run

_about.scss

11.46 KB

2024-06-07 08:38:52

R W Run

_animation.scss

3.86 KB

2024-06-02 09:44:42

R W Run

_back-to-top.scss

1.11 KB

2024-04-25 09:34:42

R W Run

_blog-page.scss

26.83 KB

2024-06-11 06:51:22

R W Run

_blog.scss

11.77 KB

2024-06-06 04:16:02

R W Run

_breadcrumb.scss

2.53 KB

2024-06-12 03:56:04

R W Run

_button.scss

10.66 KB

2024-06-06 11:59:28

R W Run

_choose-us.scss

7.76 KB

2024-06-06 11:53:36

R W Run

_client.scss

4.37 KB

2024-05-28 11:54:48

R W Run

_contact-us.scss

3.81 KB

2024-06-11 08:55:10

R W Run

_counter.scss

3.1 KB

2024-05-30 05:51:10

R W Run

_course-details.scss

29.48 KB

2024-06-09 06:18:52

R W Run

_course.scss

34.5 KB

2024-06-04 06:49:00

R W Run

_cta.scss

6.27 KB

2024-06-06 05:12:08

R W Run

_error.scss

2.65 KB

2024-06-11 10:20:46

R W Run

_event-details.scss

9.96 KB

2024-06-10 05:05:32

R W Run

_event.scss

7.68 KB

2024-06-09 11:06:54

R W Run

_faq.scss

1.27 KB

2024-05-26 10:40:32

R W Run

_footer.scss

18.39 KB

2024-06-06 08:53:18

R W Run

_full-page-nav.scss

4.43 KB

2024-06-11 12:42:00

R W Run

_gallery.scss

3.55 KB

2024-06-10 06:49:40

R W Run

_header.scss

17.28 KB

2024-06-11 11:02:34

R W Run

_hero.scss

18.73 KB

2024-06-11 10:40:22

R W Run

_instructor-details.scss

5.15 KB

2024-06-09 09:15:04

R W Run

_popular-category.scss

12.24 KB

2024-06-06 09:59:08

R W Run

_preloader.scss

621 By

2024-05-28 04:48:48

R W Run

_price.scss

9.83 KB

2024-05-30 05:52:22

R W Run

_privacy-page.scss

1.33 KB

2024-06-11 09:15:36

R W Run

_search.scss

3.03 KB

2024-06-11 10:42:44

R W Run

_services.scss

10.43 KB

2024-06-03 04:06:10

R W Run

_team.scss

9.23 KB

2024-06-09 06:56:08

R W Run

_testimonial.scss

12.14 KB

2024-06-06 10:34:22

R W Run

_title.scss

2.9 KB

2024-06-02 12:32:10

R W Run

_video-course.scss

4.96 KB

2024-05-30 10:54:24

R W Run

error_log

📄_counter.scss

/* 
    counter-4-start
*/
.kd-counter-4 {

&-area {
        margin-top: -70px;
    }

&-item-wrap {
        background: #ef9602;
        padding: 53px 70px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 70px;
        border-radius: 95px;
        position: relative;
        z-index: 1;
        overflow: hidden;

@media #{$xl} {
            padding: 53px 40px;
            gap: 50px;
        }

@media #{$lg} {
            padding: 53px 30px;
            gap: 10px;
        }

@media #{$md,$xs} {
            padding: 53px 40px;
            gap: 40px;
            flex-wrap: wrap;
        }

&-shape-1 {
            position: absolute;
            top: 0;
            left: 0;
            // width: 29%;
            width: 0%;
            height: 100%;
            background: #f69b04;
            border-radius: 95px;
            z-index: -1;
            transition: 1s var(--cube-1);

@media #{$md,$xs} {
                display: none;
            }
        }

&-shape-2 {
            position: absolute;
            top: 0;
            left: 0;
            width: 0%;
            // width: 52%;
            height: 100%;
            background: #e79103;
            border-radius: 95px;
            z-index: -2;
            transition: 1s var(--cube-1);

@media #{$md,$xs} {
                display: none;
            }
        }

&-shape-3 {
            position: absolute;
            top: 0;
            left: 0;
            width: 0%;
            // width: 76%;
            height: 100%;
            background: #de8b00;
            border-radius: 95px;
            z-index: -3;
            transition: 1s var(--cube-1);

@media #{$md,$xs} {
                display: none;
            }
        }

&:is(.active) {
            .kd-counter-4-item-wrap-shape-1 {
                width: 29%;
            }
            .kd-counter-4-item-wrap-shape-2 {
                  width: 52%;
            }
            .kd-counter-4-item-wrap-shape-3 {
                  width: 76%;
            }
        }
    }

&-item {
        display: flex;
        gap: 20px;

.icon {
            width: 52px;
            height: 52px;
            background: #082d3d;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #fff;
            font-size: 22px;
            flex: 0 0 auto;
        }

.item-number {
            font-size: 60px;
            line-height: 1;
            color: #082d3d;
            margin-bottom: 5px;

@media #{$lg,$md,$xs} {
                font-size: 45px;
            }
        }

.item-title {
            font-size: 19px;
            line-height: 20px;
        }

&:hover {
            .icon {
                animation: 1s kd-jello;
            }
        }
        
    }
    
}

/* 
    counter-4-end
*/