<?php include 'includes/header.php' ?>

<!-- Breadcrumb -->

<?php
$breadcrumb_title = "Social Initiatives";
$breadcrumb_path = "Initiatives > Social Initiatives";

include 'includes/breadcrumb.php';

?>



<div class="content container pt-5" style="text-align: justify;">

    <!-- <h1 class="heading color-brown">HEADING</h1><br> -->
    <p>
        The MBA Programme is not just all about profit and money, it's also about CSR, Corporate Social Responsiblity. The cutting-edge MBA programme also has provisions for social service in each semester (in the subjects- Practice School-1, 2, 3 & 4). Thus, the manager we create is not living in a cocoon, the manager is more aware of the social problems and can effectively design enterprises & startups that are actually solving social problems, and thus possessing tremendous scalability.
    </p>

</div>

<style>
    .content .heading {
        font-size: 2rem !important;
        font-weight: bold;
        text-align: center;
    }

    .content .list-item {
        margin-bottom: 0.5rem;
    }

    .content p,
    .content li {
        color: black;
        font-size: 20px;
    }
</style>


<!--  -->
<div class="container-fluid py-5 mb-5 px-5">
    <!-- Gallery Section -->
    <div class="row g-4 gallery-section">
        <!-- Gallery Cards -->
        <div class="col-md-3 px-2">
            <div class="gallery-card d-flex flex-column justify-content-center align-items-center">
                <img src="assets/life/socialinitiatives/1.jpeg" alt="Gallery Image 1" class="img-fluid rounded gallery-img" onclick="openModal(this)">
                <p class="gallery-title color-blue">Cleanliness Drive by our students</p>
            </div>
        </div>
        <div class="col-md-3 px-2">
            <div class="gallery-card d-flex flex-column justify-content-center align-items-center">
                <img src="assets/life/socialinitiatives/2.jpeg" alt="Gallery Image 1" class="img-fluid rounded gallery-img" onclick="openModal(this)">
                <p class="gallery-title color-blue">2-Wheeler Rally For Cleanliness Awareness</p>
            </div>
        </div>
        <div class="col-md-3 px-2">
            <div class="gallery-card d-flex flex-column justify-content-center align-items-center">
                <img src="assets/life/socialinitiatives/3.jpeg" alt="Gallery Image 1" class="img-fluid rounded gallery-img" onclick="openModal(this)">
                <p class="gallery-title color-blue">Raising Awareness About Government Schemes In Rural Areas</p>
            </div>
        </div>
        <div class="col-md-3 px-2">
            <div class="gallery-card d-flex flex-column justify-content-center align-items-center">
                <img src="assets/life/socialinitiatives/4.jpeg" alt="Gallery Image 1" class="img-fluid rounded gallery-img" onclick="openModal(this)">
                <p class="gallery-title color-blue">Awareness Raily Through Hathikhera Village, Ajmer</p>
            </div>
        </div>
        <div class="col-md-3 px-2">
            <div class="gallery-card d-flex flex-column justify-content-center align-items-center">
                <img src="assets/life/socialinitiatives/5.jpeg" alt="Gallery Image 1" class="img-fluid rounded gallery-img" onclick="openModal(this)">
                <p class="gallery-title color-blue">Awareness Raily Through Hathikhera Village, Ajmer</p>
            </div>
        </div>
        <div class="col-md-3 px-2">
            <div class="gallery-card d-flex flex-column justify-content-center align-items-center">
                <img src="assets/life/socialinitiatives/6.jpeg" alt="Gallery Image 1" class="img-fluid rounded gallery-img" onclick="openModal(this)">
                <p class="gallery-title color-blue">Cleanliness Pledge</p>
            </div>
        </div>
        <div class="col-md-3 px-2">
            <div class="gallery-card d-flex flex-column justify-content-center align-items-center">
                <img src="assets/life/socialinitiatives/7.jpeg" alt="Gallery Image 1" class="img-fluid rounded gallery-img" onclick="openModal(this)">
                <p class="gallery-title color-blue">Cleaning the City of Plastic Waste</p>
            </div>
        </div>
    </div>
</div>
<!-- Modal for Full-Screen Image -->
<div id="imageModal" class="modal" onclick="closeModal()">
    <span class="close">&times;</span>
    <img class="modal-content" id="fullImage">
</div>

<style>
    /* Gallery card styling */
    .gallery-card {
        border-radius: 16px;
        height: 100%;
        text-align: center;
        transition: all 0.3s ease;
        display: flex;
        justify-content: center;
        align-items: center;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
        overflow: hidden;
    }

    .gallery-card:hover {
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5);
        scale: 1.02;
    }

    .gallery-card img {
        width: 100%;
        max-height: 270px;
        object-fit: cover;
        border-radius: 16px;
    }

    .gallery-title {
        margin-top: 10px;
        font-size: 16px;
        font-weight: bold;
        text-align: center;
    }


    /* Modal styles */
    .modal {
        display: none;
        position: fixed;
        z-index: 1050;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        overflow: auto;
        background-color: rgba(0, 0, 0, 0.8);
        align-content: center;
    }

    .modal-content {
        margin: auto;
        display: block;
        width: auto;
        height: auto;
        max-width: 90%;
        max-height: 90%;
    }

    .close {
        position: absolute;
        top: 15px;
        right: 25px;
        color: #fff;
        font-size: 30px;
        font-weight: bold;
        cursor: pointer;
    }

    .close:hover,
    .close:focus {
        color: #bbb;
        text-decoration: none;
        cursor: pointer;
    }
</style>
<script>
    // Function to open modal and display the clicked image
    function openModal(img) {
        const modal = document.getElementById("imageModal");
        const modalImg = document.getElementById("fullImage");
        modal.style.display = "block";
        modalImg.src = img.src;
    }

    // Function to close the modal
    function closeModal() {
        const modal = document.getElementById("imageModal");
        modal.style.display = "none";
    }
</script>



<!-- Footer -->

<?php include 'includes/footer.php' ?>