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

    body{
      font-family:'Inter',sans-serif;
      background:#efe48a;
      overflow-x:hidden;
    }

    /* 
       NAVBAR
    */

    nav{
      width:98%;
      margin:10px;

      background:#f5f5f5;

      border:3px solid #111;

      border-radius:25px;

      padding:15px;

      display:flex;
      justify-content:space-between;
      align-items:center;

      position:relative;
      z-index:10;
    }

    .logo{
      font-size:24px;
      font-weight:800;
    }

    .logo span{
      color:#ff7a00;
    }

    .nav-links{
      display:flex;
      gap:35px;
      list-style:none;
    }

    .nav-links li{
      font-weight:700;
      cursor:pointer;
    }


     .nav-links li:hover{
        color:#ff7a00;
    }

.nav-links li i{
      color:#00000036;
    }


    .subscribe-btn{
      padding:14px 28px;
      background:#f5c842;
      border:3px solid #111;
      border-radius:40px;
      font-weight:800;
      cursor:pointer;
      box-shadow:4px 4px 0 #111;
    }

    .subscribe-btn:hover{
      box-shadow:6px 6px 0 #111;
      transform: translate(2px, 2px);
    }
  
       /* HERO SECTION */
   

    .hero{
      min-height:100vh;
      padding:40px 60px;
      position:relative;
    }
    .shape1,
    .shape2{
      position:absolute;
      opacity:0.3;
      transform:rotate(45deg);
    }

    .shape1{
      width:120px;
      height:120px;
      background:#c9b64a;
      top:-20px;
      left:50px;
    }

    .shape2{
      width:150px;
      height:150px;
      background:#ce424961;
      right:70px;
      top:-15px;
    }

    .hero-content{
      max-width:1200px;
      margin:auto;
      display:flex;
      justify-content:space-between;
      align-items:center;
      gap:60px;
    }

    .hero-content-left{
      flex:1;
    }

    .trending{
      display:inline-block;
      background:#000;
      color:#fff;
      padding:8px 15px;
      margin-bottom:35px;
      font-weight:400;
      transform:rotate(-20deg);
      box-shadow:5px 5px 0 #111;
    }

    .title{
      font-family:'Anton',sans-serif;

      line-height:1;
      margin-bottom:35px;
    }

    .title h1{
      font-size:95px;
      margin-bottom:10px;
      /* box-shadow:7px 7px 0 #111; */
    }

    .red{
      color:#ff2020;
      text-shadow:5px 5px 0 rgba(0,0,0,.2);
    }

    .blue{
      color:#245bff;
      text-shadow:5px 5px 0 rgba(0,0,0,.2);
    }

    .description{
      background:#f5f5f5;
      border:3px solid #111;
      padding:25px;
      font-size:20px;
      line-height:1.6;
      box-shadow:7px 7px 0 #111;
      margin-bottom:35px;
    }

    .buttons{
      display:flex;
      gap:20px;
    }

    .btn{
      padding:20px 35px;
      border:3px solid #111;

      font-size:18px;

      font-weight:800;

      cursor:pointer;

      box-shadow:6px 6px 0 #111;
    }
    .btn:hover{
      box-shadow:8px 8px 0 #111;
      transform:translate(2px, 2px);
    }

    .black{
      background:#000;
      color:#fff;
    }

    .white{
      background:#fff;
    }

    /* RIGHT IMAGE */

    .hero-content-right{
      flex:1;
      position:relative;
    }

    .image-box{
      width:80%;
      max-width:620px;
      margin:auto;
      border:4px solid #111;
      /* background:#fff;    */
      overflow:hidden;
      transform:rotate(8deg);
      box-shadow:8px 8px 0 #111;
      position:relative;
    }

    .image-box:hover{
      transform:rotate(8deg) translate(-4px, 4px);
    }

    .image-box img{
      width:100%;
      display:block;
    }

    .image-box-featured{
      position:absolute;
      top:-8px;
      right:-20px;
      background:#ff3131;
      color:#fff;

      padding:12px 22px;

      border:3px solid #111;

      font-weight:800;

      transform:rotate(10deg);
         background:#ff2020;
      box-shadow:4px 4px 0 #111;
      transform:rotate(10deg) translate(2px, -2px);
    }








    /* 
       ARTICLES SECTION
    */



    .articles-section{
      background:#ececec;
      padding:80px 60px;
      border-top:3px solid #111;
      /* font-family:cursive; */
    }
    .articles-container{
      max-width:1350px;
      margin:auto;
      display:flex;
      gap:30px;
    }
    .left-side{
      flex:2;
      position:relative;
    }
    .section-title{
      font-family:'Anton',sans-serif;
      /* font-family: 'Courier New', Courier, monospace; */
      font-size:60px;
      font-weight: 100;
      /* font-style:oblique; */
      margin-bottom:40px;
    }

    .fresh-tag{
      position:absolute;
      top:10px;
      right:20px;

      background:#000;
      color:#fff;

      padding:14px 28px;

      font-weight:700;

      transform:rotate(2deg);
    }

    .articles-scroll{
      height:650px;
      overflow-y:auto;

      padding-right:15px;
    }

    .articles-scroll::-webkit-scrollbar{
      width:10px;
    }

    .articles-scroll::-webkit-scrollbar-thumb{
      background:#111;
    }

    .article-card{
      background:#fff;

      border:4px solid #111;

      padding:30px;

      display:flex;
      gap:25px;

      margin-bottom:35px;

      box-shadow:7px 7px 0 #111;
    }

    .article-card1:hover{
color: #ff2020;
      transform:translate(2px, 2px);
    }


        .article-card2:hover{
color: #0062ff;
      transform:translate(2px, 2px);
    }
    .article-card3:hover{
color: #e120ff;
      transform:translate(2px, 2px);
    }



    .article-card img{
      width:220px;
      height:170px;

      object-fit:cover;

      border:2px solid #111;
    }

    .labels{
      display:flex;
      gap:20px;  
      margin-bottom:15px;
    }

    .small-tag{
      padding:8px 15px;
      border:3px solid #111;
      color:#fff;
      font-weight:800;
      transform:rotate(-8deg);
    }

    .tag-red{
      background:#ff3131;
    }

    .tag-blue{
      background:#2e73ff;
    }
    .tag-purple{
      background:#a84dff;
    }

    .category{
      padding:8px 18px;

      border:3px solid #111;

      font-weight:800;
    }

    .yellow{
      background:#ffe84a;
      box-shadow:4px 4px 0 #111;
    }

    .green{
      background:#6eff9c;
      box-shadow:4px 4px 0 #111;
    }

