/* =========================================
           BASIC RESET
        ========================================= */

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


        html {
            scroll-behavior: smooth;
        }


        body {

            min-height: 100vh;

            background:
                radial-gradient(
                    circle at 15% 20%,
                    rgba(0, 200, 255, 0.09),
                    transparent 25%
                ),

                radial-gradient(
                    circle at 85% 75%,
                    rgba(255, 0, 120, 0.08),
                    transparent 25%
                ),

                #050812;

            color: white;

            font-family: 'Poppins', sans-serif;

            overflow-x: hidden;
        }


        /* =========================================
           CYBER GRID BACKGROUND
        ========================================= */

        body::before {

            content: "";

            position: fixed;

            inset: 0;

            background-image:

                linear-gradient(
                    rgba(0, 200, 255, 0.055) 1px,
                    transparent 1px
                ),

                linear-gradient(
                    90deg,
                    rgba(0, 200, 255, 0.055) 1px,
                    transparent 1px
                );

            background-size: 32px 32px;

            pointer-events: none;

            z-index: -2;
        }


        /* =========================================
           BACKGROUND LIGHT POINTS
        ========================================= */

        body::after {

            content: "";

            position: fixed;

            inset: 0;

            background:

                radial-gradient(
                    circle at 10% 10%,
                    #00eaff 0 2px,
                    transparent 3px
                ),

                radial-gradient(
                    circle at 88% 22%,
                    #ff0080 0 2px,
                    transparent 3px
                ),

                radial-gradient(
                    circle at 17% 78%,
                    #ff0080 0 2px,
                    transparent 3px
                ),

                radial-gradient(
                    circle at 82% 82%,
                    #00eaff 0 2px,
                    transparent 3px
                ),

                radial-gradient(
                    circle at 50% 95%,
                    #00eaff 0 2px,
                    transparent 3px
                );

            background-size: 190px 190px;

            opacity: 0.7;

            pointer-events: none;

            z-index: -1;
        }


        /* =========================================
           NAVBAR
        ========================================= */

        header {

            height: 58px;

            display: flex;

            align-items: center;

            justify-content: space-between;

            padding: 0 18px;

            background: rgba(5, 8, 18, 0.94);

            border-bottom:
                1px solid
                rgba(0, 220, 255, 0.25);

            box-shadow:
                0 0 20px
                rgba(0, 200, 255, 0.08);

            position: relative;

            z-index: 100;
        }


        /* =========================================
           LOGO
        ========================================= */

        .logo {

    font-family: 'Orbitron', sans-serif;
    font-size: 1.4em;
    font-weight: 900;
    color: #d11313;
    letter-spacing: 2px;
    text-shadow: var(--glow-cyan);
    animation: logoPulse 3s ease-in-out infinite;
    cursor: default;
    user-select: none;
}

