.banner {

    position: relative;

    width: 100%;

    height: 450px;

    overflow: hidden;

}
.banner.inner-page{
    height: 300px !important;
}

.banner-content {

    position: absolute;

    width: 100%;

    height: 100%;

    transition: opacity 1s ease-in-out;

}

.banner-content img {

    width: 100%;

    height: 100%;

    object-fit: cover;

}
.inner-page .banner-content img {

    width: 100%;

    height: 100%;

    object-fit: cover;


}

.banner-text {

    position: absolute;

    bottom: 20px;

    left: 20px;

    background: rgba(0, 0, 0, 0.5);

    color: white;

    padding: 20px;

    border-radius: 5px;

}

.banner-text h2 {

    color:  #024064 ;

}

.hidden {

    opacity: 0;

}

.visible {

    opacity: 1;

}

@media (max-width: 768px) {

    .banner-text {

        bottom: 10px;

        left: 10px;

        padding: 8px;

        font-size: 14px;

    }

}

@media (max-width: 480px) {

    .banner {

        height: 60vw; /* Increase height for smaller screens */

    }

    .banner-text {

        bottom: 5px;

        left: 5px;

        padding: 5px;

        font-size: 12px;

    }

}