.header-logo img {
    max-width: 800px;
    width: 100%;
    height: auto;
    filter: drop-shadow(0 0 24px #00bcd4cc) drop-shadow(0 0 48px #a020f0cc);
    border-radius: 12px;
    margin-bottom: 0.5rem;
    animation: logo-glow 2.5s ease-in-out infinite alternate;
    background: #111;
}

@keyframes logo-glow {
    0% {
        filter: drop-shadow(0 0 12px #00bcd4cc) drop-shadow(0 0 24px #a020f0cc);
    }
    100% {
        filter: drop-shadow(0 0 36px #00bcd4ff) drop-shadow(0 0 72px #a020f0ff);
    }
}
/* Basic styling for LoGIX DIY site */
body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    background: #f8f9fa;
    color: #222;
}
header {
    background: #222;
    color: #fff;
    padding: 2.5rem 0 1rem 0;
    position: relative;
}

.header-logo {
    text-align: center;
    margin-bottom: 0.5rem;
}
.header-logo img {
    max-width: 420px;
    width: 100%;
    height: auto;
    filter: drop-shadow(0 0 16px #00bcd4cc);
    border-radius: 12px;
    margin-bottom: 0.5rem;
}
nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 1rem;
}
.logo {
    font-size: 1.5rem;
    font-weight: bold;
}
.nav-links {
    list-style: none;
    display: flex;
    gap: 1.5rem;
    margin: 0;
    padding: 0;
}
.nav-links li a {
    color: #fff;
    text-decoration: none;
    font-weight: 500;
    transition: color 0.2s, text-shadow 0.3s;
    padding: 0.25em 0.75em;
    border-radius: 6px;
    position: relative;
    z-index: 1;
}
.nav-links li a:hover {
    color: #fff;
    background: linear-gradient(90deg, #00bcd4 0%, #a020f0 100%);
    text-shadow: 0 0 8px #fff, 0 0 16px #00bcd4;
    box-shadow: 0 2px 12px #00bcd488;
}
.hero {
    background: linear-gradient(120deg, #00bcd4 60%, #a020f0 100%);
    color: #fff;
    padding: 3rem 1rem 2rem 1rem;
    text-align: center;
    border-radius: 12px;
    margin-top: 1.5rem;
    opacity: 0;
    animation: hero-fade-in 1.5s ease 0.2s forwards;
    box-shadow: 0 4px 32px #00bcd488;
}

@keyframes hero-fade-in {
    from { opacity: 0; transform: translateY(40px); }
    to { opacity: 1; transform: translateY(0); }
}
section {
    max-width: 900px;
    margin: 2rem auto;
    background: #fff;
    padding: 2rem;
    border-radius: 12px;
    box-shadow: 0 2px 16px rgba(0,188,212,0.08), 0 1.5px 8px #a020f022;
    transition: box-shadow 0.3s;
}
section:hover {
    box-shadow: 0 4px 32px #00bcd433, 0 2px 16px #a020f044;
}
section h2 {
    color: #00bcd4;
    margin-top: 0;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-shadow: 0 2px 12px #00bcd433;
}
/* Button style for links */
.hero a, section a.button {
    display: inline-block;
    margin-top: 1.2em;
    padding: 0.7em 1.6em;
    background: linear-gradient(90deg, #00bcd4 0%, #a020f0 100%);
    color: #fff;
    border-radius: 8px;
    font-weight: bold;
    text-decoration: none;
    box-shadow: 0 2px 12px #00bcd488;
    transition: background 0.3s, box-shadow 0.3s, transform 0.2s;
}
.hero a:hover, section a.button:hover {
    background: linear-gradient(90deg, #a020f0 0%, #00bcd4 100%);
    box-shadow: 0 4px 24px #a020f088;
    transform: scale(1.04);
}
footer {
    background: #222;
    color: #fff;
    text-align: center;
    padding: 1rem 0;
    margin-top: 2rem;
}
@media (max-width: 700px) {
    nav {
        flex-direction: column;
        align-items: flex-start;
    }
    .nav-links {
        flex-direction: column;
        gap: 0.5rem;
    }
    section {
        padding: 1rem;
    }
}