<!-- ===== DEBUG INFORMATION ===== -->
<!-- Total Records Found: 38 -->
<!-- Record 1 -->
<!-- ID: 33 -->
<!-- Category: Bank -->
<!-- Image Size: 103749 bytes -->
<!-- Image Hex: ffd8ffe0 -->
<!-- Image Type: JPEG -->
<!-- Record 2 -->
<!-- ID: 32 -->
<!-- Category: Bank -->
<!-- Image Size: 220912 bytes -->
<!-- Image Hex: ffd8ffe0 -->
<!-- Image Type: JPEG -->
<!-- Record 3 -->
<!-- ID: 31 -->
<!-- Category: Bank -->
<!-- Image Size: 180321 bytes -->
<!-- Image Hex: ffd8ffe0 -->
<!-- Image Type: JPEG -->
<!-- Record 4 -->
<!-- ID: 30 -->
<!-- Category: Bank -->
<!-- Image Size: 160099 bytes -->
<!-- Image Hex: ffd8ffe0 -->
<!-- Image Type: JPEG -->
<!-- Record 5 -->
<!-- ID: 29 -->
<!-- Category: Bank -->
<!-- Image Size: 173653 bytes -->
<!-- Image Hex: ffd8ffe0 -->
<!-- Image Type: JPEG -->
<!-- Record 6 -->
<!-- ID: 28 -->
<!-- Category: Bank -->
<!-- Image Size: 155541 bytes -->
<!-- Image Hex: ffd8ffe0 -->
<!-- Image Type: JPEG -->
<!-- Record 7 -->
<!-- ID: 27 -->
<!-- Category: Bank -->
<!-- Image Size: 171339 bytes -->
<!-- Image Hex: ffd8ffe0 -->
<!-- Image Type: JPEG -->
<!-- Record 8 -->
<!-- ID: 26 -->
<!-- Category: Bank -->
<!-- Image Size: 182779 bytes -->
<!-- Image Hex: ffd8ffe0 -->
<!-- Image Type: JPEG -->
<!-- Record 9 -->
<!-- ID: 25 -->
<!-- Category: Bank -->
<!-- Image Size: 135862 bytes -->
<!-- Image Hex: ffd8ffe0 -->
<!-- Image Type: JPEG -->
<!-- Record 10 -->
<!-- ID: 4 -->
<!-- Category: Bank -->
<!-- Image Size: 164469 bytes -->
<!-- Image Hex: ffd8ffe0 -->
<!-- Image Type: JPEG -->
<!-- Record 11 -->
<!-- ID: 3 -->
<!-- Category: Bank -->
<!-- Image Size: 103351 bytes -->
<!-- Image Hex: ffd8ffe0 -->
<!-- Image Type: JPEG -->
<!-- Record 12 -->
<!-- ID: 2 -->
<!-- Category: Bank -->
<!-- Image Size: 135476 bytes -->
<!-- Image Hex: ffd8ffe0 -->
<!-- Image Type: JPEG -->
<!-- Record 13 -->
<!-- ID: 1 -->
<!-- Category: Bank -->
<!-- Image Size: 143203 bytes -->
<!-- Image Hex: ffd8ffe0 -->
<!-- Image Type: JPEG -->
<!-- Record 14 -->
<!-- ID: 23 -->
<!-- Category: Neethi Store -->
<!-- Image Size: 229235 bytes -->
<!-- Image Hex: ffd8ffe0 -->
<!-- Image Type: JPEG -->
<!-- Record 15 -->
<!-- ID: 22 -->
<!-- Category: Neethi Store -->
<!-- Image Size: 185954 bytes -->
<!-- Image Hex: ffd8ffe0 -->
<!-- Image Type: JPEG -->
<!-- Record 16 -->
<!-- ID: 21 -->
<!-- Category: Neethi Store -->
<!-- Image Size: 218691 bytes -->
<!-- Image Hex: ffd8ffe0 -->
<!-- Image Type: JPEG -->
<!-- Record 17 -->
<!-- ID: 20 -->
<!-- Category: Neethi Store -->
<!-- Image Size: 261497 bytes -->
<!-- Image Hex: ffd8ffe0 -->
<!-- Image Type: JPEG -->
<!-- Record 18 -->
<!-- ID: 19 -->
<!-- Category: Neethi Store -->
<!-- Image Size: 212617 bytes -->
<!-- Image Hex: ffd8ffe0 -->
<!-- Image Type: JPEG -->
<!-- Record 19 -->
<!-- ID: 18 -->
<!-- Category: Neethi Store -->
<!-- Image Size: 235945 bytes -->
<!-- Image Hex: ffd8ffe0 -->
<!-- Image Type: JPEG -->
<!-- Record 20 -->
<!-- ID: 16 -->
<!-- Category: Neethi Store -->
<!-- Image Size: 208764 bytes -->
<!-- Image Hex: ffd8ffe0 -->
<!-- Image Type: JPEG -->
<!-- Record 21 -->
<!-- ID: 15 -->
<!-- Category: Neethi Store -->
<!-- Image Size: 204051 bytes -->
<!-- Image Hex: ffd8ffe0 -->
<!-- Image Type: JPEG -->
<!-- Record 22 -->
<!-- ID: 14 -->
<!-- Category: Neethi Store -->
<!-- Image Size: 170195 bytes -->
<!-- Image Hex: ffd8ffe0 -->
<!-- Image Type: JPEG -->
<!-- Record 23 -->
<!-- ID: 13 -->
<!-- Category: Neethi Store -->
<!-- Image Size: 239863 bytes -->
<!-- Image Hex: ffd8ffe0 -->
<!-- Image Type: JPEG -->
<!-- Record 24 -->
<!-- ID: 11 -->
<!-- Category: Neethi Store -->
<!-- Image Size: 240333 bytes -->
<!-- Image Hex: ffd8ffe0 -->
<!-- Image Type: JPEG -->
<!-- Record 25 -->
<!-- ID: 41 -->
<!-- Category: Ruchi Hotel -->
<!-- Image Size: 296896 bytes -->
<!-- Image Hex: ffd8ffe0 -->
<!-- Image Type: JPEG -->
<!-- Record 26 -->
<!-- ID: 40 -->
<!-- Category: Ruchi Hotel -->
<!-- Image Size: 147125 bytes -->
<!-- Image Hex: ffd8ffe0 -->
<!-- Image Type: JPEG -->
<!-- Record 27 -->
<!-- ID: 39 -->
<!-- Category: Ruchi Hotel -->
<!-- Image Size: 190165 bytes -->
<!-- Image Hex: ffd8ffe0 -->
<!-- Image Type: JPEG -->
<!-- Record 28 -->
<!-- ID: 38 -->
<!-- Category: Ruchi Hotel -->
<!-- Image Size: 355408 bytes -->
<!-- Image Hex: ffd8ffe0 -->
<!-- Image Type: JPEG -->
<!-- Record 29 -->
<!-- ID: 37 -->
<!-- Category: Ruchi Hotel -->
<!-- Image Size: 143728 bytes -->
<!-- Image Hex: ffd8ffe0 -->
<!-- Image Type: JPEG -->
<!-- Record 30 -->
<!-- ID: 36 -->
<!-- Category: Ruchi Hotel -->
<!-- Image Size: 287865 bytes -->
<!-- Image Hex: ffd8ffe0 -->
<!-- Image Type: JPEG -->
<!-- Record 31 -->
<!-- ID: 35 -->
<!-- Category: Ruchi Hotel -->
<!-- Image Size: 243530 bytes -->
<!-- Image Hex: ffd8ffe0 -->
<!-- Image Type: JPEG -->
<!-- Record 32 -->
<!-- ID: 34 -->
<!-- Category: Ruchi Hotel -->
<!-- Image Size: 301891 bytes -->
<!-- Image Hex: ffd8ffe0 -->
<!-- Image Type: JPEG -->
<!-- Record 33 -->
<!-- ID: 10 -->
<!-- Category: Ruchi Hotel -->
<!-- Image Size: 176909 bytes -->
<!-- Image Hex: ffd8ffe0 -->
<!-- Image Type: JPEG -->
<!-- Record 34 -->
<!-- ID: 9 -->
<!-- Category: Ruchi Hotel -->
<!-- Image Size: 166081 bytes -->
<!-- Image Hex: ffd8ffe0 -->
<!-- Image Type: JPEG -->
<!-- Record 35 -->
<!-- ID: 8 -->
<!-- Category: Ruchi Hotel -->
<!-- Image Size: 171119 bytes -->
<!-- Image Hex: ffd8ffe0 -->
<!-- Image Type: JPEG -->
<!-- Record 36 -->
<!-- ID: 7 -->
<!-- Category: Ruchi Hotel -->
<!-- Image Size: 93136 bytes -->
<!-- Image Hex: ffd8ffe0 -->
<!-- Image Type: JPEG -->
<!-- Record 37 -->
<!-- ID: 6 -->
<!-- Category: Ruchi Hotel -->
<!-- Image Size: 156288 bytes -->
<!-- Image Hex: ffd8ffe0 -->
<!-- Image Type: JPEG -->
<!-- Record 38 -->
<!-- ID: 5 -->
<!-- Category: Ruchi Hotel -->
<!-- Image Size: 172519 bytes -->
<!-- Image Hex: ffd8ffe0 -->
<!-- Image Type: JPEG -->
<!-- ===== END DEBUG ===== -->

