body{
    margin:0;
    padding:0;
    font-family:Arial, sans-serif;
    background:#f5f7fb;
}

.header{

position:fixed;

top:0;

left:0;

width:100%;

height:90px;

background:white;

box-shadow:0 2px 20px rgba(0,0,0,.08);

display:flex;

align-items:center;

justify-content:space-between;

padding:0 2px;

z-index:999;

}

.logo img{

height:140px;

}

.menu{
    display:flex;
    gap:30px;
}

.menu a{
    text-decoration:none;
    color:#04142B;
    font-weight:600;
    margin:0 15px;
}

.menu a:hover,
.menu a.active{
    color:#FF5B0A;
}

.menu a::after{

content:'';

position:absolute;

left:0;

bottom:-8px;

width:0;

height:2px;

background:#FF5B0A;

transition:.3s;

}

.menu a:hover::after{

width:100%;

}

.btn{
    background:#FF5B0A;
    color:white;
    padding:12px 25px;
    border-radius:30px;
    text-decoration:none;
}
/* HERO SECTION */

.hero{
    margin-top:90px;
}

.hero{

height:750px;

background-image:
url('../images/hero/drone-hero.jpg');

background-size:cover;

background-position:center;

display:flex;

align-items:center;

padding-left:60px;

}

.hero-content{

max-width:500px;

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

backdrop-filter:blur(12px);

padding:40px;

border-radius:25px;

box-shadow:0 20px 50px rgba(0,0,0,.12);

}
.hero h1{

font-size:55px;

line-height:1.1;

}


.hero-text{

font-size:24px;

color:#1e293b;

margin-bottom:30px;

}

.hero-buttons{
    display:flex;
    gap:15px;
    flex-wrap:wrap;
}

.white-btn{

background:white;
color:#04142B;

border:1px solid #dbe2ea;

}
/* STATS SECTION */

.stats{

margin-top:-60px;

position:relative;

z-index:10;

}

.stats-container{

width:90%;

max-width:1200px;

margin:auto;

background:white;

padding:40px;

border-radius:25px;

display:grid;

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

gap:20px;

box-shadow:0 10px 30px rgba(0,0,0,.10);

}

.stat{
    text-align:center;
    transition:0.3s;
}

.stat:hover{
    transform:translateY(-8px);
}
.service-card:hover,
.project-card:hover{
    transform:translateY(-20px);
    box-shadow:0 20px 40px rgba(0,0,0,.12);
}

.stat h2{

font-size:48px;

color:#0B3B8C;

margin-bottom:10px;

}

.stat p{

color:#64748b;

font-size:18px;

}
/* ABOUT SECTION */

.about{

padding:100px 0;

background:#f8fafc;

}

.about-container{

width:90%;

max-width:1200px;

margin:auto;

display:flex;

align-items:center;

gap:60px;

}

.about-left{

flex:1;

}

.about-tag{

color:#FF5B0A;

font-weight:700;

letter-spacing:2px;

}

.about-left h2{

font-size:48px;

color:#04142B;

margin:20px 0;

}

.about-left p{

font-size:18px;

line-height:1.8;

color:#475569;

margin-bottom:20px;

}

.about-right{

flex:1;

}

.about-right img{

width:100%;

border-radius:20px;

box-shadow:0 10px 30px rgba(0,0,0,.15);

}
/* SERVICES SECTION */

.services{

padding:100px 0;

background:white;

}

.services-title{

text-align:center;

margin-bottom:60px;

}

.services-title span{

color:#FF5B0A;

font-weight:700;

letter-spacing:2px;

}

.services-title h2{

font-size:48px;

color:#04142B;

margin-top:20px;

}

.services-grid{

width:90%;

max-width:1200px;

margin:auto;

display:grid;

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

gap:30px;

}

.service-card{

background:#ffffff;

padding:35px;

border-radius:20px;

box-shadow:0 10px 30px rgba(0,0,0,.08);

transition:.3s;

}

.service-card:hover{

transform:translateY(-10px);

}

.service-card h3{

color:#04142B;

margin-bottom:15px;

}

.service-card p{

color:#64748b;

line-height:1.7;

}
/* TRAINING SECTION */

.training{

height:500px;

background-image:
linear-gradient(
rgba(4,20,43,.75),
rgba(4,20,43,.75)
),
url('../images/hero/drone-hero.jpg');

background-size:cover;

background-position:center;

display:flex;

align-items:center;

justify-content:center;

}

.training-content{

text-align:center;

max-width:800px;

color:white;

}

.training-content span{

color:#FF5B0A;

font-weight:700;

letter-spacing:2px;

}

.training-content h2{

font-size:52px;

margin:20px 0;

}

