/*==============================================================
    BLOG PAGE
    CSS PART 1
    HERO
    FEATURED
    SEARCH
    CATEGORIES
==============================================================*/


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

:root {

    --blog-primary: #14342B;
    --blog-primary-light: #1D4B3F;
    --blog-secondary: #B88A44;

    --blog-text: #222222;
    --blog-text-light: #6F7680;

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

    --blog-border: #E8ECEB;

    --blog-shadow-sm: 0 10px 25px rgba(0, 0, 0, .05);
    --blog-shadow-md: 0 18px 45px rgba(0, 0, 0, .08);
    --blog-shadow-lg: 0 30px 70px rgba(0, 0, 0, .12);

}



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

.blog-page {

    overflow: hidden;

}

.blog-section-tag {

    display: inline-flex;

    align-items: center;

    gap: 12px;

    color: var(--blog-secondary);

    font-size: .85rem;

    font-weight: 700;

    letter-spacing: 2px;

    text-transform: uppercase;

    margin-bottom: 20px;

}

.blog-section-tag::before {

    content: "";

    width: 50px;

    height: 2px;

    background: var(--blog-secondary);

}

.blog-section-title {

    color: var(--blog-secondary);

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

    font-weight: 700;

    margin-bottom: 20px;

    line-height: 1.2;

}

.blog-section-description {

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

    line-height: 1.9;

    font-size: 1.05rem;

}



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

.blog-hero {

    padding: 90px 0 120px;

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

    position: relative;

}

.blog-hero::after {

    content: "";

    position: absolute;

    width: 520px;

    height: 520px;

    border-radius: 50%;

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

    right: -180px;

    top: -180px;

}



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

.blog-breadcrumb {

    display: flex;

    gap: 10px;

    align-items: center;

    margin-bottom: 50px;

    font-size: .95rem;

}

.blog-breadcrumb a {

    text-decoration: none;

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

    transition: .3s;

}

.blog-breadcrumb a:hover {

    color: var(--blog-secondary);

}

.blog-breadcrumb span {

    color: #8a8a8a;

}



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

.blog-hero-title {

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

    color: var(--blog-secondary);

    line-height: 1.15;

    font-weight: 700;

    margin-bottom: 25px;

}

.blog-hero-description {

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

    font-size: 1.08rem;

    line-height: 2;

    margin-bottom: 35px;

}



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

.blog-hero-buttons {

    display: flex;

    gap: 18px;

    flex-wrap: wrap;

    margin-bottom: 45px;

}

.blog-btn-primary {

    background: var(--blog-primary);

    color: #fff;

    padding: 16px 34px;

    border-radius: 50px;

    font-weight: 600;

    transition: .35s;

}

.blog-btn-primary:hover {

    background: var(--blog-secondary);

    color: #fff;

    transform: translateY(-3px);

}

.blog-btn-outline {

    border: 2px solid var(--blog-primary);

    color: var(--blog-primary);

    padding: 16px 34px;

    border-radius: 50px;

    font-weight: 600;

    transition: .35s;

}

.blog-btn-outline:hover {

    background: var(--blog-primary);

    color: #fff;

}



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

.blog-hero-stats {

    display: flex;

    gap: 30px;

    flex-wrap: wrap;

}

.blog-stat {

    padding-right: 30px;

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

}

.blog-stat:last-child {

    border-right: none;

}

.blog-stat h3 {

    color: var(--blog-secondary);

    font-size: 2rem;

    font-weight: 700;

    margin-bottom: 5px;

}

.blog-stat span {

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

}



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

.blog-hero-image {

    position: relative;

}

.blog-hero-image img {

    width: 100%;

    border-radius: 28px;

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

}

.blog-floating-card {

    position: absolute;

    bottom: 30px;

    left: -30px;

    display: flex;

    align-items: center;

    gap: 16px;

    padding: 20px 25px;

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

    backdrop-filter: blur(12px);

    border-radius: 20px;

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

    animation: blogFloat 5s ease-in-out infinite;

}

.blog-floating-card i {

    width: 60px;

    height: 60px;

    display: flex;

    justify-content: center;

    align-items: center;

    border-radius: 18px;

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

    color: var(--blog-primary);

    font-size: 1.4rem;

}

.blog-floating-card h5 {

    color: var(--blog-secondary);

    margin-bottom: 4px;

}

.blog-floating-card span {

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

    font-size: .9rem;

}



/*==============================================================
    FEATURED ARTICLE
==============================================================*/

