<style>


/* --- Standard Modal Styles --- */
.modal-overlay {
    display: none; /* Hidden by default */
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0,0,0,0.7);
    align-items: center;
    justify-content: center;
}

.modal-overlay.show {
    display: flex; /* Becomes visible when the 'show' class is added */
}



/* --- Styles for Member Reservation/Pre-Payment Page --- */
.reservation-container {
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
    max-width: 1200px;
    margin: 2rem auto;
    padding: 1rem;
}
.selection-panel {
    flex: 1;
    min-width: 300px;
    background: #1a1a1a;
    padding: 25px;
    border-radius: 12px;
    border: 1px solid #333;
}
.cart-panel {
    flex: 1;
    min-width: 300px;
    background: #1a1a1a;
    padding: 25px;
    border-radius: 12px;
    border: 1px solid #333;
}
.selection-panel h3, .cart-panel h3 {
    color: #AF8EEA;
    margin-top: 0;
    margin-bottom: 25px;
    font-size: 1.5em;
    text-align: center;
}
.cart-items-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 20px;
}
.cart-items-table th, .cart-items-table td {
    padding: 12px 8px;
    text-align: left;
    border-bottom: 1px solid #333;
}
.cart-items-table th {
    color: #ccc;
}
.cart-item-remove-btn {
    background: #d9534f;
    color: white;
    border: none;
    border-radius: 50%;
    width: 22px;
    height: 22px;
    cursor: pointer;
    font-weight: bold;
    line-height: 22px;
    text-align: center;
}
.cart-total-row td {
    font-weight: bold;
    font-size: 1.2em;
    color: #AF8EEA;
    border-top: 2px solid #444;
}
.tip-input {
    width: 80px;
    padding: 8px;
    margin-left: 10px;
    text-align: right;
}

/* --- Add these styles for the Request Username page --- */
.form-container {
    max-width: 600px;
    margin: 2rem auto;
    padding: 2rem;
    background: #1a1a1a;
    border-radius: 8px;
    text-align: center;
}

.form-container .form-group {
    text-align: left;
    margin-bottom: 1.5rem;
}

.form-container .form-label {
    margin-bottom: 0.75rem;
}

.form-container small {
    display: block;
    margin-top: 5px;
    color: #ccc;
}

