@use '../../utils/' as * ;

/*============= BLOG CSS AREA ===============*/
.vl-blog{
    &-lar-thumb-bg{
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        border-radius: 8px;
    }
    & .vl-section-title-1{
        padding: 140px 24px;
        @media #{$md}{
            padding:95px 24px;
        }
        @media #{$xs}{
            padding:50px 24px;
        }
        & .subtitle{
            border-radius: 50px;
            border: 1px solid rgba(255, 255, 255, 0.10);
            background: rgba(255, 255, 255, 0.20);
            backdrop-filter: blur(10px);
            color: var(--ztc-text-text-1);
        }
        & .title{
            color: var(--ztc-text-text-1);
        }
        & p{
            color: var(--ztc-text-text-1);
        }
    }
    
}


/*============= Event CSS AREA ===============*/

.vl-single{
    &-event{
        border-radius: 8px;
        border: 1px solid rgba(24, 23, 19, 0.10);
        background: var(--ztc-bg-bg-1);
        text-align: center;
        transition: .3s;
        overflow: hidden;
        &-day{
            border-radius: 8px 8px 0px 0px;
            color: var(--ztc-text-text-2);
            background: var(--ztc-bg-bg-4);
            font-size: var(--ztc-font-size-font-s18);
            line-height: var(--ztc-specing-height18);
            font-family: var(--ztc-family-font1);
            font-weight: var(--ztc-weight-semibold);
            padding-top: 8px;
            padding-bottom: 8px;
            transition: .3s;
        }
        &-flex{
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding-top: 27px;
            padding-bottom: 24px;
            padding-left: 24px;
            padding-right: 11px;
            &-num{
                .title{
                    color: var(--ztc-text-text-3);
                    font-size: var(--ztc-font-size-font-s44);
                    line-height: var(--ztc-specing-height44);
                    font-family: var(--ztc-family-font2);
                    font-weight: var(--ztc-weight-bold);
                    transition: .3s;
                }
            }
            &-year{
                color: var(--ztc-text-text-3);
                font-size: var(--ztc-font-size-font-s18);
                line-height: var(--ztc-specing-height30);
                font-family: var(--ztc-family-font2);
                font-weight: var(--ztc-weight-bold);
                transition: .3s;
            }
        }
    }
}
.vl-single-event.active{
    .vl-single-event-day {
        background: var(--ztc-bg-bg-3);
        color: var(--ztc-text-text-3);
    }
    .vl-single-event-flex{
        background: var(--ztc-bg-bg-2);
        .title{
            color: var(--ztc-text-text-1);
        }
        &-year{
            color: var(--ztc-text-text-1);
        }
    }
}


.vl-single-blog{
    &-box{
        border-radius: 8px;
        border: 1px solid rgba(24, 23, 19, 0.10);
        padding: 24px;
        & .sm-thumb{
            overflow: hidden;
            border-radius: 8px;
            @media #{$xs} {
                margin-top: 30px;
           }
            img {
                height: 162px;
                border-radius: 8px;
                object-fit: cover;
            }
        }
        &-content{
            & .date{
                background: var(--ztc-bg-bg-4);
                color: var(--ztc-text-text-2);
                font-size: var(--ztc-font-size-font-s16);
                line-height: var(--ztc-specing-height16);
                font-family: var(--ztc-family-font1);
                font-weight: var(--ztc-weight-semibold);
                padding: 8px 12px;
                display: inline-block;
                border-radius: 8px;
                & img{
                    margin-right: 2px;
                    margin-top: -3px;
                }
            }
            & .title {
                a{
                    color: var(--ztc-text-text-3);
                    font-size: var(--ztc-font-size-font-s20);
                    line-height: var(--ztc-specing-height30);
                    font-family: var(--ztc-family-font2);
                    font-weight: var(--ztc-weight-bold);
                    padding-top: 20px;
                    padding-bottom: 25px;
                    display: block;
                    transition: .3s;
                    &:hover{
                        color: var(--ztc-text-text-6);
                        transition: .3s;
                    }
                }
            }
            & .details{
                color: var(--ztc-text-text-3);
                font-size: var(--ztc-font-size-font-s18);
                line-height: var(--ztc-specing-height18);
                font-family: var(--ztc-family-font2);
                font-weight: var(--ztc-weight-bold);
                transition: .3s;
                & span{
                    transform: rotate(-45deg);
                    transition: .3s;
                    display: inline-block;
                }
                &:hover{
                    color: var(--ztc-text-text-6);
                    transition: .3s;
                }
            }
        }
        &:hover{
            .sm-thumb img {
                transform: scale(1.1) rotate(-4deg);
            }
        }
    }
}