<!DOCTYPE html>
<html lang="en">
<head>

<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Parappur Panchayath Vanitha Sahakarana Sangham | Photo Gallery</title>

<!-- SEO -->
<meta name="description" content="Parappur Panchayath Vanitha Sahakarana Sangham has been providing trusted financial services, savings, fixed deposits, recurring deposits, affordable loans and women empowerment programs since 1984.">
<meta name="keywords" content="Parappur Vanitha Bank, Vanitha Sahakarana Sangham, Parappur Panchayath, Co-operative Society Kerala, Savings Account, Fixed Deposit, Gold Loan, Personal Loan, Women's Co-operative Society, Financial Services">
<meta name="author" content="Parappur Panchayath Vanitha Sahakarana Sangham">
<meta name="robots" content="index, follow">
<meta name="theme-color" content="#0B7A3E">

<!-- Canonical -->
<link rel="canonical" href="https://www.parappurvanithabank.com/">

<!-- Favicon -->
<link rel="icon" type="image/png" href="images/logo.png">
<link rel="apple-touch-icon" href="images/logo.png">

<!-- Open Graph (Facebook / WhatsApp) -->
<meta property="og:type" content="website">
<meta property="og:title" content="Parappur Panchayath Vanitha Sahakarana Sangham">
<meta property="og:description" content="Empowering Women. Enriching Lives. Trusted financial services, savings, deposits and affordable loans since 1984.">
<meta property="og:url" content="https://www.parappurvanithabank.com/">
<meta property="og:image" content="https://www.parappurvanithabank.com/images/logo.png">
<meta property="og:site_name" content="Parappur Panchayath Vanitha Sahakarana Sangham">
<meta property="og:locale" content="en_IN">

<!-- Twitter -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="Parappur Panchayath Vanitha Sahakarana Sangham">
<meta name="twitter:description" content="Trusted Financial Services Since 1984.">
<meta name="twitter:image" content="https://www.parappurvanithabank.com/images/logo.png">

<!-- Fonts -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">

<!-- Bootstrap -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">

<!-- Font Awesome -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css">

