/* =========== md 1024px ============= */
@media screen and (max-width:1024px) {

  .skills-frontend,
  .skills-backend {

    height: auto;
  }
}

/* =========== md 1024px ============= */
@media screen and (max-width:820px) {
  .home-des {
    font-size: 1.2rem;
  }

  .home .btn-box .btn-normal {
    margin-top: 1rem;
    display: inline-block;
    padding: 1rem 1.6rem;
  }

  .skills-container {
    display: flex;
    flex-direction: column;
  }

  .projects-container {
    display: inline-block;
  }

  .projects-container .projects-item {
    margin: 1rem 0;

  }

  .contact-details {
    font-size: 1.5rem;
  }

  .skills-frontend,
  .skills-backend {
    height: auto;
  }
}

/* =========== sm 600px ============= */
@media screen and (max-width:600px) {
  .header {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .third {
    font-size: 1rem;
  }

  .navbar {
    display: flex;
  }

  .home {
    text-align: center;
    display: flex;
    justify-content: center;
    flex-direction: column;
    overflow: hidden;
  }

  .home .home-socials {
    display: flex;
    flex-direction: row;
  }

  .home .btn-box .btn-normal {
    padding: 1rem 8rem;
  }

  .home .btn-box .btn-outline {
    padding: 1rem 8rem;
  }

  .home .btn-box .btn-normal {
    display: inline-block;
    margin-top: 1.5rem;
  }

  .about,
  .about-container {
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }

  .about-container .about-des a {
    display: flex;
    justify-content: center;
  }

  .about-des {
    font-size: 1rem;
    margin: 1.3rem;
  }

  .skills,
  .skills-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    overflow: hidden;
  }

  .skills-frontend,
  .skills-backend {
    display: flex;
    width: 278px;
    height: auto;
    justify-content: center;
    flex-direction: column;
    align-items: center;
  }

  .skills-content {
    gap: 1rem;
  }

  .projects-container {
    display: flex;
    flex-direction: column;
  }

  .contact-details {
    font-size: 1.5rem;
  }

  .contact-details ul {
    display: flex;
    flex-wrap: nowrap;
    flex-direction: column;
    align-items: center;
  }

  .contact-details ul li {
    display: flex;
    flex-direction: column;
  }

  .contact-details ul li a i {
    padding: 1rem 5.5rem;
  }

  .permalinks {
    flex-direction: column;
    gap: 1.5rem;
  }

  .footer__socials {
    margin-bottom: 2.6rem;
  }
}