.vl-single-blg-item{
    position: relative;
    overflow: hidden;
    &:hover{
        .vl-blg-thumb img{
            transform: scale(1.1) rotate(-3deg);
            transition: .3s;
        }
        & .vl-meta{
            background: var(--ztc-text-text-6);
            transition: .3s;
            & ul li a{
                color: var(--ztc-text-text-1);
                transition: .3s;
                & .top-minus{
                    & img{
                        filter: brightness(0) invert(1);
                    }
                }
            }
        }
    }
    .vl-blg-thumb{
        overflow: hidden;
        transition: .3s;
        border-radius: 8px;
        height: 238px;
        margin-bottom: 20px;
        & img{
            height: 270px;
            object-fit: cover;
            transition: .3s;
        }
    }
    .vl-blg-meta{
        background: var(--ztc-bg-bg-4);
        padding: 12px 16px;
        border-radius: 8px;
        display: flex;
        justify-content: space-between;
        position: absolute;
        left: 26px;
        right: 26px;
        margin-top:-24px;
        transition: .3s;
        @media #{$md,$xs} {
            left: 10px;
            right: 10px;
            }
        .vl-meta-flex{
            display: flex;
            align-items: center;
        //     @media #{$md,$xs} {
        //         display: block;
        //    }
            .vl-meta-icon span {
                margin-right: 4px;
                & img{
                    transition: .3s;
                }
            }
            .vl-meta-text{
                .date{
                    display: block;
                    margin-top: 5px;
                    color: var(--ztc-text-text-3);
                    font-size: var(--ztc-font-size-font-s16);
                    line-height: var(--ztc-specing-height16);
                    font-family: var(--ztc-family-font1);
                    font-weight: var(--ztc-weight-semibold);
                    transition:.3s;
                }
            }
        }
    }
    .vl-blg-content{
        padding-top: 34px;
        .title{
            a{
                font-size: var(--ztc-font-size-font-s20);
                line-height: var(--ztc-specing-height32);
                font-family: var(--ztc-family-font2);
                font-weight: var(--ztc-weight-bold);
                color: var(--ztc-text-text-3);
                transition: .3s;
                display: block;
                @media #{$md,$xs}{
                    font-size: var(--ztc-font-size-font-s18);
                    line-height: var(--ztc-specing-height28);
                }
                &:hover{
                    color: var(--ztc-text-text-6);
                    transition: .3s;
                }
            }
        }
        p{
            font-size: var(--ztc-font-size-font-s18);
            line-height: var(--ztc-specing-height28);
            font-family: var(--ztc-family-font);
            font-weight: var(--ztc-weight-semibold);
            color: var(--ztc-text-text-2);
            padding-top: 16px;
            padding-bottom: 24px;
            @media #{$xl}{
               padding-top: 10px;
               padding-bottom: 20px;
            }
        }
        .read-more{
            font-size: var(--ztc-font-size-font-s20);
            line-height: var(--ztc-specing-height18);
            font-family: var(--ztc-family-font);
            font-weight: var(--ztc-weight-bold);
            color: var(--ztc-text-text-3);
            transition: .3s;
            @media #{$md,$xs}{
                font-size: var(--ztc-font-size-font-s18);
                line-height: var(--ztc-specing-height18);
            }
            &:hover{
                color: var(--ztc-text-text-6);
                transition: .3s;
                & span{
                    transform: rotate(0);
                    transition: .3s;
                }
            }
            & span{
                transform: rotate(-45deg);
                display: inline-block;
                transition: .3s;
            }
        }
    }
    .vl-meta {
        background: var(--ztc-bg-bg-4);
        padding: 10px 16px;
        border-radius: 8px;
        margin-left: 26px;
        margin-right: 26px;
        margin-top: -26px;
        position: relative;
        z-index: 1;
        transition: .3s;
        @media #{$md}{
            margin-left: 8px;
            margin-right: 8px;
        }
        @media #{$xs}{
            margin-left: 8px;
            margin-right: 8px;
        }
        & ul li {
            display: inline-block;
            &  a {
                font-size: var(--ztc-font-size-font-s16);
                line-height: var(--ztc-specing-height16);
                font-family: var(--ztc-family-font1);
                font-weight: var(--ztc-weight-semibold);
                color: var(--ztc-text-text-3);
                margin-right: 16px;
                display: block;
                transition: .3s;
                @media #{$md,$xs}{
                    font-size: var(--ztc-font-size-font-s14);
                }
                & span.top-minus img {
                    display: inline-block;
                    margin-top: -4px;
                }
            }
        }
    }
    &-6{
        border-radius: 16px;
        overflow: inherit;
        & .vl-blg-thumb{
            border-radius: 16px;
        }
        & .vl-blg-content{
            padding:28px;
            border: 1px solid #ECECEC;
            border-bottom-left-radius: 16px;
            border-bottom-right-radius: 16px;
            transition: .3s;
            & .title a{
                padding-top: 14px;
                padding-bottom: 20px;
            }
            &-7{
                background: var(--ztc-text-text-22);
                border-radius: 8px;
                border: transparent;
                margin-left: 16px;
                margin-right: 16px;
                margin-top: -80px;
                position: relative;
                & .title a{
                    padding-top: 14px;
                    line-height: var(--ztc-specing-height30);
                    padding-bottom: 8px;
                    &:hover{
                        color: var(--ztc-text-text-19);
                        transition: .3s;
                    }
                }
                &:hover{
                    border: transparent;
                }
                & p{
                    padding-top: 0;
                }
                & .read-more{
                    &:hover{
                        color: var(--ztc-text-text-19);
                        transition: .3s;
                    }
                }
            }
        }
        & .vl-meta{
            margin: 0;
            background: transparent;
            padding: 0;
            & ul{
                & li{
                    & a{
                        font-size: var(--ztc-font-size-font-s18);
                        line-height: var(--ztc-specing-height18);
                    }
                }
            }
        }
        .vl-blg-thumb{
            & img{
                height: 300px;
                border-radius: 16px;
            }
            &-7{
               & img{
                height: 320px;
                border-radius: 16px;
                } 
            }
        }
        .vl-blog-date-7 span {
            background: #fff;
            color: var(--ztc-text-text-20);
            position: absolute;
            top: 24px;
            left: 24px;
            font-size: 32px;
            line-height: 32px;
            padding: 8px 16px;
            text-align: center;
            border-radius: 8px;
            font-family: var(--ztc-family-font2);
            font-weight: var(--ztc-weight-bold);
            display:inline-grid;
            transition: .3s;
            & cite{
                font-size: 16px;
                line-height: 16px;
                font-style: normal;
                font-family: var(--ztc-family-font1);
                font-weight: var(--ztc-weight-medium);
                padding-top: 3px;
                color: var(--ztc-text-text-20);
                transition: .3s;
            }
        }
        &:hover{
            & .vl-meta{
                background: transparent;
                transition: .3s;
                & ul{
                    & li{
                        & a{
                            color: var(--ztc-text-text-3);
                            .top-minus img{
                                filter: none;
                            }
                        }
                    }
                }
            }
            & .vl-blg-content{
                box-shadow: 0px 0px 30px 0px rgba(0, 0, 0, 0.09);
                transition: .3s;
                border: 1px solid var(--ztc-text-text-1);
                &-7{
                    border: transparent;
                    background: var(--ztc-text-text-1);
                    transition: .3s;
                    box-shadow: 0px 0px 40px 0px rgba(0, 0, 0, 0.09);
                }
            }
            .vl-blog-date-7 span {
            background: var(--ztc-text-text-19);
            color: var(--ztc-text-text-1);
            transition: .3s;
            & cite{
                color: var(--ztc-text-text-1);
                transition: .3s;
            }
        }
        }
    }
    &-8{
        & .vl-blg-thumb img{
            height: 240px;
            object-fit: cover;
            @media #{$lg}{
                margin-bottom: 20px;
            }
        }
        & .vl-blg-content{
            padding-top: 0;
            & .vl-blog-meta-8{
                & a{
                    font-size: var(--ztc-font-size-font-s18);
                    line-height: var(--ztc-specing-height18);
                    font-weight: var(--ztc-weight-medium);
                    color: var(--ztc-text-text-3);
                    position: relative;
                    margin-right: 8px;
                    padding-right: 8px;
                    & span{
                        & img{
                            margin-top: -4px;
                            margin-right: 6px;
                        }
                    }
                    &::after{
                        position: absolute;
                        content: "";
                        right: -8px;
                        top: 0;
                        height: 100%;
                        width: 2px;
                        background: #E0DED8;
                    }
                    &:last-child{
                        &:after{
                            display: none;
                        }
                    }
                }
                & .ngo-btn{
                    background: transparent;
                    font-size: var(--ztc-font-size-font-s18);
                    line-height: var(--ztc-specing-height18);
                    font-weight: var(--ztc-weight-medium);
                    padding: 6px 12px;
                    border-radius: 8px;
                    display: inline-block;
                    transition: .3s;
                    &:hover{
                        background: var(--ztc-bg-bg-2);
                        color: var(--ztc-text-text-1);
                        transition: .3s;
                    }
                }
            }
            & .title{
                & a{
                    padding-top: 16px;
                    font-size: var(--ztc-font-size-font-s24);
                    line-height: var(--ztc-specing-height34);
                    @media #{$xl}{
                        font-size: 22px;
                        line-height: 30px;
                    }
                }
            }
        }
    }
}