.training-content p{

font-size:20px;

margin-bottom:30px;

line-height:1.8;

}
/* PROJECTS SECTION */

.projects{

padding:100px 0;

background:#f8fafc;

}

.projects-title{

text-align:center;

margin-bottom:60px;

}

.projects-title span{

color:#FF5B0A;

font-weight:700;

letter-spacing:2px;

}

.projects-title h2{

font-size:48px;

color:#04142B;

margin-top:20px;

}

.projects-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:30px;
}

.project-card{
    background:#fff;
    border-radius:20px;
    overflow:hidden;
    box-shadow:0 10px 30px rgba(0,0,0,0.08);
}

.project-card img{
    width:100%;
    height:250px;
    object-fit:cover;
    display:block;
}

/* CLIENTS SECTION */

.clients{

padding:100px 0;

background:white;

}

.clients-title{

text-align:center;

margin-bottom:50px;

}

.clients-title span{

color:#FF5B0A;

font-weight:700;

letter-spacing:2px;

}

.clients-title h2{

font-size:48px;

color:#04142B;

margin-top:20px;

}

.client-logos{

width:90%;

max-width:1200px;

margin:auto;

display:grid;

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

gap:25px;

}

.client-logo{

background:#f8fafc;

padding:40px;

text-align:center;

border-radius:15px;

font-weight:700;

color:#04142B;

box-shadow:0 5px 15px rgba(0,0,0,.05);

}
/* CONTACT CTA */

.cta{

padding:120px 20px;

background:#04142B;

text-align:center;

}

.cta-content{

max-width:900px;

margin:auto;

}

.cta h2{

font-size:52px;

color:white;

margin-bottom:25px;

}

.cta p{

font-size:20px;

color:#cbd5e1;

margin-bottom:35px;

line-height:1.8;

}
/* FOOTER */

.footer{

background:#020913;

padding:80px 0;

}

.footer-container{

width:90%;

max-width:1200px;

margin:auto;

display:grid;

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

gap:40px;

}

.footer-col h3{

color:#FF5B0A;

margin-bottom:20px;

}

.footer-col p{

color:#cbd5e1;

margin-bottom:10px;

line-height:1.8;

}

/* ABOUT PAGE */

.page-banner{

height:400px;

background:
linear-gradient(
rgba(4,20,43,.75),
rgba(4,20,43,.75)
),
url('../images/hero/drone-hero.jpg');

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

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

text-align:center;

color:white;

margin-top:90px;

}

.page-banner h1{

font-size:70px;

margin-bottom:20px;

}

.page-banner p{

font-size:22px;

}

.about-page{

padding:100px 0;

background:white;

}

.mission-section{

width:90%;

max-width:1200px;

margin:0 auto 100px;

display:grid;

grid-template-columns:1fr 1fr;

gap:30px;

}

.mission-card{

background:#f8fafc;

padding:40px;

border-radius:20px;

box-shadow:0 10px 25px rgba(0,0,0,.08);

}

.mission-card h3{

color:#FF5B0A;

margin-bottom:20px;

font-size:30px;

}

/* SERVICES PAGE */

.services-page{

padding:100px 0;

background:#f8fafc;

}

.services-page .services-grid{

width:90%;

max-width:1200px;

margin:auto;

display:grid;

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

gap:30px;

}

/* CONTACT PAGE */

.contact-section{

padding:100px 0;

background:#f8fafc;

}

.contact-container{

width:90%;

max-width:1200px;

margin:auto;

display:grid;

grid-template-columns:1fr 1fr;

gap:50px;

}

.contact-info h2{

font-size:42px;

margin-bottom:20px;

color:#04142B;

}

.contact-info p{

margin-bottom:20px;

line-height:1.8;

}

.contact-form{

background:white;

padding:40px;

border-radius:20px;

box-shadow:0 10px 25px rgba(0,0,0,.08);

}

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

width:100%;

padding:15px;

margin-bottom:20px;

border:1px solid #ddd;

border-radius:10px;

}

.contact-form textarea{

height:150px;

resize:none;

}


```css
/* PROJECT PAGE */

.projects-page{

padding:100px 0;

background:#f8fafc;

}

.projects-title{

text-align:center;

margin-bottom:60px;

}

.projects-title span{

color:#FF5B0A;

font-weight:700;

letter-spacing:2px;

}

.projects-title h2{

font-size:48px;

color:#04142B;

margin-top:20px;

}

.projects-grid{

width:90%;

max-width:1200px;

margin:auto;

display:grid;

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

gap:30px;

}

.project-card{

background:white;

border-radius:20px;

overflow:hidden;

box-shadow:0 10px 30px rgba(0,0,0,.08);

transition:.3s;

}

.project-card:hover{

transform:translateY(-10px);

}

.project-card img{

width:100%;

height:250px;

object-fit:cover;

}

.project-card h3{

padding:20px 20px 10px;

color:#04142B;

}

.project-card p{

padding:0 20px 20px;

color:#64748b;

line-height:1.8;

}
```

