/* Preloader Styles */
    .preloader {
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        background: #fefcf8;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        z-index: 10000;
        /* Above header */
        transition: opacity 0.5s ease, visibility 0.5s ease;
    }

    .preloader.hidden {
        opacity: 0;
        visibility: hidden;
    }

    .preloader-book {
        width: 60px;
        height: 60px;
        position: relative;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .preloader-book::before,
    .preloader-book::after {
        content: '';
        position: absolute;
        width: 30px;
        height: 50px;
        background: #fffefa;
        border: 2px solid #c9a86c;
        border-radius: 4px;
        box-shadow: 0 4px 8px rgba(192, 163, 104, 0.2);
    }

    .preloader-book::before {
        transform: rotate(0deg);
        animation: book-flip-left 1.5s infinite ease-in-out;
    }

    .preloader-book::after {
        transform: rotate(0deg);
        animation: book-flip-right 1.5s infinite ease-in-out 0.75s;
    }

    .preloader-text {
        font-size: 1.2rem;
        color: #736648;
        font-weight: 600;
        margin-top: 16px;
        opacity: 0.85;
        animation: pulse 2s infinite ease-in-out;
    }

    @keyframes book-flip-left {

        0%,
        100% {
            transform: rotate(0deg);
        }

        50% {
            transform: rotate(-15deg);
        }
    }

    @keyframes book-flip-right {

        0%,
        100% {
            transform: rotate(0deg);
        }

        50% {
            transform: rotate(15deg);
        }
    }

    @keyframes pulse {

        0%,
        100% {
            opacity: 0.85;
        }

        50% {
            opacity: 0.5;
        }
    }

    /* Hide main content (excluding header) during preloading */
    body.preloading main {
        visibility: hidden;
        opacity: 0;
    }

    body.loaded main {
        visibility: visible;
        opacity: 1;
        transition: opacity 0.5s ease;
    }

    /* Ensure header remains visible and sticky */
    #sb-navigation {
        position: fixed;
        top: 0;
        width: 100%;
        z-index: 1000;
    }

    /* Adjust body padding to match header height */
    body {
        padding-top: 80px;
        /* Adjusted to match header height */
    }