/* === Custom Banner === */
.custom-banner {
    display: flex;
    justify-content: center;
    align-items: center;
    background: linear-gradient(to right, #fff5f5, #fbe8e8);
    padding: 20px 10px;
    box-shadow: 0 6px 18px rgba(128, 0, 0, 0.25);
    animation: fadeIn 1.2s ease-out;
    position: relative;
    z-index: 1;
    width: 100vw;
    max-width: 100%;
    margin: 0 auto;
    margin-bottom: 10px; /* adjust the space as needed */
}

/* Banner image */
.custom-banner img {
    max-width: 1200px;
    width: 100%;
    height: auto;
    border-radius: 8px;
    border: 3px solid maroon;
    box-shadow: 0 4px 12px rgba(128, 0, 0, 0.4);
}

/* Fade-in animation */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: scale(0.95);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}