.fadeup {
    display: block;
    overflow: hidden;
}

.hero-main h1.aos {
    animation: fadeup 0.7s ease 2.75s 1 forwards;
}

.hero-main h3.aos {
    animation: fadeup 0.7s ease 3s 1 forwards;
}

.hero .hero-main h2.aos {
    animation: fadeup 0.7s ease 3.25s 1 forwards;
}

.hero-main p.aos {
    animation: fadeup 0.7s ease 3.50s 1 forwards;
}

.hero-main-link a.aos {
    animation: fadeup 0.7s ease 3.75s 1 forwards;
}

.hero-item-01,
.hero-item-02,
.hero-item-03,
.hero-item-04 {
    opacity: 0;
}

.hero-item-01.aos,
.hero-item-02.aos,
.hero-item-03.aos,
.hero-item-04.aos {
    animation: fadeupp 1s ease 2.75s 1 forwards;
}

.hero-item .hero-gif.aos {
    animation: fadeleft 2s ease 1s 1 forwards;
}

.section .fadesys .section-title.aosr {
    animation: fadeup 1s ease 1 forwards;
}

.section .fadesys .section-title.aosr::before {
    animation: linefull 1s ease 0.8s 1 forwards;
}

.section .fadesys p.aosr {
    animation: fadeup 1s ease 1 forwards;
}

.about-img img.aosr {
    animation: fadelefti 1s ease 1 forwards;
}

.counter-box.aosr {
    animation: fadelefti 1s ease 1 forwards;
}

.about-item h1.aosr {
    animation: faderight 1s ease 1 forwards;
}

.about-para.aosr {
    animation: faderight 1s ease 1 forwards;
}

.wapper.aosr {
    animation: faderight 1s ease 1 forwards;
}

.about-item .nav-project.aosr {
    animation: faderight 1s ease 1 forwards;
}

.project-card.aosr {
    animation: zoomin 1s ease 1 forwards;
}

.contact-item.aosr {
    animation: fadelefti 1s ease 1 forwards;
}

.contact-form-container.aosr {
    animation: faderight 1s ease 1 forwards;
}



.skill-container .skill-item:nth-child(1).aosr {
    animation: skills-one 1s ease 1 forwards
}

.skill-container .skill-item:nth-child(2).aosr {
    animation: skills-two 1s ease 1 forwards
}

.skill-container .skill-item:nth-child(3).aosr {
    animation: skills-one 1s ease 1 forwards
}

.skill-container .skill-item:nth-child(4).aosr {
    animation: skills-two 1s ease 1 forwards
}

.skill-container .skill-item:nth-child(5).aosr {
    animation: skills-one 1s ease 1 forwards
}

.skill-container .skill-item:nth-child(6).aosr {
    animation: skills-two 1s ease 1 forwards
}

.skill-container .skill-item:nth-child(7).aosr {
    animation: skills-one 1s ease 1 forwards
}

.skill-container .skill-item:nth-child(8).aosr {
    animation: skills-two 1s ease 1 forwards
}

.skill-container .skill-item:nth-child(9).aosr {
    animation: skills-one 1s ease 1 forwards
}

.skill-container .skill-item:nth-child(10).aosr {
    animation: skills-two 1s ease 1 forwards
}

.skill-container .skill-item:nth-child(11).aosr {
    animation: skills-one 1s ease 1 forwards
}

.skill-container .skill-item:nth-child(12).aosr {
    animation: skills-two 1s ease 1 forwards
}

@keyframes skills-one {
    0% {
        transform: translate(150px, 150px);
        opacity: 0;
    }

    100% {
        transform: translate(0px, 0px);
        opacity: 1;
    }
}

@keyframes skills-two {
    0% {
        transform: translate(-150px, 150px);
        opacity: 0;
    }

    100% {
        transform: translate(0px, 0px);
        opacity: 1;
    }
}




.certificates-container .certificates-item.aosr {
    animation: zoomin 1s ease 1 forwards;
}

.content .content-all .projects-container .project-item.aosr {
    animation: fadeuppp 1s ease 1 forwards;
}

.tab .tab-button.aosr {
    animation: fadeuppp 1s ease 1 forwards;
}


@keyframes fadeup {
    0% {
        transform: translateY(150px);
        opacity: 1;
    }

    100% {
        transform: translateY(0px);
        opacity: 1;
    }
}

@keyframes fadeupp {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes fadeuppp {
    0% {
        transform: translateY(150px);
        opacity: 0;
    }

    100% {
        transform: translateY(0px);
        opacity: 1;
    }
}


@keyframes fadeleft {
    0% {
        position: absolute;
    }

    100% {
        left: 75%;
    }
}

@keyframes faderight {
    0% {
        opacity: 0;
        transform: translateX(150px);
    }

    100% {
        transform: translateX(0px);
        opacity: 1;
    }
}

@keyframes linefull {
    0% {
        width: 0;
    }

    100% {
        width: 60%;
    }
}

@keyframes zoomin {
    0% {
        transform: scale(0);
        opacity: 0;
    }

    100% {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes fadelefti {
    0% {
        transform: translateX(-150px);
        opacity: 0;
    }

    100% {
        transform: translateX(0px);
        opacity: 1;
    }
}