<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>ISA Officers | UNCW</title>
    <style>
        :root {
            --primary-color: #007b83;
            --accent-color: #00b8a9;
            --bg-color: #f7f9fb;
            --text-color: #222;
            --max-width: 1100px;
        }

        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
            font-family: 'Inter', sans-serif;
        }

        body {
            background-color: var(--bg-color);
            color: var(--text-color);
            line-height: 1.6;
        }

        /* ===== HEADER ===== */
        .header {
            background-color: var(--primary-color);
            color: white;
            padding: 1rem 0;
            box-shadow: 0 2px 8px rgba(0,0,0,0.1);
        }

        .header-container {
            display: flex;
            justify-content: space-between;
            align-items: center;
            max-width: var(--max-width);
            margin: auto;
            padding: 0 1rem;
        }

        .logo {
            font-size: 1.4rem;
            font-weight: 600;
        }

            .logo img {
                height: 40px;
                vertical-align: middle;
                margin-right: 8px;
            }

        .nav ul {
            list-style: none;
            display: flex;
            gap: 1rem;
        }

        .nav a {
            color: white;
            text-decoration: none;
            font-weight: 500;
            transition: color 0.3s;
        }

            .nav a:hover,
            .nav a.active {
                color: var(--accent-color);
            }

        /* ===== OFFICERS ===== */
        .officers-main {
            max-width: var(--max-width);
            margin: 2rem auto;
            padding: 0 1rem;
        }

        .officer-card {
            background: white;
            display: flex;
            gap: 24px;
            padding: 1.8rem 2rem;
            margin-bottom: 1.5rem;
            border-radius: 12px;
            box-shadow: 0 4px 16px rgba(0,0,0,0.15);
            align-items: center;
            transition: transform 0.3s, box-shadow 0.3s;
        }

            .officer-card:hover {
                transform: translateY(-5px);
                box-shadow: 0 8px 24px rgba(0,0,0,0.2);
            }

            .officer-card img {
                width: 150px;
                height: 150px;
                object-fit: cover;
                border-radius: 50%;
                flex-shrink: 0;
            }

        .officer-role {
            color: var(--primary-color);
            font-weight: 600;
            margin-bottom: 0.6rem;
        }

        .officer-info p {
            margin-bottom: 0.5rem;
        }

        .officer-info a {
            color: var(--primary-color);
            text-decoration: none;
            font-weight: 500;
        }

            .officer-info a:hover {
                color: var(--accent-color);
            }

        /* ===== FOOTER ===== */
        .footer {
            background-color: #004f55;
            color: #eee;
            text-align: center;
            padding: 1.5rem 1rem;
            margin-top: 2rem;
        }

        .footer-nav {
            display: flex;
            justify-content: center;
            gap: 1rem;
            list-style: none;
            margin-bottom: 0.8rem;
        }

            .footer-nav a {
                color: #eee;
                text-decoration: none;
            }

                .footer-nav a:hover {
                    color: var(--accent-color);
                }

        /* ===== RESPONSIVE ===== */
        @media (max-width: 768px) {
            .header-container {
                flex-direction: column;
                text-align: center;
            }

            .nav ul {
                flex-wrap: wrap;
                justify-content: center;
            }

            .officer-card {
                flex-direction: column;
                text-align: center;
                align-items: center;
            }
        }
    </style>
