*{
        margin:0;
        padding:0;
        box-sizing:border-box;
    }

    html{
        scroll-behavior:smooth;
    }

    body{

        font-family:'Poppins', sans-serif;
        
        /*
        background:
            linear-gradient(
                135deg,
                #0f172a,
                #1e293b,
                #111827
            );
        */

        min-height:100vh;

        overflow-x:hidden;

        overflow-y:auto;
    }

    /*
    ==========================
    PAGE HEADER
    ==========================
    */

    .page-header{

        width:100%;

        padding:40px 20px;

        background:
            linear-gradient(
                135deg,
                rgba(15,118,110,0.95),
                rgba(2,132,199,0.95)
            );

        color:white;

        text-align:center;

        box-shadow:
            0 4px 20px rgba(0,0,0,0.15);

        position:relative;

        z-index:1;
    }

    .page-header h1{

        font-size:42px;

        font-weight:700;

        margin-bottom:12px;

        line-height:1.4;
    }

    .page-header p{

        font-size:20px;

        opacity:0.95;

        margin:0;
    }

    /*
    ==========================
    BOOK WRAPPER
    ==========================
    */

    .book-wrapper{

        width:100%;

        min-height:calc(100vh - 160px);

        display:flex;

        flex-direction:column;

        align-items:center;

        padding:25px 20px 120px;
    }

    /*
    ==========================
    STICKY TOOLBAR
    ==========================
    */

    .book-toolbar{

        position:sticky;

        top:20px;

        margin:0 auto 25px;

        width:fit-content;

        display:flex;

        align-items:center;

        justify-content:center;

        gap:14px;

        z-index:99999;

        padding:12px 18px;

        border-radius:16px;

        background:
            rgba(15,23,42,0.78);

        backdrop-filter:blur(14px);

        -webkit-backdrop-filter:blur(14px);

        box-shadow:
            0 10px 30px rgba(0,0,0,0.28);
    }

    /*
    ==========================
    TOOLBAR BUTTONS
    ==========================
    */

    .toolbar-btn{

        width:52px;

        height:52px;

        border:none;

        border-radius:14px;

        background:
            rgba(255,255,255,0.92);

        color:#0f172a;

        font-size:22px;

        display:flex;

        align-items:center;

        justify-content:center;

        cursor:pointer;

        transition:
            transform 0.25s,
            background 0.25s,
            color 0.25s,
            opacity 0.25s;

        box-shadow:
            0 6px 18px rgba(0,0,0,0.18);
    }

    .toolbar-btn:hover{

        background:white;

        transform:translateY(-2px);
    }

    .toolbar-btn:disabled{

        opacity:0.45;

        cursor:not-allowed;

        transform:none;
    }

    /*
    ==========================
    ACTIVE BUTTON
    ==========================
    */

    .toolbar-btn.active{

        background:#0284c7;

        color:white;
    }

    /*
    ==========================
    BOOK
    ==========================
    */

    .book{

        position:relative;

        width:95%;

        max-width:1200px;

        height:900px;

        margin-top:10px;

        perspective:4000px;

        display:flex;

        justify-content:center;

        align-items:center;
    }

    .book::before{

        content:"";

        position:absolute;

        width:4px;

        height:100%;

        background:rgba(0,0,0,0.15);

        left:50%;

        top:0;

        transform:translateX(-50%);

        z-index:999;

        border-radius:10px;
    }

    /*
    ==========================
    PAGE
    ==========================
    */

    .page{

        position:absolute;

        width:50%;

        height:100%;

        top:0;

        right:0;

        transform-style:preserve-3d;

        transform-origin:left center;

        transition:
            transform 1s ease-in-out,
            z-index 0.5s;

        cursor:pointer;
    }

    .page.flipped{

        transform:
            rotateY(-180deg)
            translateX(-2px);
    }

    /*
    ==========================
    PAGE SIDES
    ==========================
    */

    .page-side{

        position:absolute;

        width:100%;

        height:100%;

        top:0;

        left:0;

        background:white;

        overflow-y:auto;

        backface-visibility:hidden;

        -webkit-backface-visibility:hidden;

        padding:40px;

        border-radius:10px;

        box-shadow:
            inset 0 0 20px rgba(0,0,0,0.08),
            0 10px 30px rgba(0,0,0,0.25);
    }

    .page-front{

        z-index:2;
    }

    .page-back{

        transform:rotateY(180deg);
    }

    /*
    ==========================
    COVER PAGE
    ==========================
    */

    .cover{

        background:
            linear-gradient(
                135deg,
                #0f766e,
                #0284c7
            );

        color:white;

        display:flex;

        flex-direction:column;

        justify-content:center;

        align-items:center;

        text-align:center;
    }

    .cover h1{

        font-size:44px;

        line-height:1.4;

        margin-bottom:25px;
    }

    .cover p{

        font-size:22px;

        line-height:1.8;

        max-width:700px;
    }

    /*
    ==========================
    CONTENT
    ==========================
    */

    .content h2{

        font-size:28px;

        margin-bottom:20px;

        color:#0f172a;

        border-left:6px solid #0284c7;

        padding-left:14px;
    }

    .content h3{

        margin-top:24px;

        margin-bottom:14px;

        color:#0f766e;
    }

    .content p{

        line-height:1.9;

        margin-bottom:18px;

        text-align:justify;

        color:#334155;
    }

    .content ul{

        margin-left:24px;

        margin-bottom:22px;
    }

    .content ul li{

        margin-bottom:10px;

        line-height:1.8;

        color:#334155;
    }

    /*
    ==========================
    PAGE NUMBER
    ==========================
    */

    .page-number{

        position:absolute;

        bottom:12px;

        right:20px;

        color:#64748b;

        font-size:14px;
    }

    /*
    ==========================
    TABLES
    ==========================
    */

    table{

        width:100%;

        border-collapse:collapse;

        margin-top:15px;
    }

    table th{

        background:#0f766e;

        color:white;

        padding:12px;

        text-align:left;
    }

    table td{

        border:1px solid #cbd5e1;

        padding:12px;
    }

    /*
    ==========================
    SCROLLBAR
    ==========================
    */

    ::-webkit-scrollbar{

        width:8px;
    }

    ::-webkit-scrollbar-thumb{

        background:#94a3b8;

        border-radius:10px;
    }

    ::-webkit-scrollbar-track{

        background:#e2e8f0;
    }

    /*
    ==========================
    FOOTER
    ==========================
    */

    footer{

        position:relative;

        z-index:9999;
    }

    /*
    ==========================
    TABLET
    ==========================
    */

    @media(max-width:900px){

        .page-side{

            padding:24px;
        }

        .cover h1{

            font-size:30px;
        }

        .cover p{

            font-size:18px;
        }

        .content h2{

            font-size:22px;
        }

        .content p,
        .content ul li{

            font-size:15px;
        }

        .page-header h1{

            font-size:32px;
        }

        .page-header p{

            font-size:18px;
        }
    }

    /*
    ==========================
    MOBILE SINGLE PAGE MODE
    ==========================
    */
    
    @media(max-width:768px){
    
        .book{
    
            perspective:none;
    
            height:85vh;
    
            overflow:hidden;
        }
    
        .book::before{
    
            display:none;
        }
    
        /*
        EACH PAGE CONTAINER
        */
    
        .page{
    
            position:absolute;
    
            width:100%;
    
            height:100%;
    
            left:0;
    
            top:0;
    
            right:auto;
    
            transform:none !important;
    
            opacity:0;
    
            pointer-events:none;
    
            transition:
                opacity 0.35s ease,
                transform 0.35s ease;
        }
    
        /*
        ACTIVE MOBILE PAGE
        */
    
        .page.active{
    
            opacity:1;
    
            pointer-events:auto;
    
            z-index:9999;
        }
    
        /*
        REMOVE DESKTOP FLIP EFFECT
        */
    
        .page.flipped{
    
            transform:none !important;
        }
    
        /*
        SHOW BOTH PAGE SIDES
        */
    
        .page-front,
        .page-back{
    
            position:absolute;
    
            width:100%;
    
            height:100%;
    
            left:0;
    
            top:0;
    
            transform:none !important;
    
            backface-visibility:visible;
    
            -webkit-backface-visibility:visible;
        }
    
        /*
        ONLY SHOW ACTIVE SIDE
        */
    
        .page .page-side{
    
            display:none;
        }
    
        /*
        ODD PAGE:
        SHOW FRONT
        */
    
        .page.active.mobile-front .page-front{
    
            display:block;
        }
    
        /*
        EVEN PAGE:
        SHOW BACK
        */
    
        .page.active.mobile-back .page-back{
    
            display:block;
        }
    
        /*
        PAGE DESIGN
        */
    
        .page-side{
    
            width:100%;
    
            height:100%;
    
            border-radius:10px;
    
            padding:20px;
    
            overflow-y:auto;
        }
    
        /*
        MOBILE TOOLBAR
        */
    
        .book-toolbar{
    
            width:95%;
    
            flex-wrap:wrap;
    
            justify-content:center;
    
            gap:8px;
        }
    
        /*
        FULLSCREEN MOBILE
        */
    
        .book.fullscreen-book{
    
            padding-top:90px;
        }
    
        .book.fullscreen-book .page{
    
            height:calc(100vh - 110px);
        }
    
        /*
        MOBILE TYPOGRAPHY
        */
    
        .content h2{
    
            font-size:20px;
        }
    
        .content h3{
    
            font-size:17px;
        }
    
        .content p,
        .content ul li{
    
            font-size:14px;
    
            line-height:1.7;
        }
    
        table th,
        table td{
    
            padding:8px;
    
            font-size:13px;
        }
    }
    
    
    /*
    ==========================
    MOBILE COVER PAGE
    PERFECT CENTER ALIGN
    ==========================
    */
    
    @media(max-width:768px){
    
        /*
        ACTIVE MOBILE PAGE
        */
    
        .page.active{
    
            display:flex;
    
            align-items:center;
    
            justify-content:center;
        }
    
        /*
        COVER PAGE SIDE
        */
    
        .page.active .page-side.cover{
    
            display:flex !important;
    
            flex-direction:column;
    
            align-items:center;
    
            justify-content:center;
    
            text-align:center;
    
            position:absolute;
    
            inset:0;
    
            width:100%;
    
            height:100%;
    
            min-height:100%;
    
            overflow:hidden;
    
            padding:24px;
        }
    
        /*
        COVER TITLE
        */
    
        .cover h1{
    
            font-size:28px;
    
            line-height:1.5;
    
            margin-bottom:20px;
        }
    
        /*
        COVER TEXT
        */
    
        .cover p{
    
            font-size:16px;
    
            line-height:1.9;
    
            margin:0;
        }
    }
    
    /*
    ==========================
    MOBILE PAGE FIX
    ==========================
    */
    
    @media(max-width:768px){
    
        .page{
    
            transition:
                opacity 0.35s ease;
        }
    
        .page.active{
    
            opacity:1 !important;
    
            z-index:9999 !important;
    
            pointer-events:auto !important;
        }
    }
    