.blog-featured {

    padding: 120px 0;

}

.blog-featured-image {

    position: relative;

    overflow: hidden;

    border-radius: 30px;

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

}

.blog-featured-image img {

    width: 100%;

    transition: 1s;

}

.blog-featured-image:hover img {

    transform: scale(1.08);

}

.blog-featured-badge {

    position: absolute;

    left: 25px;

    top: 25px;

    background: var(--blog-secondary);

    color: #fff;

    padding: 10px 18px;

    border-radius: 40px;

    font-size: .85rem;

    font-weight: 600;

}

.blog-featured-content {

    padding-left: 35px;

}

.blog-category {

    display: inline-block;

    padding: 8px 18px;

    border-radius: 40px;

    background: rgba(238, 195, 6, 0.08);

    color: var(--blog-secondary);

    font-size: .85rem;

    font-weight: 600;

    margin-bottom: 20px;

}

.blog-featured-content h2 {

    color: var(--blog-secondary);

    font-size: 2.5rem;

    line-height: 1.25;

    margin-bottom: 20px;

}

.blog-featured-content p {

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

    line-height: 2;

}



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

.blog-meta {

    display: flex;

    gap: 25px;

    flex-wrap: wrap;

    margin: 30px 0;

}

.blog-meta span {

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

}

.blog-meta i {

    color: var(--blog-secondary);

    margin-right: 6px;

}

.blog-read-more {

    display: inline-flex;

    align-items: center;

    gap: 12px;

    color: var(--blog-secondary);

    font-weight: 700;

    text-decoration: none;

}

.blog-read-more i {

    transition: .35s;

}

.blog-read-more:hover i {

    transform: translateX(8px);

}



/*==============================================================
    SEARCH
==============================================================*/

.blog-search-section {

    padding-bottom: 120px;

}

.blog-search-wrapper {

    background: var(--blog-primary);

    border-radius: 30px;

    padding: 60px;

    text-align: center;

}

.blog-search-wrapper h3 {

    color: #fff;

    margin-bottom: 30px;

    font-size: 2rem;

}

.blog-search-form {

    max-width: 700px;

    margin: auto;

    display: flex;

    overflow: hidden;

    border-radius: 60px;

    background: #fff;

}

.blog-search-form input {

    flex: 1;

    border: none;

    padding: 20px 28px;

    outline: none;

}

.blog-search-form button {

    width: 80px;

    border: none;

    background: var(--blog-secondary);

    color: #fff;

    cursor: pointer;

}



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

.blog-categories {

    padding-bottom: 120px;

}

.blog-category-grid {

    display: grid;

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

    gap: 25px;

}

.blog-category-card {

    padding: 35px;

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

    border-radius: 25px;

    text-align: center;

    text-decoration: none;

    transition: .35s;

    color: inherit;

    background: #fff;

}

.blog-category-card:hover,

.blog-category-card.active {

    transform: translateY(-8px);

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

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

}

.blog-category-card i {

    width: 70px;

    height: 70px;

    display: flex;

    justify-content: center;

    align-items: center;

    margin: auto auto 20px;

    border-radius: 20px;

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

    color: var(--blog-primary);

    font-size: 1.6rem;

}

.blog-category-card h5 {

    color: var(--blog-primary);

    margin-bottom: 10px;

    font-weight: 700;

}

.blog-category-card span {

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

}



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

@keyframes blogFloat {

    0% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-10px);
    }

    100% {
        transform: translateY(0);
    }

}



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

@media(max-width:767px) {

    .blog-hero {

        padding: 60px 0 80px;

    }

    .blog-breadcrumb {

        margin-bottom: 30px;

    }

    .blog-hero-buttons {

        flex-direction: column;

    }

    .blog-btn-primary,

    .blog-btn-outline {

        width: 100%;

        text-align: center;

    }

    .blog-stat {

        border: none;

        padding: 0;

    }

    .blog-floating-card {

        position: static;

        margin-top: 20px;

        animation: none;

    }

    .blog-featured {

        padding: 70px 0;

    }

    .blog-featured-content {

        padding: 30px 0 0;

    }

    .blog-featured-content h2 {

        font-size: 2rem;

    }

    .blog-search-wrapper {

        padding: 35px 25px;

    }

    .blog-search-form {

        flex-direction: column;

        border-radius: 20px;

    }

    .blog-search-form button {

        width: 100%;

        height: 60px;

    }

    .blog-category-grid {

        grid-template-columns: 1fr;

    }

}



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

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

    .blog-category-grid {

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

    }

    .blog-featured-content {

        padding-left: 0;

        padding-top: 40px;

    }

}



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

