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

body{
background:#050b2f;
color:white;
min-height:100vh;
overflow-x:hidden;
}

body::before{
content:"";
position:fixed;
top:0;
left:0;
width:100%;
height:100%;

background:
radial-gradient(circle at 20% 30%, rgba(0,255,200,.15), transparent 30%),
radial-gradient(circle at 80% 20%, rgba(120,80,255,.18), transparent 35%),
radial-gradient(circle at 60% 80%, rgba(0,180,255,.15), transparent 30%);

z-index:-2;
}

.dashboard-container{
padding:180px 8% 80px;
text-align:center;
}

.dashboard-container h1{
font-size:48px;
margin-bottom:10px;
}

.subtitle{
opacity:.8;
margin-bottom:50px;
}

.dashboard-grid{
display:grid;
grid-template-columns:
repeat(auto-fit,minmax(220px,1fr));

gap:25px;
}

.dashboard-card{

padding:35px 20px;

border-radius:25px;

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

backdrop-filter:blur(20px);

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

transition:.3s;

cursor:pointer;
}

.dashboard-card:hover{

transform:translateY(-8px);

box-shadow:
0 0 30px rgba(75,107,255,.4);

}

.dashboard-card h3{
margin-top:15px;
}

@media(max-width:768px){

.dashboard-container h1{
font-size:34px;
}

}
.dashboard-navbar{

position:fixed;

top:15px;
left:50%;

transform:translateX(-50%);

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

display:flex;
justify-content:center;
gap:12px;
flex-wrap:wrap;

padding:15px;

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

backdrop-filter:blur(20px);

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

border-radius:20px;

z-index:9999;

transition:.4s;
}

.dashboard-navbar a{

text-decoration:none;

color:white;

padding:10px 18px;

border-radius:12px;

transition:.25s;

font-weight:500;
}
.home-btn{

background:
linear-gradient(
135deg,
rgba(0,255,200,.25),
rgba(75,107,255,.25)
);

padding:12px 28px !important;

border-radius:999px !important;

font-weight:700 !important;

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

box-shadow:
0 0 20px rgba(0,255,200,.2);

}

.dashboard-navbar a:hover{

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

box-shadow:
0 0 20px rgba(75,107,255,.4);

transform:translateY(-2px);
}

.dashboard-navbar a:active{

transform:scale(.94);

box-shadow:
0 0 25px rgba(139,92,246,.6);
}

.feature-section{

padding:80px 8%;

text-align:center;
}

.feature-section h2{

font-size:38px;

margin-bottom:30px;
}

.feature-card{

max-width:900px;

margin:auto;

padding:35px;

border-radius:25px;

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

backdrop-filter:blur(20px);

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

.city-name{

opacity:.8;

margin-bottom:30px;
}

.prayer-grid{

display:grid;

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

gap:20px;
}

.prayer-grid div{

padding:20px;

border-radius:18px;

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

.prayer-grid span{

display:block;

margin-bottom:10px;

opacity:.8;
}

.prayer-grid h3{

font-size:24px;
}

#weather-icon{

font-size:70px;

margin-bottom:15px;

animation:weatherFloat 3s ease-in-out infinite;
}

#weather-temp{

font-size:48px;

margin-bottom:10px;
}

#weather-desc{

font-size:18px;

opacity:.9;

margin-bottom:10px;
}

#weather-location{

opacity:.7;
}

@keyframes weatherFloat{

0%,100%{
transform:translateY(0);
}

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

}

.dashboard-menu{
display:flex;
gap:12px;
list-style:none;
}

.dashboard-menu a{
text-decoration:none;
color:white;
padding:10px 18px;
border-radius:12px;
transition:.25s;
}

.menu-toggle{
display:none;

background:none;
border:none;

color:white;

font-size:30px;

cursor:pointer;
}

@media(max-width:768px){

.dashboard-menu{
display:none;
}

.menu-toggle{
display:block;
}

.dashboard-menu.active{

display:flex;

flex-direction:column;

position:absolute;

top:85px;
left:20px;
right:20px;

padding:20px;

background:rgba(20,20,60,.95);

backdrop-filter:blur(20px);

border-radius:20px;

z-index:9999;h

gap:15px;
}

.dashboard-menu li{
list-style:none;
}

.dashboard-menu a{
display:block;
padding:12px;
text-align:left;
}

}