.cmp-message-box {
    position: relative;
    max-width: 1140px;
    margin: 40px auto 20px auto; 
    padding: 0 15px;
}

.cmp-message-box__badge {
    position: absolute;
    top: -20px;
    left: 45px;
    background: linear-gradient(90deg, #0b9347 0%, #009bdd 100%); 
    color: #ffffff;
    font-size: 1.15rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 8px 30px;
    border-radius: 20px;
    z-index: 2;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}

.cmp-message-box__container {
    border: 2px solid transparent;
    border-radius: 24px;
    background: 
        linear-gradient(#fbf9f4, #fbf9f4) padding-box, 
        linear-gradient(135deg, #0b9347 0%, #009bdd 100%) border-box; 
    padding: 3rem 2.5rem 2.5rem 2.5rem;
}

.cmp-message-box__text {
    color: #333333;
    font-size: 1.05rem;
    line-height: 1.6;
    
    /* Controls the height and enables scrolling */
    max-height: 250px; /* You can adjust this height to match your design needs */
    overflow-y: auto;
    padding-right: 15px; /* Prevents the text from touching the scrollbar */
    text-align: justify; /* Force justification on the container itself */
}

.cmp-message-box__text p {
    margin-bottom: 1.2rem;
}

/* Custom Webkit Scrollbar for the text area */
.cmp-message-box__text::-webkit-scrollbar {
    width: 6px; /* Sleek but usable */
}

.cmp-message-box__text::-webkit-scrollbar-track {
    background: #e5e5e5; 
    border-radius: 10px;
}

.cmp-message-box__text::-webkit-scrollbar-thumb {
    background: #0b9347; /* Matches your IFFCO Green badge */
    border-radius: 10px;
}

.cmp-message-box__text::-webkit-scrollbar-thumb:hover {
    background: #087035; /* Slightly darker green on hover */
}

.cmp-message-box__signoff {
    margin-top: 2rem;
}

.cmp-message-box__name {
    font-size: 1.25rem;
    font-weight: 800;
    color: #222222;
    margin-bottom: 0.2rem;
}

.cmp-message-box__designation {
    font-size: 1rem;
    color: #555555;
}

@media (max-width: 768px) {
    .cmp-message-box__badge {
        left: 25px;
        font-size: 1rem;
        padding: 6px 20px;
    }
    .cmp-message-box__container {
        padding: 3rem 1.5rem 2rem 1.5rem;
    }
    
    .cmp-message-box__text {
        max-height: 300px; /* Might want to give it a bit more room on mobile */
    }
}