9B534B8686E580E0E01768F00155B461

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

📄_blog-page.scss

/* 
    blog-page-start
*/

.blog-page-area {

.item-pagination {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        flex-wrap: wrap;
        padding-top: 30px;

.pagination-number , .pagination-btn {
            display: flex;
            justify-content: center;
            align-items: center;
            flex:  0 0 auto;
            width: 54px;
            height: 54px;
            border: 1px solid;
            border-color: rgb(22 29 57 / 15%);
            border-radius: 50%;
            font-size: 20px;
            color: var(--kd-clr-h-1);
            font-weight: 600;
            transition: .4s ease;

@media #{$xs} {
                width: 42px;
                height: 42px;
                font-size: 16px;
            }
        }

.pagination-number {
            &:hover {
                background-color: var(--kd-clr-pr-1);
                color: #fff;
            }
            &:is(.active) {
                background-color: var(--kd-clr-pr-1);
                color: #fff;
            }
        }

.pagination-btn {
            &:hover {
                border-color: var(--kd-clr-pr-1);
                color:  var(--kd-clr-pr-1);
            }
        }
    }
    
}

.blog-page-sidebar {

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

.sidebar-widget {
        border-radius: 10px;
        background: #fff;
        box-shadow: 0 0 20px rgb(0 0 0 / 8%);
        padding: 25px 25px;

@media #{$lg} {
            padding: 25px 15px;
        }

@media #{$xs} {
            padding: 25px 15px;
        }

@media #{$sm} {
            padding: 25px 25px;
        }
        
        &:not(:last-child) {
            margin-bottom: 30px;
        }

.widget-title {
            font-family: var(--kd-font-pr-1);
            text-transform: capitalize;
            font-weight: 600;
            color: var(--kd-clr-h-1);
            position: relative;
            z-index: 1;
            line-height: 1.18;
            display: inline-block;
            padding-bottom: 5px;
            margin-bottom: 25px;

&::after {
                content: "";
                width: 50%;
                height: 3px;
                border-radius: 20px;
                background: var(--kd-clr-pr-1);
                position: absolute;
                left: 0;
                bottom: 0;
            }
        }
    }

.sidebar-search {
        position: relative;
        z-index: 1;
    
        &-input {
            width: 100%;
            height: 60px;
            border-radius: 100px;
            outline: none;
            border: none;
            padding-left: 20px;
            padding-right: 70px;
            background: #F8F8F8;
            font-size: 15px;
            color: var(--kd-clr-p-1);
        }
    
        &-btn {
            position: absolute;
            right: 0;
            top: 0;
            width: 60px;
            height: 100%;
            background: var(--kd-clr-pr-1);
            color: #fff;
            font-size: 18px;
            border-radius: 10px  100px 100px  10px;
            transition: .4s ease;

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

.sidebar-category {
        .inks {
            display: flex;
            align-items: center;
            font-family: var(--kd-font-pr-1);
            font-size: 18px;
            text-transform: capitalize;
            color: var(--kd-clr-h-1);
            font-weight: 500;
            line-height: 26px;
            gap: 8px;
            padding: 17px 25px;
            background: #F8F8F8;
            border-radius: 100px;
            transition: .4s ease;

@media #{$lg} {
                padding: 17px 15px;
            }

@media #{$xs} {
                padding: 17px 15px;
            }

@media #{$sm} {
                padding: 17px 25px;
            }

&:not(:last-child) {
                margin-bottom: 6px;
            }
    
            .count {
                display: inline-block;
                color: var(--kd-clr-pr-1);
                transition: .4s ease;
            }

i {
                margin-left: auto;
                transition: .4s ease;
                color: #fff;

transform: translateX(-20px);
                opacity: 0;
            }

&:hover {
                background: var(--kd-clr-pr-1);
                color: #fff;

.count {
                    color: #fff;
                }

i {
                    opacity: 1;
                    transform: translateX(0);
                }
            }
        }
    }
    
    .sidebar-recent-post {

@media #{$md} {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 0 30px;
        }

@media #{$xs} {
            display: grid;
            grid-template-columns: 1fr;
            gap: 0 30px;
        }

