@media (max-width: 400px) {
  .nav-links.active::after {
    width: 90px;
    height: 90px;
  }

  .spiderman-gif {
    width: 120px;
    height: 120px;
  }

  h1 {
    font-size: 30px;
  }

  .home-text {
    margin: 0 60px;
  }

  .home-text p {
    font-size: 9px;
  }

  .home h2 {
    font-size: 7px;
    padding: 8px;
    right: 5%;
  }

  .home h2::after {
    content: none;
  }

  .img-container {
    top: 16.5%;
    left: 42.5%;
  }

  .worksList,
  .blogList {
    max-width: 400px;
  }

  .work-card,
  .blog-card {
    width: 160px;
    height: 190px;
  }

  .workMainDescription,
  .workDescription {
    font-size: 8px;
  }

  .blog-card-image {
    height: 80px;
  }

  .blog-card-content {
    padding: 5px;
  }

  .blog-card-ctg,
  .blog-card-date p,
  .blog-card-info,
  .readMoreBtn {
    font-size: 5px;
  }

  .blog-card-title {
    font-size: 7px;
  }

  .blog-svg {
    width: 5px;
    height: 5px;
  }

  .blog-card-info {
    margin-bottom: 0;
  }

  .work-modal,
  .blog-modal {
    margin: 35% auto;
  }

  .swiper-container {
    max-width: 350px;
  }

  .cat-runner img {
    height: 50px;
  }

  .feedback {
    width: 350px;
  }

  .modal {
    max-width: 300px;
  }
}