/****************************/
/* IMPORT GOOGLE FONT */
/****************************/

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700;800&display=swap');


/****************************/
/* RESET */
/****************************/

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


/****************************/
/* ROOT COLORS */
/****************************/

:root{

--primary-color:#00ffff;
--secondary-color:#7f5cff;
--background-color:#050816;
--card-color:rgba(255,255,255,0.08);
--text-color:#ffffff;
--glow-color:#00ffff;
--shadow-color:rgba(0,255,255,0.35);

}


/****************************/
/* BODY */
/****************************/

body{

background:linear-gradient(
135deg,
#050816,
#07122f,
#0b1f4d,
#07122f,
#050816
);

background-size:400% 400%;

animation:backgroundMove 15s ease infinite;

min-height:100vh;

color:white;

overflow-x:hidden;

}


/****************************/
/* CUSTOM SCROLLBAR */
/****************************/

::-webkit-scrollbar{

width:12px;

}


::-webkit-scrollbar-track{

background:#050816;

}


::-webkit-scrollbar-thumb{

background:linear-gradient(
180deg,
cyan,
#7f5cff
);

border-radius:50px;

}


::-webkit-scrollbar-thumb:hover{

background:white;

}


/****************************/
/* TEXT SELECTION */
/****************************/

::selection{

background:cyan;
color:black;

}


/****************************/
/* SMOOTH SCROLL */
/****************************/

html{

scroll-behavior:smooth;

}


/****************************/
/* BACKGROUND ANIMATION */
/****************************/

@keyframes backgroundMove{

0%{

background-position:0% 50%;

}

50%{

background-position:100% 50%;

}

100%{

background-position:0% 50%;

}

}


/****************************/
/* GLOBAL SECTIONS */
/****************************/

section{

padding:90px 10%;

}


/****************************/
/* GLOBAL HEADINGS */
/****************************/

h1{

font-size:3rem;

font-weight:800;

}


h2{

font-size:2.5rem;

margin-bottom:25px;

}


h3{

font-size:1.5rem;

}


p{

line-height:1.8;

}


/****************************/
/* GLOBAL BUTTONS */
/****************************/

button{

cursor:pointer;

border:none;

outline:none;

}

/****************************/
/* LOADING SCREEN */
/****************************/

#loading-screen{

position:fixed;

top:0;

left:0;

width:100%;

height:100vh;

display:flex;

justify-content:center;

align-items:center;

background:#050816;

z-index:9999;

}


.loader-container{

text-align:center;

}


.loader-logo{

font-size:4rem;

letter-spacing:8px;

color:cyan;

animation:glowLogo 2s infinite alternate;

}


.loader-container p{

margin-top:20px;

font-size:1.1rem;

color:white;

}


.loader-bar{

margin-top:25px;

width:350px;

height:14px;

border-radius:50px;

overflow:hidden;

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

}


.loader-progress{

width:50%;

height:100%;

background:linear-gradient(

90deg,

cyan,

#7f5cff

);

animation:loadingAnimation 2s infinite;

}


/****************************/
/* LOADING ANIMATIONS */
/****************************/

@keyframes glowLogo{


from{

text-shadow:

0 0 10px cyan,

0 0 20px cyan,

0 0 40px cyan;

}


to{


text-shadow:

0 0 30px cyan,

0 0 60px cyan,

0 0 100px cyan;

}


}


@keyframes loadingAnimation{


0%{

transform:translateX(-100%);

}


100%{

transform:translateX(300%);

}


}


/****************************/
/* NAVBAR */
/****************************/

.navbar{

display:flex;

justify-content:space-between;

align-items:center;

padding:25px 10%;

position:sticky;

top:0;

z-index:1000;

backdrop-filter:blur(25px);

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

border-bottom:1px solid rgba(255,255,255,0.1);

}


/****************************/
/* LOGO */
/****************************/

.logo{

font-size:2rem;

font-weight:800;

color:cyan;

cursor:pointer;

transition:0.4s;

}


.logo:hover{

transform:scale(1.1);

text-shadow:

0 0 20px cyan,

0 0 40px cyan;

}


