<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Our Alumni - DSSA</title>
    <link rel="icon" href="IMG/Favicon 1.png" type="image/x-icon" />
    <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=Inter:wght@400;500;600;700;800&display=swap"
      rel="stylesheet"
    />
    <link
      href="https://fonts.googleapis.com/css2?family=Gabarito:wght@400;500;600;700;800;900&display=swap"
      rel="stylesheet"
    />
    <link
      href="https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:wght@200;300;400;500;600;700;800&display=swap"
      rel="stylesheet"
    />
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"
    />
    <style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }
      body {
        font-family: "Inter", sans-serif;
        scroll-behavior: smooth;
        background-color: #000000;
        color: #e5e5f5;
        min-height: 100vh;
        display: flex;
        flex-direction: column;
        align-items: center;
      }
      .hero-text-gradient {
        background: linear-gradient(90deg, #a78bfa, #818cf8);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        font-family: "Gabarito", sans-serif;
      }
      .card-bg {
        background: rgba(36, 38, 52, 0.4);
        backdrop-filter: blur(24px) saturate(180%);
        border: 1px solid rgba(255, 255, 255, 0.05);
        box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2),
          inset 0 1px 4px rgba(255, 255, 255, 0.1);
        transition: all 0.3s ease;
      }
      header {
        position: fixed;
        top: 0;
        z-index: 50;
        width: 100%;
        padding: 1rem;
        display: flex;
        justify-content: center;
        transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1),
          opacity 0.5s cubic-bezier(0.4, 0, 0.2, 1);
      }
      header.nav-hidden {
        transform: translateY(-120%);
        opacity: 0;
        pointer-events: none;
      }
      nav {
        display: flex;
        align-items: center;
        justify-content: space-between;
        max-width: 80rem;
        width: 100%;
        padding: 0.75rem 1rem;
        height: 80px;
        backdrop-filter: blur(24px) saturate(180%);
        background: rgba(36, 38, 52, 0.4);
        border-radius: 9999px;
        box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2),
          inset 0 1px 4px rgba(255, 255, 255, 0.1);
        margin: 1rem 0;
        border: 1px solid rgba(255, 255, 255, 0.05);
        transition: all 0.3s ease;
        position: relative;
      }
      .logo {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        text-decoration: none;
        color: inherit;
        padding: 0.5rem 1rem;
        border-radius: 0.75rem;
      }
      .logo img {
        border-radius: 50%;
        width: 32px;
        height: 32px;
      }
      .logo span {
        font-family: "Bricolage Grotesque", sans-serif;
        font-size: 1.25rem;
        font-weight: 700;
        letter-spacing: -0.025em;
        color: white;
      }
      .nav-links {
        display: none;
        gap: 2rem;
        font-size: 1.125rem;
      }
      .nav-links a {
        text-decoration: none;
        color: white;
        transition: all 0.3s ease;
        font-family: "Inter", sans-serif;
        padding: 0.5rem 1rem;
        border-radius: 0.5rem;
        position: relative;
      }
      .nav-links a:hover {
        color: #c084fc;
      }

      .nav-item {
        display: flex;
        align-items: center;
        gap: 0.25rem;
      }

      .nav-item svg {
        height: 1rem;
        width: 1rem;
      }

      .contact-btn {
        background: rgba(22, 24, 40, 0.8);
        border-radius: 20px;
        color: white;
        font-weight: 600;
        padding: 0.75rem 1.5rem;
        border: 1px solid rgba(255, 255, 255, 0.2);
        cursor: pointer;
        transition: all 0.3s ease;
        font-family: "Inter", sans-serif;
        backdrop-filter: blur(8px);
      }
      .contact-btn:hover {
        box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
      }
      .hamburger {
        display: none;
        background: none;
        border: none;
        color: #fff;
        font-size: 1.5rem;
        cursor: pointer;
        padding: 0.5rem;
        border-radius: 8px;
        transition: all 0.3s ease;
        margin-left: auto;
        margin-right: 1rem;
      }
      .hamburger:hover {
        background: rgba(192, 132, 252, 0.1);
        color: #c084fc;
        transform: scale(1.05);
      }
      .nav-dropdown {
        position: absolute;
        top: 100%;
        right: 1rem;
        width: 280px;
        background: rgba(22, 24, 40, 0.95);
        backdrop-filter: blur(24px);
        border: 1px solid rgba(255, 255, 255, 0.1);
        border-top: none;
        border-radius: 0 0 16px 16px;
        box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
        opacity: 0;
        visibility: hidden;
        transform: translateY(-10px);
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        z-index: 1000;
        padding: 1rem 0;
      }
      .nav-dropdown.open {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
      }
      .nav-dropdown a {
        display: block;
        padding: 0.75rem 2rem;
        color: #e5e5f5;
        text-decoration: none;
        font-family: "Inter", sans-serif;
        font-size: 1rem;
        transition: all 0.2s ease;
        border-bottom: 1px solid rgba(255, 255, 255, 0.05);
      }
      .nav-dropdown a:last-child {
        border-bottom: none;
      }
      .nav-dropdown a:hover {
        background: rgba(192, 132, 252, 0.1);
        color: #c084fc;
        padding-left: 2.5rem;
      }
      @media (max-width: 991.98px) {
        .hamburger {
          display: block;
        }
        .nav-links {
          display: none;
        }
      }
      @media (min-width: 992px) {
        .hamburger {
          display: none;
        }
        .nav-links {
          display: flex;
        }
      }
      main {
        flex-grow: 1;
        display: flex;
        margin-top: 10rem;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-align: center;
        padding: 1rem;
        font-family: "Gabarito", sans-serif;
      }
      .main-heading {
        font-family: "Gabarito", sans-serif;
        font-size: 2.25rem;
        font-weight: 800;
        letter-spacing: -0.025em;
        line-height: 1.1;
        margin-bottom: 0;
        color: #4361ee;
      }
      .alumni-section {
        max-width: 80rem;
        width: 100%;
        padding: 2rem;
        margin-top: 0;
      }
      .alumni-grid {
        display: grid;
        grid-template-columns: 1fr;
        gap: 2rem;
        margin-top: 0;
      }
      .alumni-card {
        padding: 0;
        border-radius: 25px;
        text-align: left;
        transition: transform 0.3s ease, box-shadow 0.3s ease;
        position: relative;
        overflow: hidden;
        border: none;
        display: flex;
        flex-direction: column;
        align-items: stretch;
        justify-content: flex-end;
        background: #000;
        box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
        height: 400px;
      }
      .alumni-card:hover {
        transform: translateY(-8px);
        box-shadow: 0 15px 35px rgba(0, 0, 0, 0.3);
      }
      .alumni-avatar {
        width: 100%;
        height: 100%;
        background-color: #000;
        position: absolute;
        top: 0;
        left: 0;
        z-index: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 2.5rem;
        font-weight: 700;
        color: #6c757d;
        font-family: "Bricolage Grotesque", sans-serif;
        overflow: hidden;
        border-radius: 25px;
      }

      .alumni-avatar img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center 80%;
        border-radius: 25px;
      }
      .alumni-info {
        padding: 2rem 1.5rem 1.5rem;
        position: relative;
        z-index: 2;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-end;
        background: linear-gradient(
          to top,
          rgba(255, 255, 255, 1) 0%,
          rgba(255, 255, 255, 1) 30%,
          rgba(255, 255, 255, 0.8) 50%,
          rgba(255, 255, 255, 0.4) 70%,
          rgba(255, 255, 255, 0) 100%
        );
        width: 100%;
        border-radius: 0 0 25px 25px;
        min-height: 120px;
      }
      .alumni-name {
        font-family: "Bricolage Grotesque", sans-serif;
        font-size: 1.5rem;
        font-weight: 700;
        margin-bottom: 0.5rem;
        color: #000000;
        position: relative;
        z-index: 1;
      }
      .alumni-role {
        color: #4a5568;
        font-size: 1rem;
        font-family: "Inter", sans-serif;
        margin-bottom: 1rem;
        position: relative;
        z-index: 1;
        font-weight: 500;
      }
      .alumni-description {
        max-width: 80rem;
        width: 100%;
        margin: 2rem auto 3rem;
        padding: 0 2rem;
        text-align: center;
      }
      .alumni-intro {
        font-family: "Inter", sans-serif;
        font-size: 1.125rem;
        line-height: 1.7;
        color: #e5e5f5;
        margin-bottom: 2.5rem;
        max-width: 800px;
        margin-left: auto;
        margin-right: auto;
      }
      .alumni-stats {
        display: flex;
        justify-content: center;
        gap: 3rem;
        flex-wrap: wrap;
      }
      .stat-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 0.5rem;
        padding: 2rem;
        background: rgba(255, 255, 255, 0.05);
        border-radius: 1rem;
        border: 1px solid rgba(255, 255, 255, 0.1);
        backdrop-filter: blur(10px);
        min-width: 280px;
        width: 320px;
        transition: transform 0.3s ease, box-shadow 0.3s ease;
      }
      .stat-item:hover {
        transform: translateY(-5px);
        box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
      }
      .stat-number {
        font-family: "Bricolage Grotesque", sans-serif;
        font-size: 2.5rem;
        font-weight: 800;
        color: #4361ee;
        line-height: 1;
      }
      .stat-label {
        font-family: "Inter", sans-serif;
        font-size: 0.875rem;
        color: #9ca3af;
        font-weight: 500;
        text-align: center;
      }
      .site-footer {
        width: 100%;
        margin-top: auto;
        padding: 0;
        background: #000000;
        border-top: 1px solid rgba(255, 255, 255, 0.1);
      }
      .site-footer .footer-inner {
        max-width: 80rem;
        width: calc(100% - 2rem);
        margin: 0 auto;
        padding: 1.5rem 2rem;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 2rem;
      }

      .footer-left {
        display: flex;
        align-items: center;
      }

      .footer-logo {
        display: flex;
        align-items: center;
        gap: 1rem;
      }

      .logo-circle {
        width: 40px;
        height: 40px;
        background: #ffffff;
        border-radius: 50%;
        flex-shrink: 0;
        overflow: hidden;
      }

      .logo-circle img {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }

      .copyright-text {
        color: #ffffff;
        font-family: "Inter", sans-serif;
        font-size: 0.9rem;
        font-weight: 500;
        letter-spacing: 0.02em;
        white-space: nowrap;
      }

      .footer-center {
        display: flex;
        align-items: center;
        justify-content: center;
        flex: 1;
      }

      .footer-nav {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 1.5rem;
        background: rgba(255, 255, 255, 0.05);
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        border: 1px solid rgba(255, 255, 255, 0.1);
        border-radius: 0.75rem;
        padding: 1rem 1.5rem;
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
        min-height: 60px;
        flex-wrap: wrap;
      }

      .footer-nav a {
        color: #ffffff;
        text-decoration: none;
        font-family: "Inter", sans-serif;
        font-size: 0.85rem;
        font-weight: 500;
        letter-spacing: 0.05em;
        text-transform: uppercase;
        transition: color 0.3s ease;
        white-space: nowrap;
        padding: 0.5rem 0.75rem;
        border-radius: 0.5rem;
      }

      .footer-nav a:hover {
        color: #c084fc;
        background: rgba(192, 132, 252, 0.1);
      }

      .nav-separator {
        color: #ffffff;
        font-size: 0.85rem;
        font-weight: 300;
      }

      .footer-right {
        display: flex;
        align-items: center;
      }

      .social-icons {
        display: flex;
        align-items: center;
        gap: 1rem;
      }

      .social-circle {
        width: 40px;
        height: 40px;
        background: #ffffff;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        text-decoration: none;
        color: #000000;
        font-size: 1.2rem;
        transition: all 0.3s ease;
        flex-shrink: 0;
      }

      .social-circle:hover {
        transform: scale(1.1);
        background: #c084fc;
        color: #ffffff;
      }

      .social-circle.instagram {
        position: relative;
        overflow: hidden;
      }

      .social-circle.instagram i {
        position: relative;
        z-index: 2;
      }

      .social-circle.linkedin {
        position: relative;
        overflow: hidden;
      }

      .social-circle.linkedin i {
        position: relative;
        z-index: 2;
      }
      @media (min-width: 640px) {
        .logo span {
          display: block;
        }
        .main-heading {
          font-size: 3rem;
        }
        .alumni-grid {
          grid-template-columns: repeat(2, 1fr);
        }
      }
      @media (min-width: 768px) {
        header {
          padding: 1rem 2rem;
        }
        .nav-links {
          display: flex;
        }
        .main-heading {
          font-size: 4rem;
        }
        .alumni-section {
          padding: 3rem;
        }
        .alumni-grid {
          grid-template-columns: repeat(2, 1fr);
          gap: 3rem;
        }
      }
      @media (min-width: 1024px) {
        .main-heading {
          font-size: 4.5rem;
        }
        .alumni-grid {
          grid-template-columns: repeat(4, 1fr);
        }
      }
      @media (min-width: 1280px) {
        .alumni-grid {
          grid-template-columns: repeat(4, 1fr);
          gap: 2rem;
        }
      }
      @media (max-width: 600px) {
        header {
          padding: 0.5rem 0.5rem;
        }
        nav {
          flex-direction: row;
          height: 64px;
          padding: 0.5rem 0.75rem;
          border-radius: 9999px;
        }
        .logo img {
          width: 24px;
          height: 24px;
        }
        .hamburger {
          font-size: 1.25rem;
          padding: 0.4rem;
          margin-right: 0.5rem;
        }
        .contact-btn {
          font-size: 0.85rem;
          padding: 0.5rem 1rem;
        }
        .nav-dropdown {
          width: 240px;
          padding: 0.5rem 0;
          right: 0.75rem;
        }
        .nav-dropdown a {
          padding: 0.6rem 1rem;
        }
        .logo span {
          font-size: 1rem;
        }
        .nav-links {
          flex-direction: column;
          gap: 1rem;
          font-size: 1rem;
          display: none !important;
          margin-top: 0.5rem;
        }
        .contact-btn {
          width: auto;
          padding: 0.75rem 1.5rem;
          margin-top: 0;
        }
        main {
          margin-top: 8rem !important;
          padding: 0.5rem;
        }
        .main-heading {
          font-size: 1.5rem !important;
        }
        .alumni-section {
          padding: 0.5rem;
        }
        .alumni-grid {
          grid-template-columns: repeat(2, 1fr) !important;
          gap: 0.75rem !important;
        }
        .alumni-card {
          height: 400px !important;
          position: relative !important;
          overflow: hidden !important;
        }
        .alumni-avatar {
          position: absolute !important;
          top: 0 !important;
          left: 0 !important;
          width: 100% !important;
          height: 100% !important;
        }
        .alumni-avatar img {
          object-position: center 80% !important;
        }
        .alumni-info {
          position: absolute !important;
          bottom: 0 !important;
          left: 0 !important;
          right: 0 !important;
          background: linear-gradient(
            to top,
            rgba(255, 255, 255, 1) 0%,
            rgba(255, 255, 255, 1) 30%,
            rgba(255, 255, 255, 0.8) 50%,
            rgba(255, 255, 255, 0.4) 70%,
            rgba(255, 255, 255, 0) 100%
          ) !important;
          padding: 2rem 1.5rem 1.5rem !important;
          min-height: 120px !important;
          z-index: 2 !important;
        }
        .alumni-name {
          color: #000000 !important;
          font-size: 1.5rem !important;
        }
        .alumni-role {
          font-size: 1rem !important;
        }
        .alumni-description {
          padding: 0 1rem;
          margin: 1.5rem auto 2rem;
        }
        .alumni-intro {
          font-size: 1rem;
          margin-bottom: 2rem;
        }
        .alumni-stats {
          gap: 1rem;
        }
        .stat-item {
          padding: 1.5rem;
          min-width: 200px;
          width: 240px;
        }
        .stat-number {
          font-size: 2rem;
        }
        .stat-label {
          font-size: 0.8rem;
        }
      }
      /* Footer Responsive */
      @media (max-width: 768px) {
        .site-footer .footer-inner {
          flex-direction: column;
          gap: 1.5rem;
          padding: 1.5rem 1rem;
          text-align: center;
        }

        .footer-center {
          order: 2;
        }

        .footer-left {
          order: 1;
        }

        .footer-right {
          order: 3;
        }

        .footer-nav {
          flex-wrap: wrap;
          justify-content: center;
          gap: 0.75rem;
          padding: 0.875rem 1rem;
          min-height: 50px;
          width: 100%;
          max-width: 400px;
          margin: 0 auto;
        }

        .footer-nav a {
          font-size: 0.75rem;
          padding: 0.375rem 0.5rem;
        }

        .nav-separator {
          font-size: 0.75rem;
        }
      }

      @media (max-width: 600px) {
        .site-footer .footer-inner {
          width: calc(100% - 1rem);
          padding: 1rem 0.75rem;
          gap: 1.5rem;
        }

        .logo-circle,
        .social-circle {
          width: 32px;
          height: 32px;
        }

        .copyright-text {
          font-size: 0.8rem;
        }

        .footer-nav {
          gap: 0.5rem;
          padding: 0.75rem 0.875rem;
          min-height: 45px;
          max-width: 350px;
        }

        .footer-nav a {
          font-size: 0.7rem;
          padding: 0.25rem 0.375rem;
        }

        .nav-separator {
          font-size: 0.7rem;
        }

        .social-circle {
          font-size: 1rem;
        }
      }

      @media (max-width: 480px) {
        .site-footer .footer-inner {
          width: calc(100% - 0.5rem);
          padding: 0.75rem 0.5rem;
          gap: 1.25rem;
        }

        .footer-nav {
          flex-direction: row;
          flex-wrap: wrap;
          gap: 0.375rem;
          padding: 0.625rem 0.75rem;
          min-height: 40px;
          max-width: 300px;
        }

        .nav-separator {
          display: none;
        }

        .footer-nav a {
          font-size: 0.65rem;
          padding: 0.25rem 0.375rem;
        }
      }
    </style>
  </head>
  <body>
    <!-- Header Section -->
    <header>
      <nav>
        <a href="index.html" class="logo">
          <img
            src="IMG/Favicon 1.png"
            srcset="IMG/Favicon 1.png 32w, IMG/Favicon 1.png 64w"
            sizes="32px"
            alt="DSSA Logo"
          />
          <span>DSSA</span>
        </a>
        <button class="hamburger" aria-label="Open menu">
          <i class="fas fa-bars"></i>
        </button>
        <div class="nav-links">
          <div
            style="display: flex; align-items: center; justify-content: center"
          >
            <a href="events.html">Events</a>
          </div>
          <div
            style="display: flex; align-items: center; justify-content: center"
          >
            <a href="team.html">Team</a>
          </div>
          <a href="contact.html"
            ><button class="contact-btn">Contact Us</button></a
          >
        </div>

        <div class="nav-dropdown">
          <a href="events.html">Events</a>
          <a href="team.html">Team</a>
          <a href="contact.html">Contact Us</a>
        </div>
      </nav>
    </header>

    <div data-barba="wrapper">
      <div data-barba="container" data-barba-namespace="alumni">
        <!-- Main Content -->
        <main>
          <h1 class="main-heading">Our Alumni</h1>

          <!-- Alumni Description Section -->
          <div class="alumni-description">
            <p class="alumni-intro">
              Meet the exceptional individuals who have shaped DSSA's legacy and
              continue to inspire the next generation of data science
              enthusiasts. Our alumni have gone on to achieve remarkable success
              in their careers and remain connected to our community.
            </p>

            <div class="alumni-stats">
              <div class="stat-item">
                <span class="stat-number">2024-2025</span>
                <span class="stat-label">Alumni Members</span>
              </div>
              <!-- <div class="stat-item">
                <span class="stat-number">1000+</span>
                <span class="stat-label">Students Mentored</span>
              </div>
              <div class="stat-item">
                <span class="stat-number">5+</span>
                <span class="stat-label">Years of Excellence</span>
              </div> -->
            </div>
          </div>
        </main>

        <!-- Alumni Section -->
        <section class="alumni-section">
          <div class="alumni-grid">
            <!-- President -->
            <div class="card-bg alumni-card">
              <div class="alumni-avatar">
                <img
                  src="IMG/Alumni/2024/bhagyashree.png"
                  srcset="
                    IMG/Alumni/2024/bhagyashree.png 100w,
                    IMG/Alumni/2024/bhagyashree.png 200w
                  "
                  sizes="100px"
                  alt="Bhagyashree Chitruk"
                  width="100px"
                  height="100px"
                />
              </div>
              <div class="alumni-info">
                <h3 class="alumni-name">Bhagyashree Chitruk</h3>
                <p class="alumni-role">President</p>
              </div>
            </div>

            <!-- Vice President -->
            <div class="card-bg alumni-card">
              <div class="alumni-avatar">
                <img
                  src="IMG/Alumni/2024/sohal.png"
                  srcset="
                    IMG/Alumni/2024/sohal.png 100w,
                    IMG/Alumni/2024/sohal.png 200w
                  "
                  sizes="100px"
                  alt="Sohal Dhavale"
                  width="100px"
                  height="100px"
                />
              </div>
              <div class="alumni-info">
                <h3 class="alumni-name">Sohal Dhavale</h3>
                <p class="alumni-role">Vice President</p>
              </div>
            </div>

            <!-- Secretary -->
            <div class="card-bg alumni-card">
              <div class="alumni-avatar">
                <img
                  src="IMG/Alumni/2024/achal.png"
                  srcset="
                    IMG/Alumni/2024/achal.png 100w,
                    IMG/Alumni/2024/achal.png 200w
                  "
                  sizes="100px"
                  alt="Achal Kurundwade"
                  width="100px"
                  height="100px"
                />
              </div>
              <div class="alumni-info">
                <h3 class="alumni-name">Achal Kurundwade</h3>
                <p class="alumni-role">Secretary</p>
              </div>
            </div>

            <!-- Treasurer -->
            <div class="card-bg alumni-card">
              <div class="alumni-avatar">
                <img
                  src="IMG/Alumni/2024/sourabh.png"
                  srcset="
                    IMG/Alumni/2024/sourabh.png 100w,
                    IMG/Alumni/2024/sourabh.png 200w
                  "
                  sizes="100px"
                  alt="Sourabh Kamble"
                  width="100px"
                  height="100px"
                />
              </div>
              <div class="alumni-info">
                <h3 class="alumni-name">Sourabh Kamble</h3>
                <p class="alumni-role">Treasurer</p>
              </div>
            </div>

            <!-- Event Lead 1 -->
            <div class="card-bg alumni-card">
              <div class="alumni-avatar">
                <img
                  src="IMG/Alumni/2024/atharva.png"
                  srcset="
                    IMG/Alumni/2024/atharva.png 100w,
                    IMG/Alumni/2024/atharva.png 200w
                  "
                  sizes="100px"
                  alt="Atharv Kamble"
                  width="100px"
                  height="100px"
                />
              </div>
              <div class="alumni-info">
                <h3 class="alumni-name">Atharv Kamble</h3>
                <p class="alumni-role">Event Lead</p>
              </div>
            </div>

            <!-- Event Lead 2 -->
            <div class="card-bg alumni-card">
              <div class="alumni-avatar">
                <img
                  src="IMG/Alumni/2024/siddhi.png"
                  srcset="
                    IMG/Alumni/2024/siddhi.png 100w,
                    IMG/Alumni/2024/siddhi.png 200w
                  "
                  sizes="100px"
                  alt="Siddhi Lipare"
                  width="100px"
                  height="100px"
                />
              </div>
              <div class="alumni-info">
                <h3 class="alumni-name">Siddhi Lipare</h3>
                <p class="alumni-role">Event Lead</p>
              </div>
            </div>

            <!-- Data Manager 1 -->
            <div class="card-bg alumni-card">
              <div class="alumni-avatar">
                <img
                  src="IMG/Alumni/2024/pratik.png"
                  srcset="
                    IMG/Alumni/2024/pratik.png 100w,
                    IMG/Alumni/2024/pratik.png 200w
                  "
                  sizes="100px"
                  alt="Pratik Patil"
                  width="100px"
                  height="100px"
                />
              </div>
              <div class="alumni-info">
                <h3 class="alumni-name">Pratik Patil</h3>
                <p class="alumni-role">Data Manager</p>
              </div>
            </div>

            <!-- Data Manager 2 -->
            <div class="card-bg alumni-card">
              <div class="alumni-avatar">
                <img
                  src="IMG/Alumni/2024/pradeep.png"
                  srcset="
                    IMG/Alumni/2024/pradeep.png 100w,
                    IMG/Alumni/2024/pradeep.png 200w
                  "
                  sizes="100px"
                  alt="Pradeep Mali"
                  width="100px"
                  height="100px"
                />
              </div>
              <div class="alumni-info">
                <h3 class="alumni-name">Pradeep Mali</h3>
                <p class="alumni-role">Data Manager</p>
              </div>
            </div>

            <!-- Social Media Lead 1 -->
            <div class="card-bg alumni-card">
              <div class="alumni-avatar">
                <img
                  src="IMG/Alumni/2024/shruti.png"
                  srcset="
                    IMG/Alumni/2024/shruti.png 100w,
                    IMG/Alumni/2024/shruti.png 200w
                  "
                  sizes="100px"
                  alt="Shruti Bora"
                  width="100px"
                  height="100px"
                />
              </div>
              <div class="alumni-info">
                <h3 class="alumni-name">Shruti Bora</h3>
                <p class="alumni-role">Social Media Lead</p>
              </div>
            </div>

            <!-- Social Media Lead 2 -->
            <div class="card-bg alumni-card">
              <div class="alumni-avatar">
                <img
                  src="IMG/Alumni/2024/viraj.png"
                  srcset="
                    IMG/Alumni/2024/viraj.png 100w,
                    IMG/Alumni/2024/viraj.png 200w
                  "
                  sizes="100px"
                  alt="Viraj Bele"
                  width="100px"
                  height="100px"
                />
              </div>
              <div class="alumni-info">
                <h3 class="alumni-name">Viraj Bele</h3>
                <p class="alumni-role">Social Media Lead</p>
              </div>
            </div>

            <!-- Technical Head 1 -->
            <div class="card-bg alumni-card">
              <div class="alumni-avatar">
                <img
                  src="IMG/Alumni/2024/sandesh.png"
                  srcset="
                    IMG/Alumni/2024/sandesh.png 100w,
                    IMG/Alumni/2024/sandesh.png 200w
                  "
                  sizes="100px"
                  alt="Sandesh Patil"
                  width="100px"
                  height="100px"
                />
              </div>
              <div class="alumni-info">
                <h3 class="alumni-name">Sandesh Patil</h3>
                <p class="alumni-role">Technical Head</p>
              </div>
            </div>

            <!-- Technical Head 2 -->
            <div class="card-bg alumni-card">
              <div class="alumni-avatar">
                <img
                  src="IMG/Alumni/2024/divya.png"
                  srcset="
                    IMG/Alumni/2024/divya.png 100w,
                    IMG/Alumni/2024/divya.png 200w
                  "
                  sizes="100px"
                  alt="Divya Patil"
                  width="100px"
                  height="100px"
                />
              </div>
              <div class="alumni-info">
                <h3 class="alumni-name">Divya Patil</h3>
                <p class="alumni-role">Technical Head</p>
              </div>
            </div>
          </div>
        </section>
      </div>
    </div>

    <footer class="site-footer">
      <div class="footer-inner">
        <div class="footer-left">
          <div class="footer-logo">
            <a href="index.html">
              <div class="logo-circle">
                <img
                  src="IMG/Favicon 1.png"
                  srcset="IMG/Favicon 1.png 32w, IMG/Favicon 1.png 64w"
                  sizes="40px"
                  alt="DSSA Logo"
                  width="100%"
                /></div
            ></a>
            <span class="copyright-text">COPYRIGHT ©2025 DSSA CLUB</span>
          </div>
        </div>

        <div class="footer-center">
          <nav class="footer-nav">
            <a href="index.html">ABOUT US</a>
            <span class="nav-separator">|</span>
            <a href="team.html">OUR TEAM</a>
            <span class="nav-separator">|</span>
            <a href="contact.html">CONTACT US</a>
            <span class="nav-separator">|</span>
            <a href="events.html">EVENTS</a>
          </nav>
        </div>

        <div class="footer-right">
          <div class="social-icons">
            <a
              href="https://www.instagram.com/dssa_dkte/"
              target="_blank"
              rel="noopener"
              aria-label="Instagram"
              class="social-circle instagram"
            >
              <i class="fab fa-instagram"></i>
            </a>
            <a
              href="https://www.linkedin.com/company/data-science-student-association/"
              target="_blank"
              rel="noopener"
              aria-label="LinkedIn"
              class="social-circle linkedin"
            >
              <i class="fab fa-linkedin-in"></i>
            </a>
          </div>
        </div>
      </div>
    </footer>

    <script>
      // Hide nav on scroll down, show on scroll up
      let lastScrollY = window.scrollY;
      const header = document.querySelector("header");
      window.addEventListener("scroll", () => {
        if (window.scrollY > lastScrollY && window.scrollY > 50) {
          header.classList.add("nav-hidden");
        } else {
          header.classList.remove("nav-hidden");
        }
        lastScrollY = window.scrollY;
      });

      // Hamburger dropdown menu
      const hamburger = document.querySelector(".hamburger");
      const navDropdown = document.querySelector(".nav-dropdown");

      if (hamburger && navDropdown) {
        hamburger.addEventListener("click", () => {
          navDropdown.classList.toggle("open");

          // Toggle hamburger icon
          const icon = hamburger.querySelector("i");
          if (icon) {
            if (navDropdown.classList.contains("open")) {
              icon.classList.remove("fa-bars");
              icon.classList.add("fa-times");
            } else {
              icon.classList.add("fa-bars");
              icon.classList.remove("fa-times");
            }
          }
        });

        // Close dropdown when clicking outside
        document.addEventListener("click", (e) => {
          if (
            !hamburger.contains(e.target) &&
            !navDropdown.contains(e.target)
          ) {
            navDropdown.classList.remove("open");
            const icon = hamburger.querySelector("i");
            if (icon) {
              icon.classList.add("fa-bars");
              icon.classList.remove("fa-times");
            }
          }
        });

        // Close dropdown when clicking on a link
        navDropdown.querySelectorAll("a").forEach((link) => {
          link.addEventListener("click", () => {
            navDropdown.classList.remove("open");
            const icon = hamburger.querySelector("i");
            if (icon) {
              icon.classList.add("fa-bars");
              icon.classList.remove("fa-times");
            }
          });
        });
      }
    </script>
    <script src="https://unpkg.com/lenis@1.3.8/dist/lenis.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/gsap@3.13.0/dist/gsap.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/gsap@3.13.0/dist/ScrollTrigger.min.js"></script>
    <script src="https://unpkg.com/split-type"></script>
    <script src="https://unpkg.com/@barba/core"></script>
    <script>
      // Lenis smooth scroll initialization
      const lenis = new Lenis({
        lerp: 0.08,
        smoothWheel: true,
        smoothTouch: false,
        gestureOrientation: "vertical",
        orientation: "vertical",
        wheelMultiplier: 1,
        touchMultiplier: 1,
        autoResize: true,
        overscroll: true,
      });
      function raf(time) {
        lenis.raf(time);
        requestAnimationFrame(raf);
      }
      requestAnimationFrame(raf);
    </script>
  </body>
</html>