<!doctype html>
<html lang="zxx">
   <head>
      <!--========= Required meta tags =========-->
      <meta charset="utf-8">
      <meta http-equiv="x-ua-compatible" content="ie=edge">
      <meta name="description" content="">
      <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
      <title>ESD - Logos </title>
      <link rel="shortcut icon" href="assets/img/favicon.png" type="images/x-icon" />
      <!-- css include -->
      <link rel="stylesheet" href="assets/css/bootstrap.min.css">
      <link rel="stylesheet" href="assets/css/fontawesome.css">
      <link rel="stylesheet" href="assets/css/animate.css">
      <link rel="stylesheet" href="assets/css/swiper.min.css">
      <link rel="stylesheet" href="assets/css/odometer.css">
      <link rel="stylesheet" href="assets/css/magnific-popup.css">
      <link rel="stylesheet" href="assets/css/recoleta-font.css">
      <link rel="stylesheet" href="assets/css/nice-select.css">
      <link rel="stylesheet" href="assets/css/main.css">
   </head>
   <body>
      <!-- backtotop - start -->
      <div class="xb-backtotop">
         <a href="#" class="scroll">
         <i class="far fa-arrow-up"></i>
         </a>
      </div>
      <!-- backtotop - end -->
      <!-- Preloader - Start -->
      <div id="preloader">
         <div id="loader" class="loader">
            <div class="loader-container">
               <div class="loader-icon"><img src="assets/img/logo/preloader.png" alt="preloader"></div>
            </div>
         </div>
      </div>
      <!-- Preloader - End -->
      <div class="body_wrap">
      <?php include_once("header.php") ?>
      <!-- main area start  -->
      <main>
         <!-- breadcrumb start -->
         <section class="breadcrumb bg_img ul_li" data-background="assets/img/internal-page.jpg">
            <div class="container">
               <div class="breadcrumb__content text-center">
                  <h2 class="breadcrumb__title">Logos </h2>
                  <p class="breadcrumb__desc">IISc </p>
               </div>
            </div>
         </section>
         <!-- breadcrumb end -->
         <!-- contact start -->
         <section class="team pt-120 pb-120" data-bg-color="#F1F1E9" style="background-color: rgb(241, 241, 233);">
            <div class="container">
               <div class="section-title text-center mb-60">
                  <h2 class="title">Logos</h2>
               </div>
               <div class="row mt-none-30">
                  <div class="col-lg-5 col-md-5 mt-30">
                     <div class="team-item">
                        <div class="xb-item--img pos-rel">
                           <img src="assets/img/iisc-logo.jpg" alt="">
                           <div class="team-social">
                              <span class="plus team-popup-trigger"
                                 data-img="assets/img/iisc-logo.jpg"
                                 data-name="IISc LOGO"
                                 style="cursor:pointer;">
                              <i class="far fa-plus"></i>
                              </span>
                           </div>
                        </div>
                        <div class="xb-item--info pt-25">
                           <h3 class="xb-item--name">IISc LOGO</h3>
                        </div>
                        <ul class="xb-item--meta ul_li">
                           <li>
                              <div class="xb-event-btn pt-15">
                                 <a class="thm-btn" href="assets/img/iisc-logo.jpg" download="iisc-logo.jpg">
                                    Download
                                    <span class="icon">
                                       <svg width="21" height="21" viewBox="0 0 21 21" fill="none" xmlns="http://www.w3.org/2000/svg">
                                          <path d="M10.4795 21C9.10959 21 7.81507 20.7539 6.59589 20.2617C5.37671 19.7695 4.30137 19.0962 3.36986 18.2417C2.43836 17.3872 1.67808 16.3857 1.08904 15.2373C0.486301 14.0752 0.123288 12.8311 0 11.5049V11.4639H8.56849V14.3145C8.56849 14.5742 8.66096 14.7998 8.84589 14.9912C9.03082 15.1826 9.25342 15.2783 9.5137 15.2783C9.65068 15.2783 9.7774 15.251 9.89384 15.1963C10.0103 15.1416 10.1096 15.0732 10.1918 14.9912L14.0137 11.1768C14.0959 11.0947 14.1644 10.9956 14.2192 10.8794C14.274 10.7632 14.3014 10.6367 14.3014 10.5C14.3014 10.3633 14.274 10.2368 14.2192 10.1206C14.1644 10.0044 14.0959 9.90527 14.0137 9.82324L10.1918 6.00879C10.1096 5.92676 10.0103 5.8584 9.89384 5.80371C9.7774 5.74902 9.65068 5.72168 9.5137 5.72168C9.25342 5.72168 9.0274 5.81738 8.83562 6.00879C8.64384 6.2002 8.54794 6.42578 8.54794 6.68555V9.53613H0C0.123288 8.19629 0.486301 6.94531 1.08904 5.7832C1.67808 4.62109 2.44178 3.61279 3.38014 2.7583C4.31849 1.90381 5.39041 1.23047 6.59589 0.738281C7.81507 0.246094 9.10959 0 10.4795 0C11.9315 0 13.2945 0.273439 14.5685 0.820312C15.8425 1.38086 16.9555 2.13623 17.9075 3.08643C18.8596 4.03662 19.6096 5.14746 20.1575 6.41895C20.7192 7.69043 21 9.05078 21 10.5C21 11.9492 20.7192 13.3096 20.1575 14.5811C19.6096 15.8662 18.8596 16.9839 17.9075 17.9341C16.9555 18.8843 15.8425 19.6328 14.5685 20.1797C13.2945 20.7266 11.9315 21 10.4795 21Z" fill="#170006"></path>
                                       </svg>
                                    </span>
                                 </a>
                              </div>
                           </li>
                        </ul>
                     </div>
                  </div>
               </div>
            </div>
         </section>
         <!-- contact end -->
      </main>
      <!-- ✅ SINGLE MODAL — works for ALL team cards dynamically -->
      <div class="modal fade" id="teamModalDynamic" tabindex="-1" aria-hidden="true">
         <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content" style="border-radius: 12px; overflow: hidden; border: none;">
               <!-- Close Button -->
               <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"
                  style="position: absolute; top: 12px; right: 12px; z-index: 10;
                  background-color: #fff; border-radius: 50%; padding: 8px; opacity: 1;">
               </button>
               <!-- Image — filled dynamically -->
               <img id="teamModalImg" src="" alt=""
                  style="width: 100%; object-fit: cover; display: block;">
               <!-- Info — filled dynamically -->
               <div class="modal-body" style="padding: 20px 24px;">
                  <h5 id="teamModalName" style="margin: 0 0 4px; font-size: 20px; color: #170006;"></h5>
                  <span id="teamModalDesig" style="font-size: 14px; color: #888;"></span>

               </div>
            </div>
         </div>
      </div>
      <!-- main area end  -->
      <script>
         document.querySelectorAll('.team-popup-trigger').forEach(function(trigger) {
             trigger.addEventListener('click', function() {
         
                 // Read data from clicked card
                 var img      = this.getAttribute('data-img');
                 var name     = this.getAttribute('data-name');
                 var desig    = this.getAttribute('data-desig');

                 // Inject into modal
                 document.getElementById('teamModalImg').src         = img;
                 document.getElementById('teamModalImg').alt         = name;
                 document.getElementById('teamModalName').innerText  = name;
                 document.getElementById('teamModalDesig').innerText = desig;

                 // Open the modal
                 var modal = new bootstrap.Modal(document.getElementById('teamModalDynamic'));
                 modal.show();
             });
         });
      </script>
      <?php include_once("footer.php") ?>