/* Footer */
footer {
    background: #600193;
    color: white;
    padding: 2.5rem 1.5rem;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 2rem;
    margin-top: 3rem;
}
footer a { color: #f0d4ff; }
footer h2, footer h4 { margin-bottom: 0.8rem; }
#footerDiamond img {
    width: 70px;
    margin: 0.8rem auto;
    display: block;
    transition: transform 0.25s;
    filter: drop-shadow(0px 0px 9px rgb(255, 255, 255));
}
#footerDiamond:hover img {
    transform: scale(1.08);
}
#FooterCenter {
    text-align: center;
}
#FooterRight input {
    width: 100%;
    padding: 0.5rem;
    margin-bottom: 0.5rem;
    border-radius: 6px;
    border: none;
}

@media screen and (max-width: 790px){
    
    /* 1. Target the footer container */
    footer { 
        display: flex;
        flex-direction: column; /* Stacks the divs vertically */
        align-items: center;    /* Centers the divs horizontally */
        text-align: center;     /* Centers text within those divs */
    }

    /* 2. Target the individual footer divs/columns */
    footer div {
        width: 100%;            /* Ensure they take full width */
        margin-bottom: 20px;    /* Add spacing between the stacked sections */
        padding: 0;             /* Reset any desktop-specific padding */
    }

    /* 3. Optional: Remove extra margins from the last element */
    footer div:last-child {
        margin-bottom: 0;
    }
}

/* Social icons */
.SocialMediaLinkIcon {
    width: 28px;
    height: 28px;
    display: inline-block;
    vertical-align: middle;
    margin-right: 0.4rem;
}