.banner-scope .item-image {
    position: relative;
    width: 100%;
    height: auto;
}

.banner-scope .overlay {
    position: absolute;
    top: 50%;
    left: 25%;
    transform: translate(-50%, -50%);
    color: #fff;
    text-align: left; /* Default to center text for mobile */
    padding: 10px;
    border-radius: 5px; /* Optional, for rounded corners */
    width: 100%; /* Ensure the overlay spans the full width of the container */
}

.banner-scope .overlay h1 {
    margin: 0;
    font-size: 60px;
}

.banner-scope .highlight {
    color: #d8eb84;
}

.banner-scope .banner-font-color {
    color: #fff;
}

.banner-scope .line-break {
    display: block;
    margin: 5px 0;
}

/* Media query for desktop screens (min-width: 762px) */
@media (min-width: 1200px) {
    .banner-scope .overlay {
        top: 50%;
        left: 60%;
        transform: translate(-70%, -50%) scale(0.7);
        text-align: left;
    }

    .banner-scope .overlay h1 {
        font-size: 75px;
    }
}

/* Media query for desktop screens (min-width: 762px) */
@media (max-width: 1099px) {
    .banner-scope .overlay {
        top: 50%;
        left: 60%; /* Move overlay to left 55% on desktop */
        transform: translate(-77%,-50%) scale(0.5); /* Adjust the transform for left positioning */
        text-align: left; /* Align text to the left */
    }

    .banner-scope .overlay h1 {
         font-size: 75px; /* Font size for desktop */
    }
}

 /* Media query for mobile/tablet screens */
@media (max-width: 761px) {
    .banner-scope .overlay {
        top: 10%; /* Move overlay 20% from the top */
        left: 55%; /* Position overlay to the left 55% */
        transform: translate(-68%,-30%) scale(0.6); /* Adjust for mobile top positioning */
        text-align: left; /* Center the text for mobile */
    }

    .banner-scope .overlay h1 {
         font-size: 30px; /* Font size for mobile/tablet */
    }
}