/* =============================================
   Health Diagnostic Lab - Main Stylesheet
   Colors: Orange #FF8C00, Green #1B7340
   ============================================= */

   @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800;900&display=swap');

   /* ========== Root Variables ========== */
   :root {
       --primary-orange: #FF8C00;
       --primary-green: #1B7340;
       --dark-green: #145230;
       --light-orange: #FFB347;
       --light-green: #2E8B57;
       --gray-50: #F9FAFB;
       --gray-100: #F3F4F6;
       --gray-200: #E5E7EB;
       --gray-300: #D1D5DB;
       --gray-400: #9CA3AF;
       --gray-500: #6B7280;
       --gray-600: #4B5563;
       --gray-700: #374151;
       --gray-800: #1F2937;
       --gray-900: #111827;
   }
   
   /* ========== Base Styles ========== */
   * {
       margin: 0;
       padding: 0;
       box-sizing: border-box;
       font-family: 'Poppins', sans-serif;
   }
   
   body {
       background-color: var(--gray-50);
       color: var(--gray-900);
       line-height: 1.6;
       overflow-x: hidden;
   }
   
   html {
       scroll-behavior: smooth;
   }
   
   /* ========== Typography ========== */
   h1, h2, h3, h4, h5, h6 {
       font-weight: 700;
       line-height: 1.2;
       margin-bottom: 1rem;
   }
   
   h1 { font-size: 3rem; }
   h2 { font-size: 2.5rem; }
   h3 { font-size: 2rem; }
   h4 { font-size: 1.5rem; }
   h5 { font-size: 1.25rem; }
   h6 { font-size: 1rem; }
   
   p {
       margin-bottom: 1rem;
       line-height: 1.8;
   }
   
   a {
       text-decoration: none;
       color: inherit;
       transition: all 0.3s ease;
   }
   
   /* ========== Gradient Backgrounds ========== */
   .gradient-primary {
       background: linear-gradient(135deg, var(--primary-orange) 0%, var(--primary-green) 100%);
   }
   
   .gradient-orange {
       background: linear-gradient(135deg, var(--primary-orange) 0%, var(--light-orange) 100%);
   }
   
   .gradient-green {
       background: linear-gradient(135deg, var(--primary-green) 0%, var(--light-green) 100%);
   }
   
   .gradient-text {
       background: linear-gradient(135deg, var(--primary-orange) 0%, var(--primary-green) 100%);
       -webkit-background-clip: text;
       -webkit-text-fill-color: transparent;
       background-clip: text;
   }
   
   /* ========== Buttons ========== */
   .btn {
       display: inline-block;
       padding: 0.75rem 2rem;
       border-radius: 50px;
       font-weight: 600;
       text-align: center;
       cursor: pointer;
       transition: all 0.3s ease;
       border: none;
       outline: none;
   }
   
   .btn-primary {
       background: linear-gradient(135deg, var(--primary-orange) 0%, var(--primary-green) 100%);
       color: white;
   }
   
   .btn-primary:hover {
       transform: translateY(-2px);
       box-shadow: 0 10px 30px rgba(255, 140, 0, 0.3);
   }
   
   .btn-outline {
       background: transparent;
       border: 2px solid white;
       color: white;
   }
   
   .btn-outline:hover {
       background: white;
       color: var(--primary-green);
   }
   
   /* ========== Cards ========== */
   .card {
       background: white;
       border-radius: 20px;
       padding: 2rem;
       box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
       transition: all 0.4s ease;
   }
   
   .card:hover {
       transform: translateY(-10px);
       box-shadow: 0 20px 40px rgba(0, 0, 0, 0.12);
   }
   
   .card-3d {
       transform-style: preserve-3d;
       transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
   }
   
   .card-3d:hover {
       transform: translateY(-15px) scale(1.02);
       box-shadow: 0 30px 60px rgba(0, 0, 0, 0.15);
   }
   
   /* ========== Top Bar ========== */
   .top-announcement {
       background: linear-gradient(90deg, #FFD700 0%, #FF8C00 50%, #DC143C 100%);
       color: white;
       padding: 0.5rem 0;
       text-align: center;
       font-size: 0.875rem;
       font-weight: 600;
   }
   
   .top-contact-bar {
       background: white;
       border-bottom: 1px solid var(--gray-200);
       padding: 0.75rem 0;
   }
   
   .top-contact-bar .contact-item {
       display: flex;
       align-items: center;
       color: var(--gray-700);
       transition: color 0.3s ease;
   }
   
   .top-contact-bar .contact-item:hover {
       color: var(--primary-orange);
   }
   
   .top-contact-bar .icon-box {
       width: 2rem;
       height: 2rem;
       background: var(--gray-100);
       border-radius: 50%;
       display: flex;
       align-items: center;
       justify-content: center;
       margin-right: 0.5rem;
   }
   
   .top-contact-bar .icon-box.orange {
       background: rgba(255, 140, 0, 0.1);
       color: var(--primary-orange);
   }
   
   .top-contact-bar .icon-box.green {
       background: rgba(27, 115, 64, 0.1);
       color: var(--primary-green);
   }
   
   /* ========== Navigation ========== */
   .main-nav {
       background: white;
       position: sticky;
       top: 0;
       z-index: 1000;
       transition: all 0.3s ease;
   }
   
   .main-nav.scrolled {
       box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
   }
   
   .logo-container {
       display: flex;
       align-items: center;
       gap: 1rem;
   }
   
   .logo-box {
       width: 3.5rem;
       height: 3.5rem;
       background: linear-gradient(135deg, var(--primary-orange) 0%, var(--primary-green) 100%);
       border-radius: 1rem;
       display: flex;
       align-items: center;
       justify-content: center;
       position: relative;
   }
   
   .logo-box i {
       color: white;
       font-size: 1.75rem;
   }
   
   .pulse-ring {
       position: absolute;
       top: -2px;
       right: -2px;
       width: 1rem;
       height: 1rem;
       background: #ef4444;
       border-radius: 50%;
       animation: pulseRing 2s cubic-bezier(0.455, 0.03, 0.515, 0.955) infinite;
   }
   
   .nav-menu {
       display: flex;
       align-items: center;
       gap: 0.5rem;
   }
   
   .nav-link {
       padding: 0.5rem 1rem;
       color: var(--gray-700);
       font-weight: 500;
       border-radius: 0.5rem;
       transition: all 0.3s ease;
       position: relative;
   }
   
   .nav-link:hover {
       color: var(--primary-orange);
       background: rgba(255, 140, 0, 0.05);
   }
   
   .nav-link::after {
       content: '';
       position: absolute;
       bottom: 0;
       left: 0;
       width: 0;
       height: 2px;
       background: var(--primary-orange);
       transition: width 0.3s ease;
   }
   
   .nav-link:hover::after {
       width: 100%;
   }
   
   /* Dropdown Menu */
   .dropdown {
       position: relative;
   }
   
   .dropdown-menu {
       position: absolute;
       top: 100%;
       left: 0;
       background: white;
       min-width: 16rem;
       border-radius: 1rem;
       box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
       opacity: 0;
       visibility: hidden;
       transform: translateY(10px);
       transition: all 0.3s ease;
       margin-top: 0.5rem;
       overflow: hidden;
   }
   
   .dropdown:hover .dropdown-menu {
       opacity: 1;
       visibility: visible;
       transform: translateY(0);
   }
   
   .dropdown-item {
       display: block;
       padding: 0.75rem 1.5rem;
       color: var(--gray-700);
       border-bottom: 1px solid var(--gray-100);
       transition: all 0.3s ease;
   }
   
   .dropdown-item:hover {
       background: rgba(255, 140, 0, 0.05);
       color: var(--primary-orange);
       padding-left: 2rem;
   }
   
   .dropdown-item i {
       margin-right: 0.75rem;
       width: 1.25rem;
   }
   
   /* ========== Hero Section ========== */
   .hero-section {
       background: linear-gradient(135deg, var(--primary-orange) 0%, var(--primary-green) 100%);
       color: white;
       padding: 5rem 0 8rem;
       position: relative;
       overflow: hidden;
   }
   
   .hero-section::before {
       content: '';
       position: absolute;
       width: 200%;
       height: 200%;
       background: radial-gradient(circle, rgba(255,255,255,0.1) 1px, transparent 1px);
       background-size: 50px 50px;
       animation: moveBackground 20s linear infinite;
   }
   
   .hero-badge {
       display: inline-flex;
       align-items: center;
       background: rgba(255, 255, 255, 0.2);
       backdrop-filter: blur(10px);
       padding: 0.5rem 1rem;
       border-radius: 50px;
       margin-bottom: 1.5rem;
       font-size: 0.875rem;
       font-weight: 600;
   }
   
   .hero-badge .dot {
       width: 0.5rem;
       height: 0.5rem;
       background: #4ade80;
       border-radius: 50%;
       margin-right: 0.5rem;
       animation: pulse 2s infinite;
   }
   
   .hero-title {
       font-size: 4rem;
       font-weight: 900;
       line-height: 1.1;
       margin-bottom: 1.5rem;
   }
   
   .hero-title .highlight {
       color: #FFD700;
   }
   
   .hero-description {
       font-size: 1.25rem;
       opacity: 0.95;
       margin-bottom: 2rem;
       line-height: 1.8;
   }
   
   .hero-stats {
       display: flex;
       align-items: center;
       gap: 2rem;
       margin-top: 3rem;
   }
   
   .hero-stat {
       text-align: center;
   }
   
   .hero-stat-number {
       font-size: 2.5rem;
       font-weight: 900;
   }
   
   .hero-stat-label {
       opacity: 0.8;
       font-size: 0.875rem;
   }
   
   .stat-divider {
       width: 1px;
       height: 3rem;
       background: rgba(255, 255, 255, 0.3);
   }
   
   /* ========== Test Cards ========== */
   .test-card {
       background: white;
       border-radius: 1rem;
       padding: 1.5rem;
       border: 2px solid var(--gray-200);
       transition: all 0.4s ease;
       position: relative;
       overflow: hidden;
   }
   
   .test-card::before {
       content: '';
       position: absolute;
       top: 0;
       left: -100%;
       width: 100%;
       height: 100%;
       background: linear-gradient(90deg, transparent, rgba(255, 140, 0, 0.1), transparent);
       transition: left 0.5s ease;
   }
   
   .test-card:hover::before {
       left: 100%;
   }
   
   .test-card:hover {
       border-color: var(--primary-orange);
       transform: translateY(-5px);
       box-shadow: 0 15px 35px rgba(255, 140, 0, 0.2);
   }
   
   .test-icon {
       width: 3rem;
       height: 3rem;
       border-radius: 0.75rem;
       display: flex;
       align-items: center;
       justify-content: center;
       font-size: 1.25rem;
   }
   
   .test-icon.red { background: #FEE2E2; color: #DC2626; }
   .test-icon.blue { background: #DBEAFE; color: #2563EB; }
   .test-icon.purple { background: #EDE9FE; color: #7C3AED; }
   .test-icon.green { background: #D1FAE5; color: var(--primary-green); }
   .test-icon.orange { background: #FFEDD5; color: var(--primary-orange); }
   
   .test-rating {
       display: flex;
       align-items: center;
       gap: 0.25rem;
       color: #FBBF24;
       font-size: 0.875rem;
   }
   
   .test-rating .reviews {
       color: var(--gray-600);
       margin-left: 0.5rem;
   }
   
   .test-price {
       font-size: 1.75rem;
       font-weight: 800;
       background: linear-gradient(135deg, var(--primary-orange) 0%, var(--primary-green) 100%);
       -webkit-background-clip: text;
       -webkit-text-fill-color: transparent;
   }
   
   .test-price-old {
       font-size: 0.875rem;
       color: var(--gray-500);
       text-decoration: line-through;
   }
   
   /* ========== Package Cards ========== */
   .package-card {
       background: white;
       border-radius: 1.5rem;
       overflow: hidden;
       transition: all 0.4s ease;
       border: 2px solid transparent;
   }
   
   .package-card:hover {
       border-color: var(--primary-orange);
       transform: translateY(-10px) scale(1.02);
       box-shadow: 0 25px 50px rgba(255, 140, 0, 0.2);
   }
   
   .package-header {
       padding: 2rem;
       color: white;
   }
   
   .package-header.basic {
       background: linear-gradient(135deg, #3B82F6 0%, #2563EB 100%);
   }
   
   .package-header.premium {
       background: linear-gradient(135deg, var(--primary-orange) 0%, var(--primary-green) 100%);
   }
   
   .package-header.executive {
       background: linear-gradient(135deg, #F59E0B 0%, #D97706 100%);
   }
   
   .package-label {
       font-size: 0.875rem;
       font-weight: 600;
       margin-bottom: 0.5rem;
       letter-spacing: 0.05em;
   }
   
   .package-price {
       font-size: 3.5rem;
       font-weight: 900;
       margin-bottom: 0.5rem;
   }
   
   .package-description {
       opacity: 0.9;
   }
   
   .package-body {
       padding: 2rem;
   }
   
   .package-features {
       list-style: none;
       margin-bottom: 2rem;
   }
   
   .package-features li {
       display: flex;
       align-items: start;
       padding: 0.75rem 0;
       color: var(--gray-700);
   }
   
   .package-features li i {
       color: #10B981;
       margin-right: 0.75rem;
       margin-top: 0.25rem;
   }
   
   .package-popular {
       position: relative;
   }
   
   .package-popular::before {
       content: 'MOST POPULAR';
       position: absolute;
       top: 1.5rem;
       right: -2.5rem;
       background: #EF4444;
       color: white;
       padding: 0.5rem 3rem;
       transform: rotate(45deg);
       font-size: 0.75rem;
       font-weight: 700;
       z-index: 10;
   }
   
   /* ========== Stats Section ========== */
   .stats-section {
       background: linear-gradient(135deg, var(--primary-orange) 0%, var(--primary-green) 100%);
       color: white;
       padding: 5rem 0;
       position: relative;
   }
   
   .stats-section::after {
       content: '';
       position: absolute;
       bottom: 0;
       left: 0;
       right: 0;
       height: 100px;
       background: white;
       clip-path: polygon(0 50%, 100% 0, 100% 100%, 0 100%);
   }
   
   .stat-item {
       text-align: center;
   }
   
   .stat-number {
       font-size: 3.5rem;
       font-weight: 900;
       margin-bottom: 0.5rem;
   }
   
   .stat-label {
       font-size: 1.25rem;
       font-weight: 600;
       margin-bottom: 0.25rem;
   }
   
   .stat-description {
       opacity: 0.8;
       font-size: 0.875rem;
   }
   
   /* ========== Feature Cards ========== */
   .feature-card {
       background: white;
       border-radius: 1.25rem;
       padding: 2rem;
       transition: all 0.4s ease;
       position: relative;
       overflow: hidden;
   }
   
   .feature-card::after {
       content: '';
       position: absolute;
       top: 0;
       right: 0;
       width: 100px;
       height: 100px;
       background: linear-gradient(135deg, var(--primary-orange) 0%, var(--primary-green) 100%);
       opacity: 0.1;
       border-radius: 50%;
       transform: translate(50%, -50%);
       transition: all 0.4s ease;
   }
   
   .feature-card:hover::after {
       transform: translate(30%, -30%) scale(3);
   }
   
   .feature-card:hover {
       transform: translateY(-10px);
       box-shadow: 0 20px 50px rgba(0, 0, 0, 0.15);
   }
   
   .feature-icon {
       width: 4rem;
       height: 4rem;
       border-radius: 1rem;
       display: flex;
       align-items: center;
       justify-content: center;
       font-size: 1.75rem;
       color: white;
       margin-bottom: 1.5rem;
       transition: all 0.4s ease;
   }
   
   .feature-card:hover .feature-icon {
       transform: scale(1.2) rotate(10deg);
   }
   
   /* ========== Testimonial Cards ========== */
   .testimonial-card {
       background: white;
       border-radius: 1.25rem;
       padding: 2rem;
       position: relative;
       box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
       transition: all 0.3s ease;
   }
   
   .testimonial-card::before {
       content: '"';
       position: absolute;
       top: -20px;
       left: 20px;
       font-size: 100px;
       color: var(--primary-orange);
       opacity: 0.2;
       font-family: Georgia, serif;
   }
   
   .testimonial-card:hover {
       transform: translateY(-5px);
       box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);
   }
   
   .testimonial-author {
       display: flex;
       align-items: center;
       margin-bottom: 1rem;
   }
   
   .testimonial-avatar {
       width: 3.5rem;
       height: 3.5rem;
       border-radius: 50%;
       display: flex;
       align-items: center;
       justify-content: center;
       color: white;
       font-weight: 700;
       font-size: 1.25rem;
       margin-right: 1rem;
   }
   
   .testimonial-rating {
       display: flex;
       gap: 0.25rem;
       color: #FBBF24;
   }
   
   /* ========== Footer ========== */
   .footer {
       background: var(--gray-900);
       color: white;
       padding: 4rem 0 2rem;
   }
   
   .footer-logo {
       display: flex;
       align-items: center;
       gap: 0.75rem;
       margin-bottom: 1.5rem;
   }
   
   .footer-logo-box {
       width: 3rem;
       height: 3rem;
       background: linear-gradient(135deg, var(--primary-orange) 0%, var(--primary-green) 100%);
       border-radius: 0.75rem;
       display: flex;
       align-items: center;
       justify-content: center;
   }
   
   .footer-description {
       color: var(--gray-400);
       line-height: 1.8;
       margin-bottom: 1.5rem;
   }
   
   .footer-social {
       display: flex;
       gap: 0.75rem;
   }
   
   .social-icon {
       width: 2.5rem;
       height: 2.5rem;
       background: var(--gray-800);
       border-radius: 50%;
       display: flex;
       align-items: center;
       justify-content: center;
       color: white;
       transition: all 0.3s ease;
   }
   
   .social-icon:hover {
       background: var(--primary-orange);
       transform: translateY(-3px);
   }
   
   .footer-links {
       list-style: none;
   }
   
   .footer-links li {
       margin-bottom: 0.75rem;
   }
   
   .footer-links a {
       color: var(--gray-400);
       transition: all 0.3s ease;
   }
   
   .footer-links a:hover {
       color: white;
       padding-left: 0.5rem;
   }
   
   .footer-bottom {
       border-top: 1px solid var(--gray-800);
       padding-top: 2rem;
       margin-top: 3rem;
       display: flex;
       justify-content: space-between;
       align-items: center;
       flex-wrap: wrap;
       gap: 1rem;
   }
   
   .footer-bottom-links {
       display: flex;
       gap: 1.5rem;
   }
   
   .footer-bottom-links a {
       color: var(--gray-400);
       font-size: 0.875rem;
       transition: color 0.3s ease;
   }
   
   .footer-bottom-links a:hover {
       color: white;
   }
   
   /* ========== Utility Classes ========== */
   .container {
       max-width: 1200px;
       margin: 0 auto;
       padding: 0 1rem;
   }
   
   .section {
       padding: 5rem 0;
   }
   
   .section-header {
       text-align: center;
       margin-bottom: 4rem;
   }
   
   .section-label {
       color: var(--primary-orange);
       font-weight: 600;
       font-size: 0.875rem;
       text-transform: uppercase;
       letter-spacing: 0.1em;
   }
   
   .section-title {
       font-size: 3rem;
       font-weight: 900;
       margin: 0.5rem 0 1rem;
   }
   
   .section-description {
       color: var(--gray-600);
       font-size: 1.125rem;
       max-width: 40rem;
       margin: 0 auto;
   }
   
   .text-center { text-align: center; }
   .text-left { text-align: left; }
   .text-right { text-align: right; }
   
   .mt-1 { margin-top: 0.25rem; }
   .mt-2 { margin-top: 0.5rem; }
   .mt-3 { margin-top: 1rem; }
   .mt-4 { margin-top: 1.5rem; }
   .mt-5 { margin-top: 3rem; }
   
   .mb-1 { margin-bottom: 0.25rem; }
   .mb-2 { margin-bottom: 0.5rem; }
   .mb-3 { margin-bottom: 1rem; }
   .mb-4 { margin-bottom: 1.5rem; }
   .mb-5 { margin-bottom: 3rem; }
   
   .grid { display: grid; }
   .flex { display: flex; }
   .hidden { display: none; }
   
   /* ========== Scrollbar ========== */
   ::-webkit-scrollbar {
       width: 10px;
   }
   
   ::-webkit-scrollbar-track {
       background: var(--gray-100);
   }
   
   ::-webkit-scrollbar-thumb {
       background: linear-gradient(135deg, var(--primary-orange) 0%, var(--primary-green) 100%);
       border-radius: 10px;
   }
   
   ::-webkit-scrollbar-thumb:hover {
       background: var(--primary-green);
   }