.vl-meta ul li a {
    color: var(--ztc-text-text-1);
    transition: 0.3s;
}

// meta box

.vl-blog-metabox1 {
    background: #F6F4EE;
    border-radius: 8px;
    margin-left: 26px;
    margin-right: 26px;
    margin-top: -24px;
    position: relative;
    z-index: 1;
    & ul li {
        display: inline-block;
        margin-right: 16px;
        &:last-child{
            margin-right: 0;
        }
    }
    a {
        display: block;
        color: #181713;
        font-size: 16px;
        line-height: 16px;
        font-weight: 600;
        padding: 12px 16px;
        &:last-child{
            margin-right: 0;
        }
    }
}



/*============= BLOG CSS AREA ENDS ===============*/




/*============= BLOG CSS AREA STARTS ===============*/
.vl-blog-2{
    & .vl-section-title-3{
        & .title{
            line-height: var(--ztc-specing-height54);
            padding-top: 28px;
            @media($xs){
                line-height: var(--ztc-specing-height36);
            }
        }
    }
    & .vl-single-blog-box2{
        position: relative;
        z-index: 1;
        & .thumb{
            overflow: hidden;
            border-radius: 8px;
            & img{
                transition: .3s;
            }
            & .top-img {
                position: absolute;
                right: -14px;
                top: -15px;
            }
        }
        .blog-content-box{
            border-radius: 8px;
            background: var(--ztc-bg-bg-1);
            box-shadow: 0px 4px 48px 0px rgba(0, 0, 0, 0.09);
            padding:24px 20px;
            margin-left: 30px;
            margin-right: 30px;
            margin-top: -50px;
            position: relative;
            z-index: 1;
            @media #{$md,$xs} {
                margin-left: 0px;
                margin-right: 00px;
                margin-top: 0px;
                padding:15px;
           }
            & .meta{
                &-flex{
                    display: flex;
                    & .meta{
                        display: flex;
                        align-items: center;
                        margin-right: 16px;
                        &-icon{
                            & span{
                                margin-right: 4px;
                            }
                        }
                        &-text{
                            color: var(--ztc-text-text-8);
                            font-size: var(--ztc-font-size-font-s16);
                            line-height: var(--ztc-specing-height16);
                            font-family: var(--ztc-family-font1);
                            font-weight: var(--ztc-weight-semibold);
                            transition:.3s;
                            margin-top: 6px;
                            &:hover{
                                color: var(--ztc-text-text-10);
                                transition:.3s;
                            }
                        }
                    }
                }
                
            }
            & .title{
                color: var(--ztc-text-text-8);
                font-size: var(--ztc-font-size-font-s20);
                line-height: var(--ztc-specing-height20);
                font-family: var(--ztc-family-font2);
                font-weight: var(--ztc-weight-bold);
                padding-top: 28px;
                padding-bottom: 16px;
                display: block;
                transition: .3s;
                @media #{$md,$xs} {
                    line-height: var(--ztc-specing-height28);
               }
                &:hover{
                    color: var(--ztc-text-text-10);
                    transition: .3s;
                }
            }
            & .para{
                color: var(--ztc-text-text-9);
                font-size: var(--ztc-font-size-font-s18);
                line-height: var(--ztc-specing-height26);
                font-family: var(--ztc-family-font1);
                font-weight: var(--ztc-weight-semibold);
            }
            & .learn-more{
                color: var(--ztc-text-text-8);
                font-size: var(--ztc-font-size-font-s16);
                line-height: var(--ztc-specing-height16);
                font-family: var(--ztc-family-font2);
                font-weight: var(--ztc-weight-bold);
                display:inline-block;
                padding-top: 26px;
                transition: .3s;
                &:hover{
                    color: var(--ztc-text-text-10);
                    transition: .3s;
                }
            }
        }
    }
}