@media(min-width:1400px) {

    .blog-hero {

        padding: 120px 0 140px;

    }

    .blog-featured-content h2 {

        font-size: 3rem;

    }

}


/*==============================================================
    BLOG PAGE
    CSS PART 2
    LATEST ARTICLES
==============================================================*/


/*==============================================================
    LATEST ARTICLES
==============================================================*/

.blog-latest-section {

    padding: 120px 0;

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

    position: relative;

}

.blog-latest-section::before {

    content: "";

    position: absolute;

    width: 420px;

    height: 420px;

    border-radius: 50%;

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

    top: -180px;

    right: -180px;

}



/*==============================================================
    SORT DROPDOWN
==============================================================*/

.blog-sort {

    width: 240px;

    height: 58px;

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

    border-radius: 50px;

    padding: 0 22px;

    color: var(--blog-primary);

    background: #fff;

    font-weight: 600;

    outline: none;

    transition: .35s;

}

.blog-sort:focus {

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

    box-shadow: 0 0 0 .2rem rgba(184, 138, 68, .15);

}



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

.blog-post-card {

    background: #ffffff;

    border-radius: 26px;

    overflow: hidden;

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

    transition: .4s;

    height: 100%;

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

    position: relative;

}

.blog-post-card:hover {

    transform: translateY(-12px);

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

}



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

.blog-post-image {

    position: relative;

    overflow: hidden;

}

.blog-post-image img {

    width: 100%;

    transition: 1s;

}

.blog-post-card:hover .blog-post-image img {

    transform: scale(1.08);

}

.blog-post-category {

    position: absolute;

    left: 22px;

    top: 22px;

    padding: 8px 18px;

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

    color: #fff;

    border-radius: 50px;

    font-size: .82rem;

    font-weight: 600;

}



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

.blog-post-content {

    padding: 30px;

}

.blog-post-content h3 {

    color: var(--blog-primary);

    font-size: 1.45rem;

    line-height: 1.4;

    margin: 18px 0;

    transition: .35s;

}

.blog-post-card:hover h3 {

    color: var(--blog-secondary);

}

.blog-post-content p {

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

    line-height: 1.9;

    margin-bottom: 28px;

}



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

.blog-post-meta {

    display: flex;

    gap: 18px;

    flex-wrap: wrap;

    font-size: .9rem;

}

.blog-post-meta span {

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

}

.blog-post-meta i {

    color: var(--blog-secondary);

    margin-right: 6px;

}



/*==============================================================
    READ MORE
==============================================================*/

.blog-post-link {

    display: inline-flex;

    align-items: center;

    gap: 12px;

    text-decoration: none;

    color: var(--blog-primary);

    font-weight: 700;

    transition: .35s;

}

.blog-post-link i {

    transition: .35s;

}

.blog-post-card:hover .blog-post-link {

    color: var(--blog-secondary);

}

.blog-post-card:hover .blog-post-link i {

    transform: translateX(8px);

}



/*==============================================================
    CARD BORDER ANIMATION
==============================================================*/

.blog-post-card::before {

    content: "";

    position: absolute;

    left: 0;

    top: 0;

    width: 4px;

    height: 0;

    background: var(--blog-secondary);

    transition: .4s;

}

.blog-post-card:hover::before {

    height: 100%;

}



/*==============================================================
    LOAD MORE
==============================================================*/

.blog-pagination-section {

    padding: 80px 0 120px;

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

}

.blog-load-more {

    text-align: center;

    margin-bottom: 50px;

}

.blog-load-more .blog-btn-primary {

    padding: 18px 45px;

}



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

.blog-pagination {

    display: flex;

    justify-content: center;

    align-items: center;

    gap: 12px;

    flex-wrap: wrap;

}

.blog-pagination a,

.blog-pagination span {

    width: 52px;

    height: 52px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    text-decoration: none;

    font-weight: 600;

    transition: .35s;

}

.blog-pagination a {

    background: #fff;

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

    color: var(--blog-primary);

}

.blog-pagination a:hover,

.blog-pagination a.active {

    background: var(--blog-primary);

    color: #fff;

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

}

.blog-pagination span {

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

}



/*==============================================================
    ARTICLE REVEAL
==============================================================*/

.blog-post-card {

    animation: blogFadeUp .7s ease both;

}

