.bloghero{

position:relative;

}

.bloghero-bg {
    height: 800px;
    overflow: hidden;
    border-radius: 30px;
    margin: 1% 0 0 0;
}

.bloghero-bg img{

width:100%;
height:100%;
object-fit:cover;
display:block;

}

/* CARD */

.blog-card{

max-width:75%;
margin:auto;

position:relative;
margin-top:-120px;

padding:0 25px;

}

.blog-content{

background:#fff;

border-radius:30px;

padding:70px;

box-shadow:

0 10px 40px rgba(0,0,0,.08);

border:1px solid #ececec;

}

/* TITLE */

.blog-content h1{

font-size:70px;
font-weight:500;
line-height:1.1;
letter-spacing:-3px;

}

/* DESCRIPTION */

.blog-desc{

margin-top:30px;

font-size:20px;


color:#555;
	    line-height: 1.4;

}

/* META */

.blog-meta{

display:flex;

gap:80px;

margin-top:50px;

}

.blog-meta span{

font-size:11px;

letter-spacing:2px;

color:#999;

display:block;

margin-bottom:8px;

}

.blog-meta h5{

font-size:18px;

font-weight:500;

}
.blog-meta h5 a{

color:#000;
    text-decoration:none;

}

/* ARTICLE */

.article-section{

padding:30px 20px 120px;

}

.article-container{

    max-width: 66%;
    margin: auto;
    background: #fff;
    padding: 1% 0;
    border-radius: 25px;

}

.article-container h2{

margin-top:40px;

margin-bottom:25px;

font-size:32px;

font-weight:600;

}

.article-container p{

font-size:20px;

margin-bottom:15px;

color:#444;
	    line-height: 1.4;

}

.article-container p a{

color:#000;
    text-decoration:none;
    font-weight:600;

}


.article-container img{

width:100%;

border-radius:20px;

margin:40px 0;

display:block;

}

/* Responsive */

@media(max-width:1200px){

.blog-content h1{

font-size:56px;

}

}

@media(max-width:992px){

.blog-content{

padding:45px;

}

.blog-content h1{

font-size:46px;
letter-spacing:-2px;

}

.blog-desc{

font-size:20px;

}

.article-container{

padding:45px;

}

}

@media(max-width:768px){

.bloghero-bg{

height:260px;

}

.blog-card{

margin-top:-70px;

}

.blog-content{

padding:35px;

border-radius:20px;

}

.blog-content h1{

font-size:36px;
line-height:1.1;

}

.blog-desc{

font-size:17px;

}

.blog-meta{

flex-direction:column;
gap:20px;

}

.article-container{

padding:30px;

}

.article-container h2{

font-size:30px;

}

.article-container p{

font-size:17px;

}

}

@media(max-width:480px){

.blog-content{

padding:25px;

}

.blog-content h1{

font-size:30px;

}

.blog-desc{

font-size:16px;

}