/* BASE */

*{
 margin:0;
 padding:0;
 box-sizing:border-box;
}

body{
 background:var(--bg);
 color:var(--text);
 font-family:'Poppins',sans-serif;
 transition:.35s ease;
 overflow-x: hidden;
}

.container{
 width:100%;
 max-width:1200px;
 margin:auto;
}

/* HERO */

.hero{
 background:var(--hero-gradient);
 color:var(--hero-text);
 padding:150px 0;
 transition:.35s ease;
}

.back{
 color:var(--hero-link);
 text-decoration:none;
}

.hero h1{
 font-size:30px;
 margin-bottom:20px;
 line-height:1.3;
}

.cover{
 width:100%;
 border-radius:18px;
 margin:22px 0;
}


/* CONTENT */

.content{
 margin-top:40px;
}

.content h2{
 margin:22px 0 12px;
}

.content p{
 line-height:1.8;
 margin-bottom:15px;
 color:var(--paragraph);
}

blockquote{
 background:var(--quote-bg);
 padding:18px;
 border-left:4px solid #6366f1;
 border-radius:12px;
 margin:24px 0;
 font-style:italic;
}

/* SHARE */

.share{
 margin:40px auto;
 text-align:center;
}

.share button{
 margin:10px 5px;
 padding:10px 16px;
 background:linear-gradient(135deg,#6366f1,#8b5cf6);
 border:none;
 border-radius:10px;
}

.share a{
 color:white;
 text-decoration:none;
}

/* CTA */

.cta{
 background:var(--cta-gradient);
 color:var(--cta-text);
 text-align:center;
 padding:60px 20px;
 transition:.35s ease;
}

.cta h2{
 margin-bottom:10px;
}

.cta button{
 margin-top:18px;
 padding:12px 24px;
 border:none;
 border-radius:30px;
 font-weight:600;
 cursor:pointer;

 background:var(--cta-btn-bg);
 color:var(--cta-btn-text);
}

.cta a{
 text-decoration:none;
 color:inherit;
}
/* MOBILE */

@media(max-width:600px){
 .hero h1{
   font-size:22px;
 }
}