@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&family=Teko:wght@500;700&display=swap');

    :root {
        --primary: #002147;
        --secondary: #00132B;
        --accent: #FF4500;
        --text: #F0F8FF;
        --bg: #E6E6FA;
        --font-main: 'Poppins', sans-serif;
        --font-heading: 'Teko', sans-serif;
    }
    
    * { margin: 0; padding: 0; box-sizing: border-box; }
    
    html { scroll-behavior: smooth; }
    
    body { 
        font-family: var(--font-main); 
        background-color: var(--bg); 
        color: #333; 
        line-height: 1.6; 
        overflow-x: hidden; 
    }
    
    h1, h2, h3, h4 { 
        font-family: var(--font-heading); 
        text-transform: uppercase; 
        letter-spacing: 1.5px; 
        color: var(--primary);
    }

    /* Header & Nav */
    header { display: flex; justify-content: space-between; align-items: center; padding: 1.5rem 5%; position: fixed; top: 0; width: 100%; background: rgba(0,0,0,0.85); z-index: 100; border-bottom: 2px solid var(--accent); backdrop-filter: blur(10px); } nav a { color: #fff; margin-left: 2rem; }
    
    .logo-link {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-decoration: none;
        gap: 0.5rem;
    }

    .logo-img {
        height: 50px;
        width: 50px;
        object-fit: contain;
        border-radius: 50%;
        border: 2px solid var(--accent);
        box-shadow: 0 0 10px rgba(0,0,0,0.5);
    }
    
    .logo-text { 
        color: var(--accent); 
        font-family: var(--font-heading);
        font-size: clamp(1.2rem, 3vw, 2.2rem); 
        text-transform: uppercase; 
        letter-spacing: 2px;
        font-weight: 900;
        text-shadow: 1px 1px 3px rgba(0,0,0,0.8);
    }
    
    nav a { 
        color: var(--text); 
        text-decoration: none; 
        font-weight: 600; 
        font-size: 1.1rem; 
        transition: color 0.3s ease; 
        text-transform: uppercase; 
        padding-bottom: 5px;
        position: relative;
    }
    
    nav a::after {
        content: '';
        position: absolute;
        width: 100%;
        height: 3px;
        background: var(--accent);
        bottom: 0;
        left: 0;
        transform: scaleX(0);
        transition: transform 0.3s ease;
        transform-origin: center;
    }
    
    nav a:hover::after, nav a.active::after {
        transform: scaleX(1);
    }
    
    nav a:hover, nav a.active { 
        color: var(--accent); 
    }
    
    /* Hero */
    .hero { min-height: 100vh; display: flex; flex-direction: column; justify-content: flex-end; padding: 240px 5% 5rem; background: linear-gradient(to bottom, rgba(0,0,0,0.2), rgba(0,0,0,0.9)), url('https://images.unsplash.com/photo-1541829070764-84a7d30dd3f3?auto=format&fit=crop&w=1920&q=80') center/cover; } .hero-content { max-width: 900px; padding-bottom: 2rem;} .hero-img { display: none; }
    
    .hero h1 { 
        color: white; 
        font-size: clamp(2.5rem, 6vw, 4.5rem); 
        margin-bottom: 1.5rem; 
        line-height: 1.1; 
        text-shadow: 2px 2px 5px rgba(0,0,0,0.7);
    }
    
    .hero p { 
        color: #ddd;
        font-size: clamp(1rem, 2vw, 1.4rem); 
        margin-bottom: 2.5rem; 
        font-weight: 500; 
        line-height: 1.6;
        text-shadow: 1px 1px 3px rgba(0,0,0,0.9);
        background: rgba(0,0,0,0.4);
        padding: 1.5rem;
        border-left: 4px solid var(--accent);
    }
    
    .btn-container { display: flex; gap: 1.5rem; flex-wrap: wrap; }
    
    .btn { 
        display: inline-block; 
        padding: 1rem 2.5rem; 
        font-size: 1rem; 
        font-weight: 800; 
        text-transform: uppercase; 
        text-decoration: none; 
        transition: all 0.3s ease; 
        cursor: pointer; 
        letter-spacing: 1px;
        clip-path: polygon(15px 0, 100% 0, calc(100% - 15px) 100%, 0 100%);
    }
    
    .btn-primary { 
        background: var(--accent); 
        color: var(--secondary); 
        border: 2px solid var(--accent);
    }
    
    .btn-primary:hover { 
        background: transparent; 
        color: var(--accent); 
    }
    
    .btn-secondary { 
        background: rgba(0,0,0,0.5); 
        color: white; 
        border: 2px solid white;
    }
    
    .btn-secondary:hover { 
        background: white; 
        color: var(--primary); 
    }

    /* Sections */
    section { padding: 6rem 5%; }
    
    .section-title { 
        font-size: clamp(2.5rem, 5vw, 3.5rem); 
        margin-bottom: 3rem; 
        color: var(--primary); 
        text-align: center;
        border-bottom: 4px solid var(--accent);
        display: inline-block;
        padding-bottom: 0.5rem;
    }
    
    .grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: center; }
    .grid-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 2rem; }
    
    .card { 
        padding: 2.5rem; 
        transition: transform 0.3s ease; 
        background: white; border: none; box-shadow: 0 15px 30px rgba(0,0,0,0.1); border-radius: 12px; color: #333;
    }
    
    .card:hover { 
        transform: translateY(-5px); 
    }
    
    .card h3 { 
        font-size: 1.8rem; 
        margin-bottom: 1rem; 
        color: inherit;
    }
    
    /* Footer */
    footer { 
        background: var(--secondary); 
        color: var(--text); 
        padding: 4rem 5% 2rem; 
        text-align: center; 
    }
    
    .footer-content { 
        display: grid; 
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); 
        gap: 2rem; 
        text-align: left; 
        margin-bottom: 2rem; 
    }
    
    .footer-content h4 { 
        color: var(--accent); 
        margin-bottom: 1rem; 
        font-size: 1.2rem;
    }
    
    .footer-bottom { 
        border-top: 1px solid rgba(255,255,255,0.1); 
        padding-top: 2rem; 
        font-size: 0.9rem; 
        opacity: 0.7; 
    }

    .contact-form { display: flex; flex-direction: column; gap: 1.5rem; }
    .contact-form input, .contact-form textarea { padding: 1rem; border: 1px solid #ccc; font-family: var(--font-main); }
    .contact-form textarea { resize: vertical; min-height: 150px; }
    .contact-form button { padding: 1rem; background: var(--primary); color: white; border: none; font-weight: bold; cursor: pointer; }
    .contact-form button:hover { background: var(--accent); }

    @media (max-width: 768px) {
        .grid-2 { grid-template-columns: 1fr; }
        .hero h1 { font-size: 2.5rem; }
        .hero { flex-direction: column; padding-top: 120px; text-align: center; }
        .hero-img { height: 300px; width: 100%; display: block; margin-top: 2rem; }
        nav { display: none; } 
        header { flex-direction: column; text-align: center; gap: 1rem; padding: 1rem; }
        .logo-link { justify-content: center; }
    }