:root {
    font-family: Inter, sans-serif;
    --primary-color: #8BCC00;
    --secodary-color: #5D65C0;
    --secodary-color-active: #3D4380;
    --neutral-color-1: #000000; /* pitch black */
    --neutral-color-2: #1F1F1F;
    --text-color-primary: #EBEBEB;
    --text-color-secondary: #c2c2c2;
    --text-color-tertiary: #999999;
    --line-height: 1.5;
}
footer {
    margin-top: 144px;
    margin-bottom: 64px;
    display: flex;
    flex-direction: row;
    align-items: flex-start; /* Align items to the top for a cleaner look with multi-line content */
    justify-content: space-evenly; /* Distributes items with equal space around them, including at the ends */
    background-color: rgba(0, 0, 0, 0.8); /* adjusted to pure black tint */
    backdrop-filter: blur(5px);
    border-top: 1px solid var(--text-color-secondary);
    color: var(--text-color-primary);
    width: 100%;
    padding: 48px 64px; /* Added vertical padding for more space */
    box-sizing: border-box;
    gap: 24px; /* Ensures minimum space between items */
}



.footer-item {text-align: left;
}
.footer-contact-details p{color: var(--text-color-tertiary);}

.footer-contact-details a{color: var(--text-color-tertiary);
text-decoration: none;}

.footer-contact-details a:hover {
    color: var(--primary-color);
    transition: color 0.3s ease; 
}

.footer-logo .logo-svg {
    width: 144px;
    height: auto;
    fill: var(--text-color-primary);
}


@media (max-width: 768px) {
    footer {
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 40px;
        padding: 40px 24px;
        text-align: center;
        margin-top: 64px;
        margin-bottom: 40px;
    }

    .footer-item {
        text-align: center;
        width: 100%;
        max-width: 350px;
    }
    /* Ensure footer socials stay visible even though header hides its own */
    .footer-social .social-media-container { display: flex; justify-content: center; }
}
@media (max-width: 420px) {
    footer { padding: 40px 20px; }
    .footer-contact-details p { font-size: 0.95rem; line-height: 1.5; }
}