@keyframes blogFadeUp {

    from {

        opacity: 0;

        transform: translateY(30px);

    }

    to {

        opacity: 1;

        transform: translateY(0);

    }

}



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

@media(max-width:767px) {

    .blog-latest-section {

        padding: 70px 0;

    }

    .blog-sort {

        width: 100%;

        margin-top: 25px;

    }

    .blog-post-content {

        padding: 25px;

    }

    .blog-post-content h3 {

        font-size: 1.3rem;

    }

    .blog-post-meta {

        gap: 12px;

    }

    .blog-pagination-section {

        padding: 60px 0 80px;

    }

    .blog-pagination a,

    .blog-pagination span {

        width: 46px;

        height: 46px;

    }

}



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

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

    .blog-post-content {

        padding: 28px;

    }

    .blog-sort {

        width: 220px;

    }

}



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

@media(min-width:1400px) {

    .blog-post-content {

        padding: 36px;

    }

    .blog-post-content h3 {

        font-size: 1.6rem;

    }

    .blog-post-content p {

        font-size: 1.02rem;

    }

}


/*==============================================================
    BLOG PAGE
    CSS PART 3
    NEWSLETTER
    POPULAR TOPICS
    EDITOR'S PICKS
    KNOWLEDGE BANNER
==============================================================*/


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

.blog-newsletter-section{

    padding:120px 0;

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

}

.blog-newsletter-box{

    position:relative;

    overflow:hidden;

    padding:80px;

    border-radius:36px;

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

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

}

.blog-newsletter-box::before{

    content:"";

    position:absolute;

    width:520px;

    height:520px;

    border-radius:50%;

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

    top:-240px;

    right:-220px;

}

.blog-section-tag.light{

    color:#E9D6AE;

}

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

    background:#E9D6AE;

}

.blog-newsletter-box h2{

    color:#ffffff;

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

    font-weight:700;

    line-height:1.2;

    margin-bottom:24px;

}

.blog-newsletter-box p{

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

    line-height:2;

    font-size:1.05rem;

}



/*==============================================================
    BENEFITS
==============================================================*/

.blog-newsletter-benefits{

    margin:35px 0 0;

    padding:0;

    list-style:none;

}

.blog-newsletter-benefits li{

    display:flex;

    align-items:center;

    gap:14px;

    margin-bottom:18px;

    color:#ffffff;

    font-weight:500;

}

.blog-newsletter-benefits i{

    width:34px;

    height:34px;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

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

    color:#E9D6AE;

}



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

.blog-newsletter-form{

    background:#ffffff;

    border-radius:30px;

    padding:40px;

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

}

.blog-newsletter-input{

    display:flex;

    align-items:center;

    gap:18px;

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

    border-radius:60px;

    padding:18px 24px;

    margin-bottom:22px;

}

.blog-newsletter-input i{

    color:var(--blog-secondary);

    font-size:1.2rem;

}

.blog-newsletter-input input{

    flex:1;

    border:none;

    outline:none;

    background:transparent;

}

.blog-btn-white{

    width:100%;

    padding:18px;

    border:none;

    border-radius:50px;

    background:#ffffff;

    color:var(--blog-primary);

    font-weight:700;

    transition:.35s;

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

}

.blog-btn-white:hover{

    background:var(--blog-secondary);

    color:#ffffff;

}

.blog-newsletter-form small{

    display:block;

    margin-top:18px;

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

    line-height:1.7;

    text-align:center;

}



/*==============================================================
    POPULAR TOPICS
==============================================================*/

.blog-topics-section{

    padding:120px 0;

    background:#ffffff;

}

.blog-topic-cloud{

    display:flex;

    flex-wrap:wrap;

    justify-content:center;

    gap:18px;

}

.blog-topic-cloud a{

    padding:14px 24px;

    border-radius:50px;

    text-decoration:none;

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

    color:var(--blog-primary);

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

    font-weight:600;

    transition:.35s;

}

.blog-topic-cloud a:hover{

    background:var(--blog-primary);

    color:#ffffff;

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

    transform:translateY(-4px);

}



/*==============================================================
    EDITOR'S PICKS
==============================================================*/

.blog-editors-section{

    padding:120px 0;

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

}

.blog-mini-card{

    background:#ffffff;

    border-radius:24px;

    overflow:hidden;

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

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

    transition:.4s;

    height:100%;

}

.blog-mini-card:hover{

    transform:translateY(-10px);

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

}

