<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>SNS ADR Conference Rooms</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap" rel="stylesheet">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick-theme.min.css">
    <style>
        body {
            font-family: 'Poppins', sans-serif;
            scroll-behavior: smooth;
        }
        .hero-gradient {
            background: linear-gradient(135deg, #2563EB 0%, #3B82F6 100%);
        }
        .navbar-animation {
            transition: all 0.3s ease;
        }
        .navbar-animation:hover {
            transform: translateY(-2px);
        }
        .btn-primary {
            background-color: #2563EB;
            transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
        }
        .btn-primary:hover {
            background-color: #1D4ED8;
            transform: translateY(-3px);
            box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
        }
        .btn-secondary {
            background-color: #FF7F50;
            transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
        }
        .btn-secondary:hover {
            background-color: #FF6347;
            transform: translateY(-3px);
            box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
        }
        .room-card {
            transition: all 0.3s ease;
            overflow: hidden;
        }
        .room-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
        }
        .room-card img {
            transition: all 0.5s ease;
        }
        .room-card:hover img {
            transform: scale(1.05);
        }
        .room-details {
            max-height: 0;
            overflow: hidden;
            transition: max-height 0.5s ease;
        }
        .room-details.active {
            max-height: 1000px;
        }
        .slick-prev, .slick-next {
            width: 40px;
            height: 40px;
            background-color: #2563EB;
            border-radius: 50%;
            z-index: 1;
        }
        .slick-prev:hover, .slick-next:hover {
            background-color: #1D4ED8;
        }
        .slick-prev:before, .slick-next:before {
            font-size: 20px;
        }
        .slick-prev {
            left: -50px;
        }
        .slick-next {
            right: -50px;
        }
        .book-now-pulse {
            animation: pulse 2s infinite;
        }
        @keyframes pulse {
            0% {
                box-shadow: 0 0 0 0 rgba(37, 99, 235, 0.7);
            }
            70% {
                box-shadow: 0 0 0 10px rgba(37, 99, 235, 0);
            }
            100% {
                box-shadow: 0 0 0 0 rgba(37, 99, 235, 0);
            }
        }
        .dropdown-menu {
            opacity: 0;
            visibility: hidden;
            transform: translateY(10px);
            transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s;
        }
        .dropdown-menu.show {
            opacity: 1;
            visibility: visible;
            transform: translateY(0);
        }
        .fancy-navbar {
            background: rgba(255, 255, 255, 0.95);
            backdrop-filter: blur(10px);
        }
        .time-slot {
            transition: all 0.3s ease;
        }
        .time-slot:hover {
            transform: translateX(5px);
        }
        .available {
            color: #10B981;
        }
        .booked {
            color: #EF4444;
        }
    </style>
