/* ========================
ROOT COLORS
======================== */

:root{
--black-bg:#0f0f2e;
--neon-pink:#ff6ec4;
--neon-blue:#2f80ed;
--neon-purple:#9b51e0;
--white-trans:rgba(255,255,255,0.8);
}



/* ========================
GLOBAL
======================== */

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

body{
background:var(--black-bg);
color:white;
overflow-x:hidden;
position:relative;
}



/* ========================
NETWORK BACKGROUND
======================== */

#network-bg{
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
z-index:-2;
}

.floating-shapes{
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
pointer-events:none;
z-index:-1;
}



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

.navbar{

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

padding:18px 60px;

background:var(--black-bg);

position:sticky;
top:0;

z-index:1000;

box-shadow:0 4px 12px rgba(0,0,0,0.4);

}


/* LOGO */

.logo{

display:flex;
align-items:center;
gap:14px;

}

.logo img{

width:60px;
height:60px;

}

.logo-text h2{

font-size:26px;
font-weight:700;

}

.logo-text .motto-small{

font-size:12px;
color:var(--neon-pink);

}



/* NAV LINKS */

.nav-links{

display:flex;
gap:26px;
list-style:none;

}

.nav-links a{

color:white;
text-decoration:none;
font-weight:600;
transition:0.3s;

}

.nav-links a:hover{

color:var(--neon-pink);
text-shadow:0 0 8px var(--neon-pink);

}



/* ========================
HAMBURGER
======================== */

.hamburger{

display:none;
flex-direction:column;
gap:5px;
cursor:pointer;

}

.hamburger span{

width:25px;
height:3px;
background:white;
transition:0.3s;

}



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

.hero{

min-height:90vh;

display:flex;
flex-direction:column;
justify-content:center;
align-items:center;

text-align:center;

position:relative;

padding:40px;

}


/* HERO TITLE */

.hero h1{

font-size:70px;
font-weight:800;
margin-bottom:15px;

transition:0.3s;

}

.hero h1:hover{

color:var(--neon-pink);
text-shadow:0 0 20px var(--neon-pink);

}


/* TAGLINE */

.tagline{

font-size:22px;
color:var(--white-trans);
margin-bottom:10px;

}


/* MOTTO */

#motto{

color:var(--neon-pink);
font-weight:600;

}


/* HERO BUTTONS */

.hero-buttons{

display:flex;
gap:20px;
margin-top:25px;

flex-wrap:wrap;
justify-content:center;

}

.btn{

padding:14px 30px;
border-radius:50px;

font-weight:600;

text-decoration:none;

color:white;

background:linear-gradient(45deg,#42e695,#ff6ec4);

box-shadow:0 0 15px #42e695;

transition:0.3s;

}

.btn:hover{

transform:scale(1.05);
box-shadow:0 0 25px #ff6ec4;

}

.btn-secondary{

background:linear-gradient(45deg,#9b51e0,#2f80ed);
box-shadow:0 0 15px #9b51e0;

}



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

.section{

padding:80px 60px;

}

.section h2{

font-size:38px;
margin-bottom:20px;

display:inline-block;

transition:0.3s;

}

.section h2:hover{

color:var(--neon-pink);
text-shadow:0 0 12px var(--neon-pink);

}

.section p{

font-size:18px;
line-height:1.7;
color:var(--white-trans);
margin-bottom:30px;

}



/* ========================
MISSION / VISION
======================== */

.mission-vision{

display:flex;
gap:20px;
flex-wrap:wrap;

}

.box{

flex:1 1 250px;

background:rgba(0,0,0,0.35);

padding:30px;

border-radius:20px;

box-shadow:0 0 18px #42e695;

transition:0.3s;

}

.box:hover{

transform:translateY(-8px);
box-shadow:0 0 30px #ff6ec4;

}



/* ========================
CARDS
======================== */

.cards{

display:flex;
gap:20px;
flex-wrap:wrap;

}

.card{

flex:1 1 220px;

background:rgba(0,0,0,0.45);

padding:30px;

border-radius:20px;

text-align:center;

font-weight:600;

cursor:pointer;

box-shadow:0 0 15px #42e695;

transition:0.3s;

}

.card:hover{

transform:translateY(-10px);
box-shadow:0 0 30px #ff6ec4;

}



/* ========================
PARTNER SECTION
======================== */

#partner{

display:flex;
flex-direction:column;
align-items:center;
text-align:center;

gap:20px;

}

#partner .btn{

width:220px;

}



/* ========================
SOCIAL ICONS
======================== */

.footer-social{

margin-top:20px;

display:flex;
justify-content:center;
gap:25px;

}

.footer-social a{

font-size:32px;

color:white;

transition:0.3s;

}

.footer-social a:hover{

color:var(--neon-pink);

transform:scale(1.2);

text-shadow:0 0 15px var(--neon-pink);

}



/* ========================
FOOTER
======================== */

footer{

padding:40px 60px;

text-align:center;

display:flex;
flex-direction:column;

gap:12px;

}

.footer-links{

display:flex;

gap:22px;

justify-content:center;

flex-wrap:wrap;

}

.footer-links a{

color:white;
text-decoration:none;
font-weight:600;

}

.footer-links a:hover{

color:var(--neon-pink);

}



/* ========================
QUICK CONTACT FORM
======================== */

.quick-form-container{

height:100vh;

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

padding:20px;

}

.quick-form{

background:rgba(0,0,0,0.7);

padding:40px;

border-radius:20px;

width:90%;
max-width:420px;

box-shadow:0 0 25px #42e695;

display:flex;
flex-direction:column;

gap:16px;

}

.quick-form h2{

text-align:center;

}

.quick-subtext{

font-size:14px;
text-align:center;
opacity:0.8;

}

.quick-form input,
.quick-form textarea{

padding:14px;

border-radius:10px;

border:1px solid rgba(255,255,255,0.2);

background:rgba(0,0,0,0.5);

color:white;

outline:none;

}

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

border-color:#ff6ec4;
box-shadow:0 0 10px #ff6ec4;

}

.back-home{

text-align:center;

margin-top:10px;

text-decoration:none;
color:white;

}

.back-home:hover{

color:#ff6ec4;

}



/* ========================
RESPONSIVE
======================== */

@media(max-width:768px){

.nav-links{

display:none;

flex-direction:column;

position:absolute;

top:80px;
right:0;

background:var(--black-bg);

width:220px;

padding:20px;

}

.nav-links.active{

display:flex;

}

.hamburger{

display:flex;

}

.mission-vision{

flex-direction:column;

}

.cards{

flex-direction:column;

}

}

@media(max-width:768px){

.cards{
flex-direction:column;
align-items:center;
}

.card{
width:85%;
max-width:320px;
}

}