/* =====================
BLOG HERO PREMIUM
===================== */


.blog-hero{

min-height:90vh;


display:flex;

align-items:center;


background:

radial-gradient(
circle at right,
rgba(212,175,55,.15),
transparent 35%
),

#050505;


padding:

120px 25px 80px;

}






.blog-hero-container{

width:100%;


max-width:1200px;


margin:auto;



display:grid;


grid-template-columns:

1fr 1fr;


gap:70px;



align-items:center;

}









/* CONTENT */


.blog-hero-label{

display:inline-flex;


padding:

10px 18px;


border-radius:50px;



background:
rgba(212,175,55,.12);



border:
1px solid rgba(212,175,55,.35);



color:#d4af37;


font-size:14px;


font-weight:900;


margin-bottom:25px;

}









.blog-hero-content h1{

font-size:

clamp(42px,5vw,72px);


line-height:1;


letter-spacing:-2px;



font-weight:900;



color:white;



margin-bottom:28px;

}








.blog-hero-desc{

font-size:18px;


line-height:1.8;


color:#bdbdbd;


max-width:620px;

}






.blog-hero-desc strong{

color:white;

}











/* CATEGORY */


.blog-topic{

display:flex;


gap:14px;


flex-wrap:wrap;


margin-top:35px;

}







.blog-topic a{

padding:

12px 18px;



border-radius:50px;



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



border:
1px solid rgba(212,175,55,.25);



color:#d4af37;



font-size:14px;



font-weight:800;



text-decoration:none;



transition:.3s;

}








.blog-topic a:hover{

background:#d4af37;


color:#050505;

}









/* NOTE */


.blog-hero-note{

margin-top:28px;



font-size:15px;


font-weight:700;


color:#d4af37;

}











/* IMAGE */


.blog-hero-image{

border-radius:38px;


overflow:hidden;



background:
linear-gradient(
145deg,
rgba(255,255,255,.10),
rgba(255,255,255,.02)
);



border:
1px solid rgba(212,175,55,.25);



box-shadow:

0 40px 90px rgba(0,0,0,.6);

}








.blog-hero-image img{

width:100%;


display:block;

}










/* RESPONSIVE */


@media(max-width:900px){



.blog-hero{

padding-top:100px;

}



.blog-hero-container{

grid-template-columns:1fr;


gap:50px;

}



}







@media(max-width:520px){


.blog-hero{

padding:

90px 20px 70px;

}



.blog-hero-content h1{

letter-spacing:-1px;

}



.blog-hero-desc{

font-size:16px;

}


}