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

html{
scroll-behavior:smooth;
}

body{
font-family:Poppins,sans-serif;
background:#0a0a13;
color:white;
overflow-x:hidden;
}



/* PARTICLES BACKGROUND */

#particles{
position:fixed;
top:0;
left:0;
width:100vw;
height:100vh;
z-index:-2;
pointer-events:none;
}



/* NAVBAR */

.navbar{

position:fixed;

top:0;

width:100%;

background:transparent;

padding:20px 40px;

z-index:1000;

transition:transform .3s ease;

backdrop-filter:blur(2px);

}

.navbar-hidden{

transform:translateY(-120%);

}

.nav-container{
display:flex;
justify-content:space-between;
align-items:center;
max-width:1500px;
margin:auto;
}

.logo img{
height:150px;
transition:.3s;
}

.logo img:hover{
transform:scale(1.08);
}

.nav-links{
display:flex;
gap:30px;
list-style:none;
}

.nav-links a{
color:white;
text-decoration:none;
transition:.3s;
}

.nav-links a:hover{
color:#00aaff;
}



/* GRADIENT HIRE ME BUTTON */

.nav-cta{

padding:10px 22px;

border-radius:10px;

background:linear-gradient(45deg,#7a4cff,#00aaff);

color:white;

font-weight:600;

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

box-shadow:0 0 8px rgba(122,76,255,.6);

}

.nav-cta:hover{

transform:translateY(-6px) scale(1.08);

box-shadow:
0 0 12px rgba(122,76,255,.9),
0 0 25px rgba(0,170,255,.8);

}



/* GENERAL LAYOUT */

.container{
width:95%;
max-width:1500px;
margin:auto;
}

section{
padding:80px 0;
}

#services{
padding-top:0px;
}



/* SECTION TITLES */

.section-title{

text-align:center;

font-size:36px;

margin-bottom:60px;

color:#ffd6ec;

text-shadow:0 0 6px rgba(255,122,200,0.25);

}