.pink{
      background:#ffb6c1;
      box-shadow:4px 4px 0 #111;
    }





    .article-content h2{
      font-size:32px;
      margin-bottom:15px;
    }

    .article-content p{
      font-size:20px;

      line-height:1.7;

      color:#333;

      margin-bottom:20px;
    }

    .article-info{
      display:flex;
      flex-wrap:wrap;
      gap:25px;

      font-weight:700;
    }

    .likes{
      color:red;
    }



.load-more{
      padding:25px 40px;
      background:#000000;
      border:3px solid #111;
      font-weight:500;
      width: 50%  ;
      color: #fff;
      cursor:pointer;
      box-shadow:6px 6px 0 #111;
      align-items: center;
      margin-top: 50px ;
    }



.load-more:hover{
      box-shadow:0px 0px 0 #111;
      transform: translate(2px, 2px);
    }


    .article-right-side{
      flex:1;

      display:flex;
      flex-direction:column;
      gap:30px;
    }

    .side-box{
      background:#fff;

      border:4px solid #111;

      padding:35px;

      box-shadow:7px 7px 0 #111;
    }

    .side-box h2{
      font-family:'Anton',sans-serif;
      font-size:45px;

      margin-bottom:35px;
    }

    .trend-item{
      display:flex;
      gap:20px;

      margin-bottom:35px;
    }

    .num{
      font-family:'Anton',sans-serif;
      font-size:60px;
    }

    .red-text{
      color:#ff3131;
    }

    .blue-text{
      color:#2e73ff;
    }

    .purple-text{
      color:#a84dff;
    }

    .trend-item h3{
      font-size:30px;
      margin-bottom:8px;
    }





