/*
Custom CSS for TemplateMo 561 Purple Buzz

https://templatemo.com/tm-561-purple-buzz

*/

/* Carousel banner heading with background extending to left edge */
.carousel-inner .banner-heading {
    position: relative;
    display: inline-block;
    background-color: rgba(255, 255, 255, 0.8); /* White background with transparency */
    border-radius: 10px; /* Optional: rounded corners */
    padding: 20px 130px 20px 50px; /* Extra padding on right for longer background */
    margin-left: -100vw; /* Extend far to the left */
    padding-left: calc(100vw - 15px); /* Bring text back to position, account for container padding */
    color: #333 !important; /* Dark text color for white background */
}

/* Alternative approach for better responsive behavior */
@media (max-width: 768px) {
    .carousel-inner .banner-heading {
        margin-left: -50px;
        padding-left: 70px;
        padding-right: 120px; /* Extended padding for mobile too */
    }
}