/* Color Palette from your Logo */
:root {
    --charcoal-dark: #07090F; /* Deepest black/charcoal */
    --cosmic-blue: #0A192F; /* Deep cosmic blue */
    --cyan-glow: #00F2FF; /* The bright cyan energy */
    --metallic-silver: linear-gradient(180deg, #FFFFFF 0%, #BCC6CC 50%, #8E9196 100%);
    --glass-panel: rgba(255, 255, 255, 0.05);
}

/* 1. Deep Space Background */
body {
    background: radial-gradient(circle at center, var(--cosmic-blue) 0%, var(--charcoal-dark) 100%);
    background-attachment: fixed;
    color: #E6E6E6;
    font-family: 'Segoe UI', Roboto, sans-serif;
}

/* 2. Metallic Logo-Style Header */
.navbar-brand {
    font-weight: 800;
    font-size: 1.8rem;
    background: var(--metallic-silver);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 0 5px rgba(0, 242, 255, 0.3));
    letter-spacing: 1px;
}

.navbar-brand {
    display: flex;
    align-items: center;
    background: var(--metallic-silver);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-decoration: none;
}

/* 3. Glowing Cyan Navbar Border */
.navbar {
    background: rgba(7, 9, 15, 0.9) !important;
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--cyan-glow);
    box-shadow: 0 0 20px rgba(0, 242, 255, 0.2);
}

/* 4. Glassmorphism Panels for Content */
.feature-card, .contact-card {
    background: var(--glass-panel);
    border: 1px solid rgba(0, 242, 255, 0.1);
    backdrop-filter: blur(15px);
    border-radius: 12px;
    transition: 0.4s ease;
}

    .feature-card:hover {
        border-color: var(--cyan-glow);
        box-shadow: 0 0 25px rgba(0, 242, 255, 0.4);
        transform: translateY(-5px);
    }

/* 5. Glowing Buttons (Cyan Energy) */
.btn-chakra {
    background: transparent;
    color: var(--cyan-glow);
    border: 2px solid var(--cyan-glow);
    font-weight: bold;
    text-transform: uppercase;
    padding: 10px 30px;
    border-radius: 4px; /* Slightly sharper for tech feel */
    box-shadow: inset 0 0 10px rgba(0, 242, 255, 0.2), 0 0 10px rgba(0, 242, 255, 0.2);
    transition: 0.3s;
}

    .btn-chakra:hover {
        background: var(--cyan-glow);
        color: var(--charcoal-dark);
        box-shadow: 0 0 30px var(--cyan-glow);
    }
/* Ensure the brand container uses Flexbox for perfect vertical alignment */


/* Specific styling for the logo image */
.logo-glow {
    filter: drop-shadow(0 0 8px rgba(0, 242, 255, 0.6)); /* Matches the cyan glow in your logo */
    object-fit: contain;
    /* Ensure the text doesn't lose its gradient because of the image */
    -webkit-text-fill-color: initial;
}

.logo-glow1 {
    filter: drop-shadow(0 0 8px rgba(0, 242, 255, 0.6)); /* Matches the cyan glow in your logo */
    object-fit: contain;
    /* Ensure the text doesn't lose its gradient because of the image */
    -webkit-text-fill-color: initial;
}

/* Ensure the text part keeps the gradient after the image */
.navbar-brand span {
    background: var(--metallic-silver);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}