/* --- Styles for Application Form & Modals --- */
.application-container {
    max-width: 1000px;
    margin: 2rem auto;
    padding: 2rem;
    background: #1a1a1a;
    border-radius: 8px;
    box-shadow: 0 2px 20px rgba(128, 0, 128, 0.3);
    border: 1px solid #333;
}
.section-header {
    text-align: center;
    margin-bottom: 2rem;
}
.section-title {
    font-size: 2.5rem;
    font-weight: bold;
    color: #fff;
    margin-bottom: 0.5rem;
}
.section-desc {
    font-size: 1.2rem;
    color: #ccc;
}
.application-form {
    margin-top: 2rem;
}
.form-fieldset {
    border: 2px solid #444;
    border-radius: 8px;
    padding: 1.5rem;
    margin-bottom: 2rem;
    background: #2a2a2a;
}
.form-legend {
    font-size: 1.3rem;
    font-weight: bold;
    color: #fff;
    padding: 0 1rem;
    background: #8A2BE2; /* Updated Purple */
    border: 2px solid #8A2BE2; /* Updated Purple */
    border-radius: 4px;
}
.form-row {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 1rem;
}
.form-group {
    flex: 1;
    min-width: 200px;
}
.form-group.full-width {
    flex-basis: 100%;
}
.form-group.half-width {
    flex-basis: calc(50% - 0.5rem);
}
.form-group.third-width {
    flex-basis: calc(33.33% - 0.67rem);
}
.form-group.quarter-width {
    flex-basis: calc(25% - 0.75rem);
}
.form-label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 600;
    color: #fff;
}
.form-input,
.form-select {
    width: 100%;
    padding: 0.75rem;
    border: 1px solid #555;
    border-radius: 4px;
    font-size: 1rem;
    background: #333;
    color: #fff;
    transition: border-color 0.3s ease;
}
.form-input:focus,
.form-select:focus {
    outline: none;
    border-color: #8A2BE2; /* Updated Purple */
    box-shadow: 0 0 0 2px rgba(138, 43, 226, 0.25);
}
.form-input::placeholder {
    color: #aaa;
}
.radio-group {
    display: flex;
    gap: 1rem;
    align-items: center;
    margin-top: 0.5rem;
}
.radio-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.important-notice {
    background: #2a2a2a;
    border: 1px solid #555;
    border-radius: 6px;
    padding: 1.5rem;
    margin-bottom: 2rem;
    color: #fff;
}
.important-notice p {
    margin-bottom: 1rem;
    color: #ccc;
}
.important-notice p:last-child {
    margin-bottom: 0;
}
.important-notice a {
    color: #AF8EEA; /* Lighter Purple */
    text-decoration: none;
}
.important-notice a:hover {
    color: #c3a6f1;
    text-decoration: underline;
}
.warning-text {
    color: #ff6b6b;
    font-weight: 600;
}
.btn {
    display: inline-block;
    padding: 0.75rem 1.5rem;
    background: #8A2BE2; /* Updated Purple */
    color: white;
    text-decoration: none;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 1rem;
    transition: background-color 0.3s ease;
}
.btn:hover {
    background: #9955e6;
}
.btn-success {
    background: #28a745;
}
.btn-success:hover {
    background: #1e7e34;
}
.checkbox-group {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    margin-top: 1rem;
}
.submit-section {
    text-align: center;
    padding: 2rem 0;
    display: flex;
    flex-wrap: wrap; /* Allows buttons to wrap on small screens */
    justify-content: center;
    gap: 15px; /* Replaces the old inline margin */
}
.status-message {
    padding: 1rem;
    border-radius: 4px;
    margin-bottom: 1rem;
    display: none;
}
.status-message.error {
    background: #f8d7da;
    color: #721c24;
}
.status-message.submitting {
    background: #d1ecf1;
    color: #0c5460;
}
.hidden {
    display: none;
}



/* --- Add these new styles to the end of your stylesheet --- */



.event-image {
    text-align: center;
    margin: 20px 0;
}

.event-image img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}



/* Modal Styles */
.modal-overlay {
    display: none;
    position: fixed;
    z-index: 1001;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.7);
    justify-content: center;
    align-items: center;
    backdrop-filter: blur(5px);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.modal-overlay.show {
    opacity: 1;
    visibility: visible;
    display: flex;
}

.modal-content {
    background-color: #2a2a2a;
    margin: auto;
    padding: 30px;
    border: 1px solid #555;
    width: 90%;
    max-width: 400px;
    border-radius: 12px;
    box-shadow: 0 5px 30px rgba(0, 0, 0, 0.5);
    position: relative;
    color: #e0e0e0;
    transform: translateY(-20px);
    transition: transform 0.3s ease-out;
}

.modal-overlay.show .modal-content {
    transform: translateY(0);
}

.modal-content h2 {
    color: #8A2BE2;
    text-align: center;
    margin-bottom: 25px;
    font-size: 1.8em;
}

.modal-close-button {
    color: #aaa;
    position: absolute;
    top: 15px;
    right: 25px;
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
    transition: color 0.3s ease;
}

.modal-close-button:hover,
.modal-close-button:focus {
    color: #fff;
    text-decoration: none;
    cursor: pointer;
}

.modal-form-group {
    margin-bottom: 20px;
}

.modal-form-group label {
    display: block;
    margin-bottom: 8px;
    font-weight: bold;
    color: #ccc;
}

.modal-form-group input[type="text"],
.modal-form-group input[type="password"] {
    width: calc(100% - 20px);
    padding: 12px 10px;
    border: 1px solid #444;
    border-radius: 8px;
    background-color: #333;
    color: #e0e0e0;
    font-size: 1em;
    outline: none;
    transition: border-color 0.3s ease, background-color 0.3s ease;
}

