:root {
    --accent-yellow: #D48C1C;
    --blue-1: #0B1120;
    --blue-2: #131B2E;
    --blue-3: #1A253D;

    --fs-h1: clamp(1.6rem, 5vw, 2.5rem);
    --fs-h2: clamp(1.1rem, 2.5vw, 1.5rem);
    --fs-body: clamp(0.8rem, 1.1vw, 1rem);

    --bg-nav: #060b1a;
    --fs-nav: clamp(0.9rem, 1vw, 1rem);
    --accent-yellow: #D48C1C;
}

h1,
h2,
h3,
.fredoka,
.navbar-brand,
.btn-custom {
    font-family: 'Fredoka One', cursive;
}

body {
    display: grid;
    grid-template-rows: auto 1fr auto;
    margin: 0;
    padding: 0;
    font-family: 'Poppins', sans-serif;
    background-color: var(--blue-1);
    color: white;
    min-height: 100vh;
    background: linear-gradient(145deg, var(--blue-1) 0%, var(--blue-2) 45%, var(--blue-3) 100%);
    background-attachment: fixed;
    overflow-x: hidden;
}

/* --- Navbar --- */
.navbar {
    background-color: var(--bg-nav) !important;
    padding: 1rem 0;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4);
}

.navbar-brand {
    font-size: 1.6rem;
    color: white !important;
    text-decoration: none;
}

.navbar-brand span {
    color: var(--accent-yellow);
}

.nav-link {
    color: white !important;
    font-size: var(--fs-nav);
    margin: 0 12px;
    transition: all 0.3s ease;
    border-bottom: 3px solid transparent;
    display: flex;
    align-items: center;
    gap: 10px;
}

.nav-link:hover {
    border-bottom: 3px solid var(--accent-yellow);
    letter-spacing: 2px;
}

.nav-link.active {
    border-bottom: 3px solid var(--accent-yellow);
}


/* --- Footer Styling --- */
.footer-section {
    background-color: var(--bg-nav);
    /* Uses your solid dark blue */
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    color: white;
    font-family: 'Poppins', sans-serif;
    font-size: 0.9rem;
}

.copyright-text span {
    color: var(--accent-yellow);
    font-family: 'Fredoka One', cursive;
}

/* Center Link: Underlined */
.back-to-top {
    color: white;
    text-decoration: underline;
    text-underline-offset: 5px;
    transition: color 0.3s ease;
}

.back-to-top:hover {
    color: var(--accent-yellow);
}

/* Right Links & Pipe Separators */
.footer-links {
    color: rgba(255, 255, 255, 0.6);
}

.footer-link {
    color: white;
    text-decoration: none;
    transition: color 0.3s ease;
}

.footer-link:hover {
    color: var(--accent-yellow);
}

/* Highlighting the active link */
.footer-link.active {
    color: var(--accent-yellow);
    font-weight: 600;
}

/* Mobile Adjustments */
@media (max-width: 767px) {
    .footer-section {
        padding-top: 20px;
        padding-bottom: 20px;
    }
}