.header-section{
height: 42px;
font-weight: 600;
color: #ffffff;
}
@media (min-width: 768px) and (max-width: 1283px) {
.header-section{
height: 60px;
}
}
@media(max-width:640px){
.header-section{
height: 80px;
}
}
.newLogin {
    position: relative;
    /* FIXED: width spelling */
    width: 100%;
    height: 70vh;
    background: url('/img/slider-bg.png') no-repeat center / 100% 100%;
    overflow: hidden; /* prevent animated overflow from causing scrollbars */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

@media screen and (min-width:1101px) {
  
 .img-footer{
    background-color: #b3904e;
    padding: 10px 20px;
    height: calc(30vh - 42px);
}
}
@media (min-width: 769px) and (max-width: 1100px) {
 .img-footer{
    background-color: #b3904e;
    padding: 10px 20px;
    height: calc(40vh - 42px);
}
}
@media screen and (max-width: 768px) {
.img-footer{
    background-color: #b3904e;
    padding: 10px 20px; 
}
}

    /* Base centering + size so transforms don't change layout */
    .newLogin img {
        position: absolute;
        top: 45%;
        left: 50%;
        width: 35vw; /* constrain image size */
        transform: translate(-50%, -50%);
        will-change: transform, opacity, filter;
    }
    @media (max-width: 768px){
         .newLogin img {
        position: absolute;
        top: 45%;
        left: 50%;
        width: 100vw; /* constrain image size */
        transform: translate(-50%, -50%);
        will-change: transform, opacity, filter;
    }
    }

/* keep your existing animation classes */
.frame-1 {
    z-index: 5;
    animation: frame1animation 18s ease-in-out infinite;
}

.frame-2 {
    z-index: 4;
    animation: frame2animation 18s ease-in-out infinite;
}

.frame-3 {
    z-index: 3;
    animation: frame3animation 18s ease-in-out infinite;
}

.frame-4 {
    z-index: 2;
    animation: frame5animation 18s ease-in-out infinite;
}

.frame-5 {
    z-index: 1;
    animation: frame5animation 18s ease-in-out infinite;
}

@keyframes frame1animation {
    0%,100% {
        transform: translate(-50%, calc(-50% + 10%)) scale(1);
        opacity: 1;
        z-index: 4;
    }

    25% {
        transform: translate(-50%, calc(-50% + 50%)) scale(0.4);
        opacity: .9;
        z-index: 1;
    }

    50% {
        transform: translate(-50%, calc(-50% - 30%)) scale(0.6);
        opacity: .9;
        z-index: 2;
    }

    75% {
        transform: translate(-50%, calc(-50% - 10%)) scale(0.8);
        opacity: .9;
        z-index: 3;
    }
}

/* already have frame1animation */
@keyframes frame2animation {
    0% {
        transform: translate(-50%, calc(-50% - 10%)) scale(0.8);
        opacity: .9;
        z-index: 3;
    }

    25% {
        transform: translate(-50%, calc(-50% + 10%)) scale(1);
        opacity: 1;
        z-index: 4;
    }

    50% {
        transform: translate(-50%, calc(-50% + 50%)) scale(0.4);
        opacity: .9;
        z-index: 1;
    }

    75% {
        transform: translate(-50%, calc(-50% - 30%)) scale(0.6);
        opacity: .9;
        z-index: 2;
    }

    100% {
        transform: translate(-50%, calc(-50% - 10%)) scale(0.8);
        opacity: .9;
        z-index: 3;
    }
}

@keyframes frame3animation {
    0% {
        transform: translate(-50%, calc(-50% - 30%)) scale(0.6);
        opacity: .9;
        z-index: 2;
    }

    25% {
        transform: translate(-50%, calc(-50% - 10%)) scale(0.8);
        opacity: .9;
        z-index: 3;
    }

    50% {
        transform: translate(-50%, calc(-50% + 10%)) scale(1);
        opacity: 1;
        z-index: 4;
    }

    75% {
        transform: translate(-50%, calc(-50% + 50%)) scale(0.4);
        opacity: .9;
        z-index: 1;
    }

    100% {
        transform: translate(-50%, calc(-50% - 30%)) scale(0.6);
        opacity: .9;
        z-index: 2;
    }
}

@keyframes frame5animation {
    0% {
        transform: translate(-50%, calc(-50% + 50%)) scale(0.4);
        opacity: .9;
        z-index: 1;
    }

    25% {
        transform: translate(-50%, calc(-50% - 30%)) scale(0.6);
        opacity: .9;
        z-index: 2;
    }

    50% {
        transform: translate(-50%, calc(-50% - 10%)) scale(0.8);
        opacity: .9;
        z-index: 3;
    }

    75% {
        transform: translate(-50%, calc(-50% + 10%)) scale(1);
        opacity: 1;
        z-index: 4;
    }

    100% {
        transform: translate(-50%, calc(-50% + 50%)) scale(0.4);
        opacity: .9;
        z-index: 1;
    }
}

@keyframes frame4animation {
    0% {
        transform: translate(-50%, calc(-50% + 50%)) scale(0.4);
        opacity: .9;
        z-index: 1;
    }

    25% {
        transform: translate(-50%, calc(-50% - 30%)) scale(0.6);
        opacity: .9;
        z-index: 2;
    }

    50% {
        transform: translate(-50%, calc(-50% - 10%)) scale(0.8);
        opacity: .9;
        z-index: 3;
    }

    75% {
        transform: translate(-50%, calc(-50% + 10%)) scale(1);
        opacity: 1;
        z-index: 4;
    }

    100% {
        transform: translate(-50%, calc(-50% + 50%)) scale(0.4);
        opacity: .9;
        z-index: 1;
    }
}