/* BODY */
*{
margin:0;
padding:0;
box-sizing:border-box;
font-family:'Poppins',sans-serif;
}
body{
background:#0f172a;
color:white;
scroll-behavior:smooth;
}
/* NAV */
nav{
display:flex;
justify-content:space-between;
align-items:center;
padding:20px 8%;
position:fixed;
width:100%;
top:0;
background:rgba(15,23,42,0.8);
backdrop-filter:blur(10px);
z-index:1000;
}
nav h2{
color:#22c55e;
font-size:16px;
}
nav a{
margin:0 10px;
text-decoration:none;
color:white;
font-size:14px;
}
nav a:hover{
color:#22c55e;
}
/* CONTACT ICONS */
.contact-icons{
display:flex;
justify-content:center;
gap:30px;
margin-top:20px;
}
.contact-icons a{
font-size:28px;
color:white;
transition:0.3s;
}
.contact-icons a:hover{
color:#22c55e;
transform:scale(1.3);
}
/* HERO */
.hero{
height:100vh;
display:flex;
flex-direction:column;
justify-content:center;
align-items:center;
text-align:center;
padding:20px;
}
.hero img{
width:140px;
border-radius:50%;
border:4px solid #22c55e;
margin-bottom:20px;
}
.hero h1{
font-size:36px;
}
.hero span{
color:#22c55e;
}
.hero p{
opacity:0.8;
margin-top:10px;
}
/* SECTION */
.section{
padding:80px 8%;
}
/* TITLE */
.title{
text-align:center;
font-size:26px;
margin-bottom:30px;
}
.grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
gap:20px;
}
.card{
background:#1e293b;
padding:20px;
border-radius:12px;
transition:0.3s;
}
.card:hover{
transform:translateY(-5px);
}
.card h3{
color:#22c55e;
margin-bottom:10px;
font-size:16px;
}
.card p{
font-size:14px;
line-height:1.6;
margin:10px 0 15px;
color:#cbd5e1;
}
/* DOWNLOAD BUTTON */
.btn.download{
background-color:#22c55e;
color:white;
position:relative;
overflow:hidden;
}
.btn.download:hover{
transform:translateY(-2px) scale(1.05);
}
/* Glow animation */
.btn.download::after{
content:"";
position:absolute;
top:0;
left:-100%;
width:100%;
height:100%;
background:rgba(255,255,255,0.2);
transition:0.5s;
}
.btn.download:hover::after{
left:100%;
}
/* HERO DOWNLOAD BUTTON FIX */
.hero .btn.download{
margin-top:15px;
display:inline-block;
}
.hero{
gap:10px;   
}
/* PROJECT BUTTONS */
.btn-group{
display:flex;
gap:15px;
margin-top:15px;
flex-wrap:wrap;
}
.btn{
padding:10px 18px;
border-radius:8px;
text-decoration:none;
font-size:14px;
font-weight:500;
transition:0.3s;
display:inline-block;
min-width:140px;
text-align:center;
}
/* Live */
.btn.live{
background:#22c55e;
color:white;
}
.btn.live:hover{
background:#16a34a;
transform:translateY(-2px);
}
/* Code */
.btn.code{
background:#3b82f6;
color:white;
}
.btn.code:hover{
background:#2563eb;
transform:translateY(-2px);
}
/* LINKS */
.grid a{
color:#22c55e;
text-decoration:none;
font-size:14px;
}
/* FOOTER */
.footer-container{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
gap:30px;
padding:50px 8%;
background:linear-gradient(135deg,#020617,#0f172a);
border-top:1px solid rgba(255,255,255,0.05);
}
.footer-section h3,
.footer-section h4{
color:#22c55e;
margin-bottom:12px;
font-weight:600;
}
.footer-section p{
font-size:14px;
margin:6px 0;
opacity:0.75;
line-height:1.6;
}
.footer-section a{
color:#cbd5f5;
text-decoration:none;
transition:0.3s;
}
.footer-section a:hover{
color:#22c55e;
padding-left:5px;
}
.footer-icons{
display:flex;
gap:15px;
margin-top:10px;
}
.footer-icons a{
width:40px;
height:40px;
display:flex;
justify-content:center;
align-items:center;
border-radius:50%;
background:#1e293b;
color:white;
transition:0.3s;
}
.footer-icons a:hover{
background:#22c55e;
color:#020617;
transform:translateY(-3px) scale(1.1);
}
footer hr{
border:none;
height:1px;
background:rgba(255,255,255,0.08);
margin:0 8%;
}
.footer-bottom{
text-align:center;
padding:15px;
font-size:13px;
color:#94a3b8;
background:#020617;
}
/* RESPONSIVE */
@media(max-width:768px)
{
.hero h1{
font-size:26px;
}
nav{
flex-direction:column;
gap:10px;
}
.footer-container{
text-align:center;
}
.footer-icons{
justify-content:center;
}
}