.blog-mini-image{

    overflow:hidden;

}

.blog-mini-image img{

    width:100%;

    transition:1s;

}

.blog-mini-card:hover img{

    transform:scale(1.08);

}

.blog-mini-content{

    padding:28px;

}

.blog-mini-content span{

    display:inline-block;

    padding:7px 16px;

    border-radius:40px;

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

    color:var(--blog-primary);

    font-size:.82rem;

    font-weight:600;

    margin-bottom:16px;

}

.blog-mini-content h4{

    color:var(--blog-primary);

    font-size:1.3rem;

    line-height:1.45;

    margin-bottom:22px;

    transition:.35s;

}

.blog-mini-card:hover h4{

    color:var(--blog-secondary);

}

.blog-mini-content a{

    display:inline-flex;

    align-items:center;

    gap:10px;

    text-decoration:none;

    color:var(--blog-primary);

    font-weight:700;

    transition:.35s;

}

.blog-mini-content a::after{

    content:"→";

    transition:.35s;

}

.blog-mini-card:hover a::after{

    transform:translateX(6px);

}



/*==============================================================
    KNOWLEDGE BANNER
==============================================================*/

.blog-knowledge-section{

    padding:120px 0;

    background:#ffffff;

}

.blog-knowledge-box{

    padding:70px;

    border-radius:32px;

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

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

}

.blog-knowledge-box h2{

    color:var(--blog-primary);

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

    font-weight:700;

    margin-bottom:22px;

}

.blog-knowledge-box p{

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

    line-height:2;

}



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

.blog-newsletter-box,

.blog-mini-card,

.blog-knowledge-box{

    animation:blogFadeUp .8s ease both;

}



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

@media(max-width:767px){

.blog-newsletter-section,

.blog-topics-section,

.blog-editors-section,

.blog-knowledge-section{

padding:70px 0;

}

.blog-newsletter-box{

padding:40px 25px;

}

.blog-newsletter-form{

margin-top:40px;

padding:25px;

}

.blog-topic-cloud{

justify-content:flex-start;

}

.blog-topic-cloud a{

padding:12px 18px;

font-size:.9rem;

}

.blog-mini-content{

padding:22px;

}

.blog-knowledge-box{

padding:35px 25px;

}

}



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

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

.blog-newsletter-box{

padding:60px 45px;

}

.blog-newsletter-form{

margin-top:40px;

}

.blog-knowledge-box{

padding:50px;

}

}



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

@media(min-width:1400px){

.blog-newsletter-box{

padding:90px;

}

.blog-mini-content{

padding:34px;

}

.blog-knowledge-box{

padding:80px;

}

}

/*==============================================================
    BLOG PAGE
    CSS PART 4
    RESOURCES
    CONSULTATION CTA
    ENDING
==============================================================*/


/*==============================================================
    FREE RESOURCES
==============================================================*/

.blog-resources-section{

    padding:120px 0;

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

    position:relative;

}

.blog-resources-section::before{

    content:"";

    position:absolute;

    width:450px;

    height:450px;

    border-radius:50%;

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

    top:-180px;

    left:-180px;

}

.blog-resource-card{

    position:relative;

    background:#ffffff;

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

    border-radius:28px;

    padding:40px 35px;

    height:100%;

    transition:.35s;

    overflow:hidden;

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

}

.blog-resource-card::before{

    content:"";

    position:absolute;

    top:0;

    left:0;

    width:100%;

    height:5px;

    background:var(--blog-secondary);

    transform:scaleX(0);

    transform-origin:left;

    transition:.35s;

}

.blog-resource-card:hover::before{

    transform:scaleX(1);

}

.blog-resource-card:hover{

    transform:translateY(-10px);

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

}

.blog-resource-icon{

    width:85px;

    height:85px;

    border-radius:22px;

    display:flex;

    align-items:center;

    justify-content:center;

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

    color:var(--blog-primary);

    font-size:2rem;

    margin-bottom:28px;

    transition:.35s;

}

.blog-resource-card:hover .blog-resource-icon{

    background:var(--blog-primary);

    color:#ffffff;

}

.blog-resource-card h4{

    color:var(--blog-primary);

    font-size:1.45rem;

    margin-bottom:18px;

    line-height:1.4;

}

.blog-resource-card p{

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

    line-height:1.9;

    margin-bottom:28px;

}

.blog-resource-card a{

    display:inline-flex;

    align-items:center;

    gap:12px;

    text-decoration:none;

    color:var(--blog-primary);

    font-weight:700;

    transition:.35s;

}

