* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
@media screen and (max-width: 1080px) {
  * {
    box-sizing: border-box;
    max-width: 100%;
    margin: 0;
    padding: 0;
  }
  header {
    max-width: 1020px;
    box-sizing: border-box;
  }

  .navigation .navbar-nav {
    box-sizing: border-box;
    display: none;
  }
  .design .boshlash {
    box-sizing: border-box;
    color: black;
  }
  .design .design-content .design-img {
    width: 100%;
    height: auto;
    box-sizing: border-box;
    padding: 0 30%;
  }
  .container .title {
    box-sizing: border-box;
    color: #fff;
  }
  .container .title .recent {
    box-sizing: border-box;
    animation: 5s recent infinite;
  }
  @keyframes recent {
    from {
      color: yellow;
    }
    to {
      color: chartreuse;
    }
  }

  .design .design-content {
    box-sizing: border-box;
    display: block;
  }
  .blog {
    box-sizing: border-box;
    background: linear-gradient(
      110deg,
      #3d3d3d 49%,
      #4d4d4d 51%
    ); /* linear gradient is together both colors and only work background properties*/
  }
  .blog .blog-content {
    box-sizing: border-box;
    display: block;
  }
  .blog .blog-content img {
    max-width: 100%;
    height: auto;
    margin: 0 30%;
  }
  .blog .container .belgi {
    color: rgb(235, 235, 235);
    margin: 0 15%;
  }
  .blog .blog-item audio {
    margin: 0 35%;
  }
  .blog .blog-item a {
    margin-left: 45%;
    animation: 5s achun infinite;
    background-color: yellow;
  }
  .blog .blog-item a:hover {
    background-color: rgb(218, 218, 89);
  }
  @keyframes achun {
    from {
      color: rgb(248, 242, 242);
    }
    to {
      color: rgb(0, 0, 0);
    }
  }
  .about {
    box-sizing: border-box;
  }
  .about .about-text .ism {
    font-size: 30px;

    color: black;
  }
  .about .yaqin {
    padding-right: 0px;
  }
  footer {
    box-sizing: border-box;
  }
}