@media #{$sm} {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 0 30px;
        }
    }

.recent-post-item {

&:not(:last-child) {
            margin-bottom: 15px;
            border-bottom: 1px solid #F0F0F0;
            padding-bottom: 15px;
        }

.item-img {
            width: 100%;
            height: 100px;
            border-radius: 5px;
            overflow: hidden;
            position: relative;
            z-index: 1;
            margin-bottom: 12px;

img {
                width: 100%;
                height: 100%;
                object-fit: cover;
            }

.item-date {
                position: absolute;
                left: 10px;
                bottom: 10px;
                display: inline-block;
                background: var(--kd-clr-pr-1);
                font-size: 10px;
                font-family: var(--kd-font-pr-1);
                text-transform: uppercase;
                color: #fff;
                line-height: 18px;
                padding: 3px 10px;
                border-radius: 4px;
            }
        }

.item-link {
            font-family: var(--kd-font-pr-1);
            text-transform: capitalize;
            font-weight: 700;
            font-size: 18px;
            color: var(--kd-clr-h-1);
            line-height: 26px;
            margin-bottom: 0;
            transition: .3s ease;

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

.sidebar-tags {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;

.tags-link {
            display: inline-block;
            font-family: var(--kd-clr-pr-1);
            color: var(--kd-clr-p-1);
            font-size: 16px;
            line-height: 20px;
            background: #F8F8F8;
            border-radius: 30px;
            padding: 7px 20px;
            flex: 0 0 auto;
            transition: .3s ease;

&:hover {
                background-color: var(--kd-clr-pr-1);
                color: #fff;
            }
        }
    }

}

.blog-page-item-2 {
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 0 20px rgb(0 0 0 / 6%);
    margin-bottom: 30px;

.main-img {
        height: 360px;
        overflow: hidden;

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

@media #{$sm} {
            height: 360px;
        }

img {
            width: 100%;
            height: 100%;
            object-fit: cover;

transition: transform 500ms;
            transform: perspective(0px) rotateX(0deg) rotateY(0deg) scaleX(1) scaleY(1);
            transform-origin: center center;
        }
    }

.item-content {
        padding: 30px 35px;
        padding-top: 15px;

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

@media #{$sm} {
            padding: 30px 35px;
            padding-top: 15px;
        }
    }

.meta-author {
        display: flex;
        justify-content: space-between;
        gap: 10px;
        flex-wrap: wrap;
        padding: 10px 0;
        border-bottom: 1px solid #E6E6E8;
        margin-bottom: 22px;

li {
            font-family: var(--kd-font-pr-1);
            color: var(--kd-clr-h-1);
            text-transform: capitalize;
            font-weight: 500;
            font-size: 16px;
            line-height: 30px;
    
            i {
                display: inline-block;
                color: var(--kd-clr-pr-1);
                margin-right: 8px;
            }
        }
    }

.item-title {
        font-family: var(--kd-font-pr-1);
        font-weight: 900;
        font-size: 35px;
        line-height: 1.28;
        margin-bottom: 20px;
        color: var(--kd-clr-h-1);
        transition: .2s linear;

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

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

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

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

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

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

.item-disc {
        font-family: kd-font-pr-1;
        font-size: 20px;
        line-height: 32px;
        color: var(--kd-clr-p-1);
        margin-bottom: 20px;
    }

.item-btn {
        font-family: var(--kd-font-pr-1);
        text-transform: uppercase;
        font-weight: 800;
        color: var(--kd-clr-pr-1);
        line-height: 30px;
        font-size: 18px;
        display: flex;
        align-items: center;
        gap: 10px;
        transition: .4s ease;

i {
            display: inline-flex;
            width: 24px;
            height: 24px;
            background: var(--kd-clr-pr-1);
            border-radius: 50%;
            color: #fff;
            font-size: 14px;
            flex: 0 0 auto;
            justify-content: center;
            align-items: center;
            transition: .4s ease;
        }

&:hover {
            color: var(--kd-clr-sd-1);
            i {
                background: var(--kd-clr-sd-1);  
                color: #000;
            }
        }
    }
    
    &:hover {
        .main-img {
            img {
                transform: perspective(600px) rotateX(0.06deg) rotateY(0deg) scaleX(1.15) scaleY(1.15);
            }
        }
    }

}