<style>
    /* ==========================================
    GLOBAL STYLES
    ========================================== */
    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
        font-family: 'Poppins', sans-serif;
    }

    body {
        background: #f8f9fa;
    }

    /* ==========================================
    TOP HEADER
    ========================================== */
    .top-header {
        background: #0B7A3E;
        color: #fff;
        padding: 8px 0;
        font-size: 13px;
        overflow: hidden;
    }

    .top-header-scroll {
        display: flex;
        gap: 30px;
        white-space: nowrap;
        animation: scrollText 20s linear infinite;
    }

    .top-header-scroll span {
        display: inline-block;
    }

    .top-header-scroll i {
        margin-right: 5px;
    }

    @keyframes scrollText {
        0% { transform: translateX(100%); }
        100% { transform: translateX(-100%); }
    }

    /* ==========================================
    NAVBAR
    ========================================== */
    .navbar {
        background: #fff !important;
        box-shadow: 0 2px 10px rgba(0,0,0,0.06);
        padding: 10px 0;
    }

    .navbar .nav-link {
        font-weight: 500;
        color: #1e293b;
        transition: 0.3s;
        padding: 10px 18px;
        font-size: 14px;
    }

    .navbar .nav-link:hover,
    .navbar .nav-link.active {
        color: #0B7A3E;
    }

    .navbar .dropdown-item {
        font-size: 14px;
        padding: 8px 20px;
        transition: 0.3s;
    }

    .navbar .dropdown-item:hover {
        background: rgba(11, 122, 62, 0.1);
        color: #0B7A3E;
    }

    .btn-success {
        background: #0B7A3E;
        border-color: #0B7A3E;
        padding: 8px 25px;
        border-radius: 30px;
        font-weight: 500;
        transition: 0.3s;
    }

    .btn-success:hover {
        background: #096332;
        border-color: #096332;
        transform: translateY(-2px);
        box-shadow: 0 5px 15px rgba(11, 122, 62, 0.3);
    }

    /* ==========================================
    GALLERY SECTION
    ========================================== */
    .gallery-section {
        padding: 60px 0;
        background: #f8f9fa;
        min-height: 500px;
    }

    .section-subtitle {
        display: inline-block;
        background: rgba(11, 122, 62, 0.1);
        color: #0B7A3E;
        padding: 8px 20px;
        border-radius: 30px;
        font-size: 14px;
        font-weight: 600;
        letter-spacing: 1px;
        text-transform: uppercase;
        margin-bottom: 10px;
    }

    .section-title {
        font-size: 36px;
        font-weight: 700;
        color: #1e293b;
        margin-bottom: 10px;
    }

    .section-title::after {
        content: '';
        display: block;
        width: 60px;
        height: 4px;
        background: linear-gradient(90deg, #0B7A3E, #2ecc71);
        margin: 10px auto 0;
        border-radius: 2px;
        animation: shimmer 3s ease-in-out infinite;
        background-size: 200% 100%;
    }

    @keyframes shimmer {
        0% { background-position: -200% 0; }
        100% { background-position: 200% 0; }
    }

    /* ==========================================
    CATEGORY FILTER BUTTONS
    ========================================== */
    .category-filter {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 12px;
        margin-bottom: 30px;
    }

    .filter-btn {
        padding: 10px 25px;
        border: 2px solid #e8e8e8;
        background: #fff;
        color: #1e293b;
        border-radius: 30px;
        font-size: 14px;
        font-weight: 500;
        cursor: pointer;
        transition: all 0.3s ease;
        font-family: 'Poppins', sans-serif;
        display: inline-flex;
        align-items: center;
        gap: 8px;
    }

    .filter-btn:hover {
        border-color: #0B7A3E;
        color: #0B7A3E;
        transform: translateY(-2px);
        box-shadow: 0 5px 15px rgba(11, 122, 62, 0.15);
    }

    .filter-btn.active {
        background: #0B7A3E;
        border-color: #0B7A3E;
        color: #fff;
        box-shadow: 0 5px 15px rgba(11, 122, 62, 0.3);
    }

    .filter-btn.active:hover {
        background: #096332;
        border-color: #096332;
        transform: translateY(-2px);
    }

    .filter-btn i {
        font-size: 14px;
    }

    /* ==========================================
    GALLERY ITEMS
    ========================================== */
    .gallery-item-container {
        transition: all 0.4s ease;
    }

    .gallery-item-container.hide {
        display: none;
    }

    .gallery-item-container.show {
        display: block;
        animation: zoomIn 0.4s ease;
    }

    @keyframes zoomIn {
        0% {
            transform: scale(0.8);
            opacity: 0;
        }
        100% {
            transform: scale(1);
            opacity: 1;
        }
    }

    .gallery-item {
        position: relative;
        overflow: hidden;
        border-radius: 16px;
        box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
        transition: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
        cursor: pointer;
        background: #fff;
        height: 100%;
    }

    .gallery-item img {
        width: 100%;
        height: 250px;
        object-fit: cover;
        transition: all 0.5s ease;
        border-radius: 16px;
    }

    .gallery-item:hover {
        transform: translateY(-8px) scale(1.02);
        box-shadow: 0 15px 35px rgba(0, 0, 0, 0.15);
    }

    .gallery-item:hover img {
        transform: scale(1.08);
    }

    .gallery-item .overlay {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        background: linear-gradient(transparent, rgba(0,0,0,0.7));
        padding: 20px;
        transform: translateY(100%);
        transition: all 0.4s ease;
        border-radius: 0 0 16px 16px;
    }

    .gallery-item:hover .overlay {
        transform: translateY(0);
    }

    .gallery-item .overlay h6 {
        color: #fff;
        margin: 0;
        font-weight: 600;
        font-size: 16px;
    }

    .gallery-item .overlay small {
        color: rgba(255,255,255,0.8);
        font-size: 12px;
    }

    .gallery-item .view-icon {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%) scale(0);
        color: #fff;
        font-size: 40px;
        opacity: 0;
        transition: all 0.4s ease;
        background: rgba(0,0,0,0.3);
        width: 60px;
        height: 60px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        backdrop-filter: blur(5px);
        z-index: 2;
    }

    .gallery-item:hover .view-icon {
        transform: translate(-50%, -50%) scale(1);
        opacity: 1;
    }

    /* ==========================================
    NO DATA
    ========================================== */
    .no-data {
        text-align: center;
        padding: 60px 20px;
        background: #fff;
        border-radius: 20px;
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
    }

    .no-data i {
        font-size: 80px;
        color: #ddd;
        margin-bottom: 20px;
        display: block;
    }

    .no-data h4 {
        color: #1e293b;
        font-weight: 600;
    }

    .no-data p {
        color: #999;
    }

    .btn-save {
        background: #0B7A3E;
        color: #fff;
        padding: 10px 30px;
        border-radius: 40px;
        text-decoration: none;
        display: inline-block;
        transition: all 0.3s ease;
        border: none;
    }

    .btn-save:hover {
        background: #096332;
        color: #fff;
        transform: translateY(-3px);
        box-shadow: 0 10px 30px rgba(11, 122, 62, 0.3);
    }

    /* Alert */
    .alert-custom {
        border-radius: 12px;
        padding: 15px 20px;
        margin-bottom: 20px;
    }

    .alert-danger {
        background: #f8d7da;
        border-color: #f5c6cb;
        color: #721c24;
    }

    /* ==========================================
    LIGHTBOX MODAL
    ========================================== */
    .lightbox-modal {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0,0,0,0.9);
        z-index: 9999;
        justify-content: center;
        align-items: center;
        animation: fadeIn 0.3s ease;
    }

    .lightbox-modal.active {
        display: flex;
    }

    .lightbox-modal img {
        max-width: 90%;
        max-height: 90%;
        border-radius: 10px;
        box-shadow: 0 20px 60px rgba(0,0,0,0.5);
        animation: zoomIn 0.4s ease;
    }

    @keyframes fadeIn {
        0% { opacity: 0; }
        100% { opacity: 1; }
    }

    .lightbox-modal .close-lightbox {
        position: absolute;
        top: 20px;
        right: 30px;
        color: #fff;
        font-size: 40px;
        cursor: pointer;
        transition: all 0.3s ease;
        z-index: 10;
    }

    .lightbox-modal .close-lightbox:hover {
        transform: rotate(90deg);
    }

    .lightbox-modal .lightbox-info {
        position: absolute;
        bottom: 30px;
        left: 50%;
        transform: translateX(-50%);
        color: #fff;
        text-align: center;
        background: rgba(0,0,0,0.5);
        padding: 15px 30px;
        border-radius: 10px;
        backdrop-filter: blur(5px);
    }

    .lightbox-modal .lightbox-info h5 {
        margin: 0;
        font-weight: 600;
    }

    .lightbox-modal .lightbox-info small {
        color: rgba(255,255,255,0.8);
    }

    /* ==========================================
    FOOTER
    ========================================== */
    .footer {
        background: #0B7A3E;
        color: #fff;
        padding: 50px 0 20px;
    }

    .footer h4, .footer h5 {
        color: #fff;
        font-weight: 600;
    }

    .footer p {
        color: rgba(255,255,255,0.8);
        font-size: 14px;
    }

    .footer-links {
        list-style: none;
        padding: 0;
    }

    .footer-links li {
        margin-bottom: 8px;
    }

    .footer-links a {
        color: rgba(255,255,255,0.8);
        text-decoration: none;
        transition: 0.3s;
    }

    .footer-links a:hover {
        color: #fff;
        padding-left: 5px;
    }

    .social-icons a {
        display: inline-block;
        width: 40px;
        height: 40px;
        background: rgba(255,255,255,0.1);
        color: #fff;
        text-align: center;
        line-height: 40px;
        border-radius: 50%;
        margin-right: 8px;
        transition: 0.3s;
    }

    .social-icons a:hover {
        background: #fff;
        color: #0B7A3E;
        transform: translateY(-3px);
    }

    .footer hr {
        border-color: rgba(255,255,255,0.1);
        margin: 30px 0;
    }

    /* ==========================================
    BACK TO TOP
    ========================================== */
    #topBtn {
        position: fixed;
        bottom: 30px;
        right: 30px;
        width: 50px;
        height: 50px;
        background: #0B7A3E;
        color: #fff;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        text-decoration: none;
        z-index: 999;
        transition: 0.3s;
        box-shadow: 0 5px 15px rgba(0,0,0,0.2);
    }

    #topBtn:hover {
        background: #096332;
        transform: translateY(-3px);
        color: #fff;
    }

    /* ==========================================
    WHATSAPP FLOAT
    ========================================== */
    .whatsapp-float {
        position: fixed;
        bottom: 90px;
        right: 30px;
        width: 55px;
        height: 55px;
        background: #25D366;
        color: #fff;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 30px;
        text-decoration: none;
        z-index: 999;
        box-shadow: 0 5px 15px rgba(37, 211, 102, 0.4);
        transition: 0.3s;
    }

    .whatsapp-float:hover {
        transform: scale(1.1);
        color: #fff;
    }

    /* ==========================================
    RESPONSIVE
    ========================================== */
    @media (max-width: 991px) {
        .navbar .nav-link {
            padding: 8px 0;
        }
        
        .navbar .btn-success {
            margin-top: 10px;
            width: 100%;
            text-align: center;
        }
    }

    @media (max-width: 768px) {
        .top-header {
            font-size: 11px;
            padding: 5px 0;
        }
        
        .top-header-scroll {
            gap: 15px;
        }
        
        .gallery-section {
            padding: 40px 0;
        }
        
        .section-title {
            font-size: 28px;
        }
        
        .filter-btn {
            padding: 8px 18px;
            font-size: 13px;
        }
        
        .category-filter {
            gap: 8px;
        }
        
        .gallery-item img {
            height: 200px;
        }
        
        .footer {
            padding: 30px 0 15px;
        }
    }

    @media (max-width: 576px) {
        .gallery-section {
            padding: 30px 0;
        }
        
        .section-title {
            font-size: 22px;
        }
        
        .filter-btn {
            padding: 6px 14px;
            font-size: 12px;
        }
        
        .filter-btn i {
            font-size: 12px;
        }
        
        .category-filter {
            gap: 6px;
        }
        
        .gallery-item img {
            height: 180px;
        }
        
        .gallery-item .view-icon {
            width: 40px;
            height: 40px;
            font-size: 20px;
        }
        
        .lightbox-modal .lightbox-info {
            padding: 10px 20px;
            bottom: 15px;
        }
        
        .lightbox-modal .lightbox-info h5 {
            font-size: 16px;
        }
        
        #topBtn {
            width: 40px;
            height: 40px;
            bottom: 20px;
            right: 20px;
            font-size: 14px;
        }
        
        .whatsapp-float {
            width: 45px;
            height: 45px;
            font-size: 24px;
            bottom: 70px;
            right: 20px;
        }
    }

    @media (max-width: 360px) {
        .top-header {
            font-size: 10px;
        }
        
        .gallery-item img {
            height: 150px;
        }
        
        .section-title {
            font-size: 18px;
        }
    }
