.hero-slide {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.9), rgba(5, 150, 105, 0.9)), url('images/hero-bg.webp');
    background-size: cover;
    background-position: center;
  }
        #mobile-menu {
            transition: transform 0.3s ease-in-out;
            transform: translateX(100%);
        }

        #mobile-menu.open {
            transform: translateX(0);
        }
        
        

      @keyframes fade1 {
  0%, 45%, 100% { opacity: 1; z-index: 10; }
  50%, 95%      { opacity: 0; z-index: 0; }
}
@keyframes fade2 {
  0%, 45%       { opacity: 0; z-index: 0; }
  50%, 95%      { opacity: 1; z-index: 10; }
  100%          { opacity: 0; z-index: 0; }
}

.slide-1 {
  animation: fade1 10s infinite;
  transition: opacity 1s ease-in-out;
}
.slide-2 {
  animation: fade2 10s infinite;
  transition: opacity 1s ease-in-out;
}

    

.doctor-card {
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }
        .doctor-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
        }
        .read-more-btn {
            transition: all 0.3s ease;
        }
        .read-more-btn:hover {
            background-color: #dc2626;
            transform: translateX(5px);
        }
        .carousel-container {
            overflow: hidden;
            position: relative;
        }
        .carousel-track {
            display: flex;
            transition: transform 0.8s ease-in-out;
        }
        .doctor-card-wrapper {
            flex: 0 0 calc(100% / 3); /* Show 3 cards at a time */
            min-width: calc(100% / 3);
            box-sizing: border-box;
            padding: 0 1rem; /* Adjust padding as needed */
        }
        @media (max-width: 1023px) {
            .doctor-card-wrapper {
                flex: 0 0 calc(100% / 2); /* Show 2 cards at a time */
                min-width: calc(100% / 2);
            }
        }
        @media (max-width: 767px) {
            .doctor-card-wrapper {
                flex: 0 0 100%; /* Show 1 card at a time */
                min-width: 100%;
            }
        }
        .pagination-dot {
            transition: all 0.3s ease;
            cursor: pointer;
        }
        .pagination-dot.active {
            background-color: #374151;
        }
        .pagination-dot:not(.active) {
            background-color: #d1d5db;
        }
        .pagination-dot:hover {
            background-color: #6b7280;
        }
        
        
        .story-card {
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }
        .story-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
        }
        .read-more-btn {
            transition: all 0.3s ease;
        }
        .read-more-btn:hover {
            background-color: #dc2626;
            transform: translateX(5px);
        }
        .story-card-wrapper {
            flex: 0 0 calc(100% / 3); /* Show 3 cards at a time */
            min-width: calc(100% / 3);
            box-sizing: border-box;
            padding: 0 1rem; /* Adjust padding as needed */
        }
        
         .au-fade-in-up {
            animation: au-fadeInUp 0.8s ease-out forwards;
        }

        .au-slide-in-left {
            animation: au-slideInLeft 0.8s ease-out forwards;
        }

        .au-slide-in-right {
            animation: au-slideInRight 0.8s ease-out forwards;
        }

        .au-gradient-bg {
            background: linear-gradient(135deg, #10b981 0%, #059669 50%, #047857 100%);
        }

        .au-section-title {
            background: linear-gradient(135deg, #047857 0%, #10b981 50%, #34d399 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }

        .au-stats-card {
            transition: all 0.3s ease;
            background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
        }

        .au-stats-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
        }

        .au-timeline-item {
            position: relative;
            padding-left: 2rem;
        }

        .au-timeline-item::before {
            content: \'\';
            position: absolute;
            left: 0;
            top: 0.5rem;
            width: 12px;
            height: 12px;
            background: #10b981;
            border-radius: 50%;
            border: 3px solid white;
            box-shadow: 0 0 0 3px #10b981;
        }

        .au-timeline-item::after {
            content: \'\';
            position: absolute;
            left: 5px;
            top: 1.5rem;
            width: 2px;
            height: calc(100% - 1rem);
            background: linear-gradient(to bottom, #10b981, #d1fae5);
        }

        .au-timeline-item:last-child::after {
            display: none;
        }

        .au-image-overlay {
            background: linear-gradient(45deg, rgba(16, 185, 129, 0.8), rgba(5, 150, 105, 0.8));
        }

        .au-leaf-pattern {
            background-image: url(\"data:image/svg+xml,%3Csvg width=\'60\' height=\'60\' viewBox=\'0 0 60 60\' xmlns=\'http://www.w3.org/2000/svg\'%3E%3Cg fill=\'none\' fill-rule=\'evenodd\'%3E%3Cg fill=\'%2310b981\' fill-opacity=\'0.03\'%3E%3Cpath d=\'M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z\'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E\");
        }
               .timeline-item {
            position: relative;
            padding-left: 2rem;
        }

        .timeline-item::before {
            content: '';
            position: absolute;
            left: 0;
            top: 0.5rem;
            width: 12px;
            height: 12px;
            background: #10b981;
            border-radius: 50%;
            border: 3px solid white;
            box-shadow: 0 0 0 3px #10b981;
        }

        .timeline-item::after {
            content: '';
            position: absolute;
            left: 5px;
            top: 1.5rem;
            width: 2px;
            height: calc(100% - 1rem);
            background: linear-gradient(to bottom, #10b981, #d1fae5);
        }

        .timeline-item:last-child::after {
            display: none;
        }
        
/* Disease Detail Page Styling (works with Tailwind CDN) */
.disease-article h1 {
  font-size: 2rem;
  line-height: 1.25;
  margin: 1.5rem 0 1rem;
  font-weight: 700;
  color: #111827; /* gray-900 */
}

.disease-article h2 {
  font-size: 1.5rem;
  line-height: 1.35;
  margin: 1.25rem 0 0.75rem;
  font-weight: 700;
}

.disease-article h3 {
  font-size: 1.25rem;
  line-height: 1.4;
  margin: 1rem 0 0.5rem;
  font-weight: 600;
}

.disease-article p {
  margin: 1rem 0;
  line-height: 1.75;
}

.disease-article ul {
  list-style: disc;
  padding-left: 1.5rem;
  margin: 1rem 0;
}

.disease-article ol {
  list-style: decimal;
  padding-left: 1.5rem;
  margin: 1rem 0;
}

.disease-article li {
  margin: 0.35rem 0;
}

.disease-article a {
  color: #059669; /* emerald-600 */
  text-decoration: underline;
}

.disease-article blockquote {
  border-left: 4px solid #d1d5db; /* gray-300 */
  padding-left: 1rem;
  color: #4b5563; /* gray-600 */
  font-style: italic;
  margin: 1.5rem 0;
}

.disease-article img {
  max-width: 100%;
  height: auto;
  border-radius: 0.5rem;
  margin: 1rem 0;
}

.disease-article table {
  width: 100%;
  border-collapse: collapse;
  margin: 1rem 0;
}

.disease-article th,
.disease-article td {
  border: 1px solid #e5e7eb; /* gray-200 */
  padding: 0.5rem 0.75rem;
  text-align: left;
}