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


/* HERO */


.blog-hero{

    background:var(--light);

    padding:100px 10%;

    text-align:center;

}



.blog-hero h1{

    font-family:var(--font-heading);

    font-size:var(--heading-xl);

    color:var(--primary);

}



.blog-hero span{

    color:var(--accent);

}



.blog-hero p{

    max-width:800px;

    margin:25px auto;

    font-size:var(--text-lg);

}




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


.featured-blog{

    padding:80px 10%;

    display:flex;

    align-items:center;

    justify-content:center;

    gap:50px;


}




.featured-image{

    width:45%;

}



.featured-image img{

    width:100%;

    height:350px;

    object-fit:cover;

    border-radius:25px;

}




.featured-content{

    width:45%;

}



.featured-content span{


    background:var(--accent);

    color:white;

    padding:8px 18px;

    border-radius:20px;

    font-size:14px;

    font-weight:600;


}



.featured-content h2{


    margin:25px 0;

    font-family:var(--font-heading);

    font-size:var(--heading-lg);

    color:var(--primary);


}



.featured-content p{

    font-size:var(--text-md);

    line-height:1.8;

}




.featured-content a{


    display:inline-block;

    margin-top:25px;

    padding:14px 30px;

    background:var(--accent);

    color:white;

    text-decoration:none;

    border-radius:30px;

    font-weight:600;

    transition: 0.3s;

}



.featured-content a:hover{

    background:var(--primary);

}








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


.blog-section{
    padding:var(--section-padding);
    text-align: center;

}



.blog-section h2,
.blog-categories h2{


    text-align:center;

    font-family:var(--font-heading);

    color:var(--primary);

    font-size:var(--heading-lg);

    margin-bottom:45px;


}





.blog-grid{


    display:flex;

    justify-content:center;

    gap:35px;

    flex-wrap:wrap;


}

.blog-card{

    text-align: left;

    width:330px;

    background:white;

    border-radius:25px;

    overflow:hidden;

    box-shadow:

    0 12px 35px rgba(0,7,68,.12);

    transition:.3s;
    
    background: 
        linear-gradient(#fff, #fff) padding-box, 
        linear-gradient(to top, var(--accent), transparent) border-box;
        
    border: 1px solid transparent;
}




.blog-card:hover{


    transform:translateY(-12px);


}





.blog-card img{


    width:100%;

    height:220px;

    object-fit:cover;


}




.blog-content{


    padding:30px;


}




.blog-content span{


    color:var(--accent);

    font-weight:600;

    font-size:14px;


}




.blog-content h3{


    margin:15px 0;

    font-family:var(--font-heading);

    color:var(--primary);


}




.blog-content p{


    font-size:var(--text-sm);

    line-height:1.7;


}





.blog-btn{


    display:inline-block;
    margin-top:25px;
    padding:8px 18px;
    border-radius:30px;

    background:var(--accent);
    color:white;
    text-decoration:none;
    font-weight:600;
    font-size: 14px;

    transition:.3s;

}



.blog-btn:hover{
    background:var(--primary);
}


.all-articles-btn{
    display:inline-block;
    margin-top: 20px;
    padding:12px 18px;
    border-radius:30px;
    background:var(--accent);
    color:white;
    text-decoration:none;
    font-weight:bold;
    font-size: 14px;
    transition:.3s;
}



.all-articles-btn:hover{
    background:var(--primary);
}







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


.blog-categories{


    background:var(--light);

    padding:80px 10%;


}




.category-grid{


    display:flex;

    justify-content:center;

    gap:30px;

    flex-wrap:wrap;


}




.category-grid div{


    width:230px;

    padding:35px;

    background:white;

    text-align:center;

    border-radius:20px;

    font-size:40px;

    box-shadow:

    0 10px 30px rgba(0,7,68,.1);


}



.category-grid h3{


    font-family:var(--font-heading);

    color:var(--primary);

    margin-top:15px;

    font-size:18px;


}








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


.blog-cta{


    padding:80px 10%;

    text-align:center;

    background:var(--white);

    color: var(--text);


}



.blog-cta h2{


    font-family:var(--font-heading);

    font-size:var(--heading-lg);

    margin-bottom:20px;


}



.blog-cta p{


    margin-bottom:30px;


}





.blog-cta a{


    display:inline-block;

    padding:15px 35px;

    background:var(--orange);

    color:white;

    border-radius:30px;

    text-decoration:none;

    font-weight:600;

    transition: 0.3s;


}



.blog-cta a:hover{


    background:var(--primary);


}




/* =========================
   BLOG PAGE RESPONSIVE
========================= */


/* TABLET */

@media(max-width:1024px){



.blog-hero{


padding:80px 7%;


}




.blog-hero h1{


font-size:48px;


}




.blog-hero p{


font-size:18px;


}






.featured-blog{


padding:70px 7%;

gap:35px;


}




.featured-image,
.featured-content{


width:50%;


}





.featured-image img{


height:300px;


}





.featured-content h2{


font-size:36px;


}




.featured-content p{


font-size:16px;


}








.blog-section{


padding:70px 7%;


}




.blog-grid{


gap:25px;


}





.blog-card{


width:300px;


}







.blog-categories{


padding:70px 7%;


}





.category-grid{


gap:25px;


}





.category-grid div{


width:200px;

padding:30px;


}







.blog-cta{


padding:70px 7%;


}





.blog-cta h2{


font-size:38px;


}





}













/* MOBILE */

@media(max-width:600px){



.blog-hero{


padding:60px 5%;


}





.blog-hero h1{


font-size:34px;

line-height:1.3;


}





.blog-hero p{


font-size:16px;

line-height:1.7;


}









/* FEATURED */




.featured-blog{


padding:50px 5%;

flex-direction:column;

gap:35px;


}





.featured-image,
.featured-content{


width:100%;


}





.featured-image img{


height:230px;

border-radius:20px;


}





.featured-content h2{


font-size:28px;

line-height:1.3;


}





.featured-content p{


font-size:15px;


}





.featured-content a{


padding:12px 25px;


}







/* BLOG CARDS */



.blog-section{


padding:50px 5%;


}




.blog-section h2,
.blog-categories h2{


font-size:30px;


}





.blog-grid{


flex-direction:column;

align-items:center;


}




.blog-card{


width:100%;

max-width:350px;


}





.blog-card img{


height:200px;


}





.blog-content{


padding:25px;


}





.blog-content h3{


font-size:22px;


}





.blog-content p{


font-size:14px;


}







/* CATEGORIES */



.blog-categories{


padding:50px 5%;


}





.category-grid{


flex-direction:column;

align-items:center;


}





.category-grid div{


width:100%;

max-width:300px;

font-size:35px;


}







/* CTA */



.blog-cta{


padding:55px 5%;


}





.blog-cta h2{


font-size:30px;

line-height:1.3;


}





.blog-cta p{


font-size:15px;


}





.blog-cta a{


padding:12px 28px;


}




}