/* 

1.0 Variables
2.0 Normalize
    2.1 Colors
    2.2 Typography
    2.3 Menu Hover
        2.3.1 Effect One
        2.3.2 Effect Two
        2.3.3 Effect Three
    2.4 Social Icons Animation
    2.5 Icon Style
    2.6 Button Hover Animation
        2.6.1 Effect One
        2.6.2 Effect Two
        2.6.3 Effect Three
    2.7 Image Hover Animation
    2.8 Block Title Layouts
    2.9 Sidebar Sticky
    2.10 Table of Content
    2.11 Slick Initialized
    2.12 Banner Sidebar Widgets
    2.13 Card Settings

*/


/* 
==================================
MARK: 1.0 Variables
==================================
*/

    :root {

        /* =========================== COLORS =========================== */

            /* Global Colors */
            --bnv-theme-color: #E78371;
            --bnv-site-color: #30344b;
            --bnv-site-color-hover: #E78371;
            --bnv-site-bg-color: #fff;
            --bnv-site-bg-color-hover: #fff;
            --bnv-site-border-color: #000;        /* Default Border Color */
            --bnv-site-border-color-hover: #000;
            --bnv-site-border-color-muted: #e5e7eb;  /* Subtle Divider Lines */
            --bnv-site-grey-color: #efefef;
            --bnv-site-border-color-dark: #d5d5d5;
            --bnv-site-meta-color: #6b727e;
            --bnv-site-excerpt-color: #50565e;
            --bnv-site-toc-active-color: #b8945a;
            --bnv-site-toc-border-color: #e5dfd3;

            --bnv-site-description-color: #424242;

            /* Social Media Colors */
            --bnv-site-facebook-color: #1877F2;
            --bnv-site-twitter-color: #1DA1F2;
            --bnv-site-instagram-color: linear-gradient(192deg, #405DE6, #5851DB, #833AB4, #C13584, #E1306C, #FD1D1D, #F56040, #F77737, #FCAF45, #FFDC80);
            --bnv-site-threads-color: #000000;
            --bnv-site-whatsapp-color: #25D366;
            --bnv-site-x-color: #000000;
            --bnv-site-tiktok-color: #000;
            --bnv-site-snapchat-color: #d6d409;
            --bnv-site-pinterest-color: #E60023;
            --bnv-site-reddit-color: #FF4500;
            --bnv-site-tumblr-color: #35465C;
            --bnv-site-mastodon-color: #6364FF;
            --bnv-site-bluesky-color: #0085FF;
            --bnv-site-linkedin-color: #0A66C2;
            --bnv-site-youtube-color: #FF0000;
            --bnv-site-twitch-color: #6441A5;
            --bnv-site-vimeo-color: #1AB7EA;
            --bnv-site-dailymotion-color: #00AAFF;
            --bnv-site-discord-color: #5865F2;
            --bnv-site-telegram-color: #0088CC;
            --bnv-site-skype-color: #00AFF0;
            --bnv-site-viber-color: #7360F2;
            --bnv-site-weixin-color: #07C160;
            --bnv-site-qq-color: #12B7F5;
            --bnv-site-kk-color: #e8d103;
            --bnv-site-odnoklassniki-color: #EE8208;
            --bnv-site-weibo-color: #E6162D;
            --bnv-site-renren-color: #005EAC;
            

        /* =========================== TYPOGRAPHY =========================== */
            
            --bnv-site-font-family: 'Inter', sans-serif;
            --bnv-site-font-weight: 600;
            --bnv-site-font-size: 16px;
            --bnv-site-font-lineheight: 1.6;
            --bnv-site-font-letterspacing: 0;
            --bnv-site-font-decoration: none;
            --bnv-site-font-texttransform: none;
            --bnv-site-font-style: unset;

            --bnv-site-meta-font-family: 'Inter', sans-serif;
            --bnv-site-meta-font-weight: 400;
            --bnv-site-meta-font-size: 14px;
            --bnv-site-meta-font-lineheight: 1.6;
            --bnv-site-meta-font-letterspacing: 0;
            --bnv-site-meta-font-decoration: none;
            --bnv-site-meta-font-texttransform: none;
            --bnv-site-meta-font-style: unset;

        /* Animation */
        --transition-1: all 0.3s ease-in-out;
        --transition-2: all .4s ease-in-out;

        --search-icon-width: 40px;

        --bnv-ratio-16-9: 16 / 9;
        --bnv-ratio-4-3: 4 / 3;
        --bnv-ratio-2-1: 2 / 1;
        --bnv-ratio-1-1: 1 / 1;
    }

    /* 
    MARK: 1.1 Dark Mode
    */

        .bnv-dark {
            --bnv-site-bg-color: #292c2f;
            --bnv-site-color: #fff;
            --bnv-site-border-color: #56595b;
            --bnv-site-border-color-hover: #56595b;
            --bnv-site-description-color: #fff;
            --bnv-site-border-color-muted: #56595b;
            --bnv-site-grey-color: #efefef1f;
            --bnv-site-border-color-dark: #ffffff26;
            --bnv-site-meta-color: #ededed;
            --bnv-site-excerpt-color: #fff;
            --bnv-site-toc-border-color: #56595b;
        }

/* 
==================================
MARK: 2.0 Normalize
==================================
*/

    *,
    *:before,
    *:after {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
    }

    html {
        font-size: 16px;
        scroll-behavior: smooth;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }

    body {
        font-family: var(--bnv-site-font-family);
        background: var(--bnv-site-bg-color);
        line-height: 1.6;
        overflow-x: hidden;
    }

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

    a {
        text-decoration: none;
        color: inherit;
        transition: var(--transition-1);
        word-wrap: break-word;
    }

    a:active {
        outline: none;
    }

    a:focus {
        outline: 1px dotted black;
    }

    ul li,
    ol li {
        list-style: none;
    }

    button,
    input[type="submit"] {
        cursor: pointer;
        border: none;
        padding: 0;
        border-radius: 0;
        background-color: transparent;
    }

    h1, h2, h3, h4, h5, h6,
    p, blockquote, pre,
    dl, dd, ol, ul,
    figure, hr, li > ul, li > ol,
    .entry-content,
    .widget,
    .post, .page {
        margin: 0;
        padding: 0;
    }

    .width--full-width .bnv-container {
        max-width: 100%;
        padding: 0;
    }

    .width--wide .bnv-container{
        max-width: 100%;
    }

    /* 
    MARK: 2.1 Colors
    */

    .entry-title a {
        color: var(--bnv-site-color);
    }

    .entry-title a:hover {
        color: var(--bnv-site-color-hover);
    }

    /* 
    MARK: 2.2 Typography
    */

        p,
        h1, h2, h3, h4, h5, h6,
        .site-title,
        .site-title-link,
        .highlight,
        .site-description,
        .label,
        .entry-title,
        .entry-title a,
        .bnv-menu li a,
        .bnv-date-time,
        .bnv-date-time > span,
        .bnv-custom-button .custom-button-link,
        .random-blog-link,
        .bnv-time,
        .bnv-time .time,
        .widget,
        .entry-read-more a,
        .view-all {
            font-family: var(--bnv-site-font-family);
            font-weight: var(--bnv-site-font-weight);
            font-size: var(--bnv-site-font-size);
            line-height: var(--bnv-site-font-lineheight);
            letter-spacing: var(--bnv-site-font-letterspacing);
            text-decoration: var(--bnv-site-font-decoration);
            text-transform: var(--bnv-site-font-texttransform);
            font-style: var(--bnv-site-font-style);
        }

        h1, h2, h3, h4, h5, h6 {
            --bnv-site-font-weight: 600;
            --bnv-site-font-lineheight: 1.4;
            --bnv-site-font-letterspacing: -0.2px;
        }

        h1 {
            --bnv-site-font-size: 32px;
        }

        h2 {
            --bnv-site-font-size: 26px;
        }

        h3 {
            --bnv-site-font-size: 20px;
        }

        h4 {
            --bnv-site-font-size: 18px;
        }

        h5 {
            --bnv-site-font-size: 16px;
        }

        h6 {
            --bnv-site-font-size: 14px;
        }

        .entry-categories .cat-item,
        .entry-meta > div,
        .cat-item-link,
        .cat-item-count {
            font-family: var(--bnv-site-meta-font-family);
            font-weight: var(--bnv-site-meta-font-weight);
            font-size: var(--bnv-site-meta-font-size);
            line-height: var(--bnv-site-meta-font-lineheight);
            letter-spacing: var(--bnv-site-meta-font-letterspacing);
            text-decoration: var(--bnv-site-meta-font-decoration);
            text-transform: var(--bnv-site-meta-font-texttransform);
            font-style: var(--bnv-site-meta-font-style);
        }

    /* 
    MARK: 2.3 Menu Hover
    */

        .bnv-menu:not(.hover--none) div > .menu > li > a:before,
        .bnv-menu:not(.hover--none) .menu > ul > li > a:before,
        .bnv-footer .bnv-footer-menu:not(.hover--none) li a:before {
            content: '';
            position: absolute;
            left: 0;
            bottom: -2px;
            width: 0;
            height: 2px;
            background-color: currentColor;
            transition: var(--transition-1);
        }

        /* 2.3.1 Effect One */
        .bnv-menu.hover--one ul li a:hover:before {
            width: 100%;
        }

        /* 2.3.2 Effect Two */
        .bnv-builder .bnv-menu.hover--two ul li a:before {
            left: 50%;
        }

        .bnv-builder .bnv-menu.hover--two ul li a:hover:before {
            width: 100%;
            left: 0;
        }

        /* 2.3.2 Effect Three */
        .bnv-builder .bnv-menu.hover--three ul li a:before {
            width: 100%;
            opacity: 0;
            transform: translateX(-30%);
        }

        .bnv-builder .bnv-menu.hover--three ul li a:hover:before {
            opacity: 1;
            transform: translate(0, 0);
        }

    /* 
    MARK: 2.4 Social Icons Animation
    */

        /* 2.4.1 Grow */
        .bnv-social-icons.animation--grow i:hover {
            transform: scale(1.2);
        }

        /* 2.4.2 Shrink */
        .bnv-social-icons.animation--shrink i:hover {
            transform: scale(0.9);
        }

        /* 2.4.3 Rotate */
        .bnv-social-icons.animation--rotate i:hover {
            transform: rotate(25deg);
        }

        /* 2.4.4 Rotate */
        .bnv-social-icons.animation--slide-up i:hover {
            transform: translateY(-3px);
        }

    /* 
    MARK: 2.5 Icon Style
    */

        /* Filled */
        .filled i {
            --bnv-site-bg-color: var(--bnv-site-grey-color);
            width: var(--search-icon-width);
            height: var(--search-icon-width);
            display: flex;
            justify-content: center;
            align-items: center;
            background: var(--bnv-site-bg-color);
        }

        .filled i:hover {
            --bnv-site-bg-color-hover: var(--bnv-site-grey-color);
            background: var(--bnv-site-bg-color-hover);
        }

        .outline i {
            width: var(--search-icon-width);
            height: var(--search-icon-width);
            display: flex;
            justify-content: center;
            align-items: center;
            border: 1px solid var(--bnv-site-border-color);
        }

        .outline i:hover {
            border-color: var(--bnv-site-border-color-hover);
        }

        .rounded i {
            border-radius: 3px;
        }

        .circle i {
            border-radius: 50%;
        }

    /* 
    MARK: 2.6 Button Hover Animation
    */

        /* 2.6.1 Effect One */
        .bnv-header .bnv-custom-button.hover--one .custom-button-link:hover {
            transform: translateY(-2px);
        }

        /* 2.6.2 Effect Two */
        .bnv-header .bnv-custom-button.hover--two .custom-button-link:hover {
            transform: scale(1.05);
        }

        /* 2.6.3 Effect Three */
        .bnv-header .bnv-custom-button.hover--three .custom-button-link:before {
            position: absolute;
            top: 50%;
            left: 50%;
            z-index: 2;
            display: block;
            content: '';
            width: 0;
            height: 0;
            background: rgba(255, 255, 255, .2);
            border-radius: 100%;
            -webkit-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
            opacity: 0;
        }

        .bnv-header .bnv-custom-button.hover--three .custom-button-link:hover:before {
            -webkit-animation: circle 1s;
            animation: circle 1s;
        }

        @keyframes circle {
            0% {
                opacity: 1;
            }
            40% {
                opacity: 1;
            }
            100% {
                width: 150%;
                height: 150%;
                opacity: 0;
            }
        }

    /* 
    MARK: 2.7 Image Hover Animation
    */
    
        .bnv-article-figure {
            overflow: hidden;
            background: #efefef9e;
        }
        
        .bnv-article-figure img {
            transform: scale(1.04) translateY(0);
            will-change: transform;
            transition: transform .6s cubic-bezier(.63, -.01, .24, 1);
        }
        
        .bnv-article-figure:hover img {
            transform: scale(1.04) translateY(-4px);
        }

    /* 
    MARK: 2.8 Block Title Layouts
    */

        .row > .section-head {
            display: flex;
            justify-content: space-between;
            gap: 20px;
        }

        .section-head {
            font-size: 0;
            margin-bottom: 30px;
        }

        .section-head .section-head {
            margin: 0;
        }

        .section-head > span.label {
            --bnv-site-font-size: 18px;
            --bnv-site-font-weight: 700;
            --bnv-site-font-texttransform: uppercase;
            color: var(--bnv-site-color);
        }

        /* View All Button */
        .section-head .view-all {
            color: var(--bnv-site-color);
            transition: var(--transition-1);
        }

        .section-head .view-all:hover {
            color: var(--bnv-site-color-hover);
        }

        .section-head .view-all .label {
            --bnv-site-font-size: 15px;
            --bnv-site-font-weight: 700;
        }

        .section-head .view-all .icon {
            font-size: calc(var(--bnv-site-font-size) * 0.79);
            margin-left: 3px;
        }

        /* 2.8.2 Layout Two */
        .block-title--two .row > .section-head {
            border-bottom: 1px solid var(--bnv-site-border-color-muted);
            padding-bottom: 10px;
        }

        /* 2.8.3 Layout Two */
        .block-title--three .row .section-head .section-head {
            display: flex;
            align-items: center;
            gap: 20px;
            flex: 1;
        }

        .block-title--three .row .section-head .section-head:after {
            content: '';
            position: relative;
            flex: 1;
            height: 2px;
            background: var(--bnv-site-border-color-muted);
        }

        /* 2.8.4 Layout Four */

    /* 
    MARK: 2.9 Sidebar Sticky
    */

        @media ( min-width: 769px ) {
            .blognova-main-wrap .content-wrapper.is-sticky {
                align-items: flex-start;
            }

            .blognova-main-wrap .content-wrapper.is-sticky .site-main {
                position: sticky;
                top: 0;
            }
        
            .blognova-main-wrap .content-wrapper.is-sticky .widget-area {
                position: sticky;
                top: 0;
            }
        }

    /* 
    MARK: 2.10 Table of Content
    */

        .bnv-single-toc {
            --bnv-site-bg-color: #fffdf8;
            background: var(--bnv-site-bg-color);
            border: 1px solid var(--bnv-site-toc-border-color);
            /* box-shadow:
                0 1px 2px rgba(0, 0, 0, 0.04),
                0 4px 16px rgba(0, 0, 0, 0.06); */
        }

        .bnv-dark .bnv-single-toc {
            --bnv-site-bg-color: #292c2f;
        }

        .bnv-single-toc .toc-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: 10px;
            user-select: none;
            cursor: pointer;
            padding: 18px 22px 16px;
        }

        .bnv-single-toc .toc-header .section-head {
            font-size: 0;
            display: flex;
            align-items: center;
            gap: 10px;
            margin: 0;
        }

        .bnv-single-toc .toc-header .section-head:before {
            content: '';
            display: inline-block;
            width: 18px;
            height: 2px;
            background: #b8945a;
            flex-shrink: 0;
        }

        .bnv-single-toc .toc-header .section-head .label {
            font-family: 'DM Sans', sans-serif;
            font-size: 10px;
            font-weight: 500;
            letter-spacing: 0.12em;
            text-transform: uppercase;
        }

        .bnv-single-toc .toc-header .toc-icon i {
            font-size: 11px;
            color: var(--bnv-site-color);
        }

        /* Content */
        /* List Style Dot */
            .bnv-single-toc.list--dot .toc-heading-title a:before {
                content: '';
                flex-shrink: 0;
                width: 6px;
                height: 6px;
                border-radius: 50%;
                background: #d4c4a8;
                border: 1.5px solid var(--bnv-site-toc-active-color);
                transition: var(--transition-1);
            }

            .bnv-single-toc.list--dot .toc-heading-title a:hover:before {
                background: var(--bnv-site-toc-active-color);
                transform: scale(1.3);
            }

        .bnv-single-toc .table-of-content {
            display: none;
            border-top: 1px solid var(--bnv-site-toc-border-color);
        }

        .bnv-single-toc .table-of-content.open {
            display: block;
        }

        .bnv-single-toc .table-of-content ul li a {
            font-size: 13px;
            font-weight: 400;
            line-height: 1.45;
            letter-spacing: 0.01em;
            color: var(--bnv-site-color);
            display: flex;
            gap: 12px;
            padding: 12px 20px 12px 22px;
            margin-left: -1px;
            border-left: 2px solid transparent;
        }

        .bnv-single-toc .table-of-content ul li a:hover {
            border-color: var(--bnv-site-toc-active-color);
            color: var(--bnv-site-toc-active-color);
            background: linear-gradient(90deg, #faf3e8 0%, transparent 100%);
        }

        .bnv-dark .bnv-single-toc .table-of-content ul li a:hover {
            background: linear-gradient(90deg, #faf3e81f 0%, transparent 100%);
        }

        .bnv-single-toc .table-of-content ul li.active a {
            border-color: var(--bnv-site-toc-active-color);
            color: var(--bnv-site-toc-active-color);
        }

        .bnv-single-toc .table-of-content ul li a .numberiing-prefix {
            margin-top: 1px;
        }

        /* Fixed */
        .bnv-single-toc.fixed {
            position: fixed;
            top: 50%;
            left: 20px;
            transform: translateY(-7rem);
            z-index: 1;
            width: 300px;
        }

        .bnv-single-toc.fixed.position--right {
            right: 20px; 
            left: initial;
        }

        .bnv-single-toc.fixed .toc-list-item-wrap {
            max-height: 300px;
            overflow-y: auto;
            scrollbar-width: thin;
            scrollbar-color: #dddddd transparent;
        }

    /* 
    MARK: 2.11 Slick Initialized
    */
        
        .bnv-main-banner .entry-content:not(.slick-initialized) .bnv-article + .bnv-article {
            display: none;
        }

    /* 
    MARK: 2.12 Banner Sidebar Widgets
    */

        .banner-sidebar {
            max-height: 610px;
            overflow-y: auto;
            scrollbar-width: thin;
            scrollbar-color: #dddddd transparent;
        }

        .banner-sidebar .article-wrap {
            display: grid;
            gap: 25px;
        }

        .banner-sidebar .article-wrap .bnv-article {
            display: grid;
            gap: 17px;
        }

        .banner-sidebar .bnv-article .entry-inner {
            gap: 8px;
        }

        .banner-sidebar .bnv-article .entry-inner .entry-title {
            -webkit-line-clamp: 2;
        }

        /* Grid */
        .banner-sidebar.layout--grid .bnv-article-figure {
            aspect-ratio: 16 / 9;
        }

        /* List */
        .banner-sidebar.layout--list .bnv-article {
            display: flex;
            align-items: center;
            gap: 20px;
        }

        .banner-sidebar.layout--list .article-wrap {
            gap: 20px;
        }

        .banner-sidebar.layout--list .bnv-article:not(:last-child) {
            padding-bottom: 20px;
            border-bottom: 1px solid var(--bnv-site-border-color-muted);
        }

        .banner-sidebar.layout--list .bnv-article .bnv-article-figure {
            width: 100px;
            height: 100px;
        }

        .banner-sidebar.layout--list .bnv-article .entry-inner {
            flex: 1;
        }

        .banner-sidebar.layout--list .bnv-article .entry-inner .entry-title,
        .banner-sidebar.layout--list .bnv-article .entry-inner .entry-title a {
            --bnv-site-font-size: 16px;
        }

    /* 
    MARK: Card Settings
    */

        /* .bnv-article {

        } */