/* ----- Hero Section ----- */
.hero .animate-img span:nth-child(1) img{
    animation-name: animate-hero1;
    animation-duration: 2s;
    animation-timing-function: ease-in-out;
    animation-delay: .5s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
}

.hero .animate-img span:nth-child(2) img{
    animation-name: animate-hero1;
    animation-duration: 2s;
    animation-timing-function: ease-out;
    animation-delay: .9s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
}

@keyframes animate-hero1 {
    0%{
        transform: translatey(0);
    }
    100%{
        transform: translatey(-35px);
    }
    0%{
        transform: translatey(0);
    }
}

/* ----- Programe ----- */
#programme .animate-img img,
.process .animate-img.bothead-animate{
    animation-name: animate-program;
    animation-duration: 2s;
    animation-timing-function: ease-in-out;
    animation-delay: .5s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
}

@keyframes animate-program {
    0%{
        transform: translatey(0);
    }
    100%{
        transform: translatey(-50px);
    }
    0%{
        transform: translatey(0);
    }
}

/* ----- About ----- */

.about .animate-img img,
.programme-offered .animate-img img,
.process .animate-img.tophead-animate img{
    animation-name: animate-about;
    animation-duration: 2s;
    animation-timing-function: ease-in-out;
    animation-delay: .5s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
}

@keyframes animate-about {
    0%{
        transform: translatex(-15px);
    }
    100%{
        transform: translatex(15px);
    }
    0%{
        transform: translatex(-15px);
    }
}

/* ----- why ----- */
.why .animate-img img{
    animation-name: animate-why-img;
    animation-duration: 2s;
    animation-timing-function: ease-in-out;
    animation-delay: .5s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
}

@keyframes animate-why-img {
    0%{
        transform: translatex(-15px);
    }
    100%{
        transform: translatex(15px);
    }
    0%{
        transform: translatex(-15px);
    }
}

/* ----- gallery ----- */
.gallery-sec .animate-img img{
    animation-name: animate-why-img;
    animation-duration: 2s;
    animation-timing-function: ease-in-out;
    animation-delay: .5s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
}