/* =========================
   ALL PROJECTS PAGE
========================= */

.articles-hero{
background:var(--light);
padding:100px 10%;
text-align:center;
}

.articles-hero h1{
font-family:var(--font-heading);
font-size:var(--heading-xl);
color:var(--primary);
}

.articles-hero span{
color:var(--accent);
}

.articles-hero p{
max-width:800px;
margin:25px auto;
font-size:var(--text-lg);
}

/* Blog GRID */

.all-articles{
padding:var(--section-padding);
}

.articles-container{
display:grid;
grid-template-columns:repeat(4, 1fr);
gap:35px;
}

.blog-card{
    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 PROJECTS RESPONSIVE
========================= */


/* TABLET */

@media(max-width:1024px){



.articles-hero{

padding:80px 7%;

}



.articles-hero h1{

font-size:48px;

}



.articles-hero p{

font-size:18px;

}






.all-articles{

padding:70px 7%;

}




.articles-container{


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

gap:30px;


}



.blog-card{

width:100%;


}



.blog-card img{


height:200px;


}



.blog-content{


padding:25px;


}



}








/* MOBILE */

@media(max-width:600px){



.articles-hero{

padding:60px 5%;

}



.articles-hero h1{

font-size:36px;

line-height:1.3;

}



.articles-hero p{

font-size:16px;

line-height:1.7;

}







.all-articles{


padding:60px 5%;


}





.articles-container{


grid-template-columns:1fr;

gap:25px;


}





.blog-card{


width:100%;


}





.blog-card img{


height:200px;


}





.blog-content{


padding:22px;


}





.blog-content h3{


font-size:22px;


}





.blog-content p{


font-size:15px;

line-height:1.6;


}





.blog-btn{


padding:10px 20px;

font-size:13px;


}





}