/* ==========================================
GALLERY SECTION
========================================== */

.gallery-section{

padding:100px 40px;

max-width:1400px;

margin:auto;

}

.gallery-grid{

display:grid;

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

gap:24px;

margin-top:40px;

}

.gallery-card{

background:
linear-gradient(
145deg,
#12192b,
#18233d
);

border-radius:30px;

padding:35px;

text-align:center;

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

transition:.35s ease;

}

.gallery-card:hover{

transform:
translateY(-10px);

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

}

.gallery-card i{

font-size:2.5rem;

color:#7c5cff;

margin-bottom:18px;

}

.gallery-card h3{

font-size:1.3rem;

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

}

/* ==========================================
FOOTER
========================================== */

.footer{

margin-top:100px;

background:#070d18;

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

}

.footer-container{

max-width:1400px;

margin:auto;

display:grid;

grid-template-columns:
2fr 1fr 1fr 2fr;

gap:40px;

padding:70px 40px;

}

.footer-brand h2{

font-size:2rem;

color:#eb6835;

margin-bottom:15px;

}

.footer-brand p{

line-height:1.8;

color:#9ca3af;

}

.footer-col h3{

margin-bottom:15px;

color:white;

}

.footer-col ul{

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

}

.footer-col a{

color:#94a3b8;

transition:.3s;

}

.footer-col a:hover{

color:#eb6835;

}

.newsletter{

display:flex;

gap:10px;

margin-top:15px;

}

.newsletter input{

flex:1;

padding:12px;

border:none;

border-radius:12px;

background:#111827;

color:white;

}

.newsletter button{

padding:12px 18px;

border:none;

border-radius:12px;

background:#eb6835;

color:white;

cursor:pointer;

font-weight:700;

}

.footer-bottom{

text-align:center;

padding:25px;

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

color:#94a3b8;

}

/* ==========================================
HOVER EFFECTS
========================================== */

.bento-card{

transition:
transform .35s ease,
box-shadow .35s ease;

}

.bento-card:hover{

transform:
translateY(-8px);

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

}

.card-btn{

padding:12px 20px;

border:none;

border-radius:14px;

background:#7c5cff;

color:white;

cursor:pointer;

font-weight:700;

transition:.3s;

}

.card-btn:hover{

transform:translateY(-3px);

}

/* ==========================================
ANIMATIONS
========================================== */

@keyframes float{

0%{
transform:translateY(0);
}

50%{
transform:translateY(-10px);
}

100%{
transform:translateY(0);
}

}

.weather-icon{

font-size:3rem;

animation:
float 4s ease infinite;

}

.pulse{

width:12px;
height:12px;

border-radius:50%;

background:#22c55e;

animation:
pulse 1.5s infinite;

}

@keyframes pulse{

0%{
transform:scale(1);
opacity:1;
}

50%{
transform:scale(1.5);
opacity:.5;
}

100%{
transform:scale(1);
opacity:1;
}

}

/* ==========================================
RESPONSIVE
========================================== */

@media(max-width:1200px){

.footer-container{

grid-template-columns:
repeat(2,1fr);

}

}

@media(max-width:768px){

.sidebar{

transform:
translateX(-100%);

position:fixed;

}

.sidebar.active{

transform:
translateX(0);

}

.page-content{

margin-left:0;

padding:20px;

}

.hero h1{

font-size:3rem;

}

.footer-container{

grid-template-columns:1fr;

}

.newsletter{

flex-direction:column;

}

.nav-search{

display:none;

}

}

@media(max-width:500px){

.hero{

text-align:center;

}

.hero-buttons{

flex-direction:column;

}

.primary-btn,
.secondary-btn{

width:100%;

text-align:center;

}

}
/* ==========================================
ROOT VARIABLES
========================================== */

:root{

--bg:#070b16;

--card:#101827;
--card-light:#162033;

--purple:#7c5cff;
--purple-light:#9b7bff;

--cyan:#00c2ff;
--green:#22c55e;
--orange:#eb6835;

--text:#ffffff;
--text-light:#9ca3af;

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

--sidebar-width:260px;

--radius:30px;

}