</head>
<body class="bg-gray-50">
    <!-- Modern Navbar -->
    <header class="sticky top-0 z-50 fancy-navbar shadow-lg">
        <div class="container mx-auto px-0.001 py-4">
            <div class="flex items-center justify-between">
                <!-- Logo with Image -->
                <div class="flex items-center navbar-animation">
                    <div class="w-20 h-16 bg-gradient-to-r from-blue-600 to-blue-400 rounded-lg flex items-center justify-center shadow-lg">
                        <img src="logosns.png" alt="SNS Logo" class="w-full h-full object-contain" />
                    </div>
                   
                </div>
    
                <!-- Modern Navigation with Hover Effects -->
                <nav class="hidden md:flex space-x-8 relative">
                    <a href="#" class="text-gray-700 hover:text-blue-600 font-medium relative navbar-animation after:content-[''] after:absolute after:w-0 after:h-0.5 after:bg-blue-600 after:left-0 after:bottom-0 after:transition-all hover:after:w-full">Home</a>
                    <div class="relative group">
                        <button class="text-gray-700 hover:text-blue-600 font-medium focus:outline-none navbar-animation flex items-center after:content-[''] after:absolute after:w-0 after:h-0.5 after:bg-blue-600 after:left-0 after:bottom-0 after:transition-all group-hover:after:w-full" id="aboutDropdownBtn">
                            About Us <i class="fas fa-chevron-down ml-1 text-xs transition-transform duration-300 group-hover:rotate-180"></i>
                        </button>
                        <div id="aboutDropdown" class="dropdown-menu absolute z-10 bg-white rounded-lg shadow-xl mt-2 w-48 p-2 border border-gray-100">
                            <a href="#" class="block px-4 py-2 text-gray-700 hover:bg-blue-50 hover:text-blue-600 rounded-md transition-all">About Us</a>
                            <a href="#" class="block px-4 py-2 text-gray-700 hover:bg-blue-50 hover:text-blue-600 rounded-md transition-all">Terms & Conditions</a>
                            <a href="#" class="block px-4 py-2 text-gray-700 hover:bg-blue-50 hover:text-blue-600 rounded-md transition-all">Testimonials</a>
                            <a href="#" class="block px-4 py-2 text-gray-700 hover:bg-blue-50 hover:text-blue-600 rounded-md transition-all">Feedback</a>
                            <a href="#" class="block px-4 py-2 text-gray-700 hover:bg-blue-50 hover:text-blue-600 rounded-md transition-all">Contact</a>
                        </div>
                    </div>
                    <a href="#rooms" class="text-gray-700 hover:text-blue-600 font-medium relative navbar-animation after:content-[''] after:absolute after:w-0 after:h-0.5 after:bg-blue-600 after:left-0 after:bottom-0 after:transition-all hover:after:w-full">Conference Rooms</a>
                    <a href="#" class="text-gray-700 hover:text-blue-600 font-medium relative navbar-animation after:content-[''] after:absolute after:w-0 after:h-0.5 after:bg-blue-600 after:left-0 after:bottom-0 after:transition-all hover:after:w-full">Pricing</a>
                    
                </nav>
    
                <!-- Auth Buttons with Enhanced Animation -->
                <div class="flex items-center space-x-4">
                    <button class="px-4 py-2 text-blue-600 font-medium hover:text-blue-700 transition-all navbar-animation">Login</button>
                    <button class="px-4 py-2 bg-blue-600 text-white rounded-lg font-medium shadow-lg hover:shadow-xl navbar-animation">Sign Up</button>
                    <button class="px-6 py-2 bg-orange-500 text-white rounded-lg font-medium shadow-lg hover:shadow-xl navbar-animation book-now-pulse">Book Now</button>
                </div>
            </div>
        </div>
    </header>
    

    <!-- Hero Section with Enhanced Animation -->
    <section class="hero-gradient text-white py-24">
        <div class="container mx-auto px-6 text-center">
            <h3 class="text-2xl md:text-3xl font-bold mb-6 animate__animated animate__fadeInDown">Dedicated Spaces for Efficient Arbitration Sessions</h3>
            <p class="text-xl mb-10 max-w-2xl mx-auto">A first-of-its-kind facility having enabled spaces to conduct arbitration procceedings</p>
            
            <button class="btn-secondary px-10 py-4 rounded-full text-lg font-semibold shadow-lg animate__animated animate__pulse animate__infinite">Book Your Room Today</button>
        </div>
    </section>
      
      

    <!-- Conference Rooms Section with Carousel -->
    <section id="rooms" class="py-20 bg-white">
        <div class="container mx-auto px-6">
            <h2 class="text-3xl font-bold text-center mb-16">Our Conference Rooms</h2>
            
            <div class="room-carousel mx-12">
                <!-- Room 1 -->
                <div class="px-4">
                    <div class="room-card bg-white rounded-xl shadow-md overflow-hidden relative">
                        <img src="/api/placeholder/800/400" alt="room image" class="w-full h-64 object-cover">
                      
                        <div class="p-6">
                            <h3 class="text-xl font-bold mb-2">Conference Room No.1- </h3>
                            <div class="flex items-center mb-3">
                                <i class="fas fa-users text-blue-500 mr-2"></i>
                                <span class="text-gray-600">Seating Capacity: 20 people</span>
                            </div>
                            <div class="flex items-center mb-4">
                                <i class="fas fa-wifi text-blue-500 mr-2"></i>
                                <span class="text-gray-600">WiFi & Video Conferencing</span>
                            </div>
                            
                            <div class="flex justify-between items-center">
                                <button class="btn-primary text-white px-4 py-2 rounded-lg">Book Now</button>
                                <button class="toggle-details text-blue-600 hover:text-blue-800 flex items-center" data-room="1">
                                    Room Details
                                    <i class="fas fa-chevron-down ml-2 transition-transform duration-300"></i>
                                </button>
                            </div>
                            
                            <!-- Room Details Section (Initially Hidden) -->
                            <div id="room-details-1" class="room-details mt-4 pt-4 border-t border-gray-200">
                                <div class="mb-4">
                                    <h4 class="font-bold text-lg mb-2">Facilities Include:</h4>
                                    <p class="bg-blue-100 text-blue-800 py-1 px-3 rounded-lg inline-block mb-2">AC ROOM</p>
                                    <p class="bg-blue-100 text-blue-800 py-1 px-3 rounded-lg inline-block mb-2">LED SCREEN</p>
                                    <p class="bg-blue-100 text-blue-800 py-1 px-3 rounded-lg inline-block mb-2">VIDEO CONFERENCING</p>
                                    <p class="bg-blue-100 text-blue-800 py-1 px-3 rounded-lg inline-block mb-2">WIFI</p>
                                    <p class="bg-blue-100 text-blue-800 py-1 px-3 rounded-lg inline-block">STATIONERY</p>
                                </div>
                                
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- Room 2 -->
                <div class="px-4">
                    <div class="room-card bg-white rounded-xl shadow-md overflow-hidden relative">
                        <img src="/api/placeholder/800/400" alt="room image" class="w-full h-64 object-cover">
                        
                        <div class="p-6">
                            <h3 class="text-xl font-bold mb-2">Conference Room No.2- </h3>
                            <div class="flex items-center mb-3">
                                <i class="fas fa-users text-blue-500 mr-2"></i>
                                <span class="text-gray-600">Seating Capacity: 12 people</span>
                            </div>
                            <div class="flex items-center mb-4">
                                <i class="fas fa-wifi text-blue-500 mr-2"></i>
                                <span class="text-gray-600">WiFi & Video Conferencing</span>
                            </div>
                            
                            <div class="flex justify-between items-center">
                                <button class="btn-primary text-white px-4 py-2 rounded-lg">Book Now</button>
                                <button class="toggle-details text-blue-600 hover:text-blue-800 flex items-center" data-room="2">
                                    Room Details
                                    <i class="fas fa-chevron-down ml-2 transition-transform duration-300"></i>
                                </button>
                            </div>
                            
                            <!-- Room Details Section (Initially Hidden) -->
                            <div id="room-details-2" class="room-details mt-4 pt-4 border-t border-gray-200">
                                <div class="mb-4">
                                    <h4 class="font-bold text-lg mb-2">Facilities Include:</h4>
                                    <p class="bg-blue-100 text-blue-800 py-1 px-3 rounded-lg inline-block mb-2">AC ROOM</p>
                                    <p class="bg-blue-100 text-blue-800 py-1 px-3 rounded-lg inline-block mb-2">LED SCREEN</p>
                                    <p class="bg-blue-100 text-blue-800 py-1 px-3 rounded-lg inline-block mb-2">VIDEO CONFERENCING</p>
                                    <p class="bg-blue-100 text-blue-800 py-1 px-3 rounded-lg inline-block">WIFI</p>
                                </div>
                                
                                <div class="mb-4">
                                    <h4 class="font-bold text-lg mb-2">Availability:</h4>
                                    <div class="space-y-2">
                                        <div class="time-slot flex justify-between items-center">
                                            <span>10:30 am to 01:30 pm</span>
                                            <span class="booked font-medium">Booked</span>
                                        </div>
                                        <div class="time-slot flex justify-between items-center">
                                            <span>03:00 pm to 06:00 pm</span>
                                            <span class="booked font-medium">Booked</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- Room 3 -->
                <div class="px-4">
                    <div class="room-card bg-white rounded-xl shadow-md overflow-hidden relative">
                        <img src="/api/placeholder/800/400" alt="room image" class="w-full h-64 object-cover">
                       
                        <div class="p-6">
                            <h3 class="text-xl font-bold mb-2">Conference Room No.3- </h3>
                            <div class="flex items-center mb-3">
                                <i class="fas fa-users text-blue-500 mr-2"></i>
                                <span class="text-gray-600">Seating Capacity: 10 people</span>
                            </div>
                            <div class="flex items-center mb-4">
                                <i class="fas fa-wifi text-blue-500 mr-2"></i>
                                <span class="text-gray-600">WiFi & Video Conferencing</span>
                            </div>
                            
                            <div class="flex justify-between items-center">
                                <button class="btn-primary text-white px-4 py-2 rounded-lg">Book Now</button>
                                <button class="toggle-details text-blue-600 hover:text-blue-800 flex items-center" data-room="3">
                                    Room Details
                                    <i class="fas fa-chevron-down ml-2 transition-transform duration-300"></i>
                                </button>
                            </div>
                            
                            <!-- Room Details Section (Initially Hidden) -->
                            <div id="room-details-3" class="room-details mt-4 pt-4 border-t border-gray-200">
                                <div class="mb-4">
                                    <h4 class="font-bold text-lg mb-2">Facilities Include:</h4>
                                    <p class="bg-blue-100 text-blue-800 py-1 px-3 rounded-lg inline-block mb-2">AC ROOM</p>
                                    <p class="bg-blue-100 text-blue-800 py-1 px-3 rounded-lg inline-block mb-2">LED SCREEN</p>
                                    <p class="bg-blue-100 text-blue-800 py-1 px-3 rounded-lg inline-block mb-2">VIDEO CONFERENCING</p>
                                    <p class="bg-blue-100 text-blue-800 py-1 px-3 rounded-lg inline-block">WIFI</p>
                                </div>
                                
                                <div class="mb-4">
                                    <h4 class="font-bold text-lg mb-2">Availability:</h4>
                                    <div class="space-y-2">
                                        <div class="time-slot flex justify-between items-center">
                                            <span>10:30 am to 01:30 pm</span>
                                            <span class="booked font-medium">Booked</span>
                                        </div>
                                        <div class="time-slot flex justify-between items-center">
                                            <span>03:00 pm to 06:00 pm</span>
                                            <span class="booked font-medium">Booked</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- Room 4 -->
                <div class="px-4">
                    <div class="room-card bg-white rounded-xl shadow-md overflow-hidden relative">
                        <img src="/api/placeholder/800/400" alt="room image" class="w-full h-64 object-cover">
                        
                        <div class="p-6">
                            <h3 class="text-xl font-bold mb-2">Conference Room No.4- </h3>
                            <div class="flex items-center mb-3">
                                <i class="fas fa-users text-blue-500 mr-2"></i>
                                <span class="text-gray-600">Seating Capacity: 16 people</span>
                            </div>
                            <div class="flex items-center mb-4">
                                <i class="fas fa-wifi text-blue-500 mr-2"></i>
                                <span class="text-gray-600">WiFi & Video Conferencing</span>
                            </div>
                            
                            <div class="flex justify-between items-center">
                                <button class="btn-primary text-white px-4 py-2 rounded-lg">Book Now</button>
                                <button class="toggle-details text-blue-600 hover:text-blue-800 flex items-center" data-room="4">
                                    Room Details
                                    <i class="fas fa-chevron-down ml-2 transition-transform duration-300"></i>
                                </button>
                            </div>
                            
                            <!-- Room Details Section (Initially Hidden) -->
                        </div>
                            
                        <!-- Room Details Section (Initially Hidden) -->
                        <div id="room-details-5" class="room-details mt-4 pt-4 border-t border-gray-200">
                            <div class="mb-4">
                                <h4 class="font-bold text-lg mb-2">Facilities Include:</h4>
                                <p class="bg-blue-100 text-blue-800 py-1 px-3 rounded-lg inline-block mb-2">AC ROOM</p>
                                <p class="bg-blue-100 text-blue-800 py-1 px-3 rounded-lg inline-block mb-2">LED SCREEN</p>
                                <p class="bg-blue-100 text-blue-800 py-1 px-3 rounded-lg inline-block mb-2">VIDEO CONFERENCING</p>
                                <p class="bg-blue-100 text-blue-800 py-1 px-3 rounded-lg inline-block mb-2">WIFI</p>
                                <p class="bg-blue-100 text-blue-800 py-1 px-3 rounded-lg inline-block">PREMIUM AMENITIES</p>
                            </div>
                            
                           
                            <div class="mb-4">
                                <h4 class="font-bold text-lg mb-2">Charges:</h4>
                                <div class="space-y-2">
                                    <div class="flex justify-between items-center border-b border-gray-100 pb-2">
                                        <span class="font-medium">Basic Amount (10:30 am to 01:30 pm):</span>
                                        <span>₹15000.00 + ₹2700.00(18%) = ₹17700.00</span>
                                    </div>
                                    <div class="flex justify-between items-center border-b border-gray-100 pb-2">
                                        <span class="font-medium">With Conference Amount (10:30 am to 01:30 pm):</span>
                                        <span>₹18000.00 + ₹3240.00(18%) = ₹21240.00</span>
                                    </div>
                                    <div class="flex justify-between items-center border-b border-gray-100 pb-2">
                                        <span class="font-medium">Basic Amount (03:00 pm to 06:00 pm):</span>
                                        <span>₹15000.00 + ₹2700.00(18%) = ₹17700.00</span>
                                    </div>
                                    <div class="flex justify-between items-center pb-2">
                                        <span class="font-medium">With Conference Amount (03:00 pm to 06:00 pm):</span>
                                        <span>₹18000.00 + ₹3240.00(18%) = ₹21240.00</span>
                                    </div>
                                </div>
                            </div>
                            
                            <div>
                                <h4 class="font-bold text-lg mb-2">Availability:</h4>
                                <div class="space-y-2">
                                    <div class="time-slot flex justify-between items-center">
                                        <span>10:30 am to 01:30 pm</span>
                                        <span class="available font-medium">Available</span>
                                        <div class="space-x-2">
                                            <button class="px-3 py-1 bg-blue-100 text-blue-700 rounded hover:bg-blue-200 transition">Book Without Video</button>
                                            <button class="px-3 py-1 bg-blue-100 text-blue-700 rounded hover:bg-blue-200 transition">Book With Video</button>
                                        </div>
                                    </div>
                                    <div class="time-slot flex justify-between items-center">
                                        <span>03:00 pm to 06:00 pm</span>
                                        <span class="booked font-medium">Booked</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- Features Section -->
