@media (max-width: 900px) {
  .navbar ul,
  .contact-box .des-resp {
    display: none;
  }

  .navbar .menu,
  .contact-box .resp {
    display: block;
  }

  .navbar .logo {
    position: relative;
  }

  span.logo span {
    display: none;
  }

  .menu-container a {
    color: var(--primari_color);
  }

  .section {
    padding: 0 3.5rem;
  }

  section.section {
    padding: 4rem 3.5rem;
  }

  section {
    min-height: 100vh;
  }

  .services-container {
    margin-bottom: 2rem;
  }

  .portfolio-container {
    grid-template-columns: repeat(auto-fit, minmax(2rem, 1fr));
  }

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

  .contact-container .contact-box.desc-into {
    display: flex;
    /* flex-direction: column; */
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
  }

  .contact-box h2 {
    font-size: 2rem;
  }

  .contact-box .desc {
    margin: 1rem 0 2rem;
  }

  .contact-box .contact-detail {
    width: 50%;
  }

  .contact-detail i {
    background: transparent;
    padding: 0.5rem 0.7rem 0.5rem 0;
    margin-right: 1rem;
    border-right: 1px solid var(--primari_color);
  }

  .contact-box .field-box textarea {
    height: 10rem;
  }

  .footer {
    margin-top: 2rem;
    font-size: 0.7rem;
  }

  .footer_contant .footer_link ul {
    margin-top: 0.2rem;
  }

  .footer_contant .footer_link ul li:not(:first-child) {
    margin-top: 0.2rem;
  }

  .social_icon a i {
    padding-right: 0.3rem;
  }
}

@media (max-width: 700px) {
  /* .section{
    margin: 0 -1.5rem;
  } */

  .home {
    flex-direction: column;
    margin-bottom: 20rem;
  }

  .home .home_info {
    transform: translateY(10%);
    order: 2;
  }

  .home .home_info h1 {
    font-size: 2rem;
    margin-bottom: 1rem;
  }

  .home_info .btn_sci {
    margin: 2rem 0 5rem;
  }

  .home .home_img {
    transform: translateY(10%);
    order: 1;
    padding-bottom: 3rem;
  }

  .home_img .img_box::before,
  .home_img .img_box::after {
    display: none;
  }

  .home_img .img_box {
    width: 80vw;
    height: 80vw;
  }

  .portfolio-container {
    grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
    margin-bottom: 3rem;
  }

  .services.section {
    margin-top: -20rem;
  }
}

@media (max-width: 600px) {
  .navbar.section {
    padding: 0 2rem;
  }

  section.section {
    padding: 4rem 2rem;
  }

  .home_info h2 {
    font-size: 1.3rem;
  }

  .contact-box .contact-detail {
    width: 100%;
    margin: 1rem;
  }

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

  .contact-box form {
    background: transparent;
    padding: 0;
  }

  .contact-box .field-box {
    display: contents;
    width: 100%;
  }

  .field-box input[type="number"] {
    display: none;
  }

  .contact-box .field-box input,
  .contact-box .field-box textarea {
    width: 100%;
    margin-bottom: 0.5rem;
    border: 1px solid var(--bg_round_color);
  }

  .footer_contant {
    display: none;
  }

  .contact.section {
    border-bottom: none;
    margin-bottom: -3rem;
  }

  .mode{
    margin: -2rem 0 .5rem;
  }
}

@media (max-width: 480px) {
  .home_info .btn_sci {
    gap: 1rem;
  }

  .btn_sci .sci {
    margin-left: 0;
  }

  .navbar.section {
    padding: 0 .5rem;
  }

  section.section {
    padding: 4rem 1rem;
  }

  .live-githud a span{
    display: none;
  }
}

@media (max-width: 330px){
  .home_info .btn_sci{
    flex-direction: column;
  }
}