/* ==========================================
RESET
========================================== */

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

html{
scroll-behavior:smooth;
}

body{

font-family:'DM Sans',sans-serif;

background:var(--bg);

color:white;

overflow-x:hidden;

}

/* ==========================================
SCROLLBAR
========================================== */

::-webkit-scrollbar{
width:10px;
}

::-webkit-scrollbar-thumb{

background:var(--purple);

border-radius:999px;

}

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

.sidebar{

position:fixed;

left:0;
top:0;

width:260px;
height:100vh;

background:
linear-gradient(
180deg,
#111827,
#0d1322
);

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

padding:24px;

z-index:1000;

overflow-y:auto;

}

.sidebar-brand{

display:flex;
align-items:center;

gap:10px;

margin-bottom:35px;

}

.brand-icon{

font-size:1.4rem;

color:var(--orange);

}

.brand-text{

font-size:1.7rem;

font-weight:800;

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

}

.sidebar-nav ul{

display:flex;
flex-direction:column;

gap:8px;

}

.sidebar-nav a{

display:flex;

align-items:center;

gap:14px;

padding:14px 16px;

border-radius:16px;

color:#aeb6c7;

text-decoration:none;

transition:.3s ease;

}

.sidebar-nav a:hover{

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

color:white;

}

.sidebar .active a{

background:
rgba(124,92,255,.18);

color:white;

}

.sidebar-footer{

display:flex;

gap:10px;

margin-top:30px;

}

.sidebar-footer a{

width:42px;
height:42px;

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

border-radius:50%;

background:#162033;

color:white;

text-decoration:none;

}

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

.navbar{

position:fixed;

top:0;

left:260px;

right:0;

height:80px;

display:flex;

align-items:center;

justify-content:space-between;

padding:0 35px;

background:
rgba(7,11,22,.9);

backdrop-filter:blur(20px);

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

z-index:999;

}

.nav-left{

display:flex;

align-items:center;

gap:18px;

}

.menu-btn{

width:45px;
height:45px;

border:none;

border-radius:14px;

background:#162033;

color:white;

cursor:pointer;

}

.nav-search{

width:420px;

display:flex;

align-items:center;

gap:10px;

padding:12px 18px;

border-radius:16px;

background:#111827;

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

}

.nav-search input{

width:100%;

background:none;

border:none;

outline:none;

color:white;

}

.nav-right{

display:flex;

gap:12px;

}

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

.primary-btn{

padding:14px 24px;

border:none;

border-radius:16px;

background:
linear-gradient(
135deg,
var(--purple),
var(--purple-light)
);

color:white;

font-weight:700;

cursor:pointer;

text-decoration:none;

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

}

.secondary-btn,
.outline-btn{

padding:14px 24px;

border-radius:16px;

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

background:none;

color:white;

cursor:pointer;

text-decoration:none;

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

gap:8px;

}

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

.page-content{

margin-left:260px;

padding-top:110px;

}

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

.hero{

max-width:1400px;

margin:auto;

padding:60px 40px;

text-align:center;

}

.hero-badge{

display:inline-block;

padding:12px 22px;

border-radius:999px;

background:
rgba(124,92,255,.15);

border:
1px solid rgba(124,92,255,.25);

color:#c8bbff;

font-weight:700;

margin-bottom:25px;

}

.hero h1{

font-size:
clamp(
3rem,
7vw,
6rem
);

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

line-height:1.05;

margin-bottom:20px;

}

.hero h1 span{

background:
linear-gradient(
90deg,
#7c5cff,
#00c2ff
);

-webkit-background-clip:text;
-webkit-text-fill-color:transparent;

}

.hero p{

max-width:800px;

margin:auto;

font-size:1.1rem;

line-height:1.9;

color:var(--text-light);

}

.hero-buttons{

display:flex;

justify-content:center;

gap:15px;

margin-top:35px;

flex-wrap:wrap;

}

.hero-stats{

display:grid;

grid-template-columns:
repeat(4,1fr);

gap:24px;

margin-top:60px;

}

.hero-stats div{

padding:28px;

background:
linear-gradient(
145deg,
#111827,
#18233d
);

border-radius:24px;

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

}