</head>
<body>

    <!-- ===== HEADER ===== -->
    <header class="header">
        <div class="header-container">
            <h1 class="logo">
                <img src="images/3.jpg" alt="ISA Logo" style="height:50px; vertical-align:middle; margin-right:8px;">
                Information Systems Association
            </h1>
            <nav class="nav">
                <ul>
                    <li><a href="index.html">Home</a></li>
                    <li><a href="#">About</a></li>
                    <li><a href="officers.html" class="active">Officers</a></li>
                    <li><a href="#">Applications</a></li>
                    <li><a href="#">Calendar</a></li>
                    <li><a href="events.html">Past Events</a></li>
                </ul>
            </nav>
        </div>
    </header>

    <!-- ===== OFFICERS ===== -->
    <main class="officers-main">
        <h2 style="text-align:center; font-size:2rem; margin-bottom:2rem;">Meet Our Officers</h2>

        <!-- Sarah Myint -->
        <div class="officer-card">
            <img src="images/Sarah.png" alt="Sarah Myint">
            <div class="officer-info">
                <h2>Sarah Myint</h2>
                <div class="officer-role">Co-President</div>
                <p>Provide leadership and direction for the Information Systems Association, oversees meetings and events, and works with officers to ensure the organization meets its goals and supports member development.</p>
                <p><strong>Major:</strong> Information Systems & Accounting</p>
                <p><strong>Expected Graduation:</strong> May 2026</p>
                <p><strong>Email:</strong> <a href="mailto:nsm8173@uncw.edu">nsm8173@uncw.edu</a></p>
            </div>
        </div>

        <!-- Nathan Mattern -->
        <div class="officer-card">
            <img src="images/Nate.png" alt="Nathan Mattern">
            <div class="officer-info">
                <h2>Nathan Mattern</h2>
                <div class="officer-role">Co-President</div>
                <p>
                    Collaborate with other Co-President to manage
                    operations and help plan events that promote student engagement and professional growth.
                </p>
                <p><strong>Major:</strong> Information Systems</p>
                <p><strong>Expected Graduation:</strong> May 2026</p>
                <p><strong>Email:</strong> <a href="mailto:njm2234@uncw.edu">njm2234@uncw.edu</a></p>
            </div>
        </div>

        <!-- Natalie Janouris -->
        <div class="officer-card">
            <img src="images/Natalie.jpg" alt="Natalie Janouris">
            <div class="officer-info">
                <h2>Natalie Janouris</h2>
                <div class="officer-role">Secretary</div>
                <p>Maintain accurate records for ISA, including meeting notes and official documents, and supporting communication between officers to ensure smooth organization and continuity.</p>
                <p><strong>Major:</strong> Information Systems</p>
                <p><strong>Expected Graduation:</strong> May 2026</p>
                <p><strong>Email:</strong> <a href="mailto:njj3911@uncw.edu">njj3911@uncw.edu</a></p>
            </div>
        </div>

        <!-- Christian Cammack -->
        <div class="officer-card">
            <img src="images/CCammack.jpeg" alt="Christian Cammack">
            <div class="officer-info">
                <h2>Christian Cammack</h2>
                <div class="officer-role">Director of Technology</div>
                <p>
                    Manage the ISA’s technical resources, website, and digital tools,
                    supporting meetings, events, and member projects.
                    Currently working for the Technology Assistance Center at UNCW and part time at a restaurant.
                </p>
                <p><strong>Major:</strong> Information Technology</p>
                <p><strong>Expected Graduation:</strong> December 2026</p>
                <p><strong>Email:</strong> <a href="mailto:cmc7516@uncw.edu">cmc7516@uncw.edu</a></p>
            </div>
        </div>

        <!-- Christian Cole -->
        <div class="officer-card">
            <img src="communications.jpg" alt="Christian Cole">
            <div class="officer-info">
                <h2>Christian Cole</h2>
                <div class="officer-role">Director of Communications</div>
                <p>Handle the ISA's communications and outreach, including announcements, events, and promotional materials.</p>
                <p><strong>Major:</strong> Information Technology</p>
                <p><strong>Expected Graduation:</strong> May 2026</p>
                <p><strong>Email:</strong> <a href="mailto:ccc7755@uncw.edu">ccc7755@uncw.edu</a></p>
            </div>
        </div>

    </main>

    <!-- ===== FOOTER ===== -->
    <footer class="footer">
        <ul class="footer-nav">
            <li><a href="index.html">Home</a></li>
            <li><a href="#">About</a></li>
            <li><a href="officers.html">Officers</a></li>
            <li><a href="#">Applications</a></li>
            <li><a href="#">Calendar</a></li>
            <li><a href="events.html">Past Events</a></li>
        </ul>
        <p>&copy; 2025 Information Systems Association | UNCW</p>
    </footer>

</body>
</html>