.banner-mdl {overflow: hidden;}
.banner-mdl-cont-sec>* {color: var(--secondary_color);}
.banner-mdl-inner { width: 100%; max-width: 830px; margin: 0px auto; } 
.banner-mdl-img-sec {display: flex; max-width: 593px; width: 100%;}
.banner-mdl-img-sec .img-front img {border-radius: 0 20px 20px 0;margin-left: -1px;}
.banner-mdl-img-sec .img-back img {border-radius: 20px 0 0 20px;}
.banner-mdl-img-sec .img-back{max-width: 235.329px;width: 100%;}
.banner-mdl-cont-sec {width: calc(100% - 523px); align-self: center; margin-left: -70px;padding-top: 60px;position: relative;}
.banner-mdl-img-sec img {object-position: center; object-fit: cover;height: 100% !important; display: block;width: 100%;}
.banner-mdl-img-sec .img {max-height: 522.891px;}
.banner-mdl-img-sec .img-front{max-width: 357.629px;width: 100%;}


/* one time animation */
.banner-mdl-img-sec .img-front {animation: moveImage 1s linear 1.5s forwards;}
@keyframes moveImage {
    from {transform: translateY(0px);}
    to {transform: translateY(-112px);}
}


{#
/* infinite time animation */
.banner-mdl-img-sec .img-front { animation: moveImage 12s ease-in-out 3s infinite;will-change: transform;}
@keyframes moveImage {
    0%,
    45.45% {
        transform: translateY(0);
    }

    50%,
    95.45% {
        transform: translateY(-112px);
    }

    100% {
        transform: translateY(0);
    }
}
#}


@media (max-width:991px){
    .banner-mdl-img-sec .img {max-height: 400px;}
}

@media (max-width:767px){
    .banner-mdl-img-sec img {width: revert-layer;} 
    .banner-mdl-img-sec .img-back, 
    .banner-mdl-img-sec .img-front { width: unset; max-width: unset; }
    .banner-mdl-img-sec .img {max-height: 326px;}
    .banner-mdl-cont-sec { width: 100%; padding: 0px; margin: 0px; margin-top: 30px;padding: 0px 80px;}
    .banner-mdl-img-sec {margin: 0px auto;}
    @keyframes moveImage {
        from {transform: translateY(0px);}
        to {transform: translateY(-70px);}
    }
}