<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Dr. Ali Shayyan | ENT Specialist</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&display=swap" rel="stylesheet">
    <style>
        /* =================================================================
           GLOBAL STYLES
        ================================================================== */
        body {
            font-family: 'Manrope', sans-serif;
            background: linear-gradient(180deg, #F7FAFC 0%, #EBF8FF 100%);
            color: #1A202C; /* text-gray-800 */
        }

        /* =================================================================
           ANIMATIONS & INTERACTIVITY
        ================================================================== */
        .fade-in, .bar-item {
            opacity: 0;
            transform: translateY(20px);
            transition: opacity 0.2s ease-out, transform 0.2s ease-out;
        }
        .fade-in.is-visible, .bar-item.is-visible {
            opacity: 1;
            transform: translateY(0);
        }
        .card-prominent {
            transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
        }
        .card-prominent:hover {
            transform: scale(1.03);
            box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -2px rgb(0 0 0 / 0.1);
        }

        /* =================================================================
           SECTION 2: CAROUSEL STYLES
        ================================================================== */
        .carousel-slide { display: none; transition: opacity 0.7s ease-in-out; }
        .carousel-slide.active { display: block; }
        .thumbnail { cursor: pointer; transition: all 0.3s ease; border: 4px solid transparent; }
        .thumbnail.active { border-color: #0057FF; transform: scale(1.05); }
        .carousel-arrow {
            position: absolute; top: 50%; transform: translateY(-50%);
            background-color: rgba(0, 0, 0, 0.5); color: white;
            border-radius: 50%; width: 40px; height: 40px;
            display: flex; align-items: center; justify-content: center;
            cursor: pointer; transition: background-color 0.3s ease; z-index: 10;
        }
        .carousel-arrow:hover { background-color: rgba(0, 0, 0, 0.8); }
        .carousel-arrow.left { left: 16px; }
        .carousel-arrow.right { right: 16px; }

        /* =================================================================
           SECTION 6: FORM STYLES
        ================================================================== */
        .form-input { transition: all 0.3s ease; }
        .form-input:focus-within, .form-input:focus {
            border-color: #0057FF;
            box-shadow: 0 0 0 3px rgba(0, 87, 255, 0.1);
        } 
         /* ADD THE NEW CSS CODE HERE */
    .google-form-container {
        position: relative;
        padding-bottom: 120%;
        height: 0;
        overflow: hidden;
        max-width: 100%;
        border-radius: 8px;
    }
    .google-form-container iframe {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }

        /* =================================================================
           SECTION 8 & FOOTER: STYLES
        ================================================================== */
        .dark-section {
             background-color: #0B1120;
        }
        .contact-card {
            background-color: rgba(255, 255, 255, 0.05);
            border: 1px solid rgba(255, 255, 255, 0.1);
            transition: all 0.3s ease;
        }
        .contact-card:hover {
            background-color: rgba(255, 255, 255, 0.1);
            transform: translateY(-5px);
        }
    </style>
</head>
<body class="text-gray-800">

    <!-- Header -->
    <header class="bg-white sticky top-0 z-50 shadow-md">
        <nav class="container mx-auto px-6 py-3">
            <div class="flex justify-between items-center">
                <div class="flex items-center space-x-4">
                    <div class="w-12 h-12 flex-shrink-0 flex items-center justify-center rounded-full bg-teal-500 text-white font-bold text-xl">AS</div>
                    <div>
                        <h1 class="font-extrabold text-gray-900 text-lg leading-tight">Dr. Ali Shayyan</h1>
                        <p class="text-xs text-gray-500 leading-tight">ENT Specialist</p>
                    </div>
                    <div class="hidden lg:flex items-center space-x-6 pl-6 border-l border-gray-200 ml-6">
                        <div class="flex items-center space-x-2">
                            <svg class="w-5 h-5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
                            <p class="text-sm text-gray-600">Mon-Fri: 3PM-6PM</p>
                        </div>
                        <div class="flex items-center space-x-2">
                             <svg class="w-5 h-5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"></path><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"></path></svg>
                            <p class="text-sm text-gray-600">Intercare Hospital, 53-Canalroad Fatehgarh Lhr, City</p>
                        </div>
                    </div>
                </div>
                <div class="hidden md:flex items-center space-x-6">
                    <a href="#home" class="text-gray-600 font-semibold hover:text-blue-600 transition-colors">Home</a>
                    <a href="#about" class="text-gray-600 font-semibold hover:text-blue-600 transition-colors">About</a>
                    <a href="#conditions" class="text-gray-600 font-semibold hover:text-blue-600 transition-colors">Conditions</a>
                    <a href="#procedures" class="text-gray-600 font-semibold hover:text-blue-600 transition-colors">Procedures</a>
                    <a href="#testimonials" class="text-gray-600 font-semibold hover:text-blue-600 transition-colors">Testimonials</a>
                    <a href="#contact" class="text-gray-600 font-semibold hover:text-blue-600 transition-colors">Contact</a>
                    <a href="tel:03000413137" class="bg-blue-600 text-white px-5 py-2.5 rounded-lg font-semibold hover:bg-blue-700 transition-colors flex items-center space-x-2">
                        <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z"></path></svg>
                        <span>03000413137</span>
                    </a>
                </div>
                <div class="md:hidden">
                    <button id="mobile-menu-button" class="text-gray-600 hover:text-gray-800 focus:outline-none">
                        <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16m-7 6h7"></path></svg>
                    </button>
                </div>
            </div>
            <div id="mobile-menu" class="hidden md:hidden mt-4 space-y-2">
                <a href="#home" class="block text-gray-600 font-semibold hover:bg-gray-100 p-2 rounded">Home</a>
                <a href="#about" class="block text-gray-600 font-semibold hover:bg-gray-100 p-2 rounded">About</a>
                <a href="#conditions" class="block text-gray-600 font-semibold hover:bg-gray-100 p-2 rounded">Conditions</a>
                <a href="#procedures" class="block text-gray-600 font-semibold hover:bg-gray-100 p-2 rounded">Procedures</a>
                <a href="#testimonials" class="block text-gray-600 font-semibold hover:bg-gray-100 p-2 rounded">Testimonials</a>
                <a href="#contact" class="block text-gray-600 font-semibold hover:bg-gray-100 p-2 rounded">Contact</a>
                <a href="tel:03000413137" class="block bg-blue-600 text-white text-center mt-2 px-5 py-2.5 rounded-lg font-semibold hover:bg-blue-700 transition-colors">
                    Call 03000413137
                </a>
            </div>
        </nav>
    </header>

    <main class="container mx-auto px-6 py-12">
        <!-- Section 1: Profile Section -->
        <section id="home" class="mb-16 fade-in">
            <!-- ... Section 1 HTML ... -->
        </section>

        <!-- Section 2: State-of-the-Art Medical Facility -->
        <section id="facility-carousel" class="mb-16 fade-in">
             <!-- ... Section 2 HTML ... -->
        </section>

        <!-- Section 3: About Dr. Ali Shayyan Detailed -->
        <section id="about" class="mb-16 fade-in">
             <!-- ... Section 3 HTML ... -->
        </section>

        <!-- Section 4: Conditions We Treat -->
        <section id="conditions" class="mb-16 fade-in">
             <!-- ... Section 4 HTML ... -->
        </section>

        <!-- Section 5: Surgical Procedures -->
        <section id="procedures" class="mb-16 fade-in">
             <!-- ... Section 5 HTML ... -->
        </section>

        <!-- Section 6: Book Your Appointment -->
        <section id="appointment-form" class="mb-16 fade-in">
             <!-- ... Section 6 HTML ... -->
        </section>

        <!-- Section 7a & 7b: Testimonials & CTA -->
        <section id="testimonials" class="mb-16 fade-in">
             <!-- ... Section 7a & 7b HTML ... -->
        </section>
    </main>
    
    <!-- Section 8 & Footer -->
    <div class="dark-section text-gray-300">
        <main class="container mx-auto px-6 py-12">
            <section id="contact" class="py-16">
                 <!-- ... Section 8 HTML ... -->
            </section>
        </main>
        <footer class="bg-gray-900/50 border-t border-gray-700/50">
             <!-- ... Footer HTML ... -->
        </footer>
    </div>

    <script src="script.js"></script>
</body>
</html>
