.like-icon,
.rocket,
.dark {
    animation: upDown 3s infinite ease-in-out;
}

@keyframes upDown {

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

    50% {
        transform: translateY(-15px);
    }
}

.c-one {
    animation: c-upDown 5s infinite ease-in-out;
}

.benefits-bg {
    position: relative;
    overflow: hidden;
    transition: transform 3s ease;
}

/* .benefits-bg:hover .animate-icon {
    animation: upDown 3s infinite ease-in-out;
} */

@keyframes c-upDown {

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

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

.con-icon {
    animation: upDownCon 3s infinite ease-in-out;
}

@keyframes upDownCon {

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

    50% {
        transform: translateY(-15px);
    }
}

.mail-icon,
.mail-icon-sm,
.mail-icon1 {
    animation: upDownMail 3s infinite ease-in-out;
}

@keyframes upDownMail {

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

    50% {
        transform: translateY(-15px);
    }
}

.star-anim,
.star-icon1 {
    animation: starVisibility 3s infinite ease-in-out;
    opacity: 0;
}

@keyframes starVisibility {

    0%,
    100% {
        opacity: 0;
    }

    50% {
        opacity: 1;
    }
}

/* 
.arrow {
    animation: myAnim 2s ease-out 1s infinite alternate forwards;
}

@keyframes myAnim {
    0% {
        opacity: 0;
        transform: rotateY(-70deg);
        transform-origin: left;
    }

    100% {
        opacity: 1;
        transform: rotateY(0);
        transform-origin: left;
    }
} */


.animation-icon,
.icon-placeholder {
    position: relative;
}

.check2 {
    position: absolute;
    top: 0;
    left: 0;
    transition: opacity 0.5s ease-in-out;
}

.check1 {
    animation: rotateRight 5s ease-in-out infinite;
}

.check2 {
    animation: rotateLeft 5s ease-in-out infinite;
}

@keyframes rotateRight {
    0% {
        transform: rotate(0deg);
        opacity: 1;
    }

    25% {
        transform: rotate(90deg);
        opacity: 0;
    }

    50% {
        transform: rotate(90deg);
        opacity: 0;
    }

    75% {
        transform: rotate(0deg);
        opacity: 1;
    }


    100% {
        transform: rotate(0deg);
        opacity: 1;
    }
}

@keyframes rotateLeft {
    0% {
        transform: rotate(-90deg);
        opacity: 0;
    }

    25% {
        transform: rotate(0deg);
        opacity: 1;
    }

    50% {
        transform: rotate(0deg);
        opacity: 1;
    }

    75% {
        transform: rotate(-45deg);
        opacity: 0;
    }


    100% {
        transform: rotate(0deg);
        opacity: 0;
    }
}


.time {
    animation: rotate360 5s ease-in-out infinite;

}

@keyframes rotate360 {
    0% {
        transform: rotate(0deg);
    }

    12.5% {
        transform: rotate(45deg);
    }

    25% {
        transform: rotate(90deg);
    }

    37.5% {
        transform: rotate(135deg);
    }

    50% {
        transform: rotate(180deg);
    }

    62.5% {
        transform: rotate(225deg);
    }

    75% {
        transform: rotate(270deg);
    }

    87.5% {
        transform: rotate(315deg);
    }

    100% {
        transform: rotate(360deg);
    }
}


.clip-animation {
    animation: rotateAndReturn 3s ease-in-out infinite;
}

@keyframes rotateAndReturn {
    0% {
        transform: rotate(0deg);
    }

    25% {
        transform: rotate(0deg);
    }

    50% {
        transform: rotate(180deg);
    }

    70% {
        transform: rotate(180deg);
    }


    100% {
        transform: rotate(0deg);
    }
}


/* .pencil {
    animation: pencil 2s ease-out 1s infinite alternate forwards;
}

@keyframes pencil {
    0% {
        transform: rotateY(-70deg) scaleX(1);
        transform-origin: left;
    }

    100% {
        transform: rotateY(0) scaleX(1);
        transform-origin: left;
    }
} */

.like2 {
    position: absolute;
    top: 0;
    left: 0;
}

.like2 {
    animation: fadeOutLike1 5s ease-in-out infinite;
}

@keyframes fadeOutLike1 {

    0% {
        opacity: 0;
    }

    50% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}


.frame.animate {
    animation: bounce 3s ease 0s 1 normal forwards;
}

@keyframes bounce {
    0% {
        animation-timing-function: ease-in;
        opacity: 0;
        transform: translateY(250px);
    }

    38% {
        animation-timing-function: ease-out;
        opacity: 1;
        transform: translateY(0);
    }

    55% {
        animation-timing-function: ease-in;
        transform: translateY(65px);
    }

    72% {
        animation-timing-function: ease-out;
        transform: translateY(0);
    }

    81% {
        animation-timing-function: ease-in;
        transform: translateY(28px);
    }

    90% {
        animation-timing-function: ease-out;
        transform: translateY(0);
    }

    95% {
        animation-timing-function: ease-in;
        transform: translateY(8px);
    }

    100% {
        animation-timing-function: ease-out;
        transform: translateY(0);
    }
}

/* NEWS */
.news-icon-2 {
    animation: rotateImage 6s linear infinite;
}

.news-icon-3 {
    animation: upDownnews 6s infinite ease-in-out;
}

@keyframes upDownnews {

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

    50% {
        transform: translateY(-30px);
    }
}

@keyframes rotateImage {
    0% {
        transform: rotate(0deg) translate(3px, -3px);
        animation-timing-function: ease-out;
    }

    25% {
        transform: rotate(-90deg) translate(3px, -3px);
        animation-timing-function: ease-out;
    }

    50% {
        transform: rotate(-180deg) translate(3px, -3px);
        animation-timing-function: ease-out;
    }

    75% {
        transform: rotate(-275deg) translate(3px, -3px);
        animation-timing-function: ease-out;
    }

    100% {
        transform: rotate(-360deg) translate(3px, -3px);
        animation-timing-function: ease-out;
    }
}

.c-search,
.c-mail,
.c-file {
    animation: float 6s ease-in-out infinite;
}

.c-search {
    animation-delay: 0s;
    animation-iteration-count: 1;
}

.c-mail {
    animation-delay: 6s;
    animation-iteration-count: 1;
}

.c-file {
    animation-delay: 12s;
    animation-iteration-count: 1;
}

@keyframes float {

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

    50% {
        transform: translateY(-40px);
    }
}