@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&display=swap');

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

html{
scroll-behavior:smooth;
scroll-padding-top:90px;
}

body{
background:#07111f;
color:#fff;
overflow-x:hidden;
line-height:1.7;
}


/* BACKGROUND */

body::before{

content:"";

position:fixed;

top:0;
left:0;

width:100%;
height:100%;

background:
radial-gradient(circle at 20% 30%,#00f7ff22,transparent 30%),
radial-gradient(circle at 80% 70%,#7a5cff22,transparent 30%);

z-index:-1;

animation:bgmove 8s infinite alternate;

}

@keyframes bgmove{

from{
transform:scale(1);
}

to{
transform:scale(1.15);
}

}


/* FIX SECTION JUMP */

#about,
#services,
#tech,
#contact{

scroll-margin-top:100px;

}


/* NAVBAR */

nav{

position:fixed;

top:0;
left:0;

width:100%;
height:90px;

padding:0 8%;

display:flex;

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

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

backdrop-filter:blur(20px);

z-index:1000;

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

}


.logo{

font-size:36px;

font-weight:800;

background:
linear-gradient(
45deg,
#00f7ff,
#7a5cff);

-webkit-background-clip:text;

color:transparent;

}


nav ul{

display:flex;

list-style:none;

gap:45px;

}


nav ul a{

text-decoration:none;

color:#fff;

font-size:18px;

transition:.4s;

}


nav ul a:hover{

color:#00f7ff;

}



/* HERO */

.hero{

min-height:100vh;

padding-top:150px;
padding-left:8%;
padding-right:8%;
padding-bottom:100px;

display:flex;

align-items:center;

background:

linear-gradient(
90deg,
rgba(5,8,20,.92),
rgba(5,8,20,.35)
),

url("../assets/hero-bg.png");

background-size:cover;

background-position:center;

background-repeat:no-repeat;

}


.hero-content{

max-width:700px;

}


.hero-content h1{

font-size:75px;

line-height:1.05;

margin-bottom:30px;

font-weight:800;

}


.hero-content p{

font-size:23px;

line-height:1.8;

color:#d6d6d6;

margin-bottom:40px;

}



/* BUTTONS */

.btn,
.btn2{

display:inline-block;

padding:16px 35px;

border-radius:50px;

font-weight:600;

text-decoration:none;

transition:.5s;

margin-right:15px;

}


.btn{

background:
linear-gradient(
45deg,
#00e5ff,
#7a5cff);

color:white;

}


.btn:hover{

transform:translateY(-5px);

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

}


.btn2{

border:2px solid #00f7ff;

color:white;

}


.btn2:hover{

background:#00f7ff;

color:black;

}



/* SECTIONS */

section{

padding:90px 8%;

}



/* ABOUT */

.about{

padding-top:60px;

}

.about .container{

display:grid;

grid-template-columns:1fr 1fr;

gap:80px;

align-items:center;

}


.about-left img{

width:100%;

max-width:550px;

border-radius:30px;

display:block;

box-shadow:
0 0 40px rgba(0,255,255,.2);

}


.about-right h2{

font-size:52px;

margin-bottom:25px;

}


.about-right p{

font-size:19px;

line-height:2;

color:#d5d5d5;

}



/* SERVICES */

.services h2,
.tech h2,
.why h2{

font-size:50px;

text-align:center;

margin-bottom:50px;

}


.cards{

display:grid;

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

gap:35px;

}.cards{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:35px;
}

@media(max-width:1200px){
.cards{
grid-template-columns:repeat(2,1fr);
}
}

@media(max-width:768px){
.cards{
grid-template-columns:1fr;
}
}


.card{

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

padding:25px;

border-radius:25px;

backdrop-filter:blur(20px);

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

text-align:center;

transition:.5s;

}


.card:hover{

transform:translateY(-10px);

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

}


.card img{

width:100%;

height:220px;

object-fit:cover;

border-radius:20px;

margin-bottom:20px;

}


.card h3{

font-size:25px;

margin-bottom:15px;

}


.card p{

color:#ccc;

}


.card i{

font-size:45px;

color:#00e5ff;

margin-bottom:20px;

}



.tech{
padding:100px 10%;
text-align:center;
}

.tech h2{
font-size:2.5rem;
margin-bottom:50px;
}

.tech-container{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
gap:30px;
margin-top:30px;
}

.tech-box{
background:rgba(255,255,255,.05);
padding:35px;
border-radius:20px;
backdrop-filter:blur(10px);
border:1px solid rgba(255,255,255,.08);
transition:.4s;
text-align:left;
}

.tech-box:hover{
transform:translateY(-10px);
}

.tech-box h3{
font-size:1.4rem;
margin-bottom:20px;
color:#00c3ff;
}

.tech-box ul{
list-style:none;
padding:0;
}

.tech-box ul li{
padding:12px 0;
border-bottom:1px solid rgba(255,255,255,.08);
font-size:1rem;
}

.tech-box ul li:last-child{
border:none;
}
/* CONTACT POPUP */

.contact-popup{

position:fixed;

top:0;
left:0;

width:100%;
height:100%;

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

display:none;

justify-content:center;

align-items:center;

z-index:99999;

backdrop-filter:blur(5px);

}

.popup-box{

width:350px;

max-width:90%;

height:auto;

background:#081321;

padding:35px 25px;

border-radius:25px;

position:relative;

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

overflow:hidden;

}

.close-btn{

position:absolute;

top:12px;

right:18px;

font-size:35px;

font-weight:bold;

cursor:pointer;

color:#fff;

z-index:999;

transition:.3s;

}

.close-btn:hover{

transform:scale(1.1);

color:#00f7ff;

}

.popup-box h2{

font-size:28px;

margin-bottom:10px;

text-align:center;

}

.popup-text{

color:#ccc;

font-size:14px;

text-align:center;

margin-bottom:25px;

line-height:1.6;

}

.contact-form{

display:flex;

flex-direction:column;

gap:15px;

}

.contact-form input,
.contact-form textarea{

padding:14px;

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

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

border-radius:12px;

color:#fff;

font-size:14px;

outline:none;

transition:.3s;

}

.contact-form input:focus,
.contact-form textarea:focus{

border-color:#00f7ff;

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

}

.contact-form textarea{

height:100px;

resize:none;

}

.contact-form .btn{

width:100%;

margin-top:10px;

border:none;

cursor:pointer;

}

@media(max-width:768px){

.popup-box{

width:90%;

padding:30px 20px;

}

.popup-box h2{

font-size:24px;

}

}
/* CTA */

.cta{

padding:80px;

text-align:center;

border-radius:30px;

background:
linear-gradient(
90deg,
#00f7ff22,
#7a5cff22);

}


.cta h1{

font-size:55px;

margin-bottom:25px;

}
/* INDUSTRIES */

.industries{

padding:90px 8%;
text-align:center;

}

.industries h2{

font-size:50px;
margin-bottom:15px;

}

.industry-text{

color:#cfcfcf;
margin-bottom:40px;
font-size:18px;

}

.industry-grid{

display:grid;
grid-template-columns:repeat(4,1fr);
gap:25px;

}

.industry-card{

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

padding:30px;

border-radius:25px;

backdrop-filter:blur(20px);

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

font-size:20px;

font-weight:600;

transition:.4s;

}

.industry-card:hover{

transform:translateY(-8px);

box-shadow:0 0 25px #00f7ff55;

}

@media(max-width:1200px){

.industry-grid{
grid-template-columns:repeat(2,1fr);
}

}

@media(max-width:768px){

.industry-grid{
grid-template-columns:1fr;
}

}

/* FOOTER */

.footer-section{

background:#020814;

padding:70px 8% 20px;

margin-top:60px;

}

.footer-container{

display:grid;

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

gap:50px;

}

.footer-box h2{

font-size:35px;

margin-bottom:20px;

background:linear-gradient(
45deg,#00f7ff,#7a5cff);

-webkit-background-clip:text;

color:transparent;

}

.footer-box h3{

margin-bottom:20px;

}

.footer-box p{

color:#bbb;

margin-bottom:20px;

}

.footer-box h4{

color:#00f7ff;

}

.footer-box ul{

list-style:none;

}

.footer-box ul li{

margin:12px 0;

}

.footer-box ul a{

text-decoration:none;

color:#ddd;

transition:.3s;

}

.footer-box ul a:hover{

color:#00f7ff;

}

.social-links{

display:flex;

flex-direction:column;

gap:15px;

}

.social-links a{

text-decoration:none;

color:#ddd;

}

.social-links i{

margin-right:10px;

color:#00f7ff;

}

.footer-bottom{

margin-top:40px;

padding-top:25px;

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

text-align:center;

color:#999;

}

@media(max-width:900px){

.footer-container{

grid-template-columns:1fr;

text-align:center;

}

}
/* FOOTER CONTACT INFO */

.contact-info-footer{

margin-top:25px;

padding-top:20px;

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

}

.contact-info-footer h3{

font-size:18px;

margin-bottom:15px;

color:#00f7ff;

}

.contact-info-footer p{

display:flex;

align-items:center;

gap:10px;

margin:10px 0;

font-size:15px;

color:#ccc;

word-break:break-word;

}
/* ================= MOBILE FINAL ================= */

.menu-btn{
display:none;
}

.close-menu{
display:none;
}

@media(max-width:900px){

html,
body{

overflow-x:hidden!important;

width:100%;

max-width:100%;

}

/* NAVBAR */
nav{

position:fixed;

top:0;
left:0;

width:100%;

height:80px;

padding:0 20px;

display:flex;

justify-content:space-between;

align-items:center;

background:#081321;

z-index:999999;

}

.logo{

font-size:28px;

max-width:75%;

white-space:nowrap;

}

.menu-btn{

display:block;

font-size:32px;

cursor:pointer;

color:#fff;

z-index:999999;

}

/* SIDEBAR */
.nav-links{

position:fixed;

top:80px;

right:-100%;

width:260px;

height:calc(100vh - 80px);

background:#081321;

display:flex !important;

flex-direction:column;

justify-content:flex-start;

align-items:center;

list-style:none;

padding-top:40px;

gap:25px;

transition:.5s;

z-index:999999;

box-shadow:
-10px 0 35px rgba(0,255,255,.2);

overflow-y:auto;

}
.nav-links.active{

right:0 !important;

}

.close-menu{

display:block;

position:absolute;

top:15px;

right:20px;

font-size:35px;

color:#fff;

cursor:pointer;

z-index:999999;

}
/* HERO */

.hero{

min-height:auto;

padding:170px 20px 70px;

justify-content:center;

text-align:center;

overflow:hidden;

}

.hero-content{

width:100%;

max-width:100%;

margin:auto;

}

.hero-content h1{

font-size:44px;

line-height:1.2;

word-break:break-word;

}

.hero-content p{

font-size:16px;

line-height:1.8;

padding:0;

}
/* BUTTON */

.btn,
.btn2{

display:block;

width:100%;

max-width:300px;

margin:15px auto;

}

/* ABOUT */

.about .container{

grid-template-columns:1fr;

gap:30px;

text-align:center;

}

.about-left img{

margin:auto;

}

.about-right h2{

font-size:36px;

}

.about-right p{

font-size:16px;

line-height:1.8;

}

/* CARDS */

.cards,
.tech-container,
.industry-grid{

grid-template-columns:1fr!important;

}

/* CTA */

.cta{

padding:60px 20px;

overflow:hidden;

}

.cta h1{

font-size:38px;

line-height:1.2;

word-break:break-word;

}

/* CONTACT POPUP */

.popup-box{

width:92%;

max-height:85vh;

overflow-y:auto;

padding:25px 18px;

}

/* FOOTER */

.footer-container{

grid-template-columns:1fr!important;

text-align:center;

gap:35px;

padding:0 15px;

}

.social-links{

align-items:center;

}

.contact-info-footer p{

display:block;

line-height:1.8;

}

.footer-bottom{

font-size:15px;

padding:15px;

}

/* REMOVE SIDE SPACE */

.hero,
.about,
.footer-section,
section,
.cta{

width:100%;

max-width:100%;

overflow:hidden;

}

}