/****************************/
/* NAV LINKS */
/****************************/

.nav-links{

display:flex;

gap:25px;

list-style:none;

}


.nav-links a{

text-decoration:none;

color:white;

transition:0.4s;

font-weight:500;

}


.nav-links a:hover{

color:cyan;

text-shadow:

0 0 20px cyan;

}


/****************************/
/* NAV BUTTONS */
/****************************/

.nav-buttons{

display:flex;

gap:15px;

}

/****************************/
/* BUTTONS STYLING */
/****************************/

button{

padding:14px 28px;

border-radius:50px;

background:linear-gradient(
90deg,
cyan,
#7f5cff
);

color:white;

font-size:1rem;

font-weight:600;

transition:0.4s ease;

box-shadow:
0 0 15px rgba(0,255,255,0.4);

}


button:hover{

transform:translateY(-5px);

box-shadow:
0 0 25px cyan,
0 0 45px #7f5cff;

}


/****************************/
/* DARK MODE BUTTON */
/****************************/

#darkModeBtn{

font-size:0.9rem;

}


/****************************/
/* NOTIFICATION BUTTON */
/****************************/

#notificationBtn{

font-size:0.9rem;

}


/****************************/
/* HERO SECTION */
/****************************/

.hero-section{

display:flex;

flex-direction:column;

justify-content:center;

align-items:center;

text-align:center;

min-height:90vh;

padding:100px 10%;

}


/****************************/
/* HERO TITLE */
/****************************/

.hero-section h1{

font-size:4rem;

margin-bottom:25px;

color:cyan;

text-shadow:

0 0 20px cyan,
0 0 40px cyan;

animation:floatingTitle 4s ease infinite;

}


.hero-section h2{

margin-bottom:20px;

color:white;

font-size:2rem;

}


.hero-section p{

max-width:800px;

font-size:1.2rem;

margin-bottom:40px;

line-height:2;

color:#dddddd;

}


/****************************/
/* HERO BUTTON */
/****************************/

.hero-btn{

padding:18px 40px;

font-size:1.1rem;

font-weight:bold;

}


/****************************/
/* FLOATING ANIMATION */
/****************************/

@keyframes floatingTitle{

0%{

transform:translateY(0px);

}


50%{

transform:translateY(-12px);

}


100%{

transform:translateY(0px);

}

}


/****************************/
/* HERO GLOW EFFECT */
/****************************/

.hero-section::before{

content:"";

position:absolute;

width:300px;

height:300px;

background:cyan;

filter:blur(180px);

opacity:0.08;

border-radius:50%;

z-index:-1;

}


/****************************/
/* HERO RESPONSIVE */
/****************************/

.hero-section h1{

word-break:break-word;

}

/****************************/
/* COUNTDOWN SECTION */
/****************************/

.countdown-section{

text-align:center;

padding:100px 10%;

}


.timer-container{

display:flex;

justify-content:center;

gap:30px;

flex-wrap:wrap;

margin-top:40px;

}


.time-box{

padding:35px;

min-width:140px;

border-radius:25px;

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

backdrop-filter:blur(20px);

box-shadow:
0 0 25px rgba(0,255,255,0.2);

transition:0.4s;

}


.time-box:hover{

transform:translateY(-10px);

box-shadow:
0 0 30px cyan;

}


.time-box h3{

font-size:2.5rem;

color:cyan;

margin-bottom:10px;

}



/****************************/
/* SEARCH SECTION */
/****************************/

.search-section{

text-align:center;

padding:100px 10%;

}


#searchBar{

width:70%;

max-width:700px;

padding:18px;

border:none;

outline:none;

border-radius:50px;

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

backdrop-filter:blur(15px);

color:white;

font-size:1rem;

margin-bottom:25px;

box-shadow:
0 0 20px rgba(0,255,255,0.2);

}


#searchBar::placeholder{

color:#cccccc;

}



/****************************/
/* CATEGORIES */
/****************************/

.category-container{

display:flex;

justify-content:center;

gap:25px;

flex-wrap:wrap;

margin-top:50px;

}