.blog-resource-card:hover a{

    color:var(--blog-secondary);

}

.blog-resource-card a i{

    transition:.35s;

}

.blog-resource-card:hover a i{

    transform:translateX(8px);

}



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

.blog-consultation-section{

    padding:120px 0;

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

    position:relative;

    overflow:hidden;

}

.blog-consultation-section::before{

    content:"";

    position:absolute;

    width:700px;

    height:700px;

    border-radius:50%;

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

    right:-260px;

    top:-260px;

}

.blog-consultation-box{

    position:relative;

    z-index:2;

}

.blog-consultation-box h2{

    color:#ffffff;

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

    font-weight:700;

    line-height:1.2;

    margin-bottom:24px;

}

.blog-consultation-box p{

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

    line-height:2;

    font-size:1.05rem;

}



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

.blog-consultation-features{

    display:flex;

    flex-wrap:wrap;

    gap:18px;

    margin-top:35px;

}

.blog-consultation-features span{

    display:flex;

    align-items:center;

    gap:10px;

    padding:14px 20px;

    border-radius:50px;

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

    border:1px solid rgba(255,255,255,.12);

    color:#ffffff;

    font-weight:600;

}

.blog-consultation-features i{

    color:#E9D6AE;

}



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

.blog-consultation-actions{

    display:flex;

    flex-direction:column;

    gap:18px;

}

.blog-btn-outline-light{

    display:flex;

    justify-content:center;

    align-items:center;

    padding:18px;

    border-radius:50px;

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

    color:#ffffff;

    text-decoration:none;

    font-weight:700;

    transition:.35s;

}

.blog-btn-outline-light:hover{

    background:#ffffff;

    color:var(--blog-primary);

}

.blog-consultation-actions .blog-btn-white{

    background:#ffffff;

    color:var(--blog-primary);

    text-decoration:none;

}

.blog-consultation-actions .blog-btn-white:hover{

    background:var(--blog-secondary);

    color:#ffffff;

}



/*==============================================================
    ENDING SECTION
==============================================================*/

.blog-ending-section{

    padding:110px 0;

    background:#ffffff;

}

.blog-ending-content{

    max-width:900px;

    margin:auto;

    text-align:center;

}

.blog-ending-content>i{

    width:90px;

    height:90px;

    display:flex;

    justify-content:center;

    align-items:center;

    margin:auto auto 30px;

    border-radius:50%;

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

    color:var(--blog-secondary);

    font-size:2rem;

}

.blog-ending-content h2{

    color:var(--blog-primary);

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

    margin-bottom:25px;

    font-weight:700;

}

.blog-ending-content p{

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

    line-height:2;

    font-size:1.05rem;

    margin-bottom:45px;

}



/*==============================================================
    ENDING LINKS
==============================================================*/

.blog-ending-links{

    display:flex;

    justify-content:center;

    flex-wrap:wrap;

    gap:18px;

}

.blog-ending-links a{

    padding:14px 24px;

    border-radius:50px;

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

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

    text-decoration:none;

    color:var(--blog-primary);

    font-weight:600;

    transition:.35s;

}

.blog-ending-links a:hover{

    background:var(--blog-primary);

    color:#ffffff;

    transform:translateY(-4px);

}



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

.blog-btn-primary:focus,

.blog-btn-outline:focus,

.blog-btn-white:focus,

.blog-btn-outline-light:focus,

.blog-post-link:focus,

.blog-read-more:focus,

.blog-resource-card a:focus,

.blog-ending-links a:focus{

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

    outline-offset:4px;

}



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

@media(max-width:767px){

.blog-resources-section,

.blog-consultation-section,

.blog-ending-section{

padding:70px 0;

}

.blog-resource-card{

padding:30px 25px;

}

.blog-resource-icon{

width:70px;

height:70px;

font-size:1.6rem;

}

.blog-consultation-features{

flex-direction:column;

}

.blog-consultation-features span{

justify-content:center;

}

.blog-ending-links{

flex-direction:column;

}

.blog-ending-links a{

width:100%;

text-align:center;

}

}



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

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

.blog-consultation-actions{

margin-top:40px;

}

.blog-consultation-features{

justify-content:flex-start;

}

}



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

@media(min-width:1400px){

.blog-resource-card{

padding:45px;

}

.blog-resource-card h4{

font-size:1.6rem;

}

.blog-ending-content{

max-width:980px;

}

}