.hero-stats h3{

font-size:2.5rem;

margin-bottom:8px;

}

.hero-stats span{

color:var(--text-light);

}
/* ==========================================
BENTO GRID
========================================== */

.bento-grid{

max-width:1400px;

margin:auto;

padding:40px;

grid-auto-rows:220px;

}

/* ==========================================
BASE CARD
========================================== */

.bento-card{

position:relative;

overflow:hidden;

padding:28px;

border-radius:30px;

background:
linear-gradient(
145deg,
rgba(17, 24, 39, 0.4),
rgba(24, 35, 61, 0.2)
);

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

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

transition:.35s ease;

display:flex;
flex-direction:column;
justify-content:space-between;

}

.bento-card:hover{

transform:
translateY(-10px);

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

}

.bento-card::before{

content:"";

position:absolute;

width:220px;
height:220px;

border-radius:50%;

top:-80px;
right:-80px;

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

}

/* ==========================================
CARD TEXT
========================================== */

.card-tag{

display:inline-block;

width:max-content;

padding:8px 16px;

border-radius:999px;

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

font-size:.8rem;

font-weight:700;

margin-bottom:15px;

}

.bento-card h2{

font-size:2rem;

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

margin-bottom:12px;

}

.bento-card p{

line-height:1.8;

color:#9ca3af;

}

/* ==========================================
DASHBOARD
========================================== */

.dashboard-card{

background:
linear-gradient(
135deg,
rgba(124, 92, 255, 0.2),
rgba(91, 70, 255, 0.05)
);

}

.dashboard-card p{

color:
rgba(255,255,255,.85);

}

.mini-stats{

display:grid;

grid-template-columns:
repeat(3,1fr);

gap:15px;

margin-top:25px;

}

.mini-stats div{

padding:20px;

border-radius:18px;

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

backdrop-filter:blur(10px);

}

.mini-stats h3{

font-size:1.7rem;

}

/* ==========================================
ANALYTICS
========================================== */

.analytics-card{

background:
linear-gradient(
135deg,
rgba(0, 194, 255, 0.2),
rgba(59, 130, 246, 0.05)
);

}

.analytics-card::after{

content:"";

position:absolute;

left:25px;
right:25px;
bottom:25px;

height:80px;

border-radius:16px;

background:
linear-gradient(
180deg,
rgba(255,255,255,.05),
rgba(255,255,255,.15)
);

}

/* ==========================================
PROJECTS
========================================== */

.projects-card{

background:
linear-gradient(
135deg,
rgba(16, 185, 129, 0.2),
rgba(5, 150, 105, 0.05)
);

}

.projects-card::after{

content:"75%";

position:absolute;

bottom:25px;
right:25px;

font-size:2rem;

font-weight:800;

}

/* ==========================================
TEAM
========================================== */

.team-card{

background:
linear-gradient(
135deg,
rgba(249, 115, 22, 0.2),
rgba(234, 88, 12, 0.05)
);

}

.team-avatars{

display:flex;

margin-top:25px;

}

.avatar{

width:55px;
height:55px;

border-radius:50%;

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

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

margin-right:-12px;

font-weight:700;

backdrop-filter:blur(10px);

}

/* ==========================================
REVENUE
========================================== */

.revenue-card{

background:
linear-gradient(
135deg,
rgba(236, 72, 153, 0.2),
rgba(219, 39, 119, 0.05)
);

}

.mini-chart{

display:flex;

align-items:flex-end;

gap:8px;

margin-top:25px;

height:100px;

}

.mini-chart span{

flex:1;

border-radius:999px;

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

}

.mini-chart span:nth-child(1){
height:30%;
}

.mini-chart span:nth-child(2){
height:55%;
}

.mini-chart span:nth-child(3){
height:70%;
}

.mini-chart span:nth-child(4){
height:45%;
}

.mini-chart span:nth-child(5){
height:85%;
}

.mini-chart span:nth-child(6){
height:100%;
}

/* ==========================================
AI CARD
========================================== */

