@font-face {
  font-family: inter;
  src: url('../fonts/Inter-Regular.ttf');
}

@font-face {
  font-family: interb;
  src: url('../fonts/Inter-Bold.ttf');
}

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

/* Header Codes */
.header {
  width: 1110px;
  margin-inline: auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 89px;
}

.header-menu {
  display: flex;
  gap: 40px;
  list-style-type: none;
}

.header-menu a {
  text-decoration: none;
  font-size: 15px;
  font-weight: 400;
  line-height: 26px;
  color: black;
}

.header-menu a:hover {
  color: rgba(241, 93, 81, 1);
}

/****************************************/
/* Hero Codes */
.hero {
  width: 1110px;
  margin: 61px auto;
  column-gap: 30px;
  display: grid;
  grid-template-areas:
    "hero-img hero-img news"
    "big-news big-news news"
  ;
}

.hero-img {
  grid-area: hero-img;
  width: 730px;
}

.news {
  grid-area: news;
  width: 350px;
  background-color: rgba(0, 0, 26, 1);
  padding: 31px;
}

.news h1 {
  font-size: 40px;
  font-weight: 700;
  line-height: 40px;
  color: rgba(233, 170, 82, 1);
  margin-bottom: 34px;
}

.news-item h3 {
  font-size: 20px;
  font-weight: 800;
  line-height: 24px;
  text-align: left;
  color: white;
  margin-bottom: 8px;
}
.news-item h3:hover {
  color: rgba(233, 170, 82, 1);
  cursor: pointer;
}

.news-item p {
  color: rgba(197, 198, 206, 1);
  font-size: 15px;
  font-weight: 400;
  line-height: 26px;
  text-align: left;
  margin-bottom: 29px;
}

hr {
  border: 1px solid rgba(94, 96, 122, 1);
  margin-bottom: 31px;
}

.big-news {
  grid-area: big-news;
  display: grid;
  grid-template-areas: 
  "h1 p"
  "h1 a";
}
.big-news h1{
  font-family: interb;
  grid-area: h1;
  width: 350px;
  font-size: 56px;
  font-weight: 800;
  line-height: 56px;
}
.big-news p{
  grid-area: p;
  width: 350px;
  font-size: 15px;
  font-weight: 400;
  line-height: 26px;
  
}
.big-news a{
  grid-area: a;
  width: 185px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 14px;
  font-weight: 700;
  line-height: 24px;
  letter-spacing: 4.375px;
  text-decoration: none;
  background: rgba(241, 93, 81, 1);
}

.big-news a:hover{
  background: black;
}

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

/* Trendler Codes  */
.trends {
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  width: 1110px;
  margin-bottom: 129px;
}

.trend-item {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  column-gap: 24px;
}
.trend-item img{
  width: 100px;
}
.trend-item-desc {
  width: 226px;
}
.trend-item-desc h2{
  color: rgba(197, 198, 206, 1);
  font-size: 32px;
  font-weight: 700;
  line-height: 32px;
  text-align: left; 
  margin-bottom: 12px;
}
.trend-item-desc h3{
  font-size: 18px;
  font-weight: 800;
  line-height: 24px;
  text-align: left;
  margin-bottom: 9px;
  
}
.trend-item-desc p{
  font-size: 15px;
  font-weight: 400;
  line-height: 26px;
  text-align: left;
  
}