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

:root {
    --primary-color: #00d2ff; /* Cyan neon */
    --secondary-color: #0a0e17; /* Deep space blue */
    --text-color: #e0e6ed;
    --accent-color: #ffb74d; /* Gold/Orange */
    --card-bg: rgba(16, 24, 40, 0.7); /* Glass effect */
    --card-border: rgba(0, 210, 255, 0.3);
}

body {
    font-family: 'Montserrat', sans-serif;
    margin: 0;
    padding: 0;
    background-image: url('../images/bg-universe.png');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    background-repeat: no-repeat;
    color: var(--text-color);
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

/* Overlay to darken the background image for readability */
body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, rgba(10, 14, 23, 0.9), rgba(10, 14, 23, 0.7));
    z-index: -1;
}

header {
    background-color: rgba(10, 14, 23, 0.8);
    backdrop-filter: blur(10px);
    padding: 1rem 2rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo-container img {
    height: 90px;
    margin-right: 15px;
    filter: brightness(0) invert(1); /* Make logos white if possible, or keep original */
}

/* Since logos might be colored, let's remove the filter if they look bad, 
   but for a dark theme white logos are usually better. 
   If original logos are dark, this is needed. If they are colored, maybe not. 
   Let's comment it out for safety unless we know they are monochrome. */
.logo-container img {
    filter: none; 
}

.hero {
    text-align: center;
    padding: 4rem 1rem;
    max-width: 900px;
    margin: 0 auto;
}

.hero h1 {
    color: #fff;
    font-size: 3rem;
    margin-bottom: 0.5rem;
    text-shadow: 0 0 20px rgba(0, 210, 255, 0.5);
    letter-spacing: 1px;
}

.hero h2 {
    font-weight: 300;
    font-size: 1.5rem;
    color: var(--primary-color);
    margin-top: 0;
    text-transform: uppercase;
    letter-spacing: 2px;
}

.hero p {
    font-size: 1.1rem;
    line-height: 1.6;
    color: #b0b8c4;
    margin-top: 1.5rem;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
}

.projects-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 2.5rem;
    padding: 2rem;
    max-width: 1200px;
    margin: 0 auto;
    flex-grow: 1;
}

.card {
    background-color: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: 12px;
    padding: 2.5rem;
    text-align: center;
    transition: all 0.3s ease;
    backdrop-filter: blur(10px);
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: linear-gradient(90deg, var(--primary-color), var(--accent-color));
    opacity: 0;
    transition: opacity 0.3s;
}

.card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
    border-color: var(--primary-color);
}

.card:hover::before {
    opacity: 1;
}

.card h3 {
    margin-top: 0;
    color: #fff;
    font-size: 1.5rem;
}

.card p {
    color: #a0aab5;
    margin-bottom: 2rem;
    font-size: 0.95rem;
    flex-grow: 1;
}

.btn {
    display: inline-block;
    padding: 0.8rem 2rem;
    background: transparent;
    color: var(--primary-color);
    text-decoration: none;
    border: 2px solid var(--primary-color);
    border-radius: 50px;
    font-weight: 600;
    transition: all 0.3s;
    text-transform: uppercase;
    font-size: 0.9rem;
    letter-spacing: 1px;
    margin-top: auto;
}

.btn:hover {
    background-color: var(--primary-color);
    color: #000;
    box-shadow: 0 0 15px rgba(0, 210, 255, 0.4);
}

footer {
    background-color: rgba(10, 14, 23, 0.9);
    text-align: center;
    padding: 2rem;
    font-size: 0.85rem;
    color: #666;
    margin-top: auto;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

@media (max-width: 768px) {
    header {
        flex-direction: column;
        gap: 1rem;
        padding: 1rem;
    }
    
    .hero {
        padding: 2rem 1rem;
    }

    .hero h1 {
        font-size: 2rem;
    }
    
    .logo-container img {
        height: 40px;
    }
    
    .projects-grid {
        padding: 1rem;
        gap: 1.5rem;
        grid-template-columns: 1fr;
    }
}