@font-face {
    font-family: 'Cairo';
    src: url('fonts/Cairo-Regular.ttf') format('truetype');
    font-weight: 200 700;
    font-display: swap;
    font-style: normal;
}

:root {
    --logo1-color: #3b2c43;
    --logo2-color: #99aadf;
    --light-background-color: #d9e1e6;
    --dark-background-color: #777b83;
    --light-text-blue: #d9e1e6;
    --dark-text-blue-dark: #243f7f;
    --box-shadow: 0px 15px 25px rgba(0,0,0,0.08);
    --transition: all 0.5s ease;
    --c-brand-rgb: 6, 72, 98;
    /*--------------*/
    --c-dark: #1a1a18;
    --c-brand: #5E84C9;

    --c-brand-dark: #3b2c43;
    --c-brand-dark-rgp: 59, 44, 67;

    --c-brand-mid: #4176de;
    --c-brand-mid-rgp: 62, 117, 217;

    --c-brand-light: #99aadf;
    --c-brand-light-rgp: 153, 170, 223;

    --c-brand-rgb: 78, 87, 212;
    --c-body: #EDF1F2;
    --font-base: "Cairo", sans-serif;
    --box-shadow: 0px 15px 25px rgba(0,0,0,0.08);
    --transition: all 0.5s ease;
}


body {
    font-family: var(--font-base);
    line-height: 1.7;
    color: var(--c-dark);
}




h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
    font-weight: 600;
    color: var(--c-dark);
}

/* -- link -- */
a{
    text-decoration:none;
    color:var(--c-brand);
    transition:var(--transition);
}


a:hover{
    color:var(--box-shadow);
}

/* -- Img -- */
img{
    max-width:100%;
    height:auto;

}


/* -- Section -- */
.section-padding{
    padding-top:140px !important;
    padding-bottom:140px !important;
}

/* theme-shadow */
.theme-shadow {
    box-shadow: var(--box-shadow);
}

/* Image Zoom */

.image-zoom {
    position: relative;
    /* overflow: hidden; */
}

.image-zoom-wrapper {
    overflow: hidden;
    position: relative;
}

    .image-zoom-wrapper img {
        transition: var(--transition);
    }

.image-zoom:hover .image-zoom-wrapper img {
    transform: scale(1.1);
}


/* -- NavBar -- */
.navbar{
    box-shadow:var(--box-shadow);
}
.navbar-nav .nav-link{
    font-weight:800 !important;
    color:var(--c-brand-light);
}

.navbar-nav .nav-link.active {
    color:var(--c-brand-dark);
}


/* -- Btn -- */
.btn{
    font-weight:600;
    font-size:14px;
    text-transform:uppercase;
    border-radius:0;
    padding: 10px 24px;

}
.btn-brand{
    background-color: var(--c-brand);
    border-color: var(--c-brand);
    color:white;
}

.btn-brand:hover{
    background-color:var(--light-background-color);
    border-color: var(--light-background-color);
}

/* Section Title */
.section-title{
    margin-bottom:60px;
    
}
    .section-title h1 {
        color: var(--c-brand-mid);
    }
.section-title .line{
    width:60px;
    height:4px;
    background-color:var(--c-brand-dark);
    margin: 16px auto 24px auto;
}

.section-title p{
    max-width: 500px;
    margin-left:auto;
    margin-right:auto;
}
/* Home Section */
#HomeSection{
    background: linear-gradient(rgba(var(--c-brand-rgb),0.5), rgba(var(--c-brand-rgb),0.2)), url(/images/drone3.jpg);
    background-position:center;
    background-size:cover;

}


/* About */
#AboutSection {
    
}


/* iconbox */
.iconbox{
    width : 70px;
    height:70px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    background-color:rgb(var(--c-brand-rgb),0.1);
    color:var(--c-brand-light);
    font-size:34px;
    flex:none;
}


/* Service */
.service{
    position:relative;
    overflow:hidden;
    z-index:2;
}

.service::after{
    content:"";
    width:40px;
    height:40px;
    background:rgba(var(--c-brand-rgb),0.2);
    position:absolute;
    bottom:0;
    right:0;
    transition: var(--transition);
}
.service:hover::after{
    width:100%;
    height:100%;
    background:var(--c-brand-mid);
    z-index:-1;
}
.service:hover h5,
.service:hover p{
    color:white;

}

.service:hover .iconbox{
    background-color: rgba(255,255,255,0.2);
    color:white;
}

/* Counter Section */
#CounterSection {
    background: linear-gradient(rgba(var(--c-brand-dark-rgp),0.8), rgba(var(--c-brand-mid-rgp),0.2)), url(/images/drone2.jpg);
    background-position: center;
    background-size: cover;
    
}

#CounterSection img{
    opacity:0.1;
}

/* Gallary Section */
.gallary-item .iconbox {
    background-color: var(--c-brand);
    color: white;
    position: absolute;
    top: 40%;
    left: 50%;
    transform: translate(-50%, -50%);
    opacity: 0;
}

.gallary-item:hover .iconbox {
    opacity: 1;
    top: 50%;
}


/* Footer */

footer {
    padding-top: 120px;
}

.footer-top {
    padding-bottom: 40px;
    border-bottom: 1px solid rgba(255,255,255,0.1);
}

.footer-bottom {
    padding-top: 40px;
    padding-bottom: 40px;
}


footer li,
footer p,
footer a {
    color: rgba(255,255,255,0.7);
}

footer ul {
    list-style: none;
    padding: 0;
}

footer .line {
    width: 40px;
    height: 4px;
    background-color: var(--c-brand);
    margin-top: 12px;
    margin-bottom: 24px;
}

.social-icons a {
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(255,255,255,0.1);
    border-radius: 100px;
}

    .social-icons a:hover {
        background-color: var(--c-brand);
        color: white;
    }

/* --- PPT-inspired Hero --- */
#HomeSection.hero {
    background: linear-gradient(#EAF1F6 0%, #EAF1F6 65%, #223551 100%);
    position: relative;
    overflow: hidden;
}

.hero-logo { height: 72px; }
.hero-brand .brand-dark { color: var(--c-brand-dark); }
.hero-brand .brand-light { color: var(--c-brand-light); }

/* Hexagon mosaic */
.hex-stage { --img: url('/file/Dron1_extracted/ppt/media/image1.jpg'); }
.hex-row { display:flex; gap:12px; margin-top:-30px; }
.hex-row:first-child { margin-top: 0; }
.hex-row.offset { margin-left:56px; }

.hex {
    width:110px;
    height:120px;
    background-image: var(--img);
    background-size: 900px auto;
    background-position: var(--x, 50%) var(--y, 50%);
    clip-path: polygon(25% 6.7%, 75% 6.7%, 100% 50%, 75% 93.3%, 25% 93.3%, 0% 50%);
    box-shadow: 0 8px 18px rgba(0,0,0,.15);
}

.hex-solid { background: #122038; }

/* Drone overlay */
.hero-brand { position: relative; }
.hero-drone {
    position: absolute;
    top: -40px;
    right: -20px;
    width: 180px;
    opacity: .9;
    filter: drop-shadow(0 8px 18px rgba(0,0,0,.2));
}