[x-cloak] {
        display: none !important;
    }
    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }

    body {
        font-family: 'Poppins', sans-serif;
        background-color: #f8f8f8;
        overflow-x: hidden;
    }

    @layer parallax {
        @keyframes parallax {
          from { transform: translate(0%, -50%); }
          to { transform: translate(0%, 50%); }
        }
        @supports not (animation-timeline: scroll()) {
          img {
            transform: translate(0%, 0%) !important;
          }
        }
      }


    .circle-bg {
        width: 400px;
        height: 400px;
        border-radius: 50%;
        background-color: rgba(143, 62, 151, 1);
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        z-index: 0;
    }

    .circle-inner {
        width: 250px;
        height: 250px;
        border-radius: 50%;
        background-color: white;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        z-index: 1;
    }

    .doctor-img {
        position: relative;
        z-index: 2;
        margin: 0 auto;
        left: 150px;
        top: 200px;
        

    }

    .card-left,
    .card-right {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        z-index: 3;
    }

    .card-left {
        top: 40%;
        left: 100px;



    }

    .card-right {
        top: 12%;
        right: 20%;
        background-color: white;

        border-radius: 16px;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
        text-align: center;
        font-size: 12px;
        width: 150px;
    }
    .donut-wrapper {
          position: relative;
          width: 80px;
          height: 80px;
          margin: 0 auto;
        }

        .donut-chart {
          width: 80px;
          height: 80px;
          border-radius: 50%;
          background: conic-gradient(
            #a855f7 0% 40%,   /* Purple */
            #ec4899 40% 70%,  /* Pink */
            #22d3ee 70% 100%  /* Cyan */
          );
          position: relative;
        }

        .donut-chart::after {
          content: '';
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
          width: 40px;
          height: 40px;
          background: white;
          border-radius: 50%;
        }

        .segment {
          position: absolute;
          top: 0;
          left: 0;
          width: 80px;
          height: 80px;
          background: transparent;
          pointer-events: auto;
          z-index: 1;
          cursor: pointer;
        }

        .clip-purple {
  clip-path: polygon(50% 50%, 100% 0, 100% 100%);
}

.clip-pink {
  clip-path: polygon(50% 50%, 100% 100%, 0 100%);
}

.clip-cyan {
  clip-path: polygon(50% 50%, 0 100%, 0 0, 50% 0);
}


        .tooltip-box {
          position: absolute;
          background-color: #1f2937;
          color: white;
          font-size: 12px;
          padding: 4px 8px;
          border-radius: 4px;
          white-space: nowrap;
          pointer-events: none;
          opacity: 0;
          transition: opacity 0.2s ease-in-out;
          z-index: 100;
        }

    @layer utilities {
        .fade-slide-up {
            @apply transition-all duration-500 ease-in-out transform opacity-0 translate-y-4;
        }

        .fade-slide-up-show {
            @apply opacity-100 translate-y-0;
        }
    }

    @keyframes slide {
        0% {
            transform: translateX(0);
        }

        100% {
            transform: translateX(-50%);
        }
    }

    .animate-slide {
        animation: slide 20s linear infinite;
    }

 
  @keyframes slides {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}

.animate-slider {
  animation: slides 40s linear infinite;
}


    /* health care service animation */

    @keyframes fade {
        0% { opacity: 0; }
        8% { opacity: 1; }
        30% { opacity: 1; }
        38% { opacity: 0; }
        100% { opacity: 0; }
      }

      .bg-slide {
        position: absolute;
        inset: 0;
        opacity: 0;
        animation: fade 9s infinite;
        transition: opacity 1s ease-in-out;
      }

      .bg-slide:nth-child(1) { animation-delay: 0s; }
      .bg-slide:nth-child(2) { animation-delay: 3s; }
      .bg-slide:nth-child(3) { animation-delay: 6s; }


      /* faq */
          .zoom-up {
            animation: zoomUp 1.5s ease-out forwards;
        }

        @keyframes zoomUp {
            0% {
                opacity: 0;
                transform: scale(0.2) translateY(80px);
            }

            100% {
                opacity: 1;
                transform: scale(1) translateY(0);
            }
        }



 @media (min-width: 768px) {
          [data-aos] {
            transform: none !important;
            opacity: 1 !important;
          }
        }

@keyframes zoomUp12 {
                    0% {
                        transform: scale(0.2);
                        opacity: 0;
                    }

                    100% {
                        transform: scale(1);
                        opacity: 1;
                    }
                }

                .zoom-up-12 {
                    animation: zoomUp12 1s ease-out forwards;
                }

                .opacity-0 {
                    opacity: 0;
                }