.content-portfolio .card-content.content-tech,
.detail-blog .thumbnail-blog,
.cta,
.cta .circle-light,
.swiper-pagination-testimonial,
.swiper-pagination-service {
    opacity: 0 !important;
    transition: 600ms;
}

.content-portfolio .card-content.content-tech.show,
.detail-blog .thumbnail-blog.show,
.cta.show,
.cta .circle-light.show,
.swiper-pagination-testimonial.show,
.swiper-pagination-service.show {
    opacity: 1 !important;
    transition: 600ms;
}

.hero .line-light,
.navbar {
    opacity: 0;
    transform: translateY(-40px);
    transition: 600ms;
}

.hero .line-light.show,
.navbar.show {
    opacity: 1;
    transform: translateY(0);
    transition: 600ms;
}

.hero .line-light.show:last-child {
    animation-delay: 800ms;
}

.hero .line-light.show {
    animation: animationLineLight 2000ms infinite alternate-reverse linear;
}

.cta .circle-light.show {
    animation: animationCircleLight 2000ms infinite alternate-reverse linear;
}

.content-portfolio .card-technology,
.content-portfolio .content-title-tech,
.content-portfolio .content-title-tag,
.content-portfolio .description-section,
.content-portfolio .subtitle-section,
.page-blog.page-other .card-blog,
.detail-blog .content-section,
.detail-blog .title-detail-section,
.detail-blog .button-category,
.service .service-about.service-about,
.page-portfolio .card-not-found,
.blog-all .card-not-found,
.hero .input-group-search,
.contact .button-primary,
.contact .input-group-3,
.contact .input-group-2,
.contact .input-group-1,
.portfolio .card-portfolio,
.footer,
.blog .wrapper-blog,
.blog .button-primary,
.gallery .wrapper-image,
.adventage .card-content-2,
.adventage .title-section,
.about .title-section,
.adventage .description-section,
.about .description-section,
.hero .description-section,
.hero .headline-section {
    opacity: 0 !important;
    transform: translateY(40px);
    transition: 600ms;
}

.content-portfolio .card-technology.show,
.content-portfolio .content-title-tech.show,
.content-portfolio .content-title-tag.show,
.content-portfolio .description-section.show,
.content-portfolio .subtitle-section.show,
.page-blog.page-other .card-blog.show,
.detail-blog .content-section.show,
.detail-blog .title-detail-section.show,
.detail-blog .button-category.show,
.service .service-about.service-about.show,
.page-portfolio .card-not-found.show,
.blog-all .card-not-found.show,
.hero .input-group-search.show,
.contact .button-primary.show,
.contact .input-group-3.show,
.contact .input-group-2.show,
.contact .input-group-1.show,
.portfolio .card-portfolio.show,
.footer.show,
.blog .wrapper-blog.show,
.blog .button-primary.show,
.gallery .wrapper-image.show,
.adventage .card-content-2.show,
.adventage .title-section.show,
.about .title-section.show,
.adventage .description-section.show,
.about .description-section.show,
.hero .description-section.show,
.hero .headline-section.show {
    opacity: 1 !important;
    transform: translateY(0);
    transition: 600ms;
}

.content-portfolio .button-small.button-tag,
.content-portfolio .content-portfolio-header .header-button > *,
.detail-portfolio .portfolio-thumbnails img.thumbnail-portfolio,
.page-blog.page-other .button-small.button-all,
.detail-blog .header-button,
.portfolio .caption-search,
.blog-all .caption-search,
.hero .category-button,
.contact .sosmed-group a,
.contact .description-section,
.portfolio .description-section,
.service .description-section,
.hero .button-about,
.value .card-value,
.blog .description-section,
.cta .button-primary,
.testimonial .card-testimonial,
.testimonial .description-section,
.gallery .description-section,
.service .card-content-3,
.about .wrapper-image,
.about .wrapper-value,
.about .button-about,
.hero .button-hero {
    opacity: 0;
    transform: translateX(40px);
    transition: 600ms;
}

.content-portfolio .button-small.button-tag.show,
.content-portfolio .content-portfolio-header .header-button > *.show,
.detail-portfolio .portfolio-thumbnails img.thumbnail-portfolio.show,
.page-blog.page-other .button-small.button-all.show,
.detail-blog .header-button.show,
.portfolio .caption-search.show,
.blog-all .caption-search.show,
.hero .category-button.show,
.contact .sosmed-group a.show,
.contact .description-section.show,
.portfolio .description-section.show,
.service .description-section.show,
.hero .button-about.show,
.value .card-value.show,
.blog .description-section.show,
.cta .button-primary.show,
.testimonial .card-testimonial.show,
.testimonial .description-section.show,
.gallery .description-section.show,
.service .card-content-3.show,
.about .wrapper-image.show,
.about .wrapper-value.show,
.about .button-about.show,
.hero .button-hero.show {
    opacity: 1;
    transform: translateX(0);
    transition: 600ms;
}

.detail-portfolio .portfolio-thumbnails img.thumbnail-portfolio {
    transition: 600ms !important;
    opacity: 0 !important;
}

.detail-portfolio .portfolio-thumbnails img.thumbnail-portfolio.show {
    transition: 600ms !important;
    opacity: 1 !important;
}

.page-blog.page-other .title-section,
.detail-blog .header-profile,
.portfolio .title-section,
.blog-recent .title-section,
.blog-all .title-section,
.contact .title-section,
.service .title-section,
.blog .title-section,
.cta .description-section,
.cta .title-section,
.testimonial .title-section,
.gallery .title-section,
.adventage .wrapper-image {
    opacity: 0;
    transform: translateX(-40px);
    transition: 600ms;
}

.page-blog.page-other .title-section.show,
.detail-blog .header-profile.show,
.portfolio .title-section.show,
.blog-recent .title-section.show,
.blog-all .title-section.show,
.contact .title-section.show,
.service .title-section.show,
.blog .title-section.show,
.cta .description-section.show,
.cta .title-section.show,
.testimonial .title-section.show,
.gallery .title-section.show,
.adventage .wrapper-image.show {
    opacity: 1;
    transform: translateX(0);
    transition: 600ms;
}

.about .line-horizontal,
.hero .line-horizontal {
    opacity: 0;
    width: 40% !important;
    left: 50%;
    transform: translateX(-50%);
    transition: 3000ms;
}

.line-detail-portfolio,
.line-horizontal.line-gap,
.detail-blog .line-horizontal {
    opacity: 0;
    width: 40% !important;
    transition: 3000ms;
}

.detail-blog .line-horizontal.show,
.line-detail-portfolio.show,
.line-horizontal.line-gap.show,
.about .line-horizontal.show,
.hero .line-horizontal.show {
    opacity: 1;
    width: 100% !important;
    transition: 3000ms;
}

@keyframes animationLineLight {
    from {
        transform: translateY(0);
    } to {
        transform: translateY(-40px);
    }
}

@keyframes animationCircleLight {
    from {
        transform: translate(-38%, 0);
    } to {
        transform: translate(-38%, -40px);
    }
}