/* --- NEW: Contact Page Hero Banner --- */
.contact-hero-banner {
    width: 100%;
    height: 80vh; /* 50% of the viewport height. Adjust as needed. */
    min-height: 400px; /* Ensures it's not too short on wide screens */
    overflow: hidden;
    position: relative;
}

.contact-hero-banner #ingenuityImg {
    width: 100%;
    height: 100%;
    object-fit: cover; /* This is the key: it makes the image fill the container without distortion */
    object-position: center; /* You can change this to 'top', 'bottom', etc. */
}
/* --- END: New Banner Styles --- */


/* --- Adjustments to existing styles --- */
@media (min-width: 0) {
    /* This rule is no longer needed as object-fit handles it */
    /* #ingenuityImg { width: 100%; } */

    /*#logoImg {*/
    /*    top: 20px; !* Adjust positioning for the new banner *!*/
    /*    right: 20px;*/
    /*    width: 120px;*/
    /*}*/
    #footer { position: relative !important; }
    #toCoverFooter { margin-bottom: 0 !important; }
}



/* public/css/contact.css */
@media (min-width: 0) {
    #ingenuityImg {
        width: 100%;
    }

    /* Footer styling should ideally be global or handled by layout context,
       but if specific to contact page for some reason: */
   #footer { position: relative !important; }
    #toCoverFooter { margin-bottom: 0 !important; }
}

@media (min-width: 992px) {
    #ingenuityImg {
        width: 75%;
    }
}

.blink {
    animation: blinker 1s linear infinite;
}

@keyframes blinker {
    50% {
        opacity: 0;
    }
}