.vl-blog3{
    & .vl-section-title3{
        & .title{
            padding-bottom: 0;
            line-height: var(--ztc-specing-height54);
            @media #{$xs}{
                font-size: var(--ztc-font-size-font-s30);
                line-height: var(--ztc-specing-height40);
            }
        }
    }
    & .vl-single-blog-item{
        position: relative;
        z-index: 1;
        overflow: hidden;
        border-radius: 8px;
        @media #{$md}{
            margin-left: 0px;
        }
        @media #{$xs}{
            margin-left: 0px;
        }
        & .vl-blog-content{
            background: var(--ztc-text-text-11);
            padding:24px;
            border-radius: 8px;
            position: absolute;
            bottom: 20px;
            left: 20px;
            right: 20px;
            @media #{$xs}{
                padding:14px;
                bottom: 10px;
                left: 10px;
                right: 10px;
            }
        }
        & .vl-blog-thumb{
            & img{
                height: 570px;
                overflow: hidden;
                border-radius: 8px;
                object-fit: cover;
                @media #{$md,$xs}{
                    height: 370px;
                }
            }
            
        }
        & .vl-blog-content{
            & .vl-meta-flex{
                display: flex;
                & .vl-blog-meta-flex{
                    display: flex;
                    margin-right: 16px;
                    & .icon {
                        height: 20px;
                        width: 20px;
                        line-height: 20px;
                        & span{
                            margin-right: 4px;
                            display: block;
                        }
                    }
                    & .text{
                        & .title{
                            color: var(--ztc-text-text-1);
                            transition: .3s;
                            font-size: var(--ztc-font-size-font-s16);
                            line-height: var(--ztc-specing-height16);
                            font-family: var(--ztc-family-font1);
                            font-weight: var(--ztc-weight-semibold);
                            &:hover{
                                color:var(--ztc-text-text-12);
                                transition: .3s;
                            }
                        }
                    }
                }
            }
            
            & .vl-content{
                & .title{
                    color:var(--ztc-text-text-1);
                    font-size: var(--ztc-font-size-font-s20);
                    line-height: var(--ztc-specing-height18);
                    font-family: var(--ztc-family-font2);
                    font-weight: var(--ztc-weight-bold);
                    transition: .3s;
                    padding-top: 16px;
                    display: inline-block;
                    @media #{$lg}{
                    line-height: var(--ztc-specing-height30);
                    }
                    @media #{$xs}{
                        line-height: var(--ztc-specing-height30);
                    }
                    &:hover{
                        color:var(--ztc-text-text-12);
                        transition: .3s;
                    }
                }
                & .para{
                    color: rgba(255, 255, 255, 0.80);
                    font-size: var(--ztc-font-size-font-s18);
                    line-height: var(--ztc-specing-height28);
                    font-family: var(--ztc-family-font1);
                    font-weight: var(--ztc-weight-semibold);
                    padding-top: 14px;
                    padding-bottom: 25px;
                }
                & .readmore{
                    color:var(--ztc-text-text-1);
                    font-size: var(--ztc-font-size-font-s18);
                    line-height: var(--ztc-specing-height18);
                    font-family: var(--ztc-family-font2);
                    font-weight: var(--ztc-weight-bold);
                    transition: .3s;
                    display: inline-block;
                    & span{
                        display: inline-block;
                        transform: rotate(-45deg);
                        transition: .3s;
                    }
                    &:hover{
                        color:var(--ztc-text-text-12);
                        transition: .3s;
                    }
                }
            }
        }
       
    }
}

