/*==============================================================
    SINGLE BLOG PAGE
    CSS PART 1
    HERO
    TYPOGRAPHY
    FEATURED IMAGE
==============================================================*/


/*==============================================================
    VARIABLES
==============================================================*/

:root{

    --single-blog-primary:#14342B;
    --single-blog-primary-light:#1D4B3F;

    --single-blog-secondary:#B88A44;

    --single-blog-heading:#1B1B1B;

    --single-blog-text:#5F6670;

    --single-blog-border:#E7ECE9;

    --single-blog-bg:#FFFFFF;

    --single-blog-bg-light:#F7F9F8;

    --single-blog-shadow-sm:0 12px 30px rgba(0,0,0,.05);

    --single-blog-shadow-md:0 18px 45px rgba(0,0,0,.08);

    --single-blog-shadow-lg:0 35px 80px rgba(0,0,0,.12);

}


/*==============================================================
    PAGE
==============================================================*/

.single-blog-page{

    background:var(--single-blog-bg);

    overflow:hidden;

    color:var(--single-blog-text);

}


/*==============================================================
    READING PROGRESS
==============================================================*/

.single-blog-progress{

    position:fixed;

    top:0;

    left:0;

    width:0;

    height:4px;

    background:var(--single-blog-secondary);

    z-index:9999;

    transition:width .15s linear;

}


/*==============================================================
    GLOBAL TYPOGRAPHY
==============================================================*/

.single-blog-page h1,

.single-blog-page h2,

.single-blog-page h3,

.single-blog-page h4,

.single-blog-page h5{

    color:var(--single-blog-heading);

    font-weight:700;

    line-height:1.25;

}

.single-blog-page p{

    color:var(--single-blog-text);

    line-height:2;

    font-size:1.05rem;

}


/*==============================================================
    HERO
==============================================================*/

.single-blog-hero{

    position:relative;

    padding:90px 0 70px;

    background:linear-gradient(
        180deg,
        #F7F9F8,
        #FFFFFF
    );

}

.single-blog-hero::before{

    content:"";

    position:absolute;

    width:600px;

    height:600px;

    border-radius:50%;

    background:rgba(184,138,68,.05);

    right:-220px;

    top:-220px;

}


/*==============================================================
    BREADCRUMB
==============================================================*/

.single-blog-breadcrumb{

    margin-bottom:45px;

}

.single-blog-breadcrumb ol{

    display:flex;

    flex-wrap:wrap;

    gap:12px;

    list-style:none;

    padding:0;

    margin:0;

}

.single-blog-breadcrumb li{

    color:#888;

    font-size:.95rem;

}

.single-blog-breadcrumb li::after{

    content:"/";

    margin-left:12px;

}

.single-blog-breadcrumb li:last-child::after{

    display:none;

}

.single-blog-breadcrumb a{

    text-decoration:none;

    color:var(--single-blog-text);

    transition:.3s;

}

.single-blog-breadcrumb a:hover{

    color:var(--single-blog-secondary);

}


/*==============================================================
    CATEGORY
==============================================================*/

.single-blog-category{

    display:inline-flex;

    align-items:center;

    gap:10px;

    padding:12px 24px;

    border-radius:50px;

    background:rgba(20,52,43,.08);

    color:var(--single-blog-primary);

    font-weight:600;

    margin-bottom:28px;

}

.single-blog-category i{

    color:var(--single-blog-secondary);

}


/*==============================================================
    TITLE
==============================================================*/

.single-blog-title{

    font-size:clamp(2.8rem,5vw,4.5rem);

    margin-bottom:28px;

    line-height:1.15;

    max-width:900px;

}

.single-blog-subtitle{

    max-width:760px;

    font-size:1.15rem;

    margin-bottom:45px;

}


/*==============================================================
    META
==============================================================*/

.single-blog-meta{

    display:flex;

    flex-wrap:wrap;

    gap:22px;

}

.single-blog-meta-item{

    display:flex;

    align-items:center;

    gap:18px;

    padding:18px 22px;

    border-radius:18px;

    background:#fff;

    border:1px solid var(--single-blog-border);

    box-shadow:var(--single-blog-shadow-sm);

}

.single-blog-meta-item i{

    width:50px;

    height:50px;

    border-radius:14px;

    display:flex;

    justify-content:center;

    align-items:center;

    background:rgba(20,52,43,.08);

    color:var(--single-blog-primary);

    font-size:1.2rem;

}

.single-blog-meta-item small{

    display:block;

    color:#888;

    margin-bottom:4px;

}