@keyframes logoPulse {
    0%, 100% { text-shadow: 0 0 10px #d11313, 0 0 20px #d11313; }
    50%       { text-shadow: 0 0 20px #d11313, 0 0 40px #d11313, 0 0 60px #00eaff; }
}


        /* =========================================
           NAVIGATION
        ========================================= */

        nav {

            display: flex;

            align-items: center;

            gap: 36px;
        }


        nav a {

            color: #c7c7cf;

            text-decoration: none;

            font-size: 14px;

            font-weight: 600;

            transition: all 0.3s ease;
        }


        nav a:hover {

            color: #ffffff;

            text-shadow:
                0 0 8px #00eaff;
        }


        nav a.active {

            color: #ffffff;

            text-shadow:
                0 0 8px #00eaff;
        }


        /* =========================================
           CONTACT WRAPPER
        ========================================= */

        .contact-wrapper {

            min-height:
                calc(100vh - 58px);

            display: flex;

            justify-content: center;

            align-items: center;

            padding: 55px 20px;
        }


        /* =========================================
           MAIN CONTACT CARD
        ========================================= */

        .contact-card {

            width: 850px;

            max-width: 100%;

            padding: 45px 50px;

            background:

                linear-gradient(
                    145deg,
                    rgba(24, 18, 34, 0.97),
                    rgba(8, 13, 27, 0.97)
                );

            border:
                1px solid
                rgba(0, 220, 255, 0.55);

            border-radius: 22px;

            box-shadow:

                0 0 20px
                rgba(0, 220, 255, 0.10),

                0 0 45px
                rgba(0, 220, 255, 0.06),

                inset 0 0 30px
                rgba(0, 200, 255, 0.025);

            position: relative;

            overflow: hidden;
        }


        /* =========================================
           TOP GLOW LINE
        ========================================= */

        .contact-card::before {

            content: "";

            position: absolute;

            top: 0;

            left: 10%;

            width: 80%;

            height: 1px;

            background: #00eaff;

            box-shadow:

                0 0 10px #00eaff,

                0 0 25px #00eaff;

            opacity: 0.9;
        }


        /* =========================================
           TITLE
        ========================================= */

        .contact-title {

            text-align: center;

            margin-bottom: 10px;
        }


        .contact-title h1 {

            font-family: 'Orbitron', sans-serif;

            font-size: 32px;

            font-weight: 600;

            letter-spacing: 4px;

            color: #e7edf3;

            text-shadow:

                0 0 8px
                rgba(0, 220, 255, 0.35);
        }


        .contact-title h1 span {

            color: #ff0b73;

            text-shadow:

                0 0 8px
                rgba(255, 0, 115, 0.8),

                0 0 20px
                rgba(255, 0, 115, 0.3);
        }


        /* =========================================
           SUBTITLE
        ========================================= */

        .subtitle {

            text-align: center;

            color: #9c9ca8;

            font-family: 'Orbitron', sans-serif;

            font-size: 12px;

            letter-spacing: 2px;

            line-height: 1.8;

            margin-bottom: 35px;
        }


        /* =========================================
           COLLEGE INFORMATION GRID
        ========================================= */

        .contact-details {

            display: grid;

            grid-template-columns:
                repeat(2, 1fr);

            gap: 20px;

            margin-top: 10px;
        }


        /* =========================================
           INFORMATION CARD
        ========================================= */

        .contact-box {

            min-height: 120px;

            padding: 24px;

            background:
                rgba(8, 15, 29, 0.88);

            border:
                1px solid
                rgba(0, 200, 255, 0.22);

            border-radius: 14px;

            transition:
                all 0.3s ease;

            position: relative;
        }


        .contact-box:hover {

            transform:
                translateY(-4px);

            border-color:
                rgba(0, 230, 255, 0.75);

            box-shadow:

                0 0 15px
                rgba(0, 220, 255, 0.15);
        }


        .contact-box h3 {

            font-family: 'Orbitron', sans-serif;

            font-size: 13px;

            letter-spacing: 1.5px;

            color: #00eaff;

            margin-bottom: 12px;

            text-shadow:

                0 0 7px
                rgba(0, 234, 255, 0.4);
        }


        .contact-box p {

            color: #d2d2da;

            font-size: 14px;

            line-height: 1.7;
        }


        /* =========================================
           SECTION HEADINGS
        ========================================= */

        .section-heading {

            margin-top: 38px;

            margin-bottom: 18px;

            text-align: center;

            font-family: 'Orbitron', sans-serif;

            font-size: 15px;

            font-weight: 600;

            letter-spacing: 3px;

            color: #00eaff;

            text-shadow:

                0 0 8px
                rgba(0, 234, 255, 0.6),

                0 0 18px
                rgba(0, 234, 255, 0.25);
        }


        .student-heading {

            color: #ff1680;

            text-shadow:

                0 0 8px
                rgba(255, 22, 128, 0.7),

                0 0 18px
                rgba(255, 22, 128, 0.25);
        }


        /* =========================================
           COORDINATOR GRID
        ========================================= */

        .coordinator-grid {

            display: grid;

            grid-template-columns:
                repeat(2, 1fr);

            gap: 20px;
        }


        /* =========================================
           COORDINATOR CARD
        ========================================= */

        .coordinator {

            padding: 25px;

            background:

                linear-gradient(
                    145deg,
                    rgba(20, 12, 30, 0.92),
                    rgba(8, 14, 28, 0.92)
                );

            border-radius: 14px;

            transition:
                all 0.3s ease;

            position: relative;

            overflow: hidden;
        }


        /* =========================================
           STAFF COORDINATOR
        ========================================= */

        .coordinator.staff {

            border:
                1px solid
                rgba(0, 220, 255, 0.35);
        }


        .coordinator.staff::before {

            content: "";

            position: absolute;

            top: 0;

            left: 0;

            width: 3px;

            height: 100%;

            background: #00eaff;

            box-shadow:
                0 0 10px #00eaff;
        }


        .coordinator.staff:hover {

            transform:
                translateY(-5px);

            border-color:
                #00eaff;

            box-shadow:

                0 0 20px
                rgba(0, 220, 255, 0.18);
        }


        /* =========================================
           STUDENT COORDINATOR
        ========================================= */

        .coordinator.student {

            border:
                1px solid
                rgba(255, 0, 120, 0.30);
        }


        .coordinator.student::before {

            content: "";

            position: absolute;

            top: 0;

            left: 0;

            width: 3px;

            height: 100%;

            background: #ff1680;

            box-shadow:
                0 0 10px #ff1680;
        }


        .coordinator.student:hover {

            transform:
                translateY(-5px);

            border-color:
                #ff1680;

            box-shadow:

                0 0 20px
                rgba(255, 0, 120, 0.18);
        }


        /* =========================================
           COORDINATOR TITLE
        ========================================= */

        .coordinator h3 {

            font-family: 'Orbitron', sans-serif;

            font-size: 13px;

            letter-spacing: 1.5px;

            margin-bottom: 15px;
        }


        .coordinator.staff h3 {

            color: #00eaff;

            text-shadow:

                0 0 8px
                rgba(0, 234, 255, 0.5);
        }


        .coordinator.student h3 {

            color: #ff1680;

            text-shadow:

                0 0 8px
                rgba(255, 22, 128, 0.5);
        }


        /* =========================================
           COORDINATOR DETAILS
        ========================================= */

        .coordinator p {

            color: #d7d7df;

            font-size: 14px;

            line-height: 1.5;
        }


        .coordinator strong {

            color: #ffffff;

            font-weight: 600;
        }


        /* =========================================
           BOTTOM LINE
        ========================================= */

        .bottom-line {

            margin-top: 40px;

            height: 1px;

            background:

                linear-gradient(
                    90deg,
                    transparent,
                    rgba(0, 220, 255, 0.5),
                    transparent
                );
        }


        /* =========================================
           FOOTER TEXT
        ========================================= */

        .footer-text {

            text-align: center;

            margin-top: 20px;

            color: #70707c;

            font-size: 12px;

            letter-spacing: 1px;

            line-height: 1.6;
        }


        /* =========================================
           MOBILE RESPONSIVE
        ========================================= */

        @media (max-width: 700px) {

            header {

                height: auto;

                min-height: 58px;

                padding:
                    12px 14px;

                flex-direction: column;

                gap: 12px;
            }


            .logo {

                font-size: 19px;
            }


            nav {

                gap: 14px;

                flex-wrap: wrap;

                justify-content: center;
            }


            nav a {

                font-size: 11px;
            }


            .contact-wrapper {

                padding:
                    30px 14px;
            }


            .contact-card {

                padding:
                    35px 18px;

                border-radius: 18px;
            }


            .contact-title h1 {

                font-size: 24px;

                letter-spacing: 3px;
            }


            .subtitle {

                font-size: 9px;

                letter-spacing: 1.5px;
            }


            .contact-details {

                grid-template-columns:
                    1fr;
            }


            .coordinator-grid {

                grid-template-columns:
                    1fr;
            }


            .contact-box {

                min-height: auto;

                padding: 21px;
            }


            .coordinator {

                padding: 22px;
            }


            .section-heading {

                font-size: 13px;

                letter-spacing: 2px;
            }

        }


        /* =========================================
           VERY SMALL SCREENS
        ========================================= */

        @media (max-width: 400px) {

            nav {

                gap: 10px;
            }


            nav a {

                font-size: 10px;
            }


            .contact-title h1 {

                font-size: 21px;
            }


            .subtitle {

                font-size: 8px;
            }

        }

        .next-page-container {
    margin-top: 20px;
    text-align: center;
}

.next-btn {
    display: inline-block;
    background: linear-gradient(135deg, rgba(0,234,255,0.15), rgba(0,234,255,0.05));
    color: var(--cyan);
    padding: 14px 36px;
    text-decoration: none;
    border-radius: 50px;
    font-weight: 700;
    letter-spacing: 1px;
    border: 1px solid rgba(0,234,255,0.4);
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.next-btn::before {
    content: '';
    position: absolute;
    top: 0; left: -100%;
    width: 100%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(0,234,255,0.2), transparent);
    transition: left 0.5s ease;
}

.next-btn:hover::before { left: 100%; }
.next-btn:hover {
    background: linear-gradient(135deg, rgba(0,234,255,0.25), rgba(0,234,255,0.1));
    box-shadow: 0 0 30px rgba(0,234,255,0.3);
    transform: translateX(5px);
    border-color: var(--cyan);
}