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

:root {
    /* Color Palette */
    --primary: #0b1a2b;
    /* Deep Navy */
    --secondary: #16243b;
    /* Dark Slate */
    --accent: #e2e8f0;
    /* White-Grey */
    --text-main: #ffffff;
    --text-muted: #9ca3af;
    --success: #10b981;
    --danger: #ef4444;

    /* Typography */
    --font-main: 'Inter', system-ui, -apple-system, sans-serif;

    /* Spacing */
    --container-width: 1200px;
    --header-height: 80px;

    /* Effects */
    --shadow-soft: 0 10px 30px rgba(0, 0, 0, 0.3);
    --shadow-card: 0 4px 6px rgba(0, 0, 0, 0.1);
    --radius: 12px;
    --transition: all 0.3s ease;
}

/* Reset & Base HTML */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-main);
    background-color: var(--primary);
    color: var(--text-main);
    line-height: 1.6;
    overflow-x: hidden;
}

a {
    text-decoration: none;
    color: inherit;
    transition: var(--transition);
}

ul {
    list-style: none;
}

img {
    max-width: 100%;
    display: block;
}

/* Typography Utilities */
h1,
h2,
h3,
h4,
h5,
h6 {
    font-weight: 700;
    margin-bottom: 1rem;
    line-height: 1.2;
}

h1 {
    font-size: 3.5rem;
}

h2 {
    font-size: 2.5rem;
}

h3 {
    font-size: 1.5rem;
}

p {
    margin-bottom: 1rem;
    color: var(--text-muted);
}

/* Layout Utilities */
.container {
    max-width: var(--container-width);
    margin: 0 auto;
    padding: 0 20px;
}

.section {
    padding: 80px 0;
}

.text-center {
    text-align: center;
}

.flex {
    display: flex;
}

.justify-between {
    justify-content: space-between;
}

.items-center {
    align-items: center;
}

.gap-1 {
    gap: 1rem;
}

.gap-2 {
    gap: 2rem;
}

/* Buttons */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 28px;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
    border: none;
    transition: var(--transition);
}

.btn-primary {
    background-color: var(--accent);
    color: var(--primary);
}

.btn-primary:hover {
    background-color: #cbd5e1;
    transform: translateY(-2px);
}

.btn-outline {
    background-color: transparent;
    border: 1px solid var(--accent);
    color: var(--accent);
}

.btn-outline:hover {
    background-color: var(--accent);
    color: var(--primary);
}

/* Navigation */
.navbar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: var(--header-height);
    background: rgba(11, 26, 43, 0.95);
    backdrop-filter: blur(8px);
    z-index: 1000;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

/* Animations */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }

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

.animate-fade-in {
    animation: fadeInUp 1.2s ease-out forwards !important;
    opacity: 1 !important;
}

.nav-container {
    height: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--accent);
    display: flex;
    align-items: center;
    gap: 10px;
}

.logo img {
    height: 40px;
}

.nav-links {
    display: flex;
    gap: 30px;
}

.nav-links a {
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--text-muted);
}

.nav-links a:hover,
.nav-links a.active {
    color: var(--accent);
}

.mobile-menu-btn {
    display: none;
    font-size: 1.5rem;
    color: var(--accent);
    cursor: pointer;
}