/*
==========================
FULLSCREEN TOOLBAR
==========================
*/

.fullscreen-toolbar{

    position:fixed !important;

    top:20px;

    left:50%;

    transform:translateX(-50%);

    z-index:999999;

    margin:0;

    display:flex;

    align-items:center;

    justify-content:center;

    gap:14px;

    padding:12px 18px;

    border-radius:16px;

    background:
        rgba(15,23,42,0.88);

    backdrop-filter:blur(16px);

    -webkit-backdrop-filter:blur(16px);

    box-shadow:
        0 10px 35px rgba(0,0,0,0.35);
}

/*
==========================
FULLSCREEN TOOLBAR BUTTONS
==========================
*/

.fullscreen-toolbar .toolbar-btn{

    width:54px;

    height:54px;

    border:none;

    border-radius:14px;

    background:
        rgba(255,255,255,0.95);

    color:#0f172a;

    font-size:22px;

    display:flex;

    align-items:center;

    justify-content:center;

    cursor:pointer;

    transition:
        transform 0.25s,
        background 0.25s,
        color 0.25s,
        opacity 0.25s;

    box-shadow:
        0 6px 18px rgba(0,0,0,0.22);
}

.fullscreen-toolbar .toolbar-btn:hover{

    background:white;

    transform:translateY(-2px);
}