<section class="py-16 bg-gray-50">
    <div class="container mx-auto px-6">
        <h2 class="text-3xl font-bold text-center mb-16">Why Choose Our Conference Rooms?</h2>
        
        <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
            <!-- Feature 1 -->
            <div class="bg-white p-8 rounded-xl shadow-md hover:shadow-xl transition-all transform hover:-translate-y-2">
                <div class="w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center mb-6">
                    <i class="fas fa-wifi text-blue-600 text-2xl"></i>
                </div>
                <h3 class="text-xl font-bold mb-4">High-Speed WiFi</h3>
                <p class="text-gray-600">Enjoy uninterrupted connectivity with our enterprise-grade WiFi setup for seamless presentations and video conferencing.</p>
            </div>
            
            <!-- Feature 2 -->
            <div class="bg-white p-8 rounded-xl shadow-md hover:shadow-xl transition-all transform hover:-translate-y-2">
                <div class="w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center mb-6">
                    <i class="fas fa-video text-blue-600 text-2xl"></i>
                </div>
                <h3 class="text-xl font-bold mb-4">Advanced Video Conferencing</h3>
                <p class="text-gray-600">State-of-the-art video conferencing equipment with HD displays and crystal-clear audio systems.</p>
            </div>
            
            <!-- Feature 3 -->
            <div class="bg-white p-8 rounded-xl shadow-md hover:shadow-xl transition-all transform hover:-translate-y-2">
                <div class="w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center mb-6">
                    <i class="fas fa-calendar-check text-blue-600 text-2xl"></i>
                </div>
                <h3 class="text-xl font-bold mb-4">Easy Booking System</h3>
                <p class="text-gray-600">Our intuitive booking platform makes it simple to reserve rooms, check availability, and get instant confirmations.</p>
            </div>
        </div>
    </div>
