9B534B8686E580E0E01768F00155B461

at path：ROOT / wp-content / themes / kadu / assets / scss / components / _services.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

📄_services.scss

/* 
    services-1-start
*/

.kd-services-1 {
    &-scn-title {
        .disc {
            max-width: 400px;
        }
    }

&-left {
        @media #{$md,$xs} {
            margin-bottom: 50px;
        }
    }

&-card-wrap {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 20px;

@media #{$xs} {
            grid-template-columns: 1fr;
        }

@media #{$sm} {
            grid-template-columns: 1fr 1fr;
        }

.gird-col-2 {
            padding-top: 50px;

@media #{$xs} {
                padding-top: 0px;
            }

@media #{$sm} {
                padding-top: 50px;
            }
        }
    }

&-card {
        border-style: solid;
        border-width: 1px;
        border-color: rgb(238, 238, 238);
        border-radius: 20px;
        padding: 50px  60px;
        margin-bottom: 20px;
        box-shadow: 0px 0px 40px 0px rgba(94, 92, 154, 0.06);
        background-color: #fff;

@media #{$xl} {
            padding: 40px  30px;
        }

@media #{$lg,$md,$xs} {
            padding: 40px  20px;
        }

.icon {
            width: 70px;
            margin-bottom: 21px;
        }

.title {
            font-size: 26px;
            margin-bottom: 16px;
            transition: .2s var(--cube-1);

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

&:hover {
                color: var(--kd-clr-sd-1);
                letter-spacing: .3px;
            }
        }
        
        .disc {
            font-size: 17px;
            line-height: 27px;
        }

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

/* 
    services-1-end
*/

/* 
    services-2-start
*/
.kd-services-2 {

&-content {
        margin-bottom: 30px;
    }

&-scn {
        &-btn {
            display: inline-block;
            font-family: var(--kd-font-pr-1);
            text-transform: capitalize;
            font-weight: 800;
            color: var(--kd-clr-h-1);
            font-size: 18px;
            transition: .2s var(--cube-1);

i {
                margin-left: 3px;
                transition: .2s var(--cube-1);
            }

&:hover {
                color: var(--kd-clr-sd-1);

i {
                    transform: translateX(3px);
                }
            }
        }
    }

&-card {
        background: #fff;
        box-shadow: 0px 7px 46px 0px rgba(32, 28, 29, 0.03);
        border-radius: 20px;
        padding: 50px 50px;
        padding-bottom: 35px;
        margin-bottom: 30px;

@media #{$xl,$lg,$md,$xs} {
            padding: 50px 30px;
        }
    
        .icon-wrap {
            gap: 20px;
            margin-bottom: 32px;
        }
    
        .icon {
            width: 62px;
        }
    
        .course {
            display: inline-block;
            font-size: 14px;
            color: #282828;
            background: #f3fffe;
            border-radius: 21px;
            padding: 15px 26px;
        }
    
        .card-title {
            font-size: 23px;
            transition: .2s var(--cube-1);
            transform-origin: left;
            margin-bottom: 6px;
    
            &:hover {
                color: var(--kd-clr-sd-1);
                transform: scaleX(103%);
            }
        }
    
        .disc {
            font-size: 18px;
            font-weight: 500;
            line-height: 26px;
        }
    
        &:hover {
            .icon {
                animation: 1s kd-jello;
            }
        }
        
    }
    
}

/* 
    services-2-end
*/

