<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>About Us - ISTE PESCE</title>
    <link rel="website icon" type="image/jpeg" href="images/iste logo.jpeg" />
    <link
      href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap"
      rel="stylesheet"
    />
    <link
      href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;500;600;700&display=swap"
      rel="stylesheet"
    />

    <style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }

      body {
        font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI",
          Roboto, sans-serif;
        background: linear-gradient(
          135deg,
          #0f172a 0%,
          #1e293b 30%,
          #334155 60%,
          #475569 100%
        );
        color: #ffffff;
        line-height: 1.7;
        overflow-x: hidden;
        position: relative;
      }

      /* Stunning Animated Background */
      .particle-bg {
        position: fixed;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        z-index: -1;
        background: linear-gradient(
          135deg,
          #0f172a 0%,
          #1e293b 30%,
          #334155 60%,
          #475569 100%
        );
        overflow: hidden;
      }

      .particle {
        position: absolute;
        background: radial-gradient(
          circle,
          rgba(255, 255, 255, 0.7) 0%,
          rgba(255, 255, 255, 0.1) 70%,
          transparent 100%
        );
        border-radius: 50%;
        pointer-events: none;
        animation: float 8s ease-in-out infinite;
      }

      .particle:nth-child(odd) {
        background: radial-gradient(
          circle,
          rgba(99, 102, 241, 0.6) 0%,
          rgba(99, 102, 241, 0.1) 70%,
          transparent 100%
        );
        animation-duration: 12s;
      }

      .particle:nth-child(even) {
        background: radial-gradient(
          circle,
          rgba(139, 92, 246, 0.6) 0%,
          rgba(139, 92, 246, 0.1) 70%,
          transparent 100%
        );
        animation-duration: 10s;
      }

      .particle:nth-child(3n) {
        background: radial-gradient(
          circle,
          rgba(6, 182, 212, 0.5) 0%,
          rgba(6, 182, 212, 0.1) 70%,
          transparent 100%
        );
        animation-duration: 15s;
      }

      @keyframes float {
        0%,
        100% {
          transform: translateY(0px) rotate(0deg) scale(1);
          opacity: 0.3;
        }
        25% {
          transform: translateY(-15px) rotate(90deg) scale(1.05);
          opacity: 0.6;
        }
        50% {
          transform: translateY(-30px) rotate(180deg) scale(0.95);
          opacity: 0.4;
        }
        75% {
          transform: translateY(-15px) rotate(270deg) scale(1.02);
          opacity: 0.7;
        }
      }

      /* Floating Geometric Shapes */
      .shape {
        position: absolute;
        opacity: 0.08;
        animation: shapeFloat 25s ease-in-out infinite;
      }

      .shape:nth-child(3n) {
        animation-delay: -8s;
      }

      .shape:nth-child(3n + 1) {
        animation-delay: -15s;
      }

      .shape:nth-child(3n + 2) {
        animation-delay: -22s;
      }

      @keyframes shapeFloat {
        0%,
        100% {
          transform: translateY(0px) rotate(0deg) scale(1);
          opacity: 0.08;
        }
        33% {
          transform: translateY(-25px) rotate(120deg) scale(1.1);
          opacity: 0.12;
        }
        66% {
          transform: translateY(-10px) rotate(240deg) scale(0.9);
          opacity: 0.1;
        }
      }

      /* Glowing Orbs */
      .glow-orb {
        position: absolute;
        border-radius: 50%;
        filter: blur(1px);
        animation: glowPulse 8s ease-in-out infinite;
      }

      @keyframes glowPulse {
        0%,
        100% {
          opacity: 0.2;
          transform: scale(1);
        }
        50% {
          opacity: 0.5;
          transform: scale(1.1);
        }
      }

      /* Navbar */
      .navbar {
        background: rgba(15, 23, 42, 0.95);
        backdrop-filter: blur(20px);
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        position: fixed;
        top: 0;
        width: 100%;
        z-index: 1000;
        padding: 1rem 2rem;
        transition: all 0.3s ease;
        display: flex;
        justify-content: space-between;
        align-items: center;
      }

      .brand {
        display: flex;
        align-items: center;
        text-decoration: none;
        gap: 1rem;
      }

      .logo-img {
        width: 60px;
        height: 60px;
      }

      .logo:hover {
        transform: scale(1.05);
        box-shadow: 0 6px 25px rgba(99, 102, 241, 0.4);
      }

      .navbar .site-title {
        font-family: "Playfair Display", serif;
        font-size: 1.5rem;
        font-weight: 600;
        color: #ffffff;
        letter-spacing: -0.5px;
      }

      .nav-links {
        list-style: none;
        display: flex;
        gap: 2rem;
        margin: 0;
        padding: 0;
        align-items: center;
      }

      .nav-links a {
        color: #e2e8f0;
        text-decoration: none;
        font-weight: 500;
        transition: all 0.3s ease;
        padding: 0.5rem 1rem;
        border-radius: 8px;
      }

      .nav-links a:hover {
        color: #6366f1;
        background: rgba(99, 102, 241, 0.1);
      }

      .dropdown {
        position: relative;
      }

      .dropdown-menu {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        background: rgba(15, 23, 42, 0.95);
        backdrop-filter: blur(20px);
        border: 1px solid rgba(255, 255, 255, 0.1);
        border-radius: 12px;
        padding: 0.5rem 0;
        min-width: 200px;
        box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
      }

      .dropdown:hover .dropdown-menu {
        display: block;
      }

      .dropdown-menu li {
        list-style: none;
      }

      .dropdown-menu a {
        display: block;
        padding: 0.75rem 1.5rem;
        color: #e2e8f0;
        text-decoration: none;
        transition: all 0.3s ease;
      }

      .dropdown-menu a:hover {
        background: rgba(99, 102, 241, 0.1);
        color: #6366f1;
      }

      /* Main Content */
      .main-container {
        max-width: 1000px;
        margin: 0 auto;
        padding: 6rem 2rem 4rem;
      }

      .hero-section {
        text-align: center;
        margin-bottom: 5rem;
      }

      .hero-title {
        font-family: "Montserrat", "Oswald", "Poppins", sans-serif;
        font-size: 3.9rem;
        font-weight: 800;
        margin-bottom: 1.5rem;
        letter-spacing: -0.5px;
        line-height: 1.15;
        background: linear-gradient(135deg, #7c3aed, #2563eb, #06b6d4);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        text-shadow: 0 6px 26px rgba(124, 58, 237, 0.25);
      }

      .hero-subtitle {
        font-size: 1.25rem;
        color: #a0a0a0;
        max-width: 600px;
        margin: 0 auto 3rem;
        font-weight: 400;
      }

      /* Enhanced Card Styles */
      .content-card {
        background: rgba(255, 255, 255, 0.03);
        border: 1px solid rgba(255, 255, 255, 0.1);
        border-radius: 20px;
        padding: 3rem;
        margin-bottom: 3rem;
        backdrop-filter: blur(10px);
        transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        position: relative;
        overflow: hidden;
      }

      .content-card::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: linear-gradient(
          135deg,
          rgba(99, 102, 241, 0.05),
          rgba(139, 92, 246, 0.05)
        );
        opacity: 0;
        transition: opacity 0.4s ease;
      }

      .content-card:hover {
        transform: translateY(-6px);
        border-color: rgba(99, 102, 241, 0.2);
        box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2),
          0 0 20px rgba(99, 102, 241, 0.1);
      }

      .content-card:hover::before {
        opacity: 1;
      }

      .content-card:hover::after {
        opacity: 0.8;
      }

      .card-title {
        font-family: "Playfair Display", serif;
        font-size: 2rem;
        font-weight: 600;
        color: #ffffff;
        margin-bottom: 1.5rem;
        letter-spacing: -0.5px;
        position: relative;
        z-index: 1;
      }

      .card-text {
        font-size: 1.1rem;
        color: #d0d0d0;
        line-height: 1.8;
        margin-bottom: 1rem;
        position: relative;
        z-index: 1;
      }

      .motto-section {
        text-align: center;
        background: linear-gradient(
          135deg,
          rgba(99, 102, 241, 0.1),
          rgba(139, 92, 246, 0.1)
        );
        border: 1px solid rgba(99, 102, 241, 0.2);
      }

      .motto-text {
        font-family: "Playfair Display", serif;
        font-size: 1.5rem;
        font-style: italic;
        color: #ffffff;
        font-weight: 500;
        position: relative;
        z-index: 1;
      }

      /* Enhanced Grid Styles */
      .grid-container {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 2rem;
        margin: 4rem 0;
      }

      .grid-card {
        background: rgba(255, 255, 255, 0.03);
        border: 1px solid rgba(255, 255, 255, 0.1);
        border-radius: 16px;
        padding: 2.5rem;
        text-align: center;
        backdrop-filter: blur(10px);
        transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        position: relative;
        overflow: hidden;
      }

      .grid-card::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: linear-gradient(
          135deg,
          rgba(99, 102, 241, 0.05),
          rgba(139, 92, 246, 0.05)
        );
        opacity: 0;
        transition: opacity 0.4s ease;
      }

      .grid-card:hover {
        transform: translateY(-6px);
        border-color: rgba(99, 102, 241, 0.2);
        box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2),
          0 0 20px rgba(99, 102, 241, 0.1);
      }

      .grid-card:hover::before {
        opacity: 1;
      }

      .grid-card:hover::after {
        opacity: 0.8;
      }

      .grid-card-icon {
        width: 80px;
        height: 80px;
        margin: 0 auto 1.5rem;
        background: linear-gradient(135deg, #6366f1, #8b5cf6);
        border-radius: 20px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 2rem;
        color: white;
        position: relative;
        z-index: 1;
        transition: all 0.3s ease;
      }

      .grid-card:hover .grid-card-icon {
        transform: scale(1.1);
        box-shadow: 0 10px 25px rgba(99, 102, 241, 0.3);
      }

      .grid-card-title {
        font-family: "Playfair Display", serif;
        font-size: 1.5rem;
        font-weight: 600;
        color: #ffffff;
        margin-bottom: 1rem;
        position: relative;
        z-index: 1;
      }

      .grid-card-text {
        font-size: 1rem;
        color: #b0b0b0;
        line-height: 1.7;
        position: relative;
        z-index: 1;
      }

      .social-section {
        text-align: center;
        margin: 4rem 0;
      }

      .social-title {
        font-family: "Playfair Display", serif;
        font-size: 2rem;
        font-weight: 600;
        color: #ffffff;
        margin-bottom: 2rem;
      }

      .social-links {
        display: flex;
        justify-content: center;
        gap: 2rem;
        margin-bottom: 2rem;
      }

      .social-link {
        display: flex;
        align-items: center;
        justify-content: center;
      }

      .social-link img {
        width: 35px;
        height: 35px;
        object-fit: cover;
      }
      .social-link .email-icon {
        width: 35px;
        height: 25px;
        object-fit: cover;
        display: block;
        margin: 0 auto;
      }

      .social-link:hover img,
      .social-link:hover .email-icon {
        transform: scale(1.18);
        box-shadow: 0 4px 18px rgba(99, 102, 241, 0.25);
        transition: transform 0.2s, box-shadow 0.2s;
      }

      .footer {
        background: rgba(13, 13, 13, 0.95);
        border-top: 1px solid rgba(255, 255, 255, 0.1);
        padding: 2rem;
        text-align: center;
        margin-top: 4rem;
      }

      .footer-text {
        color: #808080;
        font-size: 1.3rem;
      }

      /* Responsive Design */
      @media (max-width: 768px) {
        .nav-links {
          display: none;
        }

        .hero-title {
          font-size: 2.5rem;
        }

        .grid-container {
          grid-template-columns: 1fr;
        }

        .content-card {
          padding: 2rem;
        }

        .main-container {
          padding: 5rem 1rem 2rem;
        }
      }

      /* Smooth Animations */
      .fade-in {
        opacity: 0;
        transform: translateY(30px);
        animation: fadeInUp 0.8s ease forwards;
      }

      @keyframes fadeInUp {
        to {
          opacity: 1;
          transform: translateY(0);
        }
      }

      .fade-in:nth-child(2) {
        animation-delay: 0.2s;
      }
      .fade-in:nth-child(3) {
        animation-delay: 0.4s;
      }
      .fade-in:nth-child(4) {
        animation-delay: 0.6s;
      }
    </style>
  </head>
  <body>
    <!-- Stunning Animated Background -->
    <div class="particle-bg" id="particle-bg"></div>

    <!-- Navigation -->
    <!-- Navigation -->
    <nav class="navbar">
      <a href="index.html" class="brand">
        <img
          src="Iste logo perfect background removed.png"
          alt="ISTE Logo"
          class="logo-img"
        />
        <span class="site-title">ISTE</span>
      </a>
      <ul class="nav-links">
        <li><a href="index.html">Home</a></li>
        <li><a href="event.html">Events</a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle">Student Chapters</a>
          <ul class="dropdown-menu">
            <li><a href="istewings.html">ISTE WINGS</a></li>
            <li><a href="istearcs.html">ISTE ARCS</a></li>
          </ul>
        </li>
        <li><a href="our_team.html">Team</a></li>
        <li><a href="contact.html">Contact</a></li>
        <li><a href="aboutus.html">About</a></li>
      </ul>
    </nav>

    <!-- Main Content -->
    <div class="main-container">
      <section class="hero-section fade-in">
        <h1 class="hero-title">About ISTE PESCE</h1>
        <p class="hero-subtitle">
          Empowering the next generation of technologists through innovation,
          collaboration, and excellence since 2016.
        </p>
      </section>

      <section class="content-card fade-in">
        <h2 class="card-title">Our Story</h2>
        <p class="card-text">
          Established in 2016, ISTE PESCE stands as a distinguished consortium
          of visionary technologists and adept coders. United by an unwavering
          commitment to technological advancement and innovation, we endeavor to
          develop avant-garde solutions that streamline and enrich quotidian
          experiences—empowering the forthcoming cadre of trailblazers to
          architect the future with ingenuity and excellence.
        </p>
        <p class="card-text">
          Our club embodies a center of innovation and technical excellence,
          uniting skilled individuals to lead pioneering projects, explore
          emerging technologies, and develop solutions with tangible impact. We
          are dedicated to fostering collaboration and knowledge sharing,
          creating an environment where innovative ideas are nurtured and
          transformed into meaningful, transformative outcomes.
        </p>
      </section>

      <div class="grid-container">
        <div class="grid-card fade-in">
          <div class="grid-card-icon">👁️</div>
          <h3 class="grid-card-title">Our Vision</h3>
          <p class="grid-card-text">
            At ISTE, we cultivate a culture of seamless collaboration that
            transcends traditional silos, fostering a cohesive and agile
            ecosystem. This philosophy enhances mutual trust, accelerates
            resolution of critical challenges, and optimizes the management of
            unforeseen tasks—collectively driving heightened productivity and
            pioneering innovation within our tech community.
          </p>
        </div>
        <div class="grid-card fade-in">
          <div class="grid-card-icon">🎯</div>
          <h3 class="grid-card-title">Our Mission</h3>
          <p class="grid-card-text">
            Our mission is to foster student interest in development and
            operations, enhance their technical and development skills, and
            encourage project-building and participation in competitions. We aim
            to cultivate leadership qualities, empowering students to become
            confident and respectful members of society.
          </p>
        </div>
      </div>

      <section class="content-card motto-section fade-in">
        <h2 class="card-title">Our Motto</h2>
        <p class="motto-text">"Forge from Fundamentals, Excel Beyond."</p>
        <p class="card-text" style="margin-top: 1rem; font-style: italic">
          Turning core knowledge into limitless innovation.
        </p>
      </section>

      <section class="social-section fade-in">
        <h2 class="social-title">Connect With Us</h2>
        <div class="social-links">
          <a
            href="https://www.instagram.com/pesce.iste/"
            class="social-link"
            target="_blank"
          >
            <img
              src="https://cdn.worldvectorlogo.com/logos/instagram-2016-5.svg"
              alt="Instagram"
            />
          </a>
          <a
            href="https://www.linkedin.com/company/iste-pesce/"
            class="social-link"
            target="_blank"
          >
            <img
              src="https://cdn.worldvectorlogo.com/logos/linkedin-icon-2.svg"
              alt="LinkedIn"
            />
          </a>
          <a href="mailto:iste@pesce.ac.in" class="social-link">
            <img
              src="https://cdn.worldvectorlogo.com/logos/gmail-icon.svg"
              alt="Email"
              class="email-icon"
            />
          </a>
        </div>
        <p class="card-text" style="color: #a0a0a0; font-size: 1rem">
          Attracting innovators, igniting passions, shaping futures.
        </p>
      </section>
    </div>

    <!-- Footer -->
    <footer class="footer">
      <p class="footer-text">
        <b>&copy; 2025 ISTE PESCE. All rights reserved.</b>
      </p>
    </footer>

    <!-- Custom Particle Animation Script -->
    <script>
      function createParticleBackground() {
        const bg = document.getElementById("particle-bg");

        // Create floating particles with clean colors
        for (let i = 0; i < 50; i++) {
          const particle = document.createElement("div");
          particle.className = "particle";
          particle.style.left = Math.random() * 100 + "%";
          particle.style.top = Math.random() * 100 + "%";
          particle.style.width = Math.random() * 15 + 10 + "px";
          particle.style.height = particle.style.width;
          particle.style.animationDelay = Math.random() * 8 + "s";
          particle.style.animationDuration = Math.random() * 8 + 8 + "s";

          // Clean, professional colors only
          const colors = [
            "rgba(255, 255, 255, 0.7)",
            "rgba(99, 102, 241, 0.6)",
            "rgba(139, 92, 246, 0.6)",
            "rgba(6, 182, 212, 0.5)",
          ];

          const randomColor = colors[Math.floor(Math.random() * colors.length)];
          particle.style.background = `radial-gradient(circle, ${randomColor} 0%, ${randomColor
            .replace("0.7", "0.1")
            .replace("0.6", "0.1")
            .replace("0.5", "0.1")} 70%, transparent 100%)`;

          bg.appendChild(particle);
        }
      }

      // Initialize particle background
      document.addEventListener("DOMContentLoaded", function () {
        createParticleBackground();

        // Smooth scroll and animations
        const observerOptions = {
          threshold: 0.1,
          rootMargin: "0px 0px -50px 0px",
        };

        const observer = new IntersectionObserver(function (entries) {
          entries.forEach((entry) => {
            if (entry.isIntersecting) {
              entry.target.style.opacity = "1";
              entry.target.style.transform = "translateY(0)";
            }
          });
        }, observerOptions);

        document.querySelectorAll(".fade-in").forEach((el) => {
          observer.observe(el);
        });
      });
    </script>
  </body>
</html>