* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}
.container {
  background-color: rgb(255, 240, 133);
  padding: 15px;
  min-height: 100vh;
  border-bottom: 5px solid black;
}
a {
  text-decoration: none;
  color: black;
  font-family: sans-serif;
}

ul {
  list-style: none;
  display: flex;
  justify-content: center;
  gap: 30px;
  font-weight: bold;
}
a:hover {
  color: rgb(255, 105, 0);
}
.nav {
  background-color: white;
  margin-top: 10px;
  margin: 0 100px;
  border-radius: 20px;
  border: 2px solid black;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 40px;
  position: fixed;
  width: 85%;
  z-index: 100;
}

button {
  padding: 10px 20px;
  font-family: sans-serif;
  font-weight: bold;
  font-size: large;
  border-radius: 20px;
  border: 2px solid black;
  background-color: rgb(255, 209, 91);
  transition: 0.2s;
}
button:hover {
  transform: translate(6px, 6px);
}
.nav .logo h1 {
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
.trending {
  width: 21%;
  height: 10%;
  background-color: black;
  color: white;
  font-family: sans-serif;
  font-size: x-small;
  padding: 12px 10px;
  box-shadow: 3px 3px black;
  display: flex;
  align-items: center;
  justify-content: space-between;
  transform: rotate(-5deg);
}
.trending p {
  font-size: larger;
  font-weight: bold;
}
.imag .mmm {
  width: 500px;
  height: 400px;
  box-shadow: 5px 5px black;
  border: 2px solid black;
}
.imag {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: end;
  transform: rotate(5deg);
  transition: 0.2s;
  position: relative;
}
.imag:hover {
  transform: translate(-4px, -4px) rotate(5deg);
}

.featured-badge {
  position: absolute;
  top: -15px;
  right: -15px;
  background-color: #d92635;
  color: white;
  font-family: sans-serif;
  font-weight: bold;
  font-size: 14px;
  padding: 8px 15px;
  border: 2px solid black;
  box-shadow: 4px 4px 0px black;
  z-index: 10;
}
.words {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 40px;
  padding: 20px 100px;
}
.brutal {
  text-shadow: 3px 3px black;
}
.father {
  height: auto;
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: 50%;
}
.parag {
  width: 95%;
  height: 100%;
  background-color: white;
  padding: 20px 20px;
  box-shadow: 5px 5px black;
  border: 2px solid black;
}
.parag .bb {
  color: black;
  font-family: sans-serif;
  font-weight: 500;
  font-size: x-large;
}
.butm2 .but1 {
  background-color: black;

  color: white;

  font-family: sans-serif;

  font-size: larger;

  font-weight: bold;

  padding: 25px 40px;

  box-shadow: 7px 7px black;

  transition: 0.2s;
}

.butm2 .but2 {
  background-color: white;

  color: black;

  font-family: sans-serif;

  font-size: larger;

  font-weight: bold;

  padding: 25px 40px;

  box-shadow: 7px 7px black;

  transition: 0.2s;
}

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

.but1:hover {
  transform: translate(6px, 6px);
  box-shadow: none;
}

.but2:hover {
  transform: translate(6px, 6px);
  box-shadow: none;
}

.Middel-container {
  padding: 60px 10%;
  background-color: white;
  height: 150%;
  border-bottom: 5px solid black;
}

.header-row {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 150px;
  margin-bottom: 40px;
}

.main-title {
  color: rgb(14, 10, 10);

    font-family: sans-serif;

    font-weight: 800;

font-size: 3vw;
}

.fresh-badge {
  width: 15%;
    height: 10%;
    background-color:#0e0c0c; 
    color: white;
    font-family: sans-serif;
    font-weight: bold;
    font-size: 14px;
    padding: 8px 15px;
    border: 2px solid black;
    box-shadow: 4px 4px 0px black; 
    transform: rotate(-5deg);
}


.main-content {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 30px; 
    width: 100%;
    max-width: 1200px; 
    margin: 0 auto; 
}


.articles-side {
    flex: 1; 
    min-width: 0; 
      display: flex;
          flex-direction: column;


}



.sidebar {
    width: 380px; 
    position: sticky;
    top: 100px; 
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.article-card {
  display: flex;
  border: 4px solid black;
  padding: 20px;
  box-shadow: 10px 10px 0px black;
  gap: 25px;
}

.card1,
.card2,
.card3 {
    display: flex;
    flex-direction: row;
    gap: 25px;
    padding: 25px;
    border: 4px solid black;
    box-shadow: 5px 5px 0px black;
    transition: 0.2s ease;
    align-items: center;
    margin-bottom: 30px;
    cursor: pointer;
}

.card1:hover,
.card2:hover,
.card3:hover {
    transform: translate(6px, 6px);
    box-shadow: 4px 4px 0px black;
}
.card1:hover h2{
  color: #2659d9;
}
.card2:hover h2{
  color:#ff4d4d;
}
.card3:hover h2{
  color: #be26d9;
}

.side-box {
    width: 100%;
    background: white;
    border: 4px solid black;
    box-shadow: 8px 8px 0px black;
    padding: 20px;
}
.card-img-box {
    position: relative;
    flex: 0 0 200px;
}

.card-img-box img {
    width: 100%;
    height: 150px;
    object-fit: cover;
    border: 3px solid black;
}

.card-info {
    flex: 1;
    text-align: left;
}

.card-info h2 {
    font-family: sans-serif;
    font-size: 1.6rem;
    margin-bottom: 10px;
    font-weight: 800;
}

.card-info p {
    font-family: sans-serif;
    font-size: 1rem;
    color: #333;
    line-height: 1.4;
}
.card-img-box {
  position: relative;
  flex: 0 0 200px;
}
.card-img-box img {
  width: 100%;
  border: 2px solid black;
}

.status-badge-new,
.status-badge-hot,
.status-badge-viral {
  position: absolute;
  top: -10px;
  right: -10px;
  padding: 5px 10px;
  border: 2px solid black;
  font-weight: bold;
  font-size: 0.8rem;
      transform: rotate(-5deg);

}
.status-badge-viral{
        transform: rotate(25deg);

}
.status-badge-new{
        transform: rotate(20deg);

}
.status-badge-new{
  background: #ff4d4d;
  color: white;
}
.status-badge-hot{
  background-color: #2d70ff;
  color: white;
}
.status-badge-viral{
  background-color: #682dff;
  color: white;
}
.card-info {
  flex: 1;
  text-align: left;
}
.category-tech{
  display: inline-block;
  padding: 5px 10px;
    box-shadow: 4px 4px 0px black;
  font-weight: bold;
    background: #ffeb3b;

  margin-bottom: 15px;
}
.category-design{
  display: inline-block;
  padding: 5px 10px;
    box-shadow: 4px 4px 0px black;
  font-weight: bold;
    background: #ffeb3b;

  margin-bottom: 15px;
}
.category-culture{
  display: inline-block;
  padding: 5px 10px;
    box-shadow: 4px 4px 0px black;
  font-weight: bold;
    background: #ffeb3b;

  margin-bottom: 15px;
}

.category-design{
  display: inline-block;
  padding: 5px 10px;
  box-shadow: 4px 4px 0px black;
  font-weight: bold;
background-color: rgb(123,241,168);
}

.category-culture{
  display: inline-block;
  padding: 5px 10px;
  box-shadow: 4px 4px 0px black;
  font-weight: bold;
  background-color: rgb(253,165,213);

}

.card-info h2 {
  font-size: 1.8rem;
  margin-bottom: 10px;
}

.card-meta {
  display: flex;
  gap: 50px;
  font-size: 0.8rem;
  font-weight: bold;
  border-top: 2px solid #eee;
  padding-top: 15px;
  margin-top: 15px;
}
.card-meta span{
  font-family: sans-serif;
}
.side-box {
  border: 4px solid black;
  padding: 25px;
  box-shadow: 8px 8px 0px black;
  position: sticky;
}

.trending-box {
    padding: 30px;
    border: 5px solid black;
    box-shadow: 12px 12px 0px black;
    width: 100%; 
    position: sticky;
}

.trending-title {
    font-family: sans-serif;
    font-size: 2rem;
    font-weight: 800;
    margin-bottom: 40px;
    letter-spacing: -1px;
}


.trending-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 25px;
}

.trending-item {
    display: flex;
    align-items: center;
    gap: 20px;
}


.trend-number {
    font-family: sans-serif;
    font-size: 3.5rem;
    font-weight: 900;
    line-height: 1;
}


.color-red { color: #ff3b3b; }
.color-blue { color: #2d70ff; }
.color-purple { color: #ad33ff; }


.trend-info {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.trend-link1,.trend-link2,.trend-link3 {
    font-family: sans-serif;
    font-size: 1.2rem;
    font-weight: 800;
    color: black;
    text-decoration: none;
    line-height: 1.2;
}

.trend-link1:hover {
color: #d92635;
}
.trend-link2:hover {
color: #2659d9;
}
.trend-link3:hover {
color: #a926d9;
}

.trend-stats {
    font-family: sans-serif;
    font-size: 0.9rem;
    color: #666;
    font-weight: 600;
    gap: 30px;
}


.icon-orange { color: #ff9100; }
.icon-yellow { color: #ffcc00; }
.icon-red { color: #ff0000; }

.side-box h3 {
  margin-bottom: 20px;
  font-weight: 900;
  font-size: 1.5rem;
}

.cat-btn {
  display: block;
  padding: 15px;
  border: 2px solid black;
  margin-bottom: 10px;
  font-weight: bold;
  text-align: left;
  box-shadow: 0px 0px 0px black;
  transition: 0.2s;
}
.cat-btn:hover {
  transform: translate(-3px, -3px);
  box-shadow: 7px 7px 0px black;
}
.yellow {
  background: #fff59d;
}
.green {
  background: #c8e6c9;
}
.pink {
  background: #f8bbd0;
}
.red {
  background: #dbeafe;
}

.sidebar h3{
  font-family: sans-serif;
  font-weight: 700;
  font-weight: bold;
  font-size: 28px;
}

.load-more-btn {

  background: black;
  color: white;
  width: auto; 
  display: block;
  margin: 20px auto; 
  height: auto; 
  padding: 20px 50px; 
  border-radius: 1px; 
  font-weight: 800;
  font-size: 1.2rem;
  box-shadow: 7px 7px black;
  transition: 0.2s;
  cursor: pointer;

}

.load-more-btn:hover{
   transform: translate(6px, 6px);
   box-shadow:none
}

/*-------------------------*/

.cont{
background-color: rgb(255,210,48);
padding: 70px 70px;
height: auto;
padding-left: 95px;
  border-bottom: 5px solid black;

}
.heading{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
.heading h1{
  font-family: 'Inter', sans-serif;
  font-weight: 900;
  font-weight: bold;
  font-size: 3rem;
  letter-spacing: -1px;
}

.heading p{
  font-family: sans-serif;
  font-weight: 900;
  font-weight: bold;
  color: #666;
  
}
.heading hr{
  background-color:rgb(0,0,0);
  width: 10%;
  height: 8px;
  font-weight: 800;
  margin-top: 12px;

}


.box1 img{
width: 120px;
border: 4px solid #0e0c0c;

}
.box2 img{
width: 120px;
border: 4px solid #0e0c0c;

}
.box3 img{
width: 120px;
border: 4px solid #0e0c0c;

}
.box1,
.box2,
.box3{
width: 30%;
  height: 100%;
border: 4px solid #0e0c0c;
  box-shadow: 7px 7px black;
  height: auto;
  transition: 0.4s ease;
  

}
.box1{
  background-color: rgb(254,249,194);
}
.box2{
  background-color: rgb(219,252,231)
}
.box3{
  background-color:rgb(252,231,243)
}
.box1:hover{
transform: translate(4px,4px);
}
.box2:hover{
transform: translate(4px,4px);
}
.box3:hover{
transform: translate(4px,4px);
}

.box1:hover h1{
color: #d92629;
}
.box2:hover h1{
color: #d926ac;
}
.box3:hover h1{
color: #ac26d9;
}
.box2:hover{
transform: translate(4px,4px);
}
.box3:hover{
transform: translate(4px,4px);
}
.boxs{
display: flex;
flex-direction: row;
align-items: center;
gap: 20px;
padding: 70px 60px;

}
.First-AUTHOR,
.Second-AUTHOR,
.Third-AUTHOR{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 15px;
}
.his-name{
  font-family: 'Inter', sans-serif;
  font-weight: 900;
  font-weight: bold;
  font-size: 2rem;
  letter-spacing: -1px;
}
.proff{
  font-family: sans-serif;
  font-weight: 900;
  font-weight: bold;
  color: #666;
}
.founder,
.lead,
.VIRAL{
  font-family: sans-serif;
color: white;
font-size: 15px;
width: 20%;
background-color: #0e0c0c;
padding: 5px;
padding-inline: 5px;
border: 2px solid black;
margin-top: 20px;
margin-right: 20px;
transform: rotate(25deg);

}

.lead{
  transform: rotate(-10deg);

}
.founder{
background-color: rgb(251,44,54);
}
.lead{
background-color:rgb(43,127,255)
}
.VIRAL{
  background-color:rgb(173,70,255)
}
.word1{
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}
.word2{
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}
.word3{
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}
.paragraph{
  line-height: 1.6;
  font-family: sans-serif;
}

.social-Media i {
    background-color: #000;    
    color: #fff;              
    width: 45px;             
    height: 45px;
    box-shadow: 1px 1px 0px black;
      margin: 20px 2px;
     display: flex;        
    align-items: center;    
    justify-content: center;
    transition: 0.2s ;
  }

  .social-Media #t:hover{
background-color: #26a6d9;
    transform: translate(-3px,-3px);
  box-shadow: 7px 7px 0px black;
  border: 2px solid black;
    
  }
  .social-Media #L:hover{
    background-color: #2d70ff;
    transform: translate(-3px,-3px);
  box-shadow: 7px 7px 0px black;
    border: 2px solid black;

  }
  .social-Media #I:hover{
    background-color: #d12dff;
    transform: translate(-3px,-3px);
  box-shadow: 7px 7px 0px black;
    border: 2px solid black;

  }

  /*-------------------------------------*/

  .cont2{
padding: 70px 70px;
height: auto;
padding-left: 95px;
  /* border-bottom: 5px solid black; */
  
}
.styling{
display: flex;
gap: 60px;
padding-inline: 40px 40px;
}

.left-bar{
  display: flex;
  flex-direction: column;
  gap: 35px;
margin-top: 40px;
}
.list{
  display: flex;
  flex-direction: column;
  gap: 30px;
}
.cont2 .heading{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
.cont2 .heading h1{
  font-family: 'Inter', sans-serif;
  font-weight: 900;
  font-weight: bold;
  font-size: 3rem;
  letter-spacing: -1px;
}

.cont2 .heading p{
  font-family: sans-serif;
  font-weight: 900;
  font-weight: bold;
  color: #666;
  
}
.cont2 .heading hr{
  background-color:rgb(0,0,0);
  width: 10%;
  height: 8px;
  font-weight: 800;
  margin-top: 15px;

}

.cont2 button{
  background-color: black;
  color: white;
  font-family: sans-serif;
  font-size: 150%;
  font-weight: bold;
  padding: 25px 40px;
  box-shadow: 7px 7px black;
  border-radius: 1%;
  transition: 0.2s;
  width: 70%;
  height: 10%;
  margin-top: 20px;
}
button:hover {
  transform: translate(6px, 6px);
  box-shadow: none;
}
.left-bar h1{
   font-family: sans-serif;
  font-weight: 900;
  font-weight: bold;
  font-size: 2rem;
  letter-spacing: -1px;
}

.box-inside{
  border: 2px solid black;
  width:100%;
  height: auto;
  padding: 20px 20px ;
  box-shadow: 3px 3px 0px black;

}

.box-inside p{
   color: black;
  font-family: sans-serif;
  font-weight: 500;
  font-size: large;
  line-height: 28px;
}

#correct,
#descord,
#star,
#pen{
  border: 2px solid black;
  width: 50px;
  padding: 12px 10px;
    color: white;
    padding-left: 15px;
    margin-right: 15px;

}

#correct{
  background-color: rgb(251,44,54);
}
#descordt{
  background-color: #2b7fff;
}
#start{
  background-color: rgb(173,70,255);
}
#pen{
  background-color:rgb(22,206,95);
}

.list p{
    color: black;
  font-family: sans-serif;
  font-weight: 450;
  font-size: large;
  line-height: 28px;
}

.right-bar{
  border: 5px solid black;
    box-shadow: 6px 6px 0px black;
    padding: 35px 35px;
    width: 50%;
    display: flex;
    flex-direction: column;
    gap: 40px;

}
.right-bar h1{
  margin-top: 10px;
  margin-bottom: 20px;
  font-family: sans-serif;
  font-weight: 900;
  line-height: 28px;
  
}
.right-bar img{
  width: 50px;
  border: 2px solid black;
}
.right-bar .client-1{
    border: 3px solid black;
      width: 100%;
      padding: 23px 23px;
      padding-left: 40px;
      background-color: rgb(254,242,242);


}
.right-bar .client-1 p{
  color: black;
  font-family: sans-serif;
  font-weight: 500;
  font-size: large;
  line-height: 28px;
}
.right-bar .client-2{
    border: 3px solid black;
      width: 100%;
      padding: 23px 23px;
      padding-left: 40px;
      background-color: rgb(239,246,255);


}
.right-bar .client-2 p{
  color: black;
  font-family: sans-serif;
  font-weight: 500;
  font-size: large;
  line-height: 28px;
}
.right-bar .client-3{
    border: 3px solid black;
      width: 100%;
      padding: 23px 23px;
      padding-left: 40px;
      background-color:rgb(250,245,255);


}
.right-bar .client-3 p{
  color: black;
  font-family: sans-serif;
  font-weight: 500;
  font-size: large;
  line-height: 28px;
}
.imagee1{
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 12px;
}
.imagee2{
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 12px;
}
.imagee3{
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 12px;
}
.right-bar .handp h2{
font-family: sans-serif;
    font-size: 1rem;
        font-weight: 600;

}
.right-bar .handp p{
  font-family: sans-serif;
    font-size: 0.9rem;
    color: #666;
    font-weight: 600;
    gap: 30px;
}
/*----------------------------*/

.Cant-Believe-I-Finished{
  background-color: rgb(0,0,0);
  color: white;
  font-family: sans-serif;
  display: flex;
  flex-direction: row;
  height: auto;
  padding-inline: 100px;
  padding-top: 100px;
  padding-bottom: 20px;
  gap: 150px;

}


#classic-pencil{
  border: 2px solid black;
  background-color: white;
  width: 60px;
  padding: 12px 10px;
  color: rgb(4, 4, 4);
  margin-right: 5px;
  margin-bottom: 10px;
}
.The-Footer-Left-part{
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.The-Footer-Left-part p{
  line-height: 25px;
}
.ul{
display: flex;
flex-direction: column;
gap: 20px;
color: white;
}
.ul a{
  color: white;
}

.ul li a:hover {
  color: yellow;
}
.The-Footer-Right-part{
display: flex;
flex-direction: column;
gap: 20px;
}
.The-Footer-Right-part p{
    line-height: 25px;

}
.butom8{
 background-color:rgb(0,0,0);
  color: rgb(249, 244, 244);
  font-family: sans-serif;
  font-size: 150%;
  font-weight: bold;
  padding: 30px 40px;
  border-radius: 1%;
  width: 100%;
  height: 10%;
  border: 2px solid white;

}
.The-Footer-Right-part button{
  width: 100%;
  border-radius: 5%;
  background-color: yellow;
  box-shadow: 4px 4px 0px black;
  padding: 18px 18px;
}
.The-End{
  background-color: rgb(0,0,0);
  color: white;
  font-family: sans-serif;
  padding-inline: 100px;
  padding-top: 20px;
  display: flex;
  flex-direction: row;
text-align: center; 
 gap: 390px;

 padding-bottom: 110px;
}
.the-line hr{
width: 100%;  
  padding: 1px 1px;
background-color: white;
}
.the-line{
  background-color:  rgb(0,0,0);
  padding-inline: 100px;
  padding-bottom: 20px;

}


.The-End .the-end2 .h1{
  font-size: 100%;

}
.The-End .the-end2 h2{
  font-size: 100%;
  text-align: start;

}
.The-End .the-end2 h3{
  text-align: start;

}
.the-end2{
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.Sits ul li a:hover {
  color: yellow;
}
.Sits ul li a{
  color: white;
}