body{
font-family:Arial;
margin:0;
background:#0A1F44;
color:white;
}
/* new phone menu nav starts hia */

/* NAVIGATION */

header{
display:flex;
justify-content:space-between;
align-items:center;
padding:20px 40px;
background:#08152e;
position:relative;
z-index:1000;
}

.logo{
font-size:22px;
font-weight:bold;
}

.logo span{
color:#00c3ff;
}

#navbar{
display:flex;
gap:20px;
}

#navbar a{
font-weight:bold;
color:white;
}

/* MENU ICON */

.menu-toggle{
display:none;
font-size:26px;
cursor:pointer;
color:white;
}

/* MOBILE NAV */

@media (max-width:768px){

.menu-toggle{
display:block;
}

#navbar{
display:none;
flex-direction:column;
position:absolute;
top:70px;
left:0;
width:100%;
background:#08152e;
padding:20px 0;
text-align:center;
}

#navbar a{
padding:12px;
border-top:1px solid #1f2f5c;
}

#navbar.active{
display:flex;
}

}

#navbar{
transition:0.3s ease;
}

/* --------  old starts hia-----  
header{
display:flex;
justify-content:space-between;
align-items:center;
padding:20px 40px;
background:#08152e;
position:relative;
z-index:999;
}

.logo{
font-size:22px;
font-weight:bold;
}

.logo span{
color:#00C2FF;
}

nav a{
margin:0 10px;
color:white;
text-decoration:none;
font-weight:bold;
}
 ---  old menu ends hia--------  */
.logo-section{
text-align:center;
padding:20px;
}

.company-logo{
max-width:150px;
}

.hero{
text-align:center;
padding:80px 20px;
}

.btn{
background:#ff7a00;
padding:12px 25px;
color:white;
text-decoration:none;
border-radius:6px;
font-weight:bold;
}

.section-title{
text-align:center;
margin-top:40px;
}

.grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
gap:30px;
padding:40px;
}

.card{
background:#132c5c;
padding:30px;
border-radius:10px;
text-align:center;
}

.icon{
font-size:40px;
color:#00C2FF;
margin-bottom:10px;
}

.team-img{
width:120px;
border-radius:50%;
margin-bottom:10px;
}

.container{
padding:40px;
}

footer{
text-align:center;
padding:20px;
background:#08152e;
}

.menu-toggle{
display:none;
font-size:24px;
cursor:pointer;
}



.projects-section{
padding:80px 10%;
text-align:center;
}

.projects-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
gap:25px;
margin-top:40px;
}

.project-card{
background:#1f2937;
padding:25px;
border-radius:8px;
transition:0.3s;
}

.project-card:hover{
transform:translateY(-6px);
}

.institutions{
padding:80px 10%;
text-align:center;
}

.institution-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
gap:25px;
margin-top:40px;
}

.institution-card{
background:#1f2937;
padding:30px;
border-radius:8px;
}

.institution-card i{
font-size:35px;
color:#00c3ff;
margin-bottom:10px;
}

/* CONTACT PAGE */

.contact-section{
padding:80px 10%;
text-align:center;
}

.contact-container{
display:grid;
grid-template-columns:1fr 2fr;
gap:40px;
margin-top:40px;
}

.contact-info{
text-align:left;
}

.contact-form input,
.contact-form select,
.contact-form textarea{
width:100%;
padding:12px;
margin-bottom:15px;
background:#1f2937;
border:none;
color:white;
border-radius:5px;
}

.contact-form button{
padding:12px 30px;
background:#ff8c00;
border:none;
color:white;
cursor:pointer;
border-radius:5px;
}

@media(max-width:768px){

.contact-container{
grid-template-columns:1fr;
}

}
/* map section */
.map-section{
padding:80px 10%;
text-align:center;
}

.map-container{
margin-top:30px;
border-radius:10px;
overflow:hidden;
}

/* network animation section */
.network-animation span{
position:absolute;
width:6px;
height:6px;
background:#00c3ff;
border-radius:50%;
animation:networkMove 8s linear infinite;
}

@keyframes networkMove{

0%{
transform:translateY(0);
opacity:1;
}

100%{
transform:translateY(-800px);
opacity:0;
}

}

/*cctv animation*/
.cctv-animation{
font-size:60px;
color:#00c3ff;
animation:cctvRotate 5s infinite linear;
margin-top:20px;
}

@keyframes cctvRotate{

0%{transform:rotate(-20deg)}
50%{transform:rotate(20deg)}
100%{transform:rotate(-20deg)}

}


/* proffessional footer */
.footer{
background:#0a0f1c;
padding:60px 10%;
margin-top:80px;
}

.footer-container{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
gap:40px;
}

.footer h3,h4{
color:#00c3ff;
}

.footer p{
color:#aaa;
}

.copyright{
text-align:center;
margin-top:40px;
color:#666;
}


/* network bg animation */
/* NETWORK BACKGROUND */


.network-bg{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
overflow:hidden;
z-index:-1;
pointer-events:none;
}



.node{
position:absolute;
width:10px;
height:10px;
background:#00c3ff;
border-radius:50%;
box-shadow:0 0 10px #00c3ff;
animation:moveNodes 12s linear infinite;
}

.node:nth-child(1){left:10%; animation-delay:0s;}
.node:nth-child(2){left:30%; animation-delay:2s;}
.node:nth-child(3){left:50%; animation-delay:4s;}
.node:nth-child(4){left:70%; animation-delay:6s;}
.node:nth-child(5){left:90%; animation-delay:8s;}

@keyframes moveNodes{

0%{
top:100%;
opacity:0;
}

50%{
opacity:1;
}

100%{
top:-10%;
opacity:0;
}

}



/* social media */
.social-media{

padding:60px 10%;
text-align:center;

}

.social-icons{

display:flex;
justify-content:center;
gap:30px;
margin-top:25px;

}

.social-icons a{

font-size:35px;
color:#00c3ff;
transition:0.3s;

}

.social-icons a:hover{

color:#ff8c00;
transform:scale(1.2);

}

/* NEW SERVICES */
.service-card i{

font-size:40px;
color:#00c3ff;
margin-bottom:15px;

}

/*NAV FOR PHONES */

/* MOBILE MENU */

@media (max-width: 768px){

#navbar{
display:none;
flex-direction:column;
position:absolute;
top:70px;
right:0;
background:#0b132b;
width:100%;
padding:20px;
}

#navbar.active{
display:flex;
}

.menu-toggle{
display:block;
cursor:pointer;
font-size:24px;
}

}

/* whats app */
/* WhatsApp Button */

.whatsapp-button{
position:fixed;
bottom:25px;
right:25px;
background:#25D366;
color:white;
font-size:28px;
width:60px;
height:60px;
display:flex;
align-items:center;
justify-content:center;
border-radius:50%;
text-decoration:none;
box-shadow:0 4px 10px rgba(0,0,0,0.3);
z-index:1000;
}

.whatsapp-button:hover{
transform:scale(1.1);
}