.category-card{

padding:30px;

min-width:220px;

border-radius:25px;

cursor:pointer;

transition:0.5s;

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

backdrop-filter:blur(18px);

box-shadow:
0 0 20px rgba(0,255,255,0.1);

font-weight:bold;

text-align:center;

}


.category-card:hover{

transform:
translateY(-10px)
scale(1.05);

box-shadow:

0 0 35px cyan,
0 0 60px #7f5cff;

}



/****************************/
/* BOOK CARDS */
/****************************/

.book-card{

padding:35px;

border-radius:30px;

margin-top:30px;

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

backdrop-filter:blur(20px);

box-shadow:
0 0 25px rgba(0,255,255,0.15);

transition:0.5s;

}


.book-card:hover{

transform:
translateY(-12px);

box-shadow:

0 0 40px cyan,
0 0 70px #7f5cff;

}


.book-card h3{

margin-bottom:15px;

color:cyan;

}


.book-card p{

margin-bottom:15px;

}


.book-card button{

margin-top:10px;

margin-right:10px;

}

/****************************/
/* FLASH SALES */
/****************************/

.flash-sales{

text-align:center;

padding:100px 10%;

}


.sale-card{

padding:40px;

margin-top:25px;

border-radius:30px;

background:linear-gradient(
135deg,
rgba(0,255,255,0.15),
rgba(127,92,255,0.15)
);

backdrop-filter:blur(20px);

transition:0.5s;

box-shadow:
0 0 25px rgba(0,255,255,0.25);

}


.sale-card:hover{

transform:scale(1.03);

box-shadow:
0 0 45px cyan,
0 0 75px #7f5cff;

}




/****************************/
/* MEMBERSHIP CARDS */
/****************************/

.membership-card{

padding:40px;

margin-top:30px;

border-radius:30px;

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

backdrop-filter:blur(25px);

text-align:center;

transition:0.5s;

box-shadow:
0 0 20px rgba(255,255,255,0.08);

}


.membership-card:hover{

transform:translateY(-12px);

box-shadow:
0 0 50px cyan;

}




/****************************/
/* PROGRESS BAR */
/****************************/

.progress-container{

width:100%;

height:22px;

border-radius:50px;

overflow:hidden;

margin-top:25px;

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

}


.progress-fill{

width:75%;

height:100%;

border-radius:50px;

background:linear-gradient(
90deg,
cyan,
#7f5cff
);

animation:progressAnimation 4s infinite alternate;

}


@keyframes progressAnimation{


from{

width:30%;

}


to{

width:75%;

}


}




/****************************/
/* XP SYSTEM */
/****************************/

.xp-bar{

width:100%;

height:25px;

margin-top:25px;

border-radius:50px;

overflow:hidden;

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

}


.xp-fill{

width:65%;

height:100%;

border-radius:50px;

background:linear-gradient(
90deg,
#00ffff,
#7f5cff
);

animation:xpAnimation 5s infinite alternate;

}


@keyframes xpAnimation{


from{

width:40%;

}


to{

width:90%;

}


}




/****************************/
/* DAILY REWARDS */
/****************************/

.daily-rewards{

text-align:center;

padding:100px 10%;

}


.daily-rewards button:hover{

transform:
rotate(3deg)
scale(1.05);

}




/****************************/
/* PREMIUM DASHBOARD */
/****************************/

.dashboard,
.premium-dashboard{

padding:50px;

margin-top:35px;

border-radius:30px;

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

backdrop-filter:blur(25px);

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

transition:0.5s;

}


.dashboard:hover,
.premium-dashboard:hover{

box-shadow:
0 0 60px cyan,
0 0 100px #7f5cff;

}




/****************************/
/* PREMIUM EFFECT */
/****************************/

.membership-card::before,
.book-card::before{

content:"";

position:absolute;

width:120px;

height:120px;

background:cyan;

filter:blur(90px);

opacity:0.15;

border-radius:50%;

}

/****************************/
/* FOOTER */
/****************************/

footer{

padding:80px 10%;

margin-top:80px;

text-align:center;

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

backdrop-filter:blur(25px);

border-top:1px solid rgba(255,255,255,0.1);

}