.ai-card{

background:
linear-gradient(
135deg,
rgba(109, 40, 217, 0.2),
rgba(147, 51, 234, 0.05)
);

}

.card-btn{

margin-top:20px;

width:max-content;

padding:14px 24px;

border:none;

border-radius:14px;

background:white;

color:#6d28d9;

font-weight:700;

cursor:pointer;

}

/* ==========================================
NOTIFICATIONS
========================================== */

.notifications-card{

background:
linear-gradient(
135deg,
rgba(15, 23, 42, 0.5),
rgba(30, 41, 59, 0.2)
);

}

.activity-list{

display:flex;

flex-direction:column;

gap:12px;

margin-top:18px;

}

.activity-list li{

padding:12px;

border-radius:12px;

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

}

/* ==========================================
SMART HOME
========================================== */

.smart-card{

background:
linear-gradient(
135deg,
rgba(8, 145, 178, 0.2),
rgba(6, 182, 212, 0.05)
);

}

.device-grid{

display:grid;

grid-template-columns:
repeat(2,1fr);

gap:12px;

margin-top:20px;

}

.device{

height:65px;

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

border-radius:16px;

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

font-size:1.5rem;

}

.device.active{

background:white;

color:#0891b2;

}

/* ==========================================
CRYPTO
========================================== */

.crypto-card{

background:
linear-gradient(
135deg,
rgba(245, 158, 11, 0.2),
rgba(217, 119, 6, 0.05)
);

}

.crypto-card p{

margin-top:10px;

font-weight:700;

color:white;

}

/* ==========================================
WEATHER
========================================== */

.weather-card{

background:
linear-gradient(
135deg,
rgba(56, 189, 248, 0.2),
rgba(14, 165, 233, 0.05)
);

text-align:center;

}

.weather-icon{

font-size:4rem;

margin:15px 0;

}

/* ==========================================
MUSIC
========================================== */

.music-card{

background:
linear-gradient(
135deg,
rgba(147, 51, 234, 0.2),
rgba(124, 58, 237, 0.05)
);

text-align:center;

}

.album-cover{

width:90px;
height:90px;

margin:auto;

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

border-radius:24px;

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

font-size:2.5rem;

}

/* ==========================================
SECURITY
========================================== */

.security-card{

background:
linear-gradient(
135deg,
rgba(34, 197, 94, 0.2),
rgba(22, 163, 74, 0.05)
);

}

.security-status{

display:flex;

align-items:center;

gap:12px;

margin-top:20px;

font-weight:700;

}

.pulse{

width:12px;
height:12px;

border-radius:50%;

background:white;

box-shadow:
0 0 20px white;

}
/* ==========================================
GALLERY SECTION
========================================== */

.gallery-section{

max-width:1400px;

margin:auto;

padding:100px 40px;

}

.section-header{

text-align:center;

margin-bottom:50px;

}

.section-header span{

display:inline-block;

padding:10px 18px;

border-radius:999px;

background:
rgba(124,92,255,.15);

color:#c8bbff;

font-weight:700;

margin-bottom:15px;

}

.section-header h2{

font-size:3rem;

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

}

.gallery-grid{

display:grid;

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

gap:24px;

}

.gallery-card{

padding:35px;

border-radius:28px;

background:
linear-gradient(
145deg,
#111827,
#18233d
);

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

text-align:center;

transition:.35s ease;

}

.gallery-card:hover{

transform:
translateY(-10px);

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

}

.gallery-card i{

font-size:3rem;

margin-bottom:20px;

color:#7c5cff;

}

.gallery-card h3{

font-size:1.3rem;

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

}

/* ==========================================
NEWSLETTER
========================================== */

.newsletter-section{

max-width:1400px;

margin:80px auto;

padding:0 40px;

}

.newsletter-card{

padding:70px;

border-radius:36px;

background:
linear-gradient(
135deg,
#7c5cff,
#9333ea,
#00c2ff
);

text-align:center;

overflow:hidden;

position:relative;

}

.newsletter-card::before{

content:"";

position:absolute;

width:300px;
height:300px;

border-radius:50%;

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

top:-120px;
right:-100px;

}

