/* ===========================
   REV YOU BOOK SYSTEM
=========================== */

.book-section{

    position:relative;

    padding:120px 8%;

    overflow:hidden;
}

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

.book-container{

    position:relative;

    max-width:1400px;

    margin:auto;

    perspective:2500px;
}


/* ===========================
   CLOSE BUTTON
=========================== */

.close-book{

    position:absolute;

    top:-80px;

    right:0;

    width:55px;

    height:55px;

    border:none;

    border-radius:50%;

    background:linear-gradient(
        135deg,
        #ef4444,
        #dc2626
    );

    color:#fff;

    font-size:18px;

    cursor:pointer;

    transition:0.4s;

    z-index:100;
}

.close-book:hover{

    transform:
    rotate(90deg)
    scale(1.1);
}

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

.book{

    position:relative;

    display:flex;

    width:100%;

    min-height:450px;

    border-radius:18px;

    overflow:hidden;

    transform-style:preserve-3d;

    box-shadow:
    0 40px 80px rgba(0,0,0,0.45);

    animation:
    bookFloat 5s ease-in-out infinite;
}

/* ===========================
   BOOK CENTER LINE
=========================== */

.book::before{

    content:"";

    position:absolute;

    left:50%;

    top:0;

    transform:translateX(-50%);

    width:4px;

    height:100%;

    background:
    linear-gradient(
        to bottom,
        #d1d5db,
        #94a3b8,
        #d1d5db
    );

    z-index:50;
}

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

.left-page{

    width:50%;

    background:
    linear-gradient(
        135deg,
        #fafafa,
        #f1f5f9
    );

    color:#111827;

    padding:70px;

    position:relative;

    border-right:
    1px solid rgba(0,0,0,0.08);
}

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

.right-page{

    width:50%;

    background:
    linear-gradient(
        135deg,
        #ffffff,
        #f8fafc
    );

    color:#111827;

    padding:70px;

    position:relative;
}

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

.left-page::after{

    content:"";

    position:absolute;

    top:0;

    right:0;

    width:30px;

    height:100%;

    background:
    linear-gradient(
        to left,
        rgba(0,0,0,0.08),
        transparent
    );
}

.right-page::before{

    content:"";

    position:absolute;

    top:0;

    left:0;

    width:30px;

    height:100%;

    background:
    linear-gradient(
        to right,
        rgba(0,0,0,0.08),
        transparent
    );
}

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

.page-content{

    position:relative;

    z-index:5;
}

.page-content h3{

    font-size:42px;

    margin-bottom:25px;

    color:#0f172a;

    font-weight:700;
}

.page-content h4{

    margin-top:20px;

    margin-bottom:15px;

    color:#2563eb;

    font-size:22px;
}

.page-content p{

    line-height:2;

    color:#334155;

    font-size:17px;
}

.page-content ul{

    margin-top:25px;

    padding-left:25px;
}

.page-content ul li{

    margin-bottom:18px;

    font-size:18px;

    color:#1e293b;

    transition:0.3s;
}

.page-content ul li:hover{

    transform:translateX(8px);

    color:#2563eb;
}

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

.page-image{

    width:100%;

    margin-top:35px;

    border-radius:18px;

    overflow:hidden;

    box-shadow:
    0 15px 35px rgba(0,0,0,0.15);
}

.page-image img{

    width:100%;

    display:block;

    transition:0.5s;
}

.page-image:hover img{

    transform:scale(1.05);
}

/* ===========================
   PAGE FLIP EFFECT
=========================== */

.page-flip{

    animation:
    flipPage 0.9s ease;
}

@keyframes flipPage{

    0%{

        transform:
        rotateY(0deg);
    }

    50%{

        transform:
        rotateY(-25deg);
    }

    100%{

        transform:
        rotateY(0deg);
    }
}

/* ===========================
   BOOK OPEN EFFECT
=========================== */

.book-open{

    animation:
    bookOpen 1s ease;
}

@keyframes bookOpen{

    0%{

        opacity:0;

        transform:
        rotateX(15deg)
        scale(0.9);
    }

    100%{

        opacity:1;

        transform:
        rotateX(0deg)
        scale(1);
    }
}

/* ===========================
   BOOK CLOSE EFFECT
=========================== */

.book-close{

    animation:
    bookClose 0.7s ease;
}

@keyframes bookClose{

    0%{

        opacity:1;

        transform:scale(1);
    }

    100%{

        opacity:0;

        transform:scale(0.85);
    }
}

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

@keyframes bookFloat{

    0%{

        transform:
        translateY(0px);
    }

    50%{

        transform:
        translateY(-12px);
    }

    100%{

        transform:
        translateY(0px);
    }
}

/* ===========================
   PAPER TEXTURE
=========================== */

.left-page,
.right-page{

    background-image:
    radial-gradient(
        rgba(0,0,0,0.02) 1px,
        transparent 1px
    );

    background-size:
    18px 18px;
}

/* ===========================
   RESPONSIVE
=========================== */

@media(max-width:992px){

    .book{

        flex-direction:column;
    }

    .left-page,
    .right-page{

        width:100%;
    }

    .book::before{

        display:none;
    }
}

@media(max-width:768px){

    .left-page,
    .right-page{

        padding:40px;
    }

    .page-content h3{

        font-size:30px;
    }

    .page-content p{

        font-size:15px;
    }
}