9B534B8686E580E0E01768F00155B461

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

📄_hero.scss

/* 
    hero-1-start
*/

.kd-hero-1 {

&-area {
        position: relative;
        z-index: 1;
        padding-top: 260px;

@media #{$md,$xs} {
            background: #005E4F;
        }
    }

&-bg-img {
        position: absolute;
        top: 0;
        left: 0;
        z-index: -1;
        overflow: hidden;
        width: 100%;
        height: 100%;

img {
            width: 100%;
            height: 100%;
            object-position: bottom;
        }
    }

&-bg-il-2 {
        position: absolute;
        right: -80px;
        top: 50%;

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

&-bg-il-1 {
        position: absolute;
        left: -370px;
        top: 50%;

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

&-item {

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

.kd-subtitle-1 {
                transition: 1s var(--cube-2);
                transform: translateY(-50px);
                opacity: 0;
            }

.title {
                font-size: 75px;
                line-height: 1.13;
                color: #fff;
                margin-bottom: 14px;
                text-transform: unset !important;
                letter-spacing: .5px !important;

@media #{$xl} {
                    font-size: 70px;
                }

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

@media #{$xs} {
                    font-size: 40px;
                }

@media #{$sm} {
                    font-size: 55px;
                }
                div {
                    letter-spacing: 0px !important;
                }

}

.disc {
                max-width: 560px;
                margin-bottom: 42px;
                clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
                transition: 2s var(--cube-1);
            }

.btn-wrap {
                transition: 1s var(--cube-1);
                transform: translateY(-50px);
                opacity: 0;
                transition-delay: 0s;
            }
        }

&-img {
            position: relative;
            z-index: 1;
            margin-left: -50px;

@media #{$lg,$md,$xs} {
                margin-left: 0px;
            }

&-1 {
                max-width: 465px;
                height: 600px;
                border-radius: 0 0 140px 140px;

@media #{$xs} {
                    height: 100%;
                }

img {
                    transform: translateY(100%);
                    transition: 1s ease-in-out;
                }
            }
            &-2 {
                max-width: 435px;
                height: 435px;
                border-radius: 50%;
                position: absolute;
                top: 50px;
                right: 35px;
                z-index: -1;

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

&::after {
                    content: "";
                    width: 100%;
                    height: 100%;
                    background: var(--kd-clr-sd-1);
                    position: absolute;
                    top: 0;
                    left: 0;
                    opacity: 1;
                    mix-blend-mode: multiply;
                }

img {
                    transform: scale(0);
                    transition: 1s var(--cube-1);
                    border-radius: 50%;
                }
            }

&-il-1 {
                position: absolute;
                right: 0px;
                top: 70px;
                width: 70%;
                z-index: -2;
                transform: translate(-40px, -50px);
                opacity: 0;
                transition: 1s var(--cube-1);

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

&-il-2 {
                position: absolute;
                bottom: 0px;
                left: 50px;
                width: 70%;
                z-index: -2;
                transform: rotate(-100deg);
                transition: 1s var(--cube-1);
                opacity: 0;

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

&-il-3 {
                position: absolute;
                left: -210px;
                bottom: 10px;
            }

&-il-4 {
                position: absolute;
                top: 0;
                right: 12%;

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

&-il-5 {
                position: absolute;
                right: 100px;
                bottom: 30px;

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

&-bottom {
        margin-left: -200px;

@media #{$xxxl,$xxl,$xl,$lg,$md,$xs} {
            margin-left: 0;
        }
    }

&-social {
        gap: 10px 40px;

.link {
            position: relative;
            z-index: 1;
            transition: 400ms var(--cube-1);
            &::after {
                content: "";
                width: 0%;
                height: 1px;
                background-color: #fff;
                position: absolute;
                left: auto;
                right: 0;
                top: 50%;
                transform: translateY(-50%);
                transition: 400ms var(--cube-1);
            }

&:hover {
                transform: translateX(3px);
                color: var(--kd-clr-sd-1);
                &::after {
                    width: 100%;
                    left: 0;
                    right: auto;
                }
            }
        }
    }

&-slider {
        margin-right: -35px;
        position: relative;
        z-index: 1;

@media #{$xxl,$xl,$lg,$md,$xs} {
            margin-right: 0px;
        }

.swiper-container {
            .swiper-wrapper {
                .swiper-slide {
                    &:is(.swiper-slide-active) {
                        .kd-hero-1-item {
                            &-content {

.kd-subtitle-1 {
                                    opacity: 1;
                                    transform: translateY(0);
                                    transition-delay: 1s;
                                }
                                .disc {
                                    transition-delay: 1s;
                                    clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
                                }

.btn-wrap {
                                    transform: translateY(0);
                                    opacity: 1;
                                    transition-delay: 2s;
                 
                                }
                            }

&-img-1 {
                                img {
                                    transform: translateY(0%);
                                    transition-delay: 1s;
                                }
                            }
                            &-img-2 img {
                                transform: scale(1);
                                transition-delay: 1s;
                            }

&-img-il-2 {
                                transform: rotate(0deg);
                                transition-delay: .5s;
                                opacity: 1;
                            }

&-img-il-1 {
                                transform: translate(0px, 0px);
                                opacity: 1;
                                transition-delay: .5s;
                            }
                        }
                    }
                }
            }
        }
    }

&-slider-btn {
        gap: 40px;
        .slider-btn {
            position: relative;
            z-index: 1;
            transition: 400ms var(--cube-1);
            cursor: pointer;

&::after {
                content: "";
                width: 0%;
                height: 1px;
                background-color: #fff;
                position: absolute;
                left: auto;
                right: 0;
                top: 50%;
                transform: translateY(-50%);
                transition: 400ms var(--cube-1);
            }

}

/* 
    hero-1-end
*/

/* 
    hero-2-start
*/
.kd-hero-2 {
    &-area {
        position: relative;
        z-index: 1;
        padding-top: 260px;
        padding-bottom: 180px;
    }

&-bg-img {
        position: absolute;
        top: 0;
        width: 100%;
        left: 0;
        height: 100%;
        z-index: -1;
    }

&-row {
        display: grid;
        grid-template-columns: 1.2fr 1fr;
        gap: 50px;
        margin-right: -25px;
        align-items: center;

@media #{$lg} {
            margin-right: 0px;
        }

@media #{$md,$xs} {
            margin-right: 0px;
            grid-template-columns: 1fr;
        }
    }

&-content {
        max-width: 590px;

.kd-subtitle-1 {
            margin-bottom: 20px;
        }

.title {
            font-size: 80px;
            line-height: 1.06;
            margin-bottom: 24px;

@media #{$xl} {
                font-size: 70px;
            }

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

@media #{$xs} {
                font-size: 40px;
            }

@media #{$sm} {
                font-size: 50px;
            }
        }

