.blog-hero{

padding:180px 0 120px 0;

background:
linear-gradient(
135deg,
#050816,
#08112d
);

color:white;

text-align:center;

}



.blog-hero-content{

max-width:1000px;

margin:auto;

}



.blog-hero-content h1{

font-size:82px;

line-height:1;

margin-bottom:35px;

font-weight:700;

}



.blog-hero-content p{

font-size:24px;

line-height:1.8;

color:rgba(255,255,255,0.7);

max-width:850px;

margin:auto;

}







.blog-list-section{

padding:120px 0 140px 0;

background:white;

}



.blog-grid{

display:grid;

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

gap:30px;

align-items:start;

}


.blog-card{

border-radius:30px;

overflow:hidden;

background:white;

transition:.3s;

height:100%;

}



.blog-card:hover{

transform:translateY(-10px);

box-shadow:
0 25px 70px rgba(15,23,42,0.1);

}





.blog-thumbnail{

height:320px;

overflow:hidden;

}



.blog-thumbnail img{

width:100%;

height:100%;

object-fit:cover;

transition:.5s;

}



.blog-card:hover img{

transform:scale(1.05);

}





.blog-card-content{

padding:45px;

}





.blog-meta{

font-size:14px;

letter-spacing:1px;

margin-bottom:18px;

}





.blog-card-content h2{

font-size:42px;

line-height:1.15;

margin-bottom:25px;

color:#050816;

}



.blog-card-content p{

font-size:19px;

line-height:1.9;

color:#666;

}








.blog-cta-section{

padding:140px 0;

background:#f8fafc;

}



.blog-cta-content{

text-align:center;

max-width:900px;

margin:auto;

}



.blog-cta-content h2{

font-size:64px;

line-height:1.1;

margin-bottom:25px;

color:#050816;

}



.blog-cta-content p{

font-size:22px;

line-height:1.8;

color:#666;

margin-bottom:45px;

}



.blog-cta-content .primary-btn{

display:inline-flex;

justify-content:center;

align-items:center;

padding:18px 42px;

border-radius:999px;

background:#22d3cc;

color:#050816;

font-weight:700;

text-decoration:none;

transition:0.3s;

}



.blog-cta-content .primary-btn:hover{

transform:translateY(-4px);

}

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

@media(max-width:1100px){

.blog-hero h1{

font-size:56px;

}

.blog-grid{

grid-template-columns:1fr;

gap:40px;

}

.blog-card-content h2{

font-size:34px;

}

}



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

@media(max-width:768px){

.blog-hero{

padding-top:120px;

padding-bottom:80px;

}

.blog-hero h1{

font-size:48px;

}

.blog-hero p{

font-size:18px;

}

.blog-list-section{

padding:80px 0;

}

.blog-grid{

grid-template-columns:1fr;

gap:30px;

}

.blog-thumbnail{

height:220px;

}

.blog-card{

border-radius:24px;

}

.blog-card-content{

padding:24px;

}

.blog-card-content h2{

font-size:28px;

margin-bottom:15px;

}

.blog-card-content p{

font-size:16px;

line-height:1.8;

}

.blog-meta{

font-size:12px;

margin-bottom:12px;

}

}