.section-title::after{

content:"";

display:block;

width:120px;
height:3px;

margin:14px auto;

background:linear-gradient(90deg,#7a4cff,#00aaff,#7a4cff);

background-size:200%;

animation:dividerGlow 6s linear infinite;

}

@keyframes dividerGlow{
0%{background-position:0%;}
100%{background-position:200%;}
}



/* HERO SECTION */

.hero{

min-height:70vh;

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

text-align:center;

padding-top:80px;
padding-bottom:0px;

overflow:visible;

}

.hero-title{

font-family:'Great Vibes', cursive;

font-size:120px;

letter-spacing:1px;

line-height:1.4;

padding:0 80px;

display:inline-block;

background:linear-gradient(
90deg,
#7a4cff,
#00aaff,
#b16cff
);

background-size:300%;

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

animation:gradientFlow 8s ease infinite;

overflow:visible;

transition:transform .25s ease, text-shadow .25s ease;

}

.hero-title:hover{

transform:translateY(-3px) scale(1.02);

text-shadow:0 0 6px rgba(255,122,200,0.25);

}

@keyframes gradientFlow{
0%{background-position:0%;}
50%{background-position:100%;}
100%{background-position:0%;}
}



/* TAGLINE */

.tagline{

font-size:18px;

margin-top:20px;

color:#d6d6ff;

max-width:600px;

margin-left:auto;
margin-right:auto;

}



/* SCROLL INDICATOR */

.scroll-indicator{

margin-top:40px;

display:flex;
flex-direction:column;
align-items:center;

font-size:14px;

color:#ccccff;

opacity:0.8;

transition:opacity 0.5s ease;

}

.scroll-indicator.hide{
opacity:0;
}

.scroll-arrow{

width:20px;
height:20px;

border-right:2px solid #7a4cff;
border-bottom:2px solid #7a4cff;

transform:rotate(45deg);

margin-top:10px;

animation:scrollBounce 2s infinite;

}

@keyframes scrollBounce{

0%{transform:rotate(45deg) translateY(0);}
50%{transform:rotate(45deg) translateY(8px);}
100%{transform:rotate(45deg) translateY(0);}

}



/* GRID LAYOUT */

.grid{

display:grid;

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

gap:30px;

}

@media (max-width:900px){

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

}

@media (max-width:600px){

.grid{
grid-template-columns:1fr;
}

}



/* SERVICE CARDS */

.card{

padding:18px 22px;

border-radius:14px;

background:rgba(255,255,255,0.05);

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

position:relative;

display:flex;

flex-direction:column;

height:100%;

}

.card:hover{
transform:translateY(-10px);
}



/* GLOW BORDER */

.card::before{

content:"";

position:absolute;

inset:-2px;

background:linear-gradient(45deg,#7a4cff,#00aaff,#7a4cff);

background-size:400%;

border-radius:16px;

z-index:-1;

animation:borderGlow 6s linear infinite;

}

@keyframes borderGlow{

0%{background-position:0%;}
100%{background-position:400%;}

}



/* SERVICE ICONS */

.service-icon{

font-size:42px;

margin-bottom:18px;

background:linear-gradient(45deg,#7a4cff,#00aaff);

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

}



/* PRICE */

.price-tag{

margin-top:auto;

padding-top:12px;

font-weight:700;

font-size:19px;

color:#ff7ac8;

}


/* PORTFOLIO */

.portfolio-item{

position:relative;

overflow:hidden;

}

.portfolio-item img{

width:100%;

height:200px;

object-fit:cover;

}

.portfolio-overlay{

position:absolute;

bottom:0;
left:0;

width:100%;

padding:20px;

background:linear-gradient(transparent,black);

opacity:0;

transition:.3s;

}

.portfolio-item:hover img{
transform:scale(1.1);
}

.portfolio-item:hover .portfolio-overlay{
opacity:1;
}



/* FORM */

form{

max-width:500px;

margin:auto;

display:flex;

flex-direction:column;

gap:15px;

padding:30px;

border-radius:14px;

background:rgba(255,255,255,0.05);

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

}

form:focus-within{

transform:translateY(-8px);

box-shadow:
0 15px 35px rgba(0,0,0,0.4),
0 0 20px rgba(255,122,200,0.4);

}

input, textarea{

padding:14px;

border-radius:8px;

border:none;

background:#1c1c2e;

color:white;

transition:transform .2s ease, box-shadow .2s ease, border .2s ease;

}



/* HOVER EFFECT */

input:hover,
textarea:hover{

transform:translateY(-2px);

box-shadow:0 0 10px rgba(255,122,200,0.3);

}



/* WHEN CLICKED / ACTIVE */

input:focus,
textarea:focus{

outline:none;

transform:translateY(-3px);

box-shadow:
0 0 10px rgba(255,122,200,0.5),
0 0 20px rgba(177,108,255,0.4);

}

button{

background:linear-gradient(45deg,#7a4cff,#00aaff);

padding:14px;

border:none;

border-radius:8px;

color:white;

cursor:pointer;

}



/* CURSOR GLOW */

.cursor-glow{

position:fixed;

width:300px;
height:300px;

background:radial-gradient(circle,rgba(122,76,255,.25),transparent 70%);

pointer-events:none;

border-radius:50%;

transform:translate(-50%,-50%);

z-index:0;

}

.paypal-button{

display:block;

width:fit-content;

margin:25px auto 0 auto;

padding:14px 28px;

border-radius:10px;

background:linear-gradient(45deg,#ff7ac8,#b16cff);

color:white;

text-decoration:none;

font-weight:600;

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

box-shadow:
0 0 10px rgba(255,122,200,0.4),
0 0 18px rgba(177,108,255,0.3);

text-align:center;

}

.paypal-button:hover{

transform:translateY(-4px) scale(1.05);

box-shadow:
0 0 15px rgba(0,162,255,0.7),
0 0 25px rgba(0,112,186,0.6);

}

.paypal-note{

text-align:center;

margin-top:8px;

font-size:13px;

color:#ffd6ec;

opacity:0.8;

letter-spacing:0.5px;

}

/* MOBILE RESPONSIVE */

@media (max-width:900px){

.hero-title{
font-size:80px;
}

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

}

@media (max-width:600px){

/* HERO FIX FOR NAVBAR */

.hero{
padding-top:160px;
}

/* HERO TITLE SIZE */

.hero-title{
font-size:70px;
}

/* TAGLINE */

.tagline{
font-size:16px;
padding:0 20px;
}

/* NAVIGATION STACK */

.nav-container{
flex-direction:column;
gap:15px;
}

.nav-links{
flex-wrap:wrap;
justify-content:center;
}

/* CARDS STACK */

.grid{
grid-template-columns:1fr;
}

/* FORM WIDTH */

form{
width:90%;
}

/* SECTION SPACING */

section{
padding:60px 20px;
}

}