.blog-details-content {
    .main-img {
        overflow: hidden;
        height: 445px;
        border-radius: 20px;

@media #{$md} {
            height: 400px;
        }

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

@media #{$sm} {
            height: 325px;
        }

img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
    }
    
    .meta-author {
        display: flex;
        justify-content: space-between;
        gap: 10px;
        flex-wrap: wrap;
        padding: 10px 0;
        border-bottom: 1px solid #E6E6E8;
        margin-bottom: 22px;

.blog-title {
        font-family: var(--kd-font-pr-1);
        font-weight: 900;
        font-size: 35px;
        line-height: 1.28;
        margin-bottom: 20px;
        color: var(--kd-clr-h-1);

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

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

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

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

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

}

.blog-disc {
        font-family: kd-font-pr-1;
        font-size: 20px;
        line-height: 32px;
        color: var(--kd-clr-p-1);
        margin-bottom: 20px;
    }

.blog-video {
        height: 280px;
        overflow: hidden;
        border-radius: 12px;
        position: relative;
        z-index: 1;
        margin-bottom: 30px;

img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

.btn-position {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50% , -50%);
            z-index: 1;
        }

&-btn {
            display: flex;
            justify-content: center;
            align-items: center;
            width: 52px;
            height: 52px;
            border-radius: 50%;
            background: var(--kd-clr-pr-1);
            color: #fff;
            font-size: 16px;
            position: relative;
            transition: 400ms var(--cube-1);
        
            &::after {
                content: "";
                width: 100%;
                height: 100%;
                top: 50%;
                left: 50%;
                position: absolute;
                transform: translate(-50% , -50%);
                border-radius: 50%;
                background: #fff;
                opacity: .5;
                z-index: -1;
                animation: kd-plybtn-1 4s linear infinite;
            }
        
            &::before {
                content: "";
                width: 100%;
                height: 100%;
                top: 50%;
                left: 50%;
                position: absolute;
                transform: translate(-50% , -50%);
                border-radius: 50%;
                background: #fff;
                opacity: .5;
                z-index: -1;
                animation: kd-plybtn-1 2s linear infinite;
            }
        
            &:hover {
                color: var(--kd-clr-sd-1);
            }
        
        }
        
    }

