@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;700;900&display=swap');


*{

margin:0;
padding:0;
box-sizing:border-box;

}


html{

scroll-behavior:smooth;

}


body{

font-family:Inter;

background:#050816;

color:white;

overflow-x:hidden;

}




.background{

position:fixed;

width:100%;
height:100%;

background:

radial-gradient(circle at 70% 20%,#6241bb55,transparent 30%),

radial-gradient(circle at 20% 80%,#7c5cff33,transparent 30%);

z-index:-1;

}






header{

display:flex;

justify-content:space-between;

padding:35px 8%;

}



.logo{

font-size:30px;

font-weight:900;

}


.logo span{

color:#7c5cff;

}



nav a{

color:#aaa;

margin-left:35px;

text-decoration:none;

transition:.3s;

}


nav a:hover{

color:#fff;

}





.hero{

min-height:90vh;

display:flex;

align-items:center;

padding:50px 8%;

}




.hero-text{

width:55%;

}



.tag{

color:#7c5cff;

font-weight:700;

letter-spacing:3px;

}



h1{

font-size:70px;

line-height:1.05;

}



h1 span{

color:#8d6bff;

}





.description{

margin:30px 0;

font-size:22px;

color:#aaa;

max-width:600px;

}





.buttons{

display:flex;

gap:20px;

}



.primary,
.secondary{

cursor:pointer;

transition:.3s;

display:inline-block;

text-decoration:none;

}



.primary{

background:#7c5cff;

padding:16px 35px;

border-radius:15px;

color:white;

}


.primary:hover{

background:#6a4ce6;

transform:translateY(-3px);

}



.secondary{

border:1px solid #333;

padding:16px 35px;

border-radius:15px;

color:white;

}


.secondary:hover{

border-color:#7c5cff;

color:#7c5cff;

}




.stats{

display:flex;

gap:50px;

margin-top:60px;

}



.stats h2{

font-size:35px;

}



.stats p{

color:#777;

}





.character{

width:45%;

height:600px;

position:relative;

}





model-viewer{

width:100%;
height:100%;

}



.glow{

position:absolute;

top:50%;

left:50%;

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

width:300px;

height:300px;

background:#7c5cff;

filter:blur(120px);

z-index:-1;

}





section{

padding:100px 8%;

}




h2{

font-size:45px;

margin-bottom:50px;

}





.video-card{

background:#111827;

border-radius:30px;

overflow:hidden;

}



.video-card video{

width:100%;

height:500px;

object-fit:cover;

}





.video-card div{

padding:35px;

}





.map-gallery{

display:grid;

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

gap:20px;

margin-top:25px;

}


.map-photo{

border-radius:20px;

overflow:hidden;

border:1px solid #ffffff10;

transition:.4s;

}


.map-photo img{

width:100%;

height:200px;

object-fit:cover;

display:block;

}


.map-photo:hover{

transform:translateY(-8px);

border-color:#7c5cff;

}





.grid{

display:grid;

grid-template-columns:repeat(auto-fit,minmax(250px,1fr));

gap:25px;

}




.project,
.service{

background:#111827aa;

backdrop-filter:blur(20px);

padding:35px;

border-radius:25px;

border:1px solid #ffffff10;

transition:.4s;

}



.project:hover,
.service:hover{

transform:translateY(-10px);

border-color:#7c5cff;

}




.contact{

text-align:center;

min-height:400px;

}



@media(max-width:900px){


.hero{

flex-direction:column;

}



.hero-text,
.character{

width:100%;

}


.character{

height:350px;

margin-top:40px;

}


h1{

font-size:45px;

}


.stats{

flex-wrap:wrap;

gap:30px;

}


header{

padding:25px 6%;

}


nav a{

margin-left:20px;

font-size:14px;

}


.video-card video{

height:280px;

}


.map-gallery{

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

}


}



@media(max-width:500px){


h1{

font-size:34px;

}


.description{

font-size:18px;

}


nav a{

margin-left:12px;

font-size:13px;

}


.map-gallery{

grid-template-columns:1fr;

}


}

.project-slider{

position:relative;

display:flex;

align-items:center;

gap:20px;

}


.slider-track{

flex:1;

overflow:hidden;

}


.slide{

display:none;

}


.slide.active{

display:block;

}


.arrow{

background:#111827aa;

backdrop-filter:blur(20px);

border:1px solid #ffffff10;

color:white;

width:50px;

height:50px;

min-width:50px;

border-radius:50%;

font-size:18px;

cursor:pointer;

transition:.3s;

display:flex;

align-items:center;

justify-content:center;

}


.arrow:hover{

border-color:#7c5cff;

background:#7c5cff33;

}


.slider-dots{

display:flex;

justify-content:center;

gap:12px;

margin-top:30px;

}


.dot{

width:10px;

height:10px;

border-radius:50%;

background:#333;

cursor:pointer;

transition:.3s;

}


.dot.active{

background:#7c5cff;

width:28px;

border-radius:6px;

}



@media(max-width:700px){


.project-slider{

gap:10px;

}


.arrow{

width:40px;

height:40px;

min-width:40px;

font-size:14px;

}


}

.icon-badge{

width:60px;

height:60px;

display:flex;

align-items:center;

justify-content:center;

font-size:28px;

background:#7c5cff22;

border:1px solid #7c5cff44;

border-radius:16px;

margin-bottom:20px;

transition:.4s;

}


.project:hover .icon-badge,
.service:hover .icon-badge{

background:#7c5cff44;

border-color:#7c5cff;

transform:scale(1.05);

}


.project h3,
.service h3{

font-size:22px;

margin-bottom:14px;

line-height:1.3;

}


.project p,
.service p{

color:#999;

font-size:15px;

line-height:1.6;

}