.modal-form-group input[type="text"]:focus,
.modal-form-group input[type="password"]:focus {
    border-color: #8A2BE2;
    background-color: #3a3a3a;
}

.modal-submit-button {
    width: 100%;
    padding: 12px 20px;
    background-color: #8A2BE2;
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 1.1em;
    font-weight: bold;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.2s ease;
}

.modal-submit-button:hover {
    background-color: #9955e6;
    transform: translateY(-2px);
}

.modal-message {
    text-align: center;
    margin-top: 15px;
    padding: 10px;
    border-radius: 8px;
    font-weight: bold;
    display: none;
    font-size: 0.9em;
}

.modal-message.success {
    background-color: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
}

.modal-message.error {
    background-color: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
}

/* Forgot Password Link Style */
.forgot-password-link {
    display: block;
    text-align: center;
    margin-top: 15px;
    font-size: 0.9em;
    color: #8A2BE2; /* Matching theme color */
    text-decoration: none;
    transition: color 0.3s ease;
}

.forgot-password-link:hover {
    color: #9955e6;
    text-decoration: underline;
}



       /* Event Grid and Item Styles */
        .event-grid {
            margin-top: 30px;
            width: 100%;
        }

        .event-item {
            background-color: #1a1a1a;
            border-radius: 12px;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
            overflow: hidden;
            display: flex;
            flex-direction: column; /* Stacks items vertically on small screens by default */
            transition: transform 0.2s ease, box-shadow 0.2s ease;
            max-width: 1200px;
            margin: 0 auto 30px auto;
            padding-top: 0;
        }

        .event-item:hover {
            transform: translateY(-5px);
            box-shadow: 0 8px 20px rgba(0, 0, 0, 0.5);
        }

        .event-columns-container {
            display: flex;
            flex-wrap: wrap; /* Allows columns to wrap on smaller screens */
            padding: 20px;
            gap: 15px;
            align-items: flex-start;
        }

        .event-column {
            display: flex;
            flex-direction: column;
            padding: 10px;
            box-sizing: border-box;
        }

        .event-column.left {
            flex: 0 0 200px; /* Fixed width for larger screens */
            justify-content: flex-start;
            color: #E0E0E0;
            text-align: center; /* Content inside is centered */
        }
        .event-column.left .event-details-group strong {
            display: block;
            margin-bottom: 5px;
        }
        .event-column.left .event-details-group p {
            margin-bottom: 10px;
        }
        .event-column.left .event-costs p {
            margin: 5px 0;
        }
        .event-column.left .event-actions {
            margin-top: 15px;
            width: 100%;
        }
        .event-column.left .event-actions button {
            width: 100%;
            padding: 10px;
        }

        .event-column.middle {
            flex: 1; /* Takes available space */
            min-width: 200px; /* Minimum width for larger screens */
            display: flex;
            justify-content: center; /* Centers image horizontally */
            align-items: center; /* Centers image vertically */
        }
        .event-item-image {
            max-height: 350px;
            width: auto;
            max-width: 100%;
            height: auto;
            object-fit: contain;
            border-radius: 6px;
            border: 1px solid #AF8EEA;
            box-shadow: 0 2px 8px rgba(138, 43, 226, 0.1);
            display: block;
            margin: 0 auto;
        }

        .event-column.right {
            flex: 2; /* Takes more space than middle column */
            min-width: 250px; /* Minimum width for larger screens */
            text-align: left; /* Content is left-aligned by default */
            color: #E0E0E0;
        }
        .event-column.right h3 {
            color: #8A2BE2;
            text-align: left;
            margin-bottom: 10px;
            font-size: 1.4em;
        }
        .event-description {
            font-size: 1em;
            color: #E0E0E0;
            line-height: 1.6;
            margin-top: 0;
        }
        .event-date-display {
            font-weight: bold;
            font-size: 1.4em;
            color: #8A2BE2;
        }

        .separator-line {
            border-top: 1px solid #444;
            margin: 10px 0;
            width: 80%;
            align-self: center;
        }

        /* General button styling for event actions */
        .event-actions button {
            padding: 10px 20px;
            border-radius: 8px;
            cursor: pointer;
            font-weight: bold;
            transition: background-color 0.3s ease, transform 0.2s ease;
            margin: 5px;
        }

        .event-actions button.primary {
            background-color: #8A2BE2;
            color: white;
            border: none;
        }
        .event-actions button.primary:hover {
            background-color: #AF8EEA;
            transform: translateY(-2px);
        }

        .event-actions button.secondary {
            background-color: #555;
            color: white;
            border: none;
        }
        .event-actions button.secondary:hover {
            background-color: #777;
            transform: translateY(-2px);
        }