.newsletter-card h2{

font-size:3rem;

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

margin-bottom:15px;

}

.newsletter-card p{

max-width:700px;

margin:auto;

line-height:1.8;

opacity:.9;

}

.newsletter-form{

display:flex;

justify-content:center;

gap:12px;

margin-top:30px;

flex-wrap:wrap;

}

.newsletter-form input{

width:350px;

padding:16px 18px;

border:none;

outline:none;

border-radius:16px;

background:white;

}

.newsletter-form button{

padding:16px 26px;

border:none;

border-radius:16px;

background:#111827;

color:white;

font-weight:700;

cursor:pointer;

}

/* ==========================================
FOOTER
========================================== */

.footer{

margin-top:100px;

background:#050816;

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

}

.footer-container{

max-width:1400px;

margin:auto;

display:grid;

grid-template-columns:
2fr 1fr 1fr 2fr;

gap:40px;

padding:70px 40px;

}

.footer-brand h2{

font-size:2rem;

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

color:#eb6835;

margin-bottom:15px;

}

.footer-brand p{

line-height:1.8;

color:#94a3b8;

}

.footer-col h3{

margin-bottom:16px;

color:white;

}

.footer-col ul{

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

}

.footer-col a{

text-decoration:none;

color:#94a3b8;

transition:.3s ease;

}

.footer-col a:hover{

color:#7c5cff;

padding-left:5px;

}

.footer-bottom{

text-align:center;

padding:25px;

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

color:#94a3b8;

}

/* ==========================================
FLOATING BACKGROUND BLOBS
========================================== */

body::before{

content:"";

position:fixed;

width:450px;
height:450px;

border-radius:50%;

background:
rgba(124,92,255,.18);

top:-150px;
left:-100px;

filter:blur(120px);

z-index:-1;

}

body::after{

content:"";

position:fixed;

width:500px;
height:500px;

border-radius:50%;

background:
rgba(0,194,255,.12);

bottom:-200px;
right:-120px;

filter:blur(140px);

z-index:-1;

}

/* ==========================================
HOVER GLOW EFFECT
========================================== */

.bento-card:hover{

box-shadow:
0 20px 50px rgba(0,0,0,.35),
0 0 30px rgba(124,92,255,.15);

}

.gallery-card:hover{

box-shadow:
0 20px 50px rgba(0,0,0,.35),
0 0 30px rgba(0,194,255,.15);

}

/* ==========================================
ANIMATIONS
========================================== */

@keyframes float{

0%{
transform:translateY(0);
}

50%{
transform:translateY(-10px);
}

100%{
transform:translateY(0);
}

}

@keyframes pulse{

0%{
transform:scale(1);
opacity:1;
}

50%{
transform:scale(1.4);
opacity:.5;
}

100%{
transform:scale(1);
opacity:1;
}

}

.weather-icon{

animation:
float 5s ease infinite;

}

.pulse{

animation:
pulse 1.5s infinite;

}

/* ==========================================
RESPONSIVE
========================================== */

@media(max-width:1200px){

.hero-stats{

grid-template-columns:
repeat(2,1fr);

}

.footer-container{

grid-template-columns:
repeat(2,1fr);

}

}

@media(max-width:768px){

.sidebar{

transform:
translateX(-100%);

transition:.35s ease;

}

.sidebar.active{

transform:
translateX(0);

}

.navbar{

left:0;

padding:0 20px;

}

.page-content{

margin-left:0;

}

.nav-search{

display:none;

}

.hero{

padding:40px 20px;

}

.hero h1{

font-size:3rem;

}

.hero-stats{

grid-template-columns:1fr;

}

.bento-grid{

padding:20px;

}

.footer-container{

grid-template-columns:1fr;

}

.newsletter-card{

padding:40px 25px;

}

.newsletter-form{

flex-direction:column;

}

.newsletter-form input{

width:100%;

}

}

@media(max-width:500px){

.hero-buttons{

flex-direction:column;

}

.primary-btn,
.secondary-btn{

width:100%;

}

.section-header h2{

font-size:2rem;

}

.newsletter-card h2{

font-size:2rem;

}

}