*{

margin:0;

padding:0;

box-sizing:border-box;

}

body{

font-family:Poppins,sans-serif;

background:#071426;

color:white;

overflow-x:hidden;

}

.container{

width:92%;

max-width:1400px;

margin:auto;

}

header{

position:fixed;

width:100%;

top:0;

left:0;

background:rgba(7,20,38,.80);

backdrop-filter:blur(18px);

z-index:999;

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

}

header .container{

display:flex;

justify-content:space-between;

align-items:center;

padding:18px 0;

}

.logo{

display:flex;

align-items:center;

gap:15px;

}

.logo i{

font-size:40px;

color:#00d7ff;

}

.logo h2{

font-size:30px;

font-weight:800;

}

.logo span{

color:#88d9ff;

font-size:13px;

letter-spacing:3px;

}

nav{

display:flex;

align-items:center;

gap:12px;

}

nav a{

color:white;

text-decoration:none;

padding:12px 18px;

border-radius:30px;

transition:.35s;

font-size:15px;

}

nav a:hover{

background:#00d7ff;

color:#071426;

}

.active{

background:#00d7ff;

color:#071426;

}

.github{

background:#24292f;

}

.github:hover{

background:#00d7ff;

}

.order{

background:linear-gradient(45deg,#00d7ff,#5865ff);

font-weight:bold;

}

.hero{

height:100vh;

display:flex;

align-items:center;

justify-content:center;

text-align:center;

position:relative;

background:

linear-gradient(rgba(0,0,0,.55),rgba(0,0,0,.80)),

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

background-size:cover;

background-position:center;

}

.overlay{

position:absolute;

width:100%;

height:100%;

background:

radial-gradient(circle at center,

rgba(0,215,255,.15),

transparent 60%);

animation:pulse 8s infinite;

}

.hero-content{

position:relative;

z-index:2;

max-width:900px;

}

.hero h1{

font-size:64px;

font-weight:800;

margin-bottom:25px;

}

.hero p{

font-size:22px;

line-height:40px;

color:#d5d5d5;

margin-bottom:45px;

}

.buttons{

display:flex;

justify-content:center;

gap:25px;

flex-wrap:wrap;

}

.btn-primary,

.btn-secondary{

padding:18px 40px;

border-radius:40px;

text-decoration:none;

font-size:18px;

transition:.35s;

}

.btn-primary{

background:#00d7ff;

color:#071426;

}

.btn-primary:hover{

transform:translateY(-5px);

box-shadow:0 0 35px #00d7ff;

}

.btn-secondary{

border:2px solid #00d7ff;

color:white;

}

.btn-secondary:hover{

background:#00d7ff;

color:#071426;

}

.features{

padding:90px 0;

background:#091a30;

}

.features .container{

display:grid;

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

gap:30px;

}

.box{

background:#10263e;

padding:35px;

border-radius:20px;

text-align:center;

transition:.4s;

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

}

.box:hover{

transform:translateY(-12px);

box-shadow:0 0 35px rgba(0,215,255,.4);

}

.box i{

font-size:48px;

margin-bottom:20px;

color:#00d7ff;

}

.box h3{

margin-bottom:15px;

}

.box p{

color:#cccccc;

line-height:28px;

}

@keyframes pulse{

0%{

transform:scale(1);

opacity:.6;

}

50%{

transform:scale(1.15);

opacity:1;

}

100%{

transform:scale(1);

opacity:.6;

}

}

.section-title{

text-align:center;

font-size:46px;

margin-bottom:60px;

font-weight:800;

}

.packages{

padding:120px 0;

background:#061220;

}

.pricing-grid{

display:grid;

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

gap:35px;

}

.pricing-card{

background:#10263e;

padding:45px;

border-radius:25px;

position:relative;

transition:.4s;

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

}

.pricing-card:hover{

transform:translateY(-15px);

box-shadow:0 0 40px #00d7ff;

}

.popular{

border:2px solid #00d7ff;

}

.popular-tag{

position:absolute;

top:18px;

right:18px;

background:#00d7ff;

color:#061220;

padding:8px 15px;

border-radius:30px;

font-size:12px;

font-weight:bold;

}

.price{

font-size:52px;

margin:25px 0;

font-weight:700;

color:#00d7ff;

}

.price span{

font-size:18px;

color:white;

}

.pricing-card ul{

list-style:none;

margin:30px 0;

}

.pricing-card li{

margin:18px 0;

}

.package-btn{

display:block;

text-align:center;

padding:16px;

background:#00d7ff;

border-radius:40px;

text-decoration:none;

font-weight:bold;

color:#071426;

}

.zeus{

padding:120px 0;

background:#091c34;

}

.zeus .container{

display:grid;

grid-template-columns:1fr 350px;

gap:60px;

align-items:center;

}

.zeus h2{

font-size:50px;

margin-bottom:30px;

}

.zeus p{

font-size:19px;

line-height:36px;

margin-bottom:35px;

}

.zeus-list div{

margin:15px 0;

font-size:18px;

}

.zeus-list i{

color:#00d7ff;

margin-right:12px;

}

.github-big{

display:inline-block;

margin-top:40px;

padding:18px 40px;

background:#24292f;

border-radius:40px;

color:white;

text-decoration:none;

}

.zeus-right{

text-align:center;

}

.zeus-right i{

font-size:220px;

color:#00d7ff;

opacity:.25;

}

.stats{

padding:90px 0;

background:#071426;

}

.stats .container{

display:grid;

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

gap:25px;

}

.stat{

text-align:center;

background:#10263e;

padding:40px;

border-radius:20px;

}

.stat h2{

font-size:44px;

color:#00d7ff;

}

.cta{

padding:120px 20px;

text-align:center;

background:linear-gradient(135deg,#061220,#0d3b67);

}

.cta h2{

font-size:52px;

margin-bottom:20px;

}

.cta p{

font-size:22px;

margin-bottom:40px;

color:#d4d4d4;

}

/* ========================= */

.gallery{

padding:120px 0;

background:#061220;

}

.gallery-grid{

display:grid;

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

gap:20px;

}

.gallery img{

width:100%;

border-radius:20px;

transition:.4s;

cursor:pointer;

}

.gallery img:hover{

transform:scale(1.05);

box-shadow:0 0 40px #00d7ff;

}



.testimonials{

padding:120px 0;

background:#091c34;

}

.testimonial-grid{

display:grid;

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

gap:35px;

}

.testimonial{

background:#10263e;

padding:40px;

border-radius:20px;

}

.testimonial i{

font-size:40px;

color:#00d7ff;

margin-bottom:20px;

}

.testimonial p{

line-height:34px;

margin-bottom:20px;

}



.faq{

padding:120px 0;

background:#071426;

}

.faq-box{

background:#10263e;

padding:30px;

margin-bottom:25px;

border-radius:20px;

}

.faq-box h3{

color:#00d7ff;

margin-bottom:15px;

}



.contact{

padding:120px 0;

background:#061220;

}

.contact form{

max-width:800px;

margin:auto;

display:flex;

flex-direction:column;

gap:20px;

}

.contact input,

.contact textarea{

padding:18px;

background:#10263e;

border:none;

border-radius:15px;

color:white;

font-size:16px;

}

.contact textarea{

height:180px;

resize:none;

}

.contact button{

padding:20px;

border:none;

background:#00d7ff;

font-size:18px;

font-weight:bold;

border-radius:40px;

cursor:pointer;

}



footer{

background:#04101c;

padding:80px 0 30px;

}

.footer-grid{

display:grid;

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

gap:40px;

}

.footer-grid h3{

margin-bottom:20px;

}

.footer-grid a{

display:block;

margin:10px 0;

color:#cfcfcf;

text-decoration:none;

}

.footer-grid a:hover{

color:#00d7ff;

}

.copyright{

text-align:center;

margin-top:50px;

padding-top:30px;

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

color:#aaa;

}

#heroVideo{

position:absolute;

top:0;

left:0;

width:100%;

height:100%;

object-fit:cover;

z-index:-3;

}

.hero-overlay{

position:absolute;

width:100%;

height:100%;

background:

linear-gradient(

rgba(3,12,22,.55),

rgba(3,12,22,.90)

);

z-index:-2;

}

#particles-js{

position:absolute;

width:100%;

height:100%;

z-index:-1;

}

.counter-section{

padding:100px;

display:grid;

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

gap:40px;

background:#081423;

}

.counter{

text-align:center;

}

.counter h2{

font-size:70px;

color:#00d9ff;

font-weight:700;

}

.counter span{

font-size:20px;

}

#top{

position:fixed;

bottom:30px;

right:30px;

width:55px;

height:55px;

background:#00d9ff;

border-radius:50%;

display:flex;

justify-content:center;

align-items:center;

color:white;

text-decoration:none;

font-size:22px;

box-shadow:0 0 25px cyan;

z-index:999;

}