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

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

/* Navbar */

.navbar{

position:fixed;
top:0;
width:100%;

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

padding:15px 50px;

background:rgba(0,0,0,.3);

backdrop-filter:blur(20px);

z-index:1000;
}

.logo-area{
display:flex;
align-items:center;
gap:15px;
}

.logo{
height:140px;
width:auto;
}

.logo-area h2{
font-family:Orbitron;
}

.logo-area p{
color:#00e676;
}

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

.menu a{
color:white;
text-decoration:none;
font-weight:500;
}
/*============================
HERO
============================*/

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

.hero{

position:relative;

height:100vh;

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

background:
linear-gradient(rgba(8,10,20,.72),rgba(8,10,20,.80)),
url("../assets/images/project1.jpg");

background-size:cover;
background-position:center;
background-repeat:no-repeat;

}

/* Dark overlay */

.hero::before{

content:"";

position:absolute;

top:0;
left:0;

width:100%;
height:100%;

background:
radial-gradient(circle at center,
rgba(0,255,150,.08),
transparent 60%);

}

/* Neon vertical lights */

.hero::after{

content:"";

position:absolute;

width:100%;
height:100%;

background:
linear-gradient(90deg,
transparent 0%,
rgba(255,255,255,.06) 20%,
transparent 40%,
transparent 60%,
rgba(255,255,255,.05) 80%,
transparent 100%);

mix-blend-mode:screen;

opacity:.7;

}
/* Stats */

.stats{

display:flex;

justify-content:center;

gap:80px;

padding:80px 20px;

background:#111827;
}

.stat-box{
text-align:center;
}

.stat-box h2{
color:#00e676;
font-size:50px;
}

/* Services */

.services{

padding:100px 50px;
}

.services h2{

text-align:center;

margin-bottom:50px;

font-size:40px;
}

.service-grid{

display:grid;

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

gap:30px;
}

.card{

background:#162033;

border-radius:20px;

overflow:hidden;

transition:.4s;
}

.card:hover{

transform:translateY(-15px);

box-shadow:0 20px 50px rgba(0,230,118,.3);
}

.card img{

width:100%;
height:250px;

object-fit:cover;
}

.card h3{

padding:20px;
}

/* Projects */

.projects{

padding:80px 0;
}

.projects h2{

text-align:center;

margin-bottom:30px;
}

.slider{

overflow:hidden;
}

.slide-track{

display:flex;

gap:20px;

width:max-content;

animation:move 20s linear infinite;
}

.slide-track img{

width:350px;
height:220px;

border-radius:20px;

object-fit:cover;
}

@keyframes move{

0%{
transform:translateX(0);
}

100%{
transform:translateX(-50%);
}

}

/* Footer */

footer{

background:#000;

padding:50px;

text-align:center;
}
.card{

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

backdrop-filter:blur(20px);

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

border-radius:25px;

overflow:hidden;

transition:.4s;

}
.card:hover{

transform:translateY(-15px);

box-shadow:

0 0 25px rgba(0,230,118,.5),

0 0 50px rgba(0,230,118,.3),

0 0 80px rgba(0,230,118,.2);

}
.whatsapp{

position:fixed;

bottom:25px;
right:25px;

width:70px;
height:70px;

border-radius:50%;

background:#25d366;

display:flex;

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

font-size:35px;

text-decoration:none;

z-index:9999;

box-shadow:0 0 25px #25d366;

animation:pulse 2s infinite;

}

@keyframes pulse{

0%{transform:scale(1);}
50%{transform:scale(1.1);}
100%{transform:scale(1);}

}
.scroll-down{

position:absolute;

bottom:40px;

left:50%;

transform:translateX(-50%);

display:flex;

flex-direction:column;

align-items:center;

color:white;

animation:float 2s infinite;

}

.scroll-down span{

width:3px;

height:45px;

background:#00ff99;

margin-bottom:10px;

}

@keyframes float{

0%{transform:translate(-50%,0);}

50%{transform:translate(-50%,10px);}

100%{transform:translate(-50%,0);}

}
/*==========================
CURSOR GLOW
==========================*/

#cursor-glow{

position:fixed;

width:250px;
height:250px;

border-radius:50%;

pointer-events:none;

background:
radial-gradient(circle,
rgba(0,255,150,.30) 0%,
rgba(0,255,150,.10) 40%,
transparent 70%);

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

z-index:999;

filter:blur(25px);

transition:
left .08s linear,
top .08s linear;

}
.particles span{

position:absolute;

width:8px;
height:8px;

background:#00ff99;

border-radius:50%;

box-shadow:
0 0 15px #00ff99;

animation:particleMove 12s linear infinite;

opacity:.7;

}

.particles span:nth-child(1){left:10%;animation-delay:0s;}
.particles span:nth-child(2){left:25%;animation-delay:2s;}
.particles span:nth-child(3){left:40%;animation-delay:4s;}
.particles span:nth-child(4){left:55%;animation-delay:6s;}
.particles span:nth-child(5){left:70%;animation-delay:8s;}
.particles span:nth-child(6){left:85%;animation-delay:10s;}
.particles span:nth-child(7){left:50%;animation-delay:3s;}
.particles span:nth-child(8){left:30%;animation-delay:7s;}