footer h1{

color:cyan;

margin-bottom:25px;

}


footer p{

margin-top:15px;

color:#dddddd;

}



/****************************/
/* FOOTER LINKS */
/****************************/

.footer-links{

margin-top:40px;

display:flex;

justify-content:center;

gap:30px;

flex-wrap:wrap;

}


.footer-links p{

cursor:pointer;

transition:0.4s;

}


.footer-links p:hover{

color:cyan;

transform:translateY(-5px);

text-shadow:
0 0 20px cyan;

}




/****************************/
/* BACK TO TOP BUTTON */
/****************************/

#backToTop{

position:fixed;

right:30px;

bottom:30px;

width:65px;

height:65px;

border-radius:50%;

font-size:1.5rem;

z-index:999;

box-shadow:

0 0 20px cyan;

}


#backToTop:hover{

transform:
translateY(-10px)
rotate(360deg);

transition:0.6s;

}




/****************************/
/* FLOATING EFFECT */
/****************************/

@keyframes floatingEffect{

0%{

transform:translateY(0);

}

50%{

transform:translateY(-8px);

}

100%{

transform:translateY(0);

}

}


.book-card,
.membership-card,
.sale-card{

animation:floatingEffect 5s ease infinite;

}




/****************************/
/* GLASS EFFECT */
/****************************/

.book-card,
.sale-card,
.membership-card,
.dashboard,
.premium-dashboard{

position:relative;

overflow:hidden;

}




/****************************/
/* INPUT FIELDS */
/****************************/

input{

padding:18px;

border:none;

outline:none;

border-radius:25px;

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

backdrop-filter:blur(20px);

color:white;

width:100%;

margin-top:20px;

margin-bottom:20px;

}


input::placeholder{

color:#cccccc;

}




/****************************/
/* LIST ITEMS */
/****************************/

li{

margin-top:12px;

line-height:1.9;

color:#eeeeee;

}




/****************************/
/* UL STYLE */
/****************************/

ul{

list-style:none;

}




/****************************/
/* PREMIUM SHADOW */
/****************************/

section:hover{

transition:0.5s;

}


section:hover h2{

text-shadow:

0 0 20px cyan;

}




/****************************/
/* SECTION BORDER EFFECT */
/****************************/

section{

border-radius:30px;

margin-top:40px;

transition:0.5s;

}


section:hover{

box-shadow:

0 0 30px rgba(0,255,255,0.15);

}

/****************************/
/* RESPONSIVE DESIGN */
/****************************/

@media(max-width:1200px){

.navbar{

flex-direction:column;
gap:25px;

}


.nav-links{

flex-wrap:wrap;
justify-content:center;

}


.hero-section h1{

font-size:3rem;

}


h2{

font-size:2rem;

}

}



@media(max-width:768px){


section{

padding:60px 7%;

}


.hero-section h1{

font-size:2.4rem;

}


.hero-section h2{

font-size:1.5rem;

}


.timer-container{

flex-direction:column;

align-items:center;

}


.category-container{

flex-direction:column;

align-items:center;

}


.footer-links{

flex-direction:column;

}


button{

width:100%;

}


input{

width:100%;

}


#searchBar{

width:100%;

}


}



@media(max-width:500px){


.hero-section h1{

font-size:2rem;

}


h2{

font-size:1.7rem;

}


.logo{

font-size:1.5rem;

}


.book-card{

padding:25px;

}


.membership-card{

padding:25px;

}


}



/****************************/
/* NEON TEXT EFFECT */
/****************************/

.neon-text{

color:cyan;

text-shadow:

0 0 10px cyan,
0 0 20px cyan,
0 0 40px cyan;

}




/****************************/
/* GLOWING BORDER */
/****************************/

.glow-border{

border:1px solid cyan;

box-shadow:

0 0 20px cyan;

}




/****************************/
/* FADE IN ANIMATION */
/****************************/

@keyframes fadeIn{

from{

opacity:0;
transform:translateY(40px);

}


to{

opacity:1;
transform:translateY(0);

}

}


section{

animation:fadeIn 1.2s ease;

}




/****************************/
/* ROTATING