body{

background:#050816;

}

.background{

position:fixed;

width:100%;

height:100%;

background:

radial-gradient(circle at top left,#06b6d444,transparent 40%),

radial-gradient(circle at bottom right,#9333ea55,transparent 40%),

#050816;

z-index:-2;

}

::-webkit-scrollbar{

width:8px;

}

::-webkit-scrollbar-thumb{

background:#06b6d4;

border-radius:10px;

}

/* Glass Card */

.glass{

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

backdrop-filter:blur(20px);

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

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

transition:.4s;

}

.glass:hover{

transform:translateY(-8px);

}

/* Stat Card */

.stat-card{

padding:25px;

border-radius:18px;

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

text-align:center;

transition:.4s;

}

.stat-card:hover{

background:#06b6d4;

transform:scale(1.05);

}

.stat-card h4{

font-size:34px;

font-weight:bold;

}

.stat-card p{

margin-top:8px;

}

/* Skills */

.skill-bg{

height:10px;

background:#1e293b;

border-radius:20px;

overflow:hidden;

}

.skill-fill{

height:100%;

background:linear-gradient(90deg,#06b6d4,#8b5cf6);

border-radius:20px;

animation:grow 2s ease;

}

@keyframes grow{

from{

width:0;

}

}

/* SERVICES */

.service-card{

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

backdrop-filter:blur(15px);

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

padding:35px;

border-radius:24px;

transition:.4s;

text-align:center;

}

.service-card:hover{

transform:translateY(-10px);

box-shadow:0 0 30px rgba(6,182,212,.4);

}

.service-icon{

font-size:55px;

margin-bottom:20px;

}

.service-card h3{

font-size:24px;

font-weight:700;

margin-bottom:15px;

}

/* PROJECTS */

.project-card{

overflow:hidden;

border-radius:24px;

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

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

transition:.4s;

}

.project-card:hover{

transform:translateY(-10px);

}

.project-image{

height:220px;

width:100%;

object-fit:cover;

transition:.5s;

}

.project-card:hover .project-image{

transform:scale(1.1);

}

.tags{

display:flex;

gap:10px;

flex-wrap:wrap;

margin-top:20px;

}

.tags span{

padding:6px 12px;

background:#06b6d4;

border-radius:30px;

font-size:13px;

}

.project-btn{

padding:10px 18px;

border:1px solid #06b6d4;

border-radius:999px;

transition:.3s;

}

.project-btn:hover{

background:#06b6d4;

}


/* WHY HIRE */

.hire-card{

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

padding:35px;

border-radius:24px;

text-align:center;

transition:.4s;

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

}

.hire-card:hover{

transform:translateY(-10px);

box-shadow:0 0 30px rgba(6,182,212,.4);

}

/* COUNTER */

.counter-card{

text-align:center;

padding:40px;

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

border-radius:20px;

}

.counter{

font-size:52px;

font-weight:bold;

color:#06b6d4;

}

/* TESTIMONIAL */

.testimonial-card{

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

padding:40px;

border-radius:24px;

transition:.4s;

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

}

.testimonial-card:hover{

transform:translateY(-10px);

}


/* INPUT */

.input-field{

width:100%;

padding:16px;

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

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

border-radius:15px;

outline:none;

color:white;

}

.input-field:focus{

border-color:#06b6d4;

}

/* BUTTON */

.submit-btn{

background:#06b6d4;

padding:15px 35px;

border-radius:999px;

font-weight:bold;

transition:.3s;

}

.submit-btn:hover{

transform:scale(1.05);

}

/* TOP BUTTON */

#topBtn{

position:fixed;

bottom:30px;

right:30px;

width:55px;

height:55px;

border-radius:50%;

background:#06b6d4;

color:white;

display:none;

cursor:pointer;

font-size:20px;

}

/* LIGHT MODE */

.light{

background:white;

color:#111827;

}