/*
Theme Name: PixelGrow Blogs Mobile UI
Version: 3.0
*/
:root{
 --bg:#07011b;
 --header:#7a007a;
 --footer:#890089;
 --yellow:#ffd500;
 --text:#fff;
}
body{
 margin:0;
 font-family:Arial,sans-serif;
 background:radial-gradient(circle at top,#1a083d,var(--bg));
 color:white;
}
header.mobile-header{
 position:fixed;
 top:0;left:0;width:100%;
 background:linear-gradient(90deg,#8b0b8b,#520052);
 padding:15px;
 z-index:999;
 display:flex;
 justify-content:space-between;
 align-items:center;
 border-bottom:1px solid rgba(255,255,255,.08);
}
.logo-box{
 display:flex;
 align-items:center;
 gap:10px;
}
.logo-icon{
 width:42px;height:42px;
 border-radius:12px;
 background:linear-gradient(90deg,#ff9d00,#ff4f88);
 display:flex;align-items:center;justify-content:center;
 font-weight:bold;
}
.phone-btn{
 background:rgba(255,255,255,.12);
 padding:10px 16px;
 border-radius:30px;
}
.hero{
 padding:120px 20px 120px;
 text-align:center;
}
.hero-badge{
 display:inline-block;
 padding:12px 22px;
 border:1px solid #7045d9;
 border-radius:40px;
}
.hero h1{
 font-size:42px;
 line-height:1.2;
 background:linear-gradient(90deg,#8b4dff,#ff6eb7);
 -webkit-background-clip:text;
 -webkit-text-fill-color:transparent;
}
.blog-list{
 padding:20px;
}
.blog-card{
 background:rgba(255,255,255,.05);
 padding:20px;
 border-radius:20px;
 margin-bottom:20px;
}
.mobile-footer{
 position:fixed;
 bottom:0;left:0;width:100%;
 background:linear-gradient(90deg,#890089,#530053);
 border-radius:25px 25px 0 0;
 padding:12px 10px;
 display:flex;
 justify-content:space-around;
 align-items:center;
 z-index:999;
}
.mobile-footer a{
 text-decoration:none;
 color:white;
 text-align:center;
 font-size:13px;
}
.call-btn{
 width:65px;height:65px;
 border-radius:50%;
 background:var(--yellow);
 color:#000;
 display:flex;
 justify-content:center;
 align-items:center;
 font-size:28px;
 margin-top:-35px;
 font-weight:bold;
}