.blog-qoute-box {
        background: rgb(0 94 78 / 6%);
        padding: 30px 35px;
        border-radius: 12px;
        margin-bottom: 30px;

.qoute-text {
            font-family: var(--kd-font-pr-1);
            font-weight: 700;
            color: var(--kd-clr-h-1);
            font-size: 20px;
            line-height: 1.45;
            margin-bottom: 20px;

i {
                display: inline-block;
                font-size: 40px;
                color: var(--kd-clr-pr-1);
            }
        }

.qoute-author {
            font-family: var(--kd-font-1);
            text-transform: uppercase;
            font-weight: 900;
            color: var(--kd-clr-pr-1);
            font-size: 18px;
            line-height: 30px;
        }
    }
    
    .blog-subtitle {
        font-family: var(--kd-font-pr-1);
        font-weight: 900;
        font-size: 26px;
        line-height: 1.38;
        margin-bottom: 20px;
        color: var(--kd-clr-h-1);

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

.blog-tag {
        display: flex;
        align-items: center;
        gap: 10px;
        flex-wrap: wrap;

.title {
            font-family: var(--kd-font-pr-1);
            text-transform: capitalize;
            font-weight: 700;
            color: var(--kd-clr-h-1);
            font-size: 22px;
            line-height: 26px;
            margin-bottom: 0;
            flex: 0 0 auto;
        }

.link {
            background: #F7F7F7;
            border-radius: 100px;
            color: var(--kd-clr-p-1);
            text-transform: capitalize;
            font-size: 14px;
            font-weight: 400;
            line-height: 20px;
            display: inline-block;
            padding: 7px 25px;
            transition: 300ms ease;
            font-family: var(--kd-font-pr-1);
            flex: 0 0 auto;
            &:hover {
                background: var(--kd-clr-pr-1);
                color: #fff;
            }
        }

}

.blog-tag-share {
        display: flex;
        justify-content: space-between;
        gap: 20px;
        padding: 25px 0;
        border-bottom: 1px solid rgb(17 16 16 / 10%);
        margin-bottom: 30px;
    }

.blog-share {
        display: flex;
        align-items: center;
        gap: 10px;
        flex-wrap: wrap;

.link {
            font-family: var(--kd-font-pr-1);
            text-transform: capitalize;
            font-weight: 500;
            font-size: 18px;
            line-height: 20px;
            color: var(--kd-clr-p-1);
            transition: .3s ease;

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

.blog-comment-item {
        background: #F7F7F7;
        border: 1px solid rgb(6 13 55 / 8%);
        border-radius: 5px;
        padding: 30px;
        display: flex;
        gap: 30px;

@media #{$xs} {
            flex-wrap: wrap;
        }

.img-wrap {

flex: 0 0 auto;
            width: 140px;
            height: 140px;
            overflow: hidden;
            border-radius: 50%;
            img {
                width: 100%;
                height: 100%;
                object-fit: cover;
            }
        }
        .name {
            font-family: var(--kd-font-pr-1);
            font-size: 24px;
            line-height: 26px;
            text-transform: capitalize;
            font-weight: 900;
            color: var(--kd-clr-h-1);
            margin-bottom: 15px;
            display: inline-block;
        }
        .comment-text {
            font-family: var(--kd-font-pr-1);
            font-size: 18px;
            font-weight: 400;
            color: var(--kd-clr-p-1);
            line-height: 30px;
            margin-bottom: 20px;
        }
        .social-link {
            li {
                display: inline-block;
                margin-right: 10px;
                a {
                    font-size: 20px;
                    line-height: 1;
                    color: var(--kd-clr-pr-1);
                    transition: .3s ease;
                    &:hover {
                        color: var(--kd-clr-sd-1);
                    }
                }
            }
        }
        
    }

.blog-post-next-btn {

display: flex;
        justify-content: space-between;
        padding: 30px 0;
        border-bottom: 1px solid rgb(17 16 16 / 10%);
        gap: 15px;
        flex-wrap: wrap;

.next-prv-btn {
            font-family: var(--kd-font-pr-1);
            font-size: 20px;
            font-weight: 700;
            line-height: 26px;
            color: var(--kd-clr-p-1);
            text-transform: uppercase;
            transition: 400ms ease;
            i {
                margin: 0 5px;
                font-weight: 600;
            }
            &:hover {
                transform: scale(97%);
                color: var(--kd-clr-pr-1);
            }
        }
    }

.blog-comments-wrap {
        padding: 40px 0;
        border-bottom: 1px solid rgba(17, 16, 16, 0.1);
        margin-bottom: 30px;

.comments-title {
            font-family: var(--kd-font-pr-1);
            font-weight: 900;
            font-size: 32px;
            line-height: 1.25;
            color: var(--kd-clr-h-1);
            margin-bottom: 25px;
        }
    }
    
    .comments-box-single {
        display: flex;
        gap: 25px;
        padding: 30px;
        @media #{$xs} {
            flex-wrap: wrap;
        }
        @media #{$sm} {
            flex-wrap: nowrap;
        }
        &:not(:last-child) {
            border-bottom: 1px solid rgba(17, 16, 16, 0.1);
        }
        .person-img {
            flex: 0 0 auto;
            width: 80px;
            height: 80px;
            border-radius: 50%;
            overflow: hidden;
            img {
                width: 100%;
                height: 100%;
                object-fit: cover;
            }
        }
        .heading-wrap {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 20px;
        }
        .name {
            font-family: var(--kd-font-pr-1);
            display: inline-block;
            font-size: 20px;
            font-weight: 800;
            line-height: 30px;
            text-transform: uppercase;
            color: var(--kd-clr-h-1);
            margin-bottom: 5px;
        }
        
        .date {
            font-family: var(--kd-font-pr-1);
            display: block;
            font-size: 16px;
            font-weight: 500;
            line-height: 20px;
            color: var(--kd-clr-pr-1);
            opacity: 1;
        }
        .reply-btn {
            font-family: var(--kd-font-pr-1);
            font-size: 16px;
            font-weight: 900;
            line-height: 20px;
            text-transform: capitalize;
            color: var(--kd-clr-h-1);
            transition: 200ms ease;
            &:hover {
                color: var(--kd-clr-sd-1);
            }
        }
        
        .comment-text {
            font-family: var(--kd-font-pr-1);
            font-size: 18px;
            line-height: 30px;
            color: var(--kd-clr-p-1);
            font-weight: 400;
            margin-bottom: 0;
            width: 100%;
        }
    }
    
    .comments-box-wrap {
        background: #F7F7F7;
        border-radius: 5px;
        &:not(:last-child) {
            margin-bottom: 20px;
        }
        .children {
            padding-left: 130px;
            @media #{$xs} {
                padding-left: 20px;
            }
            @media #{$sm} {
                padding-left: 50px;
            }
            .comments-box-single {
                border-bottom: none;
            }
        }
    }

