/* =============================== */
/*      Responsive Media Queries   */
/* =============================== */

@media (max-width: 1280px) {
  .service {
    height: fit-content;
    padding: 50px 0;
  }

  .service .top {
    margin-bottom: 20px;
  }

  .service .top p {
    width: 90%;
  }

  .service .cards {
    width: 100%;
    height: fit-content;
    gap: 30px;
    padding: 20px 0;
  }

  .service .cards .card {
    padding: 20px 25px;
  }
}

@media (max-width: 1170px) {
  .home-content h2 {
    font-size: 12vw;
  }

  .home-content p {
    width: 95%;
    font-size: 3vw;
  }

  .detail .slider {
    width: 100%;
  }

  .service {
    height: fit-content;
    padding: 50px 0;
  }

  .service .top {
    margin-bottom: 20px;
  }

  .service .top p {
    width: 90%;
  }

  .service .cards {
    width: 100%;
    height: fit-content;
    gap: 30px;
    padding: 20px 0;
  }

  .service .cards .card {
    padding: 20px 25px;
  }

  .detail .slider .card {
    margin: 0 8.3px;
  }

  .client-testimonial .cards {
    width: 78%;
  }
}

/* Mobile Devices (max-width: 576px) */
@media screen and (max-width: 576px) {
  .about {
    flex-direction: column;
    height: auto;
    padding: 50px 20px;
    gap: 30px;
  }

  .about .content,
  .about .image {
    width: 100%;
    height: auto;
    text-align: center;
  }

  .about .image {
    order: -1;
    width: 280px;
    height: 400px;
    margin-bottom: 30px;
  }

  .about .image::before {
    top: -20px;
    right: -25px;
    width: 330px;
    height: 460px;
    animation: ab-img 5s linear infinite;
  }

  @keyframes ab-img {
    0% {
      border-radius: 26% 74% 20% 80% / 70% 7% 93% 30%;
    }
    10% {
      border-radius: 28% 72% 22% 78% / 68% 9% 91% 32%;
    }
    20% {
      border-radius: 30% 70% 24% 76% / 66% 11% 89% 34%;
    }
    30% {
      border-radius: 32% 68% 26% 74% / 64% 13% 87% 36%;
    }
    40% {
      border-radius: 34% 66% 28% 72% / 62% 15% 85% 38%;
    }
    50% {
      border-radius: 36% 64% 30% 70% / 60% 17% 83% 40%;
    }
    60% {
      border-radius: 34% 66% 28% 72% / 62% 15% 85% 38%;
    }
    70% {
      border-radius: 32% 68% 26% 74% / 64% 13% 87% 36%;
    }
    80% {
      border-radius: 30% 70% 24% 76% / 66% 11% 89% 34%;
    }
    90% {
      border-radius: 28% 72% 22% 78% / 68% 9% 91% 32%;
    }
    100% {
      border-radius: 26% 74% 20% 80% / 70% 7% 93% 30%;
    }
  }

  .about .image img {
    border-radius: 26% 74% 20% 80% / 70% 7% 93% 30%;
    transform: translate(0, 5px);
  }

  .about .content h2 {
    font-size: 2.2rem;
  }

  .about .content h3 {
    font-size: 1.6rem;
  }

  .service {
    height: fit-content;
    padding: 50px 0;
  }

  .service .top {
    margin-bottom: 20px;
  }

  .service .top p {
    width: 90%;
  }

  .service .cards {
    width: 100%;
    height: fit-content;
    gap: 30px;
    padding: 20px 0;
  }

  .service .cards .card {
    padding: 20px 25px;
  }

  .detail .slider {
    align-items: center;
    padding: 20px 0;
    width: 90%;
  }

  .detail .slider .card {
    width: 90%;
    margin-right: 20px;
  }

  .detail .top h2 {
    width: 90%;
  }

  .detail .btns {
    width: 100%;
    justify-content: space-around;
  }

  .benifit .cards {
    flex-direction: column;
    align-items: center;
  }

  .benifit .cards .card {
    width: 90%;
    height: 220px;
  }
}

/* Tablets (min-width: 577px and max-width: 768px) */
@media screen and (min-width: 577px) and (max-width: 768px) {
  .about {
    flex-direction: column;
    height: auto;
    padding: 30px;
  }

  .about .content,
  .about .image {
    width: 90%;
    text-align: center;
  }

  .service .cards {
    flex-wrap: wrap;
    justify-content: center;
    height: auto;
  }

  .service .cards .card {
    width: 45%;
    margin: 15px 10px;
  }

  .detail .slider {
    flex-wrap: wrap;
    justify-content: center;
    height: auto;
  }

  .detail .slider .card {
    width: 45%;
    margin: 15px 10px;
  }

  .benifit .cards .card {
    width: 45%;
  }
}

@media (max-width: 480px) {
  .client-testimonial .cards {
    width: 99%;
    gap: 20px;
    padding: 10px 15px;
  }

  .client-testimonial .cards .card {
    border-radius: 20px;
    min-width: 330px;
    margin: 0;
  }

  .client-testimonial .btns {
    width: 100%;
    margin: 20px 0;
  }
}