</section>

<!-- Testimonials with Enhanced Design -->
<section class="py-16 bg-white">
    <div class="container mx-auto px-6">
        <h2 class="text-3xl font-bold text-center mb-16">What Our Clients Say</h2>
        
        <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
            <!-- Testimonial 1 -->
            <div class="bg-gradient-to-br from-blue-50 to-indigo-50 p-8 rounded-xl shadow-md relative">
                <div class="absolute -top-6 -left-6 w-12 h-12 bg-blue-600 rounded-full flex items-center justify-center text-white text-2xl">
                    <i class="fas fa-quote-left"></i>
                </div>
                <div class="flex items-center mb-6">
                    <img src="/api/placeholder/100/100" 
                         alt="Sarah Johnson" 
                         class="w-16 h-16 rounded-full border-4 border-white shadow-md mr-4">
                    <div>
                        <h4 class="font-bold text-lg">Sarah Johnson</h4>
                        <p class="text-gray-600">CEO, TechSolutions</p>
                    </div>
                </div>
                <div class="flex mb-4">
                    <i class="fas fa-star text-yellow-400"></i>
                    <i class="fas fa-star text-yellow-400"></i>
                    <i class="fas fa-star text-yellow-400"></i>
                    <i class="fas fa-star text-yellow-400"></i>
                    <i class="fas fa-star text-yellow-400"></i>
                </div>
                <p class="text-gray-700 italic text-lg">
                    "The Executive Boardroom at SNS ADR Center is our go-to for important client meetings. 
                    The facilities are top-notch and the staff is incredibly professional. Highly recommended!"
                </p>
            </div>
            
            <!-- Testimonial 2 -->
            <div class="bg-gradient-to-br from-blue-50 to-indigo-50 p-8 rounded-xl shadow-md relative">
                <div class="absolute -top-6 -left-6 w-12 h-12 bg-blue-600 rounded-full flex items-center justify-center text-white text-2xl">
                    <i class="fas fa-quote-left"></i>
                </div>
                <div class="flex items-center mb-6">
                    <img src="/api/placeholder/100/100" 
                         alt="Michael Chen" 
                         class="w-16 h-16 rounded-full border-4 border-white shadow-md mr-4">
                    <div>
                        <h4 class="font-bold text-lg">Michael Chen</h4>
                        <p class="text-gray-600">Director, Global Corp</p>
                    </div>
                </div>
                <div class="flex mb-4">
                    <i class="fas fa-star text-yellow-400"></i>
                    <i class="fas fa-star text-yellow-400"></i>
                    <i class="fas fa-star text-yellow-400"></i>
                    <i class="fas fa-star text-yellow-400"></i>
                    <i class="fas fa-star text-yellow-400"></i>
                </div>
                <p class="text-gray-700 italic text-lg">
                    "We've hosted multiple Arbitration sessions here and the experience has been flawless every time. 
                    The meeting rooms are spacious and well-equipped with all the tech we need."
                </p>
            </div>
        </div>
    </div>