.fullscreen-toolbar .toolbar-btn:disabled{

    opacity:0.45;

    cursor:not-allowed;

    transform:none;
}

/*
==========================
ACTIVE BUTTON
==========================
*/

.fullscreen-toolbar .toolbar-btn.active{

    background:#0284c7;

    color:white;
}

/*
==========================
FULLSCREEN BOOK MODE
==========================
*/

.book.fullscreen-book{

    position:relative;

    width:100vw;

    height:100vh;

    max-width:none;

    margin:0;

    padding-top:100px;

    padding-left:20px;

    padding-right:20px;

    padding-bottom:20px;

    background:
        linear-gradient(
            135deg,
            #0f172a,
            #111827,
            #1e293b
        );

    overflow:auto;

    display:flex;

    justify-content:center;

    align-items:flex-start;

    perspective:5000px;
}

/*
==========================
FULLSCREEN CENTER LINE
==========================
*/

.book.fullscreen-book::before{

    content:"";

    position:absolute;

    width:4px;

    height:calc(100vh - 120px);

    left:50%;

    top:100px;

    transform:translateX(-50%);

    background:
        rgba(255,255,255,0.08);

    border-radius:10px;

    z-index:999;
}

/*
==========================
FULLSCREEN PAGE
==========================
*/

.book.fullscreen-book .page{

    width:50%;

    height:calc(100vh - 120px);

    top:100px;

    right:0;

    transform-style:preserve-3d;

    transform-origin:left center;
}

