/* =====================================
   SHABHAS PREMIUM THEME
===================================== */

:root{

--bg:#f5f7fb;
--bg2:#ffffff;
--text:#111827;

--accent:#d97706;

--glass:
rgba(255,255,255,.60);

--glass-border:
rgba(255,255,255,.35);

--shadow:
0 8px 30px rgba(0,0,0,.08);

}

/* DARK MODE */

body.dark{

--bg:#0f172a;
--bg2:#111827;
--text:#f8fafc;

--glass:
rgba(17,24,39,.55);

--glass-border:
rgba(255,255,255,.08);

--shadow:
0 8px 30px rgba(0,0,0,.40);

}

/* RESET */

*{
margin:0;
padding:0;
box-sizing:border-box;
}

html{
scroll-behavior:smooth;
}

body{

font-family:'Poppins',sans-serif;

background:
linear-gradient(
135deg,
var(--bg),
#eef2ff
);

color:var(--text);

min-height:100vh;

transition:.4s;

}

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

.topbar{

position:sticky;
top:0;

z-index:1000;

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

padding:15px 30px;

backdrop-filter:blur(18px);

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

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

}

body.dark .topbar{

background:
rgba(15,23,42,.75);

}

.brand{

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

}

.logo{

width:70px;
height:auto;

}

.brand h1{

font-size:28px;
font-weight:700;

}

.brand p{

font-size:12px;

opacity:.8;

}

.header-buttons{

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

}

.theme-btn{

width:48px;
height:48px;

border:none;

cursor:pointer;

border-radius:50%;

background:var(--glass);

backdrop-filter:blur(10px);

font-size:20px;

}

/* =========================
   HAMBURGER MENU BUTTON
========================= */

.menu-btn{

display:none;

width:48px;
height:48px;

border:none;

cursor:pointer;

border-radius:12px;

background:transparent;

padding:0;

position:relative;

}

/* 3 Lines */

.menu-btn span{

display:block;

width:24px;
height:3px;

margin:5px auto;

background:#111827;

border-radius:5px;

transition:.3s;

}

/* Dark Mode Lines */

body.dark .menu-btn span{

background:#ffffff;

}

/* Animated X */

.menu-btn.active span:nth-child(1){

transform:
translateY(8px)
rotate(45deg);

}

.menu-btn.active span:nth-child(2){

opacity:0;

}

.menu-btn.active span:nth-child(3){

transform:
translateY(-8px)
rotate(-45deg);

}

/* =====================================
   LAYOUT
===================================== */

.layout{

display:flex;

}

/* =====================================
   SIDEBAR
===================================== */

#sidebar{

width:280px;

background:
linear-gradient(
180deg,
rgba(255,255,255,.55),
rgba(255,255,255,.25)
);

backdrop-filter:blur(20px);

border-right:
1px solid rgba(255,255,255,.35);

}

.sidebar-title{

font-size:22px;
font-weight:600;

margin-bottom:20px;

}

.nav-item{

padding:16px;

margin-bottom:12px;

cursor:pointer;

border-radius:16px;

background:white;

border:
1px solid rgba(0,0,0,.08);

box-shadow:
0 4px 12px rgba(0,0,0,.05);

transition:.3s;

font-weight:500;

}

body.dark .nav-item{

background:
rgba(17,24,39,.75);

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

}

.nav-item:hover{

transform:
translateX(5px)
scale(1.02);

background:
rgba(217,119,6,.15);

}

.nav-item.active{

background:#d97706;

color:white;

}

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

main{

flex:1;

padding:30px;

}

/* =====================================
   GLASS CARD
===================================== */

.glass{

background:var(--glass);

backdrop-filter:blur(18px);

border:
1px solid var(--glass-border);

box-shadow:var(--shadow);

border-radius:24px;

}

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

.hero{

min-height:450px;

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

margin-bottom:30px;

}

.hero-card{

padding:60px;

text-align:center;

max-width:900px;

animation:fadeUp .8s ease;

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

}

