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

:root{
   --color_black: #000000;
}

body{
   font-size: 16px;
   font-family: 'Oswald', sans-serif;
}

a{
   text-decoration: none;
}

li{
   list-style: none;
}

hr{
   margin-bottom: 5px;
}
.container{
   width: 90%;
   margin-left: auto;
   margin-right: auto;
}

/* navbar */
.nav__logo{
   width: 50px;
   color: rgb(64, 64, 116);
}

.nav{
   display: flex;
   font-size: 17px;
   justify-content: space-between;
   align-items: center;
   height: 60px;
   padding: 20px 0;
}
.nav__menu{
   list-style: none;
   display: flex;
   flex: 1;
}

.nav__menu li{
   padding: 10px;
}

.nav__menu a{
   color: var(--color_black);
}

.nav__menu a:hover{
   border-bottom: 2px solid var(--color_black);
}

.btn__menu{
   position: relative;
   cursor: pointer;
   font-size: 1.4rem;
   display: none;
}

/** Media queries */
@media(max-width: 650px){
   .nav__menu{
      display: block;
      position: absolute;
      top: 0;
      left: 0;
      background: white;
      height: 400px;
      width: 150px;
      border: solid 1px black;
      transform: translateX(-150px);
      transition: transform .5s ease-in-out;
   }

   .btn__menu{
      display: block;
   }

   .show{
      transform: translateX(0px);
   }
}

/* header */
.header{
   width: 100%;
   height: 550px;
   background: url('../assets/img/header.jpg') no-repeat center center/cover;
   margin-bottom: 20px;
   padding-bottom: 200px;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: flex-end;
}

.header__btn{
   background: #262626;
   display: inline-block;
   font-weight: bold;
   cursor: pointer;
   padding: 10px 20px;
   color: white;
   font-size: 15px;
   border: solid 1px white;
   margin-top: 10px;
}

.Header__title,
.header__text{
   margin-bottom: 10px;
   color: white;
}

.header__btn:hover{
   opacity: .7;
}

/* News */
.news{
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   gap: 20px;
   margin-bottom: 40px;
}
.news-cards{
   position: relative;
}
.news-cards__img{
   width: 100%;
   height: 180px;
}

.news-cards__title{
   font-size: 20px;
   margin: 10px 0;
}

.news-cards__link{
   display: inline-block;
   padding: 10px 0;
   text-transform: uppercase;
   font-weight: bold;
   color: var(--color_black);
   position: absolute;
   bottom: -35px;
}

/* breaking news */
.breaking-news{
   width: 100%;
   height: 350px;
   background: url(../assets/img/baner.jpg) no-repeat center center/cover;
   color: white;
   margin-bottom: 20px;
}

.content{
   padding: 20px;
}

/* baner breaking news */
.baner-news{
   width: 100%;
   height: 350px;
   background: url(../assets/img/baner-two.jpg) no-repeat center center/cover;
   color: var(--color_black);
   margin-bottom: 20px;
}

.content-news{
   padding: 20px;
}
/* social */
.social{
   margin: 50px;
}

.social__paragraf{
   text-align: center;
   font-size: 30px;
   margin-bottom: 20px;
}

.soacial-container{
   display: flex;
   align-items: center;
   justify-content: center;
}

.social-container__links{
   margin: 0 20px;
}

.social-container__links i{
   font-size: 2rem;
   color: var(--color_black);
}

/* footer links */
.footer-links{
   background: #333;
   font-size: 12px;
   padding: 35px 0;
   color: white;
}

.footer-container{
   display: grid;
   grid-template-columns: repeat(6, 1fr);
   gap: 10px;
   align-items: flex-start;
   justify-content: center;
}

.footer-container__list{
   margin: 0 auto;
}
.footer-container__list li a{
   color: white;
}
/* footer */
.footer{
   font-size: 12px;
   font-weight: 0;
   text-align: center;
}

/* media queries */
@media(max-width:650px){
   .news{
      grid-template-columns: repeat(2, 1fr);
   }
   .news-cards{
      margin-bottom: 20px;
   }
}

@media(max-width:450px){
   .header__text{
      text-align: center;
   }
 
   .nav__searc{
      position: absolute;
      right: 50px;
   }
 
   .contant__paragraph{
    opacity: 0.9;  
    background: #333;
  }
 
  .footer-container{
    grid-template-columns: repeat(3, 1fr);
  }
 }

@media(max-width:375px){
   .news{
      grid-template-columns: 1fr;
   }

   .news-cards{
      margin-bottom: 20px;
   }
}