/* This hides all pages by default */
.page-section {
    display: none;
    opacity: 0;
    transition: opacity 0.4s ease-in-out;
}

/* This shows the page when you click a button */
.page-section.active {
    display: block;
    opacity: 1;
}



/* Solid background for scrolled navigation */
.nav-scrolled {
    background-color: #F5F5DC !important; /* This is your brand cream color */
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1); /* Adds a subtle shadow */
    border-bottom: 1px solid rgba(210, 180, 140, 0.3); /* brand-sand color border */
}

/* The default state (Top of page) */
.nav-glass {
    background-color: transparent;
    transition: all 0.3s ease-in-out;
}

/* The scrolled state (Solid Background) */
.nav-scrolled {
    background-color: #F5F5DC !important; /* Your Brand Cream */
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    padding-top: 0.5rem !important;
    padding-bottom: 0.5rem !important;
    border-bottom: 1px solid rgba(210, 180, 140, 0.3);
}