html{
scroll-behavior:smooth;
}

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

body{
font-family:'Segoe UI', Arial, sans-serif;
color:white;
background:black;
text-align:center;
overflow-x:hidden;
}


/* ================= PARTICLES ================= */

#particles-js{
position:fixed;
width:100%;
height:100%;
top:0;
left:0;
z-index:-1;
pointer-events:none; /* 🔥 important fix */
}


/* ================= NAVBAR ================= */

.navbar{
position:fixed;
top:0;
width:100%;
display:flex;
justify-content:space-between;
align-items:center;
padding:12px 40px;
background:rgba(0,0,0,0.75);
backdrop-filter:blur(12px);
z-index:1000;
}

.nav-left{
display:flex;
align-items:center;
gap:12px;
}


/* LOGO FADE */

.nav-logo{
width:95px;
opacity:0;
transform:scale(.7);
animation:logoFade .8s ease forwards;
}

@keyframes logoFade{
to{
opacity:1;
transform:scale(1);
}
}


/* COMPANY NAME SLIDE */

.company-name{
font-size:22px;
white-space:nowrap;
opacity:0;
transform:translateX(-60px);
animation:slideFromLogo 1.6s ease forwards;
animation-delay:.6s;
}

@keyframes slideFromLogo{
to{
opacity:1;
transform:translateX(0);
}
}


nav{
display:flex;
gap:28px;
}

nav a{
color:white;
text-decoration:none;
font-weight:600;
letter-spacing:.5px;
transition:.3s;
}

nav a:hover{
color:#00c3ff;
}


/* ================= HERO ================= */

.hero{
height:100vh;
background:url("../images/hero/hero.jpg") center/cover no-repeat;
position:relative;
display:flex;
justify-content:center;
align-items:center;
}


/* DARK OVERLAY */

.hero::before{
content:"";
position:absolute;
width:100%;
height:100%;
background:rgba(0,0,0,0.55);
}


/* CENTER CONTENT */

.hero-content{
position:relative;
z-index:2;
width:90%;
max-width:950px;
}


/* BIG TEXT DROP */

.hero-title{
font-size:64px;
font-weight:800;
line-height:1.2;
opacity:0;
transform:translateY(-150px);
text-shadow:0 6px 25px rgba(0,0,0,0.9);
animation:textDrop 1.8s ease forwards;
}


/* SUBTITLE */

.hero-subtitle{
font-size:24px;
letter-spacing:2px;
margin-top:20px;
text-shadow:0 6px 25px rgba(0,0,0,0.9);
opacity:0;
transform:translateY(-120px);
animation:textDrop 1.8s ease forwards;
animation-delay:.5s;
}


/* DROP ANIMATION */

@keyframes textDrop{
to{
opacity:1;
transform:translateY(0);
}
}


/* ================= SECTIONS ================= */

.section{
padding:140px 20px;
position:relative;
z-index:1;
}

.section h1{
font-size:42px;
margin-bottom:30px;
letter-spacing:1px;
}


/* ================= ABOUT ================= */

.about-box{
max-width:900px;
margin:auto;
line-height:1.9;
background:rgba(255,255,255,0.05);
padding:55px;
border-radius:16px;
font-size:18px;
backdrop-filter:blur(6px);
}

.founder-name{
text-align:left;
margin-top:30px;
}

.about-box span{
opacity:.8;
}


/* ================= SERVICES ================= */

.services-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
gap:32px;
padding:50px;
max-width:1150px;
margin:auto;
}

.service-box{
display:flex;
justify-content:center;
align-items:center;
text-decoration:none;
color:white;

padding:32px;
border-radius:16px;
font-weight:600;
font-size:18px;

background:linear-gradient(145deg,#0f172a,#1e293b);
box-shadow:0 10px 30px rgba(0,0,0,0.45);
transition:.35s;
cursor:pointer;
}

.service-box:hover{
transform:translateY(-12px);
background:linear-gradient(145deg,#1e293b,#334155);
box-shadow:0 15px 35px rgba(0,0,0,0.6);
}


/* ================= PROJECT GALLERY ================= */

#gallery{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(270px,1fr));
gap:28px;
padding:50px;
max-width:1350px;
margin:auto;
}

#gallery img{
width:100%;
border-radius:14px;
cursor:pointer;
transition:.4s;
}

#gallery img:hover{
transform:scale(1.06);
}


/* ================= FULLSCREEN VIEWER ================= */

#fullscreenViewer{
display:none;
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background:rgba(0,0,0,0.96);
justify-content:center;
align-items:center;
z-index:5000;
}

#fullImage{
max-width:92%;
max-height:92%;
border-radius:12px;
animation:zoom .35s ease;
}

@keyframes zoom{
from{transform:scale(.75);}
to{transform:scale(1);}
}

#closeViewer{
position:absolute;
top:35px;
right:50px;
font-size:48px;
color:white;
cursor:pointer;
}


/* ================= CONTACT ================= */

.contact-box{
margin:auto;
max-width:520px;
padding:50px;
border-radius:16px;
background:rgba(255,255,255,0.05);
font-size:18px;
backdrop-filter:blur(6px);
}

.contact-box a{
color:#00c3ff;
text-decoration:none;
}


/* ================= FLOAT BUTTONS ================= */

.floating-buttons{
position:fixed;
right:25px;
bottom:25px;
display:flex;
flex-direction:column;
gap:16px;
z-index:2000;
}

.float-btn{
padding:15px 22px;
border-radius:32px;
color:white;
text-decoration:none;
font-weight:bold;
box-shadow:0 8px 25px rgba(0,0,0,0.5);
transition:.3s;
}

.float-btn:hover{
transform:scale(1.1);
}

.whatsapp{ background:#25D366; }
.call{ background:#007BFF; }



/* ================= MOBILE ================= */

@media (max-width:768px){

.navbar{
padding:10px 18px;
}

.nav-logo{
width:70px;
}

.company-name{
font-size:16px;
}

nav{
gap:14px;
font-size:14px;
}

/* MOBILE HERO */

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

.hero-subtitle{
font-size:18px;
}

.section{
padding:100px 20px;
}

.about-box{
padding:30px;
font-size:16px;
}

.services-grid{
padding:25px;
}

#gallery{
padding:25px;
}

.contact-box{
padding:30px;
}

}