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

.blog-hero{
    position:relative;
    overflow:hidden;
    background:linear-gradient(135deg,#F8FCFA 0%,#EEF7F2 100%);
    padding:130px 0 90px;
}
.blog-hero::before{
    content:"";
    position:absolute;
    width:420px;
    height:420px;
    top:-180px;
    right:-150px;
    border-radius:50%;
    background:rgba(11,125,77,.08);
}

.blog-hero::after{
    content:"";
    position:absolute;
    width:500px;
    height:500px;
    bottom:-250px;
    left:-180px;
    border-radius:50%;
    background:rgba(199,155,59,.08);
}
.blog-hero-content{
    margin-top:100px;
    max-width:760px;
    margin-right: auto;
    margin-left:auto;
    text-align:center;
}

.blog-eyebrow{
    display:inline-block;
    margin-bottom:18px;
    color:var(--brand-gold);
    font-size:.78rem;
    font-weight:700;
    letter-spacing:2px;
}

.blog-hero h1{
    margin:0 0 20px;
    color:var(--brand-green-dark);
    font-size:clamp(2rem,5vw,3.5rem);
    line-height:1.05;
}

.blog-hero p{
    margin:0;
    color:#66736D;
    font-size:1.05rem;
    line-height:1.8;
}


/*=========================================================*
* BLOG SECTION
*=========================================================*/

.blog-section{
    padding:90px 0 120px;
    background:#fff;
    padding-left:50px;
    padding-right:50px;
}


/*=========================================================*
* CATEGORIES
*=========================================================*/

.blog-categories{
    display:flex;
    align-items:center;
    gap:12px;
    flex-wrap:wrap;
    margin-bottom:70px;
}

.blog-categories a{
    display:inline-flex;
    align-items:center;
    padding:10px 20px;
    border:1px solid #DCE5E0;
    border-radius:10px;
    color:var(--brand-green-dark);
    background:#fff;
    font-size:.85rem;
    font-weight:600;
    text-decoration:none;
    transition:.3s ease;
}

.blog-categories a:hover{
    border-color:var(--brand-green);
    color:var(--brand-green);
    text-decoration:none;
}

.blog-categories a.active{
    background:var(--brand-green);
    border-color:var(--brand-green);
    color:#fff;
}


/*=========================================================*
* BLOG HEADING
*=========================================================*/

.blog-heading{
    max-width:720px;
    margin-bottom:45px;
}

.blog-heading-label{
    display:block;
    margin-bottom:12px;
    color:var(--brand-gold);
    font-size:.72rem;
    font-weight:700;
    letter-spacing:1.8px;
}

.blog-heading h2{
    margin:0 0 12px;
    color:var(--brand-green-dark);
    font-size:2.2rem;
}

.blog-heading p{
    margin:0;
    color:#6B7280;
    line-height:1.7;
}


/*=========================================================*
* BLOG GRID
*=========================================================*/

.blog-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:32px;
}


/*=========================================================*
* BLOG CARD
*=========================================================*/

.blog-card{
    overflow:hidden;
    display:flex;
    flex-direction:column;
    background:#fff;
    border:1px solid #E8EEEB;
    border-radius:28px;
    box-shadow:0 15px 40px rgba(11,61,46,.06);
    transition:.35s ease;
}

.blog-card:hover{
    transform:translateY(-7px);
    box-shadow:0 25px 55px rgba(11,61,46,.11);
}


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

.blog-card-image{
    position:relative;
    display:block;
    height:250px;
    overflow:hidden;
}

.blog-card-image img{
    width:100%;
    height:100%;
    object-fit:cover;
    transition:.5s ease;
}

.blog-card:hover .blog-card-image img{
    transform:scale(1.05);
}

.blog-featured{
    position:absolute;
    top:18px;
    left:18px;
    padding:7px 13px;
    border-radius:20px;
    background:var(--brand-gold);
    color:#fff;
    font-size:.7rem;
    font-weight:700;
}