.single-blog-meta-item strong{

    color:var(--single-blog-heading);

}


/*==============================================================
    FEATURED IMAGE
==============================================================*/

.single-blog-featured-section{

    padding-bottom:80px;

}

.single-blog-featured-image{

    margin:0;

}

.single-blog-featured-image img{

    width:100%;

    border-radius:30px;

    display:block;

    box-shadow:var(--single-blog-shadow-lg);

    transition:1s;

}

.single-blog-featured-image:hover img{

    transform:scale(1.02);

}

.single-blog-featured-image figcaption{

    margin-top:18px;

    text-align:center;

    color:#7A7A7A;

    font-size:.95rem;

    font-style:italic;

}


/*==============================================================
    ARTICLE INFORMATION
==============================================================*/

.single-blog-information{

    padding-bottom:100px;

}

.single-blog-information-box{

    background:#fff;

    border:1px solid var(--single-blog-border);

    border-radius:30px;

    padding:45px;

    box-shadow:var(--single-blog-shadow-md);

}


/*==============================================================
    AUTHOR
==============================================================*/

.single-blog-author{

    display:flex;

    align-items:center;

    gap:20px;

}

.single-blog-author img{

    width:90px;

    height:90px;

    border-radius:50%;

    object-fit:cover;

}

.single-blog-author span{

    display:block;

    color:#888;

    margin-bottom:6px;

}

.single-blog-author h4{

    margin-bottom:8px;

}

.single-blog-author p{

    margin:0;

    font-size:.95rem;

}


/*==============================================================
    SUMMARY
==============================================================*/

.single-blog-summary h5{

    margin-bottom:18px;

}

.single-blog-summary p{

    margin:0;

}


/*==============================================================
    READING CARD
==============================================================*/

.single-blog-reading-card{

    display:flex;

    flex-direction:column;

    gap:18px;

}

.single-blog-reading-item{

    padding:18px;

    border-radius:18px;

    background:var(--single-blog-bg-light);

}

.single-blog-reading-item h4{

    color:var(--single-blog-primary);

    margin-bottom:6px;

}

.single-blog-reading-item span{

    color:#777;

}


/*==============================================================
    SECTION TAG
==============================================================*/

.single-blog-section-tag{

    display:inline-flex;

    align-items:center;

    gap:12px;

    color:var(--single-blog-secondary);

    text-transform:uppercase;

    letter-spacing:2px;

    font-size:.85rem;

    font-weight:700;

}

.single-blog-section-tag::before{

    content:"";

    width:50px;

    height:2px;

    background:var(--single-blog-secondary);

}


/*==============================================================
    TEXT SELECTION
==============================================================*/

.single-blog-page ::selection{

    background:rgba(184,138,68,.25);

    color:#111;

}


/*==============================================================
    MOBILE
==============================================================*/

@media(max-width:767px){

.single-blog-hero{

padding:60px 0;

}

.single-blog-title{

font-size:2.3rem;

}

.single-blog-subtitle{

font-size:1rem;

}

.single-blog-meta{

flex-direction:column;

}

.single-blog-meta-item{

width:100%;

}

.single-blog-information-box{

padding:28px;

}

.single-blog-author{

flex-direction:column;

text-align:center;

}

.single-blog-reading-card{

margin-top:35px;

}

}


/*==============================================================
    TABLET
==============================================================*/

@media(min-width:768px) and (max-width:991px){

.single-blog-information-box{

padding:35px;

}

.single-blog-reading-card{

margin-top:35px;

}

}


/*==============================================================
    LARGE DESKTOP
==============================================================*/

@media(min-width:1400px){

.single-blog-title{

max-width:980px;

}

.single-blog-subtitle{

max-width:820px;

}

}


/*==============================================================
    SINGLE BLOG PAGE
    CSS PART 2
    ARTICLE
    SIDEBAR
    CONTENT COMPONENTS
==============================================================*/


/*==============================================================
    ARTICLE LAYOUT
==============================================================*/

.single-blog-article{

    padding:30px 0 120px;

}

.single-blog-content{

    max-width:760px;

    margin:0 auto;

}

.single-blog-content section{

    margin-bottom:90px;

}



/*==============================================================
    STICKY SIDEBAR
==============================================================*/

.single-blog-sidebar{

    position:sticky;

    top:110px;

}

.single-blog-sidebar-card{

    background:#ffffff;

    border:1px solid var(--single-blog-border);

    border-radius:24px;

    padding:28px;

    margin-bottom:24px;

    box-shadow:var(--single-blog-shadow-sm);

}

