@media (max-width: 1199.98px) {
  section:not(section.hero) .title h1 {
    font-size: 2.5em !important;
  }

  .contact-container .send-mail {
    padding: 2.5em;
  }

  .contact-container .send-mail .header h1 {
    font-size: 2em;
    line-height: 2rem;
  }
}

@media (max-width: 1023.98px) {
  section.hero .hero-container .circle {
    right: 15%;
  }

  section.hero .hero-container .info .title h1 {
    font-size: 7em;
  }

  section.about-me .about-container {
    width: 90%;
  }

  section.needed .needed-container {
    width: 95%;
  }

  section.needed .needed-container .content {
    gap: 5em;
    justify-content: center;
  }

  section.needed .needed-container .content .serv {
    width: 350px;
  }
}

@media (max-width: 990.98px) {
  .title h1 {
    text-align: center;
  }

  section.about-me .about-container .content {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .contact-container .contact-info {
    width: 95%;
  }

  .contact-container .contact-info .contact-info-cont {
    flex-direction: row;
    gap: 4rem;
    flex-wrap: wrap;
    justify-content: center;
  }

  .contact-container {
    flex-direction: column;
    align-items: center;
    gap: 5em;
  }

  section.projects .projects-container .projects-botton {
    gap: 1.5em;
    row-gap: 2rem;
    flex-wrap: wrap;
    justify-content: center;
  }
}

@media (min-width: 821px) and (max-width: 990.98px) {
  section.about-me .about-container .content .info {
    width: 80%;
  }

  section.about-me .about-container .content .image {
    width: 40%;
  }
}

@media (min-width: 681px) and (max-width: 990.98px) {
  .contact-container .send-mail {
    width: 65%;
  }
}

@media (max-width: 820px) {
  section.about-me .about-container .content .info {
    width: 95%;
  }

  section.hero .hero-container .circle {
    right: 5%;
    top: 5%;
  }
}

@media (min-width: 601px) and (max-width: 820px) {
  section.about-me .about-container .content .image {
    width: 50%;
  }
}

@media (max-width: 680.98px) {
  .contact-container .send-mail {
    width: 100%;
  }
}

@media (max-width: 600.98px) {
  section.projects .projects-container .projects-items .iphone {
    position: relative;
    width: 50%;
    right: unset;
    bottom: unset;
  }

  section.about-me .about-container .content .image .line-2 {
    top: -6%;
  }

  section.about-me .about-container .content .image .line-3 {
    bottom: -6%;
  }

  section.projects .projects-container .projects-items {
    display: flex;
    justify-content: center;
  }

  section.projects .projects-container .projects-items .mac {
    display: none;
  }

  section.projects .projects-container .projects-items .iphone .projects-img {
    width: 90%;
    left: 5.5%;
  }

  section.about-me .about-container .content .image {
    width: 65%;
  }

  section.hero .hero-container .circle {
    display: none;
  }

  section.hero .hero-container .info .title h1 {
    font-size: 5.5em;
  }

  section.projects {
    padding: 7em 0 5em 0;
  }

  section:not(section.hero) .title h1 {
    font-size: 2em !important;
  }

  .hero {
    padding: 2rem 0 0 0;
  }

  .contact-container .contact-info .contact-info-cont {
    gap: 2em;
  }
}

@media (max-width: 450.98px) {
  section.hero .hero-container .info .title h1 {
    font-size: 4.5em !important;
    line-height: 1.3;
  }

  section.projects .projects-container .projects-items .iphone {
    width: 70%;
  }

  section.about-me .about-container .content .image {
    width: 90%;
  }

  section.about-me .about-container .content .info .info-container .text p {
    font-size: 1.2em;
  }

  section.needed .needed-container .content .serv {
    width: 95%;
  }

  .contact-container .send-mail .header h1 {
    font-size: 1.6em;
    line-height: 1.6rem;
  }

  .contact-container .contact-info .contact-info-cont .info-bx .info a {
    color: var(--accent);
    font-size: 1.1rem;
  }

  .header-container .nav {
    width: 100%;
  }

  section.hero .hero-container .info {
    width: 93%;
  }
}

@media (max-width: 375.98px) {
  section.hero .hero-container .info .title h1 {
    font-size: 4em !important;
    line-height: 1.5;
  }

  section.projects .projects-container .projects-items .iphone {
    width: 85%;
  }

  .contact-container .send-mail .header h1 {
    font-size: 1.2em;
    line-height: 1.6rem;
  }

  .contact-container .send-mail .header p {
    line-height: 1.1;
    font-size: 0.9em;
  }

  .contact-container .send-mail {
    gap: 2em;
  }

  .contact-container .send-mail .form form {
    gap: 0;
  }

  .contact-container .contact-info .contact-info-cont .info-bx .info a {
    font-size: 1em;
  }
}

@media (max-width: 350px) {
  section.hero .hero-container .info .title h1 {
    font-size: 3.5em !important;
    line-height: 1.5;
  }

  .contact-container .send-mail {
    padding: 2em 1.3em;
  }

  .contact-container .contact-info .contact-info-cont .info-bx {
    gap: 1em;
  }

  .contact-container .contact-info .contact-info-cont .info-bx .icon {
    width: 3.5rem;
    height: 3.5rem;
  }

  .contact-container .contact-info .contact-info-cont .info-bx .icon i {
    font-size: 1.2em;
  }

  .contact-container .contact-info .contact-info-cont .info-bx .info a {
    font-size: 0.9em;
  }
}