/*
==========================
FULLSCREEN PAGE SIDES
==========================
*/

.book.fullscreen-book .page-side{

    border-radius:12px;

    overflow-y:auto;

    background:white;

    box-shadow:
        0 10px 40px rgba(0,0,0,0.35);

    padding:45px;
}

/*
==========================
FULLSCREEN COVER
==========================
*/

.book.fullscreen-book .cover{

    background:
        linear-gradient(
            135deg,
            #0f766e,
            #0284c7
        );

    color:white;
}

/*
==========================
FULLSCREEN CONTENT
==========================
*/

.book.fullscreen-book .content h2{

    font-size:32px;
}

.book.fullscreen-book .content h3{

    font-size:24px;
}

.book.fullscreen-book .content p,

.book.fullscreen-book .content ul li{

    font-size:18px;

    line-height:2;
}

/*
==========================
FULLSCREEN PAGE NUMBER
==========================
*/

.book.fullscreen-book .page-number{

    font-size:15px;

    bottom:18px;

    right:24px;
}

/*
==========================
FULLSCREEN TABLES
==========================
*/

.book.fullscreen-book table th,

.book.fullscreen-book table td{

    padding:14px;

    font-size:16px;
}

/*
==========================
FULLSCREEN SCROLLBAR
==========================
*/

.book.fullscreen-book ::-webkit-scrollbar{

    width:10px;
}

.book.fullscreen-book ::-webkit-scrollbar-thumb{

    background:#64748b;

    border-radius:10px;
}

.book.fullscreen-book ::-webkit-scrollbar-track{

    background:#cbd5e1;
}

/*
==========================
TABLET FULLSCREEN
==========================
*/

@media(max-width:900px){

    .fullscreen-toolbar{

        gap:10px;

        padding:10px 14px;
    }

    .fullscreen-toolbar .toolbar-btn{

        width:48px;

        height:48px;

        font-size:20px;
    }

    .book.fullscreen-book{

        padding-top:90px;
    }

    .book.fullscreen-book .page{

        height:calc(100vh - 110px);
    }

    .book.fullscreen-book .page-side{

        padding:28px;
    }

    .book.fullscreen-book .content h2{

        font-size:24px;
    }

    .book.fullscreen-book .content p,

    .book.fullscreen-book .content ul li{

        font-size:16px;

        line-height:1.8;
    }
}

/*
==========================
MOBILE FULLSCREEN
==========================
*/

@media(max-width:768px){

    .fullscreen-toolbar{

        top:10px;

        width:95%;

        flex-wrap:wrap;

        gap:8px;

        padding:10px;
    }

    .fullscreen-toolbar .toolbar-btn{

        width:44px;

        height:44px;

        font-size:18px;

        border-radius:10px;
    }

    .book.fullscreen-book{

        padding-top:90px;

        padding-left:10px;

        padding-right:10px;

        padding-bottom:10px;
    }

    .book.fullscreen-book::before{

        display:none;
    }

    .book.fullscreen-book .page{

        width:100%;

        height:calc(100vh - 100px);

        top:90px;
    }

    .book.fullscreen-book .page-side{

        padding:20px;

        border-radius:10px;
    }

    .book.fullscreen-book .content h2{

        font-size:22px;
    }

    .book.fullscreen-book .content h3{

        font-size:18px;
    }

    .book.fullscreen-book .content p,

    .book.fullscreen-book .content ul li{

        font-size:14px;

        line-height:1.7;
    }

    .book.fullscreen-book table th,

    .book.fullscreen-book table td{

        padding:8px;

        font-size:13px;
    }
}