.blog-card-placeholder{
    width:100%;
    height:100%;
    display:flex;
    align-items:center;
    justify-content:center;
    background:var(--brand-green-dark);
    color:var(--brand-gold);
    font-size:2rem;
}


/*=========================================================*
* CONTENT
*=========================================================*/

.blog-card-content{
    display:flex;
    flex-direction:column;
    flex:1;
    padding:27px;
}

.blog-card-category{
    margin-bottom:12px;
    color:var(--brand-green);
    font-size:.72rem;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:1px;
}

.blog-card h3{
    margin:0 0 13px;
    font-size:1.25rem;
    line-height:1.4;
}

.blog-card h3 a{
    color:var(--brand-green-dark);
    text-decoration:none;
    transition:.3s ease;
}

.blog-card h3 a:hover{
    color:var(--brand-green);
}

.blog-card-content > p{
    margin:0 0 25px;
    color:#6B7280;
    font-size:.88rem;
    line-height:1.7;
}


/*=========================================================*
* FOOTER
*=========================================================*/

.blog-card-footer{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:15px;
    margin-top:auto;
    padding-top:20px;
    border-top:1px solid #EDF1EF;
}

.blog-date{
    color:#89958F;
    font-size:.75rem;
}

.blog-read-more{
    color:var(--brand-green);
    font-size:.78rem;
    font-weight:700;
    text-decoration:none;
}

.blog-read-more i{
    margin-left:5px;
    transition:.3s ease;
}

.blog-read-more:hover{
    color:var(--brand-gold);
    text-decoration:none;
}

.blog-read-more:hover i{
    transform:translateX(4px);
}


/*=========================================================*
* EMPTY
*=========================================================*/

.blog-empty{
    grid-column:1/-1;
    padding:80px 20px;
    text-align:center;
}

.blog-empty i{
    margin-bottom:20px;
    color:var(--brand-gold);
    font-size:2.5rem;
}

.blog-empty h3{
    margin-bottom:10px;
    color:var(--brand-green-dark);
}

.blog-empty p{
    color:#6B7280;
}


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

@media (max-width:992px){

    .blog-grid{
        grid-template-columns:repeat(2,1fr);
    }

}


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

@media (max-width:767px){

    .blog-hero{
        padding:80px 0 65px;
    }

    .blog-hero-content{
        text-align:center;
        margin:auto;
    }

    .blog-hero h1{
        font-size:2.35rem;
    }

    .blog-hero p{
        font-size:.92rem;
        line-height:1.7;
    }

    .blog-section{
        padding:65px 0 85px;
    }

    .blog-categories{
        margin-bottom:50px;
        flex-wrap:nowrap;
        overflow-x:auto;
        padding-bottom:8px;
    }

    .blog-categories::-webkit-scrollbar{
        display:none;
    }

    .blog-categories a{
        flex:0 0 auto;
    }

    .blog-heading h2{
        font-size:1.8rem;
    }

    .blog-grid{
        grid-template-columns:repeat(2,1fr);
        gap:18px;
    }

    .blog-card{
        border-radius:20px;
    }

    .blog-card-image{
        height:170px;
    }

    .blog-card-content{
        padding:18px;
    }

    .blog-card h3{
        font-size:1rem;
    }

    .blog-card-content > p{
        font-size:.78rem;
        line-height:1.55;
    }

    .blog-card-footer{
        display:block;
    }

    .blog-date{
        display:block;
        margin-bottom:10px;
    }

    .blog-read-more{
        font-size:.72rem;
    }

}


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

