<!doctype html>
<html lang="en" class="h-full">
 <head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Rotary Club of Patna</title>
  
  <script src="/_sdk/element_sdk.js"></script>
  <script src="https://cdn.tailwindcss.com/3.4.17"></script>
  
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
  <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;600;700&amp;family=Open+Sans:wght@300;400;600;700&amp;display=swap" rel="stylesheet">
  <style>
        :root {
            --primary-blue: #003366;
            --secondary-blue: #1a5276;
            --primary-gold: #d4af37;
            --secondary-gold: #f4d03f;
            --light-gold: #fef9e7;
        }
        
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        html, body {
            height: 100%;
            width: 100%;
        }
        
        body {
            font-family: 'Open Sans', sans-serif;
            background-color: #f8f9fa;
            margin: 0;
            padding: 0;
        }
        
        .main-wrapper {
            width: 100%;
            min-height: 100%;
        }
        
        h1, h2, h3, h4, h5 {
            font-family: 'Playfair Display', serif;
        }
        
        /* Top Bar */
        .top-bar {
            background: linear-gradient(135deg, var(--primary-blue), var(--secondary-blue));
            padding: 8px 0;
        }
        
        .social-links a {
            color: white;
            margin: 0 10px;
            font-size: 1.1rem;
            transition: all 0.3s ease;
        }
        
        .social-links a:hover {
            color: var(--secondary-gold);
            transform: scale(1.2);
        }
        
        /* Header Section */
        .header-section {
            background: #ffffff;
            padding: 7px 0;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        }
        
        .logo-img {
            max-height: 80px;
            padding: 5px;
            transition: transform 0.3s ease;
        }
        
        .logo-img:hover {
            transform: scale(1.05);
        }
        
        .club-title {
            color: var(--primary-blue);
            font-size: 3rem;
            font-weight: 700;
            text-shadow: 1px 1px 2px rgba(0,0,0,0.1);
        }
        
        .tagline {
            color: #0b2995;
            font-size: 1rem;
            font-weight: 1000;
            letter-spacing: 1px;
        }
        
        /* Navigation */
        .main-navbar {
            background: linear-gradient(135deg, var(--primary-gold), var(--secondary-gold)) !important;
            box-shadow: 0 4px 15px rgba(212, 175, 55, 0.4);
        }
        
        .navbar-nav .nav-link {
            color: var(--primary-blue) !important;
            font-weight: 600;
            padding: 15px 20px !important;
            position: relative;
            transition: all 0.3s ease;
        }
        
        .navbar-nav .nav-link::after {
            content: '';
            position: absolute;
            bottom: 10px;
            left: 50%;
            width: 0;
            height: 2px;
            background: var(--primary-blue);
            transition: all 0.3s ease;
            transform: translateX(-50%);
        }
        
        .navbar-nav .nav-link:hover::after {
            width: 70%;
        }
        
        .navbar-nav .nav-link:hover {
            color: var(--secondary-blue) !important;
            transform: translateY(-2px);
        }

 

        .navbar-nav .dropdown-toggle[aria-expanded="true"]::after {
            transform: rotate(180deg);
        }
        
        /* Dropdown Styling */
        .dropdown-menu {
            background: var(--primary-blue);
            border: none;
            border-radius: 0 0 10px 10px;
            box-shadow: 0 10px 30px rgba(0,0,0,0.2);
            animation: dropdownFade 0.3s ease;
            display: none;
            position: absolute;
        }

        .navbar-nav .dropdown:hover .dropdown-menu {
            display: block;
        }

        .navbar-nav .dropdown-toggle[aria-expanded="true"] + .dropdown-menu {
            display: block;
        }
        
        @keyframes dropdownFade {
            from {
                opacity: 0;
                transform: translateY(-10px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }
        
        .dropdown-item {
            color: white !important;
            padding: 12px 20px;
            transition: all 0.3s ease;
            border-left: 3px solid transparent;
        }
        
        .dropdown-item:hover {
            background: var(--secondary-blue);
            border-left-color: var(--primary-gold);
            padding-left: 25px;
        }
        
        /* Slider Section */
		
		
		/* ===== MODERN CUSTOM SLIDER ===== */
.custom-slider {
    position: relative;
    width: 100%;
    height: 80vh;
    overflow: hidden;
}

.slide {
    position: absolute;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 1s ease-in-out, transform 1.2s ease;
}

.slide.active {
    opacity: 1;
    z-index: 2;
}

.slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scale(1.1);
    transition: transform 6s ease;
}

.slide.active img {
    transform: scale(1);
}

/* Overlay */
.slide-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to right, rgba(0,0,0,0.6), rgba(0,0,0,0.2));
}

/* Content */
.slide-content {
    position: absolute;
    bottom: 15%;
    left: 8%;
    color: white;
    max-width: 600px;
    animation: fadeUp 1s ease;
}

.slide-content h2 {
    font-size: 3rem;
    font-weight: 700;
    color: #f4d03f;
}

.slide-content p {
    font-size: 1.2rem;
    margin: 15px 0;
}

.slide-btn {
    background: #d4af37;
    color: #003366;
    padding: 12px 25px;
    border-radius: 5px;
    font-weight: 600;
    text-decoration: none;
}

/* Navigation buttons */
.slider-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(0,0,0,0.5);
    color: white;
    border: none;
    padding: 15px;
    cursor: pointer;
    z-index: 5;
}

.slider-btn:hover {
    background: #d4af37;
    color: #003366;
}

.prev { left: 20px; }
.next { right: 20px; }

/* Dots */
.slider-dots {
    position: absolute;
    bottom: 20px;
    width: 100%;
    text-align: center;
}

.dot {
    display: inline-block;
    width: 12px;
    height: 12px;
    margin: 5px;
    background: #ccc;
    border-radius: 50%;
    cursor: pointer;
}

.dot.active {
    background: #d4af37;
}

