*{
  margin:0;
  padding:0;
  box-sizing:border-box;
  }
  
  
  body{
  
  font-family:'Poppins',sans-serif;
  
  background:
  linear-gradient(
  135deg,
  #14001f,
  #2b1055,
  #7b2cbf
  );
  
  min-height:100vh;
  
  color:white;
  
  }
  
  
  
  .blog-page{
  
  padding:80px 20px;
  
  text-align:center;
  
  }
  
  
  
  .blog-page h1{
  
  font-size:3rem;
  
  margin-bottom:20px;
  
  }
  
  
  
  .intro{
  
  max-width:700px;
  
  margin:auto;
  
  font-size:1.1rem;
  
  line-height:1.8;
  
  opacity:0.9;
  
  margin-bottom:60px;
  
  }
  
  
  
  .articles-container{
  
  max-width:1100px;
  
  margin:auto;
  
  display:grid;
  
  grid-template-columns:
  repeat(auto-fit,minmax(280px,1fr));
  
  gap:30px;
  
  }
  
  
  
  .article-card{
  
  background:
  rgba(255,255,255,0.12);
  
  backdrop-filter:blur(18px);
  
  border:1px solid rgba(255,255,255,0.2);
  
  padding:35px;
  
  border-radius:25px;
  
  text-align:left;
  
  transition:0.3s;
  
  }
  
  
  
  .article-card:hover{
  
  transform:translateY(-8px);
  
  }
  
  
  
  .article-card h2{
  
  font-size:1.4rem;
  
  margin-bottom:15px;
  
  }
  
  
  
  .article-card p{
  
  line-height:1.7;
  
  opacity:0.85;
  
  margin-bottom:25px;
  
  }
  
  
  
  .article-card a{
  
  color:#e0aaff;
  
  text-decoration:none;
  
  font-weight:600;
  
  }
  
  
  
  .article-card a:hover{
  
  color:white;
  
  }
  
  
  
  @media(max-width:600px){
  
  .blog-page h1{
  
  font-size:2.2rem;
  
  }
  
  }


  .article-page{

    width:90%;
  
    max-width:1100px;
  
    margin:50px auto;
  
    padding:45px 60px;
  
    background:rgba(255,255,255,0.10);
  
    backdrop-filter:blur(18px);
  
    border:1px solid rgba(255,255,255,0.15);
  
    border-radius:25px;
  
    color:white;
  
    line-height:1.7;
  
  }
  
  
  
  .article-page h1{
  
    font-size:2.5rem;
  
    margin-bottom:30px;
  
    text-align:center;
  
    line-height:1.3;
  
  }
  
  
  
  .article-page h2{
  
    font-size:1.6rem;
  
    margin-top:35px;
  
    margin-bottom:12px;
  
    color:#e0aaff;
  
  }
  
  
  
  .article-page p{
  
    font-size:1rem;
  
    margin-bottom:15px;
  
    line-height:1.75;
  
  }
  
  
  
  .article-page blockquote{
  
    margin:20px 0;
  
    padding:15px 20px;
  
    border-left:4px solid #e0aaff;
  
    background:rgba(255,255,255,0.08);
  
    border-radius:8px;
  
    font-style:italic;
  
  }
  
  
  
  .article-page ul{
  
    padding-left:25px;
  
    margin-bottom:20px;
  
  }
  
  
  
  .article-page li{
  
    margin-bottom:8px;
  
    line-height:1.6;
  
  }
  
  
  
  /* MOBILE */
  
  @media(max-width:600px){
  
    .article-page{
  
      width:94%;
  
      padding:30px 20px;
  
      margin:30px auto;
  
    }
  
  
    .article-page h1{
  
      font-size:1.9rem;
  
    }
  
  
    .article-page h2{
  
      font-size:1.35rem;
  
    }
  
  
    .article-page p{
  
      font-size:0.95rem;
  
    }
  
  }

  /* BACK TO BLOG BUTTON */

.back-to-blog {
  display: inline-block;
  margin: 25px 0 15px 5%;
  padding: 10px 20px;
  background: #ffffff;
  color: #6d3bb5;
  border: 1px solid #6d3bb5;
  border-radius: 25px;
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  transition: 0.3s ease;
}

.back-to-blog:hover {
  background: #6d3bb5;
  color: #ffffff;
}

/* MAIN BLOG MENU */

.back-to-home {
  display: inline-block;
  margin: 25px 0 15px 5%;
  padding: 10px 20px;
  background: #ffffff;
  color: #6d3bb5;
  border: 1px solid #6d3bb5;
  border-radius: 25px;
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  transition: 0.3s ease;
}

.back-to-home :hover {
  background: #6d3bb5;
  color: #ffffff;
}


@media (max-width: 600px) {
  .back-to-blog {
    margin-left: 5%;
  }
  .back-to-home {
    margin-left: 5%;
  }

 
}