.bg-purple {
    background-color: #6f42c1 !important; /* Bootstrap's primary purple */
    color: #fff !important;
}

.banner {
    display: flex;
    justify-content: center;
    align-items: center;
    /* background-color: #f8f9fa;  */
}

.banner img {
    height: 100%; /* Ensures the image fills the height of the banner */
    width: auto; /* Maintains aspect ratio */
    object-fit: contain; /* Ensures the whole image fits within the container */
    display: block; /* Prevents inline spacing issues */
}

/* Styles for large screens (desktops, tablets) */
@media (min-width: 768px) {
    .banner {
        height: 20px; /* Height for larger screens */
    }
}

/* Styles for small screens (mobile devices) */
@media (max-width: 767px) {
    .banner {
        height: 20px; /* Smaller height for mobile */
    }
}