.single-blog-sidebar-card h4{

    margin-bottom:22px;

    color:var(--single-blog-primary);

}



/*==============================================================
    TABLE OF CONTENTS
==============================================================*/

.single-blog-toc{

    max-height:360px;

    overflow-y:auto;

    padding-right:8px;

}

.single-blog-toc ul{

    margin:0;

    padding:0;

    list-style:none;

}

.single-blog-toc li{

    margin-bottom:8px;

}

.single-blog-toc a{

    display:block;

    padding:12px 16px;

    border-radius:12px;

    color:var(--single-blog-text);

    text-decoration:none;

    transition:.3s;

    font-weight:500;

}

.single-blog-toc a:hover,

.single-blog-toc a.active{

    background:rgba(20,52,43,.08);

    color:var(--single-blog-primary);

    border-left:4px solid var(--single-blog-secondary);

    padding-left:20px;

}

/* Custom Scrollbar */

.single-blog-toc::-webkit-scrollbar{

    width:6px;

}

.single-blog-toc::-webkit-scrollbar-thumb{

    background:rgba(184,138,68,.45);

    border-radius:20px;

}

.single-blog-toc::-webkit-scrollbar-track{

    background:#F4F4F4;

}



/*==============================================================
    SHARE BUTTONS
==============================================================*/

.single-blog-share{

    display:flex;

    gap:12px;

    flex-wrap:wrap;

}

.single-blog-share a{

    width:46px;

    height:46px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

    background:var(--single-blog-bg-light);

    color:var(--single-blog-primary);

    text-decoration:none;

    transition:.35s;

}

.single-blog-share a:hover{

    background:var(--single-blog-primary);

    color:#ffffff;

    transform:translateY(-3px);

}



/*==============================================================
    QUICK FACTS
==============================================================*/

.single-blog-facts{

    list-style:none;

    margin:0;

    padding:0;

}

.single-blog-facts li{

    display:flex;

    justify-content:space-between;

    padding:14px 0;

    border-bottom:1px solid var(--single-blog-border);

}

.single-blog-facts li:last-child{

    border-bottom:none;

}

.single-blog-facts strong{

    color:var(--single-blog-primary);

}



/*==============================================================
    ARTICLE TYPOGRAPHY
==============================================================*/

.single-blog-content h2{

    font-size:2.2rem;

    margin-bottom:28px;

    position:relative;

    padding-bottom:16px;

}

.single-blog-content h2::after{

    content:"";

    width:70px;

    height:4px;

    border-radius:20px;

    background:var(--single-blog-secondary);

    position:absolute;

    left:0;

    bottom:0;

}

.single-blog-content h3{

    margin:45px 0 22px;

    font-size:1.6rem;

}

.single-blog-content p{

    margin-bottom:24px;

}



/*==============================================================
    DROP CAP
==============================================================*/

.single-blog-lead:first-letter{

    float:left;

    font-size:4.8rem;

    line-height:.85;

    margin-right:14px;

    color:var(--single-blog-secondary);

    font-weight:700;

}



/*==============================================================
    LISTS
==============================================================*/

.single-blog-content ul:not(.single-blog-facts):not(.single-blog-checklist){

    padding-left:22px;

}

.single-blog-content li{

    margin-bottom:14px;

    line-height:1.9;

}



/*==============================================================
    CHECKLIST
==============================================================*/

.single-blog-checklist{

    list-style:none;

    padding:0;

    margin:35px 0;

}

.single-blog-checklist li{

    position:relative;

    padding-left:42px;

    margin-bottom:18px;

}

.single-blog-checklist li::before{

    content:"✓";

    position:absolute;

    left:0;

    top:0;

    width:26px;

    height:26px;

    border-radius:50%;

    background:rgba(20,52,43,.08);

    color:var(--single-blog-secondary);

    display:flex;

    align-items:center;

    justify-content:center;

    font-weight:700;

}



/*==============================================================
    QUOTE
==============================================================*/

.single-blog-quote{

    position:relative;

    margin:80px 0;

    padding:50px;

    border-left:6px solid var(--single-blog-secondary);

    background:var(--single-blog-bg-light);

    border-radius:0 24px 24px 0;

}

.single-blog-quote i{

    font-size:2.5rem;

    color:rgba(184,138,68,.35);

    margin-bottom:18px;

}

.single-blog-quote p{

    font-size:1.35rem;

    line-height:1.8;

    font-style:italic;

}

.single-blog-quote cite{

    display:block;

    margin-top:24px;

    font-weight:700;

    color:var(--single-blog-primary);

}



/*==============================================================
    STATISTICS
==============================================================*/