```css
/* PREMIUM PROJECT PAGE */

.project-detail{

width:90%;

max-width:1200px;

margin:100px auto;

display:grid;

grid-template-columns:1fr 1fr;

gap:60px;

align-items:center;

}

.project-image img{
width:100%;
height:auto;
object-fit:block;
border-radius:20px;
}

.project-content h2{

font-size:42px;

color:#04142B;

margin-bottom:20px;

}

.project-content p{

font-size:18px;

line-height:1.9;

color:#475569;

margin-bottom:20px;

}

.project-content h3{

color:#FF5B0A;

margin-top:25px;

margin-bottom:15px;

}

.project-content li{

margin-bottom:10px;

line-height:1.7;

}
```
```css
/* =========================
   MOBILE RESPONSIVE CSS
========================= */

@media(max-width:992px){

.header{
flex-direction:column;
height:auto;
padding:15px;
}

.logo img{
height:90px;
}

.menu{
flex-wrap:wrap;
justify-content:center;
gap:15px;
}

.hero{
padding:30px;
height:auto;
min-height:700px;
}

.hero-content{
max-width:100%;
}

.hero h1{
font-size:42px;
}

.about-container{
flex-direction:column;
}

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

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

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

.footer-container{
grid-template-columns:1fr;
text-align:center;
}

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

.project-detail{
grid-template-columns:1fr;
}

.project-image{
order:1;
}

.project-content{
order:2;
}

}


/* MOBILE */

@media(max-width:768px){

.hero{
padding:20px;
}

.hero-content{
padding:25px;
}

.hero h1{
font-size:34px;
}

.hero-text{
font-size:18px;
}

.hero-buttons{
flex-direction:column;
}

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

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

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

.client-logos{
grid-template-columns:1fr;
}

.page-banner h1{
font-size:42px;
}

.about-left h2,
.services-title h2,
.projects-title h2,
.clients-title h2,
.cta h2{
font-size:34px;
}

.training-content h2{
font-size:34px;
}

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

}


/* SMALL MOBILE */

@media(max-width:480px){

.header{
padding:10px;
}

.logo img{
height:70px;
}

.menu a{
font-size:14px;
margin:0 5px;
}

.hero h1{
font-size:28px;
}

.hero-text{
font-size:16px;
}

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

.page-banner{
height:300px;
}

.page-banner h1{
font-size:32px;
}

.btn{
padding:10px 20px;
font-size:14px;
}

}
```

/* PROJECT DETAIL PAGE */

.project-detail{
    width:90%;
    max-width:1200px;
    margin:80px auto;
    background:#fff;
    border-radius:20px;
    overflow:hidden;
    box-shadow:0 10px 30px rgba(0,0,0,.08);
}

.project-image img{
    width:100%;
    height:auto;
    display:block;
}

.project-content{
    padding:40px;
}

.project-content h2{
    font-size:38px;
    color:#04142B;
    margin-bottom:20px;
}

.project-content p{
    font-size:18px;
    line-height:1.8;
    color:#64748b;
    margin-bottom:20px;
}

.project-content h3{
    color:#FF5B0A;
    margin-top:30px;
    margin-bottom:15px;
}

.project-content ul{
    padding-left:25px;
}

.project-content li{
    margin-bottom:12px;
    color:#475569;
}

/* HERO CAPABILITIES */

.capabilities{
    width:90%;
    max-width:1200px;
    margin:-40px auto 80px;
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:25px;
    position:relative;
    z-index:20;
}

.capability-card{
    background:#fff;
    padding:25px;
    border-radius:18px;
    box-shadow:0 10px 25px rgba(0,0,0,.08);
    transition:.3s;
    text-align:center;
}

.capability-card:hover{
    transform:translateY(-8px);
}

.capability-card h3{
    color:#04142B;
    margin-bottom:12px;
    font-size:22px;
}

.capability-card p{
    color:#64748b;
    line-height:1.7;
}

@media(max-width:768px){

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


}

/* WhatsApp Floating Button */

.whatsapp-float{
    position:fixed;
    bottom:25px;
    right:25px;
    z-index:9999;
}

.whatsapp-float img{
    width:40px;
    height:40px;
    border-radius:50%;
    box-shadow:0 5px 20px rgba(0,0,0,.25);
    transition:.3s;
}

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