.redh3:hover{
color:#ff2020;
}


.blueh3:hover{
color:#0062ff;  
}
.purpleh3:hover{
color:#e120ff;  }




    .trend-item p{
      color:#666;
      font-size:18px;
    }

    .category-box{
      padding:18px 20px;

      border:2px solid #111;

      margin-bottom:15px;

      font-size:25px;
      font-weight:800;
    }

    .yellow-bg{
      background:#f5efaf;
    }

    .green-bg{
      background:#d7f7df;
    }

    .pink-bg{
      background:#f4dfeb;
    }

    .blue-bg{
      background:#dbe8ff;
    }



    .yellow-bg:hover{
      background:#f9e937;
box-shadow:4px 4px 0 #111;
      transform:translate(2px, 2px);}

    .green-bg:hover{
      background:#28e15f;   
box-shadow:4px 4px 0 #111;
        transform:translate(2px, 2px);}     

    .pink-bg:hover{
      background:#fc9baa;   
box-shadow:4px 4px 0 #111;
        transform:translate(2px, 2px);} 
    .blue-bg:hover{
      background:#67a6ff;
box-shadow:4px 4px 0 #111;
        transform:translate(2px, 2px);}
        

    /* AUTHORS SECTION */
    .authors-section{
      background:#ffd42a;
      padding:90px 60px;
      position:relative;
      overflow:hidden;
    }

    .diamond{
      position:absolute;
      width:220px;
      height:220px;
      background:#bda30b;
      right:60px;
      top:40px;
      transform:rotate(45deg);
      opacity:.2;
    }

    .authors-container{
      max-width:1350px;
      margin:auto;
      position:relative;
      z-index:2;
    }

    .authors-title{
      text-align:center;
      font-family:'Anton',sans-serif;
      font-size:50px;
      line-height:1;
      margin-bottom:15px;
    }

    .authors-subtitle{
      text-align:center;
      font-size:22px;
      color:#555;
      margin-bottom:25px;
    }

    .line{
      width:150px;
      height:8px;
      background:#111;
      margin:0 auto 70px;
    }

    .authors-cards{
      display:flex;
      gap:30px;
      justify-content:center;
    }


    .author-card{
      width:390px;

      border:4px solid #111;

      padding:35px 30px;

      text-align:center;

      position:relative;

      box-shadow:8px 8px 0 #111;
    }

    .cream{
      background:#f5f1c8;
    }

    .green-card{
      background:#d7f3df;
    }

    .pink-card{
      background:#f5dff0;
    }

    .author-card img{
      width:140px;
      height:140px;

      object-fit:cover;

      border:4px solid #111;

      margin-bottom:25px;
    }

    .badge{
      position:absolute;

      top:15px;
      right:20px;

      padding:10px 16px;

      color:#fff;

      font-weight:800;

      border:3px solid #111;

      transform:rotate(10deg);
    }

    .red-badge{
      background:#ff3131;
    }

    .blue-badge{
      background:#2e73ff;
    }

    .purple-badge{
      background:#a84dff;
    }

    .author-card h2{
      font-family:'Anton',sans-serif;

      font-size:50px;

      margin-bottom:10px;
    }
.author-card:hover{
transform: translate(2px,6px);


}






    .blue-name{
      color:#2e73ff;
    }

    .author-card h4{
      font-size:18px;

      color:#555;

      margin-bottom:25px;
    }

    .author-card p{
      font-size:18px;

      line-height:1.8;

      color:#222;

      margin-bottom:35px;
    }

    .socials{
      display:flex;
      justify-content:center;
      gap:18px;
    }

    .icon{
      width:55px;
      height:55px;
      background:#000;
      color:#fff;
      border:3px solid #111;
      display:flex;
      justify-content:center;
      align-items:center;
      font-size:22px;
      font-weight:800;
      cursor:pointer;
    }

    .icon:hover{
      transform:translateY(-5px);
        box-shadow:2px 5px 0 #111;
    }

.icon1:hover{
      transform:translateY(-5px);
        box-shadow:2px 5px 0 #111;
        background-color: #108ee8;
    }
    .icon2:hover{
      transform:translateY(-5px);
        box-shadow:2px 5px 0 #111;
        background-color: #0077b5;
    }
    .icon3:hover{
      transform:translateY(-5px);
        box-shadow:2px 5px 0 #111;
        background-color: #f433bd;
    }
 

.card1red:hover{
  color:#ff2020;}

.card1blue:hover{
  color:#0062ff;}   
  .card1purple:hover{
  color:#e120ff;}   


  

/* ///////////////////////////////////////// */
/* ///////////////////////////////////////// */
/* ///////////////////////////////////////// */
/* ///////////////////////////////////////// */
/* ///////////////////////////////////////// */
/* ///////////////////////////////////////// */



/*
   JOIN THE REBELLION SECTION
*/

.rebellion-section{
  background:#ececec;
  padding:90px 60px;
  position:relative;
  overflow:hidden;
}

.rebellion-container{
  max-width:1350px;
  margin:auto;
}

.rebellion-title{
  text-align:center;
  font-family:'Anton',sans-serif;
  font-size:60px;
  line-height:1;
  margin-bottom:15px;
  font-weight: 100;

}

.rebellion-subtitle{
  text-align:center;
  font-size:24px;
  color:#555;
  margin-bottom:20px;
}

.rebellion-line{
  width:120px;
  height:8px;
  background:#111;
  margin:0 auto 70px;
}

.rebellion-content{
  display:flex;
  gap:60px;
  align-items:flex-start;
}

.rebellion-left,
.rebellion-right{
  flex:1;
  width: 44%;
}

.rebellion-left h2,
.rebellion-right h2{
  font-family:'Anton',sans-serif;
  font-size:45px;
  line-height:1;
  font-weight: 100;
  margin-bottom:35px;
}

.rebellion-box{
  background:#fff;
  border:4px solid #111;
  padding:35px;
  box-shadow:7px 7px 0 #111;
  margin-bottom:35px;
}

.rebellion-box p{
  font-size:22px;
  line-height:1.8;
  color:#222;
}


.rebel-feature{
  display:flex;
  align-items:center;
  gap:8px;
  margin-bottom:25px;
}

.feature-icon{
  width:55px;
  height:55px;
  border:3px solid #111;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#fff;
  font-size:24px;
  box-shadow:4px 4px 0 #111;
}



.red-icon{
  background:#ff3131;
}

.blue-icon{
  background:#2e73ff;
}

.purple-icon{
  background:#a84dff;
}

.green-icon{
  background:#21c45a;
}

.rebel-feature p{
  font-size:22px;
  font-weight:700;
}


.join-btn{
  margin-top:30px;
  padding:22px 40px;
  background:#000;
  color:#fff;
  border:4px solid #111;
  font-size:22px;
  font-weight:800;
  cursor:pointer;
  box-shadow:7px 7px 0 #111;
}

.join-btn:hover{
  transform:translate(3px,3px);
  box-shadow:3px 3px 0 #111;
}


.testimonial-card{
  border:3px solid #111;
  padding:30px;
  margin-bottom:30px;
  box-shadow:6px 6px 0 #111;
}

.testimonial-card:nth-child(2){
  background:#f7eaea;
}

.testimonial-card:nth-child(3){
  background:#eaf1ff;
}

.testimonial-card:nth-child(4){
  background:#f5eaff;
}

.testimonial-card p{
  font-size:20px;
  line-height:1.8;
  margin-bottom:25px;
}

.testimonial-user{
  display:flex;
  align-items:center;
  gap:15px;
}

.testimonial-user img{
  width:55px;
  height:55px;
  border:2px solid #111;
  object-fit:cover;
}

.testimonial-user h4{
  font-size:24px;
  margin-bottom:4px;
}

.testimonial-user span{
  color:#666;
  font-size:16px;
}

/* 
   FOOTER
*/

footer{
  background:#000;
  color:#fff;
  padding:90px 60px 40px;
}

.footer-container{
  max-width:1350px;
  margin:auto;
}

.footer-top{
  display:flex;
  justify-content:space-between;
  gap:60px;
  margin-bottom:60px;
}

.footer-about{
  flex:1.2;
}

.footer-logo{
  display:flex;
  align-items:center;
  gap:15px;
  margin-bottom:25px;
}

.footer-logo-box{
  width:60px;
  height:60px;
  background:#fff;
  color:#000;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:28px;
  border:3px solid #111;
}

.footer-logo h2{
  font-family:'Anton',sans-serif;
  font-size:33px;
  font-weight: 80;
}

.footer-about p{
  font-size:22px;
  line-height:1.8;
  color:#ddd;
  max-width:500px;
}


.footer-links{
  flex:1;
}

.footer-links h3,
.footer-newsletter h3{
  font-family:'Anton',sans-serif;
  font-size:30px;
  font-weight: 50;
  margin-bottom:30px;
}

.footer-links ul{
  list-style:none;
}

.footer-links ul li{
  margin-bottom:20px;
  font-size:24px;
  font-weight:700;
  cursor:pointer;
}

.footer-links ul li:hover{
  color:#ffe84a;
}


.footer-newsletter{
  flex:1.2;
}

.footer-newsletter p{
  font-size:22px;
  line-height:1.8;
  color:#ddd;
  margin-bottom:30px;
}

.newsletter-box{
  display:flex;
  flex-direction:column;
  gap:20px;
}

.newsletter-box input{
  padding:22px;
  background:#000;
  border:3px solid #555;
  color:#fff;
  font-size:20px;
}

.newsletter-box input:focus{
  outline:none;
  border-color:#ffe84a;
}

.newsletter-box button{
  padding:22px;
  background:#ffe100;
  border:none;
  font-size:24px;
  font-weight:900;
  cursor:pointer;
}

.newsletter-box button:hover{
  background:#ffd000;
}

/* FOOTER BOTTOM */

.footer-bottom{
  border-top:3px solid #444;
  padding-top:35px;
  display:flex;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:20px;
}

.footer-bottom p{
  font-size:20px;
  font-weight:700;
}

.footer-policy{
  display:flex;
  gap:35px;
}

.footer-policy span{
  cursor:pointer;
  font-size:18px;
  font-weight:700;
}

.footer-policy span:hover{
  color:#ffe84a;
}

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

/* TABLET (1024px and below) */
@media(max-width:1024px){

  nav{
    padding:12px;
  }

  .logo{
    font-size:20px;
  }

  .nav-links{
    gap:20px;
    font-size:14px;
  }

  .subscribe-btn{
    padding:12px 22px;
    font-size:14px;
  }

  .hero{
    padding:30px 40px;
  }

  .hero-content{
    gap:40px;
  }

  .title h1{
    font-size:70px;
  }

  .description{
    font-size:18px;
    padding:20px;
  }

  .btn{
    padding:16px 28px;
    font-size:16px;
  }

  .articles-section{
    padding:60px 40px;
  }

  .articles-container{
    flex-direction:column;
  }

  .left-side{
    flex:1;
  }

  .article-right-side{
    flex:1;
  }

  .article-card{
    gap:20px;
  }

  .article-card img{
    width:180px;
    height:140px;
  }

  .article-content h2{
    font-size:28px;
  }

  .article-content p{
    font-size:18px;
  }

  .side-box h2{
    font-size:40px;
  }

  .authors-section{
    padding:60px 40px;
  }

  .author-card{
    width:320px;
  }

  .author-card h2{
    font-size:40px;
  }

  .rebellion-section{
    padding:60px 40px;
  }

  .rebellion-content{
    flex-direction:column;
    gap:40px;
  }

  .rebellion-title{
    font-size:50px;
  }

  .rebellion-left,
  .rebellion-right{
    width:100%;
  }

  .rebellion-left h2,
  .rebellion-right h2{
    font-size:40px;
  }

  footer{
    padding:60px 40px 30px;
  }

  .footer-top{
    flex-direction:column;
    gap:40px;
  }

  .footer-links ul li{
    font-size:20px;
  }

}

/* MOBILE LANDSCAPE & SMALL TABLET (768px and below) */
@media(max-width:768px){

  nav{
    width:96%;
    margin:8px auto;
    flex-wrap:wrap;
    gap:15px;
    padding:12px;
  }

  .logo{
    font-size:18px;
    flex:1 0 auto;
  }

  .nav-links{
    gap:15px;
    font-size:12px;
    order:3;
    width:100%;
    flex-wrap:wrap;
    justify-content:center;
  }

  .nav-links li{
    display:flex;
    align-items:center;
    gap:5px;
  }

  .nav-links li i{
    font-size:12px;
  }

  .subscribe-btn{
    padding:10px 18px;
    font-size:12px;
    box-shadow:2px 2px 0 #111;
  }

  .hero{
    min-height:auto;
    padding:20px;
  }

  .hero-content{
    flex-direction:column;
    gap:30px;
  }

  .title h1{
    font-size:48px;
    margin-bottom:8px;
  }

  .trending{
    padding:6px 12px;
    font-size:12px;
    margin-bottom:20px;
  }

  .description{
    font-size:16px;
    padding:15px;
    box-shadow:4px 4px 0 #111;
  }

  .buttons{
    flex-direction:column;
    gap:15px;
  }

  .btn{
    width:100%;
    padding:14px 24px;
    font-size:14px;
  }

  .hero-content-right{
    width:100%;
  }

  .image-box{
    width:100%;
    max-width:100%;
  }

  .articles-section{
    padding:40px 20px;
  }

  .articles-scroll{
    height:auto;
    padding-right:0;
  }

  .article-card{
    flex-direction:column;
    padding:20px;
    gap:15px;
  }

  .article-card img{
    width:100%;
    height:200px;
  }

  .article-content h2{
    font-size:24px;
  }

  .article-content p{
    font-size:16px;
  }

  .article-info{
    flex-direction:column;
    gap:10px;
    font-size:14px;
  }

  .section-title{
    font-size:40px;
  }

  .load-more{
    width:100%;
    padding:18px 30px;
    font-size:14px;
  }

  .side-box{
    padding:25px;
  }

  .side-box h2{
    font-size:32px;
  }

  .trend-item h3{
    font-size:24px;
  }

  .category-box{
    font-size:20px;
    padding:14px 16px;
  }

  .authors-section{
    padding:40px 20px;
  }

  .authors-title{
    font-size:40px;
  }

  .authors-subtitle{
    font-size:18px;
  }

  .authors-cards{
    flex-wrap:wrap;
  }

  .author-card{
    width:100%;
    padding:25px 20px;
  }

  .author-card h2{
    font-size:32px;
  }

  .author-card h4{
    font-size:16px;
  }

  .author-card p{
    font-size:16px;
  }

  .icon{
    width:45px;
    height:45px;
    font-size:18px;
  }

  .rebellion-section{
    padding:40px 20px;
  }

  .rebellion-title{
    font-size:40px;
  }

  .rebellion-subtitle{
    font-size:18px;
  }

  .rebellion-left h2,
  .rebellion-right h2{
    font-size:32px;
  }

  .rebellion-box{
    padding:25px;
  }

  .rebellion-box p{
    font-size:18px;
  }

  .feature-icon{
    width:45px;
    height:45px;
    font-size:20px;
  }

  .join-btn{
    width:100%;
    padding:16px 24px;
    font-size:18px;
  }

  .testimonial-card{
    padding:20px;
  }

  .testimonial-card p{
    font-size:16px;
  }

  .testimonial-user img{
    width:45px;
    height:45px;
  }

  .testimonial-user h4{
    font-size:20px;
  }

  footer{
    padding:40px 20px 20px;
  }

  .footer-logo-box{
    width:50px;
    height:50px;
    font-size:24px;
  }

  .footer-logo h2{
    font-size:28px;
  }

  .footer-about p,
  .footer-newsletter p{
    font-size:16px;
  }

  .footer-links h3,
  .footer-newsletter h3{
    font-size:24px;
  }

  .footer-links ul li{
    font-size:18px;
  }

  .newsletter-box input,
  .newsletter-box button{
    font-size:16px;
    padding:16px;
  }

  .footer-bottom p{
    font-size:14px;
  }

  .footer-policy span{
    font-size:14px;
  }

}

/* MOBILE (480px and below) */
@media(max-width:480px){

  *{
    margin:0;
    padding:0;
  }

  nav{
    width:94%;
    margin:6px auto;
    flex-direction:column;
    gap:12px;
    padding:10px;
    border-radius:15px;
  }

  .logo{
    font-size:16px;
    text-align:center;
    width:100%;
  }

  .nav-links{
    gap:12px;
    font-size:11px;
    width:100%;
    justify-content:center;
  }

  .nav-links li{
    font-size:11px;
  }

  .subscribe-btn{
    width:100%;
    padding:10px 16px;
    font-size:11px;
    box-shadow:2px 2px 0 #111;
  }

  .shape1{
    width:80px;
    height:80px;
  }

  .shape2{
    width:100px;
    height:100px;
  }

  .hero{
    min-height:auto;
    padding:15px 10px;
  }

  .hero-content{
    flex-direction:column;
    gap:20px;
    padding:0;
  }

  .title{
    margin-bottom:20px;
  }

  .title h1{
    font-size:36px;
    margin-bottom:6px;
  }

  .trending{
    display:inline-block;
    padding:5px 10px;
    font-size:11px;
    margin-bottom:15px;
    box-shadow:3px 3px 0 #111;
  }

  .description{
    font-size:14px;
    padding:12px;
    box-shadow:3px 3px 0 #111;
    line-height:1.5;
  }

  .buttons{
    flex-direction:column;
    gap:12px;
  }

  .btn{
    width:100%;
    padding:12px 20px;
    font-size:12px;
    border:2px solid #111;
    box-shadow:3px 3px 0 #111;
  }

  .hero-content-right{
    width:100%;
  }

  .image-box{
    width:100%;
    transform:rotate(5deg);
    box-shadow:5px 5px 0 #111;
  }

  .articles-section{
    padding:30px 10px;
    border-top:2px solid #111;
  }

  .section-title{
    font-size:32px;
    margin-bottom:25px;
  }

  .fresh-tag{
    top:5px;
    right:10px;
    padding:10px 16px;
    font-size:11px;
  }

  .articles-scroll{
    height:auto;
  }

  .article-card{
    flex-direction:column;
    border:3px solid #111;
    padding:15px;
    gap:12px;
    margin-bottom:20px;
    box-shadow:3px 3px 0 #111;
  }

  .article-card img{
    width:100%;
    height:180px;
  }

  .article-content h2{
    font-size:20px;
    margin-bottom:10px;
  }

  .article-content p{
    font-size:14px;
    line-height:1.5;
  }

  .labels{
    gap:10px;
  }

  .small-tag,
  .category{
    padding:6px 12px;
    font-size:11px;
    border:2px solid #111;
  }

  .article-info{
    flex-direction:column;
    gap:8px;
    font-size:12px;
  }

  .load-more{
    width:100%;
    padding:14px 20px;
    font-size:12px;
    box-shadow:3px 3px 0 #111;
  }

  .article-right-side{
    gap:20px;
  }

  .side-box{
    padding:20px;
    box-shadow:3px 3px 0 #111;
  }

  .side-box h2{
    font-size:28px;
    margin-bottom:25px;
  }

  .trend-item{
    gap:15px;
  }

  .num{
    font-size:40px;
  }

  .trend-item h3{
    font-size:18px;
  }

  .trend-item p{
    font-size:14px;
  }

  .category-box{
    font-size:16px;
    padding:12px;
  }

  .authors-section{
    padding:30px 10px;
  }

  .authors-title{
    font-size:32px;
  }

  .authors-subtitle{
    font-size:16px;
  }

  .line{
    width:100px;
    margin-bottom:40px;
  }

  .authors-cards{
    flex-direction:column;
    gap:20px;
  }

  .author-card{
    width:100%;
    border:3px solid #111;
    padding:20px;
    box-shadow:4px 4px 0 #111;
  }

  .author-card img{
    width:100px;
    height:100px;
  }

  .author-card h2{
    font-size:28px;
  }

  .author-card h4{
    font-size:14px;
  }

  .author-card p{
    font-size:14px;
    line-height:1.6;
  }

  .badge{
    padding:8px 12px;
    font-size:11px;
  }

  .socials{
    gap:12px;
  }

  .icon{
    width:40px;
    height:40px;
    font-size:16px;
    border:2px solid #111;
  }

  .diamond{
    width:150px;
    height:150px;
  }

  .rebellion-section{
    padding:30px 10px;
  }

  .rebellion-title{
    font-size:32px;
  }

  .rebellion-subtitle{
    font-size:16px;
  }

  .rebellion-line{
    width:80px;
    margin-bottom:40px;
  }

  .rebellion-content{
    flex-direction:column;
    gap:30px;
  }

  .rebellion-left,
  .rebellion-right{
    width:100%;
  }

  .rebellion-left h2,
  .rebellion-right h2{
    font-size:28px;
  }

  .rebellion-box{
    padding:18px;
    box-shadow:3px 3px 0 #111;
  }

  .rebellion-box p{
    font-size:16px;
  }

  .rebel-feature{
    gap:12px;
  }

  .feature-icon{
    width:40px;
    height:40px;
    font-size:16px;
  }

  .rebel-feature p{
    font-size:16px;
  }

  .join-btn{
    width:100%;
    padding:14px 20px;
    font-size:14px;
    box-shadow:3px 3px 0 #111;
  }

  .testimonial-card{
    border:2px solid #111;
    padding:15px;
    box-shadow:3px 3px 0 #111;
  }

  .testimonial-card p{
    font-size:14px;
    margin-bottom:15px;
  }

  .testimonial-user{
    gap:12px;
  }

  .testimonial-user img{
    width:40px;
    height:40px;
  }

  .testimonial-user h4{
    font-size:16px;
  }

  .testimonial-user span{
    font-size:14px;
  }

  footer{
    padding:30px 10px 15px;
  }

  .footer-logo-box{
    width:45px;
    height:45px;
    font-size:20px;
  }

  .footer-logo h2{
    font-size:22px;
  }

  .footer-about p,
  .footer-newsletter p{
    font-size:14px;
  }

  .footer-links h3,
  .footer-newsletter h3{
    font-size:20px;
    margin-bottom:15px;
  }

  .footer-links ul li{
    margin-bottom:12px;
    font-size:14px;
  }

  .newsletter-box input,
  .newsletter-box button{
    font-size:14px;
    padding:14px;
  }

  .newsletter-box{
    gap:12px;
  }

  .footer-bottom{
    flex-direction:column;
    gap:12px;
    padding-top:20px;
  }

  .footer-bottom p{
    font-size:12px;
  }

  .footer-policy{
    flex-direction:column;
    gap:12px;
    width:100%;
  }

  .footer-policy span{
    font-size:12px;
  }

}

/* EXTRA SMALL (320px and below) */
@media(max-width:320px){

  nav{
    width:90%;
  }

  .logo{
    font-size:14px;
  }

  .nav-links{
    gap:8px;
    font-size:10px;
  }

  .subscribe-btn{
    font-size:10px;
    padding:8px 12px;
  }

  .title h1{
    font-size:28px;
  }

  .description{
    font-size:13px;
  }

  .section-title{
    font-size:28px;
  }

  .author-card h2{
    font-size:24px;
  }

}