.single-blog-statistics{

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:24px;

    margin:70px 0;

}

.single-blog-stat{

    text-align:center;

    padding:35px 25px;

    border-radius:24px;

    background:#ffffff;

    border:1px solid var(--single-blog-border);

    box-shadow:var(--single-blog-shadow-sm);

    transition:.35s;

}

.single-blog-stat:hover{

    transform:translateY(-8px);

    box-shadow:var(--single-blog-shadow-lg);

}

.single-blog-stat h3{

    font-size:3rem;

    color:var(--single-blog-secondary);

    margin-bottom:10px;

}



/*==============================================================
    HIGHLIGHT
==============================================================*/

.single-blog-highlight{

    display:flex;

    gap:24px;

    align-items:flex-start;

    margin:70px 0;

    padding:35px;

    border-radius:24px;

    background:rgba(184,138,68,.08);

}

.single-blog-highlight-icon{

    width:70px;

    height:70px;

    flex-shrink:0;

    border-radius:18px;

    background:#ffffff;

    display:flex;

    align-items:center;

    justify-content:center;

    color:var(--single-blog-secondary);

    font-size:1.7rem;

}



/*==============================================================
    INFO BOX
==============================================================*/

.single-blog-info-box{

    margin:70px 0;

    padding:35px;

    border-left:5px solid var(--single-blog-primary);

    background:rgba(20,52,43,.05);

    border-radius:0 20px 20px 0;

}

.single-blog-info-box h4{

    margin-bottom:16px;

    color:var(--single-blog-primary);

}



/*==============================================================
    IMAGES
==============================================================*/

.single-blog-image{

    margin:80px 0;

}

.single-blog-image img{

    width:100%;

    display:block;

    border-radius:24px;

    box-shadow:var(--single-blog-shadow-lg);

    transition:1s;

}

.single-blog-image:hover img{

    transform:scale(1.02);

}

.single-blog-image figcaption{

    margin-top:18px;

    text-align:center;

    color:#7A7A7A;

    font-style:italic;

}



/*==============================================================
    TWO COLUMN
==============================================================*/

.single-blog-two-column{

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:30px;

    margin:70px 0;

}

.single-blog-two-column > div{

    background:#ffffff;

    border:1px solid var(--single-blog-border);

    border-radius:22px;

    padding:30px;

    box-shadow:var(--single-blog-shadow-sm);

}

.single-blog-two-column h3{

    margin-top:0;

}



/*==============================================================
    RESPONSIVE
==============================================================*/

@media(max-width:991px){

.single-blog-sidebar{

position:relative;

top:auto;

margin-bottom:50px;

}

.single-blog-content{

max-width:100%;

}

.single-blog-statistics{

grid-template-columns:1fr;

}

.single-blog-two-column{

grid-template-columns:1fr;

}

}

@media(max-width:767px){

.single-blog-article{

padding:20px 0 70px;

}

.single-blog-content section{

margin-bottom:60px;

}

.single-blog-content h2{

font-size:1.9rem;

}

.single-blog-quote{

padding:30px;

}

.single-blog-highlight{

flex-direction:column;

padding:28px;

}

.single-blog-info-box{

padding:28px;

}

}


/*==============================================================
    SINGLE BLOG PAGE
    CSS PART 3
    FAQ
    TAGS
    SHARE
    AUTHOR
    RELATED ARTICLES
==============================================================*/


/*==============================================================
    SECTION HEADING
==============================================================*/

.single-blog-section-heading{

    text-align:center;

    margin-bottom:70px;

}

.single-blog-section-heading span{

    display:inline-flex;

    align-items:center;

    gap:12px;

    color:var(--single-blog-secondary);

    font-size:.85rem;

    text-transform:uppercase;

    letter-spacing:2px;

    font-weight:700;

    margin-bottom:18px;

}

.single-blog-section-heading span::before{

    content:"";

    width:45px;

    height:2px;

    background:var(--single-blog-secondary);

}

.single-blog-section-heading h2{

    font-size:clamp(2rem,4vw,3rem);

    margin:0;

}



/*==============================================================
    FAQ
==============================================================*/

.single-blog-faq{

    margin:120px 0;

}

.single-blog-faq .accordion-item{

    border:none;

    overflow:hidden;

    margin-bottom:22px;

    border-radius:22px;

    background:#ffffff;

    box-shadow:var(--single-blog-shadow-sm);

}

.single-blog-faq .accordion-button{

    padding:28px 32px;

    font-size:1.08rem;

    font-weight:600;

    color:var(--single-blog-primary);

    background:#ffffff;

    box-shadow:none;

}

