
/* =====================================================
   ELEGANCO TECH - BLOG.CSS
   Premium Blog Styles
   ===================================================== */
:root{
 --primary:#0A2983;
 --secondary:#0352B3;
 --light:#F6F9FD;
 --white:#fff;
 --text:#334155;
 --border:#E5ECF7;
}
.et-blog-page{background:var(--light);padding:70px 0 110px}
.et-blog-page .et-container{max-width:1320px;margin:auto;padding:0 24px}
.et-blog-hero{margin-bottom:110px}
.et-blog-hero-grid{display:grid;grid-template-columns:1.1fr 1fr;gap:70px;background:#fff;border-radius:24px;overflow:hidden;box-shadow:0 20px 60px rgba(10,41,131,.08)}
.et-blog-hero-content{padding:70px;display:flex;flex-direction:column;justify-content:center}
.et-blog-hero-category{display:inline-flex;width:max-content;padding:8px 18px;border-radius:40px;background:#EEF5FF;color:var(--secondary);font-weight:700;font-size:14px;margin-bottom:24px}
.et-blog-hero-title{font-size:58px;line-height:1.12;color:var(--primary);margin:0 0 24px}
.et-blog-hero-excerpt{font-size:18px;line-height:1.9;color:#667085;margin-bottom:34px}
.et-blog-hero-meta{display:flex;gap:28px;flex-wrap:wrap;color:#667085;margin-bottom:34px}
.et-blog-hero-meta span{display:flex;align-items:center;gap:8px}
.et-blog-hero-btn{display:inline-flex;width:max-content;padding:16px 30px;border-radius:12px;background:var(--secondary);color:#fff;text-decoration:none;font-weight:700;transition:.3s}
.et-blog-hero-btn:hover{background:var(--primary);transform:translateY(-4px);color:#fff}
.et-blog-hero-image{padding:24px 24px 24px 0}
.et-blog-hero-image img{width:100%;height:100%;object-fit:cover;border-radius:20px;transition:.45s}
.et-blog-hero:hover img{transform:scale(1.03)}
.et-section-heading{display:flex;justify-content:space-between;align-items:end;gap:20px;margin-bottom:45px;padding-bottom:18px;border-bottom:1px solid var(--border)}
.et-section-label{display:inline-block;padding:8px 18px;border-radius:40px;background:#EEF5FF;color:var(--secondary);font-weight:700;margin-bottom:14px}
.et-section-heading h2{margin:0;font-size:44px;color:var(--primary)}
.et-section-heading a{color:var(--secondary);font-weight:700;text-decoration:none}

.et-blog-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:36px}
.et-blog-card{background:#fff;border-radius:22px;overflow:hidden;box-shadow:0 14px 40px rgba(10,41,131,.08);transition:.35s;display:flex;flex-direction:column;height:100%}
.et-blog-card:hover{transform:translateY(-8px);box-shadow:0 25px 55px rgba(10,41,131,.14)}
.et-blog-card-image img{width:100%;aspect-ratio:16/10;object-fit:cover;display:block;transition:.45s}
.et-blog-card:hover img{transform:scale(1.05)}
.et-blog-card-content{padding:28px;display:flex;flex-direction:column;flex:1}
.et-blog-card-category{color:var(--secondary);font-weight:700;font-size:14px;margin-bottom:14px}
.et-blog-card-title{font-size:30px;line-height:1.3;margin:0 0 16px}
.et-blog-card-title a{color:var(--primary);text-decoration:none}
.et-blog-card-title a:hover{color:var(--secondary)}
.et-blog-card-excerpt{color:#667085;line-height:1.8;margin-bottom:22px;flex:1}
.et-blog-card-meta{display:flex;flex-wrap:wrap;gap:20px;color:#667085;font-size:14px;margin-bottom:24px}
.et-blog-card-btn{color:var(--secondary);text-decoration:none;font-weight:700}
.et-blog-categories{margin:120px 0}
.et-category-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:34px}
.et-category-card{display:flex;align-items:center;gap:22px;background:#fff;padding:34px;border-radius:22px;text-decoration:none;box-shadow:0 14px 35px rgba(10,41,131,.06);transition:.3s}
.et-category-card:hover{transform:translateY(-6px)}
.et-category-icon{width:70px;height:70px;border-radius:18px;display:flex;align-items:center;justify-content:center;background:#EEF5FF;color:var(--secondary);font-size:28px}
.et-category-content{flex:1}
.et-category-content h3{margin:0 0 6px;color:var(--primary)}
.et-category-content span{color:#667085}
.et-category-arrow{color:var(--secondary);font-size:20px}
.et-category-section{margin:120px 0}
.et-category-layout{display:grid;grid-template-columns:2fr 1fr;gap:36px}
.et-small-posts{display:flex;flex-direction:column;gap:24px}
@media(max-width:1200px){.et-blog-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:991px){.et-blog-page{padding:50px 0 80px}.et-blog-hero-grid,.et-category-layout{grid-template-columns:1fr}.et-blog-hero-content{padding:40px}.et-blog-hero-image{padding:0 40px 40px}.et-blog-hero-title{font-size:42px}.et-category-grid{grid-template-columns:1fr}}
@media(max-width:767px){.et-blog-grid{grid-template-columns:1fr}.et-section-heading{flex-direction:column;align-items:flex-start}.et-section-heading h2{font-size:34px}.et-blog-hero-title{font-size:34px}.et-blog-hero-content{padding:28px}.et-blog-hero-image{padding:0 28px 28px}.et-blog-card-title{font-size:24px}.et-category-card{padding:24px}}
/*====================================================
=            BLOG CTA / NEWSLETTER
====================================================*/

.et-blog-newsletter{

    margin:120px 0;

}

.et-newsletter-box{

    display:grid;

    grid-template-columns:2fr 1fr;

    gap:60px;

    align-items:center;

    background:linear-gradient(135deg,#0A2983 0%,#0352B3 100%);

    border-radius:28px;

    padding:70px;

    overflow:hidden;

    position:relative;

}

.et-newsletter-box::before{

    content:"";

    position:absolute;

    width:500px;

    height:500px;

    border-radius:50%;

    background:rgba(255,255,255,.05);

    top:-220px;

    right:-180px;

}

.et-newsletter-box::after{

    content:"";

    position:absolute;

    width:220px;

    height:220px;

    border-radius:50%;

    background:rgba(255,255,255,.05);

    bottom:-90px;

    left:-70px;

}

.et-newsletter-content{

    position:relative;

    z-index:2;

}

.et-newsletter-label{

    display:inline-flex;

    padding:8px 18px;

    border-radius:30px;

    background:rgba(255,255,255,.12);

    color:#ffffff;

    font-weight:700;

    margin-bottom:22px;

}

.et-newsletter-content h2{

    color:#ffffff;

    font-size:48px;

    line-height:1.2;

    margin:0 0 24px;

    max-width:700px;

}

.et-newsletter-content p{

    color:rgba(255,255,255,.88);

    font-size:18px;

    line-height:1.9;

    margin-bottom:35px;

    max-width:760px;

}

.et-newsletter-features{

    display:grid;

    grid-template-columns:repeat(2,minmax(0,1fr));

    gap:18px 30px;

    margin:0;

    padding:0;

    list-style:none;

}

.et-newsletter-features li{

    display:flex;

    align-items:center;

    gap:12px;

    color:#ffffff;

    font-weight:600;

}

.et-newsletter-features i{

    color:#4ADE80;

    font-size:18px;

}

.et-newsletter-action{

    position:relative;

    z-index:2;

}

.et-newsletter-card{

    background:#ffffff;

    border-radius:22px;

    padding:40px;

    text-align:center;

    box-shadow:0 25px 60px rgba(0,0,0,.18);

}

.et-newsletter-icon{

    width:85px;

    height:85px;

    margin:0 auto 25px;

    border-radius:50%;

    background:#EEF5FF;

    display:flex;

    align-items:center;

    justify-content:center;

    color:#0352B3;

    font-size:34px;

}

.et-newsletter-card h3{

    color:#0A2983;

    margin-bottom:15px;

    font-size:28px;

}

.et-newsletter-card p{

    color:#666;

    line-height:1.8;

    margin-bottom:30px;

}

.et-newsletter-btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:12px;

    width:100%;

    height:58px;

    border-radius:12px;

    background:#0352B3;

    color:#ffffff;

    text-decoration:none;

    font-weight:700;

    transition:.35s;

}

.et-newsletter-btn:hover{

    background:#0A2983;

    color:#ffffff;

    transform:translateY(-3px);

}

.et-newsletter-btn i{

    transition:.3s;

}

.et-newsletter-btn:hover i{

    transform:translateX(6px);

}

/*====================================================
Responsive
====================================================*/

@media(max-width:991px){

    .et-newsletter-box{

        grid-template-columns:1fr;

        padding:45px;

        gap:40px;

    }

    .et-newsletter-content h2{

        font-size:36px;

    }

}

@media(max-width:767px){

    .et-blog-newsletter{

        margin:80px 0;

    }

    .et-newsletter-box{

        padding:30px;

    }

    .et-newsletter-content h2{

        font-size:30px;

    }

    .et-newsletter-content p{

        font-size:16px;

    }

    .et-newsletter-features{

        grid-template-columns:1fr;

    }

    .et-newsletter-card{

        padding:30px;

    }

}
/*====================================================
=            BLOG PAGINATION
====================================================*/

.et-blog-pagination{

    margin-top:70px;

}

.et-blog-pagination ul{

    display:flex;

    justify-content:center;

    align-items:center;

    flex-wrap:wrap;

    gap:14px;

    margin:0;

    padding:0;

    list-style:none;

}

.et-blog-pagination li{

    margin:0;

}

.et-blog-pagination a,
.et-blog-pagination span{

    display:flex;

    align-items:center;

    justify-content:center;

    min-width:52px;

    height:52px;

    padding:0 18px;

    border-radius:14px;

    background:#ffffff;

    border:1px solid #E5ECF7;

    color:#0A2983;

    text-decoration:none;

    font-weight:700;

    transition:.3s ease;

    box-shadow:0 10px 25px rgba(10,41,131,.06);

}

.et-blog-pagination a:hover{

    background:#0352B3;

    color:#ffffff;

    border-color:#0352B3;

    transform:translateY(-4px);

}

.et-blog-pagination .current{

    background:#0352B3;

    color:#ffffff;

    border-color:#0352B3;

}

.et-blog-pagination .dots{

    background:none;

    border:none;

    box-shadow:none;

    min-width:auto;

    padding:0 6px;

}

@media(max-width:767px){

.et-blog-pagination{

    margin-top:50px;

}

.et-blog-pagination a,
.et-blog-pagination span{

    min-width:46px;

    height:46px;

    padding:0 14px;

}

}
/*====================================================
LATEST ARTICLES
====================================================*/

.et-blog-latest{

    margin:120px 0;

    background:#0A2983;

    border-radius:24px;

    padding:55px;

    color:#fff;

    box-shadow:0 20px 60px rgba(10,41,131,.20);

}

.et-blog-latest .et-section-heading{

    border:none;

    margin-bottom:40px;

    padding:0;

}

.et-blog-latest .et-section-label{

    background:rgba(255,255,255,.12);

    color:#fff;

}

.et-blog-latest h2{

    color:#fff;

}

.et-blog-latest .et-section-heading a{

    color:#fff;

    font-weight:600;

}

.et-blog-grid{

    display:grid;

    grid-template-columns:repeat(4,minmax(0,1fr));

    gap:28px;

}

/*=====================================
Card
=====================================*/

.et-latest-card{

    transition:.35s;

}

.et-latest-card:hover{

    transform:translateY(-6px);

}

.et-latest-image{

    display:block;

    overflow:hidden;

    border-radius:12px;

    margin-bottom:18px;

}

.et-latest-image img{

    width:100%;

    aspect-ratio:16/10;

    object-fit:cover;

    display:block;

    transition:.4s;

}

.et-latest-card:hover img{

    transform:scale(1.05);

}

.et-latest-content h3{

    margin:0 0 14px;

    font-size:26px;

    line-height:1.35;

}

.et-latest-content h3 a{

    color:#ffffff;

    text-decoration:none;

}

.et-latest-content h3 a:hover{

    color:#9CC4FF;

}

.et-latest-meta{

    display:flex;

    gap:16px;

    flex-wrap:wrap;

    color:rgba(255,255,255,.75);

    font-size:14px;

}

.et-latest-meta span{

    display:flex;

    align-items:center;

    gap:6px;

}

/*=====================================
Responsive
=====================================*/

@media(max-width:1200px){

.et-blog-grid{

    grid-template-columns:repeat(2,1fr);

}

}

@media(max-width:767px){

.et-blog-latest{

    padding:30px;

}

.et-blog-grid{

    grid-template-columns:1fr;

}

.et-latest-content h3{

    font-size:22px;

}

}
.et-category-header{

    text-align:center;

    margin-bottom:70px;

}

.et-category-header h1{

    font-size:52px;

    color:#0A2983;

    margin:18px 0;

}

.et-category-header p{

    max-width:700px;

    margin:auto;

    color:#667085;

    line-height:1.8;

}