/* 
    services-3-start
*/
.kd-services-3 {
    &-item {
        border-radius: 25px;
        box-shadow: 0px 7px 54px 0px rgba(32, 28, 29, 0.05);
        text-align: center;
        padding:  60px 30px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;

@media #{$xl,$lg,$md,$xs} {
            padding:  60px 20px;
        }

.icon {
            width: 80px;
            margin-left: auto;
            margin-right: auto;
            margin-bottom: 42px;

}

.title {
            font-size: 24px;
            transition: .2s var(--cube-1);
            margin-bottom: 20px;

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

&:hover {
                color: var(--kd-clr-sd-1);
                transform: scaleX(102%);
            }
        }

.disc {
            font-size: 17px;
            line-height: 26px;
            color: #797a84;
        }

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

&-slider {
        position: relative;
        z-index: 1;

.swiper-container {
            margin-right: -40px;
            margin-left: -40px;
            padding-top: 20px;
            padding-left: 40px;
            padding-right: 40px;
            padding-bottom: 40px;

.swiper-slide {
                transition: 1s;
                &:is(.swiper-slide-prev) {
                    opacity: 0;
                }
            }
        }

}

&-slider-btn {
        @media #{$xl,$lg,$md,$xs} {
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 30px;
        }

.kd-slider-btn-1 {
            background: #363539;
            color: #fff;

.icon-1 {
                color: #fff;
            }

.icon-2 {
                color: #fff;
            }

&:hover {
                background: var(--kd-clr-sd-1);
            }
        }

.kd_services_3_slider_next {
            position: absolute;
            right: -85px;
            top: 50%;
            transform: translateY(-50%);
            z-index: 1;
            display: inline-block;

@media #{$xl,$lg,$md,$xs} {
                position: unset;
                transform: unset;
            }
        }
        .kd_services_3_slider_prev {
            position: absolute;
            left: -85px;
            top: 50%;
            transform: translateY(-50%);
            z-index: 1;
            display: inline-block;
            
            @media #{$xl,$lg,$md,$xs} {
                position: unset;
                transform: unset;
            }
        }
    }
    
}

/* 
    services-3-end
*/

/* 
    services-4-start
*/

.kd-services-4 {

&-area {
        position: relative;
    }

&-il-1 {
        position: absolute;
        right: 30px;
        top: 100px;
        z-index: -1;

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

&-il-2 {
        position: absolute;
        bottom: 90px;
        left: 0;
        z-index: -1;

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

&-scn-title {
        gap: 30px;

@media #{$md,$xs} {
            flex-wrap: wrap;
            gap: 0px;
            margin-bottom: 30px;
        }

.scn-disc {
            max-width: 520px;
         
        }
    }

&-card {
        height: 495px;
        border-radius: 5px;
        overflow: hidden;
        position: relative;
        z-index: 1;
        background: #152028;
        border: 1px solid #1E2B33;
        transition: .5s ease-in-out;

@media #{$xs} {
            height: 425px;
        }

.card-img {
            opacity: 0%;
            transition: .5s ease-in-out;
            width: 100%;
            height: 100%;
        }

.card-icon {
            width: 84px;
            height: 84px;
            background: var(--kd-clr-pr-4);
            border-radius: 5px;
            font-size: 40px;
            color: #fff;
            position: absolute;
            top: -50px;
            left: 40px;
            opacity: 0;
            transition: .5s var(--cube-1);
        }

.card-content {
            position: absolute;
            top: 0;
            left: 0;
            padding: 50px 40px;
            width: 100%;
            transition: .4s ease-in-out;

@media #{$xs} {
                padding: 50px 20px;
            }
        }
        
        .card-title {
            font-size: 30px;
            line-height: 1.2;
            margin-bottom: 22px;
            transition: .2s ease-in-out;

@media #{$lg} {
                font-size: 24px;
            }

@media #{$md,$xs} {
                font-size: 24px;
            }
            &:hover {
                color: var(--kd-clr-pr-4);
            }
        }

.card-number {
            font-size: 140px;
            line-height: 1;
            position: absolute;
            right: 30px;
            bottom: 0;
            font-weight: 900;
            color: #1E2B33;
            transition: .4s ease-in-out;

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

&:hover {
            border-color: var(--kd-clr-pr-4);

.card-icon {
                top: 50px;
                opacity: 1;
            }

.card-img {
                opacity: 30%;
            }

.card-content {
                top: 200px;

@media #{$xs} {
                    top: 150px;
                }
            }

.card-number {
                bottom: -100px;
                opacity: 0;
            }
        }
    }
    
    &-slider {
        margin-right: -350px;
        @media #{$xxl,$xl,$lg,$md,$xs} {
            margin-right: 0px;
        }

.swiper-container {
            .swiper-wrapper {
                .swiper-slide {
                    transition: .5s;
                    &:nth-child(odd) {
                        margin-top: 60px;
                    }
                }
            }
        }
    }

&-slider-btn {
        gap: 30px;
    }
}

/* 
    services-4-end
*/