/* Banner Spacing Fixes - Compact Mobile Design */

/* Main banner adjustments */
.banner {
    height: auto !important;
    min-height: 50vh;
    padding-bottom: 1.5rem;
}

.banner-content {
    position: relative !important;
    padding-top: 1.5rem;
    padding-bottom: 1rem;
}

/* Desktop and large screens */
@media screen and (min-width: 1441px) {
    .banner {
        min-height: 50vh;
        padding-bottom: 1.5rem;
    }
    
    .banner-content {
        padding-top: 1.5rem;
        padding-bottom: 1rem;
    }
}

/* Tablet and medium screens */
@media screen and (max-width: 1440px) {
    .banner {
        min-height: 50vh;
        padding-bottom: 1.5rem;
    }
    
    .banner-content {
        padding-top: 1.5rem;
        padding-bottom: 1rem;
    }
}

/* Tablet - 768px and below */
@media screen and (max-width: 768px) {
    .banner {
        min-height: 45vh;
        padding-bottom: 1.25rem;
    }
    
    .banner-content {
        padding-top: 1.25rem;
        padding-bottom: 0.75rem;
    }
}

/* Mobile - 580px and below */
@media screen and (max-width: 580px) {
    .banner {
        min-height: 40vh;
        padding-bottom: 1rem;
    }
    
    .banner-content {
        padding-top: 1rem;
        padding-bottom: 0.5rem;
    }
}

/* Small mobile - 425px and below */
@media screen and (max-width: 425px) {
    .banner {
        min-height: 35vh;
        padding-bottom: 1rem;
    }
    
    .banner-content {
        padding-top: 1rem;
        padding-bottom: 0.5rem;
    }
}

/* Extra small mobile - 375px and below */
@media screen and (max-width: 375px) {
    .banner {
        min-height: 32vh;
        padding-bottom: 0.75rem;
    }
    
    .banner-content {
        padding-top: 0.75rem;
        padding-bottom: 0.5rem;
    }
}