@media (max-width: 575.98px) {
  h1 {
    font-size: 3.8rem;
  }

  h2 {
    font-size: 4.2rem;
  }

  #service_section .swiper-slide {
    height: 55rem;
  }

  #home_section .img {
    display: block;
  }
}

@media (min-width: 576px) and (max-width: 767.98px) {
  #contact .side-content {
    justify-content: center;
    align-items: center;
  }
}

@media (min-width: 768px) and (max-width: 991.98px) {
  #service_section .swiper-slide {
    height: 60rem;
  }

  form {
    padding: 5rem 2rem;
  }

  #contact .input-line {
    gap: 2rem;
  }
}

@media (min-width: 992px) and (max-width: 1199.98px) {
  #service_section .swiper-slide {
    height: 65rem;
  }
}

@media (min-width: 1200px) and (max-width: 1549.98px) {
  #home_section {
    margin-top: 0rem;
  }

  #home_section .container {
    flex-direction: column-reverse;
    gap: 2rem;
  }

  #home_section .img {
    text-align: center;
  }

  #about_section .text {
    flex-shrink: 1;
  }

  #about_section .card img {
    padding: 1rem 2rem;
  }

  #service_section .swiper-slide {
    height: 60rem;
  }

  .container {
    width: 95%;
  }
}

@media (max-width: 767.98px) {
  #differences .text {
    width: 100%;
  }

  #boost .text {
    width: 100%;
  }

  #boost .button-group {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    width: 60%;
  }

  #boost .button {
    width: 100%;
  }

  #contact {
    padding: 8rem 0;
  }

  input {
    width: 100%;
  }

  #contact .container {
    gap: 6rem;
  }

  #contact .contact {
    flex-direction: column;
    width: 100%;
  }

  #contact .text {
    width: 100%;
  }

  .input-line {
    flex-direction: column;
    gap: 2rem;
  }

  footer {
    padding: 6rem 0;
  }

  footer .topic {
    display: none;
  }

  footer .container {
    align-items: center;
    justify-content: center;
  }

  footer .title {
    text-align: center;
    width: 80%;
  }

  footer p {
    width: 100%;
    text-align: center;
  }
}

@media (max-width: 991.98px) {
  #service_section .text {
    width: 100%;
  }
}

/* max-width */
@media (max-width: 1199.98px) {
  /*scrollreveal bugado  */
  header nav,
  header ul {
    opacity: 1 !important;
    transform: none !important;
  }

  header nav {
    background-color: var(--neutral-beige);
    background-color: var(--neutral-beige);
    position: absolute;
    display: flex;
    align-items: center;
    top: 0;
    left: -100%;
    height: 100vh;
    width: 80%;
    box-shadow: -8px 0px 15px 3px var(--neutral-background);
    transition: left 1s;
    z-index: 99;
  }

  header nav.show {
    left: 0;
  }

  header ul {
    flex-direction: column;
    gap: 10rem;
  }

  header ul a {
    font-size: 2.5rem;
  }

  header .call_to_action {
    display: none;
  }

  header .toggle {
    z-index: 100;
    display: block;
    position: relative;
  }

  header .toggle .bi {
    font-size: 5rem;
    transition: opacity 1s;
    cursor: pointer;
  }

  header .toggle .bi-list {
    position: relative;
    z-index: 1;
  }

  header .toggle .bi-x {
    position: absolute;
    top: 0;
    left: 0;
  }

  header nav ~ .toggle i.bi-list,
  header nav.show ~ .toggle i.bi-x {
    opacity: 1;
  }

  header nav ~ .toggle i.bi-x,
  header nav.show ~ .toggle i.bi-list {
    opacity: 0;
  }

  #home_section {
    padding-top: 10rem;
  }

  #home_section .container {
    display: flex;
    gap: 5rem;
    flex-direction: column-reverse;
  }

  #home_section .img {
    display: block;
  }

  #home_section .img img {
    width: 100%;
  }

  #home_section .button-group {
    flex-direction: column;
    gap: 1rem;
  }

  #home_section .button-group .button {
    width: 100%;
    padding: 1.5rem;
  }

  #about_section .container {
    flex-direction: column;
    gap: 3rem;
  }

  #about_section .title,
  #about_section .desc p {
    text-align: center;
  }

  #about_section .topics {
    margin-top: 3rem;
  }

  .container {
    width: 95%;
  }
}

@media (max-width: 1549.48px) {
  body {
    background-size: cover;
  }

  #home_section .up_title {
    margin: 0 auto;
    margin-bottom: 2rem;
  }

  #home_section .text,
  #home_section p {
    text-align: center;
  }
}