.single-blog-faq .accordion-button:not(.collapsed){

    background:rgba(20,52,43,.05);

    color:var(--single-blog-primary);

}

.single-blog-faq .accordion-button:focus{

    box-shadow:none;

}

.single-blog-faq .accordion-body{

    padding:30px 32px;

    line-height:2;

    color:var(--single-blog-text);

}



/*==============================================================
    TAGS + SHARE
==============================================================*/

.single-blog-footer{

    display:flex;

    justify-content:space-between;

    align-items:center;

    flex-wrap:wrap;

    gap:30px;

    padding:45px 0;

    margin:80px 0;

    border-top:1px solid var(--single-blog-border);

    border-bottom:1px solid var(--single-blog-border);

}

.single-blog-tags,

.single-blog-share-footer{

    display:flex;

    align-items:center;

    flex-wrap:wrap;

    gap:15px;

}

.single-blog-tags span,

.single-blog-share-footer span{

    font-weight:700;

    color:var(--single-blog-primary);

    margin-right:10px;

}

.single-blog-tags a{

    padding:12px 18px;

    border-radius:50px;

    background:var(--single-blog-bg-light);

    color:var(--single-blog-primary);

    text-decoration:none;

    border:1px solid var(--single-blog-border);

    transition:.35s;

}

.single-blog-tags a:hover{

    background:var(--single-blog-primary);

    color:#ffffff;

}

.single-blog-share-footer a{

    width:48px;

    height:48px;

    display:flex;

    justify-content:center;

    align-items:center;

    border-radius:50%;

    background:var(--single-blog-bg-light);

    color:var(--single-blog-primary);

    transition:.35s;

    text-decoration:none;

}

.single-blog-share-footer a:hover{

    background:var(--single-blog-secondary);

    color:#ffffff;

    transform:translateY(-4px);

}



/*==============================================================
    AUTHOR BOX
==============================================================*/

.single-blog-author-box{

    display:flex;

    align-items:center;

    gap:35px;

    margin:120px 0;

    padding:45px;

    border-radius:28px;

    background:linear-gradient(
        135deg,
        rgba(20,52,43,.04),
        rgba(184,138,68,.08)
    );

}

.single-blog-author-box img{

    width:140px;

    height:140px;

    border-radius:50%;

    object-fit:cover;

    flex-shrink:0;

    border:5px solid #ffffff;

    box-shadow:var(--single-blog-shadow-md);

}

.single-blog-author-box span{

    display:block;

    color:var(--single-blog-secondary);

    font-weight:700;

    text-transform:uppercase;

    letter-spacing:1px;

    margin-bottom:10px;

}

.single-blog-author-box h3{

    margin-bottom:18px;

}

.single-blog-author-box p{

    margin:0;

}



/*==============================================================
    RELATED ARTICLES
==============================================================*/

.single-blog-related{

    margin:120px 0;

}

.single-blog-related-card{

    background:#ffffff;

    border-radius:26px;

    overflow:hidden;

    border:1px solid var(--single-blog-border);

    height:100%;

    transition:.4s;

    box-shadow:var(--single-blog-shadow-sm);

}

.single-blog-related-card:hover{

    transform:translateY(-10px);

    box-shadow:var(--single-blog-shadow-lg);

}

.single-blog-related-card img{

    width:100%;

    display:block;

    transition:1s;

}

.single-blog-related-card:hover img{

    transform:scale(1.08);

}

.single-blog-related-content{

    padding:30px;

}

.single-blog-related-content span{

    display:inline-block;

    padding:8px 16px;

    border-radius:40px;

    background:rgba(20,52,43,.08);

    color:var(--single-blog-primary);

    font-size:.82rem;

    font-weight:600;

    margin-bottom:18px;

}

.single-blog-related-content h4{

    font-size:1.35rem;

    line-height:1.5;

    margin-bottom:24px;

    transition:.35s;

}

.single-blog-related-card:hover h4{

    color:var(--single-blog-secondary);

}

.single-blog-related-content a{

    display:inline-flex;

    align-items:center;

    gap:10px;

    text-decoration:none;

    color:var(--single-blog-primary);

    font-weight:700;

    transition:.35s;

}

.single-blog-related-content a i{

    transition:.35s;

}

.single-blog-related-card:hover a{

    color:var(--single-blog-secondary);

}

.single-blog-related-card:hover a i{

    transform:translateX(8px);

}



/*==============================================================
    RESPONSIVE
==============================================================*/