/*============= BLOG CSS AREA ENDS ===============*/



// Blog Home-4

.vl-blog4{
    & .single-blog{
        overflow: hidden;
        position: relative;
        z-index: 1;
        & .blog-thumb{
            position: relative;
            overflow:hidden;
            transition:.3s;
            border-radius: 8px;
            z-index: 1;
            & img{
                object-fit: cover;
                height: 462px;
                transition: .4s;
                @media #{$xs}{
                    height: 100%;
                }
            }
        }
        & .blog-content{
            background: var(--ztc-text-text-14);
            border-radius:8px;
            padding:25px 20px;
            position: absolute;
            left:24px;
            right:24px;
            bottom:24px;
            z-index: 999;
            & .meta-flex{
                display:flex;
                align-items:center;
                @media #{$xs}{
                    display: block;
                }
                & .single-meta-box{
                    margin-right: 16px;
                    display: flex;
                    @media #{$xs}{
                        margin-bottom: 20px;
                        &:last-child{
                            margin-bottom: 0px;
                        }
                    }
                    & .icon{
                        & span{
                            margin-right: 4px;
                            height: 20px;
                            width: 20px;
                            display: flex;
                            & img{
                                height:20px;
                                width:20px;
                                display:inline-block;
                            }
                        }
                    }
                    & .para{
                        color:var(--ztc-text-text-1);
                        font-size: var(--ztc-font-size-font-s16);
                        line-height: var(--ztc-specing-height20);
                        font-family: var(--ztc-family-font1);
                        font-weight: var(--ztc-weight-semibold);
                        display:block;
                        transition: .3s;
                        &:hover{
                            color: var(--ztc-text-text-15);
                            transition: .3s;
                        }
                    }
                }
            }
            & .content{
                
                & .title{
                    color:var(--ztc-text-text-1);
                    font-size: var(--ztc-font-size-font-s20);
                    line-height: var(--ztc-specing-height30);
                    font-family: var(--ztc-family-font2);
                    font-weight: var(--ztc-weight-bold);
                    padding-bottom:25px;
                    display:block;
                    padding-top: 14px;
                    transition: .3s;
                    &:hover{
                        color: var(--ztc-text-text-15);
                        transition: .3s;
                    }
                }
                & .readmore{
                    color:var(--ztc-text-text-1);
                    font-size: var(--ztc-font-size-font-s18);
                    line-height: var(--ztc-specing-height18);
                    font-family: var(--ztc-family-font2);
                    font-weight: var(--ztc-weight-bold);
                    display:block;
                    transition: .3s;
                    & span{
                        transform: rotate(-45deg);
                        display: inline-block;
                    }
                    &:hover{
                        color: var(--ztc-text-text-15);
                        transition: .3s;
                    }
                }
            }
        }
        &:hover{
            & .blog-thumb{
                & img{
                    transform:scale(1.1);
                    transition: .4s;
                }
            }
        }
    }
    & .vl-single-blog-item4{
        background: var(--ztc-bg-bg-8);
        border-radius: 8px;
        padding-top:25px;
        padding-bottom:15px;
        padding-left:20px;
        padding-right:20px;
        & .meta-flex{
            display:flex;
            align-items:center;
            & .single-meta-box{
                margin-right:14px;
                display:flex;
                align-items:center;
                & .icon{
                    & span{
                        margin-right:4px;
                        & img{
                            margin-right:4px;
                        }
                    }
                }
                & .para{
                    color:var(--ztc-text-text-15);
                    font-size: var(--ztc-font-size-font-s16);
                    line-height: var(--ztc-specing-height16);
                    font-family: var(--ztc-family-font1);
                    font-weight: var(--ztc-weight-semibold);
                }
            }
        }
        & .content{
            & .title{
                color:var(--ztc-text-text-15);
                font-size: var(--ztc-font-size-font-s20);
                line-height: var(--ztc-specing-height30);
                font-family: var(--ztc-family-font2);
                font-weight: var(--ztc-weight-bold);
                padding-bottom:14px;
                display:block;
                padding-top: 14px;
                transition: .3s;
                &:hover{
                    color:var(--ztc-text-text-14);
                    transition:.3s;
                }
            }
            & .para{
                color:var(--ztc-text-text-16);
                font-size: var(--ztc-font-size-font-s18);
                line-height: var(--ztc-specing-height28);
                font-family: var(--ztc-family-font1);
                font-weight: var(--ztc-weight-semibold);
                display:block;
                transition: .3s;
                padding-bottom: 21px;
            }
            & .readmore{
                color:var(--ztc-text-text-15);
                font-size: var(--ztc-font-size-font-s18);
                line-height: var(--ztc-specing-height18);
                font-family: var(--ztc-family-font2);
                font-weight: var(--ztc-weight-bold);
                display:block;
                transition: .3s;
                & span{
                    transform: rotate(-45deg);
                    display: inline-block;
                }
                &:hover{
                    color: var(--ztc-text-text-14);
                    transition: .3s;
                }
            }
        }
    }
}