</section>

<!-- CTA Section with Animation -->
<section class="py-16 bg-gradient-to-r from-blue-600 to-indigo-700 text-white">
    <div class="container mx-auto px-6 text-center">
        <h2 class="text-3xl font-bold mb-6">Ready to Book Your Conference Room?</h2>
        <p class="text-xl mb-10 max-w-2xl mx-auto">Get started now and enjoy our professional facilities and services.</p>
        <button class="btn-secondary px-10 py-4 rounded-full text-lg font-semibold shadow-lg animate__animated animate__pulse animate__infinite">Book Your Meeting Room Today</button>
    </div>
</section>

<!-- Footer with Enhanced Design -->
<footer class="bg-gray-900 text-white py-16">
    <div class="container mx-auto px-6">
        <div class="grid grid-cols-1 md:grid-cols-4 gap-12">
            <!-- Logo & About -->
            <div>
                <div class="flex items-center mb-6">
                    <div class=" flex items-center justify-center text-white font-bold text-xl shadow-lg"><h3 class="text-lg font-bold mb-6 relative inline-block">
                        Connect with Us
                        <span class="absolute bottom-0 left-0 w-1/2 h-1 bg-blue-500"></span>
                    </h3></div>
                    <span class="ml-3 text-xl font-bold"></span>
                </div>
                <p class="text-gray-400 mb-6"></p>
                <div class="flex space-x-4">
                    <a href="#" class="w-10 h-10 bg-gray-800 hover:bg-blue-600 rounded-full flex items-center justify-center transition-colors duration-300">
                        <i class="fab fa-facebook-f"></i>
                    </a>
                    <a href="#" class="w-10 h-10 bg-gray-800 hover:bg-blue-400 rounded-full flex items-center justify-center transition-colors duration-300">
                        <i class="fab fa-twitter"></i>
                    </a>
                   
                    <a href="#" class="w-10 h-10 bg-gray-800 hover:bg-blue-700 rounded-full flex items-center justify-center transition-colors duration-300">
                        <i class="fab fa-linkedin-in"></i>
                    </a>
                   
                </div>
            </div>
            
            <!-- Quick Links -->
            <div>
                <h3 class="text-lg font-bold mb-6 relative inline-block">
                    Quick Links
                    <span class="absolute bottom-0 left-0 w-1/2 h-1 bg-blue-500"></span>
                </h3>
                <ul class="space-y-3">
                    <li><a href="#" class="text-gray-400 hover:text-white transition-colors duration-300 flex items-center"><i class="fas fa-chevron-right mr-2 text-xs text-blue-400"></i> Home</a></li>
                    <li><a href="#" class="text-gray-400 hover:text-white transition-colors duration-300 flex items-center"><i class="fas fa-chevron-right mr-2 text-xs text-blue-400"></i> About Us</a></li>
                    <li><a href="#" class="text-gray-400 hover:text-white transition-colors duration-300 flex items-center"><i class="fas fa-chevron-right mr-2 text-xs text-blue-400"></i> Conference Rooms</a></li>
                    <li><a href="#" class="text-gray-400 hover:text-white transition-colors duration-300 flex items-center"><i class="fas fa-chevron-right mr-2 text-xs text-blue-400"></i> Pricing</a></li>
                    <li><a href="#" class="text-gray-400 hover:text-white transition-colors duration-300 flex items-center"><i class="fas fa-chevron-right mr-2 text-xs text-blue-400"></i> Contact</a></li>
                </ul>
            </div>
            
            <!-- Contact Info -->
            <div>
                <h3 class="text-lg font-bold mb-6 relative inline-block">
                    Contact Us
                    <span class="absolute bottom-0 left-0 w-1/2 h-1 bg-blue-500"></span>
                </h3>
                <ul class="space-y-3">
                    <li class="flex items-start">
                        <i class="fas fa-map-marker-alt mt-1 mr-3 text-blue-400"></i>
                        <span class="text-gray-400">E-231,Block E,East of Kailash<br>New Delhi, India 110065</span>
                    </li>
                    <li class="flex items-center">
                        <i class="fas fa-phone mr-3 text-blue-400"></i>
                        <span class="text-gray-400">011 4666 5666</span>
                    </li>
                    <li class="flex items-center">
                        <i class="fas fa-envelope mr-3 text-blue-400"></i>
                        <span class="text-gray-400">info@snsadr.com</span>
                    </li>
                    <li class="flex items-center">
                        <i class="fas fa-clock mr-3 text-blue-400"></i>
                        <span class="text-gray-400">Mon - Fri: 9:00 AM - 6:30 PM</span>
                    </li>
                </ul>
            </div>
            
            <!-- Newsletter -->
            <div>
                <h3 class="text-lg font-bold mb-6 relative inline-block">
                    Newsletter/Maps
                    <span class="absolute bottom-0 left-0 w-1/2 h-1 bg-blue-500"></span>
                </h3>
                <p class="text-gray-400 mb-4">Subscribe to receive updates on special offers.</p>
                <form class="flex flex-col space-y-3">
                    <input type="email" placeholder="Your Email Address" class="px-4 py-3 rounded-lg bg-gray-800 border border-gray-700 focus:outline-none focus:border-blue-500 transition-colors">
                    <button class="btn-primary px-4 py-3 rounded-lg">Subscribe Now</button>
                </form>
            </div>
        </div>
        
        <div class="border-t border-gray-800 mt-12 pt-8 text-center text-gray-500">
            <p>&copy; 2025 SNS ADR Center. All rights reserved.</p>
            <div class="mt-2">
                <a href="#" class="hover:text-white transition-colors">Terms & Conditions</a> | 
                <a href="#" class="hover:text-white transition-colors">Privacy Policy</a> |
                <a href="#" class="hover:text-white transition-colors">Cookie Policy</a>
            </div>
        </div>
    </div>
