@media (max-width: 992px) {
  /* 768px - 992px */
  .info {
    flex-wrap: wrap;
    height: auto;
    padding: 20px;
    gap: 50px;
  }

  .summary {
    width: 70%;
  }
  .info .image {
    width: 40%;
  }
  .skills_logos {
    grid-template-columns: repeat(3, 1fr);
  }
  .skills_logos_soft {
    grid-template-columns: repeat(2, 1fr);
  }
  .project_details {
    padding: 10px 0px 11px 20px;
  }
  .project_card {
    width: 70%;
  }
}

@media (max-width: 767px) {
  /* 576px - 767px */

  .Navbar_div {
    display: none;
  }
  .hamburger {
    display: block;
  }
  .punch_line_info {
    padding: 180px 100px;
  }
  .skills_logos {
    grid-template-columns: repeat(2, 1fr);
  }
  .skills_logos_soft > div > p {
    font-size: 16px;
  }
  .project_card {
    width: 90%;
  }
  .image {
    width: 60%;
    height: 50%;
  }
  .contact_details {
    flex-direction: column-reverse;
    padding: 30px 0;
    width: 90%;
  }
  .phn_email,
  .linkdin_github {
    gap: 10px;
    padding-left: 40px;
  }

  .linkdin_github {
    margin-top: 10px;
  }
}

@media (max-width: 575px) {
  /* 321px - 575px */
  .hamburger {
    width: 100%;
  }
  .skills_logos {
    grid-template-columns: repeat(1, 1fr);
  }
  .skills_logos_soft {
    grid-template-columns: repeat(1, 1fr);
  }
  .punch_line_info {
    padding: 40px 0;
    text-align: center;
  }
  .punch_subtitle > h1 {
    font-size: 20px;
  }
  .summary {
    width: 80%;
  }
  .image {
    width: 25%;
  }
  .abt-resume > a {
    padding: 8px 12px;
  }
  .abt-resume {
    gap: 5px;
  }
  .abt-resume > h1 {
    font-size: 20px;
  }
  .subtitle > h1 {
    font-size: 20px;
  }
  .projects_section > div > h1 {
    font-size: 20px;
  }
  .project_card {
    width: 90%;
    height: 350px;
  }
  .project_details > h1 {
    font-size: 20px;
  }
  .project_details > p {
    font-size: 14px;
  }
  .project_details > h3 {
    font-size: 18px;
  }
  .stacks > h3 {
    font-size: 16px;
  }
  .contacts h1 {
    font-size: 20px;
  }
  .phn_email a,
  .linkdin_github a {
    font-size: 15px;
  }
  #desc {
    font-size: 14px;
  }
}

@media (max-width: 320px) {
  .abt-resume {
    flex-wrap: wrap;
    justify-content: center;
  }
}