@media(max-width:991px){

.single-blog-author-box{

flex-direction:column;

text-align:center;

}

}

@media(max-width:767px){

.single-blog-faq{

margin:70px 0;

}

.single-blog-footer{

flex-direction:column;

align-items:flex-start;

padding:35px 0;

}

.single-blog-author-box{

padding:30px;

margin:70px 0;

}

.single-blog-author-box img{

width:110px;

height:110px;

}

.single-blog-related{

margin:70px 0;

}

.single-blog-related-content{

padding:24px;

}

}

/*==============================================================
    SINGLE BLOG PAGE
    CSS PART 4
    CONVERSION SECTIONS
==============================================================*/


/*==============================================================
    ARTICLE NAVIGATION
==============================================================*/

.single-blog-navigation{

    margin:120px 0 100px;

}

.single-blog-nav-card{

    display:block;

    padding:38px;

    border-radius:28px;

    text-decoration:none;

    background:#ffffff;

    border:1px solid var(--single-blog-border);

    box-shadow:var(--single-blog-shadow-sm);

    transition:.35s;

    height:100%;

}

.single-blog-nav-card:hover{

    transform:translateY(-8px);

    box-shadow:var(--single-blog-shadow-lg);

}

.single-blog-nav-card span{

    display:flex;

    align-items:center;

    gap:12px;

    margin-bottom:20px;

    font-size:.9rem;

    font-weight:700;

    color:var(--single-blog-secondary);

    text-transform:uppercase;

    letter-spacing:1px;

}

.single-blog-nav-card h4{

    color:var(--single-blog-primary);

    line-height:1.5;

    margin:0;

    transition:.3s;

}

.single-blog-nav-card:hover h4{

    color:var(--single-blog-secondary);

}

.single-blog-nav-card.next{

    text-align:right;

}

.single-blog-nav-card.next span{

    justify-content:flex-end;

}



/*==============================================================
    NEWSLETTER
==============================================================*/

.single-blog-newsletter{

    margin:120px 0;

}

.single-blog-newsletter-box{

    position:relative;

    overflow:hidden;

    padding:70px;

    border-radius:34px;

    background:linear-gradient(
        135deg,
        var(--single-blog-primary),
        var(--single-blog-primary-light)
    );

    box-shadow:var(--single-blog-shadow-lg);

}

.single-blog-newsletter-box::before{

    content:"";

    position:absolute;

    width:500px;

    height:500px;

    border-radius:50%;

    background:rgba(255,255,255,.05);

    top:-220px;

    right:-180px;

}

.single-blog-newsletter h2{

    color:#ffffff;

    margin:20px 0 24px;

    font-size:clamp(2rem,4vw,3rem);

}

.single-blog-newsletter p{

    color:rgba(255,255,255,.88);

}

.single-blog-newsletter-list{

    list-style:none;

    padding:0;

    margin:35px 0 0;

}

.single-blog-newsletter-list li{

    display:flex;

    align-items:center;

    gap:14px;

    margin-bottom:16px;

    color:#ffffff;

    font-weight:500;

}

.single-blog-newsletter-list i{

    width:30px;

    height:30px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

    background:rgba(255,255,255,.12);

    color:#E9D6AE;

}



/*==============================================================
    NEWSLETTER FORM
==============================================================*/

.single-blog-newsletter-form{

    background:#ffffff;

    padding:36px;

    border-radius:28px;

    box-shadow:var(--single-blog-shadow-md);

}

.single-blog-form-group{

    display:flex;

    align-items:center;

    gap:15px;

    border:1px solid var(--single-blog-border);

    border-radius:60px;

    padding:16px 22px;

    margin-bottom:20px;

}

.single-blog-form-group i{

    color:var(--single-blog-secondary);

    font-size:1.1rem;

}

.single-blog-form-group input{

    width:100%;

    border:none;

    outline:none;

    background:transparent;

    font-size:1rem;

}



/*==============================================================
    BUTTONS
==============================================================*/

.single-blog-btn-primary,

.single-blog-btn-outline{

    display:inline-flex;

    justify-content:center;

    align-items:center;

    text-decoration:none;

    border-radius:60px;

    font-weight:700;

    transition:.35s;

}

.single-blog-btn-primary{

    width:100%;

    padding:18px;

    background:var(--single-blog-secondary);

    color:#ffffff;

    border:none;

}

.single-blog-btn-primary:hover{

    background:#9E7335;

    color:#ffffff;

    transform:translateY(-2px);

}

.single-blog-btn-outline{

    padding:18px 34px;

    border:2px solid rgba(255,255,255,.18);

    color:#ffffff;

}

