:root {
  --main-color: #09666e;
  --second-color: #e3c2a3;
  --black-color: #000000;
  --white-color: #ffffff;

  --placeholder-color: #a1a1a1;
  --padding: 20px;
  --radius: 24px;
}
@media (max-width: 768px) {
  .services-section {
    .services-nav-tabs {
      gap: 5px;
      margin-bottom: 30px;
      flex-wrap: nowrap;
      justify-content: flex-start !important;
      overflow-x: auto !important;
      scroll-behavior: smooth;
      &::-webkit-scrollbar {
        display: none;
      }
      scroll-snap-type: x mandatory;

      .nav-item {
        .nav-link {
          font-size: 14px;
          padding: 12px 15px;
          margin: 0 2px;
          text-wrap: nowrap;
        }
      }
    }
  }
  .service-details-content {
    background: #ffffff;
    border-radius: 10px;
    padding: 20px !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  }
  .blog-details-content {
    background: #ffffff;
    border-radius: 10px;
    padding: 20px !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  }

  .about-section {
    .about-hero-wrapper {
      height: 100% !important;
      margin-bottom: 30px;

      .about-hero-content {
        .about-title-hero {
          font-size: 28px;
        }

        .about-subtitle-hero {
          font-size: 16px;
        }

        .about-badge-hero {
          font-size: 11px;
          padding: 8px 20px;
        }
      }
    }

    .about-content {
      .about-title {
        font-size: 28px;
      }

      .about-subtitle {
        font-size: 16px;
      }

      .about-card {
        padding: 20px;

        .about-card-title {
          font-size: 18px;
        }

        .about-card-text {
          font-size: 15px;
        }

        .specialization-item {
          padding: 10px;
          margin-bottom: 8px;

          span {
            font-size: 14px;
          }
        }
      }
    }
  }
}

@media (max-width: 992px) {
  .services-section {
    .services-nav-tabs {
      gap: 8px;

      .nav-item {
        .nav-link {
          font-size: 15px;
          padding: 13px 20px;
        }
      }
    }
  }

  .about-section {
    .about-hero-wrapper {
      height: 450px;

      .about-hero-content {
        .about-title-hero {
          font-size: 36px;
        }

        .about-subtitle-hero {
          font-size: 17px;
        }
      }
    }

    .about-content {
      .about-title {
        font-size: 32px;
      }
    }
  }
}

@media (min-width: 992px) {
}

@media (min-width: 1200px) {
}