</footer>

<!-- Scripts -->
<script>
    // Initialize Slick Carousel
    $(document).ready(function(){
        $('.room-carousel').slick({
            dots: true,
            infinite: true,
            speed: 500,
            slidesToShow: 3,
            slidesToScroll: 1,
            autoplay: true,
            autoplaySpeed: 5000,
            responsive: [
                {
                    breakpoint: 1024,
                    settings: {
                        slidesToShow: 2,
                        slidesToScroll: 1,
                        infinite: true,
                        dots: true
                    }
                },
                {
                    breakpoint: 768,
                    settings: {
                        slidesToShow: 1,
                        slidesToScroll: 1
                    }
                }
            ]
        });
        
        // Toggle room details
        $('.toggle-details').on('click', function() {
            const roomId = $(this).data('room');
            const detailsSection = $(`#room-details-${roomId}`);
            const icon = $(this).find('i');
            
            detailsSection.toggleClass('active');
            icon.toggleClass('rotate-180');
        });
        
        // Dropdown toggle
        $('#aboutDropdownBtn').on('click', function(e) {
            e.preventDefault();
            $('#aboutDropdown').toggleClass('show');
        });
        
        // Close dropdown when clicking outside
        $(document).on('click', function(e) {
            if (!$(e.target).closest('#aboutDropdownBtn').length) {
                $('#aboutDropdown').removeClass('show');
            }
        });
        
        // Smooth scrolling for anchor links
        $('a[href^="#"]').on('click', function(e) {
            e.preventDefault();
            $('html, body').animate({
                scrollTop: $($(this).attr('href')).offset().top - 80
            }, 500);
        });
        
        // Animation on scroll
        function animateOnScroll() {
            const elements = document.querySelectorAll('.room-card, .btn-primary, .btn-secondary');
            
            elements.forEach(element => {
                const elementPosition = element.getBoundingClientRect().top;
                const screenPosition = window.innerHeight / 1.3;
                
                if (elementPosition < screenPosition) {
                    element.classList.add('animate__animated', 'animate__fadeInUp');
                }
            });
        }
        
        window.addEventListener('scroll', animateOnScroll);
    });
</script>
</body>
</html>   how torun this on llocalhost:somthing