﻿#mhgHeroCarousel,
#mhgHeroCarousel .carousel-inner,
#mhgHeroCarousel .carousel-item,
#mhgHeroCarousel .mhg-carousel-slide {
    height: 560px;
}

    #mhgHeroCarousel .mhg-carousel-slide {
        position: relative;
        background-size: cover;
        background-position: center center;
        background-repeat: no-repeat;
    }

    #mhgHeroCarousel .mhg-carousel-overlay {
        position: absolute;
        inset: 0;
        background: rgba(0, 0, 0, 0.45);
    }

    #mhgHeroCarousel .mhg-carousel-content {
        position: relative;
        z-index: 2;
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        text-align: center;
        color: #fff;
        padding: 20px;
    }

        #mhgHeroCarousel .mhg-carousel-content h2 {
            font-size: 52px;
            line-height: 1.1;
            font-weight: 700;
            margin-bottom: 16px;
        }

        #mhgHeroCarousel .mhg-carousel-content p {
            font-size: 18px;
            margin-bottom: 24px;
            max-width: 760px;
        }

    #mhgHeroCarousel .btn-danger {
        padding: 12px 28px;
        font-weight: 700;
    }

@media (max-width: 991px) {
    #mhgHeroCarousel,
    #mhgHeroCarousel .carousel-inner,
    #mhgHeroCarousel .carousel-item,
    #mhgHeroCarousel .mhg-carousel-slide {
        height: 460px;
    }

        #mhgHeroCarousel .mhg-carousel-content h2 {
            font-size: 38px;
        }
}

@media (max-width: 767px) {
    #mhgHeroCarousel,
    #mhgHeroCarousel .carousel-inner,
    #mhgHeroCarousel .carousel-item,
    #mhgHeroCarousel .mhg-carousel-slide {
        height: 400px;
    }

        #mhgHeroCarousel .mhg-carousel-content h2 {
            font-size: 28px;
        }

        #mhgHeroCarousel .mhg-carousel-content p {
            font-size: 15px;
        }
}