.single-blog-btn-outline:hover{

    background:#ffffff;

    color:var(--single-blog-primary);

}



/*==============================================================
    CONSULTATION CTA
==============================================================*/

.single-blog-cta{

    margin:120px 0;

}

.single-blog-cta-box{

    position:relative;

    overflow:hidden;

    padding:80px;

    border-radius:36px;

    background:linear-gradient(
        135deg,
        rgba(20,52,43,.05),
        rgba(184,138,68,.10)
    );

    border:1px solid rgba(184,138,68,.18);

}

.single-blog-cta-box::before{

    content:"";

    position:absolute;

    width:420px;

    height:420px;

    border-radius:50%;

    background:rgba(184,138,68,.05);

    right:-180px;

    bottom:-180px;

}

.single-blog-cta h2{

    margin:18px 0 24px;

    font-size:clamp(2rem,4vw,3rem);

}

.single-blog-cta-buttons{

    display:flex;

    flex-direction:column;

    gap:18px;

}

.single-blog-cta-buttons .single-blog-btn-outline{

    border-color:var(--single-blog-primary);

    color:var(--single-blog-primary);

}

.single-blog-cta-buttons .single-blog-btn-outline:hover{

    background:var(--single-blog-primary);

    color:#ffffff;

}



/*==============================================================
    BACK TO BLOG
==============================================================*/

.single-blog-back{

    margin:90px 0 30px;

    text-align:center;

}

.single-blog-back-link{

    display:inline-flex;

    align-items:center;

    gap:12px;

    padding:16px 32px;

    border-radius:50px;

    text-decoration:none;

    background:var(--single-blog-bg-light);

    color:var(--single-blog-primary);

    border:1px solid var(--single-blog-border);

    font-weight:600;

    transition:.35s;

}

.single-blog-back-link:hover{

    background:var(--single-blog-primary);

    color:#ffffff;

    transform:translateY(-4px);

}



/*==============================================================
    RESPONSIVE
==============================================================*/

@media(max-width:991px){

.single-blog-navigation,

.single-blog-newsletter,

.single-blog-cta{

margin:80px 0;

}

.single-blog-newsletter-box,

.single-blog-cta-box{

padding:50px;

}

.single-blog-newsletter-form{

margin-top:40px;

}

.single-blog-cta-buttons{

margin-top:35px;

}

}

@media(max-width:767px){

.single-blog-nav-card{

padding:28px;

}

.single-blog-nav-card.next{

text-align:left;

}

.single-blog-nav-card.next span{

justify-content:flex-start;

}

.single-blog-newsletter-box,

.single-blog-cta-box{

padding:35px 25px;

border-radius:24px;

}

.single-blog-newsletter-form{

padding:25px;

}

.single-blog-form-group{

padding:14px 18px;

}

.single-blog-cta-buttons{

gap:15px;

}

.single-blog-btn-outline{

width:100%;

}

.single-blog-back{

margin:60px 0 20px;

}

}

/*==============================================================
    SINGLE BLOG PAGE
    CSS PART 5
    FINAL POLISH
    ACCESSIBILITY
    ANIMATIONS
==============================================================*/


/*==============================================================
    READING PROGRESS BAR
==============================================================*/

.single-blog-progress{

    position:fixed;

    top:0;

    left:0;

    width:0;

    height:4px;

    background:linear-gradient(
        90deg,
        var(--single-blog-secondary),
        #D8B06A
    );

    z-index:99999;

    transition:width .12s linear;

    box-shadow:0 2px 10px rgba(184,138,68,.35);

}



/*==============================================================
    SMOOTH SCROLLING
==============================================================*/

html{

    scroll-behavior:smooth;

}

.single-blog-content section{

    scroll-margin-top:110px;

}



/*==============================================================
    ACTIVE TABLE OF CONTENTS
==============================================================*/

.single-blog-toc a.active{

    background:rgba(20,52,43,.08);

    color:var(--single-blog-primary);

    border-left:4px solid var(--single-blog-secondary);

    font-weight:700;

}



/*==============================================================
    SCROLL REVEAL
==============================================================*/

.single-blog-reveal{

    opacity:0;

    transform:translateY(35px);

    transition:

        opacity .8s ease,

        transform .8s ease;

}

.single-blog-reveal.active{

    opacity:1;

    transform:translateY(0);

}



/*==============================================================
    IMAGE EFFECTS
==============================================================*/

.single-blog-featured-image,

.single-blog-image{

    overflow:hidden;

    border-radius:28px;

}

.single-blog-featured-image img,