.disc {
            margin-bottom: 47px;
        }
    }

&-img-gird {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 25px;

}

&-img {
        width: 100%;
        height: 260px;
        border-radius: 20px;

&:nth-child(1) {
            border-radius: 130px 0 0 130px;
        }

&:nth-child(4) {
            border-radius: 0 130px  130px 0;
        }
    }
    
}

.kd-hero-2-form {
    background: #fff;
    border-radius: 50px;
    display: grid;
    grid-template-columns: 1.2fr 1fr 1fr 1fr;
    gap: 40px;
    padding: 25px 30px;
    align-items: center;
    margin-right: -230px;
    position: relative;
    z-index: 1;

@media #{$md,$xs} {
        grid-template-columns: 1fr;
        margin-right: 0px;
        gap: 10px;
        max-width: 300px;
    }

.input-item {
        position: relative;

&:not(:last-child) {
            &::after {
                content: "";
                width: 1px;
                height: 50%;
                background-color: #EDEDED;
                position: absolute;
                top: 50%;
                right: -13px;
                transform: translate(-50%, -50%) rotate(-45deg);

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

.icon {
            font-size: 21px;
            display: inline-block;
            color: #364a76;
            position: absolute;
            top: 50%;
            left: 0;
            transform: translateY(-50%);
            line-height: 1;
        }
    }

input {
        border: none;
        outline: none;
        font-family: var(--kd-font-pr-1);
        font-weight: 600;
        color: #364a76;
        font-size: 15px;
        padding-left: 30px;
        width: 100%;
        display: block;
        height: 50px;
    }

.option-selector {
        font-size: 15px;
        font-weight: 600;
        text-transform: capitalize;
        color: #364a76;
        font-family: var(--kd-font-pr-1);
        border: none;
        padding: 0;
        padding-right: 25px;
        height: 50px;
        display: flex;
        align-items: center;
    }

&-btn {
        padding: 16px 45px;
    }
    
}

/* 
    hero-2-end
*/

/* 
    hero-3-start
*/

.kd-hero-3 {
    &-area {
        padding-top: 290px;
        padding-bottom: 260px;
        clip-path: polygon(0 0, 100% 0, 100% 91%, 0% 100%);

@media #{$md,$xs} {
            padding-top: 230px;
        }

}

&-row {
        display: grid;
        grid-template-columns: 1fr 1.3fr;
        gap: 60px;
        align-items: center;

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

@media #{$md,$xs} {
            grid-template-columns: 1fr;
            gap: 50px;
        }
    }

&-content {
        .title {
            font-size: 65px;
            line-height: 1.09;
            color: #fff;
            margin-bottom: 14px;

@media #{$xl} {
                font-size: 56px;
            }

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

@media #{$md} {
                font-size: 52px;
            }

@media #{$xs} {
                font-size: 35px;
            }

@media #{$sm} {
                font-size: 45px;
            }
        }
        .disc {
            color: #afb0b5;
            margin-bottom: 27px;
        }
        .subtitle {
            margin-bottom: 30px;
        }
    }

&-right {
        position: relative;
        z-index: 1;
    }

&-img {
        &-wrap {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 11px;
        }

border-radius: 160px;
        height: 605px;
        @media #{$xs} {
            height: 405px;
        }

&:nth-child(2) {
            height: 520px;
            margin-top: -30px;
            @media #{$xs} {
                height: 355px;
            }
        }
    }
    
    &-il {
        &-1 {
            width: 28%;
            position: absolute;
            left: 36%;
            transform: translateX(-50%);
            top: 32%;