/* ===========================
   Education Carnival UI
   PART 1
=========================== */

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

html{
scroll-behavior:smooth;
}

body{
background:linear-gradient(135deg,#eef4ff,#f7f9ff,#ffffff);
overflow-x:hidden;
color:#111827;
min-height:100vh;
transition:.4s;
}

/* Blur Background */

body::before{
content:"";
position:fixed;
width:100%;
height:100%;
left:0;
top:0;
background:
radial-gradient(circle at 20% 20%,rgba(74,144,226,.18),transparent 35%),
radial-gradient(circle at 80% 30%,rgba(168,85,247,.18),transparent 35%),
radial-gradient(circle at 50% 80%,rgba(0,200,255,.18),transparent 40%);
z-index:-3;
}

/* ===========================
        NAVBAR
=========================== */

.navbar{

position:fixed;
top:15px;
left:50%;
transform:translateX(-50%);

width:95%;
max-width:900px;

padding:14px 18px;

display:flex;
justify-content:space-between;
align-items:center;

background:rgba(255,255,255,.35);

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

border:1px solid rgba(255,255,255,.45);

border-radius:28px;

box-shadow:
0 10px 35px rgba(0,0,0,.08);

z-index:999;
overflow:hidden;
}

/* Reflection */

.navbar::before{

content:"";

position:absolute;

left:-150%;
top:0;

width:70%;
height:100%;

background:linear-gradient(
90deg,
transparent,
rgba(255,255,255,.55),
transparent
);

transform:skewX(-20deg);

animation:glassMove 7s linear infinite;

}

@keyframes glassMove{

0%{
left:-150%;
}

100%{
left:180%;
}

}

.logo{

font-size:19px;
font-weight:700;
letter-spacing:.3px;

}

.nav-right{

display:flex;
align-items:center;
gap:12px;

}

.theme-btn{

width:42px;
height:42px;

border:none;

border-radius:50%;

background:rgba(255,255,255,.45);

backdrop-filter:blur(12px);

cursor:pointer;

font-size:18px;

transition:.3s;

}

.theme-btn:hover{

transform:scale(1.08);

}

.menu-icon{

font-size:30px;
cursor:pointer;

transition:.3s;

}

.menu-icon:hover{

transform:rotate(90deg);

}

/* ===========================
      HERO
=========================== */

.hero{

padding-top:130px;

text-align:center;

padding-left:20px;
padding-right:20px;

}

.welcome{

font-size:42px;
font-weight:800;

opacity:0;

transform:translateY(40px);

animation:welcome 1s forwards;

}

@keyframes welcome{

to{

opacity:1;

transform:translateY(0);

}

}

.subtitle{

margin-top:12px;

font-size:18px;

color:#666;

opacity:0;

animation:fade 1s .4s forwards;

}

@keyframes fade{

to{

opacity:1;

}

}

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

.buttons{

margin-top:40px;

display:flex;

flex-direction:column;

gap:18px;

align-items:center;

}

.buttons a{

position:relative;

width:240px;

padding:15px;

text-align:center;

text-decoration:none;

color:white;

font-weight:bold;

border-radius:40px;

background:linear-gradient(
135deg,
#4F8CFF,
#6C63FF
);

overflow:hidden;

box-shadow:

0 8px 25px rgba(79,140,255,.28);

transition:.3s;

}

/* Shine */

.buttons a::before{

content:"";

position:absolute;

left:-120%;

top:0;

width:60%;

height:100%;

background:linear-gradient(

90deg,

transparent,

rgba(255,255,255,.55),

transparent

);

transform:skewX(-20deg);

transition:.6s;

}

.buttons a:hover::before{

left:170%;

}

.buttons a:hover{

transform:translateY(-4px);

box-shadow:

0 15px 35px rgba(79,140,255,.35);

}

.buttons a:active{
  
  
  /* ====================================
        PART 2
   Side Menu + Cards + Blobs
==================================== */

/* ---------- Side Menu ---------- */

#sideMenu{

position:fixed;
top:0;
right:-100%;

width:78%;
max-width:320px;
height:100vh;

padding:90px 20px;

display:flex;
flex-direction:column;
gap:15px;

background:rgba(255,255,255,.35);

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

border-left:1px solid rgba(255,255,255,.5);

box-shadow:-20px 0 40px rgba(0,0,0,.08);

transition:.45s;

z-index:1000;

overflow:hidden;

}

/* Glass Reflection */

#sideMenu::before{

content:"";

position:absolute;

left:-120%;
top:0;

width:60%;
height:100%;

background:linear-gradient(
90deg,
transparent,
rgba(255,255,255,.45),
transparent
);

transform:skewX(-20deg);

animation:menuReflection 8s linear infinite;

}

@keyframes menuReflection{

0%{
left:-120%;
}

100%{
left:180%;
}

}

.close-btn{

position:absolute;

top:18px;
right:20px;

font-size:36px;

cursor:pointer;

transition:.3s;

}

.close-btn:hover{

transform:rotate(90deg);

}

#sideMenu a{

padding:14px 18px;

text-decoration:none;

color:#111827;

font-weight:600;

border-radius:16px;

background:rgba(255,255,255,.28);

backdrop-filter:blur(10px);

transition:.25s;

}

