@media (max-width: 1280px) {
  /* hero */
  .main-page-logo {
    width: 200px;
  }
  .content h1 {
    font-size: 3rem;
  }
  
  /* about us */

  .about-content .title {
    font-size: 3rem;
  }
  .about-content .title::after {
    top: 1rem;
  }

  .about-content p {
    font-size: 1rem;
    margin-bottom: 1rem;
  }
  .about-img img {
    max-width: 300px;
  }

  /*why -us  */
  .form-sec .why-us {
    max-width: 1100px;
  }
  .form-sec .why-us .form {
    flex: 0 0 42%;
    max-width: 42%;
  }
  .form-sec .why-us .form form {
    width: 400px;
  }
  .form-sec .why-us .why-us-text {
    flex: 0 0 45%;
    width: 45%;
  }
  .form-sec .why-us .why-us-text h2 {
    font-size: 2.5rem;
  }
  .form-sec .why-us .why-us-text p {
    font-size: 15px;
  }

  /* service */

  .services {
    padding: 2rem;
  }
  .ser-cards {
    width: 900px;
    justify-content: space-evenly;
  }
  .ser-card {
    width: calc(220px * 0.76);
    height: calc(321px * 0.76);
  }
  .circle {
    width: calc(131px * 0.76);
    height: calc(131px * 0.76);
  }
  .circle:after {
    width: calc(118px * 0.76);
    height: calc(118px * 0.76);
  }
  .overlay {
    width: calc(118px * 0.76);
    height: calc(118px * 0.76);
    top: calc(70px * 0.76);
    left: calc(50px * 0.76);
  }

  /* pproduct */

  .card-iamge {
    width: 180px;
    height: 180px;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .card-iamge .card-img {
    width: 100%;
    height: 100%;
  }
}

/* 991px */

@media (max-width: 991px) {
  /* hero */
  .main-page-logo {
    width: 150px;
  }
  .content h1 {
    font-size: 2rem;
  }

  /* about-us */

  .about-content .title {
    font-size: 2rem;
  }
  .about-content .title::after {
    top: 0.5rem;
    width: 6rem;
  }

  .about-content p {
    font-size: 0.8rem;
    margin-bottom: 0.8rem;
  }
  .about-img img {
    max-width: 200px;
  }

  /*why -us  */
  .form-sec .why-us {
    max-width: 700px;
  }
  .form-sec .why-us .form {
    flex: 0 0 45%;
    max-width: 45%;
  }
  .form-sec .why-us .form form {
    width: 300px;
  }
  .form-sec .why-us .why-us-text {
    flex: 0 0 45%;
    width: 45%;
  }
  .form-sec .why-us .why-us-text h2 {
    font-size: 2rem;
  }
  .form-sec .why-us .why-us-text p {
    font-size: 13px;
  }

  .count .count-content .text-center {
    padding: 0 1rem;
  }

  /* service */

  .services {
    padding: 1rem;
  }
  .services .title {
    font-size: 20px;
  }
  .services .row .description h2,
  .services .row .description span {
    font-size: 2rem;
  }
  .ser-cards {
    width: 700px;
    justify-content: space-evenly;
  }
  .ser-card {
    width: calc(220px * 0.56);
    height: calc(321px * 0.56);
  }
  .circle {
    width: calc(131px * 0.56);
    height: calc(131px * 0.56);
  }
  .circle:after {
    width: calc(118px * 0.5);
    height: calc(118px * 0.5);
  }
  .overlay {
    width: calc(118px * 0.56);
    height: calc(118px * 0.56);
    top: calc(70px * 0.56);
    left: calc(50px * 0.56);
    z-index: -2;
  }
  .circle img {
    width: 40px;
  }

  /* product */

  .card-iamge {
    width: 180px;
    height: 180px;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .card-iamge .card-img {
    width: 100%;
    height: 100%;
  }
}

@media (max-width: 768px) {
  /* hero */
  .main-page-logo {
    width: 100px;
  }
  .content h1 {
    font-size: 1.5rem;
  }

  /* about-us */

  .abou-us {
    display: block;
  }
  .about-content {
    max-width: 100%;
  }
  .about-content .title {
    font-size: 1.5rem;
  }
  .about-content .title::after {
    top: 0.5rem;
    width: 6rem;
  }

  .about-content p {
    font-size: 1rem;
    margin-bottom: 0.8rem;
    width: 100%;
  }
  .about-img img {
    display: none;
  }

  /*why -us  */
  .form-sec .why-us {
    max-width: 400px;
    flex-direction: column;
    align-items: start;
  }
  .form-sec .why-us .form {
    flex: 0 0 100%;
    width: 100%;
    max-width: 100%;
  }
  .form-sec .why-us .form form {
    width: auto;
  }
  .form-sec .why-us .why-us-text {
    flex: 0 0 100%;
    width: 100%;
    max-width: 100%;
    margin: 0;
    margin-bottom: 1rem;
  }
  .form-sec .why-us .why-us-text h2 {
    font-size: 2rem;
  }
  .form-sec .why-us .why-us-text p {
    font-size: 13px;
  }

  .count .count-content .text-center {
    padding: 0 1rem;
  }
  .why-us-hr {
    display: block;
    margin: 20px 0;
  }

  /* service */

  .services {
    padding: 0.5rem;
  }
  .services .title {
    font-size: 16px;
  }
  .services .row .description h2,
  .services .row .description span {
    font-size: 1.5rem;
  }
  .ser-cards {
    width: 430px;
    flex-direction: column;
    align-items: center;
    margin-bottom: 1rem;
  }
  .ser-cards .body {
    margin-bottom: 1rem;
  }
  .ser-card {
    width: calc(220px * 1.2);
    height: calc(321px * 1.2);
  }
  .circle {
    width: calc(131px * 1.2);
    height: calc(131px * 1.2);
  }
  .circle:after {
    width: calc(118px * 1.2);
    height: calc(118px * 1.2);
  }
  .overlay {
    width: calc(118px * 1.2);
    height: calc(118px * 1.2);
    top: calc(70px * 1.2);
    left: calc(50px * 1.2);
    z-index: -2;
  }
  .circle img {
    width: 80px;
  }

  /* product */

  .card-iamge {
    width: 180px;
    height: 180px;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .card-iamge .card-img {
    width: 100%;
    height: 100%;
  }
}

@media (max-width: 480px) {
  /* hero */

  .hero-content {
    height: 65vh;
  }
  .main-page-logo {
    width: 80px;
  }
  .content h1 {
    font-size: 1rem;
  }
  .social-btn ul li a {
    width: 30px;
    height: 30px;
  }
  .social-btn ul li a svg {
    width: 20px;
    height: 20px;
  }
  .whatsapp {
    width: 40px;
    height: 40px;
  }
  .scroll-to-top svg {
    width: 40px;
    height: 40px;
  }
  .scroll-to-top {
    width: 40px;
    height: 40px;
  }
  /* about-us */

  .abou-us {
    display: block;
    padding: 2rem;
  }
  .about-content {
    max-width: 100%;
  }
  .about-content .title {
    font-size: 1rem;
  }
  .about-content .title::after {
    top: 0.1rem;
    width: 6rem;
    height: 4px;
  }

  .about-content p {
    font-size: 0.7rem;
    margin-bottom: 0.8rem;
    width: 100%;
  }
  .about-img img {
    display: none;
  }

  .about-content .btn {
    width: 5rem;
  }
  .about-content .btn {
    width: 5rem;
  }
  .about-content .btn a {
    font-size: 14px;
  }

  /*why -us  */
  .form-sec .why-us {
    max-width: 280px;
    flex-direction: column;
    align-items: start;
    padding: 2rem 0;
  }
  .form-sec .why-us .form {
    flex: 0 0 100%;
    width: 100%;
    max-width: 100%;
  }
  .form-sec .why-us .form form {
    width: auto;
  }
  .form-sec .why-us .why-us-text {
    flex: 0 0 100%;
    width: 100%;
    max-width: 100%;
    margin: 0;
    margin-bottom: 1rem;
  }
  .form-sec .why-us .why-us-text h2 {
    font-size: 2rem;
  }
  .form-sec .why-us .why-us-text p {
    font-size: 13px;
  }

  .count .count-content .text-center {
    padding: 0 1rem;
  }
  .why-us-hr {
    display: block;
    margin: 20px 0;
  }

  /* service */

  .services {
    padding: 0.5rem;
  }
  .services .title {
    font-size: 16px;
  }
  .services .row .description h2,
  .services .row .description span {
    font-size: 1rem;
  }
  .ser-cards {
    width: 250px;
    flex-direction: column;
    align-items: center;
    margin-bottom: 1rem;
  }
  .ser-cards .body {
    margin-bottom: 1rem;
  }
  .ser-card {
    width: calc(220px * 1.2);
    height: calc(321px * 1.2);
  }
  .circle {
    width: calc(131px * 1.2);
    height: calc(131px * 1.2);
  }
  .circle:after {
    width: calc(118px * 1.2);
    height: calc(118px * 1.2);
  }
  .overlay {
    width: calc(118px * 1.2);
    height: calc(118px * 1.2);
    top: calc(70px * 1.2);
    left: calc(50px * 1.2);
    z-index: -2;
  }
  .circle img {
    width: 80px;
  }

  /* product */

  .products {
    padding: 10px;
  }
  .card-iamge {
    width: 100px;
    height: 100px;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .prod-title h1 {
    font-size: 2rem;
  }
  .card-iamge .card-img {
    width: 100%;
    height: 100%;
  }
  .swiper-navBtn::before,
  .swiper-navBtn::after {
    font-size: 20px;
  }
  .card-name {
    font-size: 10px;
  }
}