.contact-form {
        &-wrap {
            background: #F7F7F7;
            border-radius: 10px;
            padding: 40px 40px;

@media #{$xs} {
                padding: 45px 20px;
            }
            @media #{$sm} {
                padding: 45px 40px;
            }

.title {
                font-family: var(--kd-font-pr-1);
                font-size: 35px;
                font-weight: 800;
                text-transform: capitalize;
                color: var(--kd-clr-h-1);
                line-height: 1.14;
                margin-bottom: 30px;

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

.contact-form {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 20px 30px;
        @media #{$xs} {
            grid-template-columns: 1fr;
        }
        input , .option-selector , textarea {
            width: 100%;
            height: 62px;
            border-radius: 100px;
            outline: none;
            border: none;
            background: #fff;
            font-size: 18px;
            font-weight: 500;
            color: var(--kd-clr-p-1);
            text-transform: capitalize;
            padding: 0 30px;
        }

textarea {
            height: 178px;
            padding-top: 15px;
            border-radius: 10px;
            grid-column-start: 1;
            grid-column-end: -1;
        }
        .btn-wrap {
            grid-column-start: 1;
            grid-column-end: -1;
        }

&-btn {
            display: inline-block;
            font-family: var(--kd-font-pr-1);
            color: #fff;
            font-weight: 800;
            font-size: 15px;
            line-height: 1;
            background: var(--kd-clr-pr-1);
            border-radius: 30px;
            padding: 20px 31px;
            text-transform: capitalize;
            position: relative;
            z-index: 1;
            transition: .3s var(--cube-1);
        
            .icon {
                display: inline-block;
                margin-left: 5px;
                transition: .3s var(--cube-1);
            }
        
            .text {
                display: inline-block;
                position: relative;
                z-index: 1;
                overflow: hidden;
                margin-bottom: -3px;
        
                &::after {
                    top: 0;
                    left: 0;
                    opacity: 0;
                    width: 100%;
                    display: block;
                    transition: 0.5s;
                    position: absolute;
                    background: transparent;
                    color: #000;
                    content: attr(data-back);
                    transform: translateX(-100%);
                }
            
                &::before {
                    top: 0;
                    left: 0;
                    opacity: 1;
                    display: block;
                    transition: 0.5s;
                    position: relative;
                    background: var(--blta-pr-1);
                    color: #fff;
                    content: attr(data-front);
                    transform: translateX(0);
                }
            }
        
            &:hover {
                color: #fff;
                background: var(--kd-clr-sd-1);

.icon {
                    color: #000;
                }
            
                .text {
                    &::after {
                        opacity: 1;
                        transform: translateX(0);
                    }
                    &::before {
                        opacity: 0;
                        transform: translateX(100%);
                    }
                }
        
            }

}
    }

}

/* 
    blog-page-end
*/