.single-blog-image img{

    will-change:transform;

}

.single-blog-featured-image:hover img,

.single-blog-image:hover img{

    transform:scale(1.04);

}



/*==============================================================
    CARD HOVER IMPROVEMENTS
==============================================================*/

.single-blog-sidebar-card,

.single-blog-stat,

.single-blog-related-card,

.single-blog-nav-card{

    transition:

        transform .35s ease,

        box-shadow .35s ease,

        border-color .35s ease;

}

.single-blog-sidebar-card:hover{

    border-color:rgba(184,138,68,.25);

    transform:translateY(-4px);

}



/*==============================================================
    BUTTON ANIMATION
==============================================================*/

.single-blog-btn-primary,

.single-blog-btn-outline{

    position:relative;

    overflow:hidden;

}

.single-blog-btn-primary::before,

.single-blog-btn-outline::before{

    content:"";

    position:absolute;

    inset:0;

    background:rgba(255,255,255,.12);

    transform:translateX(-100%);

    transition:transform .55s ease;

}

.single-blog-btn-primary:hover::before,

.single-blog-btn-outline:hover::before{

    transform:translateX(100%);

}



/*==============================================================
    LINK UNDERLINE
==============================================================*/

.single-blog-content a{

    color:var(--single-blog-secondary);

    text-decoration:none;

    background-image:

        linear-gradient(

            currentColor,

            currentColor

        );

    background-repeat:no-repeat;

    background-size:0 2px;

    background-position:left bottom;

    transition:background-size .3s ease;

}

.single-blog-content a:hover{

    background-size:100% 2px;

}



/*==============================================================
    TABLE SUPPORT
==============================================================*/

.single-blog-content table{

    width:100%;

    border-collapse:collapse;

    margin:50px 0;

    overflow:hidden;

    border-radius:18px;

    box-shadow:var(--single-blog-shadow-sm);

}

.single-blog-content th{

    background:var(--single-blog-primary);

    color:#ffffff;

    padding:18px;

}

.single-blog-content td{

    padding:18px;

    border-bottom:1px solid var(--single-blog-border);

}

.single-blog-content tr:nth-child(even){

    background:#FAFAFA;

}



/*==============================================================
    CODE BLOCK
==============================================================*/

.single-blog-content pre{

    padding:30px;

    overflow:auto;

    border-radius:20px;

    background:#18221F;

    color:#F5F5F5;

    margin:50px 0;

}

.single-blog-content code{

    font-family:Consolas, monospace;

}



/*==============================================================
    KEYBOARD ACCESSIBILITY
==============================================================*/

.single-blog-page a:focus,

.single-blog-page button:focus,

.single-blog-page input:focus{

    outline:3px solid rgba(184,138,68,.35);

    outline-offset:4px;

}



/*==============================================================
    REDUCED MOTION
==============================================================*/

@media (prefers-reduced-motion:reduce){

*{

animation:none!important;

transition:none!important;

scroll-behavior:auto!important;

}

}



/*==============================================================
    PRINT STYLES
==============================================================*/

@media print{

.single-blog-sidebar,

.single-blog-navigation,

.single-blog-newsletter,

.single-blog-cta,

.single-blog-back,

.single-blog-share,

.single-blog-share-footer,

header,

footer{

display:none!important;

}

.single-blog-page{

background:#ffffff;

color:#000000;

}

.single-blog-content{

max-width:100%;

}

.single-blog-featured-image img{

box-shadow:none;

}

a{

color:#000!important;

text-decoration:none!important;

}

}



/*==============================================================
    LARGE DESKTOP
==============================================================*/

@media(min-width:1600px){

.single-blog-content{

max-width:820px;

}

.single-blog-title{

font-size:5rem;

}

}



/*==============================================================
    MOBILE IMPROVEMENTS
==============================================================*/

@media(max-width:767px){

.single-blog-title{

line-height:1.2;

}

.single-blog-content p{

font-size:1rem;

}

.single-blog-content h2{

line-height:1.3;

}

.single-blog-quote p{

font-size:1.15rem;

}

.single-blog-stat h3{

font-size:2.3rem;

}

.single-blog-featured-image,

.single-blog-image{

border-radius:18px;

}

}



/*==============================================================
    UTILITIES
==============================================================*/

.single-blog-text-center{

text-align:center;

}

.single-blog-mb-0{

margin-bottom:0!important;

}

.single-blog-mt-0{

margin-top:0!important;

}

.single-blog-rounded{

border-radius:24px;

}

.single-blog-shadow{

box-shadow:var(--single-blog-shadow-lg);

}