.bannar-image-con{
display: flex;
flex-direction: row;
box-sizing: border-box; 
position: relative;
background-image: url('../assets/images/home-page-1.6.webp');
background-size: cover; /* or 'contain', or specific dimensions */
background-repeat: no-repeat;
min-height: 400px; /* Example height */
width: 100%; /* Ensure it takes full width if not already set */
margin-top:1px;
border-radius: 5px;
}

.msg-title-left-container{
display: flex;
width:50%;
flex-direction: column;
align-items: flex-end; /* Vertically centers content within each section */
justify-content: center;	
overflow:hidden;
}

.msg-title-right-container{
display: flex;
width:50%;
flex-direction: column;
align-items: center; /* Vertically centers content within each section */
justify-content: flex-end;	
overflow:hidden;
}

.msg-title-right-container-1{
display: flex;
width:100%;
height:60%;
flex-direction: column;
align-items: center; /* Vertically centers content within each section */
justify-content: flex-end;	
}

.msg-title-right-container-2 {    
display: flex; /* Flexbox layout */
width:100%;
height:40%;
flex-direction: column;
justify-content: flex-end; /* Center horizontally */
align-items: center; /* Center vertically */
}

.msg-title-right-container-2 img {
    width: 100%; /* makes the image responsive within its container */
    max-width: 170px; /* maximum size */
    height: auto; /* maintain aspect ratio */
}

.msg-line{
color: white; /* Black color for text */
padding-left:16px;
font-size: var(--font-size-h5); /* Adjust size as needed */
font-weight: var(--font-weight-medium); 
text-shadow: 1px 1px 2px rgba(255, 255, 255, 0.1); /* Soft white shadow for readability */
font-family: var(--font-branding); /* Clear, legible typography */	
}

.semi-transparent-title-box {	
width:50%;
height:50%;
background-color: rgba(30, 108, 174, 1);
border-radius: 30px;
display: flex;              /* Enables Flexbox */
flex-direction: column;     /* Stacks children vertically */
justify-content: center;    /* Centers children vertically in the container */
align-items: flex-start;    /* Aligns children to the start of the flex-direction (left) */
padding-left: 20px;         /* Adds padding inside the box, consider if you want it around the text */
}

/* Soft white shadow for readability */
.banner-first-text {
color: white; 
font-size: var(--font-size-h2); 
font-weight: var(--font-weight-bold); 
text-shadow: 1px 1px 2px rgba(255, 255, 255, 0.7); 
font-family: var(--font-family-base); 
}

.banner-second-text {
color: white; 
font-size: var(--font-size-h5);
font-weight: var(--font-weight-medium); 
text-shadow: 1px 1px 2px rgba(255, 255, 255, 0.7); 
font-family: var(--font-branding);
}

/* ✅ Large Desktops (1920px and above) */
@media (min-width: 1920px) {
    
    .bannar-image-con {
        min-height: 500px; /* Increase height for larger screens */
    }

    .msg-title-right-container-2 img {
        max-width: 190px; /* maximum size */
    }
    .semi-transparent-title-box {
        width: 50%; /* Slightly smaller width for better balance */
        height: 50%;
        border-radius: 35px; /* More rounded corners for elegance */
    }

    .msg-line {
        font-size: calc(var(--font-size-h5) * 1.2); /* Increase font size */
        text-align: left;
        padding-left: 10px;
    }

    .banner-first-text {
        font-size: calc(var(--font-size-h2) * 1.2); /* Increase for readability */
    }

    .banner-second-text {
        font-size: calc(var(--font-size-h5) * 1.1);
    }
}

/* ✅ Standard Laptops (1280px - 1536px) */
@media (max-width: 1280px) {

    .bannar-image-con {
        min-height: 350px;
    }

    .msg-title-right-container-2 img {
        max-width: 160px; /* maximum size */
    }
    
    .semi-transparent-title-box {
        width: 55%; /* Increase width */
        height: 55%;
        border-radius: 15px; /* Reduce rounded corners */
    }

    .msg-line {
        font-size: calc(var(--font-size-h5) * 0.9); /* Slightly smaller text */
        text-align: center;
        padding-left: 0;
    }

    .banner-first-text {
        font-size: calc(var(--font-size-h2) * 0.9);
    }

    .banner-second-text {
        font-size: calc(var(--font-size-h5) * 0.9);
    }
}


/* ✅ Small Laptops (1024px - 1280px) */
@media (max-width: 1024px) {

    .bannar-image-con {
        min-height: 300px;
    }
    
    .msg-title-right-container-1{
        display: flex;
        width:100%;
        height:60%;
        flex-direction: column;
        align-items: flex-end; /* Vertically centers content within each section */
        justify-content: flex-end;
        margin-right: 20px;	
    }

    .msg-title-right-container-2 img {
        max-width: 150px; /* maximum size */
    }

    .semi-transparent-title-box {
        width: 60%; /* Increase width */
        height: 60%;
        border-radius: 20px; /* Reduce rounded corners */
    }

    .msg-line {
        font-size: calc(var(--font-size-h5) * 0.85); /* Slightly smaller text */
        text-align: center;
        padding-left: 0;
    }

    .banner-first-text {
        font-size: calc(var(--font-size-h2) * 0.8);
    }

    .banner-second-text {
        font-size: calc(var(--font-size-h5) * 0.90);
    }
}