@charset "utf-8";
/* CSS Document */
/* CSS Document */
/* =========================
   ARTICLE SECTION
========================= */

.article-section{
    width:100%;
    
    padding:0;
    font-family:'Arial',sans-serif;
}

.article-container{
    width:100%;
    max-width:1000px;
    margin:0 auto;
    padding:0 22px 30px;
}

/* =========================
   HERO
========================= */

.article-hero{
    padding:100px 0 28px;
}

.sponsored{
    font-size:12px;
    font-weight:600;
    text-transform:uppercase;
    letter-spacing:.8px;
    color:#53bdf5;
    margin-bottom:22px;
}

.article-hero h1{
    font-family:'Arial Black',sans-serif;
    font-size:34px;
    line-height:0.98;
    font-weight:900;
    color:#111;
    letter-spacing:-2px;
    text-align: left;
    margin-top: 50px;
}
.article-meta{
    display:flex;
    align-items:center;
    gap:8px;
    margin-top:28px;
}

.author-name{
    color:black;
    font-size:14px;
    line-height:1;
    font-weight:400;
}

.article-date{
    color:rgb(125, 117, 117);
    font-size:14px;
    padding:2px 4px;
    line-height:1;
    font-weight:400;
}
/* =========================
   HERO IMAGE
========================= */

.article-hero-image{
    width:100%;
    position:relative;
}

.article-hero-image img{
    width:100%;
    display:block;
    object-fit:cover;
    height:470px;
}

/* =========================
   CONTENT
========================= */

.article-content{
    padding:28px 42px 0;
}

.article-content p{
    width: 100%;
    font-size:18px;
    line-height:1.5;
    color:#222;
    margin-bottom:22px;
    font-weight:400;
}

.article-content h2{
    font-family:'Arial Black',sans-serif;
    font-size:28px;
    line-height:1;
    font-weight:900;
    color:#111;
    margin:48px 0 18px;
    letter-spacing:-1px;
}

.article-content ul{
    margin:18px 0 26px 18px;
}

.article-content ul li{
    font-size:18px;
    line-height:1.3;
    margin-bottom:10px;
    color:#222;
}

/* =========================
   LINKS STYLE
========================= */

.content a{
    color:#39aef0;
    text-decoration:none;
}

.content a:hover{
    text-decoration:underline;
}

.blog-card h3 a{
    text-decoration:none;
    color:#000;
    transition:0.3s ease;
}

.blog-card h3 a:hover{
    color:#1fa8ff;
}

/* =========================
   RESPONSIVE
========================= */

@media(max-width:768px){

    .hero{
        padding:40px 24px 22px;
    }

    .hero h1{
        font-size:34px;
        line-height:1;
        letter-spacing:-1px;
    }

    .hero-image img{
        height:auto;
    }

    .content{
        padding:24px 24px 0;
    }

    .content h2{
        font-size:30px;
    }

    .content p,
    .content ul li{
        font-size:14px;
        line-height:1.75;
    }

}