.hero {
    background: #f5f7fa;
    padding: 50px 0;
}

.banner img {
    max-height: 60px;
    margin: 10px;
}

.section-title {
    border-left: 6px solid #0d6efd;
    padding-left: 12px;
    margin-bottom: 30px;
}

footer {
    background: #111;
    color: #ccc;
    padding: 40px 0;
}

footer a {
    color: #aaa;
    text-decoration: none;
}

footer a:hover {
    color: #fff;
}

/* Override the default Swiper height for sponsor banner */
.banner .swiper {
    height: auto !important;
    /* Remove fixed 500px height */
    min-height: 60px;
    /* Set minimum height for your images */
}

/* Ensure the banner section collapses to content */
.banner {
    overflow: hidden;
}

/* Container should clip overflow */
.banner .container {
    overflow: hidden;
}

/* Sponsor slides container */
#sponsorSlides {
    display: flex;
    align-items: center;
    height: 60px;
    /* Fixed height for consistent banner */
}

.previewSwiper {
    max-height: 100%;
}

.previewSwiper canvas {
    width: 100% !important;
    height: auto !important;
    max-height: 100%;
    object-fit: contain;
}

/* prevent swiper scaling */
.swiper-slide {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Minimal fix - add to bottom of your CSS */
html {
    height: 100%;
}

body {
    min-height: 100%;
    display: flex;
    flex-direction: column;
}

/* The content wrapper before footer */
.container-fluid {
    flex: 1;
}