// Blog Home-5
.vl-blog5{
    & .vl-section-title5{
        padding-bottom: 48px;
        & .title{
            padding-bottom: 0;
        }
    }
    & .single-blog-box{
        overflow: hidden;
        position: relative;
        transition: .3s;
        & .blog-thumb{
            overflow: hidden;
            border-radius:8px;
            & img{
                border-radius: 8px;
                position: relative;
                overflow: hidden;
                z-index:1;
                height:570px;
                object-fit: cover;
                @media #{$xs}{
                    height: 430px;
                }
            }
        }
        & .blog-content{
            background:var(--ztc-text-text-6);
            padding:24px;
            border-radius:8px;
            position: absolute;
            bottom:20px;
            left:20px;
            right:20px;
            z-index: 1;
            transition: .3s;
            opacity: 0;
            visibility: hidden;
            transform:translateY(150px);
            & .meta-flex{
                display:flex;
                @media #{$xs}{
                    display:block;
                }
                & .meta-icon-box{
                    display: flex;
                    padding-bottom:20px;
                    margin-right:16px;
                    & .icon{
                        & span{
                            & img{
                                height:20px;
                                width:20px;
                                margin-right:4px;
                            }
                        }
                    }
                    & .text{
                        & .title{
                            color:var(--ztc-text-text-1);
                            font-size: var(--ztc-font-size-font-s16);
                            line-height: var(--ztc-specing-height16);
                            font-family: var(--ztc-family-font1);
                            font-weight: var(--ztc-weight-semibold);
                            transition:.3s;
                        }
                    }
                }
            }
            & .title{
                color: var(--ztc-text-text-1);
                transition:.3s;
                font-size: var(--ztc-font-size-font-s20);
                line-height: var(--ztc-specing-height20);
                font-family: var(--ztc-family-font2);
                font-weight: var(--ztc-weight-bold);
                display:inline-block;
                @media #{$xs}{
                    line-height: var(--ztc-specing-height30);
                }
            }
            & .para{
                color: rgba(255, 255, 255, 0.80);
                font-size: var(--ztc-font-size-font-s18);
                line-height: var(--ztc-specing-height28);
                font-family: var(--ztc-family-font1);
                font-weight: var(--ztc-weight-semibold);
                padding-top:14px;
                padding-bottom:25px;
             }
            & .readmore{
                color: var(--ztc-text-text-1);
                transition:.3s;
                font-size: var(--ztc-font-size-font-s18);
                line-height: var(--ztc-specing-height18);
                font-family: var(--ztc-family-font2);
                font-weight: var(--ztc-weight-bold);
                display:inline-block;
                & span{
                    transform: rotate(-45deg);
                    transition:.3s;
                    display:inline-block;
                }
            }
        }
        &.active{
            & .blog-content{
                transform: translateY(0);
                transition: .3s;
                opacity: 1;
                visibility: visible;
            }
        }
    }
}


// Blog Home 8
.border-space {
    border-bottom: 1px solid #DDDED7;
    padding-top: 30px;
}
.vl-blog-bg-8{
    background: var(--ztc-bg-bg-4);
}
.vl-blog-meta-8 {
   @media #{$md,$xs}{
     margin-top: 20px;
   }
}

// Blog Home 9
.vl-blog-thumb-9{
   & img{
        height: 350px;
        object-fit: cover;
        border-radius: 8px;
        @media #{$md}{
            height: 430px;
        }
   } 
}

