/* =========================
   ARTICLE DETAILS PAGE
========================= */


/* HERO */


.article-hero{

    background:var(--light);

    padding:100px 10%;

    text-align:center;

}



.article-hero span{

    display:inline-block;

    background:var(--accent);

    color:white;

    padding:8px 20px;

    border-radius:20px;

    font-size:14px;

    font-weight:600;

    margin-bottom:25px;

}




.article-hero h1{


    max-width:900px;

    margin:auto;

    font-family:var(--font-heading);

    font-size:var(--heading-xl);

    color:var(--primary);

    line-height:1.2;


}




.article-hero p{


    margin-top:25px;

    color:var(--text);

    font-size:var(--text-md);


}







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


.article-container{


    padding:80px 10%;


}



.article-image{


    width:100%;

    max-width:1000px;

    height:450px;

    object-fit:cover;

    display:block;

    margin:auto;

    border-radius:25px;


}






.article-content{


    max-width:850px;

    margin:50px auto;


}



.article-content p{


    font-size:18px;

    line-height:1.9;

    margin-bottom:30px;

    color:var(--text);


}

.article-content span{
    font-size:20px;
    margin-bottom:30px;
    color:var(--accent);
    font-weight: bold;
}




.article-content h2{


    font-family:var(--font-heading);

    color:var(--primary);

    font-size:var(--heading-md);

    margin:45px 0 20px;


}


/* =========================
   CTA
========================= */


.article-cta{


    background:var(--light);

    padding:80px 10%;

    text-align:center;

    color: var(--text);


}





.article-cta h2{


    font-family:var(--font-heading);

    font-size:var(--heading-lg);

    margin-bottom:30px;


}






.article-cta a{


    display:inline-block;

    padding:15px 35px;

    background:var(--orange);

    color:white;

    text-decoration:none;

    border-radius:30px;

    font-weight:600;
    transition: 0.3s;


}




.article-cta a:hover{


    background:var(--primary);


}


/* =========================
   ARTICLE DETAILS RESPONSIVE
========================= */


/* TABLET */

@media(max-width:1024px){



.article-hero{


padding:80px 7%;


}




.article-hero h1{


font-size:48px;

line-height:1.3;


}




.article-hero p{


font-size:17px;


}







.article-container{


padding:60px 7%;


}







.article-image{


height:350px;


}




.article-content{


max-width:90%;


}




.article-content p{


font-size:17px;

line-height:1.8;


}




.article-content h2{


font-size:32px;


}





.article-cta{


padding:70px 7%;


}





.article-cta h2{


font-size:38px;


}




}









/* MOBILE */

@media(max-width:600px){



.article-hero{


padding:60px 5%;


}





.article-hero span{


font-size:13px;

padding:7px 15px;


}




.article-hero h1{


font-size:34px;

line-height:1.3;


}





.article-hero p{


font-size:15px;

line-height:1.6;


}








.article-container{


padding:45px 5%;


}





.article-image{


height:220px;

border-radius:18px;


}







.article-content{


margin:35px auto;

max-width:100%;


}





.article-content p{


font-size:15px;

line-height:1.8;

margin-bottom:25px;


}




.article-content span{


font-size:18px;


}





.article-content h2{


font-size:26px;

margin:35px 0 15px;


}








.article-cta{


padding:55px 5%;


}





.article-cta h2{


font-size:30px;

line-height:1.3;


}





.article-cta a{


padding:12px 28px;

font-size:14px;


}



}