/* Animation */
@keyframes fadeUp {
    from {
        opacity: 0;
        transform: translateY(40px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
		
		
		
<!---      .slider-section {
            position: relative;
            overflow: hidden;
        }
        
        .carousel-item img {
            width: 100%;
            height: 500px;
            object-fit: contain;
            background: linear-gradient(135deg, var(--primary-blue), var(--secondary-blue));
        }
        
        .carousel-caption {
            background: rgba(0, 51, 102, 0.85);
            border-radius: 10px;
            padding: 20px 30px;
            animation: slideUp 0.8s ease;
        }
        
        @keyframes slideUp {
            from {
                opacity: 0;
                transform: translateY(50px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }
        
        .carousel-control-prev-icon,
        .carousel-control-next-icon {
            background-color: var(--primary-gold);
            border-radius: 50%;
            padding: 20px;
        }
 ---->       
        /* News Ticker */
        .news-ticker {
            background: #003366;
            padding: 12px 0;
            overflow: hidden;
        }
        
        .ticker-label {
            background: var(--primary-gold);
            color: var(--primary-blue);
            padding: 8px 20px;
            font-weight: 700;
            display: inline-block;
            z-index: 10;
        }
        
        .ticker-wrapper {
            overflow: hidden;
            white-space: nowrap;
        }
        
        .ticker-content {
            display: inline-block;
            animation: ticker 30s linear infinite;
        }
        
        .ticker-content:hover {
            animation-play-state: paused;
        }
        
        @keyframes ticker {
            0% { transform: translateX(100%); }
            100% { transform: translateX(-100%); }
        }
        
        .ticker-item {
            color: blue;
            margin: 0 50px;
            text-decoration: none;
            transition: color 0.3s ease;
        }
        
        .ticker-item:hover {
            color: red;
        }
        
        /* Welcome Section */
        .welcome-section {
            padding: 80px 0;
            background: linear-gradient(to bottom, white, var(--light-gold));
        }
        
        .section-title {
            color: var(--primary-blue);
            position: relative;
            padding-bottom: 20px;
            margin-bottom: 30px;
        }
        
        .section-title::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 50%;
            transform: translateX(-50%);
            width: 100px;
            height: 3px;
            background: linear-gradient(to right, var(--primary-gold), var(--secondary-gold));
        }
        
        .rotary-wheel {
            width: 150px;
            animation: rotate 20s linear infinite;
        }
        
        @keyframes rotate {
            from { transform: rotate(0deg); }
            to { transform: rotate(360deg); }
        }
        
        /* Officials Section */
        .officials-section {
            padding: 80px 0;
            background: var(--primary-blue);
        }
        
        .official-card {
            background: white;
            border-radius: 15px;
            overflow: hidden;
            box-shadow: 0 10px 30px rgba(0,0,0,0.2);
            transition: all 0.4s ease;
            margin-bottom: 30px;
        }
        
        .official-card:hover {
            transform: translateY(-10px);
            box-shadow: 0 20px 40px rgba(0,0,0,0.3);
        }
        
        .official-img-wrapper {
            position: relative;
            overflow: hidden;
        }
        
        .official-img {
            width: 100%;
            height: 250px;
            object-fit: cover;
            transition: transform 0.4s ease;
        }
        
        .official-card:hover .official-img {
            transform: scale(1.1);
        }
        
        .official-overlay {
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            background: linear-gradient(transparent, rgba(0,51,102,0.9));
            padding: 20px;
            transform: translateY(100%);
            transition: transform 0.4s ease;
        }
        
        .official-card:hover .official-overlay {
            transform: translateY(0);
        }
        
        .official-info {
            padding: 20px;
            text-align: center;
        }
        
        .official-name {
            color: var(--primary-blue);
            font-weight: 700;
            margin-bottom: 5px;
        }
        
        .official-designation {
            color: var(--primary-gold);
            font-size: 0.9rem;
        }
        
        /* President Message */
        .president-section {
            padding: 80px 0;
            background: linear-gradient(135deg, var(--light-gold), white);
        }
        
        .president-card {
            background: white;
            border-radius: 20px;
            overflow: hidden;
            box-shadow: 0 20px 50px rgba(0,0,0,0.1);
        }
        
        .president-img {
            width: 100%;
            max-width: 350px;
            border-radius: 15px;
            border: 5px solid var(--primary-gold);
            box-shadow: 0 10px 30px rgba(0,0,0,0.2);
        }
        
        .quote-icon {
            font-size: 4rem;
            color: var(--primary-gold);
            opacity: 0.3;
        }
        
        /* Events Section */
        .events-section {
            padding: 80px 0;
            background: var(--primary-blue);
        }
        
        .event-card {
            background: white;
            border-radius: 15px;
            overflow: hidden;
            box-shadow: 0 10px 30px rgba(0,0,0,0.2);
            transition: all 0.4s ease;
            height: 100%;
        }
        
        .event-card:hover {
            transform: translateY(-10px);
        }
        
        .event-date {
            background: var(--primary-gold);
            color: var(--primary-blue);
            padding: 15px;
            text-align: center;
        }
        
        .event-day {
            font-size: 2.5rem;
            font-weight: 700;
            line-height: 1;
        }
        
        .event-month {
            font-size: 1rem;
            text-transform: uppercase;
        }
        
        .event-content {
            padding: 20px;
        }
        
        .event-badge {
            background: var(--secondary-gold);
            color: var(--primary-blue);
            padding: 5px 15px;
            border-radius: 20px;
            font-size: 0.8rem;
            font-weight: 600;
        }
        
        /* Gallery Section */
        .gallery-section {
            padding: 80px 0;
            background: linear-gradient(to bottom, white, var(--light-gold));
        }
        
        .gallery-item {
            position: relative;
            overflow: hidden;
            border-radius: 15px;
            margin-bottom: 30px;
            cursor: pointer;
        }
        
        .gallery-img {
            width: 100%;
            height: 250px;
            object-fit: cover;
            transition: transform 0.5s ease;
        }
        
        .gallery-item:hover .gallery-img {
            transform: scale(1.1);
        }
        
        .gallery-overlay {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: linear-gradient(transparent 50%, rgba(0,51,102,0.9));
            opacity: 0;
            transition: opacity 0.4s ease;
            display: flex;
            align-items: flex-end;
            padding: 20px;
        }
        
        .gallery-item:hover .gallery-overlay {
            opacity: 1;
        }
        
        .gallery-caption {
            color: white;
            font-weight: 600;
        }
        
        /* Lightbox */
        .lightbox {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(0,0,0,0.95);
            z-index: 9999;
            align-items: center;
            justify-content: center;
            flex-direction: column;
        }
        
        .lightbox.active {
            display: flex;
        }
        
        .lightbox-img {
            max-width: 90%;
            max-height: 80%;
            border-radius: 10px;
        }
        
        .lightbox-caption {
            color: var(--primary-gold);
            margin-top: 20px;
            font-size: 1.2rem;
        }
        
        .lightbox-close {
            position: absolute;
            top: 20px;
            right: 30px;
            color: var(--primary-gold);
            font-size: 2rem;
            cursor: pointer;
            transition: transform 0.3s ease;
        }
        
        .lightbox-close:hover {
            transform: rotate(90deg);
        }
        
        .lightbox-nav {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            color: var(--primary-gold);
            font-size: 2rem;
            cursor: pointer;
            padding: 20px;
            transition: all 0.3s ease;
        }
        
        .lightbox-nav:hover {
            color: var(--secondary-gold);
        }
        
        .lightbox-prev { left: 20px; }
        .lightbox-next { right: 20px; }
        
        /* Testimonials */
        .testimonials-section {
            padding: 80px 0;
            background: var(--primary-blue);
        }
        
        .testimonial-card {
            background: white;
            border-radius: 20px;
            padding: 40px;
            text-align: center;
            box-shadow: 0 20px 50px rgba(0,0,0,0.2);
        }
        
        .testimonial-img {
            width: 100px;
            height: 100px;
            border-radius: 50%;
            border: 4px solid var(--primary-gold);
            margin-bottom: 20px;
            object-fit: cover;
        }
        
        .testimonial-text {
            font-style: italic;
            color: #666;
            line-height: 1.8;
            margin-bottom: 20px;
        }
        
        .testimonial-name {
            color: var(--primary-blue);
            font-weight: 700;
        }
        
        .testimonial-role {
            color: var(--primary-gold);
            font-size: 0.9rem;
        }
        
        /* FAQ Section */
        .faq-section {
            padding: 80px 0;
            background: linear-gradient(to bottom, var(--light-gold), white);
        }
        
        .accordion-button {
            background: var(--primary-blue);
            color: white !important;
            font-weight: 600;
        }
        
        .accordion-button:not(.collapsed) {
            background: var(--secondary-blue);
            color: white;
        }
        
        .accordion-button::after {
            filter: brightness(0) invert(1);
        }
        
        .accordion-body {
            background: white;
            border-left: 4px solid var(--primary-gold);
        }
        
        /* Our Team */
        .team-section {
            padding: 80px 0;
            background: white;
        }
        
        .team-card {
            text-align: center;
            padding: 30px;
            background: var(--light-gold);
            border-radius: 15px;
            transition: all 0.4s ease;
            margin-bottom: 30px;
        }
        
        .team-card:hover {
            transform: translateY(-10px);
            box-shadow: 0 20px 40px rgba(0,0,0,0.1);
        }
        
        .team-img {
            width: 150px;
            height: 150px;
            border-radius: 50%;
            border: 5px solid var(--primary-gold);
            margin-bottom: 20px;
            object-fit: cover;
        }
        
        .team-social a {
            color: var(--primary-blue);
            margin: 0 10px;
            font-size: 1.2rem;
            transition: all 0.3s ease;
        }
        
        .team-social a:hover {
            color: var(--primary-gold);
        }
        
        /* Our Work */
        .work-section {
            padding: 80px 0;
            background: var(--primary-blue);
        }
        
        .work-card {
            background: white;
            border-radius: 15px;
            overflow: hidden;
            transition: all 0.4s ease;
            margin-bottom: 30px;
        }
        
        .work-card:hover {
            transform: scale(1.02);
        }
        
        .work-icon {
            font-size: 3rem;
            color: var(--primary-gold);
            margin-bottom: 20px;
        }
        
        /* Parallax */
        .parallax-section {
            background: linear-gradient(rgba(0,51,102,0.85), rgba(0,51,102,0.85)),
                        url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><circle cx="50" cy="50" r="40" fill="none" stroke="%23d4af37" stroke-width="2"/><path d="M50 10 L50 90 M10 50 L90 50" stroke="%23d4af37" stroke-width="2"/></svg>');
            background-attachment: fixed;
            background-size: 200px;
            padding: 100px 0;
            text-align: center;
            color: white;
        }
        
        .counter-item {
            padding: 30px;
        }
        
        .counter-number {
            font-size: 4rem;
            font-weight: 700;
            color: var(--primary-gold);
        }
        
        .counter-label {
            font-size: 1.2rem;
            text-transform: uppercase;
            letter-spacing: 2px;
        }
        
        /* Contact Section */
        .contact-section {
            padding: 80px 0;
            background: linear-gradient(to bottom, white, var(--light-gold));
        }
        
        .contact-info {
            background: var(--primary-blue);
            padding: 40px;
            border-radius: 15px;
            color: white;
            height: 100%;
        }
        
        .contact-icon {
            color: var(--primary-gold);
            font-size: 1.5rem;
            margin-right: 15px;
        }
        
        .map-container {
            border-radius: 15px;
            overflow: hidden;
            box-shadow: 0 10px 30px rgba(0,0,0,0.2);
        }
        
        /* Footer */
        .main-footer {
            background: var(--primary-blue);
            padding: 60px 0 20px;
            color: white;
        }
        
        .footer-title {
            color: var(--primary-gold);
            font-size: 1.3rem;
            margin-bottom: 20px;
            padding-bottom: 10px;
            border-bottom: 2px solid var(--primary-gold);
        }
        
        .footer-links a {
            color: #ccc;
            text-decoration: none;
            display: block;
            padding: 8px 0;
            transition: all 0.3s ease;
        }
        
        .footer-links a:hover {
            color: var(--primary-gold);
            padding-left: 10px;
        }
        
        .footer-form input,
        .footer-form textarea {
            background: rgba(255,255,255,0.1);
            border: 1px solid rgba(255,255,255,0.2);
            color: white;
            padding: 12px;
            border-radius: 5px;
            margin-bottom: 15px;
        }
        
        .footer-form input::placeholder,
        .footer-form textarea::placeholder {
            color: rgba(255,255,255,0.6);
        }
        
        .footer-form input:focus,
        .footer-form textarea:focus {
            outline: none;
            border-color: var(--primary-gold);
        }
        
        .footer-btn {
            background: var(--primary-gold);
            color: var(--primary-blue);
            border: none;
            padding: 12px 30px;
            font-weight: 600;
            border-radius: 5px;
            transition: all 0.3s ease;
        }
        
        .footer-btn:hover {
            background: var(--secondary-gold);
            transform: translateY(-3px);
        }
        
        .footer-bottom {
            border-top: 1px solid rgba(255,255,255,0.1);
            padding-top: 20px;
            margin-top: 40px;
            text-align: center;
        }
        
        /* Mobile Menu Logo */
        .mobile-menu-logo {
            display: none;
        }
        
        @media (max-width: 991.98px) {
            .right-logo {
                display: none !important;
            }
            
            .mobile-menu-logo {
                display: block;
            }
            
            .club-title {
                font-size: 1.3rem;
            }
            
            .tagline {
                font-size: 0.7rem;
            }
            

<!----------
 
           .carousel-item img {
                height: 300px;
            }
            
            .carousel-item svg {
                height: 192px !important;
            }
            
            .slider-section {
                margin: 0 !important;
                padding: 0 !important;
            }
            
            .carousel-inner {
                margin: 0 !important;
                padding: 0 !important;
            }
            
            .carousel-caption {
                display: none !important;
            }
------>            
            .navbar-collapse {
                background: var(--primary-gold);
                padding: 15px;
                border-radius: 10px;
                margin-top: 10px;
            }
        }
        
        /* Navbar toggler */
        .navbar-toggler {
            border-color: var(--primary-blue);
        }
        
        .navbar-toggler-icon {
            background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%23003366' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
        }
        
        /* Section animation */
        .fade-in-section {
            opacity: 0;
            transform: translateY(30px);
            transition: all 0.8s ease;
        }
        
        .fade-in-section.visible {
            opacity: 1;
            transform: translateY(0);
        }

        /* Image rotation css */
		
		@keyframes spin {
			from { transform: rotate(0deg); }
			to { transform: rotate(360deg); }
			}

		.rotate-image {
			/* Apply the animation: name | duration | timing | iteration-count */
			animation: spin 15s linear infinite;

			/* Optional: ensures the image rotates around its own center */
			transform-origin: center;
			}
			
		.box-shadow {
			rgba(0, 0, 0, 0.25) 0px 54px 55px, rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px, rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px;
			}
			
			

			/* Optional: ensures the image rotates around its own center */
				d_button {
				  border-radius: 4px;
				  background-color: #f4d03f;
				  border: none;
				  color: #fff;
				  text-align: center;
				  font-size: 22px;
				  padding: 5px;
				  width: 150px;
				  transition: all 0.5s;
				  cursor: pointer;
				  margin: 30px;
				  box-shadow: 0 10px 20px -8px rgba(0, 0, 0,.7);
				}

				d_button{
				  cursor: pointer;
				  display: inline-block;
				  position: relative;
				  transition: 0.5s;
				}


		
    </style>
	
	
<style>


.popup{
position: fixed;
top:0;
left:0;
width:100%;
height:100%;
background: rgba(0,0,0,0.6);
display:none;
}

.popup:target{
display:block;
}

.popup-content{
background:#fff;
width:400px;
padding:20px;
margin:100px auto;
position:relative;
border-radius:6px;
}

.close{
position:absolute;
top:10px;
right:15px;
text-decoration:none;
font-size:20px;
color:red;
}



</style>
	
  <style>body { box-sizing: border-box; }</style>
  <script src="/_sdk/data_sdk.js" type="text/javascript"></script>
 </head>
 <body class="h-full">
  <div class="main-wrapper">
   <!-- Top Bar -->
   <div class="top-bar">
    <div class="container">
     <div class="row align-items-center">
      <div class="col-md-6 text-center text-md-start mb-2 mb-md-0">
       <small class="text-white"><i class="fas fa-envelope me-2"></i>president@rotarypatna.org | <i class="fas fa-phone ms-2 me-2"></i>+91 94316 23177</small>
      </div>
      <div class="col-md-6 text-center text-md-end">
       <div class="social-links">
        <a href="#" aria-label="Facebook"><i class="fab fa-facebook-f"></i></a> <a href="#" aria-label="Twitter"><i class="fab fa-twitter"></i></a> <a href="#" aria-label="Instagram"><i class="fab fa-instagram"></i></a> <a href="#" aria-label="YouTube"><i class="fab fa-youtube"></i></a>
       </div>
      </div>
     </div>
    </div>
   </div><!-- Header Section -->
   <header class="header-section">
    <div class="container">
     <div class="row align-items-center">
      <div class="col-3 col-lg-2">
 <!--- <img src="RI_Logo.png" class="rotate-image" width="120" height="auto"/>-->
	<img src="images/Roraty_logo.png" width="130" height="auto"/>
      </div>
      <div class="col-9 col-lg-8 text-center">
       <h1 class="club-title" id="clubName">Rotary Club of Patna</h1>
       <p class="tagline mb-0" id="tagline1">Charitable Society</p>
       <p class="tagline" id="tagline2">RI DIST. - 3250, Club ID- 16052,<br/> Estd. - 1943 </p>
      </div>
      <div class="col-lg-2 d-none d-lg-block text-end right-logo">
	  
		<d_button><span>Donate Now</span></d_button>
		
      </div>
     </div>
    </div>
   </header><!-- Navigation -->
   <nav class="navbar navbar-expand-lg main-navbar sticky-top">
    <div class="container">
     <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#mainNavbar" aria-controls="mainNavbar" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button>
     <div class="collapse navbar-collapse" id="mainNavbar">
      <ul class="navbar-nav mx-auto">
       <li class="nav-item"><a class="nav-link" href="#home">Home</a></li>
       <li class="nav-item dropdown"><a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">About Us</a>
        <ul class="dropdown-menu">
         <li><a class="dropdown-item" href="#welcome">About Rotary</a></li>
         <li><a class="dropdown-item" href="#officials">Our Leadership</a></li>
         <li><a class="dropdown-item" href="#president">President's Message</a></li>
         <li><a class="dropdown-item" href="#team">Board of Directors</a></li>
        </ul></li>
       <li class="nav-item dropdown"><a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">Activities</a>
        <ul class="dropdown-menu">
         <li><a class="dropdown-item" href="#events">Events</a></li>
         <li><a class="dropdown-item" href="#work">Our Projects</a></li>
         <li><a class="dropdown-item" href="#gallery">Photo Gallery</a></li>
        </ul></li>
      <!-- <li class="nav-item"><a class="nav-link" href="#testimonials">Testimonials</a></li>
       <li class="nav-item"><a class="nav-link" href="#faq">FAQ</a></li> -->
       <li class="nav-item"><a class="nav-link" href="#contact">Contact</a></li>
       <li class="nav-item mobile-menu-logo d-lg-none">
        <div class="py-3 text-center">
		<d_button><span>Donate Now</span></d_button>
       <!--  <p class="mb-0 mt-2" style="color: var(--primary-blue); font-weight: 600;">District 3250</p> -->
        </div></li>
      </ul>
     </div>
    </div>
   </nav>
   
<!-- Slider Section -->

<section class="custom-slider" id="home">

    <!-- Slide 1 -->
    <div class="slide active">
        <img src="images/slider/slide1.JPG" alt="">
        <div class="slide-overlay"></div>
        <div class="slide-content">
            <h2>Together We Grow</h2>
            <p>Creating impact in communities through dedication and service.</p>
            <a href="#contact" class="slide-btn">Join Us</a>
        </div>
    </div>

    <!-- Slide 2 -->
    <div class="slide">
        <img src="images/slider/slide2.JPG" alt="">
        <div class="slide-overlay"></div>
        <div class="slide-content">
            <h2>Service Above Self</h2>
            <p>Empowering people and building strong networks.</p>
            <!-- <a href="#events" class="slide-btn">Explore Events</a> -->
        </div>
    </div>

    <!-- Slide 3 -->
    <div class="slide">
        <img src="images/slider/slide3.JPG" alt="">
<!--    <div class="slide-overlay"></div>
        <div class="slide-content">
            <h2>Community First</h2>
            <p>Making a difference where it matters the most.</p>
            <a href="#welcome" class="slide-btn">Learn More</a>
        </div> -->
    </div>
	
    <!-- Slide 4 -->
    <div class="slide">
        <img src="images/slider/slide4.JPG" alt="">
 <!--       <div class="slide-overlay"></div>
            <div class="slide-content">
            <h2>Community First</h2>
            <p>Making a difference where it matters the most.</p>
            <a href="#welcome" class="slide-btn">Learn More</a> 
        </div> -->
    </div>

    <!-- Buttons -->
    <button class="slider-btn prev">&#10094;</button>
    <button class="slider-btn next">&#10095;</button>

    <!-- Dots -->
    <div class="slider-dots"></div>

</section>






<!-- News Ticker -->
   <section class="news-ticker">
    <div class="container-fluid">
     <div class="row align-items-center">
      <div class="col-auto">
       <span class="ticker-label"><i class="fas fa-bullhorn me-2"></i>Latest News</span>
      </div>
      <div class="col ticker-wrapper">
       <div class="ticker-content">
        <a href="#" class="ticker-item"><i class="fas fa-star me-2"></i>Installation of the new team 2026-27 on 5th July 2026</a> <a href="#" class="ticker-item"><i class="fas fa-heart me-2"></i>PELS / SELS at Lucknow on 16th to 18th April 2026</a> <a href="#" class="ticker-item"><i class="fas fa-graduation-cap me-2"></i>Rotary Bihar Excellence Award 2026 on 27th August</a> 
       </div>
      </div>
     </div>
    </div>
   </section><!-- Welcome Section -->
   <section class="welcome-section fade-in-section" id="welcome">
    <div class="container">
     <div class="row align-items-center">
      <div class="col-lg-3 text-center mb-4 mb-lg-0">
	  
<img src="images/RI_Logo.png" class="rotate-image" width="180" height="auto"/>

      </div>
      <div class="col-lg-9">
       <h2 class="section-title" id="welcomeTitle">Welcome to Rotary Club of Patna</h2>
       <p class="lead text-muted mb-4">Where Service Meets Excellence</p>
       <p style="text-align: justify;"><strong>Rotary International</strong> is a worldwide humanitarian organization founded in 1905 by Paul P. Harris in Chicago. It is one of the oldest and most respected service organizations in the world, bringing together business leaders, professionals, and community members to provide humanitarian service, promote goodwill, and advance peace.
	   
	   Rotary has grown into a global network of over 1.4 million members in more than 200 countries and geographical areas. Members, known as Rotarians, work voluntarily to improve communities through sustainable development projects, education, healthcare, sanitation, and disaster relief.
	   </p>
       <p style="text-align: justify;"><strong>Rotary Club of Patna</strong>, established in 1943, is the second oldest Rotary Club in Bihar & Jharkhand and has been actively engaged in community development, healthcare, education, women empowerment, and social welfare for more than eight decades. Our initiatives include the Saheli Centre for Women Empowerment, medical and dental clinics, ambulance services, and scholarships for meritorious students, and infrastructure development in government schools.</p>
       <p style="text-align: justify;">Our club focuses on six key areas: <span style="color: var(blue); font-weight: 600;">Peace and conflict prevention, Disease prevention and treatment, Water and sanitation, Maternal and child health, Basic education and literacy, and Economic and community development.</span></p> 
	   
	   <!-- #092744 #ff4055 -->

       <div class="mt-4">
        <a href="#contact" class="btn btn-lg" style="background: var(--primary-gold); color: var(--primary-blue); font-weight: 600;">Join us <i class="fas fa-arrow-right ms-2"></i></a>
       </div>
      </div>
     </div>
    </div>
   </section><!-- Officials Section -->
   <section class="officials-section fade-in-section" id="officials">
    <div class="container">
     <h2 class="section-title text-center text-white">Club Officials</h2>
     <p class="text-center text-white mb-5">Meet the Leaders Driving Our Mission Forward</p>
     <div class="row">
      <div class="col-md-6 col-lg-3">
       <div class="official-card">
        <div class="official-img-wrapper">
		
		<img src="images/co/dr_ravi_kr_sinha.jpeg" height="100%" width="100%"/>
<!--          <svg class="official-img" viewbox="0 0 300 250" xmlns="http://www.w3.org/2000/svg">
          <rect width="100%" height="100%" fill="#f0f0f0" /> <circle cx="150" cy="100" r="50" fill="#d4af37" /> <circle cx="150" cy="85" r="25" fill="#003366" /> <ellipse cx="150" cy="180" rx="60" ry="40" fill="#003366" />
         </svg> -->
         <div class="official-overlay">
          <div class="text-white">
           <a href="#" class="text-white me-3"><i class="fab fa-linkedin"></i></a> <a href="#" class="text-white me-3"><i class="fas fa-envelope"></i></a> <a href="#" class="text-white"><i class="fas fa-phone"></i></a>
          </div>
         </div>
        </div>
        <div class="official-info">
         <h6 class="official-name">Rtn. Dr. Ravi Kr. Sinha</h6>
         <p class="official-designation">Club President</p>
        </div>
       </div>
      </div>
      <div class="col-md-6 col-lg-3">
       <div class="official-card">
        <div class="official-img-wrapper">
		
		<img src="images/co/Dr._Anamika_Nandan.jpeg" height="100%" width="100%"/>
         <!-- <svg class="official-img" viewbox="0 0 300 250" xmlns="http://www.w3.org/2000/svg">
          <rect width="100%" height="100%" fill="#f5f5f5" /> <circle cx="150" cy="100" r="50" fill="#003366" /> <circle cx="150" cy="85" r="25" fill="#d4af37" /> <ellipse cx="150" cy="180" rx="60" ry="40" fill="#d4af37" />
         </svg> -->
         <div class="official-overlay">
          <div class="text-white">
           <a href="#" class="text-white me-3"><i class="fab fa-linkedin"></i></a> <a href="#" class="text-white me-3"><i class="fas fa-envelope"></i></a> <a href="#" class="text-white"><i class="fas fa-phone"></i></a>
          </div>
         </div>
        </div>
        <div class="official-info">
         <h6 class="official-name">Rtn. Dr. Anamika Nandan</h6>
         <p class="official-designation">Club Vice-President</p>
        </div>
       </div>
      </div>
      <div class="col-md-6 col-lg-3">
       <div class="official-card">
        <div class="official-img-wrapper">
		
		<img src="images/co/dr_dayanidhi_kr.jpeg" height="100%" width="100%"/>
<!--          <svg class="official-img" viewbox="0 0 300 250" xmlns="http://www.w3.org/2000/svg">
          <rect width="100%" height="100%" fill="#fef9e7" /> <circle cx="150" cy="100" r="50" fill="#1a5276" /> <circle cx="150" cy="85" r="25" fill="#f4d03f" /> <ellipse cx="150" cy="180" rx="60" ry="40" fill="#1a5276" />
         </svg> -->
         <div class="official-overlay">
          <div class="text-white">
           <a href="#" class="text-white me-3"><i class="fab fa-linkedin"></i></a> <a href="#" class="text-white me-3"><i class="fas fa-envelope"></i></a> <a href="#" class="text-white"><i class="fas fa-phone"></i></a>
          </div>
         </div>
        </div>
        <div class="official-info">
         <h6 class="official-name">Rtn. Dr. Dayanidhi Kumar</h6>
         <p class="official-designation">Club Secretary</p>
        </div>
       </div>
      </div>
      <div class="col-md-6 col-lg-3">
       <div class="official-card">
        <div class="official-img-wrapper">
		
		<img src="images/co/Sarita_Pd.jpeg" height="100%" width="100%"/>
<!--          <svg class="official-img" viewbox="0 0 300 250" xmlns="http://www.w3.org/2000/svg">
          <rect width="100%" height="100%" fill="#e8f4f8" /> <circle cx="150" cy="100" r="50" fill="#d4af37" /> <circle cx="150" cy="85" r="25" fill="#1a5276" /> <ellipse cx="150" cy="180" rx="60" ry="40" fill="#d4af37" />
         </svg> -->
         <div class="official-overlay">
          <div class="text-white">
           <a href="#" class="text-white me-3"><i class="fab fa-linkedin"></i></a> <a href="#" class="text-white me-3"><i class="fas fa-envelope"></i></a> <a href="#" class="text-white"><i class="fas fa-phone"></i></a>
          </div>
         </div>
        </div>
        <div class="official-info">
         <h6 class="official-name">Rtn. Sarita Prasad</h6>
         <p class="official-designation">Club Treasurer</p>
        </div>
       </div>
      </div>
     </div>
    </div>
   </section><!-- President Message Section -->
   <section class="president-section fade-in-section" id="president">
    <div class="container">
     <h2 class="section-title text-center">President's Message</h2>
     <div class="row justify-content-center">
      <div class="col-lg-10">
       <div class="president-card p-4 p-md-5">
        <div class="row align-items-center">
         <div class="col-md-4 text-center mb-4 mb-md-0">
		 
		 <img src="images/co/dr_ravi_kr_sinha.jpeg" height="100%" width="100%"/>
		 
<!--           <svg class="president-img" viewbox="0 0 300 300" xmlns="http://www.w3.org/2000/svg">
           <rect width="100%" height="100%" fill="#f5f5f5" rx="15" /> <circle cx="150" cy="120" r="60" fill="#003366" /> <circle cx="150" cy="100" r="35" fill="#d4af37" /> <ellipse cx="150" cy="240" rx="80" ry="50" fill="#003366" /> <circle cx="130" cy="95" r="5" fill="#003366" /> <circle cx="170" cy="95" r="5" fill="#003366" /> <path d="M140 115 Q150 125 160 115" stroke="#003366" stroke-width="3" fill="none" />
          </svg> -->
          <h4 class="mt-3" style="color: var(--primary-blue);" id="presidentName">Rtn. Dr. Ravi Kr. Sinha</h4>
          <p style="color: var(--primary-gold);">Club President 2025-26</p>
         </div>
         <div class="col-md-8">
          <i class="fas fa-quote-left quote-icon"></i>
          <p class="mt-3" style="font-size: 1.1rem; line-height: 1.8; color: #555;">Dear Esteemed Members, Partners, and Members of Our Community,</p>
          <p style="line-height: 1.8; text-align: justify;">It is a matter of great pride and privilege to serve as the President of the <strong>Rotary Club of Patna</strong>, working under the noble banner of <strong>Rotary International</strong>. Rotary has always stood as a symbol of service, fellowship, and commitment to humanity, guided by our timeless motto, <strong>"Service Above Self."</strong> </p>
		  
<!-- 		  
          <p style="line-height: 1.8; color: #666; text-align: justify;">As Rotarians, we are united by a shared vision to create lasting positive change in our communities. Our club continues to actively contribute to society through meaningful projects in the seven areas of focus—promoting peace, fighting disease, providing clean water and sanitation, supporting education, saving mothers and children, growing local economies, and protecting the environment.</p> <a href="#popups1">Read more</a> </p> -->
		  
		  <!-- Popup 1 -->
<!-- 			<div id="popups1" class="popup">
			<div class="popup-content">
			<a href="#" class="close">X</a>
			<p>
			I extend my heartfelt appreciation to all our dedicated members whose passion, teamwork, and generosity make every initiative successful. Your unwavering commitment transforms ideas into impactful service and strengthens the spirit of Rotary fellowship. </br>
To our valued community members, partners, and supporters, I offer my sincere gratitude for your trust and collaboration. Together, we have been able to touch many lives through healthcare camps, educational support, environmental initiatives, and humanitarian activities. Your continued encouragement inspires us to reach further and serve better.</br>
As we move forward, our focus remains on expanding our outreach, embracing innovative service projects, and nurturing young leaders who will carry forward the legacy of Rotary. Let us continue to work hand in hand to build stronger communities, uplift the underprivileged, and create a brighter and more sustainable future for all.</br>
I invite each member to actively participate, lead with compassion, and uphold the values that define Rotary. Together, let us continue to make a meaningful difference in the lives of those who need us the most.
		
			</p>
			</div>
			</div> -->
		  <p> Let us continue to build bridges of understanding and create lasting positive change in our society.</p></br>
          <p style="line-height: 1.8; color: #666;">With warm regards and best wishes,</p>
          <p class="mt-4 mb-0" style="font-style: italic; color: var(--primary-blue);"><strong>Yours in Rotary Service,<br>
             Rtn. Dr. Ravi Kr. Sinha</strong></p>
         </div>
        </div>
       </div>
      </div>
     </div>
    </div>
   </section><!-- Events Section -->
   <section class="events-section fade-in-section" id="events">
    <div class="container">
     <h2 class="section-title text-center text-white">Events</h2>
     <div class="row">
      <div class="col-lg-6 mb-4">
       <h3 class="text-white mb-4"><i class="fas fa-history me-2" style="color: var(--primary-gold);"></i>Recent Events</h3>
       <div class="row">
        <div class="col-md-6 mb-4">
         <div class="event-card">
          <div class="event-date">
           <div class="event-day">
            --
           </div>
           <div class="event-month">
            April 2026
           </div>
          </div>
          <div class="event-content">
           <span class="event-badge mb-2">Completed</span>
           <h5 class="mt-2" style="color: var(--primary-blue);">------- -------</h5>
           <p class="text-muted small">---------- ----------- ----------- ---------- ----------.</p>
          </div>
         </div>
        </div>
        <div class="col-md-6 mb-4">
         <div class="event-card">
          <div class="event-date">
           <div class="event-day">
            16 to 18
           </div>
           <div class="event-month">
            April 2026
           </div>
          </div>
          <div class="event-content">
           <span class="event-badge mb-2">Completed</span>
           <h5 class="mt-2" style="color: var(--primary-blue);">PELS / SELS</h5>
           <p class="text-muted small">PELS/SELS at Lucknow on 16 to 18 April 2026.</p>
          </div>
         </div>
        </div>
       </div>
      </div>
      <div class="col-lg-6">
       <h3 class="text-white mb-4"><i class="fas fa-calendar-alt me-2" style="color: var(--primary-gold);"></i>Upcoming Events</h3>
       <div class="row">
        <div class="col-md-6 mb-4">
         <div class="event-card">
          <div class="event-date" style="background: var(--secondary-blue);">
           <div class="event-day" style="color: var(--primary-gold);">
            5
           </div>
           <div class="event-month" style="color: white;">
            July 2026
           </div>
          </div>
          <div class="event-content">
           <span class="event-badge" style="background: var(--primary-blue); color: white;">Upcoming</span>
           <h5 class="mt-2" style="color: var(--primary-blue);">New Team 2026-27</h5>
           <p class="text-muted small">Installation of the new team 2026-27 on 5th July 2026.</p>
          </div>
         </div>
        </div>
        <div class="col-md-6 mb-4">
         <div class="event-card">
          <div class="event-date" style="background: var(--secondary-blue);">
           <div class="event-day" style="color: var(--primary-gold);">
            27
           </div>
           <div class="event-month" style="color: white;">
            August 2026
           </div>
          </div>
          <div class="event-content">
           <span class="event-badge" style="background: var(--primary-blue); color: white;">Upcoming</span>
           <h5 class="mt-2" style="color: var(--primary-blue);">Excellence Award 2026</h5>
           <p class="text-muted small">Rotary Bihar Excellence Award 2026 0n 27th August.</p>
          </div>
         </div>
        </div>
       </div>
      </div>
     </div>
    </div>
   </section><!-- Gallery Section -->
   <section class="gallery-section fade-in-section" id="gallery">
    <div class="container">
     <h2 class="section-title text-center">Signature Projects</h2>
     <p class="text-center text-muted mb-5">-------- ------------ --------- -------</p>
     <div class="row">
      <div class="col-md-4">
       <div class="gallery-item" onclick="openLightbox(0)">
        <svg class="gallery-img" viewbox="0 0 400 250" xmlns="http://www.w3.org/2000/svg">
         <rect width="100%" height="100%" fill="#e8f4f8" /> <circle cx="200" cy="100" r="60" fill="#d4af37" /> <rect x="100" y="180" width="200" height="40" rx="5" fill="#003366" /> <text x="200" y="205" text-anchor="middle" fill="white" font-size="14">
          Blood Donation Camp
         </text>
        </svg>
        <div class="gallery-overlay">
         <div class="gallery-caption">
          <i class="fas fa-search-plus me-2"></i>Blood Donation Camp 2024
         </div>
        </div>
       </div>
      </div>
      <div class="col-md-4">
       <div class="gallery-item" onclick="openLightbox(1)">
        <svg class="gallery-img" viewbox="0 0 400 250" xmlns="http://www.w3.org/2000/svg">
         <rect width="100%" height="100%" fill="#fef9e7" /> <rect x="120" y="60" width="160" height="100" rx="10" fill="#003366" /> <rect x="140" y="80" width="50" height="30" fill="#d4af37" /> <rect x="210" y="80" width="50" height="30" fill="#d4af37" /> <rect x="140" y="120" width="120" height="20" fill="#d4af37" /> <text x="200" y="200" text-anchor="middle" fill="#003366" font-size="14">
          Scholarship Program
         </text>
        </svg>
        <div class="gallery-overlay">
         <div class="gallery-caption">
          <i class="fas fa-search-plus me-2"></i>Scholarship Distribution
         </div>
        </div>
       </div>
      </div>
      <div class="col-md-4">
       <div class="gallery-item" onclick="openLightbox(2)">
        <svg class="gallery-img" viewbox="0 0 400 250" xmlns="http://www.w3.org/2000/svg">
         <rect width="100%" height="100%" fill="#e8f8e8" /> <path d="M200 50 L220 120 L170 120 Z" fill="#228b22" /> <path d="M200 80 L230 150 L160 150 Z" fill="#32cd32" /> <rect x="190" y="150" width="20" height="40" fill="#8b4513" /> <text x="200" y="220" text-anchor="middle" fill="#003366" font-size="14">
          Tree Plantation
         </text>
        </svg>
        <div class="gallery-overlay">
         <div class="gallery-caption">
          <i class="fas fa-search-plus me-2"></i>Environment Day Drive
         </div>
        </div>
       </div>
      </div>
      <div class="col-md-4">
       <div class="gallery-item" onclick="openLightbox(3)">
        <svg class="gallery-img" viewbox="0 0 400 250" xmlns="http://www.w3.org/2000/svg">
         <rect width="100%" height="100%" fill="#f0e8f8" /> <circle cx="150" cy="100" r="40" fill="#d4af37" /> <circle cx="250" cy="100" r="40" fill="#003366" /> <path d="M150 150 Q200 180 250 150" stroke="#d4af37" stroke-width="4" fill="none" /> <text x="200" y="220" text-anchor="middle" fill="#003366" font-size="14">
          Fellowship Meeting
         </text>
        </svg>
        <div class="gallery-overlay">
         <div class="gallery-caption">
          <i class="fas fa-search-plus me-2"></i>Weekly Fellowship
         </div>
        </div>
       </div>
      </div>
      <div class="col-md-4">
       <div class="gallery-item" onclick="openLightbox(4)">
        <svg class="gallery-img" viewbox="0 0 400 250" xmlns="http://www.w3.org/2000/svg">
         <rect width="100%" height="100%" fill="#fff0f0" /> <rect x="100" y="60" width="200" height="120" rx="10" fill="#fff" /> <circle cx="200" cy="120" r="30" fill="#ff6b6b" /> <path d="M185 120 L195 130 L220 105" stroke="white" stroke-width="4" fill="none" /> <text x="200" y="220" text-anchor="middle" fill="#003366" font-size="14">
          Health Camp
         </text>
        </svg>
        <div class="gallery-overlay">
         <div class="gallery-caption">
          <i class="fas fa-search-plus me-2"></i>Free Health Checkup Camp
         </div>
        </div>
       </div>
      </div>
      <div class="col-md-4">
       <div class="gallery-item" onclick="openLightbox(5)">
        <svg class="gallery-img" viewbox="0 0 400 250" xmlns="http://www.w3.org/2000/svg">
         <rect width="100%" height="100%" fill="#f8f8e8" /> <rect x="120" y="50" width="160" height="100" rx="5" fill="#d4af37" /> <text x="200" y="110" text-anchor="middle" fill="#003366" font-size="20" font-weight="bold">
          AWARD
         </text> <circle cx="200" cy="180" r="20" fill="#003366" /> <text x="200" y="220" text-anchor="middle" fill="#003366" font-size="14">
          Award Ceremony
         </text>
        </svg>
        <div class="gallery-overlay">
         <div class="gallery-caption">
          <i class="fas fa-search-plus me-2"></i>Annual Award Night
         </div>
        </div>
       </div>
      </div>
     </div>
    </div>
   </section><!-- Lightbox -->
   <div class="lightbox" id="lightbox">
    <span class="lightbox-close" onclick="closeLightbox()">×</span> <span class="lightbox-nav lightbox-prev" onclick="changeLightboxImage(-1)"><i class="fas fa-chevron-left"></i></span>
    <div id="lightbox-content"></div><span class="lightbox-nav lightbox-next" onclick="changeLightboxImage(1)"><i class="fas fa-chevron-right"></i></span>
    <p class="lightbox-caption" id="lightbox-caption"></p>
   </div>
   
   <!-- Testimonials Section -->
   <!------
   <section class="testimonials-section fade-in-section" id="testimonials">
    <div class="container">
     <h2 class="section-title text-center text-white">Testimonials</h2>
     <p class="text-center text-white mb-5">What People Say About Us</p>
     <div id="testimonialCarousel" class="carousel slide" data-bs-ride="carousel">
      <div class="carousel-inner">
       <div class="carousel-item active">
        <div class="row justify-content-center">
         <div class="col-lg-8">
          <div class="testimonial-card">
           <svg class="testimonial-img" viewbox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
            <circle cx="50" cy="50" r="48" fill="#f5f5f5" /> <circle cx="50" cy="40" r="20" fill="#003366" /> <ellipse cx="50" cy="85" rx="30" ry="20" fill="#003366" />
           </svg>
           <p class="testimonial-text">"Rotary Club of Patna has been instrumental in transforming lives across our community. Their dedication to education and healthcare is truly commendable. I am proud to be associated with such an incredible organization."</p>
           <h5 class="testimonial-name">Dr. Ramesh Kumar</h5>
           <p class="testimonial-role">Former District Governor</p>
          </div>
         </div>
        </div>
       </div>
       <div class="carousel-item">
        <div class="row justify-content-center">
         <div class="col-lg-8">
          <div class="testimonial-card">
           <svg class="testimonial-img" viewbox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
            <circle cx="50" cy="50" r="48" fill="#fef9e7" /> <circle cx="50" cy="40" r="20" fill="#d4af37" /> <ellipse cx="50" cy="85" rx="30" ry="20" fill="#d4af37" />
           </svg>
           <p class="testimonial-text">"The scholarship I received from Rotary Club of Patna changed my life. Today, I am a successful engineer, and I owe it all to their generous support and encouragement during my difficult times."</p>
           <h5 class="testimonial-name">Anjali Singh</h5>
           <p class="testimonial-role">Scholarship Recipient 2018</p>
          </div>
         </div>
        </div>
       </div>
       <div class="carousel-item">
        <div class="row justify-content-center">
         <div class="col-lg-8">
          <div class="testimonial-card">
           <svg class="testimonial-img" viewbox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
            <circle cx="50" cy="50" r="48" fill="#e8f4f8" /> <circle cx="50" cy="40" r="20" fill="#1a5276" /> <ellipse cx="50" cy="85" rx="30" ry="20" fill="#1a5276" />
           </svg>
           <p class="testimonial-text">"Being a member of Rotary Club of Patna has been the most fulfilling experience of my life. The fellowship, the service projects, and the opportunity to give back to society is unparalleled."</p>
           <h5 class="testimonial-name">Rtn. Vikram Jha</h5>
           <p class="testimonial-role">Charter Member</p>
          </div>
         </div>
        </div>
       </div>
      </div><button class="carousel-control-prev" type="button" data-bs-target="#testimonialCarousel" data-bs-slide="prev"> <span class="carousel-control-prev-icon" aria-hidden="true"></span> <span class="visually-hidden">Previous</span> </button> <button class="carousel-control-next" type="button" data-bs-target="#testimonialCarousel" data-bs-slide="next"> <span class="carousel-control-next-icon" aria-hidden="true"></span> <span class="visually-hidden">Next</span> </button>
     </div>
    </div>
	
---------->



   </section><!-- FAQ Section -->
   	<!---
   <section class="faq-section fade-in-section" id="faq">
    <div class="container">
     <h2 class="section-title text-center">Frequently Asked Questions</h2>
     <div class="row justify-content-center">
      <div class="col-lg-8">
       <div class="accordion" id="faqAccordion">
        <div class="accordion-item mb-3" style="border: none; border-radius: 10px; overflow: hidden;">
         <h2 class="accordion-header"><button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#faq1" aria-expanded="true" aria-controls="faq1"> <i class="fas fa-question-circle me-2" style="color: var(--primary-gold);"></i>What is Rotary International? </button></h2>
         <div id="faq1" class="accordion-collapse collapse show" data-bs-parent="#faqAccordion">
          <div class="accordion-body">
           Rotary International is a global network of 1.4 million neighbors, friends, leaders, and problem-solvers who see a world where people unite and take action to create lasting change. Founded in 1905, Rotary is the world's first service club organization.
          </div>
         </div>
        </div>
        <div class="accordion-item mb-3" style="border: none; border-radius: 10px; overflow: hidden;">
         <h2 class="accordion-header"><button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#faq2" aria-expanded="false" aria-controls="faq2"> <i class="fas fa-question-circle me-2" style="color: var(--primary-gold);"></i>How can I become a member? </button></h2>
         <div id="faq2" class="accordion-collapse collapse" data-bs-parent="#faqAccordion">
          <div class="accordion-body">
           To become a member, you need to be a business or professional leader who is willing to give back to the community. You can contact us through our website or visit any of our weekly meetings. Existing members can also sponsor new members.
          </div>
         </div>
        </div>
        <div class="accordion-item mb-3" style="border: none; border-radius: 10px; overflow: hidden;">
         <h2 class="accordion-header"><button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#faq3" aria-expanded="false" aria-controls="faq3"> <i class="fas fa-question-circle me-2" style="color: var(--primary-gold);"></i>What are the benefits of joining Rotary? </button></h2>
         <div id="faq3" class="accordion-collapse collapse" data-bs-parent="#faqAccordion">
          <div class="accordion-body">
           Members enjoy networking opportunities, professional development, community service involvement, international fellowship, leadership skills development, and the satisfaction of making a positive impact in their community and around the world.
          </div>
         </div>
        </div>
        <div class="accordion-item mb-3" style="border: none; border-radius: 10px; overflow: hidden;">
         <h2 class="accordion-header"><button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#faq4" aria-expanded="false" aria-controls="faq4"> <i class="fas fa-question-circle me-2" style="color: var(--primary-gold);"></i>When do you meet? </button></h2>
         <div id="faq4" class="accordion-collapse collapse" data-bs-parent="#faqAccordion">
          <div class="accordion-body">
           Rotary Club of Patna meets every Tuesday at 7:00 PM at Hotel Maurya, South Gandhi Maidan, Patna. We also organize various service projects and fellowship events throughout the year.
          </div>
         </div>
        </div>
       </div>
      </div>
     </div>
    </div>
   </section>
   -------->
   
   <!-- Our Team Section -->
   <section class="team-section fade-in-section" id="team">
    <div class="container">
     <h2 class="section-title text-center">Board of Directors</h2>
     <p class="text-center text-muted mb-5">The Dedicated Members Behind Our Success</p>
     <div class="row">
      <div class="col-md-6 col-lg-3">
       <div class="team-card">
        <svg class="team-img" viewbox="0 0 150 150" xmlns="http://www.w3.org/2000/svg">
         <circle cx="75" cy="75" r="73" fill="#fff" stroke="#d4af37" stroke-width="4" /> <circle cx="75" cy="60" r="25" fill="#003366" /> <ellipse cx="75" cy="120" rx="35" ry="25" fill="#003366" />
        </svg>
        <h5 style="color: var(--primary-blue);">Rtn. --------</h5>
        <p style="color: var(--primary-gold);">----------</p>
        <div class="team-social">
         <a href="#"><i class="fab fa-linkedin"></i></a> <a href="#"><i class="fas fa-envelope"></i></a> <a href="#"><i class="fas fa-phone"></i></a>
        </div>
       </div>
      </div>
      <div class="col-md-6 col-lg-3">
       <div class="team-card">
        <svg class="team-img" viewbox="0 0 150 150" xmlns="http://www.w3.org/2000/svg">
         <circle cx="75" cy="75" r="73" fill="#fff" stroke="#d4af37" stroke-width="4" /> <circle cx="75" cy="60" r="25" fill="#d4af37" /> <ellipse cx="75" cy="120" rx="35" ry="25" fill="#d4af37" />
        </svg>
        <h5 style="color: var(--primary-blue);">Rtn. -----</h5>
        <p style="color: var(--primary-gold);">----------</p>
        <div class="team-social">
         <a href="#"><i class="fab fa-linkedin"></i></a> <a href="#"><i class="fas fa-envelope"></i></a> <a href="#"><i class="fas fa-phone"></i></a>
        </div>
       </div>
      </div>
      <div class="col-md-6 col-lg-3">
       <div class="team-card">
        <svg class="team-img" viewbox="0 0 150 150" xmlns="http://www.w3.org/2000/svg">
         <circle cx="75" cy="75" r="73" fill="#fff" stroke="#d4af37" stroke-width="4" /> <circle cx="75" cy="60" r="25" fill="#1a5276" /> <ellipse cx="75" cy="120" rx="35" ry="25" fill="#1a5276" />
        </svg>
        <h5 style="color: var(--primary-blue);">-----------</h5>
        <p style="color: var(--primary-gold);">--------------</p>
        <div class="team-social">
         <a href="#"><i class="fab fa-linkedin"></i></a> <a href="#"><i class="fas fa-envelope"></i></a> <a href="#"><i class="fas fa-phone"></i></a>
        </div>
       </div>
      </div>
      <div class="col-md-6 col-lg-3">
       <div class="team-card">
        <svg class="team-img" viewbox="0 0 150 150" xmlns="http://www.w3.org/2000/svg">
         <circle cx="75" cy="75" r="73" fill="#fff" stroke="#d4af37" stroke-width="4" /> <circle cx="75" cy="60" r="25" fill="#003366" /> <ellipse cx="75" cy="120" rx="35" ry="25" fill="#003366" />
        </svg>
        <h5 style="color: var(--primary-blue);">----------</h5>
        <p style="color: var(--primary-gold);">--------------</p>
        <div class="team-social">
         <a href="#"><i class="fab fa-linkedin"></i></a> <a href="#"><i class="fas fa-envelope"></i></a> <a href="#"><i class="fas fa-phone"></i></a>
        </div>
       </div>
      </div>
     </div>
    </div>
   </section><!-- Our Work Section -->
   <section class="work-section fade-in-section" id="work">
    <div class="container">
     <h2 class="section-title text-center text-white">Our Areas of Focus</h2>
     <p class="text-center text-white mb-5">Making a Difference Through Strategic Action</p>
     <div class="row">
      <div class="col-md-6 col-lg-4">
       <div class="work-card text-center p-4">
        <div class="work-icon"><i class="fas fa-heartbeat"></i>
        </div>
        <h5 style="color: var(--primary-blue);">Healthcare</h5>
        <p class="text-muted">Free health camps, medical equipment donation, and awareness programs for preventive healthcare.</p>
       </div>
      </div>
      <div class="col-md-6 col-lg-4">
       <div class="work-card text-center p-4">
        <div class="work-icon"><i class="fas fa-graduation-cap"></i>
        </div>
        <h5 style="color: var(--primary-blue);">Education</h5>
        <p class="text-muted">Scholarships, school supplies, digital literacy programs, and support for underprivileged students.</p>
       </div>
      </div>
      <div class="col-md-6 col-lg-4">
       <div class="work-card text-center p-4">
        <div class="work-icon"><i class="fas fa-tint"></i>
        </div>
        <h5 style="color: var(--primary-blue);">Water &amp; Sanitation</h5>
        <p class="text-muted">Clean water projects, sanitation facilities, and hygiene awareness in rural communities.</p>
       </div>
      </div>
      <div class="col-md-6 col-lg-4">
       <div class="work-card text-center p-4">
        <div class="work-icon"><i class="fas fa-child"></i>
        </div>
        <h5 style="color: var(--primary-blue);">Child Welfare</h5>
        <p class="text-muted">Nutrition programs, immunization drives, and support for orphanages and children's homes.</p>
       </div>
      </div>
      <div class="col-md-6 col-lg-4">
       <div class="work-card text-center p-4">
        <div class="work-icon"><i class="fas fa-briefcase"></i>
        </div>
        <h5 style="color: var(--primary-blue);">Economic Development</h5>
        <p class="text-muted">Skill development, vocational training, and micro-finance support for entrepreneurs.</p>
       </div>
      </div>
      <div class="col-md-6 col-lg-4">
       <div class="work-card text-center p-4">
        <div class="work-icon"><i class="fas fa-leaf"></i>
        </div>
        <h5 style="color: var(--primary-blue);">Environment</h5>
        <p class="text-muted">Tree plantation drives, clean-up campaigns, and environmental awareness programs.</p>
       </div>
      </div>
     </div>
    </div>
   </section><!-- Parallax Section -->
   <section class="parallax-section fade-in-section">
    <div class="container">
     <h2 class="mb-5" style="font-size: 2.5rem;">Our Impact in Numbers</h2>
     <div class="row">
      <div class="col-md-3 col-6">
       <div class="counter-item">
        <div class="counter-number" data-target="77">
         0
        </div>
        <div class="counter-label">
         Years of Service
        </div>
       </div>
      </div>
      <div class="col-md-3 col-6">
       <div class="counter-item">
        <div class="counter-number" data-target="150">
         0
        </div>
        <div class="counter-label">
         Active Members
        </div>
       </div>
      </div>
      <div class="col-md-3 col-6">
       <div class="counter-item">
        <div class="counter-number" data-target="500">
         0
        </div>
        <div class="counter-label">
         Projects Completed
        </div>
       </div>
      </div>
      <div class="col-md-3 col-6">
       <div class="counter-item">
        <div class="counter-number" data-target="10000">
         0
        </div>
        <div class="counter-label">
         Lives Impacted
        </div>
       </div>
      </div>
     </div>
    </div>
   </section><!-- Contact Section -->
   <section class="contact-section fade-in-section" id="contact">
    <div class="container">
     <h2 class="section-title text-center">Contact Us</h2>
     <div class="row">
      <div class="col-lg-6 mb-4">
       <div class="contact-info">
        <h4 class="mb-4" style="color: var(--primary-gold);">Get in Touch</h4>
        <div class="mb-4">
         <p><i class="fas fa-map-marker-alt contact-icon"></i>Rotary Bhawan, Birchand Patel Path, Near R-Block Golambar, Opp. Son Bhawan, Patna 800001, Bihar, India.</p>
        </div>
        <div class="mb-4">
 <!--        <p><i class="fas fa-phone contact-icon"></i>+91 00000 00000</p> -->
         <p><i class="fas fa-mobile-alt contact-icon"></i>+91 94316 23177</p>
        </div>
        <div class="mb-4">
         <p><i class="fas fa-envelope contact-icon"></i>president@rotarypatna.org</p>
         <p><i class="fas fa-globe contact-icon"></i>www.rotarypatna.org</p>
        </div>
        <div>
         <p><i class="fas fa-clock contact-icon"></i>Weekly Meetings: Monday at 7:00 PM</p>
         <p><i class="fas fa-building contact-icon"></i>Venue: Rotary Bhawan, Patna</p>
        </div>
       </div>
      </div>
      <div class="col-lg-6">
       <div class="map-container">
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d1923.2179610137407!2d85.1250307990801!3d25.600674701410984!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x140d7ee50b91729f%3A0xea0cc7523dc6e255!2sRotary%20Bhawan%2C%20Patna!5e1!3m2!1sen!2sin!4v1776151377240!5m2!1sen!2sin" width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
       </div>
      </div>
     </div>
    </div>
   </section><!-- Footer -->
   <footer class="main-footer">
    <div class="container">
     <div class="row">
      <div class="col-lg-4 mb-4">
       <h4 class="footer-title">About Rotary</h4>
       <p class="text-white-50">Rotary Club of Patna is part of Rotary International, a global network dedicated to community service. We bring together business and professional leaders to provide humanitarian service and promote peace.</p>
       <div class="mt-4">
        <a href="#" class="text-white me-3 fs-4"><i class="fab fa-facebook-f"></i></a> <a href="#" class="text-white me-3 fs-4"><i class="fab fa-twitter"></i></a> <a href="#" class="text-white me-3 fs-4"><i class="fab fa-instagram"></i></a> <a href="#" class="text-white fs-4"><i class="fab fa-youtube"></i></a>
       </div>
      </div>
      <div class="col-lg-4 mb-4">
       <h4 class="footer-title">Quick Links</h4>
       <div class="footer-links">
        <a href="#home"><i class="fas fa-chevron-right me-2"></i>Home</a> <a href="#welcome"><i class="fas fa-chevron-right me-2"></i>About Us</a> <a href="#events"><i class="fas fa-chevron-right me-2"></i>Events</a> <a href="#gallery"><i class="fas fa-chevron-right me-2"></i>Gallery</a> <a href="#"><i class="fas fa-chevron-right me-2"></i>Join us</a>
       </div>
      </div>
      <div class="col-lg-4 mb-4">
       <h4 class="footer-title">Important Links</h4>
	   
	          <div class="footer-links">
        <a href="#home"><i class="fas fa-chevron-right me-2"></i>Rotary International</a> <a href="#welcome"><i class="fas fa-chevron-right me-2"></i>Rotary Foundation</a> <a href="#events"><i class="fas fa-chevron-right me-2"></i>Rotary India</a> <a href="#home"><i class="fas fa-chevron-right me-2"></i>Donation</a> 
       </div>
	   
 <!--      <form class="footer-form" onsubmit="handleEnquiry(event)">
        <label for="enquiry-name" class="visually-hidden">Your Name</label> <input type="text" id="enquiry-name" class="form-control" placeholder="Your Name" required> <label for="enquiry-email" class="visually-hidden">Your Email</label> <input type="email" id="enquiry-email" class="form-control" placeholder="Your Email" required> <label for="enquiry-message" class="visually-hidden">Your Message</label> <textarea id="enquiry-message" class="form-control" rows="3" placeholder="Your Message" required></textarea> <button type="submit" class="footer-btn w-100">Send Message <i class="fas fa-paper-plane ms-2"></i></button>
       </form>
       <div id="enquiry-success" class="mt-3 text-center" style="display: none;">
        <span class="text-success"><i class="fas fa-check-circle me-2"></i>Message sent successfully!</span>
       </div>
	    ----->
      </div>
     </div>
     <div class="footer-bottom">
      <p class="mb-0">© 2026 Rotary Club of Patna. All Rights Reserved. | District 3250</p>
     </div>
    </div>
   </footer>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
  <script>
        // Default config
        const defaultConfig = {
            club_name: 'Rotary Club of Patna',
            tagline_1: 'Service Above Self',
            tagline_2: 'Serving Humanity Since 1947',
            welcome_title: 'Welcome to Rotary Club of Patna',
            president_name: 'Rtn. Amit Sinha',
            primary_color: '#003366',
            secondary_color: '#d4af37',
            text_color: '#333333',
            background_color: '#f8f9fa',
            accent_color: '#1a5276'
        };

        // Gallery data
        const galleryData = [
            { svg: 'blood', caption: 'Blood Donation Camp 2024' },
            { svg: 'scholarship', caption: 'Scholarship Distribution' },
            { svg: 'tree', caption: 'Environment Day Drive' },
            { svg: 'fellowship', caption: 'Weekly Fellowship' },
            { svg: 'health', caption: 'Free Health Checkup Camp' },
            { svg: 'award', caption: 'Annual Award Night' }
        ];

        let currentLightboxIndex = 0;

        // Initialize Element SDK
        if (window.elementSdk) {
            window.elementSdk.init({
                defaultConfig,
                onConfigChange: async (config) => {
                    document.getElementById('clubName').textContent = config.club_name || defaultConfig.club_name;
                    document.getElementById('tagline1').textContent = config.tagline_1 || defaultConfig.tagline_1;
                    document.getElementById('tagline2').textContent = config.tagline_2 || defaultConfig.tagline_2;
                    document.getElementById('welcomeTitle').textContent = config.welcome_title || defaultConfig.welcome_title;
                    document.getElementById('presidentName').textContent = config.president_name || defaultConfig.president_name;
                },
                mapToCapabilities: (config) => ({
                    recolorables: [
                        {
                            get: () => config.background_color || defaultConfig.background_color,
                            set: (value) => { config.background_color = value; window.elementSdk.setConfig({ background_color: value }); }
                        },
                        {
                            get: () => config.primary_color || defaultConfig.primary_color,
                            set: (value) => { config.primary_color = value; window.elementSdk.setConfig({ primary_color: value }); }
                        },
                        {
                            get: () => config.text_color || defaultConfig.text_color,
                            set: (value) => { config.text_color = value; window.elementSdk.setConfig({ text_color: value }); }
                        },
                        {
                            get: () => config.secondary_color || defaultConfig.secondary_color,
                            set: (value) => { config.secondary_color = value; window.elementSdk.setConfig({ secondary_color: value }); }
                        },
                        {
                            get: () => config.accent_color || defaultConfig.accent_color,
                            set: (value) => { config.accent_color = value; window.elementSdk.setConfig({ accent_color: value }); }
                        }
                    ],
                    borderables: [],
                    fontEditable: undefined,
                    fontSizeable: undefined
                }),
                mapToEditPanelValues: (config) => new Map([
                    ['club_name', config.club_name || defaultConfig.club_name],
                    ['tagline_1', config.tagline_1 || defaultConfig.tagline_1],
                    ['tagline_2', config.tagline_2 || defaultConfig.tagline_2],
                    ['welcome_title', config.welcome_title || defaultConfig.welcome_title],
                    ['president_name', config.president_name || defaultConfig.president_name]
                ])
            });
        }

        // Lightbox functions
        function openLightbox(index) {
            currentLightboxIndex = index;
            const lightbox = document.getElementById('lightbox');
            const content = document.getElementById('lightbox-content');
            const caption = document.getElementById('lightbox-caption');
            
            const svgContent = document.querySelectorAll('.gallery-item svg')[index].outerHTML;
            content.innerHTML = svgContent.replace('class="gallery-img"', 'class="lightbox-img" style="width: 80%; max-width: 800px; height: auto;"');
            caption.textContent = galleryData[index].caption;
            lightbox.classList.add('active');
        }

        function closeLightbox() {
            document.getElementById('lightbox').classList.remove('active');
        }

        function changeLightboxImage(direction) {
            currentLightboxIndex = (currentLightboxIndex + direction + galleryData.length) % galleryData.length;
            openLightbox(currentLightboxIndex);
        }

        // Close lightbox on escape key
        document.addEventListener('keydown', (e) => {
            if (e.key === 'Escape') closeLightbox();
            if (e.key === 'ArrowLeft') changeLightboxImage(-1);
            if (e.key === 'ArrowRight') changeLightboxImage(1);
        });

        // Back to top functionality removed

        // Counter animation
        function animateCounters() {
            const counters = document.querySelectorAll('.counter-number');
            counters.forEach(counter => {
                const target = parseInt(counter.getAttribute('data-target'));
                const duration = 2000;
                const increment = target / (duration / 16);
                let current = 0;

                const updateCounter = () => {
                    current += increment;
                    if (current < target) {
                        counter.textContent = Math.floor(current).toLocaleString();
                        requestAnimationFrame(updateCounter);
                    } else {
                        counter.textContent = target.toLocaleString() + '+';
                    }
                };

                updateCounter();
            });
        }

        // Intersection Observer for animations
        const observerOptions = {
            threshold: 0.2,
            rootMargin: '0px'
        };

        const observer = new IntersectionObserver((entries) => {
            entries.forEach(entry => {
                if (entry.isIntersecting) {
                    entry.target.classList.add('visible');
                    if (entry.target.querySelector('.counter-number')) {
                        animateCounters();
                    }
                }
            });
        }, observerOptions);

        document.querySelectorAll('.fade-in-section').forEach(section => {
            observer.observe(section);
        });

        // Form submission handler
        function handleEnquiry(event) {
            event.preventDefault();
            const successMsg = document.getElementById('enquiry-success');
            successMsg.style.display = 'block';
            event.target.reset();
            setTimeout(() => {
                successMsg.style.display = 'none';
            }, 3000);
        }

        // Smooth scroll for navigation links
        document.querySelectorAll('a[href^="#"]').forEach(anchor => {
            anchor.addEventListener('click', function (e) {
                e.preventDefault();
                const target = document.querySelector(this.getAttribute('href'));
                if (target) {
                    target.scrollIntoView({
                        behavior: 'smooth',
                        block: 'start'
                    });
                    // Close mobile menu if open
                    const navCollapse = document.getElementById('mainNavbar');
                    if (navCollapse.classList.contains('show')) {
                        bootstrap.Collapse.getInstance(navCollapse).hide();
                    }
                }
            });
        });
    </script>
 <script>(function(){function c(){var b=a.contentDocument||a.contentWindow.document;if(b){var d=b.createElement('script');d.innerHTML="window.__CF$cv$params={r:'9d81c5e0b362c08b',t:'MTc3MjgwNDQzNS4wMDAwMDA='};var a=document.createElement('script');a.nonce='';a.src='/cdn-cgi/challenge-platform/scripts/jsd/main.js';document.getElementsByTagName('head')[0].appendChild(a);";b.getElementsByTagName('head')[0].appendChild(d)}}if(document.body){var a=document.createElement('iframe');a.height=1;a.width=1;a.style.position='absolute';a.style.top=0;a.style.left=0;a.style.border='none';a.style.visibility='hidden';document.body.appendChild(a);if('loading'!==document.readyState)c();else if(window.addEventListener)document.addEventListener('DOMContentLoaded',c);else{var e=document.onreadystatechange||function(){};document.onreadystatechange=function(b){e(b);'loading'!==document.readyState&&(document.onreadystatechange=e,c())}}}})();</script>
 
 <script>
const slides = document.querySelectorAll('.slide');
const nextBtn = document.querySelector('.next');
const prevBtn = document.querySelector('.prev');
const dotsContainer = document.querySelector('.slider-dots');

let index = 0;

// Create dots
slides.forEach((_, i) => {
    const dot = document.createElement('span');
    dot.classList.add('dot');
    if(i === 0) dot.classList.add('active');
    dot.addEventListener('click', () => goToSlide(i));
    dotsContainer.appendChild(dot);
});

const dots = document.querySelectorAll('.dot');

function showSlide(i){
    slides.forEach(s => s.classList.remove('active'));
    dots.forEach(d => d.classList.remove('active'));

    slides[i].classList.add('active');
    dots[i].classList.add('active');
}

function nextSlide(){
    index = (index + 1) % slides.length;
    showSlide(index);
}

function prevSlide(){
    index = (index - 1 + slides.length) % slides.length;
    showSlide(index);
}

function goToSlide(i){
    index = i;
    showSlide(index);
}

// Auto slide
setInterval(nextSlide, 5000);

// Buttons
nextBtn.addEventListener('click', nextSlide);
prevBtn.addEventListener('click', prevSlide);
</script>
 
 
 </body>
</html>