</style>

</head>

<body>

<!-- ===========================
TOP HEADER
=========================== -->

<div class="top-header">
    <div class="top-header-scroll">
        <span><i class="fa-solid fa-location-dot"></i> Parappur Panchayath Office Road</span>
        <span><i class="fa-solid fa-phone"></i> 0494 2660000</span>
        <span><i class="fa-solid fa-envelope"></i> info@example.com</span>
        <span><i class="fa-solid fa-clock"></i> Working Hours : 9:30 AM - 4:30 PM</span>
    </div>
</div>

<!-- ===========================
NAVBAR
=========================== -->

<nav class="navbar navbar-expand-lg navbar-light bg-white shadow-sm sticky-top">

<div class="container">

<a class="navbar-brand fw-bold text-success" href="index.php">
    <img src="images/logo.png" width="75" alt="Logo">
</a>

<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#menu">
    <span class="navbar-toggler-icon"></span>
</button>

<div class="collapse navbar-collapse" id="menu">

<ul class="navbar-nav ms-auto">

<li class="nav-item">
    <a class="nav-link" href="index.php">Home</a>
</li>

<li class="nav-item">
    <a class="nav-link" href="about.php">About Us</a>
</li>

<!-- Services -->

<li class="nav-item dropdown">

    <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown">
        Services
    </a>

    <ul class="dropdown-menu">

        <li><a class="dropdown-item" href="downloadform.php">Download Form</a></li>

        <li><a class="dropdown-item" href="fixeddeposit.php">Fixed Deposit</a></li>

        <li><a class="dropdown-item" href="savingsaccounts.php">Savings Accounts</a></li>

        <li><a class="dropdown-item" href="recuring.php">Recurring Deposits</a></li>

        <li><a class="dropdown-item" href="daydeposits.php">Day Deposits</a></li>

        <li><a class="dropdown-item" href="mgds.php">MGDS</a></li>

        <li><a class="dropdown-item" href="smsalert.php">SMS Alert</a></li>

        <li><a class="dropdown-item" href="cheque.php">Cheque Collection Facility</a></li>

        <li><a class="dropdown-item" href="festival.php">Festival Co-market</a></li>

    </ul>