@keyframes particleMove{

0%{

top:100%;

opacity:0;

transform:scale(.5);

}

20%{

opacity:1;

}

100%{

top:-10%;

opacity:0;

transform:scale(1.5);

}

}
.sun{

position:absolute;

top:100px;

right:120px;

width:180px;
height:180px;

border-radius:50%;

background:radial-gradient(circle,

#fff799,

#ffe100,

#ff9900);

box-shadow:

0 0 40px #ffd54f,

0 0 80px #ffd54f,

0 0 150px #ff9800;

animation:sunPulse 4s infinite;

}

@keyframes sunPulse{

0%{

transform:scale(1);

}

50%{

transform:scale(1.1);

}

100%{

transform:scale(1);

}

}
@keyframes heroZoom{

0%{

transform:scale(1);

}

100%{

transform:scale(1.12);

}

}
.neon-line{

height:2px;

background:#00ff99;

box-shadow:

0 0 20px #00ff99,

0 0 40px #00ff99;

}



}
/* ================= HERO CONTENT ================= */

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

.hero{

position:relative;

height:100vh;

display:flex;

justify-content:center;

align-items:center;

overflow:hidden;

background:

linear-gradient(rgba(5,8,20,.60),rgba(5,8,20,.75)),

url("../images/project1.jpg");

background-size:cover;

background-position:center;

background-repeat:no-repeat;

}

/* Green Glow */

.hero-glow{

position:absolute;

width:650px;

height:650px;

background:radial-gradient(circle,

rgba(0,255,120,.35),

transparent 70%);

filter:blur(70px);

left:50%;

top:50%;

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

z-index:1;

}

/* Hero Content */

.hero-content{

position:relative;

z-index:10;

text-align:center;

width:100%;

display:flex;

flex-direction:column;

justify-content:center;

align-items:center;

}

/* Logo */

.hero-logo{

width:180px;

margin-bottom:20px;

filter:

drop-shadow(0 0 15px #00ff88)

drop-shadow(0 0 40px #00ff88);

}

/* Green Tag */

.hero-tag{

font-size:16px;

letter-spacing:5px;

color:#00ff88;

font-weight:600;

margin-bottom:25px;

text-shadow:0 0 20px #00ff88;

}

/* SOLARIS */

.hero-title{

font-family:Orbitron;

font-size:110px;

font-weight:700;

color:#fff;

letter-spacing:8px;

margin:0;

text-shadow:

0 0 10px #fff,

0 0 25px #00ff88,

0 0 60px #00ff88;

}

/* INFRATECH */

.hero-subtitle{

font-family:Orbitron;

font-size:38px;

letter-spacing:12px;

margin-top:10px;

color:#00ff88;

text-shadow:

0 0 20px #00ff88,

0 0 40px #00ff88;

}

/* Description */

.hero-text{

font-size:30px;

margin-top:35px;

font-weight:500;

}

.hero-desc{

font-size:22px;

margin-top:10px;

color:#ddd;

}

/* Buttons */

.hero-buttons{

display:flex;

gap:25px;

margin-top:45px;

}

.btn-primary{

padding:18px 45px;

background:#00ff88;

color:#000;

font-weight:bold;

border-radius:50px;

text-decoration:none;

box-shadow:0 0 30px #00ff88;

}

.btn-secondary{

padding:18px 45px;

border:2px solid #00ff88;

border-radius:50px;

color:#fff;

text-decoration:none;

}
footer{

background:#06101c;

padding:40px 20px;

text-align:center;

border-top:1px solid rgba(0,255,136,.2);

}

footer h3{

font-family:'Orbitron',sans-serif;

font-size:30px;

color:#fff;

margin-bottom:10px;

}

footer p{

color:#bfbfbf;

margin:8px 0;

}

.footer-bottom{

margin-top:25px;

padding-top:20px;

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

}

.footer-bottom p{

color:#00ff88;

font-size:15px;

font-weight:600;

letter-spacing:1px;

}
/* ==========================================
   RESPONSIVE DESIGN
========================================== */

/* Tablets */
@media (max-width:992px){

.navbar{
    padding:15px 25px;
}

.menu{
    gap:18px;
}

.hero-content h1{
    font-size:55px;
}

.hero-content h2{
    font-size:32px;
}

section{
    padding:70px 25px;
}

}

/* Mobile */
@media (max-width:768px){

.navbar{

flex-direction:column;
padding:15px;

}

.logo-area{

margin-bottom:15px;

}

.menu{

display:flex;
flex-wrap:wrap;
justify-content:center;
gap:12px;

}

.hero{

padding:120px 20px 70px;

text-align:center;

}

.hero-content{

width:100%;

}

.hero-content h1{

font-size:38px;

line-height:1.2;

}

.hero-content h2{

font-size:24px;

}

.hero-content p{

font-size:16px;

}

.buttons{

display:flex;
flex-direction:column;
gap:15px;

}

.btn-primary,
.btn-secondary{

width:100%;

text-align:center;

}

.grid,
.cards,
.product-grid,
.project-grid,
.gallery-grid,
.solution-grid{

display:grid;
grid-template-columns:1fr;

gap:20px;

}

.card,
.product-card,
.project-card{

width:100%;

}

img{

max-width:100%;
height:auto;

}

footer{

text-align:center;
padding:30px 20px;

}

}

/* Small Phones */
@media (max-width:480px){

.hero-content h1{

font-size:30px;

}

.hero-content h2{

font-size:20px;

}

.hero-content p{

font-size:14px;

}

.menu a{

font-size:14px;

}

}