@import"https://fonts.googleapis.com/css2?family=Montserrat:wght@100;200;300;400;500;600;800;900&display=swap";.load{display:flex;align-items:center;justify-content:center;height:100vh}.loader{--background: linear-gradient(135deg, #23C4F8, #275EFE);--shadow: rgba(39, 94, 254, .28);--text: #6C7486;--page: rgba(255, 255, 255, .36);--page-fold: rgba(255, 255, 255, .52);--duration: 3s;width:220px;height:165px;position:relative}.loader:before,.loader:after{--r: -6deg;content:"";position:absolute;bottom:8px;width:120px;top:80%;box-shadow:0 16px 12px var(--shadow);transform:rotate(var(--r))}.loader:before{left:4px}.loader:after{--r: 6deg;right:4px}.loader div{width:100%;height:100%;border-radius:13px;position:relative;z-index:1;perspective:600px;box-shadow:0 4px 6px var(--shadow);background-image:var(--background)}.loader div ul{margin:0;padding:0;list-style:none;position:relative}.loader div ul li{--r: 180deg;--o: 0;--c: var(--page);position:absolute;top:10px;left:10px;transform-origin:100% 50%;color:var(--c);opacity:var(--o);transform:rotateY(var(--r));-webkit-animation:var(--duration) ease infinite;animation:var(--duration) ease infinite}.loader div ul li:nth-child(2){--c: var(--page-fold);-webkit-animation-name:page-2;animation-name:page-2}.loader div ul li:nth-child(3){--c: var(--page-fold);-webkit-animation-name:page-3;animation-name:page-3}.loader div ul li:nth-child(4){--c: var(--page-fold);-webkit-animation-name:page-4;animation-name:page-4}.loader div ul li:nth-child(5){--c: var(--page-fold);-webkit-animation-name:page-5;animation-name:page-5}.loader div ul li svg{width:100px;height:150px;display:block}.loader div ul li:first-child{--r: 0deg;--o: 1}.loader div ul li:last-child{--o: 1}.loader span{display:block;left:0;right:0;top:100%;margin-top:20px;text-align:center;color:var(--text)}@keyframes page-2{0%{transform:rotateY(180deg);opacity:0}20%{opacity:1}35%,to{opacity:0}50%,to{transform:rotateY(0)}}@keyframes page-3{15%{transform:rotateY(180deg);opacity:0}35%{opacity:1}50%,to{opacity:0}65%,to{transform:rotateY(0)}}@keyframes page-4{30%{transform:rotateY(180deg);opacity:0}50%{opacity:1}65%,to{opacity:0}80%,to{transform:rotateY(0)}}@keyframes page-5{45%{transform:rotateY(180deg);opacity:0}65%{opacity:1}80%,to{opacity:0}95%,to{transform:rotateY(0)}}*{font-family:Montserrat,sans-serif;padding:0;margin:0}*::-webkit-scrollbar{display:none;scroll-behavior:smooth}:root{--primary-color: #755139ff;--secondry-color: #d4b996ff}.body{background-color:#39383d;font-size:75.5%}.header{width:100%;height:100vh!important;color:var(--secondry-color);box-shadow:0 5px 10px var(--secondry-color);color:#000;display:flex;align-items:center;position:relative;text-transform:capitalize}.row1{color:#fff}@media (max-width: 1000px){.row1{display:none}.row2{right:15px!important}.row2 input{width:300px!important}.card{left:28px}}.header:before{content:"";position:absolute;top:0;left:0;width:100%;height:100%;background:linear-gradient(rgba(0,0,0,.5),rgba(0,0,0,.5)),url(https://img.freepik.com/free-photo/abundant-collection-antique-books-wooden-shelves-generated-by-ai_188544-29660.jpg);clip-path:circle(60% at left 300px)}@media (max-width: 768px){.header:before{background:none}}.row2{position:absolute;top:10px;right:150px;text-align:center;color:#fff}.row2 h2{font-size:3rem;margin-top:20px;margin-bottom:15px}.row2 img{margin-top:30px;width:250px}.row1 h1{position:relative;font-size:2.5rem;text-align:start;margin-left:35px}.search{display:flex;align-items:center;justify-content:center}.search input{outline:0;border:0;width:350px;height:35px;padding:0 .5rem;font-size:15px;font-weight:700}.search button{outline:none;border:none;height:35px;padding:0 .5rem}.container{width:65%;margin:45px auto 0;display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,.5fr));grid-gap:20px;box-sizing:border-box}.title{display:flex;align-items:center;justify-content:center;padding-top:20px;color:#fff}.card{background:#191c29;align-items:center;justify-content:center;flex-direction:column;border-radius:6px;width:220px;gap:15px;height:430px;display:flex;cursor:pointer;color:#fff;font-size:15px}.card img{width:94%}.card:hover:before,.card:hover:after{animation:none;opacity:0}.card:after{position:absolute;content:"";top:calc(var(--card-height) / 6);left:0;right:0;z-index:-1;margin:0 auto;transform:scale(.8);filter:blur(calc(var(--card-height) / 6));opacity:1;transition:opacity .5s;animation:spin 2.5s linear infinite}.card .bottom{padding-left:10px}.card .amount{background:#feca55ff;text-align:center;margin-top:15px;margin-bottom:5px;width:70px;border-radius:4px;font-size:16px}.overlay{min-height:100vh;width:100%;position:fixed;left:0;top:0;bottom:0;right:0;background:linear-gradient(rgba(0,0,0,.2),rgba(0,0,0,.2));display:flex;align-items:center;justify-content:center}.overlay-inner{background:white;width:700px;height:550px;padding:1.5rem;position:relative;box-sizing:border-box;overflow:hidden;font-size:1.3rem;overflow:scroll}.overlay-inner::-webkit-scrollbar{width:12px;border-radius:20px}.overlay-inner::-webkit-scrollbar-track{background:#d1e5ff}.overlay-inner::-webkit-scrollbar-thumb{background:linear-gradient(#755139ff,#d4b996ff)}.overlay-inner .close{position:absolute;top:1rem;right:1rem;outline:none;border:none;font-size:17px;background:transparent}.overlay-inner .inner-box{margin-top:30px;display:flex;justify-content:center}.overlay-inner .inner-box img{margin-right:20px;width:150px;height:200px}.overlay-inner .inner-box h3{margin-top:20px;color:green}.overlay-inner .inner-box h1{font-size:35px}.overlay-inner .inner-box h4{margin-top:20px;color:#00f}.overlay-inner .inner-box button{outline:none;border:none;width:100px;border-radius:5px;background:#24a0ed;color:#fff;font-weight:700;margin-top:20px;cursor:pointer;padding:.5rem .7rem;text-transform:capitalize}.overlay-inner .description{margin-top:2rem;text-align:justify;font-size:13px}