.vl-blog-content-block-9{
    background: var(--ztc-text-text-26);
    padding: 32px;
    border-radius: 8px;
    
    transition: .3s;
    & .vl-meta{
        & a {
            font-size: var(--ztc-font-size-font-s18);
            line-height: var(--ztc-specing-height18);
            font-weight: var(--ztc-weight-medium);
            color: var(--ztc-text-text-24);
            transition: .3s;
            margin-right: 16px;
            @media #{$md}{
                display: inline-block;
            }
            &:hover{
                color: var(--ztc-text-text-23);
                transition: .3s;
            }
            & span{
                & img{
                    margin-top: -4px;
                    margin-right: 4px;
                }
            }
        }
    }
    & .title{
        & a{
            font-size: var(--ztc-font-size-font-s32);
            line-height: var(--ztc-specing-height42);
            color: var(--ztc-text-text-24);
            transition: .3s;
            font-family: var(--ztc-family-font2);
            font-weight: var(--ztc-weight-bold);
            padding-top: 16px;
            padding-bottom: 16px;
            display: inline-block;
            @media #{$lg,$md}{
                font-size: var(--ztc-font-size-font-s24);
                line-height: var(--ztc-specing-height32);
            }
            &:hover{
                color: var(--ztc-text-text-23);
                transition: .3s;
            }
        }
        &-2{
            & a{
                font-size: var(--ztc-font-size-font-s24);
                line-height: var(--ztc-specing-height34);
                &:hover{
                    color: var(--ztc-text-text-23);
                    transition: .3s;
                }
            }
        }
    }
    & p{
        color: var(--ztc-text-text-25);
        font-size: var(--ztc-font-size-font-s18);
        line-height: var(--ztc-specing-height26);
        font-weight: var(--ztc-weight-medium);
        padding-bottom: 32px;
    }
    & .readmore{
        font-size: var(--ztc-font-size-font-s20);
        line-height: var(--ztc-specing-height18);
        font-weight: var(--ztc-weight-bold);
        color: var(--ztc-text-text-24);
        transition: .3s;
        display: inline-block;
        & span{
            transform: rotate(-45deg);
            display: inline-block;
            transition: .3s;
        }
        &:hover{
            color: var(--ztc-text-text-23);
            transition: .3s;
            & span{
                transform: rotate(0);
                transition: .3s;
            }
        }
    }
    &:hover{
        transition: .3s;
        background: var(--ztc-text-text-1);
        box-shadow: 0px 0px 30px 0px rgba(0, 0, 0, 0.12);
    }
}

// blog Home 10

.vl-blog-area-10{
    border-radius: 8px;
    border: 1px solid rgba(16, 22, 8, 0.10);
    background: #FFF;
    transition: .3s;
    padding: 20px;
    & .vl-blog-thumb{
        height: 250px;
        object-fit: cover;
        border-radius: 8px;
        overflow: hidden;
        transition: .3s;
        & img{
            transition: .3s;
        }
    }
    & .vl-blog-content{
        & .vl-meta{
            padding-top: 28px;
            padding-bottom: 18px;
            & a{
                font-size: var(--ztc-font-size-font-s18);
                line-height: var(--ztc-specing-height18);
                font-weight: var(--ztc-weight-medium);
                color: var(--ztc-text-text-27);
                transition: .3s;
                position: relative;
                z-index: 1;
                margin-right: 8px;
                padding-right: 8px;
                & span{
                    & img{
                        margin-top: -4px;
                        margin-right: 4px;
                    }
                }
                &:after{
                    position:absolute;
                    content: "";
                    right: 0;
                    top: 6px;
                    height: 13px;
                    width: 1px;
                    background: #021A13;
                }
                &:last-child{
                    &::after{
                        display: none;
                    }
                }
            }   
        }
        & .title{
            & a{
                color: var(--ztc-text-text-27);
                display: inline-block;
                font-size: var(--ztc-font-size-font-s20);
                line-height: var(--ztc-specing-height30);
                font-weight: var(--ztc-weight-bold);
                font-family: var(--ztc-family-font2);
                padding-bottom: 24px;
                transition: .3s;
                &:hover{
                    color: var(--ztc-text-text-28);
                    transition: .3s;
                }
            }
        }
    }
    &:hover{
        border-radius: 8px;
        border: 1px solid rgba(16, 22, 8, 0.10);
        background: var(--Home-Page-New-5-Gray, #F4F9ED);
        box-shadow: 0px 4px 30px 0px rgba(142, 196, 77, 0.10);
        transition: .3s;
        & .vl-blog-thumb{
            & img{
                transform: scale(1.1);
                transition: .3s;
            }
        }
    }
}



// blog inner page 
.vl-blog-inner{
    & .vl-single-blg-item{
        &:hover{
           & .vl-meta{
                background: var(--ztc-text-text-4);
                transition: .3s;
                & ul{
                    & li{
                        & a{
                            color: var(--ztc-text-text-3);
                            transition: .3s;
                            & span{
                                & img{
                                    filter: brightness(0);
                                    transition: .3s;
                                }
                            }
                        }
                    }
                }
            }
        }
    }
}


.vl-rec-blog{
    &-flex {
        display: flex;
        margin-bottom: 20px;
        @media #{$xs}{
            display: block;
        }
        &:last-child{
            margin-bottom: 0px;
        }
    }
    &-thumb{
        border-radius: 8px;
        @media #{$xs}{
            margin-bottom: 15px;
        }
        & img{
            border-radius: 8px;
            height: 100px;
            width: 100px;
            margin-right: 13px;
        }
    }
    &-content{
        & .vl-rec-blog{
            &-date{
                display: flex;
                align-items: center;
                margin-bottom: 10px;
                & span{
                    & img{
                        height: 16px;
                        width: 16px;
                    }
                }
                & .dta-blg{
                    color: var(--ztc-text-text-2);
                    font-size: var(--ztc-font-size-font-s16);
                    line-height: var(--ztc-specing-height16);
                    font-family: var(--ztc-family-font1);
                    font-weight: var(--ztc-weight-semibold);
                    margin-top: 2px;
                }
            }
        }
        &-heading{
            & .tittle{
              & a {
                    color: var(--ztc-text-text-3);
                    transition: .3s;
                    font-size: var(--ztc-font-size-font-s20);
                    line-height: var(--ztc-specing-height30);
                    font-family: var(--ztc-family-font2);
                    font-weight: var(--ztc-weight-bold);
                    &:hover{
                        color:var(--ztc-text-text-6);
                        transition: .3s;
                    }
                }
            }
        }
    }
}