</li>

<!-- Loans -->

<li class="nav-item dropdown">

    <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown">
        Loans
    </a>

    <ul class="dropdown-menu">

        <li><a class="dropdown-item" href="gold.php">Gold Loan</a></li>

        <li><a class="dropdown-item" href="personal.php">Personal Loan</a></li>

        <li><a class="dropdown-item" href="mortage.php">Mortgage Loan</a></li>

        <li><a class="dropdown-item" href="loans.php">Kudumbasree Linkage Loan</a></li>

        <li><a class="dropdown-item" href="termdeposit.php">Term Deposit Loan</a></li>

    </ul>

</li>

<li class="nav-item">
    <a class="nav-link active" href="gallery.php">Gallery</a>
</li>

<li class="nav-item">
    <a class="nav-link" href="team.php">Team</a>
</li>

<li class="nav-item">
    <a class="nav-link" href="contact.php">Contact Us</a>
</li>

</ul>

<a href="#" class="btn btn-success ms-lg-3">
    Online Services
</a>

</div>

</div>

</nav>

<!-- ==========================================
PHOTO GALLERY
========================================== -->

<section class="gallery-section py-5">

<div class="container">

<div class="text-center mb-5">
    <span class="section-subtitle">
        <i class="fa fa-images me-2"></i>PHOTO GALLERY
    </span>

    <h2 class="section-title">
        Our Moments
    </h2>
</div>




<div class="category-filter text-center mb-5">




<button
class="filter-btn"
onclick="filterGallery('bank')">

Bank
</button>


<button
class="filter-btn"
onclick="filterGallery('neethi-store')">

Neethi Store
</button>


<button
class="filter-btn"
onclick="filterGallery('ruchi-hotel')">

Ruchi Hotel
</button>

<button class="filter-btn active"
onclick="filterGallery('all')">
All
</button>
</div>


<div class="row g-4" id="galleryGrid">


<div class="col-lg-3 col-md-4 col-sm-6 gallery-item-container"
data-category="bank">

<div class="gallery-item">

<img
src="get_image.php?table=gallery&id=33"
class="img-fluid rounded"
alt=""
loading="lazy">

<div class="view-icon">
<i class="fa fa-search-plus"></i>
</div>

<div class="overlay">

<h6>
Bank</h6>

<small>

14 Aug 2026
</small>

</div>

</div>

</div>


<div class="col-lg-3 col-md-4 col-sm-6 gallery-item-container"
data-category="bank">

<div class="gallery-item">

<img
src="get_image.php?table=gallery&id=32"
class="img-fluid rounded"
alt=""
loading="lazy">

<div class="view-icon">
<i class="fa fa-search-plus"></i>
</div>

<div class="overlay">

<h6>
Bank</h6>

<small>

14 Aug 2026
</small>

</div>

</div>

</div>


<div class="col-lg-3 col-md-4 col-sm-6 gallery-item-container"
data-category="bank">

<div class="gallery-item">

<img
src="get_image.php?table=gallery&id=31"
class="img-fluid rounded"
alt=""
loading="lazy">

<div class="view-icon">
<i class="fa fa-search-plus"></i>
</div>

<div class="overlay">

<h6>
Bank</h6>

<small>

14 Aug 2026
</small>

</div>

</div>

</div>


<div class="col-lg-3 col-md-4 col-sm-6 gallery-item-container"
data-category="bank">

<div class="gallery-item">

<img
src="get_image.php?table=gallery&id=30"
class="img-fluid rounded"
alt=""
loading="lazy">

<div class="view-icon">
<i class="fa fa-search-plus"></i>
</div>

<div class="overlay">

<h6>
Bank</h6>

<small>

14 Aug 2026
</small>

</div>

</div>

</div>


<div class="col-lg-3 col-md-4 col-sm-6 gallery-item-container"
data-category="bank">

<div class="gallery-item">

<img
src="get_image.php?table=gallery&id=29"
class="img-fluid rounded"
alt=""
loading="lazy">

<div class="view-icon">
<i class="fa fa-search-plus"></i>
</div>

<div class="overlay">

<h6>
Bank</h6>

<small>

14 Aug 2026
</small>

</div>

</div>

</div>


<div class="col-lg-3 col-md-4 col-sm-6 gallery-item-container"
data-category="bank">

<div class="gallery-item">

<img
src="get_image.php?table=gallery&id=28"
class="img-fluid rounded"
alt=""
loading="lazy">

<div class="view-icon">
<i class="fa fa-search-plus"></i>
</div>

<div class="overlay">

<h6>
Bank</h6>

<small>

14 Aug 2026
</small>

</div>

</div>

</div>


<div class="col-lg-3 col-md-4 col-sm-6 gallery-item-container"
data-category="bank">

<div class="gallery-item">

<img
src="get_image.php?table=gallery&id=27"
class="img-fluid rounded"
alt=""
loading="lazy">

<div class="view-icon">
<i class="fa fa-search-plus"></i>
</div>

<div class="overlay">

<h6>
Bank</h6>

<small>

14 Aug 2026
</small>

</div>

</div>

</div>


<div class="col-lg-3 col-md-4 col-sm-6 gallery-item-container"
data-category="bank">

<div class="gallery-item">

<img
src="get_image.php?table=gallery&id=26"
class="img-fluid rounded"
alt=""
loading="lazy">

<div class="view-icon">
<i class="fa fa-search-plus"></i>
</div>

<div class="overlay">

<h6>
Bank</h6>

<small>

14 Aug 2026
</small>

</div>

</div>

</div>


<div class="col-lg-3 col-md-4 col-sm-6 gallery-item-container"
data-category="bank">

<div class="gallery-item">

<img
src="get_image.php?table=gallery&id=25"
class="img-fluid rounded"
alt=""
loading="lazy">

<div class="view-icon">
<i class="fa fa-search-plus"></i>
</div>

<div class="overlay">

<h6>
Bank</h6>

<small>

14 Aug 2026
</small>

</div>

</div>

</div>


<div class="col-lg-3 col-md-4 col-sm-6 gallery-item-container"
data-category="bank">

<div class="gallery-item">

<img
src="get_image.php?table=gallery&id=4"
class="img-fluid rounded"
alt=""
loading="lazy">

<div class="view-icon">
<i class="fa fa-search-plus"></i>
</div>

<div class="overlay">

<h6>
Bank</h6>

<small>

23 Jul 2026
</small>

</div>

</div>

</div>


<div class="col-lg-3 col-md-4 col-sm-6 gallery-item-container"
data-category="bank">

<div class="gallery-item">

<img
src="get_image.php?table=gallery&id=3"
class="img-fluid rounded"
alt=""
loading="lazy">

<div class="view-icon">
<i class="fa fa-search-plus"></i>
</div>