@media (max-width:480px){

    .blog-grid{
        grid-template-columns:repeat(1,1fr);
        gap:18px;
    }
    .blog-card-image{
        height:145px;
    }

    .blog-card-content{
        padding:15px;
    }

    .blog-card h3{
        font-size:.92rem;
    }

    .blog-card-content > p{
        font-size:.74rem;
    }

}
/*=========================================================*
* BLOG DETAIL
*=========================================================*/
.blog-detail{
    background:#fff;
    padding-bottom:120px;
}
/*=========================================================*
* ARTICLE HEADER
*=========================================================*/
.blog-detail-header{
    position:relative;
    overflow:hidden;
    background:linear-gradient(135deg,#F8FCFA 0%,#EEF7F2 100%);
    padding:130px 0 90px;
}
.blog-detail-header::before{
    content:"";
    position:absolute;
    width:420px;
    height:420px;
    top:-180px;
    right:-150px;
    border-radius:50%;
    background:rgba(11,125,77,.08);
}

.blog-detail-header::after{
    content:"";
    position:absolute;
    width:500px;
    height:500px;
    bottom:-250px;
    left:-180px;
    border-radius:50%;
    background:rgba(199,155,59,.08);
}
.blog-detail-header .container{
    margin:auto;
    text-align:center;
    margin-top:70px;
}
.blog-detail-category{
    display:inline-block;
    margin-bottom:20px;
    color:var(--brand-gold);
    font-size:.75rem;
    font-weight:700;
    letter-spacing:1.5px;
    text-transform:uppercase;
    text-decoration:none;
}
.blog-detail-category:hover{
    color:var(--brand-gold);
    text-decoration:none;
}
.blog-detail-header h1{
    max-width:950px;
    margin:0 auto 22px;
    color:var(--brand-green-dark);
    font-size:clamp(2.4rem,5vw,4rem);
    line-height:1.12;
    text-transform: capitalize;
}
.blog-detail-excerpt{
    margin:0 auto 25px;
    color:#000;
    font-size:1.05rem;
    line-height:1.8;
}
.blog-detail-meta{
    display:flex;
    justify-content:center;
    align-items:center;
    gap:10px;
    color:#444;
    font-size:.8rem;
}
/*=========================================================*
* FEATURED IMAGE
*=========================================================*/

.blog-detail-image{
    position:relative;
    width:100%;
    max-width:1100px;
    height:520px;
    margin:35px auto 80px;
    overflow:hidden;
    border-radius:10px;
    box-shadow:0 25px 60px rgba(11,61,46,.12);
}
.blog-detail-image img{
    width:100%;
    height:100%;
    object-fit:cover;
}
/*=========================================================*
* ARTICLE LAYOUT
*=========================================================*/

.blog-detail-layout{
    display:grid;
    grid-template-columns:minmax(0, 1fr) 300px;
    gap:70px;
    max-width:1100px;
    margin:auto;
}
/*=========================================================*
* ARTICLE CONTENT
*=========================================================*/

.blog-detail-content{
    min-width:0;
    color:#4F5D57;
    font-size:1rem;
    line-height:1.9;
    text-align:justify;
}

.blog-detail-content h2{
    margin:45px 0 18px;
    color:var(--brand-green-dark);
    font-size:1.8rem;
    line-height:1.3;
}

.blog-detail-content h3{
    margin:35px 0 15px;
    color:var(--brand-green-dark);
    font-size:1.35rem;
}

.blog-detail-content p{
    margin:0 0 22px;
}

.blog-detail-content a{
    color:var(--brand-green);
    font-weight:600;
}

.blog-detail-content a:hover{
    color:var(--brand-gold);
}

.blog-detail-content img{
    max-width:100%;
    height:auto;
    border-radius:18px;
    margin:25px 0;
}

.blog-detail-content blockquote{
    margin:35px 0;
    padding:25px 30px;
    border-left:4px solid var(--brand-gold);
    background:#F7F9F8;
    color:var(--brand-green-dark);
    font-size:1.05rem;
    font-style:italic;
}

.blog-detail-content ul,
.blog-detail-content ol{
    margin:20px 0 25px;
    padding-left:25px;
}

.blog-detail-content li{
    margin-bottom:10px;
}


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

.blog-detail-sidebar{
    display:flex;
    flex-direction:column;
    gap:25px;
}

.blog-sidebar-card{
    padding:28px;
    border:1px solid #E5ECE8;
    border-radius:22px;
    background:#fff;
    box-shadow:0 12px 35px rgba(11,61,46,.05);
}

.blog-sidebar-label{
    display:block;
    margin-bottom:12px;
    color:var(--brand-gold);
    font-size:.68rem;
    font-weight:700;
    letter-spacing:1.5px;
}

.blog-sidebar-card h3{
    margin:0 0 12px;
    color:var(--brand-green-dark);
    font-size:1.25rem;
    line-height:1.4;
}

.blog-sidebar-card p{
    margin:0 0 20px;
    color:#6B7280;
    font-size:.82rem;
    line-height:1.7;
}

.blog-sidebar-card a{
    color:var(--brand-green);
    font-size:.78rem;
    font-weight:700;
    text-decoration:none;
}

.blog-sidebar-card a i{
    margin-left:5px;
    transition:.3s ease;
}

.blog-sidebar-card a:hover{
    color:var(--brand-gold);
}

.blog-sidebar-card a:hover i{
    transform:translateX(4px);
}


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

.blog-sidebar-cta{
    background:var(--brand-green-dark);
    border-color:var(--brand-green-dark);
}

.blog-sidebar-cta h3,
.blog-sidebar-cta p{
    color:#fff;
}

.blog-sidebar-cta p{
    opacity:.78;
}

.blog-sidebar-cta a{
    color:var(--brand-gold);
}


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

@media (max-width:992px){

    .blog-detail-layout{
        grid-template-columns:1fr;
        gap:50px;
    }

    .blog-detail-sidebar{
        display:grid;
        grid-template-columns:repeat(2,1fr);
    }

    .blog-detail-image{
        height:420px;
        margin-top:-25px;
    }

}


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

@media (max-width:767px){

    .blog-detail-header{
        padding:70px 20px 55px;
    }

    .blog-detail-header h1{
        font-size:2.15rem;
    }

    .blog-detail-excerpt{
        font-size:.9rem;
    }

    .blog-detail-meta{
        font-size:.72rem;
    }

    .blog-detail-image{
        height:260px;
        margin:-10px 15px 55px;
        width:calc(100% - 30px);
        border-radius:20px;
    }

    .blog-detail-layout{
        display:block;
        padding:0 20px;
    }

    .blog-detail-content{
        font-size:.92rem;
        line-height:1.8;
    }

    .blog-detail-content h2{
        font-size:1.5rem;
        margin-top:35px;
    }

    .blog-detail-content h3{
        font-size:1.2rem;
    }

    .blog-detail-sidebar{
        display:flex;
        margin-top:55px;
    }

    .blog-sidebar-card{
        padding:22px;
    }

}


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

@media (max-width:480px){

    .blog-detail-header h1{
        font-size:1.9rem;
    }

    .blog-detail-image{
        height:220px;
    }

}
/*=========================================================*
* BLOG PAGINATION
*=========================================================*/

.blog-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    margin-top: 60px;
}

.blog-page-numbers {
    display: flex;
    align-items: center;
    gap: 8px;
}

.blog-page-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;

    min-width: 42px;
    height: 42px;
    padding: 0 14px;

    border: 1px solid #DCE5E0;
    border-radius: 10px;

    background: #fff;
    color: var(--brand-green-dark);

    font-size: .78rem;
    font-weight: 600;

    text-decoration: none;

    transition: .3s ease;
}

.blog-page-link:hover {
    border-color: var(--brand-green);
    color: var(--brand-green);
}

.blog-page-link.active {
    border-color: var(--brand-green);
    background: var(--brand-green);
    color: #fff;
}


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

@media (max-width: 767px) {

    .blog-pagination {
        gap: 8px;
        margin-top: 45px;
    }

    .blog-page-numbers {
        gap: 5px;
    }

    .blog-page-link {
        min-width: 36px;
        height: 36px;
        padding: 0 10px;
        font-size: .7rem;
    }

}