body.dark .hero-card{

background:
rgba(17,24,39,.65);

}

.hero h2{

font-size:48px;

margin-bottom:20px;

}

.hero p{

font-size:18px;

line-height:1.8;

margin-bottom:30px;

}

.hero-btn{

display:inline-block;

padding:14px 28px;

border-radius:40px;

background:var(--accent);

color:white;

text-decoration:none;

font-weight:600;

transition:.3s;

}

.hero-btn:hover{

transform:translateY(-3px);

}

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

.content-card{

padding:40px;

}

.content-card h2{

margin-bottom:15px;

}

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

.category-grid{

display:grid;

grid-template-columns:
repeat(auto-fit,minmax(280px,1fr));

gap:25px;

margin-top:20px;

}

.category-card{

overflow:hidden;

transition:.35s;

}

.category-card:hover{

transform:
translateY(-10px);

}

.category-card img{

width:100%;

height:240px;

object-fit:cover;

display:block;

}

.card-body{

padding:20px;

}

.card-body h3{

margin-bottom:10px;

}

/* =====================================
   YOUTUBE
===================================== */

.youtube-section{

margin-top:50px;

}

.youtube-section h2{

margin-bottom:20px;

}

.youtube-grid{

display:grid;

grid-template-columns:
repeat(auto-fit,minmax(300px,1fr));

gap:25px;

}

.youtube-card iframe{

width:100%;

max-width:320px;

aspect-ratio:9/16;

border:none;

border-radius:16px;

display:block;

margin:auto;

}

/* =====================================
   CONTACT
===================================== */

.contact-section{

margin-top:50px;

}

.contact-section .glass{

padding:40px;

}

.contact-section h2{

margin-bottom:20px;

}

input,
textarea{

width:100%;

padding:16px;

margin-bottom:15px;

border:none;

border-radius:14px;

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

font-family:inherit;

}

body.dark input,
body.dark textarea{

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

color:white;

}

textarea{

height:150px;

resize:none;

}

.contact-section button{

padding:14px 30px;

background:var(--accent);

color:white;

border:none;

border-radius:40px;

cursor:pointer;

font-weight:600;

}

/* =====================================
   WHATSAPP
===================================== */

.whatsapp{

position:fixed;

right:25px;
bottom:25px;

width:65px;
height:65px;

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

font-size:30px;

text-decoration:none;

border-radius:50%;

background:#25D366;

color:white;

box-shadow:
0 8px 25px rgba(0,0,0,.25);

z-index:999;

transition:.3s;

}

.whatsapp:hover{

transform:scale(1.08);

}

/* =====================================
   ANIMATION
===================================== */

@keyframes fadeUp{

from{

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

}

to{

opacity:1;
transform:
translateY(0);

}

}

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

@media(max-width:900px){

.menu-btn{

display:block;

}

#sidebar{

position:fixed;

right:-320px;
top:90px;

width:280px;

height:100%;

background:var(--bg2);

transition:.35s;

z-index:1000;

box-shadow:
-10px 0 30px rgba(0,0,0,.20);

}

body.dark #sidebar{

background:
linear-gradient(
180deg,
rgba(15,23,42,.90),
rgba(17,24,39,.75)
);

}

#sidebar.show{

right:0;

}

.layout{

display:block;

}

main{

padding:20px;

}

.hero{

min-height:350px;

}

.hero-card{

padding:30px;

}

.hero h2{

font-size:32px;

}

.hero p{

font-size:16px;

}

.logo{

width:55px;

}

.brand h1{

font-size:22px;

}

}

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

@media(max-width:500px){

.hero h2{

font-size:28px;

}

.hero p{

font-size:15px;

}

.contact-section .glass{

padding:25px;

}

}

.install-btn{
    background:#000;
    color:#fff;
    border:none;
    padding:12px 20px;
    border-radius:25px;
    cursor:pointer;
    font-size:16px;
    margin:10px;
}

@media (min-width:768px){
    .install-btn{
        display:none !important;
    }
}