<div class="overlay">

<h6>
Bank</h6>

<small>

23 Jul 2026
</small>

</div>

</div>

</div>


<div class="col-lg-3 col-md-4 col-sm-6 gallery-item-container"
data-category="bank">

<div class="gallery-item">

<img
src="get_image.php?table=gallery&id=2"
class="img-fluid rounded"
alt=""
loading="lazy">

<div class="view-icon">
<i class="fa fa-search-plus"></i>
</div>

<div class="overlay">

<h6>
Bank</h6>

<small>

23 Jul 2026
</small>

</div>

</div>

</div>


<div class="col-lg-3 col-md-4 col-sm-6 gallery-item-container"
data-category="bank">

<div class="gallery-item">

<img
src="get_image.php?table=gallery&id=1"
class="img-fluid rounded"
alt=""
loading="lazy">

<div class="view-icon">
<i class="fa fa-search-plus"></i>
</div>

<div class="overlay">

<h6>
Bank</h6>

<small>

23 Jul 2026
</small>

</div>

</div>

</div>


<div class="col-lg-3 col-md-4 col-sm-6 gallery-item-container"
data-category="neethi-store">

<div class="gallery-item">

<img
src="get_image.php?table=gallery&id=23"
class="img-fluid rounded"
alt=""
loading="lazy">

<div class="view-icon">
<i class="fa fa-search-plus"></i>
</div>

<div class="overlay">

<h6>
Neethi Store</h6>

<small>

13 Aug 2026
</small>

</div>

</div>

</div>


<div class="col-lg-3 col-md-4 col-sm-6 gallery-item-container"
data-category="neethi-store">

<div class="gallery-item">

<img
src="get_image.php?table=gallery&id=22"
class="img-fluid rounded"
alt=""
loading="lazy">

<div class="view-icon">
<i class="fa fa-search-plus"></i>
</div>

<div class="overlay">

<h6>
Neethi Store</h6>

<small>

13 Aug 2026
</small>

</div>

</div>

</div>


<div class="col-lg-3 col-md-4 col-sm-6 gallery-item-container"
data-category="neethi-store">

<div class="gallery-item">

<img
src="get_image.php?table=gallery&id=21"
class="img-fluid rounded"
alt=""
loading="lazy">

<div class="view-icon">
<i class="fa fa-search-plus"></i>
</div>

<div class="overlay">

<h6>
Neethi Store</h6>

<small>

13 Aug 2026
</small>

</div>

</div>

</div>


<div class="col-lg-3 col-md-4 col-sm-6 gallery-item-container"
data-category="neethi-store">

<div class="gallery-item">

<img
src="get_image.php?table=gallery&id=20"
class="img-fluid rounded"
alt=""
loading="lazy">

<div class="view-icon">
<i class="fa fa-search-plus"></i>
</div>

<div class="overlay">

<h6>
Neethi Store</h6>

<small>

13 Aug 2026
</small>

</div>

</div>

</div>


<div class="col-lg-3 col-md-4 col-sm-6 gallery-item-container"
data-category="neethi-store">

<div class="gallery-item">

<img
src="get_image.php?table=gallery&id=19"
class="img-fluid rounded"
alt=""
loading="lazy">

<div class="view-icon">
<i class="fa fa-search-plus"></i>
</div>

<div class="overlay">

<h6>
Neethi Store</h6>

<small>

13 Aug 2026
</small>

</div>

</div>

</div>


<div class="col-lg-3 col-md-4 col-sm-6 gallery-item-container"
data-category="neethi-store">

<div class="gallery-item">

<img
src="get_image.php?table=gallery&id=18"
class="img-fluid rounded"
alt=""
loading="lazy">

<div class="view-icon">
<i class="fa fa-search-plus"></i>
</div>

<div class="overlay">

<h6>
Neethi Store</h6>

<small>

13 Aug 2026
</small>

</div>

</div>

</div>


<div class="col-lg-3 col-md-4 col-sm-6 gallery-item-container"
data-category="neethi-store">

<div class="gallery-item">

<img
src="get_image.php?table=gallery&id=16"
class="img-fluid rounded"
alt=""
loading="lazy">

<div class="view-icon">
<i class="fa fa-search-plus"></i>
</div>

<div class="overlay">

<h6>
Neethi Store</h6>

<small>

13 Aug 2026
</small>

</div>

</div>

</div>


<div class="col-lg-3 col-md-4 col-sm-6 gallery-item-container"
data-category="neethi-store">

<div class="gallery-item">

<img
src="get_image.php?table=gallery&id=15"
class="img-fluid rounded"
alt=""
loading="lazy">

<div class="view-icon">
<i class="fa fa-search-plus"></i>
</div>

<div class="overlay">

<h6>
Neethi Store</h6>

<small>

23 Jul 2026
</small>

</div>

</div>

</div>


<div class="col-lg-3 col-md-4 col-sm-6 gallery-item-container"
data-category="neethi-store">

<div class="gallery-item">

<img
src="get_image.php?table=gallery&id=14"
class="img-fluid rounded"
alt=""
loading="lazy">

<div class="view-icon">
<i class="fa fa-search-plus"></i>
</div>

<div class="overlay">

<h6>
Neethi Store</h6>

<small>

23 Jul 2026
</small>

</div>

</div>

</div>


<div class="col-lg-3 col-md-4 col-sm-6 gallery-item-container"
data-category="neethi-store">

<div class="gallery-item">

<img
src="get_image.php?table=gallery&id=13"
class="img-fluid rounded"
alt=""
loading="lazy">

<div class="view-icon">
<i class="fa fa-search-plus"></i>
</div>

<div class="overlay">

<h6>
Neethi Store</h6>

<small>

23 Jul 2026
</small>

</div>

</div>

</div>


<div class="col-lg-3 col-md-4 col-sm-6 gallery-item-container"
data-category="neethi-store">

<div class="gallery-item">

<img
src="get_image.php?table=gallery&id=11"
class="img-fluid rounded"
alt=""
loading="lazy">

<div class="view-icon">
<i class="fa fa-search-plus"></i>
</div>

<div class="overlay">

<h6>
Neethi Store</h6>

<small>

23 Jul 2026
</small>

</div>

</div>

</div>


<div class="col-lg-3 col-md-4 col-sm-6 gallery-item-container"
data-category="ruchi-hotel">

<div class="gallery-item">

<img
src="get_image.php?table=gallery&id=41"
class="img-fluid rounded"
alt=""
loading="lazy">

<div class="view-icon">
<i class="fa fa-search-plus"></i>
</div>

<div class="overlay">

<h6>
Ruchi Hotel</h6>

<small>

14 Aug 2026
</small>

</div>

</div>

</div>


