:root {
  --main-color: #46c7ec;
  --second-color: #46c7ec;
  --black-color: #000000;
  --white-color: #ffffff;
  --third-color: #7ec141;
  --background-text: linear-gradient(
    135deg,
    var(--main-color) 0%,
    #4ea2b9 60%,
    var(--third-color) 100%
  );
  --background-text-hover: linear-gradient(
    -135deg,
    var(--main-color) 0%,
    #4ea2b9 60%,
    var(--third-color) 100%
  );
  --background-btn: linear-gradient(135deg, var(--second-color) 0%, #46c7ec 100%);
  --background-btn-hover: linear-gradient(-135deg, var(--second-color) 0%, #46c7ec 100%);
  --placeholder-color: #a1a1a1;
  --padding: 20px;
  --radius: 24px;
}

@media (max-width: 992px) {
  .about-content {
    h2 {
      font-size: 32px;
    }

    .lead-text {
      font-size: 16px;
    }
  }
  .contact-tabs-wrapper {
    display: none;
    scroll-snap-type: x proximity;
  }

  .contact-section {
    .clinics-map-tabs-block {
      border-radius: 20px;
    }

    #clinicContactTabsContent {
      border-radius: 20px;
    }

    .tab-pane {
      display: block !important;
      opacity: 1 !important;
      padding: 1.25rem 1rem 0;
      border-bottom: 1px solid rgba(0, 0, 0, 0.08);

      &:last-child {
        border-bottom: 0;
        padding-bottom: 1.25rem;
      }
    }

    .contact-location-title {
      display: block;
      color: var(--main-color);
      font-weight: 700;
      font-size: 1.05rem;
      line-height: 1.5;
      text-align: center;
      margin-bottom: 1.25rem;
      padding: 0.85rem 1rem;
      border-radius: 14px;
      background: linear-gradient(135deg, rgba(70, 200, 236, 0.12) 0%, rgba(62, 129, 147, 0.08) 100%);
    }

    .contact-clinic-cards {
      padding-top: 0;
      padding-bottom: 1.25rem;
    }

    .clinic-tab-map iframe {
      height: 280px;
    }
  }
}

@media (max-width: 768px) {

  .hero-pages {
    background: linear-gradient(180deg, #ffffff 0%, rgba(36, 197, 241, 0.1) 100%);
    z-index: 1 !important;
  height: 30vh !important;

  }
  .navbar {
    .container {
      border-radius: 0;
      box-shadow: none;
      transition: all 0.3s ease;
      z-index: 1000;
    }
  }
  
  .operations-section {
    .operation-card {
      padding: 25px;

      .btn-more {
        bottom: 25px;
        left: 25px;
        right: 25px;
        padding: 10px 15px;
        font-size: 14px;
      }
    }
  }
  .about-image {
    gap: 10px !important;

    .image-container {
      &.image-left,
      &.image-right {
        width: 100%;
        max-width: 180px;
        height: 400px !important;

        &:hover {
          width: 100% !important;
          height: 400px !important;
        }
      }
    }

    .decorative-element {
      display: none;
    }
  }

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

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

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

    .about-timeline {
      padding-right: 20px;

      &::before {
        right: 12px;
      }

      .timeline-item {
        .timeline-icon {
          width: 45px;
          height: 45px;
          font-size: 18px;
        }

        .timeline-content {
          padding-right: 15px;

          h5 {
            font-size: 16px;
          }

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

    .about-features {
      .feature-item {
        padding: 15px;
        margin-bottom: 15px;

        .feature-icon {
          width: 45px;
          height: 45px;
          font-size: 18px;
        }

        h5 {
          font-size: 16px;
        }

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

    .about-stats {
      .stat-item {
        padding: 15px;

        .stat-number {
          font-size: 28px;
        }

        .stat-label {
          font-size: 12px;
        }
      }
    }
  }

  .about-image-wrapper {
    margin-bottom: 30px;

    .about-decoration-1,
    .about-decoration-2 {
      display: none;
    }
  }

  .about-page-image-wrapper {
    .about-icon-1,
    .about-icon-2,
    .about-icon-3 {
      display: none;
    }
  }

  .info-card,
  .content-card {
    margin-bottom: 20px;
  }

  .features-section {
    .feature-card {
      margin-bottom: 25px;

      .feature-icon {
        width: 70px;
        height: 70px;
        font-size: 28px;
      }

      h4 {
        font-size: 20px;
      }

      p {
        font-size: 15px;
      }
    }
  }

  .schedule-section {
    .schedule-timeline {
      display: flex;
      flex-wrap: nowrap !important;
      overflow-x: auto;
      gap: 30px;
      overflow-y: visible;
      -webkit-overflow-scrolling: touch;
      scroll-snap-type: x mandatory;
      white-space: nowrap;
      &::-webkit-scrollbar {
        height: 6px;
      }

      &::-webkit-scrollbar-thumb {
        background: #ccc;
        border-radius: 10px;
      }
      &::before {
        top: 20px;
        height: 2px !important;
        width: 100vw !important;
        right: 0 !important;
      }

      .timeline-item {
        padding-right: 0 !important;
        margin-bottom: 0 !important;
        margin-top: 30px;
        .timeline-marker {
          top: -30px;
          width: 40px;
          height: 40px;
          font-size: 16px;
          border-width: 3px;
        }

        .timeline-content {
          width: 380px;

          .timeline-day {
            font-size: 20px;
            margin-bottom: 12px;
          }

          .timeline-locations {
            gap: 10px;

            .timeline-location {
              padding: 10px 12px;
              flex-direction: column;
              align-items: flex-start;
              gap: 8px;

              .location-name {
                font-size: 15px;
                text-wrap: wrap;
              }

              .location-time {
                font-size: 13px;
                padding: 4px 10px;
              }
            }
          }
        }
      }
    }

    .location-details-wrapper {
      position: relative !important;
      top: 0 !important;
      /* margin-top: 30px; */

      .location-details-content {
        min-height: 300px;

        .location-placeholder {
          min-height: 300px;
        }

        .location-detail {
          .location-iframe-wrapper {
            padding-bottom: 100%;
          }
        }
      }
    }

    .schedule-cta {
      padding: 25px 20px;

      h3 {
        font-size: 22px;
      }

      p {
        font-size: 16px;
      }
    }
  }

  .client-card {
    img {
      height: 100px !important;
    }
  }

  .about-images {
    width: 100% !important;

    height: 700px !important;
  }
  .img-main {
    position: absolute;
    top: 0;
    left: 0;
    width: 100% !important;
    height: 350px !important;
    transform: rotate(-3deg);
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.25);
    z-index: 1;
    overflow: hidden;
    border-radius: 22px;
    transition: transform 0.6s ease;
    /* display: none; */
    /* height: 100%; */
  }
  .img-overlay {
    overflow: hidden !important;
    width: 100% !important;
    height: 400px !important;
    bottom: -10px;

    right: 0px;
  }
  .contact-form-large {
    background: var(--white-color);
    border-radius: 20px;
    padding: 20px;
    box-shadow: 0 5px 30px rgba(0, 0, 0, 0.08);
    border: 1px solid rgba(137, 152, 177, 0.1);
    width: 100%;
    max-width: 100%;
  }
  .blog-details-section {
    .blog-details-card {
      padding: 25px;

      .blog-featured-image {
        img {
          height: 250px !important;
        }
      }

      .blog-title {
        font-size: 24px;
      }

      .blog-content {
        font-size: 15px;

        h3 {
          font-size: 20px;
        }

        .blog-quote {
          padding: 20px;

          .quote-content {
            .quote-text {
              font-size: 16px;
            }
          }
        }
      }

      .blog-meta-info {
        .blog-meta-item {
          font-size: 12px;
          margin-bottom: 10px;
        }
      }
    }

    .blog-sidebar-card {
      padding: 20px;
    }
  }

  .operation-details-section {
    .operation-details-card {
      padding: 25px;

      .operation-header {
        .operation-icon-large {
          width: 60px;
          height: 60px;
          font-size: 30px;
        }

        .operation-title {
          font-size: 24px;
        }
      }

      .operation-featured-image {
        img {
          height: 250px !important;
        }
      }

      .operation-content {
        font-size: 15px;

        h3 {
          font-size: 20px;
        }

        .operation-quote {
          padding: 20px;

          .quote-content {
            .quote-text {
              font-size: 16px;
            }
          }
        }

        .operation-benefits {
          padding: 20px;
        }
      }
    }

    .operation-sidebar-card {
      padding: 20px;
    }
  }
}

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

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