/* Status messages */
.message {
    padding: 12px;
    margin-bottom: 25px;
    border-radius: 8px;
    text-align: center;
    font-weight: bold;
}
.message.success {
    background-color: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
}
.message.error {
    background-color: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
}
.message.info {
    background-color: #d1ecf1;
    color: #0c5460;
    border: 1px solid #bee5eb;
}

/* Profile Section Styles (from member_profile.php) */
.profile-section-header {
    text-align: center;
    margin-bottom: 30px;
    color: #e0e0e0;
}

.profile-section-header h1 {
    font-size: 2.5em;
    color: #8A2BE2;
    margin-bottom: 10px;
}

.profile-section-header p {
    font-size: 1.1em;
    margin-bottom: 5px; /* Adjust margin for multiple paragraphs */
}
.profile-section-header .sub-text {
    font-size: 0.9em; /* Smaller text for the new description */
    color: #a0a0a0; /* Slightly lighter color */
}

.card {
    background-color: #1a1a1a;
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
    padding: 30px;
    margin-bottom: 30px; /* Spacing between cards */
    width: 100%;
    max-width: 700px; /* Max width for cards */
    box-sizing: border-box;
    color: #e0e0e0; /* Text color inside cards */
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.card h2 {
    color: #AF8EEA;
    font-size: 1.8em;
    margin-bottom: 20px;
}

.member-photo-profile {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    object-fit: cover;
    margin: 0 auto 20px auto;
    display: block;
    border: 4px solid #8A2BE2;
    box-shadow: 0 0 15px rgba(138, 43, 226, 0.4);
}

.card p {
    margin-bottom: 10px;
    line-height: 1.6;
}
.card p strong {
    color: #ccc;
}

.attended-events-list {
    list-style: none;
    padding: 0;
    width: 100%;
    margin-top: 20px;
}

.attended-events-list li {
    background-color: #2a2a2a;
    padding: 15px;
    border-radius: 8px;
    margin-bottom: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
}

.attended-events-list li strong {
    color: #AF8EEA;
    font-size: 1.1em;
    flex-basis: 100%;
    text-align: center;
    margin-bottom: 5px;
}

.attended-events-list li span {
    color: #ccc;
    font-size: 0.95em;
    flex-basis: 100%;
    text-align: center;
}

/* Media Queries for Responsiveness */
@media (max-width: 992px) {
    /* Adjustments for tablet/small desktop screens */
    .membership-grid {
        grid-template-columns: 1fr; /* Stack membership columns */
        gap: 30px;
    }

    .header-container {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }

    .header-logo {
        margin-bottom: 0;
    }

    nav {
        display: none; /* Hide navigation by default */
        flex-direction: column;
        position: absolute;
        top: 75px;
        left: 0;
        width: 100%;
        background-color: #121212;
        box-shadow: 0 8px 16px rgba(0, 0, 0, 0.4);
        padding: 10px 0;
        z-index: 999;
        text-align: center;
    }

    nav.active {
        display: flex; /* Show navigation when active */
    }

    nav ul {
        flex-direction: column;
        width: 100%;
    }

    nav ul li {
        margin: 0;
        width: 100%;
    }

    nav ul li a {
        display: block;
        padding: 12px 20px;
        width: 100%;
    }

    nav ul li a:hover {
        background-color: rgba(255, 255, 255, 0.1);
    }

    .menu-toggle {
        display: block; /* Show hamburger menu toggle */
        order: 3;
    }

    .header-action-button {
        margin-left: 0;
        margin-right: 10px;
        order: 2;
        gap: 5px;
    }

    .header-logo {
        order: 1;
    }

    .modal-content {
        width: 95%;
        padding: 20px;
    }

    .content-wrapper {
        padding: 30px 20px;
    }

    /* Adjust expect columns to take half width for two columns on tablets */
    .expect-column {
        flex: 1 1 calc(50% - 15px); /* Two columns on screens up to 992px */
    }
    
    /* Event item column adjustments for tablet/mid-size screens */
            .event-columns-container {
                flex-direction: column; /* Stack columns within each event card */
                align-items: center; /* Center items when stacked */
            }

            .event-column.left,
            .event-column.middle,
            .event-column.right {
                flex: 1 1 100%; /* Make each column take full width */
                max-width: 500px; /* Optional: cap max width for readability on larger tablets */
                width: 100%; /* Ensure width is applied */
            }

            .event-column.left, .event-column.right {
                text-align: center; /* Center text content in these columns */
            }

            .event-column.right h3 {
                text-align: center; /* Center event title in right column */
            }
}

@media (max-width: 768px) {
    /* Adjustments for larger mobile screens (e.g., landscape phones, small tablets) */
    .main-header {
        padding: 5px 0;
    }

    .header-container {
        padding: 0 15px;
    }

    .header-logo img {
        height: 30px;
    }

    .main-content {
        padding: 20px 15px;
    }

    .page-title {
        font-size: 2em;
    }

    .content-wrapper {
        padding: 25px 15px;
    }

    /* Center text within content wrapper on small screens */
    .content-wrapper h1,
    .content-wrapper p {
        text-align: center;
    }

    .help-links {
        max-width: 100%; /* Adjust for smaller screens */
    }

    .help-links li a {
        text-align: center; /* Ensure centered for smaller buttons */
    }

    /* Make expect columns stack vertically on smaller screens (phones) */
    .expect-column {
        flex: 1 1 100%; /* Take full width for single column layout */
        max-width: 450px; /* Optional: cap max width for very wide phones */
    }

    /* Stack hero content and image vertically */
    .hero-content-wrapper {
        flex-direction: column;
        gap: 30px;
        text-align: center; /* Center text when stacked */
    }

    .hero-content,
    .hero-image {
        max-width: 100%; /* Allow them to take full width */
    }

    /* Center text within hero section when stacked */
    .hero-title,
    .hero-subtitle,
    .hero-text {
        text-align: center;
    }

    /* Center section header on small screens */
    .expect-section-header,
    .expect-section-title,
    .expect-section-desc {
        text-align: center;
    }

    /* Center text within columns on small screens */
    .expect-column h2,
    .expect-column p {
        text-align: center;
    }

    /* Keep list items left-aligned but center the list container */
    .not-permitted-list {
        text-align: left;
        margin: 0 auto;
        max-width: 300px; /* Adjust as needed */
    }

    .expect-column.image-col {
        align-items: center; /* Ensure image column content is centered */
    }

    /* Ensure all event card columns take full width and are centered */
            .event-column.left,
            .event-column.middle,
            .event-column.right {
                flex: 1 1 100%;
                max-width: 100%; /* Ensure they don't grow too wide */
                text-align: center; /* Center all text content */
            }

            .event-column.right h3 {
                text-align: center; /* Explicitly center event title */
            }

            /* Ensure image is centered */
            .event-item-image {
                margin: 0 auto;
            }

            .event-column.left .event-actions button {
                width: auto; /* Allow buttons to size naturally */
                display: inline-block; /* Make them inline to allow multiple on one line if space permits */
                margin: 5px auto; /* Center individual buttons */
            }


    .form-group.half-width,
    .form-group.third-width,
    .form-group.quarter-width {
        flex-basis: 100%;
    }
    .radio-group {
        flex-direction: column;
        align-items: flex-start;
    }
}

}