<div class="col-lg-3 col-md-4 col-sm-6 gallery-item-container"
data-category="ruchi-hotel">

<div class="gallery-item">

<img
src="get_image.php?table=gallery&id=40"
class="img-fluid rounded"
alt=""
loading="lazy">

<div class="view-icon">
<i class="fa fa-search-plus"></i>
</div>

<div class="overlay">

<h6>
Ruchi Hotel</h6>

<small>

14 Aug 2026
</small>

</div>

</div>

</div>


<div class="col-lg-3 col-md-4 col-sm-6 gallery-item-container"
data-category="ruchi-hotel">

<div class="gallery-item">

<img
src="get_image.php?table=gallery&id=39"
class="img-fluid rounded"
alt=""
loading="lazy">

<div class="view-icon">
<i class="fa fa-search-plus"></i>
</div>

<div class="overlay">

<h6>
Ruchi Hotel</h6>

<small>

14 Aug 2026
</small>

</div>

</div>

</div>


<div class="col-lg-3 col-md-4 col-sm-6 gallery-item-container"
data-category="ruchi-hotel">

<div class="gallery-item">

<img
src="get_image.php?table=gallery&id=38"
class="img-fluid rounded"
alt=""
loading="lazy">

<div class="view-icon">
<i class="fa fa-search-plus"></i>
</div>

<div class="overlay">

<h6>
Ruchi Hotel</h6>

<small>

14 Aug 2026
</small>

</div>

</div>

</div>


<div class="col-lg-3 col-md-4 col-sm-6 gallery-item-container"
data-category="ruchi-hotel">

<div class="gallery-item">

<img
src="get_image.php?table=gallery&id=37"
class="img-fluid rounded"
alt=""
loading="lazy">

<div class="view-icon">
<i class="fa fa-search-plus"></i>
</div>

<div class="overlay">

<h6>
Ruchi Hotel</h6>

<small>

14 Aug 2026
</small>

</div>

</div>

</div>


<div class="col-lg-3 col-md-4 col-sm-6 gallery-item-container"
data-category="ruchi-hotel">

<div class="gallery-item">

<img
src="get_image.php?table=gallery&id=36"
class="img-fluid rounded"
alt=""
loading="lazy">

<div class="view-icon">
<i class="fa fa-search-plus"></i>
</div>

<div class="overlay">

<h6>
Ruchi Hotel</h6>

<small>

14 Aug 2026
</small>

</div>

</div>

</div>


<div class="col-lg-3 col-md-4 col-sm-6 gallery-item-container"
data-category="ruchi-hotel">

<div class="gallery-item">

<img
src="get_image.php?table=gallery&id=35"
class="img-fluid rounded"
alt=""
loading="lazy">

<div class="view-icon">
<i class="fa fa-search-plus"></i>
</div>

<div class="overlay">

<h6>
Ruchi Hotel</h6>

<small>

14 Aug 2026
</small>

</div>

</div>

</div>


<div class="col-lg-3 col-md-4 col-sm-6 gallery-item-container"
data-category="ruchi-hotel">

<div class="gallery-item">

<img
src="get_image.php?table=gallery&id=34"
class="img-fluid rounded"
alt=""
loading="lazy">

<div class="view-icon">
<i class="fa fa-search-plus"></i>
</div>

<div class="overlay">

<h6>
Ruchi Hotel</h6>

<small>

14 Aug 2026
</small>

</div>

</div>

</div>


<div class="col-lg-3 col-md-4 col-sm-6 gallery-item-container"
data-category="ruchi-hotel">

<div class="gallery-item">

<img
src="get_image.php?table=gallery&id=10"
class="img-fluid rounded"
alt=""
loading="lazy">

<div class="view-icon">
<i class="fa fa-search-plus"></i>
</div>

<div class="overlay">

<h6>
Ruchi Hotel</h6>

<small>

23 Jul 2026
</small>

</div>

</div>

</div>


<div class="col-lg-3 col-md-4 col-sm-6 gallery-item-container"
data-category="ruchi-hotel">

<div class="gallery-item">

<img
src="get_image.php?table=gallery&id=9"
class="img-fluid rounded"
alt=""
loading="lazy">

<div class="view-icon">
<i class="fa fa-search-plus"></i>
</div>

<div class="overlay">

<h6>
Ruchi Hotel</h6>

<small>

23 Jul 2026
</small>

</div>

</div>

</div>


<div class="col-lg-3 col-md-4 col-sm-6 gallery-item-container"
data-category="ruchi-hotel">

<div class="gallery-item">

<img
src="get_image.php?table=gallery&id=8"
class="img-fluid rounded"
alt=""
loading="lazy">

<div class="view-icon">
<i class="fa fa-search-plus"></i>
</div>

<div class="overlay">

<h6>
Ruchi Hotel</h6>

<small>

23 Jul 2026
</small>

</div>

</div>

</div>


<div class="col-lg-3 col-md-4 col-sm-6 gallery-item-container"
data-category="ruchi-hotel">

<div class="gallery-item">

<img
src="get_image.php?table=gallery&id=7"
class="img-fluid rounded"
alt=""
loading="lazy">

<div class="view-icon">
<i class="fa fa-search-plus"></i>
</div>

<div class="overlay">

<h6>
Ruchi Hotel</h6>

<small>

23 Jul 2026
</small>

</div>

</div>

</div>


<div class="col-lg-3 col-md-4 col-sm-6 gallery-item-container"
data-category="ruchi-hotel">

<div class="gallery-item">

<img
src="get_image.php?table=gallery&id=6"
class="img-fluid rounded"
alt=""
loading="lazy">

<div class="view-icon">
<i class="fa fa-search-plus"></i>
</div>

<div class="overlay">

<h6>
Ruchi Hotel</h6>

<small>

23 Jul 2026
</small>

</div>

</div>

</div>


<div class="col-lg-3 col-md-4 col-sm-6 gallery-item-container"
data-category="ruchi-hotel">

<div class="gallery-item">

<img
src="get_image.php?table=gallery&id=5"
class="img-fluid rounded"
alt=""
loading="lazy">

<div class="view-icon">
<i class="fa fa-search-plus"></i>
</div>

<div class="overlay">

<h6>
Ruchi Hotel</h6>

<small>

23 Jul 2026
</small>

</div>

</div>

</div>


</div>

<div class="text-center mt-4">

<!--<span class="badge bg-success">-->

<!--Total Images :-->
<!--<!--?php echo $gallery_count;?>-->

<!--</span>-->

</div>


</div>

</section>

<!-- ==========================================
FOOTER
========================================== -->

<footer class="footer">

<div class="container">

<div class="row">

<div class="col-lg-4 mb-4">

<img src="images/logo.png" width="70">

<h4 class="mt-3">

