// Booking Page - Add to en.php
'booking_page_title' => 'Book Appointment',
'booking_page_subtitle' => 'Schedule your consultation with a trusted doctor',
'booking_doctor_info' => 'Doctor Information',
'booking_patient_info' => 'Your Information',
'booking_name' => 'Name',
'booking_email' => 'Email',
'booking_phone' => 'Phone',
'booking_specialization' => 'Specialization',
'booking_qualifications' => 'Qualifications',
'booking_experience' => 'years experience',
'booking_what_to_expect' => 'What to Expect',
'booking_expect_1' => 'Professional diagnosis',
'booking_expect_2' => 'Personalized treatment plan',
'booking_expect_3' => 'Follow-up care instructions',
'booking_expect_4' => 'Prescription if needed',
'booking_expect_5' => 'Secure medical records',
'booking_select_consultation_type' => 'Consultation Type',
'booking_video_consultation' => 'Video Consultation',
'booking_video_desc' => 'Secure video call with the doctor from your location',
'booking_voice_consultation' => 'Voice Call Consultation',
'booking_voice_desc' => 'Clear audio consultation over the phone for quick medical advice',
'booking_chat_consultation' => 'Chat Consultation',
'booking_chat_desc' => 'Text-based consultation for quick medical advice',
'booking_in_person_consultation' => 'In-person Visit',
'booking_in_person_desc' => 'Visit the doctor\'s clinic for physical examination',
'booking_coming_soon' => 'Coming Soon',
'booking_appointment_date' => 'Appointment Date',
'booking_select_date' => 'Select a date within the next 30 days',
'booking_preferred_time' => 'Preferred Time',
'booking_select_time' => 'Select your preferred time slot',
'booking_symptoms_label' => 'Symptoms / Reason for Visit',
'booking_symptoms_placeholder' => 'Please describe your symptoms, medical concerns, or reason for consultation in detail. Include duration of symptoms, severity, and any previous treatments...',
'booking_symptoms_help' => 'Be as detailed as possible to help the doctor understand your condition',
'booking_summary' => 'Appointment Summary',
'booking_fee_label' => 'Consultation Fee',
'booking_duration_label' => 'Duration',
'booking_promo_label' => 'Promotion',
'booking_free' => 'FREE',
'booking_book_now' => 'Book Free Consultation',
'booking_no_payment' => 'No payment required. Free for 3 months from signup.',
'booking_terms' => 'By booking this appointment, you agree to our',
'booking_terms_of_service' => 'Terms of Service',
'booking_privacy_policy' => 'Privacy Policy',
'booking_login_required' => 'Login Required',
'booking_login_message' => 'Please login or create an account to book a FREE consultation with Dr.',
'booking_login_btn' => 'Login',
'booking_register_btn' => 'Register',
'booking_already_have_account' => 'Already have an account',
'booking_new_to_medical' => 'New to Medical Connect?',
'booking_back_to_doctors' => 'Back to Doctors',
'booking_terms_agree' => 'By logging in, you agree to our',
'booking_error_time_slot' => 'Sorry, this time slot is already booked. Please choose another time.',
'booking_error_future_date' => 'Please select a future date and time for your appointment.',
'booking_error_general' => 'Failed to book appointment. Please try again.',
'booking_success' => 'Appointment booked successfully! Your appointment ID is #',
'booking_select_time_error' => 'Please select a preferred time slot',
'booking_select_date_error' => 'Please select an appointment date',
'booking_select_type_error' => 'Please select a consultation type',
'booking_enter_symptoms' => 'Please describe your symptoms or reason for visit',
'booking_30_45_minutes' => '30-45 minutes',
'booking_free_promo_badge' => '3 Months Free',
'booking_original_price' => 'Original Price',
'booking_free_consultation' => 'Free Consultation',
'booking_doctor_not_found' => 'Doctor not found',
'booking_invalid_doctor' => 'Invalid doctor selected',
'booking_consultation_types' => 'Choose your consultation type',
'booking_available_times' => 'Available Time Slots',
'booking_no_times_available' => 'No time slots available for the selected date',
'booking_today' => 'Today',
'booking_tomorrow' => 'Tomorrow',
'booking_am' => 'AM',
'booking_pm' => 'PM',
'booking_hour' => 'hour',
'booking_hours' => 'hours',
'booking_minute' => 'minute',
'booking_minutes' => 'minutes',
'booking_select_doctor' => 'Select a Doctor',
'booking_confirm_appointment' => 'Confirm Appointment',
'booking_cancel' => 'Cancel',
'booking_reschedule' => 'Reschedule',
'booking_appointment_details' => 'Appointment Details',
'booking_patient_details' => 'Patient Details',
'booking_doctor_details' => 'Doctor Details',
'booking_appointment_id' => 'Appointment ID',
'booking_status' => 'Status',
'booking_status_scheduled' => 'Scheduled',
'booking_status_completed' => 'Completed',
'booking_status_cancelled' => 'Cancelled',
'booking_need_help' => 'Need Help?',
'booking_contact_support' => 'Contact our support team for assistance',
'booking_support_phone' => '+234 800 000 0000',
'booking_support_email' => 'support@medicalconnectng.com',<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Medical Connect Nigeria - hero_title</title>
    <link rel="icon" type="image/png" href="./assets/images/MedicalConnectTitleBarLogo2.png">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
    <style>
        /* Your existing styles remain the same */
        .hero-section {
            background-image: url(./assets/images/backgroundimage2.jpg);
            background-size: cover;
            background-position: center;
            color: white;
            padding: 150px 0;
        }
        .specialty-card {
            transition: transform 0.3s ease;
            border: none;
            box-shadow: 0 4px 6px rgba(0,0,0,0.1);
            border-radius: 15px;
        }
        .specialty-card:hover {
            transform: translateY(-10px);
            box-shadow: 0 10px 25px rgba(0,0,0,0.2);
        }
        .doctor-card {
            border: none;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
            border-radius: 15px;
        }
        .stats-section {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
        }
        .btn-primary {
            background: #00529b;
            border: none;
            padding: 12px 30px;
            border-radius: 50px;
            font-weight: 600;
        }
        .btn-primary:hover {
            background: #003d73;
            transform: translateY(-2px);
        }
        .navbar-brand {
            font-weight: 700;
            font-size: 1.5rem;
        }
        .feature-icon {
            width: 80px;
            height: 80px;
            background: linear-gradient(135deg, #00529b, #0088cc);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto 20px;
        }
    
        
        /* Logo */
        .logo-icon {
            transition: all 0.3s ease;
            width: 30px;
            height: 30px;
            background: linear-gradient(135deg, #3B82F6, #3B82F6);
            border-radius: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        
        .logo-icon2 {
            transition: all 0.3s ease;
            width: 30px;
            height: 30px;
            background: linear-gradient(135deg);
            border-radius: 10px;
            display: flex;
            align-items: center;
            /*justify-content: center;*/  /*I commented this becasue it will make the image go out of screen*/
        }
        .navbar-brand:hover .logo-icon {
            transform: rotate(10deg) scale(1.1);
        }
        
        /* Logo Image Styling - Zoomed In Permanently */
        .nav-logo-img {
            height: 120px;
            width: auto;
            object-fit: contain;
        }
        
        /* Responsive Logo - Zoomed on all devices */
        @media (max-width: 768px) {
            .nav-logo-img {
                height: 120px;
            }
        }
        
        @media (max-width: 576px) {
            .nav-logo-img {
                height: 120px;
            }
        }
        
        /* Premium Navigation Styles - UPDATED */
        .navbar {
            transition: all 0.3s ease;
            padding: 15px 0;
        }
        
        .navbar.scrolled {
            background: rgba(255, 255, 255, 0.98) !important;
            backdrop-filter: blur(20px);
            box-shadow: 0 5px 30px rgba(0, 0, 0, 0.1);
            padding: 10px 0;
        }
        
        .nav-link {
            position: relative;
            transition: all 0.3s ease;
            white-space: nowrap;
        }
        
        .nav-link:hover {
            color: #00529b !important;
            background: linear-gradient(135deg, rgba(0, 82, 155, 0.1), rgba(0, 136, 204, 0.1));
            transform: translateY(-2px);
        }
        
        .nav-link:hover .nav-indicator {
            width: 80% !important;
        }
        
        .nav-link.active {
            color: #00529b !important;
            background: linear-gradient(135deg, rgba(0, 82, 155, 0.1), rgba(0, 136, 204, 0.1));
        }
        
        .nav-link.active .nav-indicator {
            width: 80% !important;
        }
        
        .btn-primary {
            position: relative;
            overflow: hidden;
            z-index: 1;
            transition: all 0.3s ease;
        }
        
        .btn-primary:hover {
            transform: translateY(-2px);
            box-shadow: 0 8px 25px rgba(0, 82, 155, 0.3);
        }
        
        .btn-primary:hover .btn-hover-effect {
            left: 0 !important;
        }
        
        /* Logo Animation */
        .logo-icon {
            transition: all 0.3s ease;
        }
        
        .navbar-brand:hover .logo-icon {
            transform: rotate(10deg) scale(1.1);
        }
        
        /* User Profile Styles - ADDED FROM headeronly.php */
        .user-profile-desktop {
            display: flex;
            align-items: center;
            background: linear-gradient(135deg, rgba(0, 82, 155, 0.1), rgba(0, 136, 204, 0.1));
            border-radius: 25px;
            padding: 8px 15px 8px 8px;
            transition: all 0.3s ease;
            text-decoration: none;
            color: inherit;
            white-space: nowrap;
        }
        
        .user-profile-desktop:hover {
            background: linear-gradient(135deg, rgba(0, 82, 155, 0.2), rgba(0, 136, 204, 0.2));
            transform: translateY(-2px);
            text-decoration: none;
            color: inherit;
        }
        
        .user-avatar {
            width: 32px;
            height: 32px;
            background: linear-gradient(135deg, #00529b, #3B82F6);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-size: 0.9rem;
            font-weight: 600;
            margin-right: 10px;
        }
        
        .user-name {
            font-weight: 600;
            color: #00529b;
            font-size: 0.9rem;
        }
        
        .user-dropdown {
            position: relative;
        }
        
        .user-dropdown-menu {
            position: absolute;
            top: 100%;
            right: 0;
            background: white;
            border-radius: 15px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
            padding: 10px;
            min-width: 200px;
            margin-top: 10px;
            opacity: 0;
            visibility: hidden;
            transform: translateY(-10px);
            transition: all 0.3s ease;
            z-index: 1000;
        }
        
        .user-dropdown:hover .user-dropdown-menu {
            opacity: 1;
            visibility: visible;
            transform: translateY(0);
        }
        
        .user-dropdown-item {
            display: flex;
            align-items: center;
            padding: 10px 15px;
            border-radius: 8px;
            color: #333;
            text-decoration: none;
            transition: all 0.3s ease;
        }
        
        .user-dropdown-item:hover {
            background: linear-gradient(135deg, #00529b, #3B82F6);
            color: white;
            transform: translateX(5px);
            text-decoration: none;
        }
        
        /* Mobile User Profile - FIXED */
        .mobile-user-avatar {
            width: 40px;
            height: 40px;
            background: linear-gradient(135deg, #00529b, #3B82F6);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-weight: 600;
            font-size: 1rem;
            border: 2px solid white;
            box-shadow: 0 4px 10px rgba(0, 82, 155, 0.3);
            cursor: pointer;
            transition: all 0.3s ease;
        }
        
        .mobile-user-avatar:hover {
            transform: scale(1.1);
        }
        
        /* Mobile Menu Improvements */
        @media (max-width: 991.98px) {
            .navbar-collapse {
                background: rgba(255, 255, 255, 0.98);
                backdrop-filter: blur(20px);
                border-radius: 15px;
                margin-top: 15px;
                padding: 20px;
                box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
                max-height: 70vh;
                overflow-y: auto;
            }
            
            .nav-link {
                padding: 15px 20px !important;
                margin: 5px 0;
                border-radius: 10px !important;
                white-space: normal;
            }
            
            .user-profile-desktop {
                display: none;
            }
            
            /* Mobile user menu styling */
            .mobile-user-menu {
                margin-top: 15px;
            }
        }
        
        /* Desktop only */
        @media (min-width: 992px) {
            .mobile-user-avatar {
                display: none;
            }
            
            /* Fix navbar alignment - keep everything in one line */
            .navbar-nav {
                flex-wrap: nowrap;
            }
            
            .navbar-nav .nav-item {
                flex-shrink: 0;
            }
            
            .navbar-nav.ms-3 {
                flex-wrap: nowrap;
            }
            
            .navbar-nav.ms-3 .nav-item,
            .navbar-nav.ms-3 .user-dropdown,
            .navbar-nav.ms-3 .country-selector,
            .navbar-nav.ms-3 .btn {
                flex-shrink: 0;
            }
            
            /* Align with body content - use same padding as body */
            .container {
                padding-left: 15px !important;
                padding-right: 15px !important;
            }
            
            /* Make nav links more compact */
            .nav-link {
                padding: 8px 12px !important;
                font-size: 0.85rem;
            }
            
            .nav-item.me-2 {
                margin-right: 0.25rem !important;
            }
            
            .btn-primary {
                padding: 7px 16px;
                font-size: 0.8rem;
            }
            
            .country-selector .lang-btn {
                padding: 5px 10px 5px 6px;
                font-size: 0.75rem;
            }
            
            .country-selector .lang-btn img {
                width: 18px;
                height: 12px;
            }
            
            .country-selector .lang-btn .country-abbr {
                font-size: 0.75rem;
            }
            
            .user-profile-desktop {
                padding: 4px 10px 4px 4px;
            }
            
            .user-avatar {
                width: 26px;
                height: 26px;
                font-size: 0.65rem;
                margin-right: 5px;
            }
            
            .user-name {
                font-size: 0.75rem;
            }
            
            .nav-link .fas {
                font-size: 0.8rem;
            }
            
            .navbar-brand {
                margin-right: 1rem !important;
            }
        }
        
        /* Dropdown Menu Styles */
        .dropdown-menu {
            border: none;
            border-radius: 15px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
            backdrop-filter: blur(10px);
            background: rgba(255, 255, 255, 0.95);
        }
        
        .dropdown-item {
            padding: 12px 20px;
            transition: all 0.3s ease;
            border-radius: 8px;
            margin: 2px 10px;
            width: auto;
        }
        
        .dropdown-item:hover {
            background: linear-gradient(135deg, #00529b, #0088cc);
            color: white;
            transform: translateX(5px);
        }

        /* ============================================
           NEW FREE PROMOTION SECTION STYLES
           ============================================ */
        .free-promo-section {
            background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
            padding: 80px 0;
            position: relative;
            overflow: hidden;
        }
        
        .free-promo-section::before {
            content: '';
            position: absolute;
            top: -50%;
            left: -50%;
            width: 200%;
            height: 200%;
            background: radial-gradient(ellipse at 30% 50%, rgba(255, 107, 53, 0.08) 0%, transparent 60%);
            animation: promoGlow 8s ease-in-out infinite alternate;
        }
        
        @keyframes promoGlow {
            0% { transform: translate(0, 0) scale(1); }
            100% { transform: translate(5%, 5%) scale(1.1); }
        }
        
        .free-promo-content {
            position: relative;
            z-index: 2;
            text-align: center;
        }
        
        .free-promo-badge {
            display: inline-block;
            background: linear-gradient(135deg, #ff6b35, #f7931e);
            padding: 10px 30px;
            border-radius: 50px;
            font-weight: 700;
            font-size: 1rem;
            color: white;
            letter-spacing: 1px;
            box-shadow: 0 4px 20px rgba(255, 107, 53, 0.4);
            animation: badgePulse 2s ease-in-out infinite;
            margin-bottom: 20px;
        }
        
        @keyframes badgePulse {
            0%, 100% { transform: scale(1); box-shadow: 0 4px 20px rgba(255, 107, 53, 0.4); }
            50% { transform: scale(1.03); box-shadow: 0 8px 35px rgba(255, 107, 53, 0.6); }
        }
        
        .free-promo-title {
            font-size: 3.2rem;
            font-weight: 800;
            color: white;
            margin-bottom: 15px;
            line-height: 1.2;
        }
        
        .free-promo-title .highlight {
            background: linear-gradient(135deg, #ff6b35, #f7931e);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }
        
        .free-promo-title .highlight-gold {
            background: linear-gradient(135deg, #f7971e, #ffd200);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }
        
        .free-promo-subtitle {
            font-size: 1.2rem;
            color: rgba(255, 255, 255, 0.7);
            max-width: 600px;
            margin: 0 auto 30px;
            line-height: 1.8;
        }
        
        .free-promo-features {
            display: flex;
            justify-content: center;
            gap: 40px;
            flex-wrap: wrap;
            margin-bottom: 35px;
        }
        
        .free-promo-feature-item {
            display: flex;
            align-items: center;
            gap: 10px;
            color: rgba(255, 255, 255, 0.85);
            font-size: 1rem;
        }
        
        .free-promo-feature-item i {
            color: #28a745;
            font-size: 1.2rem;
        }
        
        .free-promo-btn {
            display: inline-block;
            background: linear-gradient(135deg, #ff6b35, #f7931e);
            color: white;
            padding: 18px 50px;
            border-radius: 50px;
            font-size: 1.2rem;
            font-weight: 700;
            text-decoration: none;
            transition: all 0.3s ease;
            box-shadow: 0 8px 30px rgba(255, 107, 53, 0.4);
            border: none;
            cursor: pointer;
        }
        
        .free-promo-btn:hover {
            transform: translateY(-3px);
            box-shadow: 0 12px 40px rgba(255, 107, 53, 0.6);
            color: white;
            text-decoration: none;
        }
        
        .free-promo-btn i {
            margin-right: 10px;
        }
        
        .free-promo-timer {
            margin-top: 25px;
            display: flex;
            justify-content: center;
            gap: 20px;
            color: rgba(255, 255, 255, 0.6);
            font-size: 0.9rem;
        }
        
        .free-promo-timer .timer-number {
            font-size: 1.8rem;
            font-weight: 700;
            color: white;
            display: block;
        }
        
        .free-promo-timer .timer-label {
            font-size: 0.7rem;
            text-transform: uppercase;
            letter-spacing: 1px;
        }
        
        .free-promo-timer .timer-item {
            text-align: center;
            background: rgba(255, 255, 255, 0.05);
            padding: 8px 18px;
            border-radius: 10px;
            border: 1px solid rgba(255, 255, 255, 0.08);
            min-width: 60px;
        }
        
        @media (max-width: 768px) {
            .free-promo-title {
                font-size: 2.2rem;
            }
            .free-promo-features {
                gap: 15px;
            }
            .free-promo-feature-item {
                font-size: 0.85rem;
            }
            .free-promo-btn {
                padding: 15px 30px;
                font-size: 1rem;
            }
            .free-promo-timer {
                gap: 10px;
                flex-wrap: wrap;
            }
            .free-promo-timer .timer-item {
                min-width: 50px;
                padding: 6px 12px;
            }
            .free-promo-timer .timer-number {
                font-size: 1.2rem;
            }
        }

        /* ============================================
           HERO BOOK BUTTON STYLES - WITH GLOW EFFECT
           ============================================ */
        .hero-book-btn {
            display: inline-block;
            background: linear-gradient(135deg, #ff6b35, #f7931e);
            color: white;
            padding: 16px 45px;
            border-radius: 50px;
            font-size: 1.15rem;
            font-weight: 700;
            text-decoration: none;
            transition: all 0.3s ease;
            border: none;
            cursor: pointer;
            letter-spacing: 0.5px;
            margin-top: 10px;
            /* Glow effect matching the badge */
            box-shadow: 0 4px 20px rgba(255, 107, 53, 0.4);
            animation: bookBtnPulse 2s ease-in-out infinite;
        }
        
        @keyframes bookBtnPulse {
            0%, 100% { 
                transform: scale(1); 
                box-shadow: 0 4px 20px rgba(255, 107, 53, 0.4);
            }
            50% { 
                transform: scale(1.02); 
                box-shadow: 0 6px 30px rgba(255, 107, 53, 0.6), 0 0 40px rgba(255, 107, 53, 0.2);
            }
        }
        
        .hero-book-btn:hover {
            transform: translateY(-3px) scale(1.03);
            box-shadow: 0 8px 35px rgba(255, 107, 53, 0.6), 0 0 50px rgba(255, 107, 53, 0.25);
            color: white;
            text-decoration: none;
            animation: none;
        }
        
        .hero-book-btn i {
            margin-right: 10px;
        }
        
        .hero-book-btn .btn-sub-text {
            display: block;
            font-size: 0.7rem;
            font-weight: 400;
            opacity: 0.85;
            margin-top: 2px;
        }
        
        @media (max-width: 768px) {
            .hero-book-btn {
                padding: 14px 30px;
                font-size: 1rem;
            }
            .hero-book-btn .btn-sub-text {
                font-size: 0.65rem;
            }
        }

        /* ============================================
           COUNTRY LANGUAGE SELECTOR STYLES
           ============================================ */
        .country-selector {
            position: relative;
            margin-left: 6px;
            display: inline-block;
            flex-shrink: 0;
        }

        .country-selector .lang-btn {
            background: rgba(0, 82, 155, 0.08);
            border: 1px solid rgba(0, 82, 155, 0.15);
            border-radius: 30px;
            padding: 5px 10px 5px 6px;
            display: flex;
            align-items: center;
            gap: 4px;
            cursor: pointer;
            transition: all 0.3s ease;
            color: #00529b;
            font-weight: 500;
            font-size: 0.75rem;
        }

        .country-selector .lang-btn:hover {
            background: rgba(0, 82, 155, 0.15);
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(0, 82, 155, 0.15);
        }

        .country-selector .lang-btn img {
            width: 18px;
            height: 12px;
            border-radius: 3px;
            object-fit: cover;
        }

        .country-selector .lang-btn .country-abbr {
            font-weight: 600;
            font-size: 0.75rem;
        }

        .country-selector .lang-btn .lang-arrow {
            font-size: 0.5rem;
            margin-left: 2px;
            transition: transform 0.3s ease;
        }

        .country-selector .lang-btn[aria-expanded="true"] .lang-arrow {
            transform: rotate(180deg);
        }

        .country-dropdown {
            position: absolute;
            top: calc(100% + 10px);
            right: 0;
            background: white;
            border-radius: 16px;
            box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);
            padding: 8px;
            min-width: 260px;
            max-height: 400px;
            overflow-y: auto;
            opacity: 0;
            visibility: hidden;
            transform: translateY(-10px);
            transition: all 0.3s ease;
            z-index: 1000;
            border: 1px solid rgba(0, 0, 0, 0.06);
        }

        .country-dropdown::-webkit-scrollbar {
            width: 6px;
        }

        .country-dropdown::-webkit-scrollbar-track {
            background: #f1f1f1;
            border-radius: 10px;
        }

        .country-dropdown::-webkit-scrollbar-thumb {
            background: #00529b;
            border-radius: 10px;
        }

        .country-selector .country-dropdown.show {
            opacity: 1;
            visibility: visible;
            transform: translateY(0);
        }

        .country-dropdown .country-item {
            display: flex;
            align-items: center;
            gap: 12px;
            padding: 10px 14px;
            border-radius: 10px;
            cursor: pointer;
            transition: all 0.3s ease;
            color: #333;
            text-decoration: none;
            font-size: 0.9rem;
        }

        .country-dropdown .country-item:hover {
            background: linear-gradient(135deg, rgba(0, 82, 155, 0.08), rgba(59, 130, 246, 0.08));
            transform: translateX(4px);
        }

        .country-dropdown .country-item img {
            width: 28px;
            height: 18px;
            border-radius: 4px;
            object-fit: cover;
            border: 1px solid rgba(0, 0, 0, 0.06);
        }

        .country-dropdown .country-item .country-name {
            font-weight: 500;
        }

        .country-dropdown .country-item .country-code {
            font-size: 0.75rem;
            color: #888;
            margin-left: auto;
        }

        .country-dropdown .country-item.active {
            background: linear-gradient(135deg, rgba(0, 82, 155, 0.12), rgba(59, 130, 246, 0.12));
        }

        .country-dropdown .country-item.active .country-name {
            color: #00529b;
            font-weight: 600;
        }

        .country-dropdown .country-item .check-mark {
            margin-left: auto;
            color: #00529b;
            font-size: 0.85rem;
        }

        .country-dropdown .country-item .country-lang {
            font-size: 0.7rem;
            color: #999;
            display: block;
        }

        /* ============================================
           MOBILE COUNTRY SELECTOR - BESIDE MENU
           ============================================ */
        .mobile-country-btn {
            display: flex;
            align-items: center;
            gap: 4px;
            background: rgba(0, 82, 155, 0.08);
            border: 1px solid rgba(0, 82, 155, 0.12);
            border-radius: 8px;
            padding: 6px 10px;
            cursor: pointer;
            transition: all 0.3s ease;
            color: #00529b;
            font-size: 0.8rem;
            font-weight: 500;
            text-decoration: none;
            margin-right: 8px;
        }

        .mobile-country-btn:hover {
            background: rgba(0, 82, 155, 0.15);
            transform: scale(1.05);
        }

        .mobile-country-btn img {
            width: 22px;
            height: 14px;
            border-radius: 3px;
            object-fit: cover;
            border: 1px solid rgba(0,0,0,0.06);
        }

        .mobile-country-btn .country-code-label {
            font-size: 0.65rem;
            font-weight: 600;
        }

        .mobile-country-dropdown {
            position: absolute;
            top: calc(100% + 8px);
            right: 0;
            background: white;
            border-radius: 16px;
            box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);
            padding: 8px;
            min-width: 240px;
            max-height: 350px;
            overflow-y: auto;
            opacity: 0;
            visibility: hidden;
            transform: translateY(-10px);
            transition: all 0.3s ease;
            z-index: 1000;
            border: 1px solid rgba(0, 0, 0, 0.06);
        }

        .mobile-country-dropdown.show {
            opacity: 1;
            visibility: visible;
            transform: translateY(0);
        }

        .mobile-country-dropdown::-webkit-scrollbar {
            width: 4px;
        }

        .mobile-country-dropdown::-webkit-scrollbar-thumb {
            background: #00529b;
            border-radius: 10px;
        }

        .mobile-country-dropdown .m-country-item {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 8px 12px;
            border-radius: 10px;
            cursor: pointer;
            transition: all 0.3s ease;
            color: #333;
            text-decoration: none;
            font-size: 0.85rem;
        }

        .mobile-country-dropdown .m-country-item:hover {
            background: rgba(0, 82, 155, 0.08);
        }

        .mobile-country-dropdown .m-country-item img {
            width: 24px;
            height: 16px;
            border-radius: 3px;
            object-fit: cover;
        }

        .mobile-country-dropdown .m-country-item.active {
            background: rgba(0, 82, 155, 0.12);
            color: #00529b;
            font-weight: 600;
        }

        .mobile-country-dropdown .m-country-item .m-country-code {
            font-size: 0.65rem;
            color: #888;
            margin-left: auto;
        }

        .mobile-country-wrapper {
            position: relative;
            display: inline-block;
        }

        @media (min-width: 992px) {
            .mobile-country-wrapper {
                display: none !important;
            }
        }

        @media (max-width: 991.98px) {
            .country-selector.desktop-only {
                display: none !important;
            }
            
            .mobile-country-btn .country-name-mobile {
                display: none;
            }
        }

        @media (max-width: 400px) {
            .mobile-country-btn {
                padding: 4px 6px;
            }
            .mobile-country-btn img {
                width: 18px;
                height: 12px;
            }
        }
    </style>
</head>
<body>
        <!-- Premium Navigation -->
    <nav class="navbar navbar-expand-lg navbar-light fixed-top" style="background: rgba(255, 255, 255, 0.95); backdrop-filter: blur(10px); border-bottom: 1px solid rgba(0, 82, 155, 0.1);">
        <div class="container">
            <!-- Logo - Original structure with zoomed image -->
            <a class="navbar-brand fw-bold text-primary d-flex align-items-center" href="index.php" style="flex-shrink: 0; margin-right: 1rem;">
                <div class="logo-icon2 me-2">
                    <img src="./assets/images/MedicalConnectTitleBarLogo2_rebrand.PNG" alt="Medical Connect Nigeria" class="nav-logo-img">
                </div>
            </a>

            <!-- Mobile Right Side - FIXED with Country Selector -->
            <div class="d-flex align-items-center d-lg-none">
                <!-- Mobile User Avatar -->
                
                <!-- MOBILE COUNTRY SELECTOR - BESIDE MENU -->
                <div class="mobile-country-wrapper">
                    <button class="mobile-country-btn" type="button" id="mobileCountryDropdown" aria-expanded="false">
                        <img src="https://flagcdn.com/w40/ng.png" alt="EN" id="mobileCountryFlag">
                        <span class="country-code-label" id="mobileCountryCode">EN</span>
                        <i class="fas fa-chevron-down" style="font-size: 0.6rem; opacity: 0.6;"></i>
                    </button>
                    <div class="mobile-country-dropdown" aria-labelledby="mobileCountryDropdown">
                                                <a href="?lang=en" class="m-country-item active" data-country="English" data-code="EN" data-flag="https://flagcdn.com/w40/ng.png" data-lang="en">
                            <img src="https://flagcdn.com/w40/ng.png" alt="English">
                            <span>English</span>
                            <span class="m-country-code">EN</span>
                        </a>
                                                <a href="?lang=fr" class="m-country-item " data-country="French" data-code="FR" data-flag="https://flagcdn.com/w40/fr.png" data-lang="fr">
                            <img src="https://flagcdn.com/w40/fr.png" alt="French">
                            <span>French</span>
                            <span class="m-country-code">FR</span>
                        </a>
                                                <a href="?lang=es" class="m-country-item " data-country="Spanish" data-code="ES" data-flag="https://flagcdn.com/w40/es.png" data-lang="es">
                            <img src="https://flagcdn.com/w40/es.png" alt="Spanish">
                            <span>Spanish</span>
                            <span class="m-country-code">ES</span>
                        </a>
                                                <a href="?lang=pt" class="m-country-item " data-country="Portuguese" data-code="PT" data-flag="https://flagcdn.com/w40/pt.png" data-lang="pt">
                            <img src="https://flagcdn.com/w40/pt.png" alt="Portuguese">
                            <span>Portuguese</span>
                            <span class="m-country-code">PT</span>
                        </a>
                                                <a href="?lang=ar" class="m-country-item " data-country="Arabic" data-code="SA" data-flag="https://flagcdn.com/w40/sa.png" data-lang="ar">
                            <img src="https://flagcdn.com/w40/sa.png" alt="Arabic">
                            <span>Arabic</span>
                            <span class="m-country-code">SA</span>
                        </a>
                                                <a href="?lang=zh" class="m-country-item " data-country="Chinese" data-code="CN" data-flag="https://flagcdn.com/w40/cn.png" data-lang="zh">
                            <img src="https://flagcdn.com/w40/cn.png" alt="Chinese">
                            <span>Chinese</span>
                            <span class="m-country-code">CN</span>
                        </a>
                                                <a href="?lang=de" class="m-country-item " data-country="German" data-code="DE" data-flag="https://flagcdn.com/w40/de.png" data-lang="de">
                            <img src="https://flagcdn.com/w40/de.png" alt="German">
                            <span>German</span>
                            <span class="m-country-code">DE</span>
                        </a>
                                            </div>
                </div>

                <!-- Mobile Menu Toggle -->
                <button class="navbar-toggler border-0" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" 
                        style="background: linear-gradient(135deg, #00529b, #3B82F6); padding: 8px 12px; border-radius: 8px;">
                    <span class="navbar-toggler-icon" style="filter: invert(1);"></span>
                </button>
            </div>

            <!-- Navigation Links -->
            <div class="collapse navbar-collapse" id="navbarNav">
                <ul class="navbar-nav mx-auto">
                    <li class="nav-item me-1">
                        <a class="nav-link position-relative fw-semibold active" href="index.php" 
                           style="color: #3B82F6; padding: 8px 12px; border-radius: 25px; transition: all 0.3s ease; font-size: 0.85rem;">
                            <i class="fas fa-home me-1"></i>nav_home                            <span class="nav-indicator" style="position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 80%; height: 2px; background: linear-gradient(135deg, #00529b, #0088cc); transition: width 0.3s ease;"></span>
                        </a>
                    </li>
                    <li class="nav-item me-1">
                        <a class="nav-link position-relative fw-semibold" href="pages/doctors.php" 
                           style="color: #3B82F6; padding: 8px 12px; border-radius: 25px; transition: all 0.3s ease; font-size: 0.85rem;">
                            <i class="fas fa-user-md me-1"></i>nav_find_doctors                            <span class="nav-indicator" style="position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 0; height: 2px; background: linear-gradient(135deg, #00529b, #0088cc); transition: width 0.3s ease;"></span>
                        </a>
                    </li>
                    <li class="nav-item me-1">
                        <a class="nav-link position-relative fw-semibold" href="pages/specialties.php" 
                           style="color: #3B82F6; padding: 8px 12px; border-radius: 25px; transition: all 0.3s ease; font-size: 0.85rem;">
                            <i class="fas fa-stethoscope me-1"></i>nav_specialties                            <span class="nav-indicator" style="position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 0; height: 2px; background: linear-gradient(135deg, #00529b, #0088cc); transition: width 0.3s ease;"></span>
                        </a>
                    </li>
                    <li class="nav-item me-1">
                        <a class="nav-link position-relative fw-semibold" href="pages/about.php" 
                           style="color: #3B82F6; padding: 8px 12px; border-radius: 25px; transition: all 0.3s ease; font-size: 0.85rem;">
                            <i class="fas fa-info-circle me-1"></i>nav_about                            <span class="nav-indicator" style="position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 0; height: 2px; background: linear-gradient(135deg, #00529b, #0088cc); transition: width 0.3s ease;"></span>
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link position-relative fw-semibold" href="pages/contact.php" 
                           style="color: #3B82F6; padding: 8px 12px; border-radius: 25px; transition: all 0.3s ease; font-size: 0.85rem;">
                            <i class="fas fa-envelope me-1"></i>nav_contact                            <span class="nav-indicator" style="position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 0; height: 2px; background: linear-gradient(135deg, #00529b, #0088cc); transition: width 0.3s ease;"></span>
                        </a>
                    </li>
                </ul>

                <!-- Auth Section -->
                <div class="navbar-nav ms-2 align-items-center" style="flex-shrink: 0; flex-wrap: nowrap;">
                                            <!-- Login/Signup Buttons -->
                        <a class="nav-link me-1 fw-semibold position-relative" href="pages/login.php" 
                           style="color: #3B82F6; padding: 7px 12px; border-radius: 25px; transition: all 0.3s ease; font-size: 0.8rem;">
                            <i class="fas fa-sign-in-alt me-1"></i>nav_login                            <span class="nav-indicator" style="position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 0; height: 2px; background: linear-gradient(135deg, #00529b, #0088cc); transition: width 0.3s ease;"></span>
                        </a>
                        <a class="btn btn-primary fw-semibold position-relative overflow-hidden" href="pages/register.php" 
                           style="background: linear-gradient(135deg, #00529b, #3B82F6); border: none; padding: 7px 16px; border-radius: 25px; transition: all 0.3s ease; font-size: 0.8rem;">
                            <i class="fas fa-user-plus me-1"></i>nav_signup                            <span class="btn-hover-effect" style="position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(135deg, #0088cc, #00529b); transition: left 0.3s ease; z-index: -1;"></span>
                        </a>
                    
                    <!-- COUNTRY LANGUAGE SELECTOR - DESKTOP with Abbreviation -->
                    <div class="country-selector desktop-only" style="margin-left: 4px;">
                        <button class="lang-btn" type="button" id="countryDropdown" data-bs-toggle="dropdown" aria-expanded="false">
                            <img src="https://flagcdn.com/w40/ng.png" alt="EN" class="flag-icon" id="currentCountryFlag">
                            <span class="country-abbr" id="currentCountryAbbr">EN</span>
                            <i class="fas fa-chevron-down lang-arrow"></i>
                        </button>
                        <div class="country-dropdown" aria-labelledby="countryDropdown">
                                                        <a href="?lang=en" class="country-item active" data-country="English" data-lang="en" data-code="EN" data-flag="https://flagcdn.com/w40/ng.png">
                                <img src="https://flagcdn.com/w40/ng.png" alt="English">
                                <span>
                                    <span class="country-name">English</span>
                                    <span class="country-lang">English</span>
                                </span>
                                <span class="country-code">EN</span>
                                                                <span class="check-mark"><i class="fas fa-check"></i></span>
                                                            </a>
                                                        <a href="?lang=fr" class="country-item " data-country="French" data-lang="fr" data-code="FR" data-flag="https://flagcdn.com/w40/fr.png">
                                <img src="https://flagcdn.com/w40/fr.png" alt="French">
                                <span>
                                    <span class="country-name">French</span>
                                    <span class="country-lang">Français</span>
                                </span>
                                <span class="country-code">FR</span>
                                                            </a>
                                                        <a href="?lang=es" class="country-item " data-country="Spanish" data-lang="es" data-code="ES" data-flag="https://flagcdn.com/w40/es.png">
                                <img src="https://flagcdn.com/w40/es.png" alt="Spanish">
                                <span>
                                    <span class="country-name">Spanish</span>
                                    <span class="country-lang">Español</span>
                                </span>
                                <span class="country-code">ES</span>
                                                            </a>
                                                        <a href="?lang=pt" class="country-item " data-country="Portuguese" data-lang="pt" data-code="PT" data-flag="https://flagcdn.com/w40/pt.png">
                                <img src="https://flagcdn.com/w40/pt.png" alt="Portuguese">
                                <span>
                                    <span class="country-name">Portuguese</span>
                                    <span class="country-lang">Português</span>
                                </span>
                                <span class="country-code">PT</span>
                                                            </a>
                                                        <a href="?lang=ar" class="country-item " data-country="Arabic" data-lang="ar" data-code="SA" data-flag="https://flagcdn.com/w40/sa.png">
                                <img src="https://flagcdn.com/w40/sa.png" alt="Arabic">
                                <span>
                                    <span class="country-name">Arabic</span>
                                    <span class="country-lang">العربية</span>
                                </span>
                                <span class="country-code">SA</span>
                                                            </a>
                                                        <a href="?lang=zh" class="country-item " data-country="Chinese" data-lang="zh" data-code="CN" data-flag="https://flagcdn.com/w40/cn.png">
                                <img src="https://flagcdn.com/w40/cn.png" alt="Chinese">
                                <span>
                                    <span class="country-name">Chinese</span>
                                    <span class="country-lang">中文</span>
                                </span>
                                <span class="country-code">CN</span>
                                                            </a>
                                                        <a href="?lang=de" class="country-item " data-country="German" data-lang="de" data-code="DE" data-flag="https://flagcdn.com/w40/de.png">
                                <img src="https://flagcdn.com/w40/de.png" alt="German">
                                <span>
                                    <span class="country-name">German</span>
                                    <span class="country-lang">Deutsch</span>
                                </span>
                                <span class="country-code">DE</span>
                                                            </a>
                                                    </div>
                    </div>
                </div>
            </div>

            <!-- Mobile User Menu - FIXED (placed outside main navbar-collapse) -->
                    </div>
    </nav>    

    <!-- Rest of your index.php content with translations -->
    <!-- Hero Section -->
    <section class="hero-section text-center" style="margin-top: 76px;">
        <div class="container">
            <h1 class="display-4 fw-bold mb-4">hero_title</h1>
            <p class="lead mb-4 fs-5">hero_subtitle</p>
            <div class="row justify-content-center">
                <div class="col-md-8">
                    <!-- Search Box -->
                    <form method="POST" action="includes/search_process.php" class="mb-4">
                        <div class="input-group input-group-lg">
                            <input type="text" name="search_query" class="form-control border-0" placeholder="hero_search_placeholder" required>
                            <button class="btn btn-warning px-4" type="submit">
                                <i class="fas fa-search me-2"></i> hero_search_button                            </button>
                        </div>
                        <div class="mt-3">
                            <small class="text-light"><strong>hero_popular_searches:</strong> 
                                <a href="pages/search_results.php?query=orthopedic" class="text-warning text-decoration-none">Orthopedic Surgery</a> • 
                                <a href="pages/search_results.php?query=cardiology" class="text-warning text-decoration-none">Cardiology</a> • 
                                <a href="pages/search_results.php?query=anesthesiology" class="text-warning text-decoration-none">Anesthesiology</a> • 
                                <a href="pages/search_results.php?query=general practice" class="text-warning text-decoration-none">General Practice</a>
                            </small>
                        </div>
                    </form>

                    <!-- NEW BOOK A DOCTOR BUTTON - NOW WITH GLOW EFFECT -->
                    <div class="mt-3">
                        <a href="pages/doctors.php" class="hero-book-btn">
                            <i class="fas fa-calendar-check"></i> hero_book_doctor                            <span class="btn-sub-text">hero_book_subtext</span>
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </section>

    
     <!-- ============================================
         NEW FREE PROMOTION SECTION
         ============================================ -->
    <section class="free-promo-section">
        <div class="container">
            <div class="free-promo-content">
                <div class="free-promo-badge">
                    promo_badge                </div>
                
                <h2 class="free-promo-title">
                    promo_title                </h2>
                
                <p class="free-promo-subtitle">
                    promo_subtitle                </p>
                
                <div class="free-promo-features">
                    <span class="free-promo-feature-item">
                        <i class="fas fa-check-circle"></i> promo_feature_1                    </span>
                    <span class="free-promo-feature-item">
                        <i class="fas fa-check-circle"></i> promo_feature_2                    </span>
                    <span class="free-promo-feature-item">
                        <i class="fas fa-check-circle"></i> promo_feature_3                    </span>
                    <span class="free-promo-feature-item">
                        <i class="fas fa-check-circle"></i> promo_feature_4                    </span>
                </div>
                
                <a href="pages/register.php" class="free-promo-btn">
                    <i class="fas fa-gem"></i> promo_button                </a>
                
                <div class="free-promo-timer">
                    <div class="timer-item">
                        <span class="timer-number">3</span>
                        <span class="timer-label">promo_timer_months</span>
                    </div>
                    <div class="timer-item">
                        <span class="timer-number">⏳</span>
                        <span class="timer-label">promo_timer_free</span>
                    </div>
                    <div class="timer-item">
                        <span class="timer-number">✅</span>
                        <span class="timer-label">promo_timer_signup</span>
                    </div>
                </div>
            </div>
        </div>
    </section>
    
    <!-- Specialties Section -->
    <section class="py-5 bg-light">
        <div class="container">
            <div class="text-center mb-5">
                <h2 class="fw-bold display-5 mb-3">specialties_title</h2>
                <p class="text-muted fs-5">specialties_subtitle</p>
            </div>
            <div class="row g-4">
                <div class="col-md-3">
                    <div class="card specialty-card h-100 text-center p-4">
                        <div class="feature-icon">
                            <i class="fas fa-bone fa-2x text-white"></i>
                        </div>
                        <h5 class="card-title fw-bold">specialty_orthopedic</h5>
                        <p class="card-text text-muted">specialty_orthopedic_desc</p>
                        <div class="mt-auto">
                            <small class="text-primary fw-bold">specialty_orthopedic_cred</small>
                        </div>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="card specialty-card h-100 text-center p-4">
                        <div class="feature-icon">
                            <i class="fas fa-heart fa-2x text-white"></i>
                        </div>
                        <h5 class="card-title fw-bold">specialty_cardiology</h5>
                        <p class="card-text text-muted">specialty_cardiology_desc</p>
                        <div class="mt-auto">
                            <small class="text-primary fw-bold">specialty_cardiology_cred</small>
                        </div>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="card specialty-card h-100 text-center p-4">
                        <div class="feature-icon">
                            <i class="fas fa-procedures fa-2x text-white"></i>
                        </div>
                        <h5 class="card-title fw-bold">specialty_anesthesiology</h5>
                        <p class="card-text text-muted">specialty_anesthesiology_desc</p>
                        <div class="mt-auto">
                            <small class="text-primary fw-bold">specialty_anesthesiology_cred</small>
                        </div>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="card specialty-card h-100 text-center p-4">
                        <div class="feature-icon">
                            <i class="fas fa-user-md fa-2x text-white"></i>
                        </div>
                        <h5 class="card-title fw-bold">specialty_general</h5>
                        <p class="card-text text-muted">specialty_general_desc</p>
                        <div class="mt-auto">
                            <small class="text-primary fw-bold">specialty_general_cred</small>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- How It Works -->
    <section class="py-5">
        <div class="container">
            <div class="text-center mb-5">
                <h2 class="fw-bold display-5 mb-3">how_title</h2>
                <p class="text-muted fs-5">how_subtitle</p>
            </div>
            <div class="row g-4">
                <div class="col-md-4 text-center">
                    <div class="bg-primary text-white rounded-circle d-inline-flex align-items-center justify-content-center mb-3" style="width: 100px; height: 100px;">
                        <i class="fas fa-search fa-3x"></i>
                    </div>
                    <h4 class="fw-bold">how_step1_title</h4>
                    <p class="text-muted">how_step1_desc</p>
                </div>
                <div class="col-md-4 text-center">
                    <div class="bg-success text-white rounded-circle d-inline-flex align-items-center justify-content-center mb-3" style="width: 100px; height: 100px;">
                        <i class="fas fa-calendar-check fa-3x"></i>
                    </div>
                    <h4 class="fw-bold">how_step2_title</h4>
                    <p class="text-muted">how_step2_desc</p>
                </div>
                <div class="col-md-4 text-center">
                    <div class="bg-warning text-white rounded-circle d-inline-flex align-items-center justify-content-center mb-3" style="width: 100px; height: 100px;">
                        <i class="fas fa-video fa-3x"></i>
                    </div>
                    <h4 class="fw-bold">how_step3_title</h4>
                    <p class="text-muted">how_step3_desc</p>
                </div>
            </div>
        </div>
    </section>

    <!-- Stats Section -->
    <section class="py-5 stats-section">
        <div class="container">
            <div class="row text-center">
                <div class="col-md-3">
                    <h2 class="fw-bold display-4">50+</h2>
                    <p class="fs-5">stats_doctors</p>
                </div>
                <div class="col-md-3">
                    <h2 class="fw-bold display-4">2,000+</h2>
                    <p class="fs-5">stats_patients</p>
                </div>
                <div class="col-md-3">
                    <h2 class="fw-bold display-4">95%</h2>
                    <p class="fs-5">stats_satisfaction</p>
                </div>
                <div class="col-md-3">
                    <h2 class="fw-bold display-4">24/7</h2>
                    <p class="fs-5">stats_support</p>
                </div>
            </div>
        </div>
    </section>

    <!-- Video Section -->
    <section class="py-5 bg-light">
        <div class="container">
            <div class="row align-items-center">
                <div class="col-md-6">
                    <h2 class="fw-bold display-5 mb-4">why_title</h2>
                    <ul class="list-unstyled fs-5">
                        <li class="mb-3"><i class="fas fa-check-circle text-success me-2"></i> why_point1</li>
                        <li class="mb-3"><i class="fas fa-check-circle text-success me-2"></i> why_point2</li>
                        <li class="mb-3"><i class="fas fa-check-circle text-success me-2"></i> why_point3</li>
                        <li class="mb-3"><i class="fas fa-check-circle text-success me-2"></i> why_point4</li>
                        <li class="mb-3"><i class="fas fa-check-circle text-success me-2"></i> why_point5</li>
                        <li class="mb-3"><i class="fas fa-check-circle text-success me-2"></i> why_point6</li>
                    </ul>
                    <div class="mt-4">
                        <a href="pages/register.php" class="btn btn-primary btn-lg me-3">why_button_start</a>
                        <a href="pages/about.php" class="btn btn-outline-primary btn-lg">why_button_learn</a>
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="ratio ratio-16x9 rounded-3 shadow">
                        <iframe src="https://www.youtube.com/embed/LA-wIj0895s" title="Medical Connect Nigeria - Quality Healthcare" allowfullscreen></iframe>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Testimonials -->
    <section class="py-5">
        <div class="container">
            <div class="text-center mb-5">
                <h2 class="fw-bold display-5 mb-3">testimonials_title</h2>
                <p class="text-muted fs-5">testimonials_subtitle</p>
            </div>
            <div class="row g-4">
                <div class="col-md-4">
                    <div class="card h-100 border-0 shadow-sm">
                        <div class="card-body text-center p-4">
                            <div class="text-warning mb-3">
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star"></i>
                            </div>
                            <p class="card-text fst-italic">testimonial_1_text</p>
                            <h6 class="fw-bold mt-3">testimonial_1_author</h6>
                        </div>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="card h-100 border-0 shadow-sm">
                        <div class="card-body text-center p-4">
                            <div class="text-warning mb-3">
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star"></i>
                            </div>
                            <p class="card-text fst-italic">testimonial_2_text</p>
                            <h6 class="fw-bold mt-3">testimonial_2_author</h6>
                        </div>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="card h-100 border-0 shadow-sm">
                        <div class="card-body text-center p-4">
                            <div class="text-warning mb-3">
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star"></i>
                            </div>
                            <p class="card-text fst-italic">testimonial_3_text</p>
                            <h6 class="fw-bold mt-3">testimonial_3_author</h6>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- CTA Section -->
    <section class="py-5 bg-primary text-white">
        <div class="container text-center">
            <h2 class="fw-bold display-5 mb-3">cta_title</h2>
            <p class="fs-5 mb-4">cta_subtitle</p>
            <div class="d-flex justify-content-center gap-3 flex-wrap">
                <a href="pages/register.php" class="btn btn-warning btn-lg px-5 py-3 fw-bold">cta_button_signup</a>
                <a href="pages/doctors.php" class="btn btn-outline-light btn-lg px-5 py-3 fw-bold">cta_button_find</a>
            </div>
        </div>
    </section>

    <!-- Footer -->
    <footer class="bg-dark text-white py-5">
        <div class="container">
            <div class="row">
                <div class="col-md-4">
                    <h5 class="fw-bold">Medical Connect Nigeria</h5>
                    <p class="text-light">footer_tagline</p>
                    <div class="d-flex gap-3 mt-3">
                        <a href="#" class="text-light"><i class="fab fa-facebook fa-2x"></i></a>
                        <a href="#" class="text-light"><i class="fab fa-twitter fa-2x"></i></a>
                        <a href="#" class="text-light"><i class="fab fa-instagram fa-2x"></i></a>
                        <a href="#" class="text-light"><i class="fab fa-linkedin fa-2x"></i></a>
                    </div>
                </div>
                <div class="col-md-2">
                    <h6 class="fw-bold">footer_quick_links</h6>
                    <ul class="list-unstyled">
                        <li><a href="index.php" class="text-light text-decoration-none">nav_home</a></li>
                        <li><a href="pages/doctors.php" class="text-light text-decoration-none">nav_find_doctors</a></li>
                        <li><a href="pages/specialties.php" class="text-light text-decoration-none">nav_specialties</a></li>
                        <li><a href="pages/about.php" class="text-light text-decoration-none">nav_about</a></li>
                    </ul>
                </div>
                <div class="col-md-3">
                    <h6 class="fw-bold">footer_contact</h6>
                    <p><i class="fas fa-phone me-2"></i> +234 800 000 0000</p>
                    <p><i class="fas fa-envelope me-2"></i> info@medicalconnectng.com</p>
                    <p><i class="fas fa-map-marker-alt me-2"></i> Lagos, Nigeria</p>
                </div>
                <div class="col-md-3">
                    <h6 class="fw-bold">footer_newsletter</h6>
                    <p>footer_newsletter_sub</p>
                    <div class="input-group">
                        <input type="email" class="form-control" placeholder="Your email">
                        <button class="btn btn-primary">footer_subscribe</button>
                    </div>
                </div>
            </div>
            <hr class="my-4">
            <div class="text-center">
                <p>&copy; 2026 Medical Connect Nigeria. footer_copyright | <a href="#" class="text-light text-decoration-none">footer_privacy</a> | <a href="#" class="text-light text-decoration-none">footer_terms</a></p>
            </div>
        </div>
    </footer>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    <script>
        // Navbar scroll effect
        window.addEventListener('scroll', function() {
            const navbar = document.querySelector('.navbar');
            if (window.scrollY > 50) {
                navbar.classList.add('scrolled');
            } else {
                navbar.classList.remove('scrolled');
            }
        });

        // Smooth scrolling for anchor links
        document.querySelectorAll('a[href^="#"]').forEach(anchor => {
            anchor.addEventListener('click', function (e) {
                e.preventDefault();
                const target = document.querySelector(this.getAttribute('href'));
                if (target) {
                    target.scrollIntoView({
                        behavior: 'smooth',
                        block: 'start'
                    });
                }
            });
        });

        // Active link highlighting
        const currentLocation = location.href;
        const menuItems = document.querySelectorAll('.nav-link');
        const menuLength = menuItems.length;
        
        for (let i = 0; i < menuLength; i++) {
            if (menuItems[i].href === currentLocation) {
                menuItems[i].classList.add('active');
            }
        }

        // Add hover sound effect (optional)
        document.querySelectorAll('.nav-link, .btn-primary').forEach(item => {
            item.addEventListener('mouseenter', function() {
                this.style.transform = 'translateY(-2px)';
            });
            
            item.addEventListener('mouseleave', function() {
                this.style.transform = 'translateY(0)';
            });
        });

        // Mobile menu collapse functionality - FIXED
        document.querySelector('.navbar-toggler').addEventListener('click', function() {
            const userMenu = document.getElementById('mobileUserMenu');
            if (userMenu && userMenu.classList.contains('show')) {
                const bsCollapse = new bootstrap.Collapse(userMenu);
                bsCollapse.hide();
            }
        });

        // Close main menu when user menu opens - FIXED
        document.querySelector('.mobile-user-avatar')?.addEventListener('click', function(e) {
            e.stopPropagation();
            
            const mainMenu = document.getElementById('navbarNav');
            if (mainMenu && mainMenu.classList.contains('show')) {
                const bsCollapse = new bootstrap.Collapse(mainMenu);
                bsCollapse.hide();
            }
        });

        // Close mobile menus when clicking outside
        document.addEventListener('click', function(e) {
            const navbar = document.querySelector('.navbar');
            const navbarNav = document.getElementById('navbarNav');
            const mobileUserMenu = document.getElementById('mobileUserMenu');
            const mobileUserAvatar = document.querySelector('.mobile-user-avatar');
            const navbarToggler = document.querySelector('.navbar-toggler');

            // Check if click is outside the navbar or on non-menu elements
            const isClickInsideNavbar = navbar.contains(e.target);
            const isClickOnNavbarToggler = navbarToggler && navbarToggler.contains(e.target);
            const isClickOnUserAvatar = mobileUserAvatar && mobileUserAvatar.contains(e.target);

            // If click is outside navbar, close both menus
            if (!isClickInsideNavbar) {
                if (navbarNav && navbarNav.classList.contains('show')) {
                    const bsCollapse = new bootstrap.Collapse(navbarNav);
                    bsCollapse.hide();
                }
                if (mobileUserMenu && mobileUserMenu.classList.contains('show')) {
                    const bsCollapse = new bootstrap.Collapse(mobileUserMenu);
                    bsCollapse.hide();
                }
                return;
            }

            // If click is inside navbar but not on toggle elements, handle menu closing
            if (isClickInsideNavbar && !isClickOnNavbarToggler && !isClickOnUserAvatar) {
                // Close user menu if main nav link is clicked
                if (mobileUserMenu && mobileUserMenu.classList.contains('show') && 
                    e.target.closest('.nav-link')) {
                    const bsCollapse = new bootstrap.Collapse(mobileUserMenu);
                    bsCollapse.hide();
                }
                
                // Close main menu if user menu item is clicked
                if (navbarNav && navbarNav.classList.contains('show') && 
                    e.target.closest('.user-dropdown-item')) {
                    const bsCollapse = new bootstrap.Collapse(navbarNav);
                    bsCollapse.hide();
                }
            }
        });

        // Close mobile menus when window is resized to desktop size
        window.addEventListener('resize', function() {
            if (window.innerWidth >= 992) {
                const navbarNav = document.getElementById('navbarNav');
                const mobileUserMenu = document.getElementById('mobileUserMenu');
                
                if (navbarNav && navbarNav.classList.contains('show')) {
                    const bsCollapse = new bootstrap.Collapse(navbarNav);
                    bsCollapse.hide();
                }
                
                if (mobileUserMenu && mobileUserMenu.classList.contains('show')) {
                    const bsCollapse = new bootstrap.Collapse(mobileUserMenu);
                    bsCollapse.hide();
                }
            }
        });

        // ============================================
        // COUNTRY LANGUAGE SELECTOR FUNCTIONALITY
        // ============================================
        document.addEventListener('DOMContentLoaded', function() {
            // Desktop Country Selector
            const countryItems = document.querySelectorAll('.country-item');
            const currentCountryFlag = document.getElementById('currentCountryFlag');
            const currentCountryAbbr = document.getElementById('currentCountryAbbr');

            // Handle country selection - allow navigation
            countryItems.forEach(item => {
                item.addEventListener('click', function(e) {
                    // The href will handle navigation, but we update UI first
                    const code = this.dataset.lang;
                    
                    // Update flag and abbreviation for immediate visual feedback
                    if (currentCountryFlag && this.dataset.flag) {
                        currentCountryFlag.src = this.dataset.flag;
                    }
                    if (currentCountryAbbr && this.dataset.code) {
                        currentCountryAbbr.textContent = this.dataset.code;
                    }
                    
                    // Also update mobile
                    const mobileFlag = document.getElementById('mobileCountryFlag');
                    const mobileCode = document.getElementById('mobileCountryCode');
                    if (mobileFlag && this.dataset.flag) {
                        mobileFlag.src = this.dataset.flag;
                    }
                    if (mobileCode && this.dataset.code) {
                        mobileCode.textContent = this.dataset.code;
                    }
                });
            });

            // Toggle desktop dropdown
            const langBtn = document.querySelector('.lang-btn');
            const langDropdown = document.querySelector('.country-dropdown');
            
            if (langBtn && langDropdown) {
                langBtn.addEventListener('click', function(e) {
                    e.stopPropagation();
                    langDropdown.classList.toggle('show');
                });
                
                document.addEventListener('click', function(e) {
                    if (!langBtn.contains(e.target) && !langDropdown.contains(e.target)) {
                        langDropdown.classList.remove('show');
                    }
                });
            }

            // ============================================
            // MOBILE COUNTRY SELECTOR
            // ============================================
            const mobileCountryBtn = document.getElementById('mobileCountryDropdown');
            const mobileCountryDropdown = document.querySelector('.mobile-country-dropdown');

            if (mobileCountryBtn && mobileCountryDropdown) {
                mobileCountryBtn.addEventListener('click', function(e) {
                    e.stopPropagation();
                    mobileCountryDropdown.classList.toggle('show');
                });

                document.addEventListener('click', function(e) {
                    if (!mobileCountryBtn.contains(e.target) && !mobileCountryDropdown.contains(e.target)) {
                        mobileCountryDropdown.classList.remove('show');
                    }
                });
            }
        });
    </script>
</body>
</html>