<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Welcome to Azad Bhawan, IIT Roorkee</title>
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        * 
        {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        :root {
            --primary-color: #1e40af;
            --secondary-color: #3b82f6;
            --accent-color: #f59e0b;
            --dark: #1f2937;
            --light: #f3f4f6;
            --white: #ffffff;
            --text-dark: #374151;
            --text-light: #6b7280;
        }

        body {
            font-family: 'Poppins', sans-serif;
            line-height: 1.6;
            color: var(--text-dark);
            overflow-x: hidden;
        }

        /* Navigation */
        nav {
            background: var(--white);
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
            position: fixed;
            width: 100%;
            top: 0;
            z-index: 1000;
            transition: all 0.3s ease;
        }

        nav.scrolled {
            box-shadow: 0 4px 20px rgba(0,0,0,0.15);
        }

        .nav-container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 1rem 2rem;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .logo {
            font-size: 1.5rem;
            font-weight: 700;
            color: var(--primary-color);
            text-decoration: none;
        }

        .nav-links {
            display: flex;
            list-style: none;
            gap: 2rem;
        }

        .nav-links a {
            text-decoration: none;
            color: var(--text-dark);
            font-weight: 500;
            transition: color 0.3s ease;
            position: relative;
        }

        .nav-links a:hover {
            color: var(--primary-color);
        }

        .nav-links a::after {
            content: '';
            position: absolute;
            width: 0;
            height: 2px;
            bottom: -5px;
            left: 0;
            background: var(--primary-color);
            transition: width 0.3s ease;
        }

        .nav-links a:hover::after {
            width: 100%;
        }

        .hamburger {
            display: none;
            flex-direction: column;
            cursor: pointer;
        }

        .hamburger span {
            width: 25px;
            height: 3px;
            background: var(--primary-color);
            margin: 3px 0;
            transition: 0.3s;
        }

        /* Hero Section */
        .hero {
            background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
            color: var(--white);
            padding: 150px 2rem 100px;
            text-align: center;
            margin-top: 70px;
            position: relative;
            overflow: hidden;
        }

        .hero::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320"><path fill="%23ffffff" fill-opacity="0.1" d="M0,96L48,112C96,128,192,160,288,160C384,160,480,128,576,112C672,96,768,96,864,112C960,128,1056,160,1152,160C1248,160,1344,128,1392,112L1440,96L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z"></path></svg>') no-repeat bottom;
            background-size: cover;
        }

        .hero-content {
            position: relative;
            z-index: 1;
            max-width: 800px;
            margin: 0 auto;
        }

        .hero h1 {
            font-size: 3.5rem;
            margin-bottom: 1rem;
            animation: fadeInUp 1s ease;
        }

        .hero .subtitle {
            font-size: 1.5rem;
            margin-bottom: 2rem;
            opacity: 0.9;
            animation: fadeInUp 1s ease 0.2s both;
        }

        /* Sections */
        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 2rem;
        }

        .section {
            padding: 80px 0;
        }

        .section-title {
            text-align: center;
            font-size: 2.5rem;
            color: var(--primary-color);
            margin-bottom: 1rem;
            position: relative;
            display: inline-block;
            left: 50%;
            transform: translateX(-50%);
        }

        .section-title::after {
            content: '';
            position: absolute;
            width: 100px;
            height: 4px;
            background: var(--accent-color);
            bottom: -10px;
            left: 50%;
            transform: translateX(-50%);
            border-radius: 2px;
        }

        .section-subtitle {
            text-align: center;
            color: var(--text-light);
            margin-bottom: 3rem;
            font-size: 1.1rem;
        }

        /* About Section */
        .about-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 2rem;
            margin-top: 3rem;
        }

        .about-card {
            background: var(--white);
            padding: 2rem;
            border-radius: 15px;
            box-shadow: 0 5px 20px rgba(0,0,0,0.1);
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }

        .about-card:hover {
            transform: translateY(-10px);
            box-shadow: 0 10px 30px rgba(0,0,0,0.15);
        }

        .about-card h3 {
            color: var(--primary-color);
            margin-bottom: 1rem;
            font-size: 1.5rem;
        }

        /* Message Section */
        .message-card {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: var(--white);
            padding: 3rem;
            border-radius: 20px;
            box-shadow: 0 10px 40px rgba(0,0,0,0.2);
            margin: 3rem 0;
        }

        .message-header {
            display: flex;
            align-items: center;
            gap: 2rem;
            margin-bottom: 2rem;
        }

        .message-avatar {
            width: 120px;
            height: 120px;
            border-radius: 50%;
            border: 5px solid var(--white);
            box-shadow: 0 5px 20px rgba(0,0,0,0.3);
            background: var(--white);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 3rem;
            font-weight: 700;
            color: var(--primary-color);
            flex-shrink: 0;
        }

        .message-header img {
            width: 100px;
            height: 100px;
            border-radius: 50%;
            border: 4px solid var(--white);
        }

        .message-info h3 {
            font-size: 1.8rem;
            margin-bottom: 0.5rem;
        }

        .message-info p {
            opacity: 0.9;
        }

        /* Facilities Section */
        .facilities-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
            gap: 2rem;
            margin-top: 3rem;
        }

        .facility-card {
            background: var(--white);
            border-radius: 15px;
            overflow: hidden;
            box-shadow: 0 5px 20px rgba(0,0,0,0.1);
            transition: transform 0.3s ease;
        }

        .facility-card:hover {
            transform: translateY(-10px);
        }

        .facility-icon {
            background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
            color: var(--white);
            width: 80px;
            height: 80px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 2rem;
            margin: 2rem auto 1rem;
        }

        .facility-content {
            padding: 0 2rem 2rem;
            text-align: center;
        }

        .facility-content h3 {
            color: var(--primary-color);
            margin-bottom: 1rem;
        }

        /* Team Section */
        .team-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 2rem;
            margin-top: 3rem;
        }

        .team-card {
            background: var(--white);
            border-radius: 15px;
            padding: 2rem;
            text-align: center;
            box-shadow: 0 5px 20px rgba(0,0,0,0.1);
            transition: transform 0.3s ease;
        }

        .team-card:hover {
            transform: translateY(-10px);
        }

        .team-avatar {
            width: 120px;
            height: 120px;
            border-radius: 50%;
            margin: 0 auto 1rem;
            background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
            display: flex;
            align-items: center;
            justify-content: center;
            color: var(--white);
            font-size: 2.5rem;
            font-weight: 700;
            box-shadow: 0 5px 15px rgba(0,0,0,0.2);
            border: 4px solid var(--white);
        }

        .team-card h4 {
            color: var(--primary-color);
            margin: 1rem 0 0.5rem;
            font-size: 1.2rem;
        }

        .team-card .role {
            color: var(--accent-color);
            font-weight: 600;
            margin-bottom: 1rem;
        }

        .team-card .contact {
            color: var(--text-light);
            font-size: 0.9rem;
            margin: 0.3rem 0;
        }

        .team-card a {
            color: var(--text-light);
            text-decoration: none;
            transition: color 0.3s ease;
        }

        .team-card a:hover {
            color: var(--primary-color);
        }

        /* Testimonials */
        .testimonials-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 2rem;
            margin-top: 3rem;
        }

        .testimonial-card {
            background: var(--white);
            padding: 2rem;
            border-radius: 15px;
            box-shadow: 0 5px 20px rgba(0,0,0,0.1);
            border-left: 4px solid var(--accent-color);
        }

        .testimonial-card .quote {
            font-size: 3rem;
            color: var(--accent-color);
            line-height: 0;
            margin-bottom: 1rem;
        }

        .testimonial-card p {
            font-style: italic;
            margin-bottom: 1rem;
            color: var(--text-dark);
        }

        .testimonial-card .author {
            font-weight: 600;
            color: var(--primary-color);
        }

        .testimonial-card .author-role {
            color: var(--text-light);
            font-size: 0.9rem;
        }

        /* Event Carousels */
        .event-carousel {
            margin-top: 3rem;
        }

        .event-title {
            font-weight: 700;
            margin-bottom: 1rem;
            color: var(--primary-color);
            text-align: center;
            font-size: 1.25rem;
        }

        .carousel {
            position: relative;
            overflow: hidden;
            border-radius: 15px;
            box-shadow: 0 5px 20px rgba(0,0,0,0.1);
            background: var(--light);
            height: 500px;
            max-height: 70vh;
        }

        .carousel-track {
            display: flex;
            transition: transform 0.5s ease;
            will-change: transform;
            height: 100%;
        }

        .carousel-slide {
            min-width: 100%;
            width: 100%;
            flex-shrink: 0;
            height: 100%;
            overflow: hidden;
        }

        .carousel-slide img {
            width: 100%;
            height: 100%;
            object-fit: contain;
            display: block;
            background: #000;
        }

        .carousel-btn {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            background: rgba(0,0,0,0.45);
            color: var(--white);
            border: none;
            padding: 0.6rem 1rem;
            border-radius: 999px;
            cursor: pointer;
            z-index: 2;
        }

        .carousel-btn.prev { left: 1rem; }
        .carousel-btn.next { right: 1rem; }

        .carousel-dots {
            text-align: center;
            margin-top: 0.8rem;
        }

        .carousel-dot {
            display: inline-block;
            width: 10px;
            height: 10px;
            border-radius: 50%;
            background: #ddd;
            margin: 0 5px;
            cursor: pointer;
        }

        .carousel-dot.active {
            background: var(--primary-color);
        }

        @media (max-width: 768px) {
            .carousel-btn { padding: 0.4rem 0.7rem; }
        }

        /* Footer */
        footer {
            background: var(--dark);
            color: var(--white);
            padding: 3rem 0 1rem;
        }

        .footer-content {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 2rem;
            margin-bottom: 2rem;
        }

        .footer-section h4 {
            color: var(--accent-color);
            margin-bottom: 1rem;
            font-size: 1.3rem;
        }

        .footer-section ul {
            list-style: none;
        }

        .footer-section ul li {
            margin: 0.5rem 0;
        }

        .footer-section a {
            color: var(--light);
            text-decoration: none;
            transition: color 0.3s ease;
        }

        .footer-section a:hover {
            color: var(--accent-color);
        }

        .footer-bottom {
            text-align: center;
            padding-top: 2rem;
            border-top: 1px solid rgba(255,255,255,0.1);
            color: var(--light);
        }

        .footer-bottom a {
            color: var(--accent-color);
            text-decoration: none;
        }

        /* Animations */
        @keyframes fadeInUp {
            from {
                opacity: 0;
                transform: translateY(30px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        /* Responsive */
        @media (max-width: 768px) {
            .nav-links {
                position: fixed;
                top: 70px;
                left: -100%;
                flex-direction: column;
                background: var(--white);
                width: 100%;
                padding: 2rem;
                box-shadow: 0 10px 20px rgba(0,0,0,0.1);
                transition: left 0.3s ease;
            }

            .nav-links.active {
                left: 0;
            }

            .hamburger {
                display: flex;
            }

            .hero h1 {
                font-size: 2.5rem;
            }

            .hero .subtitle {
                font-size: 1.2rem;
            }

            .section-title {
                font-size: 2rem;
            }
        }

        /* Utility Classes */
        .bg-light {
            background: var(--light);
        }

        .text-center {
            text-align: center;
        }

        .mt-2 {
            margin-top: 2rem;
        }

        .mb-2 {
            margin-bottom: 2rem;
        }
    </style>
</head>
<body>
    <!-- Navigation -->
    <nav id="navbar">
        <div class="nav-container">
            <a href="#" class="logo"><img src="assets/img/IITR_Azad_Bhawan_logo.png" alt="Azad Bhawan Logo" style="height: 50px; width: auto;"></a>
            <div class="hamburger" onclick="toggleMenu()">
                <span></span>
                <span></span>
                <span></span>
            </div>
            <ul class="nav-links" id="navLinks">
                <li><a href="#home">Home</a></li>
                <li><a href="about.html">About Bhawan</a></li>
                <li><a href="facilities.html">Facilities</a></li>
                <li><a href="gallery.html">Gallery</a></li>
                <li><a href="#team">Team</a></li>
                <li><a href="#mess">Mess</a></li>
                <li><a href="contact.html">Contact</a></li>
            </ul>
        </div>
    </nav>

    <!-- Hero Section -->
    <section class="hero" id="home" style="background: url('assets/img/gallery/bhawan/bhawan_1.jpg') no-repeat center center; background-size: cover;">
        <div class="hero-content" >
            <h1>Welcome to AZAD BHAWAN</h1>
            <p class="subtitle">A Home Away from Home!</p>
        </div>
    </section>

    <!-- About Section -->
    <section class="section" id="about">
        <div class="container">
            <h2 class="section-title">About Azad Bhawan</h2>
            <div class="about-grid">
                <div class="about-card">
                    <h3>Our Heritage</h3>
                    <p>Azad Bhawan has been named after the renowned freedom fighter Maulana Abul Kalam Azad. Earlier Azad Bhawan was known as PG Bhawan. However, recently it has been decided to mix up the UG as well as PG students. This brings together the young and experienced engineers together. The seniors feel young and energetic in the company of UG students and the juniors get the guidance from the seniors.</p>
                </div>
                <div class="about-card">
                    <h3>Maulana Abul Kalam Azad</h3>
                    <p>Maulana Abul Kalam Azad was born in the year 1888 in Mecca. His forefathers came from Herat (a city in Afghanistan) in Babar's days. Azad was a descendent of a lineage of learned Muslim scholars, or maulanas. His father's name was Maulana Khairuddin and his mother was the daughter of Sheikh Mohammad Zaher Watri.</p>
                </div>
            </div>
        </div>
    </section>

    <!-- Chief Warden's Message -->
    <section class="section bg-light">
        <div class="container">
            <h2 class="section-title">Chief Warden's Message</h2>
            <div class="message-card">
                <div class="message-header">
                    <div class="message-avatar">
                        <img src="assets/img/team/S_P_Pradhan.jpg" style="object-fit: cover;" alt="Prof. S P Pradhan">
                    </div>
                    <div class="message-info">
                        <h3>Prof. S P Pradhan</h3>
                        <p>Chief Warden</p>
                    </div>
                </div>
                <p>It gives us immense pleasure to welcome you all to be a part of Azad Bhawan family. We at Azad Bhawan committed to provide students a homely and healthy atmosphere with complete safety and security, neat and clean environment and a comfortable place to live in the hostel.</p>
                <p>Discipline is the key to success and career building, hence at Azad Bhawan we promote self-discipline among students. We expect that, our students would cultivate strong bonds with fellow inmates.</p>
                <p>Azad Bhawan provides accommodation to research scholars and post-graduate students, a union of diverse cultures, which balances into a coordination for a rich and memorable experience. Bhawan infrastructure is well furnished with regular amenities and our newly developed website is the ready sources of information about various facilities and activities.</p>
                <p>Regular updated information on this website could be a useful source of information to Bhawan inmates as well as outsiders. Finally, I want to congratulate Azad Bhawan Council Members & Bhawan inmates for maintaining the dignity of the Bhawan by adopting peace and unity. I wish all the Azad Bhawan residence for your outstanding academic careers.</p>
            </div>
        </div>
    </section>

    <!-- Bhawan Mess -->
    <section class="section" id="mess">
        <div class="container">
            <h2 class="section-title">Bhawan Mess</h2>
            <p class="section-subtitle">Separate dining facility for all hostel residents with a Clean & hygienic environment</p>
            <div class="about-card">
                <p>Self-service system is promoted in the mess. The menu is designed considering the nutritional requirements of the students. The mess offers breakfast, Lunch, and Dinner regularly.</p>
            </div>
        </div>
    </section>

    <!-- Facilities Section -->
    <section class="section bg-light" id="facilities">
        <div class="container">
            <h2 class="section-title">Facilities In Bhawan</h2>
            <div class="facilities-grid">
                <div class="facility-card">
                    <div class="facility-icon">
                        <i class="fas fa-utensils"></i>
                    </div>
                    <div class="facility-content">
                        <h3>Day Canteen Facility</h3>
                        <p><strong>2 PM to 2 AM</strong></p>
                        <p>Azad Bhawan Canteen offers a welcoming environment to all IITR inmates. It provides proper ventilation with a comfortable seating facility around the canteen area. "Delicious Food is Here".</p>
                    </div>
                </div>

                <div class="facility-card">
                    <div class="facility-icon">
                        <i class="fas fa-moon"></i>
                    </div>
                    <div class="facility-content">
                        <h3>Night Canteen Facility</h3>
                        <p><strong>2 AM to 2 PM</strong></p>
                        <p>Azad Bhawan Canteen offers a welcoming environment to all IITR inmates. It provides proper ventilation with a comfortable seating facility around the canteen area. "Delicious Food is Here".</p>
                    </div>
                </div>

                <div class="facility-card">
                    <div class="facility-icon">
                        <i class="fas fa-bed"></i>
                    </div>
                    <div class="facility-content">
                        <h3>Guest Room Facility</h3>
                        <p>Well-furnished room with proper ventilation and other facilities.</p>
                        <p>✓ Check In: 12:00 PM<br>✓ Check Out: 11:00 AM</p>
                    </div>
                </div>

                <div class="facility-card">
                    <div class="facility-icon">
                        <i class="fas fa-cut"></i>
                    </div>
                    <div class="facility-content">
                        <h3>AC Hair Saloon</h3>
                        <p>Hair salons offer hair services including professional hair styling and hair texturing.</p>
                    </div>
                </div>

                <div class="facility-card">
                    <div class="facility-icon">
                        <i class="fas fa-tshirt"></i>
                    </div>
                    <div class="facility-content">
                        <h3>Laundry Service & Clothes Ironing</h3>
                        <p>The purpose of laundry service is extremely simple to provide people with a place to wash their clothes and Ironing will help you to preserve them. "Live Life Cleaner".</p>
                    </div>
                </div>

                <div class="facility-card">
                    <div class="facility-icon">
                        <i class="fas fa-dumbbell"></i>
                    </div>
                    <div class="facility-content">
                        <h3>Sports</h3>
                        <p>Azad Bhawan provides indoor sports facilities such as Table Tennis, Chess, Yoga, Carrom, Gym, etc. and outdoor sports facilities include Badminton and Volleyball. "Stay Fit Stay Healthy".</p>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Gallery Section -->
    <section class="section" id="gallery">
        <div class="container">
            <h2 class="section-title">Gallery</h2>
            <p class="section-subtitle">Recent activities & events</p>

            <!-- Lohri Celebration Carousel -->
            <div class="event-carousel" aria-labelledby="lohri-title">
                <h3 id="lohri-title" class="event-title">Lohri Celebration</h3>
                <div class="carousel" data-carousel="lohri">
                    <div class="carousel-track">
                        <div class="carousel-slide"><img src="assets/index_asset/image003.jpg" alt="Lohri 1"></div>
                        <div class="carousel-slide"><img src="assets/index_asset/image005.jpg" alt="Lohri 2"></div>
                        <div class="carousel-slide"><img src="assets/index_asset/image007.jpg" alt="Lohri 3"></div>
                        <div class="carousel-slide"><img src="assets/index_asset/image009.jpg" alt="Lohri 3"></div>
                        <div class="carousel-slide"><img src="assets/index_asset/image011.jpg" alt="Lohri 4"></div>
                    </div>
                    <button class="carousel-btn prev" aria-label="Previous slide">‹</button>
                    <button class="carousel-btn next" aria-label="Next slide">›</button>
                    <div class="carousel-dots">
                        <span class="carousel-dot"></span>
                        <span class="carousel-dot"></span>
                        <span class="carousel-dot"></span>
                    </div>
                </div>
            </div>

            <!-- Mess Carousel -->
            <div class="event-carousel" aria-labelledby="mess-title">
                <h3 id="mess-title" class="event-title">Bhawan Mess & Dining</h3>
                <div class="carousel" data-carousel="mess">
                    <div class="carousel-track">
                        <div class="carousel-slide"><img src="assets/index_asset/mess01.jpeg" alt="Mess 1"></div>
                        <div class="carousel-slide"><img src="assets/index_asset/mess02.jpeg" alt="Mess 2"></div>
                    </div>
                    <button class="carousel-btn prev" aria-label="Previous slide">‹</button>
                    <button class="carousel-btn next" aria-label="Next slide">›</button>
                    <div class="carousel-dots">
                        <span class="carousel-dot"></span>
                        <span class="carousel-dot"></span>
                        <span class="carousel-dot"></span>
                    </div>
                </div>
            </div>

            <!-- Sports Carousel -->
            <div class="event-carousel" aria-labelledby="sports-title">
                <h3 id="sports-title" class="event-title">Sports Activities</h3>
                <div class="carousel" data-carousel="sports">
                    <div class="carousel-track">
                        <div class="carousel-slide"><img src="assets/img/gallery/sports/sport1.jpg" alt="Sports 1"></div>
                        <div class="carousel-slide"><img src="assets/img/gallery/sports/sport2.jpg" alt="Sports 2"></div>
                        <div class="carousel-slide"><img src="assets/img/gallery/sports/sports_3.jpg" alt="Sports 3"></div>
                        <div class="carousel-slide"><img src="assets/index_asset/sport0.jpeg" alt="Sports 4"></div>
                    </div>
                    <button class="carousel-btn prev" aria-label="Previous slide">‹</button>
                    <button class="carousel-btn next" aria-label="Next slide">›</button>
                    <div class="carousel-dots">
                        <span class="carousel-dot"></span>
                        <span class="carousel-dot"></span>
                        <span class="carousel-dot"></span>
                    </div>
                </div>
            </div>

            <!-- Bhawan Events Carousel -->
            <div class="event-carousel" aria-labelledby="bhawan-title">
                <h3 id="bhawan-title" class="event-title">Bhawan Events & Activities</h3>
                <div class="carousel" data-carousel="bhawan">
                    <div class="carousel-track">
                        <div class="carousel-slide"><img src="assets/index_asset/image001.jpg" alt="Event 0"></div>
                        <div class="carousel-slide"><img src="assets/img/gallery/events/event2.jpg" alt="Event 1"></div>
                        <div class="carousel-slide"><img src="assets/img/gallery/events/event3.jpg" alt="Event 2"></div>
                        <div class="carousel-slide"><img src="assets/img/gallery/events/event4.jpg" alt="Event 3"></div>
                        <div class="carousel-slide"><img src="assets/img/gallery/bhawan/bhawan3.jpg" alt="Event 4"></div>
                        <div class="carousel-slide"><img src="assets/img/gallery/events/event1.jpg" alt="Lohri 3"></div>
                    </div>
                    <button class="carousel-btn prev" aria-label="Previous slide">‹</button>
                    <button class="carousel-btn next" aria-label="Next slide">›</button>
                    <div class="carousel-dots">
                        <span class="carousel-dot"></span>
                        <span class="carousel-dot"></span>
                        <span class="carousel-dot"></span>
                        <span class="carousel-dot"></span>
                    </div>
                </div>
            </div>

        </div>
    </section>

    <script>
    document.addEventListener('DOMContentLoaded', function(){
        function initCarousel(carouselEl){
            const track = carouselEl.querySelector('.carousel-track');
            const slides = Array.from(track.children);
            const prevBtn = carouselEl.querySelector('.carousel-btn.prev');
            const nextBtn = carouselEl.querySelector('.carousel-btn.next');
            const dots = Array.from(carouselEl.querySelectorAll('.carousel-dot'));
            let index = 0;
            let auto;

            // compute widths in px to avoid percent ambiguity
            function getSlideWidth(){
                return carouselEl.offsetWidth;
            }

            // set each slide exactly to the carousel width (in px)
            function layout(){
                const w = getSlideWidth();
                slides.forEach((s, i) => { 
                    s.style.width = w + 'px';
                    s.style.minWidth = w + 'px';
                    s.style.maxWidth = w + 'px';
                });
                track.style.width = (w * slides.length) + 'px';
                update(true);
            }

            function update(skipTransition){
                const w = getSlideWidth();
                const x = -(index * w);
                if (skipTransition) {
                    track.style.transition = 'none';
                    track.style.transform = 'translate3d(' + x + 'px, 0, 0)';
                    // Force reflow
                    track.offsetHeight;
                    setTimeout(() => { 
                        track.style.transition = 'transform 0.5s ease'; 
                    }, 10);
                } else {
                    track.style.transform = 'translate3d(' + x + 'px, 0, 0)';
                }
                dots.forEach((d,i)=> d.classList.toggle('active', i===index));
            }

            function startAuto(){ 
                auto = setInterval(()=>{ 
                    index = (index + 1) % slides.length; 
                    update(); 
                }, 4000); 
            }
            
            function resetAuto(){ 
                clearInterval(auto); 
                startAuto(); 
            }

            prevBtn && prevBtn.addEventListener('click', ()=>{ 
                index = (index - 1 + slides.length) % slides.length; 
                update(); 
                resetAuto(); 
            });
            
            nextBtn && nextBtn.addEventListener('click', ()=>{ 
                index = (index + 1) % slides.length; 
                update(); 
                resetAuto(); 
            });
            
            dots.forEach((d,i)=> d.addEventListener('click', ()=>{ 
                index = i; 
                update(); 
                resetAuto(); 
            }));

            // touch support (basic swipe)
            let xStart = 0;
            carouselEl.addEventListener('touchstart', function(e){ 
                xStart = e.changedTouches[0].clientX; 
            }, {passive:true});
            
            carouselEl.addEventListener('touchend', function(e){
                const xEnd = e.changedTouches[0].clientX;
                const diff = xEnd - xStart;
                if (diff > 50) { 
                    index = (index - 1 + slides.length) % slides.length; 
                    update(); 
                    resetAuto(); 
                } else if (diff < -50) { 
                    index = (index + 1) % slides.length; 
                    update(); 
                    resetAuto(); 
                }
            }, {passive:true});

            // pause on hover
            carouselEl.addEventListener('mouseenter', ()=> clearInterval(auto));
            carouselEl.addEventListener('mouseleave', ()=> resetAuto());

            // handle window resize and image load
            let resizeTimeout;
            window.addEventListener('resize', () => {
                clearTimeout(resizeTimeout);
                resizeTimeout = setTimeout(layout, 100);
            });
            
            slides.forEach(slide=>{
                const img = slide.querySelector('img');
                if (img && !img.complete) {
                    img.addEventListener('load', layout);
                }
            });

            // initial layout & start
            layout();
            setTimeout(layout, 100); // Recalculate after images start loading
            startAuto();
        }

        document.querySelectorAll('.carousel').forEach(initCarousel);
    });
    </script>

    <!-- Team Section -->
    <section class="section bg-light" id="team">
        <div class="container">
            <h2 class="section-title">Bhawan Admin</h2>
            <div class="team-grid">
                <div class="team-card">
                    <h4>Prof. S P Pradhan</h4>
                    <div class="team-avatar"><img src="assets/img/team/S_P_Pradhan.jpg" alt="Prof. S P Pradhan" style="width: 120px; height: 120px; border-radius: 50%;"></div>
                    <p class="role">Chief Warden</p>
                    <p class="contact"><a href="/cdn-cgi/l/email-protection#b3c0c3c3c1d2d7dbd2ddf3d6c09ddadac7c19dd2d09ddadd"><span class="__cf_email__" data-cfemail="2152515153404549404f6144520f484855530f40420f484f">sppradhan@es.iitr.ac.in</span></a></p>
                    <p class="contact">+91-1332-284851</p>
                </div>

                <div class="team-card">
                    <h4>Prof. Tony Thomas</h4>
                    <div class="team-avatar"><img src="assets/img/team/Tony_Thomas.jpg" alt="Prof. Tony Thomas" style="width: 120px; height: 120px; border-radius: 50%;"></div>
                    <p class="role">Warden</p>
                    <p class="contact"><a href="/cdn-cgi/l/email-protection#077368697e736f686a6674476f74296e6e7375296664296e69"><span class="__cf_email__" data-cfemail="6c18030215180403010d1f2c041f420505181e420d0f420502">tonythomas@hs.iitr.ac.in</span></a></p>
                </div>

                <div class="team-card">
                    <h4>Prof. Navjit Gaurav</h4>
					<div class="team-avatar"><img src="assets/img/team/Navjit_Gaurav.jpg" alt="Prof. Navjit Gaurav" style="width: 120px; height: 120px; border-radius: 50%;"></div>
                    <p class="role">Warden</p>
                    <p class="contact"><a href="/cdn-cgi/l/email-protection#d5bbb4a3bfbca1fbb2b4a0a7b4a395b4a7fbbcbca1a7fbb4b6fbbcbb"><span class="__cf_email__" data-cfemail="0d636c7b676479236a6c787f6c7b4d6c7f236464797f236c6e236463"></span>navjit.gaurav@ar.iitr.ac.in</span></a></p>
                    <p class="contact">01332-285026</p>
                </div>

                <div class="team-card">
                    <h4>Lucky Shukla</h4>
					<div class="team-avatar"><img src="assets/img/team/Lucky_Shukla.jpg" alt="Lucky Shukla" style="width: 120px; height: 120px; border-radius: 50%;"></div>
                    <p class="role">Assistant Warden</p>
                    <p class="contact"><a href="/cdn-cgi/l/email-protection#d5b9a0b6beac8aa695b1b8fbbcbca1a7fbb4b6fbbcbb"><span class="__cf_email__" data-cfemail="442831272f3d1b370420296a2d2d30366a25276a2d2a">lucky_s@dm.iitr.ac.in</span></a></p>
                    <p class="contact">+91 8235103860</p>
                </div>

                <div class="team-card">
                    <h4>Naresh Bhardwaj</h4>
					<div class="team-avatar"><img src="assets/img/team/Naresh_Bhardwaj_Supervisor.jpg" alt="Naresh Bhardwaj" style="width: 120px; height: 120px; border-radius: 50%;"></div>
                    <p class="role">Supervisor</p>
                    <p class="contact"><a href="/cdn-cgi/l/email-protection#b3d2c9d2d7d1dbd2c4d2ddf3dadac7c19dd2d09ddadd"><span class="__cf_email__" data-cfemail="51302b303533393026303f11383825237f30327f383f">azadbhawan@iitr.ac.in</span></a></p>
                    <p class="contact">01332-281367</p>
                </div>
            </div>
        </div>
    </section>
<!-- bhawan council -->
        <div class="container">
            <h2 class="section-title">Bhawan Council 2026</h2>
            <div class="team-grid">
                

                <div class="team-card">
                    <h4>Amit</h4>
					<div class="team-avatar"><img src="assets/index_asset/image014.png" alt="Amit" style="width: 120px; height: 120px; border-radius: 50%;"></div>
                    <p class="role">Bhawan Secretary</p>
                    <p class="contact"><a href="/cdn-cgi/l/email-protection#4d2c2024390d2e34632424393f632c2e632423"><span class="__cf_email__" data-cfemail="d7b6babea397b4aef9bebea3a5f9b6b4f9beb9">amit@cy.iitr.ac.in</span></a></p>
                    <p class="contact">+91 8057900637</p>
                </div>
                   

                <div class="team-card">
                    <h4>Krishan Kumar</h4>
					<div class="team-avatar"><img src="assets/index_asset/image016.jpg" alt="Krishan Kumar" style="width: 120px; height: 120px; border-radius: 50%;"></div>
                    <p class="role">Mess Secretary</p>
                    <p class="contact"><a href="/cdn-cgi/l/email-protection#3a51485349525b5465517a5e571453534e48145b59145354"><span class="__cf_email__" data-cfemail="b1dac3d8c2d9d0dfeedaf1d5dc9fd8d8c5c39fd0d29fd8df">krishan_k@dm.iitr.ac.in</span></a></p>
                    <p class="contact">+91 8920897172</p>
                </div>

                <div class="team-card">
                    <h4>Akshat Vashistha</h4>
					<div class="team-avatar"><img src="assets/index_asset/image017.png" alt="Akshat Vashistha" style="width: 120px; height: 120px; border-radius: 50%;"></div>
                    <p class="role">Maintenance Secretary</p>
                    <p class="contact"><a href="/cdn-cgi/l/email-protection#97f6fce4fff6e3c8e1a6d7f3fab9fefee3e5b9f6f4b9fef9"><span class="__cf_email__" data-cfemail="accdc7dfc4cdd8f3da9decc8c182c5c5d8de82cdcf82c5c2">akshat_v1@dm.iitr.ac.in</span></a></p>
                    <p class="contact">+91 9456314764</p>
                </div>

                <div class="team-card">
                    <h4>Anil Kumar</h4>
					<div class="team-avatar"><img src="assets/index_asset/image018.png" alt="Anil Kumar" style="width: 120px; height: 120px; border-radius: 50%;"></div>
                    <p class="role">Technical Secretary</p>
                    <p class="contact"><a href="/cdn-cgi/l/email-protection#71101f181d2e1a311c055f181805035f10125f181f"><span class="__cf_email__" data-cfemail="75141b1c192a1e3518015b1c1c01075b14165b1c1b">anil_k@mt.iitr.ac.in</span></a></p>
                    <p class="contact">+91 9651527404</p>
                </div>

                <div class="team-card">
                    <h4>Abishek Verma</h4>
                    <div class="team-avatar"><img src="assets/index_asset/image019.png" alt="Abishek Verma" style="width: 120px; height: 120px; border-radius: 50%;"></div>
                    <p class="role">Social and Cultural Secretary</p>
                    <p class="contact"><a href="/cdn-cgi/l/email-protection#abcac9c3c2d8c3cec0f4ddebcad985c2c2dfd985cac885c2c5"><span class="__cf_email__" data-cfemail="6e0f0c06071d060b0531182e0f1c4007071a1c400f0d400700">abhishek_v@ar.iitr.ac.in</span></a></p>
                    <p class="contact">+91 7651973083</p>
                </div>

                <div class="team-card">
                    <h4>Ashutosh Tripathi</h4>
					<div class="team-avatar"><img src="assets/index_asset/image022.png" alt="Ashutosh Tripathi" style="width: 120px; height: 120px; border-radius: 50%;"></div>
                    <p class="role">Sports Secretary</p>
                    <p class="contact"><a href="/cdn-cgi/l/email-protection#dfbeacb7aaabb0acb780ab9fbabcbaf1b6b6abadf1bebcf1b6b1"><span class="__cf_email__" data-cfemail="7e1f0d160b0a110d16210a3e1b1d1b5017170a0c501f1d501710">ashutosh_t@ece.iitr.ac.in</span></a></p>
                    <p class="contact">+91 8004245833</p>
                </div>

                <div class="team-card">
                    <h4>Suraj Gupta</h4>
                    <div class="team-avatar"><img src="assets/index_asset/image023.png" alt="Suraj Gupta" style="width: 120px; height: 120px; border-radius: 50%;"></div>
                    <p class="role">Wellness Secretary</p>
                    <p class="contact"><a href="/cdn-cgi/l/email-protection#7b080e091a11241c3b18025512120f09551a18551215"><span class="__cf_email__" data-cfemail="05767077646f5a6245667c2b6c6c71772b64662b6c6b">suraj_g@cy.iitr.ac.in</span></a></p>
                    <p class="contact">+91 8299866294</p>
                </div>
            </div>
        </div>

    <!-- Testimonials Section -->
    <section class="section" id="contact">
        <div class="container">
            <h2 class="section-title">Testimonials</h2>
            <p class="section-subtitle">What they are saying about bhawan</p>
            <div class="testimonials-grid">
                <div class="testimonial-card">
                    <div class="quote">"</div>
                    <p>My experience at Azad Bhawan was highly satisfactory and enriching. The calm, disciplined, and academically oriented environment, along with well-maintained facilities and access to sports amenities, provided an excellent setting for focused research work, physical well-being, and personal development. The supportive atmosphere encouraged intellectual growth and effective time management, which proved beneficial for my doctoral studies. Overall, Azad Bhawan offered a secure, well-organized, and motivating residential environment, making it an ideal place for PhD research scholars.</p>
                    <div class="team-avatar"><img src="assets/index_asset/testimonial001.jpeg" alt="Vishal" style="width: 120px; height: 120px; border-radius: 50%;"></div>
					<p class="author">Anil Barik</p>
                    <p class="author-role">Bhawan Resident</p>
                </div>

                <div class="testimonial-card">
                    <div class="quote">"</div>
                    <p>My first day in Hostel made me realise on thing that once we move away from our families we step into the real world and that is when we have to balance both our work life and personal life.
					</p>
					<p></p>
                    <div class="team-avatar"><img src="assets/img/team/Chaitanya_Mess_Secretary.jpg" alt="Reddy Chaitanya" style="width: 120px; height: 120px; border-radius: 50%;"></div>
					<p class="author">Reddy Chaitanya</p>
                    <p class="author-role">Bhawan Resident</p>
                </div>

                <div class="testimonial-card">
                    <div class="quote">"</div>
                    <p>Azad Bhawan is a place where students from every corner of the country come together and live like a family. Whether a problem is big or small, everyone here gets a fair chance to share their thoughts. Cricket is like a religion in Azad Bhawan, it unites everyone with the same passion and energy. In these four years, Azad Bhawan has taught me how to make true friends, stay happy, stand for what's right, and ignore what doesn't matter.</p>
                    <div class="team-avatar"><img src="assets/index_asset/image025.png" alt="Aditya Dhiman" style="width: 120px; height: 120px; border-radius: 50%;"></div>

					<p class="author">Aditya Dhiman</p>
                    <p class="author-role">Bhawan Resident</p>
                </div>
            </div>
        </div>
    </section>

    <!-- Footer -->
    <footer>
        <div class="container">
            <div class="footer-content">
                <div class="footer-section">
                <div class="col-md-4">
				
				<a href="index.html"><img src="assets/img/IITR_Azad_Bhawan_logo.png" alt="IITR_Azad_Bhawan_logo" class="img-fluid"></a>
				<h3>Azad Bhawan</h3>
				<p>A Home Away from Home !</p>
				<div class="social-links">
					<a href="#" class="twitter"><i class="bx bxl-twitter"></i></a>
					<a href="#" class="facebook"><i class="bx bxl-facebook"></i></a>
					<a href="#" class="instagram"><i class="bx bxl-instagram"></i></a>
					<a href="#" class="google-plus"><i class="bx bxl-skype"></i></a>
					<a href="#" class="linkedin"><i class="bx bxl-linkedin"></i></a>
				</div>
				</div>
                   
                </div>

                <div class="footer-section">
                    <h4>Important Links</h4>
                    <ul>
                        <li><a href="https://www.instagram.com/azad_bhawan.iitr?igsh=M2kzeGdwZmtubTIx" target="_blank">Instagram</a></li>
                        <li><a href="https://iitr.ac.in/Main/pages/_en_Indian_Institute_of_Technology_Roorkee__en_.html" target="_blank">DOSW</a></li>
                        <li><a href="https://iitr.ac.in/Departments/index.html" target="_blank">Departments</a></li>
                        <li><a href="https://iitr.ac.in/Administration/index.html" target="_blank">Administration</a></li>
                        <li><a href="" target="_blank">Mess Menu</a></li>
                    </ul>
                </div>

                <div class="footer-section">
                    <h4>Quick Access</h4>
                    <ul>
                        <li><a href="" target="_blank">IITR Webmail</a></li>
                        <li><a href="http://ghbooking.iitr.ac.in/" target="_blank">Book guest house</a></li>
                        <li><a href="https://www.iitr.ac.in/support/" target="_blank">Support @ IITR</a></li>
                        <li><a href="https://alumni.iitr.ac.in/donate" target="_blank">Donate</a></li>
                    </ul>