Parappur Panchayath
Vanitha Sahakarana Sangham

</h4>

<p>

Providing trusted financial services, savings, deposits and affordable loans for women since 1984.

</p>

<div class="social-icons">

<a href="#"><i class="fab fa-facebook-f"></i></a>

<a href="#"><i class="fab fa-instagram"></i></a>

<a href="#"><i class="fab fa-youtube"></i></a>

<a href="#"><i class="fab fa-whatsapp"></i></a>

</div>

</div>

<div class="col-lg-2 col-md-6 mb-4">

<h5>Quick Links</h5>

<ul class="footer-links">

<li><a href="index.php">Home</a></li>

<li><a href="about.php">About</a></li>

<li><a href="#">Services</a></li>

<li><a href="#">Loans</a></li>

<li><a href="#">Deposits</a></li>

<li><a href="gallery.php">Gallery</a></li>

<li><a href="contact.php">Contact</a></li>

</ul>

</div>

<div class="col-lg-3 col-md-6 mb-4">

<h5>Our Services</h5>

<ul class="footer-links">

<li><a href="savingsaccounts.php">Savings Account</a></li>

<li><a href="fixeddeposit.php">Fixed Deposit</a></li>

<li><a href="recuring.php">Recurring Deposit</a></li>

<li><a href="gold.php">Gold Loan</a></li>

<li><a href="personal.php">Personal Loan</a></li>

<li><a href="#">Online Banking</a></li>

</ul>

</div>

<div class="col-lg-3">

<h5>Contact Info</h5>

<p>

<i class="fa-solid fa-location-dot"></i>

Parappur Panchayath Office Road,
Malappuram, Kerala

</p>

<p>

<i class="fa-solid fa-phone"></i>

0494-2660000

</p>

<p>

<i class="fa-solid fa-envelope"></i>

info@example.com

</p>

<p>

<i class="fa-solid fa-clock"></i>

Mon - Sat : 9.30 AM - 4.30 PM

</p>

</div>

</div>

<hr>

<div class="row align-items-center">

<div class="col-lg-6">

<p class="mb-0">

© 2026 Parappur Panchayath Vanitha Sahakarana Sangham.
All Rights Reserved.

</p>

</div>

<div class="col-lg-6 text-lg-end">

<p class="mb-0">

Designed by Your Company

</p>

</div>

</div>

</div>

</footer>

<!-- ==========================================
BACK TO TOP
========================================== -->

<a href="#" id="topBtn">
    <i class="fa-solid fa-arrow-up"></i>
</a>

<!-- ==========================================
SCRIPTS
========================================== -->

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>

<script>
// Back to Top Button
const topBtn = document.getElementById('topBtn');
window.addEventListener('scroll', function() {
    if (window.scrollY > 300) {
        topBtn.style.display = 'flex';
    } else {
        topBtn.style.display = 'none';
    }
});

topBtn.addEventListener('click', function(e) {
    e.preventDefault();
    window.scrollTo({ top: 0, behavior: 'smooth' });
});

// ==========================================
// GALLERY FILTER FUNCTION
// ==========================================
function filterGallery(category) {
    // Get all filter buttons
    const buttons = document.querySelectorAll('.filter-btn');
    
    // Remove active class from all buttons
    buttons.forEach(btn => btn.classList.remove('active'));
    
    // Add active class to clicked button
    const activeBtn = document.querySelector(`.filter-btn[data-filter="${category}"]`);
    if (activeBtn) {
        activeBtn.classList.add('active');
    }
    
    // Get all gallery items
    const items = document.querySelectorAll('.gallery-item-container');
    let visibleCount = 0;
    
    items.forEach(item => {
        const itemCategory = item.getAttribute('data-category');
        
        if (category === 'all' || itemCategory === category) {
            item.classList.remove('hide');
            item.classList.add('show');
            visibleCount++;
        } else {
            item.classList.remove('show');
            item.classList.add('hide');
        }
    });
    
    // Update total count
    const totalCount = document.getElementById('totalCount');
    if (totalCount) {
        totalCount.textContent = visibleCount;
    }
}

// ==========================================
// LIGHTBOX FUNCTIONS
// ==========================================
function openLightbox(imageSrc, category) {
    // Check if modal elements exist, if not create them
    let modal = document.getElementById('lightboxModal');
    
    if (!modal) {
        // Create modal if it doesn't exist
        modal = document.createElement('div');
        modal.id = 'lightboxModal';
        modal.className = 'lightbox-modal';
        modal.innerHTML = `
            <span class="close-lightbox" onclick="closeLightbox()">
                <i class="fa fa-times"></i>
            </span>
            <img id="lightboxImage" src="" alt="Gallery Image">
            <div class="lightbox-info">
                <h5 id="lightboxCategory">Category</h5>
                <small id="lightboxDate">Date</small>
            </div>
        `;
        document.body.appendChild(modal);
        
        // Close on click outside
        modal.addEventListener('click', function(e) {
            if (e.target === this) {
                closeLightbox();
            }
        });
        
        // Close on Escape key
        document.addEventListener('keydown', function(e) {
            if (e.key === 'Escape') {
                closeLightbox();
            }
        });
    }
    
    const img = document.getElementById('lightboxImage');
    const cat = document.getElementById('lightboxCategory');
    const date = document.getElementById('lightboxDate');
    
    if (imageSrc && imageSrc !== '' && imageSrc !== 'images/placeholder.jpg') {
        img.src = imageSrc;
    } else {
        img.src = 'images/placeholder.jpg';
    }
    
    cat.textContent = category || 'Gallery Image';
    date.textContent = new Date().toLocaleDateString('en-US', { 
        day: 'numeric', 
        month: 'short', 
        year: 'numeric' 
    });
    
    modal.classList.add('active');
    document.body.style.overflow = 'hidden';
}

function closeLightbox() {
    const modal = document.getElementById('lightboxModal');
    if (modal) {
        modal.classList.remove('active');
        document.body.style.overflow = '';
    }
}

// ==========================================
// INITIALIZE ON PAGE LOAD
// ==========================================
document.addEventListener('DOMContentLoaded', function() {
    // Ensure all items are visible on load
    const items = document.querySelectorAll('.gallery-item-container');
    items.forEach(item => {
        item.classList.remove('hide');
        item.classList.add('show');
    });
    
    // Set initial count
    const totalCount = document.getElementById('totalCount');
    if (totalCount) {
        totalCount.textContent = items.length;
    }
});
</script>

<!-- Floating WhatsApp -->
<a href="https://wa.me/919447382945?text=Hello%20I%20would%20like%20to%20know%20more."
   class="whatsapp-float"
   target="_blank">
    <i class="fab fa-whatsapp"></i>
</a>

</body>
</html>