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


/*----------------------------------------*/
/*  5.4 Blog css
/*----------------------------------------*/

.th-blog-wrap-2{
    border: 1px solid #2E2E2E;
    border-radius: 16px;
    overflow: hidden;
    transition: .3s;
    &:hover{
        border: 1px solid var(--primary-color-2);
        transition: .3s;
    }
}

.th-blog-tag2{
    border: 1px solid #2C2C2C;
    font-size: 16px;
    line-height: 24px;
    font-weight: 400;
    color: var(--text-color);
    transition: .3s;
    padding: 6px 16px;
    padding-left: 30px;
    position: relative;
    display: inline-block;
    border-radius: 64px;
    margin-right: 32px;
    &::after{
        position: absolute;
        content: "";
        left: 16px;
        top:50%;
        transform: translateY(-50%);
        height: 10px;
        width: 10px;
        background: var(--primary-color-2);
        border-radius: 50%;
    }
    &:hover{
        color: var(--primary-color-2);
        transition: .3s;
    }
}

.th-blog-read{
    font-size: 16px;
    line-height: 24px;
    font-weight: 400;
    color: var(--text-color);
    transition: .3s;
    &:hover{
        color: var(--primary-color-2);
        transition: .3s;
    }
}

.th-blog-title-2{
    font-size: 24px;
    line-height: 32px;
    font-weight: 700;
    color: var(--secondary-color);
    transition: .3s;
    margin-top: 16px;
    margin-bottom: 72px;
    @media #{$lg,$md,$xs}{
       margin-bottom: 30px;
    }
    &:hover{
        color: var(--primary-color-2);
        transition: .3s;
    }
}

.th-blog-content-2{
    padding-top: 48px;
    padding-bottom: 48px;
    padding-right: 32px;
    @media #{$lg,$md,$xs}{
        padding: 30px;
    }
}

.th-blog-thumb2 img {
    @media #{$lg,$md,$xs}{
        height: 300px;
        object-fit: cover;
    }
}

// blog style 3 

.vl-blog-wrap-3{
    background:#121212;
    border-radius: 16px;
    object-fit: cover;
    overflow: hidden;
    transition: .3s;
    border: 1px solid #2F2F2F;
    &:hover{
        border: 1px solid var(--primary-color-3);
        transition: .3s;
    }
}


.th-blog-thumb-3{
    & img{
        height: 256px;
        object-fit: cover;
    }
    &.blagre-thumb{
        & img{
            height: 368px;
        }
    }
}

.th-blog-content-3{
    padding-top: 16px;
    padding-left: 24px;
    padding-right: 24px;
    padding-bottom: 40px;
}

.th-blog-tag3{
    font-size: 16px;
    line-height: 24px;
    font-weight: 400;
    color: var(--text-color);
    transition: .3s;
    @media #{$lg}{
        font-size:14px;
    }
    &:hover{
        color: var(--primary-color-3);
        transition: .3s;
    }
}

.th-slash{
    color: var(--text-color);
    margin: 0 8px;
}

.th-blog-title-3{
    font-size: 24px;
    line-height: 32px;
    font-weight: 700;
    color: var(--secondary-color);
    transition: .3s;
    padding-bottom: 32px;
    padding-top: 8px;
    @media #{$lg}{
        font-size:20px;
    }
    &:hover{
        color: var(--primary-color-3);
        transition: .3s;
    }
}

.th-btn-blog3{
    font-size: 16px;
    line-height: 24px;
    font-weight: 600;
    color: var(--secondary-color);
    transition: .3s;
    & span{
        background:#0E0E0E;
        height: 40px;
        width: 40px;
        line-height: 40px;
        display: inline-block;
        text-align: center;
        transition: .3s;
        border-radius: 50%;
        margin-right: 12px;
        & img{
            transition: .3s;
        }
    }
    &:hover{
        transition: .3s;
        color: var(--primary-color-3);
        & span{
            background: var(--primary-color-3);
            transition: .3s;
            & img{
                filter: brightness(0) invert(1);
                transition: .3s;
            }
        }
    }
}


// blog inner style 

.th-blog-wrap-iner{
    background: #121212;
    border: 1px solid #2F2F2F;
    border-radius: 16px;
    overflow: hidden;
    &-thumb{}
    &-content{
        padding-top: 16px;
        padding-left: 24px;
        padding-right: 24px;
        padding-bottom: 32px;
        & .th-blog-meta{
            & a{
                font-size: 16px;
                line-height: 24px;
                font-weight: 400;
                color: #B4B2B2;
                transition: .3s;
                & span{
                    & img{
                        margin-top: -4px;
                    }
                }
                &:hover{
                    color: #DEFF00;
                    transition: .3s;
                }
            }
            & .th-slash{
                color: #929292;
            }
        }
        & .th-title{
            padding-top: 8px;
            padding-bottom: 24px;
            color: #FBFBFB;
            font-size: 24px;
            line-height: 32px;
            font-weight: 700;
            transition: .3s;
            &:hover{
                color: #DEFF00;
                transition: .3s;
            }
        }
    }
}