// tags
.vl-tags{
    & ul{
        & li{
            display: inline-block;
            & a{
                background: var(--ztc-text-text-1);
                color: var(--ztc-text-text-3);
                transition: .3s;
                padding: 12px 16px;
                display: inline-block;
                border-radius: 8px;
                font-size: var(--ztc-font-size-font-s16);
                line-height: var(--ztc-specing-height16);
                font-family: var(--ztc-family-font1);
                font-weight: var(--ztc-weight-bold);
                margin-right: 14px;
                margin-bottom: 16px;
                &:hover{
                    background:var(--ztc-text-text-4);
                    transition: .3s;
                }
            }
        }
    }
}

.vl-blog-grid{
    & img{
        height: 70px;
        width: 70px;
        border-radius: 50px;
    }
}

.vl-blog-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
}

.vl-blog-auth-meta{
    display: flex;
    justify-content: space-between;
    margin-top: 32px;
    @media #{$xs}{
        display: block;
    }
    & .blg-meta-box span img {
        height: 40px;
        width: 40px;
        border-radius: 50px;
        margin-right: 6px;
    }
    
    .auth-title {
        color: #514F4C;
        font-size: 18px;
        line-height: 18px;
        font-weight: 600;
        transition: .3s;
        &:hover{
            color: #514F4C;
            transition: .3s;
        }
    }
    span.calender-icon {
        height: 20px;
        width: 20px;
        display: inline-block;
    }
    & .single-meta{
        display:flex;
        align-items: center;
        position: relative;
        z-index: 1;
        @media #{$xs}{
            margin-bottom: 15px;
        }
        &:last-child{
            margin-bottom: 0;
        }
        .blg-meta-box span img {
            height: 40px;
            width: 40px;
            border-radius: 50px;
            margin-right: 6px;
        }
        
        .auth-title {
            color: #514F4C;
            font-size: 18px;
            line-height: 18px;
            font-weight: 600;
            transition: .3s;
            &:hover{
                color: #514F4C;
                transition: .3s;
            }
        }
        & .meta-icon{
            & span{
                &.calender-icon{
                    & img{
                        height:20px;
                        width: 20px;
                    }
                }
                & img{
                    height:40px;
                    width: 40px;
                    border-radius: 50px;
                    margin-right: 8px;
                }
            }
        }
        & .meta-content{
            & .auth-title{
                color: var(--ztc-text-text-2);
                font-size: var(--ztc-font-size-font-s18);
                line-height: var(--ztc-specing-height18);
                font-family: var(--ztc-family-font1);
                font-weight: var(--ztc-weight-semibold);
            }
        }
    }
}


// meta box

.vl-blog-meta-box ul li {
    display: inline-block;
    position: relative;
    z-index: 1;
    margin-right: 16px;
    padding-right: 16px;
    @media #{$md}{
        margin-right: 10px;
    }
    &::after{
        position: absolute;
        content: "";
        height: 16px;
        width: 1px;
        background: #514F4C;
        top:10px;
        right: 0;
    }
    &:last-child::after{
        display: none;
    }
    a{
        color: #514F4C;
        font-size:18px;
        line-height: 18px;
        font-weight: 600;
        span{
            img{
                height: 40px;
                width: 40px;
                border-radius: 50px;
                margin-right: 8px;
                
            }
            .icon {
                height: 20px;
                width: 20px;
                display: inline-block;
            }
        }
    }
}

.vl-blog-meta-box ul li a span.icon {
    height: auto;
    width: 20px;
    display: inline-block;
}



.vl-blg-icon-box{
    & .single-blog-box1{
        background: var(--ztc-bg-bg-4);
        transition: .3s;
        border-radius: 8px;
        padding: 24px 20px;
        & .title{
            color: var(--ztc-text-text-3);
            transition: .3s;
            font-size: var(--ztc-font-size-font-s18);
            line-height: var(--ztc-specing-height18);
            font-family: var(--ztc-family-font2);
            font-weight: var(--ztc-weight-bold);
            display: inline-block;
        }
        & .para{
            padding-top: 10px;
            color: var(--ztc-text-text-2);
            transition: .3s;
            font-size: var(--ztc-font-size-font-s18);
            line-height: var(--ztc-specing-height28);
            font-family: var(--ztc-family-font1);
            font-weight: var(--ztc-weight-semibold);
        }
        &:hover{
            background: var(--ztc-text-text-4);
            transition: .3s;
        }
    }
}