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

html{
scroll-behavior:smooth;
}

body{

background:
linear-gradient(
180deg,
#04040d,
#070714,
#04040d
);

color:white;
overflow-x:hidden;

}

/* GLOW */

body::before{

content:"";

position:fixed;

width:800px;
height:800px;

background:
radial-gradient(
circle,
rgba(139,46,255,.22),
transparent
);

right:-250px;
top:-250px;

filter:blur(100px);

z-index:-1;

}

/* NAV */

nav{

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

padding:25px 8%;

position:sticky;

top:0;

z-index:999;

backdrop-filter:blur(20px);

background:
rgba(
5,
5,
10,
.7
);

}

.logo img{

width:180px;

}

nav ul{

display:flex;
gap:40px;
list-style:none;

}

nav ul li a{

text-decoration:none;
color:white;

transition:.3s;

}

nav ul li a:hover{

color:#8B2EFF;

}

/* BUTTONS */

button{

background:#8B2EFF;

border:none;

padding:14px 30px;

border-radius:14px;

color:white;

cursor:pointer;

transition:.3s;

}

button:hover{

transform:
translateY(-3px);

}

.secondary{

background:transparent;

border:
1px solid white;

}

/* HERO */

.hero{

display:flex;

justify-content:space-between;

align-items:center;

padding:120px 8%;

min-height:90vh;

gap:80px;

}

.hero-left{

max-width:650px;

}

.hero h1{

font-size:85px;

line-height:1.05;

}

.hero span{

color:#8B2EFF;

}

.hero p{

font-size:24px;

margin-top:25px;

opacity:.8;

}

.buttons{

display:flex;

gap:20px;

margin-top:40px;

}

.hero-icons{

display:flex;

gap:40px;

margin-top:50px;

}

.hero-right img{

width:700px;

max-width:100%;

filter:
drop-shadow(
0 0 60px
rgba(
139,
46,
255,
.5
));

}

/* GENERAL */

section{

padding:140px 8%;

scroll-margin-top:120px;

}

/* ABOUT */

.about{

display:grid;

grid-template-columns:

250px 1fr 1fr;

gap:60px;

align-items:center;

}

.about-avatar img{

width:220px;

border-radius:50%;

}

/* SERVICES */

.service-grid{

display:grid;

grid-template-columns:

repeat(
4,
1fr
);

gap:30px;

}

/* PRICING */

.pricing-grid{

display:grid;

grid-template-columns:

repeat(
3,
1fr
);

gap:30px;

}

/* PROJECTS */

.project-grid{

display:grid;

grid-template-columns:

repeat(
auto-fit,
minmax(
420px,
1fr
)
);

gap:30px;

align-items:stretch;

}

.project{

background:

rgba(
255,
255,
255,
.03
);

border:

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

border-radius:25px;

overflow:hidden;

display:flex;

flex-direction:column;

height:100%;

}

.project img{

width:100%;

height:250px;

object-fit:cover;

}

.project-info{

padding:30px;

display:flex;

flex-direction:column;

flex:1;

}

.project-info p{

margin:20px 0;

opacity:.8;

flex:1;

}

.project-info button{

margin-top:auto;

}

/* CARDS */

.card,
.price-card{

background:

rgba(
255,
255,
255,
.03
);

padding:40px;

border-radius:25px;

backdrop-filter:

blur(15px);

border:

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

}

.featured{

border:
2px solid #8B2EFF;

}

/* CONTACT */

.contact{

padding:150px 8%;

text-align:center;

}

.contact form{

display:flex;

flex-direction:column;

gap:20px;

max-width:700px;

margin:50px auto;

}

.contact input,
.contact textarea{

padding:20px;

background:

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

border:

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

border-radius:15px;

color:white;

}

.contact textarea{

height:180px;

resize:none;

}

.contact-links{

display:flex;

justify-content:center;

gap:40px;

margin-top:40px;

}

/* FOOTER */

footer{

padding:80px;

text-align:center;

border-top:

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

}

/* PARTICLES */

#particles{

position:fixed;

top:0;
left:0;

width:100%;
height:100%;

pointer-events:none;

z-index:-5;

}

.particle{

position:absolute;

width:3px;
height:3px;

border-radius:50%;

background:

rgba(
255,
255,
255,
.6
);

animation:

floatParticle linear infinite;

}

@keyframes floatParticle{

from{

transform:
translateY(
110vh
);

opacity:0;

}

20%{

opacity:1;

}

to{

transform:
translateY(
-10vh
);

opacity:0;

}

}

/* SCROLL */

.fade-up{

opacity:0;

transform:

translateY(
60px
);

transition:1s;

}

.fade-up.show{

opacity:1;

transform:

translateY(
0
);

}

/* CURSOR */

.cursor{

position:fixed;

width:20px;
height:20px;

border-radius:50%;

background:

rgba(
139,
46,
255,
.8
);

pointer-events:none;

transform:

translate(
-50%,
-50%
);

filter:

blur(
6px
);

z-index:9999;

}

/* LOADER */

.loader{

position:fixed;

top:0;
left:0;

width:100%;
height:100%;

display:flex;

justify-content:center;

align-items:center;

background:#050510;

z-index:99999;

transition:1s;

}

.loader h1{

font-size:70px;

color:#8B2EFF;

text-shadow:

0 0 40px rgba(
139,
46,
255,
.8
);

}

.loader.hide{

opacity:0;

pointer-events:none;

}

/* MOBILE */

@media(max-width:1100px){

.hero{

flex-direction:column;

text-align:center;

}

.hero h1{

font-size:60px;

}

.about{

grid-template-columns:1fr;

text-align:center;

}

.service-grid{

grid-template-columns:

1fr 1fr;

}

.pricing-grid{

grid-template-columns:1fr;

}

.project-grid{

grid-template-columns:1fr;

}

}

@media(max-width:800px){

nav ul{

display:none;

}

.hero h1{

font-size:45px;

}

.hero p{

font-size:20px;

}

.buttons{

flex-direction:column;

}

.hero-icons{

flex-direction:column;

}

.service-grid{

grid-template-columns:1fr;

}

}