/* === Shoe'N Core Unified Script base.html === */
    /* === Global Page Fade & Prepaint Optimizations === */
    html {
    background: #000 !important;
    }

    /* 🚀 Linearized Body - no fade or opacity animation */
    body {
    opacity: 1 !important;              /* always visible */
    visibility: visible !important;
    will-change: auto;
    transition: none !important;        /* no fade at all */
    background-color: #000 !important;
    color: #fff;
    min-height: 100vh;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    }

    /* Remove any old fade states completely */
    body.fade-in,
    body.fade-out {
    opacity: 1 !important;
    transition: none !important;
    }

    .container {
        flex-grow: 1;
    }

    
    .container, .container-fluid {
        background-color: transparent; /* Ensures the gradient shows through */
    }
    
    h1, h2, h3, h4, h5, h6, p, a {
        color: #ffffff; /* Ensures all text is readable */
    }
    
    .btn-primary {
        background-color: #007bff; /* Primary blue color */
        border: none; /* Remove border */
        color: #ffffff; /* White text for buttons */
    }
    
    .btn-primary:hover {
        background-color: #0056b3; /* Darker blue on hover */
    }
    
    .btn:hover {
        background-color: #4B0082;
        border-color: #4B0082;
        color: #ffffff; /* Ensure text stays white on hover */
    }
    
    .navbar {
        background-color: #000000 !important; /* Pure black navbar */
        border-bottom: 1px solid rgba(255,255,255,0.08); /* subtle dark-line separation */
    }

    .btn-close {
        color: white; /* Ensure it's visible against dark background */
        position: absolute;
        top: 10px;
        right: 10px;
    }

    .brand-rectangle {
        display: inline-flex; /* Use flexbox to center content */
        justify-content: center; /* Center horizontally */
        align-items: center; /* Center vertically */
        width: auto; /* Automatically adjust width based on content */
        height: 40px; /* Set a fixed height for the rectangle */
        padding: 0 15px; /* Add padding for left and right */
        border-radius: 10px; /* Slightly rounded corners */
        background: linear-gradient(90deg, #000000, #800020); /* Black to burgundy gradient */
        color: #ffffff; /* White text */
        text-align: center; /* Center text horizontally */
        text-decoration: none; /* Remove underline from link */
        font-weight: bold; /* Bold text */
        box-sizing: border-box; /* Ensures padding doesn't affect width/height */
        overflow: hidden; /* Ensures text stays within the button */
        transition: background-color 0.3s, color 0.3s; /* Smooth transition */
    }
    
    .brand-rectangle:hover {
        background: linear-gradient(90deg, #800020, #000000); /* Reverse the gradient on hover */
        color: #ffffff; /* Keep the text white on hover */
        cursor: pointer; /* Change cursor to pointer on hover */
    }
    
    .brand-rectangle a {
        display: block; /* Ensure the link takes up the full button area */
        text-decoration: none; /* Remove underline from the text */
        color: inherit; /* Inherit text color */
        white-space: nowrap; /* Prevent text from wrapping to a new line */
        word-break: normal; /* Ensure text doesn't break awkwardly */
        font-size: 0.85rem; /* Adjust font size to fit more text */
        line-height: 1.2; /* Adjust line-height to provide spacing */
    } 

        footer.site-footer {
        font-size: 0.8rem;    /* or whatever size you prefer */
    }