*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family:Arial, sans-serif;
}


body{

    background:#f5f8ff;

    color:#14284b;

}



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


header{

    height:80px;

    background:white;

    display:flex;

    align-items:center;

    justify-content:space-between;

    padding:0 50px;

    box-shadow:0 3px 15px rgba(0,0,0,.08);

}



.logo-text{

    font-size:22px;

    font-weight:800;

    color:#10284d;

}



.logo-text span{

    color:#1677ff;

}



nav{

    font-size:15px;

    font-weight:bold;

    color:#27364d;

}







/* =====================
 BANNER
===================== */


.banner{


    margin:35px;


    padding:70px;


    min-height:450px;


    border-radius:35px;


    display:flex;


    justify-content:space-between;


    align-items:center;



    background:


    linear-gradient(

    120deg,

    #eaf5ff,

    #ffffff

    );



    overflow:hidden;



}




.banner-left{

    width:50%;

}




.banner h1{


    font-size:58px;


    line-height:1.15;


    color:#092653;


}



.banner h1 span{

    color:#1677ff;

}




.banner p{


    margin:25px 0;


    font-size:19px;


    color:#5d6b80;


    line-height:1.6;


}




.banner button{


    padding:16px 35px;


    border-radius:30px;


    border:none;


    background:#1677ff;


    color:white;


    font-size:17px;


    cursor:pointer;


    margin-right:15px;


}



.banner button:hover{


    transform:translateY(-3px);


}




.btn-white{


    background:white!important;


    color:#1677ff!important;


    border:1px solid #1677ff!important;


}





.banner-right img{


    width:520px;


    border-radius:25px;


    box-shadow:

    0 20px 50px rgba(0,0,0,.15);


}







/* =====================
 LOGIN
===================== */


.login{


    position:fixed;


    top:0;


    left:0;


    width:100%;


    height:100vh;


    display:none;


    justify-content:center;


    align-items:center;


    background:


    rgba(5,20,45,.75);


    backdrop-filter:blur(10px);


}



.login-box{


    width:420px;


    padding:45px;


    background:white;


    border-radius:30px;


    text-align:center;


    box-shadow:

    0 20px 60px rgba(0,0,0,.3);


}




.book-icon{

    font-size:60px;

}



.login-box h1{


    font-size:30px;


    color:#092653;


}



.login-box h2{


    color:#1677ff;


    margin:10px;


}



.login-box p{


    color:#666;


    margin-bottom:20px;


}




.login-box input{


    width:100%;


    height:50px;


    margin:8px 0;


    padding:15px;


    border-radius:12px;


    border:1px solid #ddd;


    font-size:16px;


}




.login-box button{


    margin-top:20px;


    width:180px;


    height:45px;


    border:none;


    border-radius:25px;


    background:#1677ff;


    color:white;


    cursor:pointer;


}








/* =====================
 STATS
===================== */


.stats{


    display:flex;


    gap:25px;


    margin:35px;


}



.stats div{


    flex:1;


    background:white;


    padding:30px;


    text-align:center;


    border-radius:25px;


    box-shadow:

    0 5px 20px rgba(0,0,0,.08);


}



.stats h2{


    color:#1677ff;


    margin:15px;


}







/* =====================
 CATEGORY
===================== */


.category{


    padding:40px;


    text-align:center;


}



.category h1{


    margin-bottom:35px;


    color:#10284d;


}




.category-box{


    display:flex;


    gap:25px;


}





.category-box div{


    flex:1;


    background:white;


    padding:35px;


    border-radius:25px;


    box-shadow:

    0 5px 20px rgba(0,0,0,.08);


    transition:.3s;


}



.category-box div:hover{


    transform:translateY(-8px);


}




.category-box h3{


    margin:15px;


    color:#1677ff;


}







/* =====================
 PDF READER
===================== */


#reader{


    display:none;


    padding:30px;


}




.book{


    width:100%;


    height:800px;


    display:flex;


    gap:20px;


}





.book iframe{


    width:50%;


    height:100%;


    border:none;


    background:white;


    border-radius:15px;


    box-shadow:

    0 10px 30px rgba(0,0,0,.2);


}





.control{


    text-align:center;


    margin-top:25px;


}



.control button{


    width:55px;


    height:40px;


    border:none;


    border-radius:10px;


    background:#1677ff;


    color:white;


    cursor:pointer;


    margin:0 20px;


}





.control span{


    font-size:20px;


    font-weight:bold;


}








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


@media(max-width:900px){


header{


    padding:0 20px;


}


nav{


    display:none;


}




.banner{


    flex-direction:column;


    padding:30px;


}




.banner-left{


    width:100%;


}




.banner h1{


    font-size:38px;


}



.banner-right img{


    width:100%;


    margin-top:30px;


}





.stats,


.category-box{


    flex-direction:column;


}




.book{


    flex-direction:column;


    height:1000px;


}



.book iframe{


    width:100%;


}


}