#sideMenu a:hover{

background:rgba(255,255,255,.55);

transform:translateX(6px);

}

/* ---------- Glass Cards ---------- */

.card{

margin:25px auto;

width:92%;
max-width:900px;

padding:22px;

border-radius:24px;

background:rgba(255,255,255,.28);

backdrop-filter:blur(18px);

border:1px solid rgba(255,255,255,.45);

box-shadow:

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

position:relative;

overflow:hidden;

transition:.35s;

}

.card:hover{

transform:translateY(-5px);

box-shadow:

0 20px 45px rgba(0,0,0,.12);

}

.card::before{

content:"";

position:absolute;

left:-150%;
top:0;

width:70%;
height:100%;

background:linear-gradient(
90deg,
transparent,
rgba(255,255,255,.55),
transparent
);

transform:skewX(-20deg);

animation:cardReflection 9s linear infinite;

}

@keyframes cardReflection{

0%{

left:-150%;

}

100%{

left:180%;

}

}

.card h2{

margin-bottom:12px;

font-size:24px;

}

.card p{

line-height:1.7;

color:#4b5563;

}

/* ---------- Floating Blobs ---------- */

.blob{

position:fixed;

border-radius:50%;

filter:blur(70px);

opacity:.35;

z-index:-2;

animation:blobMove 18s ease-in-out infinite;

}

/* Blue */

.blob1{

width:260px;
height:260px;

background:#60a5fa;

top:-80px;
left:-70px;

}

/* Purple */

.blob2{

width:300px;
height:300px;

background:#a855f7;

right:-120px;
top:180px;

animation-delay:4s;

}

/* Pink */

.blob3{

width:230px;
height:230px;

background:#fb7185;

bottom:-80px;
left:35%;

animation-delay:8s;

}

@keyframes blobMove{

0%{

transform:
translate(0,0)
scale(1);

}

25%{

transform:
translate(40px,-30px)
scale(1.08);

}

50%{

transform:
translate(-25px,35px)
scale(.95);

}

75%{

transform:
translate(30px,20px)
scale(1.05);

}

100%{

transform:
translate(0,0)
scale(1);

}

}

/* ---------- Scroll Reveal ---------- */

.reveal{

opacity:0;

transform:translateY(45px);

transition:1s;

}

.reveal.active{

opacity:1;

transform:translateY(0);

}
/* ====================================
        PART 3
 Dark Mode + Final Effects + Responsive
==================================== */

/* ---------- Dark Theme ---------- */

body.dark{
    background:linear-gradient(135deg,#0f172a,#111827,#1e293b);
    color:#f8fafc;
}

body.dark::before{
    background:
    radial-gradient(circle at 20% 20%,rgba(59,130,246,.18),transparent 35%),
    radial-gradient(circle at 80% 30%,rgba(168,85,247,.18),transparent 35%),
    radial-gradient(circle at 50% 80%,rgba(6,182,212,.18),transparent 40%);
}

body.dark .navbar,
body.dark .card,
body.dark #sideMenu{
    background:rgba(17,24,39,.45);
    border:1px solid rgba(255,255,255,.08);
}

body.dark #sideMenu a{
    background:rgba(255,255,255,.05);
    color:#fff;
}

body.dark #sideMenu a:hover{
    background:rgba(255,255,255,.12);
}

body.dark .subtitle,
body.dark .card p{
    color:#d1d5db;
}

body.dark .logo,
body.dark h1,
body.dark h2{
    color:#fff;
}

/* ---------- Floating Animation ---------- */

@keyframes floating{
    0%{
        transform:translateY(0px);
    }
    50%{
        transform:translateY(-8px);
    }
    100%{
        transform:translateY(0px);
    }
}

.buttons a{
    animation:floating 4s ease-in-out infinite;
}

.buttons a:nth-child(2){
    animation-delay:.4s;
}

.buttons a:nth-child(3){
    animation-delay:.8s;
}

/* ---------- Soft Glow ---------- */

.buttons a{

box-shadow:
0 10px 25px rgba(79,140,255,.30);

}

.buttons a:hover{

box-shadow:
0 0 18px rgba(79,140,255,.35),
0 0 35px rgba(79,140,255,.18);

}

/* ---------- Card Hover ---------- */

.card:hover{

transform:
translateY(-6px)
scale(1.01);

}

/* ---------- Scrollbar ---------- */

::-webkit-scrollbar{

width:8px;

}

::-webkit-scrollbar-thumb{

background:#7c9cff;

border-radius:20px;

}

::-webkit-scrollbar-track{

background:transparent;

}

/* ---------- Selection ---------- */

::selection{

background:#6C63FF;
color:white;

}

/* ---------- Responsive ---------- */

@media(max-width:768px){

.hero{

padding-top:120px;

}

.welcome{

font-size:34px;

}

.subtitle{

font-size:16px;

}

.buttons a{

width:92%;

}

.navbar{

width:94%;

}

.card{

width:94%;

}

}

@media(max-width:480px){

.logo{

font-size:16px;

}

.menu-icon{

font-size:28px;

}

.theme-btn{

width:40px;
height:40px;

}

.welcome{

font-size:30px;

}

.subtitle{

font-size:15px;

}

.card{

padding:18px;

}

}

transform:scale(.96);

}