@media (max-width: 480px) {
    /* Adjustments for smaller mobile screens (e.g., portrait phones) */
    .header-logo img {
        height: 25px;
    }
    .menu-toggle {
        font-size: 1.8em;
    }
    .header-action-button .button {
        padding: 6px 15px;
        font-size: 0.9em;
    }
    .modal-content h2 {
        font-size: 1.5em;
    }
    .modal-close-button {
        font-size: 24px;
        top: 10px;
        right: 15px;
    }
    .page-title {
        font-size: 1.8em;
    }

    .hero-title {
        font-size: 2.5em; /* Adjust hero title size */
    }

    .hero-subtitle {
        font-size: 1em; /* Adjust hero subtitle size */
    }

    .expect-section-title {
        font-size: 2.5em; /* Adjust section title size */
    }

    .expect-section-desc {
        font-size: 1em; /* Adjust section description size */
    }

    /* Event item column specific adjustments for very small phones */
            .event-item {
                padding: 10px; /* Reduce padding for smaller screens */
            }
            .event-columns-container {
                padding: 10px; /* Reduce padding within the container */
                gap: 10px; /* Reduce gap */
            }

/* --- Hide number input arrows for Tip field (Improved) --- */
/* Target the specific class for the tip input to hide arrows in Firefox */
.tip-input {
  -moz-appearance: textfield;
}

/* Target WebKit browsers (Chrome, Safari) and explicitly include the :hover state */
.tip-input::-webkit-outer-spin-button,
.tip-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Responsive Banner for Events Page */
.page-banner-image {
    max-width: 100%;
    height: auto;
    border-radius: 8px; /* Matches the style of other images */
    display: block;
    margin: 0 auto; /* Ensures it stays centered */
}
.btn-success:hover {
    background: #1e7e34;
}

/* ADD THIS NEW BLOCK */
.btn-secondary {
    background: #6c757d; /* Matches 'social' button */
}
.btn-secondary:hover {
    background: #5a6268; /* Matches 'social' button hover */
}

 /* Styles specific to the index.php splash page.
       These ensure the background image fills the space between header and footer
       and centers the logo.
    */

    .index-splash-container {
        /* Flex layout to center content */
        display: flex;
        justify-content: center;
        align-items: center;
        
        /* Make this container grow to fill available space in your flex-col body */
        flex-grow: 1;
        width: 100%;
        min-height: 60vh; /* Ensures it has height even if content is small */
        
        /* Background Image Settings */
        background-image: url('columbus_skyline.jpg');
        background-size: cover;   /* Cover the entire area */
        background-position: center center; /* Center the image */
        background-repeat: no-repeat;
        
        /* Optional: Dark overlay tint to make the logo pop and match the dark theme */
        position: relative;
        box-shadow: inset 0 0 50px rgba(0,0,0,0.5);
    }

    .logo-wrapper {
        padding: 20px;
        text-align: center;
        width: 100%;
        max-width: 800px; /* Prevents logo layout from getting too wide on huge screens */
    }

    .splash-logo {
        width: 100%;
        height: auto;
        max-width: 600px; /* Adjust this value to control the maximum size of the logo */
        
        /* Optional: Adds a subtle glow using your theme's purple color to help it stand out against the skyline */
        filter: drop-shadow(0 0 15px rgba(138, 43, 226, 0.4)); 
        transition: transform 0.3s ease;
    }

    /* Subtle hover effect for the logo */
    .splash-logo:hover {
        transform: scale(1.02);
    }

    /* Mobile responsiveness */
    @media (max-width: 768px) {
        .splash-logo {
            max-width: 80%;
        }
    }

</style>