/* Footer */
footer {
    background-color: var(--secondary);
    padding: 60px 0 30px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.footer-grid {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 40px;
    margin-bottom: 40px;
}

.footer-brand h4 {
    color: var(--accent);
    font-size: 1.25rem;
    display: flex;
    align-items: center;
    margin-bottom: 15px;
}

.footer-brand h4 img {
    height: 35px !important;
}

.footer-links h5 {
    color: white;
    font-size: 1.25rem;
    margin-bottom: 20px;
}

.footer-links ul li {
    margin-bottom: 10px;
}

.copyright {
    text-align: center;
    padding-top: 30px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    font-size: 0.9rem;
    color: var(--text-muted);
}

/* Responsive */
@media (max-width: 768px) {
    h1 {
        font-size: 2.5rem;
    }

    h2 {
        font-size: 2rem;
    }

    .navbar {
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }

    .nav-links {
        display: none;
        flex-direction: column;
        position: fixed;
        top: var(--header-height);
        left: 0;
        width: 100%;
        background: rgba(11, 26, 43, 0.98);
        padding: 20px;
        text-align: center;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        z-index: 1000;
    }

    .nav-links.active {
        display: flex;
    }

    .mobile-menu-btn {
        display: block;
    }

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

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

/* Admin Dashboard */
.dashboard-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
}

/* Language Switcher */
.lang-switcher {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: 20px;
    padding-left: 20px;
    border-left: 1px solid rgba(255, 255, 255, 0.1);
}

.lang-btn {
    background: none;
    border: none;
    color: var(--text-muted);
    font-weight: 500;
    cursor: pointer;
    font-size: 0.9rem;
    padding: 2px 4px;
    transition: color 0.2s;
}

.lang-btn:hover,
.lang-btn.active {
    color: var(--accent);
}

.lang-sep {
    color: var(--text-muted);
    opacity: 0.5;
    font-size: 0.8rem;
}

/* Contact Page specific */
.contact-hero {
    height: 40vh;
    background: linear-gradient(rgba(11, 26, 43, 0.8), rgba(11, 26, 43, 0.8)), url('https://images.unsplash.com/photo-1516321318423-f06f85e504b3?ixlib=rb-4.0.3&auto=format&fit=crop&w=1920&q=80') center/cover;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.contact-card {
    background: var(--secondary);
    padding: 40px;
    border-radius: var(--radius);
    box-shadow: var(--shadow-soft);
    max-width: 600px;
    margin: -60px auto 80px;
    position: relative;
    z-index: 10;
    text-align: center;
}

.contact-icon {
    font-size: 3rem;
    color: var(--accent);
    margin-bottom: 20px;
}

.email-link {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 1.25rem;
    color: white;
    margin: 15px 0;
}

.email-link:hover {
    color: var(--accent);
}

/* Drone Container */
.drone-bg-container {
    position: fixed;
    top: 100px;
    right: 20px;
    width: 400px;
    aspect-ratio: 1280 / 543;
    pointer-events: none;
    z-index: 5;
    opacity: 0;
    transform: scale(0.1);
    transition: opacity 0.5s ease;
    transform-style: preserve-3d;
}

@media (max-width: 768px) {
    .drone-bg-container {
        width: 250px;
        /* Make the base drone smaller on mobile */
        top: 80px;
        /* Position it below the mobile nav bar */
        right: 10px;
        bottom: auto;
    }
}

/* Propeller Styles */
.propeller {
    position: absolute;
    width: 120px;
    /* Big enough to cover the static blades underneath */
    height: 120px;
    z-index: 3;
    /* Translate to center, then add perspective to match drone body angle */
    transform: translate(-50%, -50%) rotateX(65deg) rotateY(10deg);
    transform-style: preserve-3d;
}

.blade {
    width: 100%;
    height: 100%;
    border-radius: 50%;

    /* Realistic gray spinning motion blur */
    background: conic-gradient(from 0deg,
            rgba(180, 180, 180, 0.05) 0deg,
            rgba(100, 100, 100, 0.5) 40deg,
            rgba(200, 200, 200, 0.7) 90deg,
            rgba(100, 100, 100, 0.5) 140deg,
            rgba(180, 180, 180, 0.05) 180deg,
            rgba(100, 100, 100, 0.5) 220deg,
            rgba(200, 200, 200, 0.7) 270deg,
            rgba(100, 100, 100, 0.5) 320deg,
            rgba(180, 180, 180, 0.05) 360deg);

    /* Blurs anything beneath it (hides the static original blades and distorts background naturally) */
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);

    /* Soften the edges so it seamlessly blends into the air without looking like a hard circle */
    mask-image: radial-gradient(circle, black 35%, rgba(0, 0, 0, 0.4) 60%, transparent 70%);
    -webkit-mask-image: radial-gradient(circle, black 35%, rgba(0, 0, 0, 0.4) 60%, transparent 70%);

    animation: spin 0.02s linear infinite;
    /* Very fast spin */
}

@keyframes spin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

.prop-front-left {
    top: 25%;
    left: 35%;
}

.prop-front-right {
    top: 25%;
    left: 64%;
}

.prop-back-left {
    top: 60%;
    left: 33%;
}

.prop-back-right {
    top: 60%;
    left: 67%;
}