.th-blog-iner-btn:hover{
    & .th-service-arrow-icon{
        & .th-arrow-bg{
            background:#DEFF00;
            & img{
                filter: brightness(0);
            }
        }
        & .th-arrow-content{
            color: #DEFF00;
        }
    }
}

// blog classic 

.th-single-blog-classic-area{
    & .th-thumb{
        & img{
            height: 400px;
            border-radius: 16px;
        }
    }
    & .th-content{
        & .th-meta{
            & a{
                margin-right: 40px;
                font-size: 16px;
                line-height: 24px;
                font-weight: 400;
                color: #B4B2B2;
                transition: .3s;
                & span{
                    & img{
                        margin-top: -4px;
                        margin-right: 8px;
                    }
                }
                & cite{
                    font-style: normal;
                    color: #DEFF00;
                }
            }
        }
        & .th-title{
            font-size: 32px;
            line-height: 40px;
            font-weight: 700;
            color: #FBFBFB;
            transition: .3s;
            &:hover{
                color: #DEFF00;
                transition: .3s;
            }
        }
        & .th-para{
            font-size: 16px;
            line-height: 24px;
            color: #B4B2B2;
            transition: .3s;
        }
    }
}


.th-classic-blog-border {
    border-bottom: 1px solid #2C2C2C;
    margin-bottom: 48px;
    padding-top: 18px;
}

.th-blog-details-larg-thumb{
    position: relative;
    & img{
        border-radius: 24px;
        height: 564px;
        @media #{$lg,$md,$xs}{
            height: 100%;
        }
    }
}

.th-blog-details-larg-thumb-2{
    & img{
        border-radius: 16px;
        height: 345px;
        @media #{$lg,$md,$xs}{
            height: 100%;
        }
    }
}

// tags
.th-blog-details-wrapf-flex1{
    & .th-tag-title{
        font-size: 32px;
        line-height: 40px;
        color: #FBFBFB;
        font-weight: 700;
        margin-right: 24px;
    }
    & .tags{
        padding: 6px 16px;
        font-size: 16px;
        line-height: 24px;
        color:#FBFBFB;
        font-weight: 400;
        background: #101010;
        display: inline-block;
        border-radius: 100px;
        transition: .3s;
        margin-right: 12px;
        &:hover{
            background: #DEFF00;
            color: #101010;
            transition: .3s;
        }
    }
}

.th-blog-details-wrapf-flex1 {
    display: flex;
    align-items: center;
    @media #{$xs}{
        display: block;
    }
}

.th-blog-details-wrapf-flex2{
    & .th-social{
        background: #101010;
        color: #FBFBFB;
        display: inline-block;
        height: 36px;
        width: 36px;
        line-height:40px;
        border-radius: 50%;
        text-align: center;
        transition: .3s;
        margin-right: 16px;
        @media #{$lg,$md,$xs}{
            margin: 0 8px;
        }
        &:hover{
            color: #101010;
            transition: .3s;
            background-color: #DEFF00;
        }
    }
}

.th-blog-details-wrapf{
    display: flex;
    align-items: center;
    justify-content: space-between;
    @media #{$lg,$md,$xs}{
        flex-direction: column;
    }
}

.th-nextprevious-flex{
    & .th-next{
        color: #FBFBFB;
        font-size: 16px;
        line-height: 24px;
        font-weight: 600;
        transition: .3s;
        & span{
            background: #0E0E0E;
            height: 56px;
            width: 56px;
            line-height: 56px;
            display: inline-block;
            text-align: center;
            border-radius: 50%;
            margin-right: 24px;
            transition: .3s;
        }
        &:hover{
            & span{
                transition: .3s;
                background: #DEFF00;
                & img{
                    filter: brightness(0) invert(1);
                }
            }
        }
    }

    & .th-next-2{
        color: #FBFBFB;
        font-size: 16px;
        line-height: 24px;
        font-weight: 600;
        transition: .3s;
        & span{
            background: #0E0E0E;
            height: 56px;
            width: 56px;
            line-height: 56px;
            display: inline-block;
            text-align: center;
            border-radius: 50%;
            margin-left: 24px;
            transition: .3s;
        }
        &:hover{
            & span{
                transition: .3s;
                background: #DEFF00;
                & img{
                    filter: brightness(0) invert(1);
                }
            }
        }
    }
}

.th-nextprevious-flex .th-next:hover span img {
    filter: brightness(0);
}
.th-nextprevious-flex .th-next-2:hover span img {
    filter: brightness(0);
}

.th-nextprevious-flex {
    display: flex;
    justify-content: space-between;
}