:root {
    --body-duration: 2s;
}

.container>.about-us-history-container>.nav-bar-tertiary>ul>li>.nav-bar-tertiary-dis-active::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0px solid transparent;
    border-radius: 8px;
    background-color: var(--secondary-color);
    transform-origin: top;
    transform: translateX(-150%);
    transition: all 0.5s;
    z-index: -1;
}

.container>.about-us-history-container>.nav-bar-tertiary>ul>li>.nav-bar-tertiary-active {
    background-color: var(--secondary-color);
}

.container>.about-us-history-container>.nav-bar-tertiary>ul>li>.nav-bar-tertiary-dis-active {
    background-color: var(--primary-color);
}

.container>.about-us-history-container>.nav-bar-tertiary>ul>li>.nav-bar-tertiary-dis-active:hover::before {
    transform: translateX(0);
}


/* .container>.about-us-history-container>.left-to-right-animation {
    transform: translateX(-200%);
    transition: all 1s;
    animation: right_animation var(--body-duration) forwards;
}

@keyframes right_animation {
    0% {
        transform: translateX(-200%);
    }
    100% {
        transform: translateX(0);
    }
} */


/* .container>.about-us-history-container>.right-to-left-animation {
    transform: translateX(200%);
    transition: all 1s;
    animation: left_animation var(--body-duration) forwards;
}

@keyframes left_animation {
    0% {
        transform: translateX(200%);
    }
    100% {
        transform: translateX(0);
    }
}

.container>.about-us-history-container>.left-to-right-animation>.left-arrow,
.container>.about-us-history-container>.right-to-left-animation>.left-arrow {
    animation: left_arrow_animation 4s forwards 2s;
    opacity: 0;
}

@keyframes left_arrow_animation {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

.container>.about-us-history-container>.about-us-history-content-container>.left-arrow>div>a:hover,
.container>.about-us-history-container>.about-us-history-content-container>.right-arrow>div:nth-child(2)>div>a:hover {
    background-color: var(--primary-color);
}

.container>.about-us-history-container>.left-to-right-animation>.right-arrow,
.container>.about-us-history-container>.right-to-left-animation>.right-arrow {
    animation: right_arrow_animation 4s forwards 2s;
    opacity: 0;
}

@keyframes right_arrow_animation {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
} */


/*Image Animations*/


/* .container>.about-us-history-container>.left-to-right-animation>.left-infor-box>.left-infor-box-image-shower-wrapper,
.container>.about-us-history-container>.right-to-left-animation>.left-infor-box>.left-infor-box-image-shower-wrapper,
.container>.about-us-history-container>.left-to-right-animation>.left-infor-box>.left-infor-box-image-shower-wrapper-2,
.container>.about-us-history-container>.right-to-left-animation>.left-infor-box>.left-infor-box-image-shower-wrapper-2 {
    transform: translateY(-200%);
    animation: image_component_animation 1s forwards var(--body-duration);
}

@keyframes image_component_animation {
    0% {
        transform: translateY(-200%);
    }
    100% {
        transform: translateY(0);
    }
}


/*title contain Animations*/


/* .container>.about-us-history-container>.left-to-right-animation>.left-infor-box>.left-infor-box-title,
.container>.about-us-history-container>.right-to-left-animation>.left-infor-box>.left-infor-box-title {
    opacity: 0;
    animation: title-container-animation 2.5s forwards var(--body-duration);
}

@keyframes title-container-animation {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}


/**/


/* .container>.about-us-history-container>.left-to-right-animation>.left-infor-box>.left-infor-box-synopsis>div:nth-child(1),
.container>.about-us-history-container>.right-to-left-animation>.left-infor-box>.left-infor-box-synopsis>div:nth-child(1) {
    transform: translateX(-50%);
    animation: synopsis_heading_animations 1s forwards var(--body-duration);
}

@keyframes synopsis_heading_animations {
    from {
        transform: translateX(-50%);
    }
    to {
        transform: translateX(0%);
    }
}

.container>.about-us-history-container>.left-to-right-animation>.left-infor-box>.left-infor-box-synopsis>div:nth-child(2),
.container>.about-us-history-container>.right-to-left-animation>.left-infor-box>.left-infor-box-synopsis>div:nth-child(2) {
    transform: translateX(150%);
    animation: synopsis_text_animations 1s forwards var(--body-duration);
}

@keyframes synopsis_text_animations {
    from {
        transform: translateX(150%);
    }
    to {
        transform: translateX(0%);
    }
} */


/* Left Box details content title and text*/


/* .container>.about-us-history-container>.left-to-right-animation>.left-infor-box>.left-infor-box-details>.left-infor-box-details-left>.content>.details-content-up,
.container>.about-us-history-container>.right-to-left-animation>.left-infor-box>.left-infor-box-details>.left-infor-box-details-left>.content>.details-content-up {
    transform: translateX(-50%);
    animation: details_left_content_up_animation 1s forwards var(--body-duration);
}

@keyframes details_left_content_up_animation {
    from {
        transform: translateX(-50%);
    }
    to {
        transform: translateX(0);
    }
}

.container>.about-us-history-container>.left-to-right-animation>.left-infor-box>.left-infor-box-details>.left-infor-box-details-right>.content>.details-content-up,
.container>.about-us-history-container>.right-to-left-animation>.left-infor-box>.left-infor-box-details>.left-infor-box-details-right>.content>.details-content-up {
    transform: translateX(150%);
    animation: details_right_content_up_animation 1s forwards var(--body-duration);
}

@keyframes details_right_content_up_animation {
    from {
        transform: translateX(150%);
    }
    to {
        transform: translateX(0);
    }
}

.container>.about-us-history-container>.left-to-right-animation>.left-infor-box>.left-infor-box-details>.left-infor-box-details-left>.content>.details-content-down,
.container>.about-us-history-container>.right-to-left-animation>.left-infor-box>.left-infor-box-details>.left-infor-box-details-left>.content>.details-content-down {
    transform: translateX(150%);
    animation: details_left_content_down_animation 1s forwards var(--body-duration);
}

@keyframes details_left_content_down_animation {
    from {
        transform: translateX(150%);
    }
    to {
        transform: translateX(0);
    }
}

.container>.about-us-history-container>.left-to-right-animation>.left-infor-box>.left-infor-box-details>.left-infor-box-details-right>.content>.details-content-down,
.container>.about-us-history-container>.right-to-left-animation>.left-infor-box>.left-infor-box-details>.left-infor-box-details-right>.content>.details-content-down {
    transform: translateX(-150%);
    animation: details_right_content_down_animation 1s forwards var(--body-duration);
}

@keyframes details_right_content_down_animation {
    from {
        transform: translateX(-150%);
    }
    to {
        transform: translateX(0);
    }
} */


/*Right box heading text*/


/* .container>.about-us-history-container>.left-to-right-animation>.right-infor-box>.right-box-heading-title>.heading-title-text,
.container>.about-us-history-container>.right-to-left-animation>.right-infor-box>.right-box-heading-title>.heading-title-text {
    transform: rotateY(270deg);
    transform-origin: center;
    animation: heading_title_text_animation 3s forwards var(--body-duration);
}

@keyframes heading_title_text_animation {
    from {
        transform: rotateY(270deg);
    }
    to {
        transform: rotateY(0deg);
    }
} */


/**/


/* .container>.about-us-history-container>.left-to-right-animation>.right-infor-box>.text-paragraphs-content>.paragraph-wrapper-text:nth-child(odd),
.container>.about-us-history-container>.right-to-left-animation>.right-infor-box>.text-paragraphs-content>.paragraph-wrapper-text:nth-child(odd) {
    transform: translateX(-150%);
    animation: paragraph_wrapper_text_odd_animation 2.5s forwards var(--body-duration);
}

@keyframes paragraph_wrapper_text_odd_animation {
    from {
        transform: translateX(-150%);
    }
    to {
        transform: translateX(0);
    }
}

.container>.about-us-history-container>.left-to-right-animation>.right-infor-box>.text-paragraphs-content>.paragraph-wrapper-text:nth-child(even),
.container>.about-us-history-container>.right-to-left-animation>.right-infor-box>.text-paragraphs-content>.paragraph-wrapper-text:nth-child(even) {
    transform: translateX(150%);
    animation: paragraph_wrapper_text_even_animation 1s forwards var(--body-duration);
}

@keyframes paragraph_wrapper_text_even_animation {
    from {
        transform: translateX(150%);
    }
    to {
        transform: translateX(0);
    }
} */


/**/


/* .container>.about-us-history-container>.left-to-right-animation>.right-infor-box>.like-footers,
.container>.about-us-history-container>.right-to-left-animation>.right-infor-box>.like-footers {
    transform: translateX(-1000%);
    animation: like_footer_animations 1s forwards var(--body-duration);
}

@keyframes like_footer_animations {
    form {
        transform: translateX(-1000%);
    }
    to {
        transform: translateX(0);
    }
} */


/**/


/* .container>.about-us-history-container>.about-us-history-content-container>.right-infor-box>.like-footers>div>div>a:hover>i {
    transform: scale(1.3) rotate(-45deg);
}

.container>.about-us-history-container>.about-us-history-content-container>.right-infor-box>.like-footers>div>div>a>i {
    transform: scale(1) translateX(0) rotate(0deg);
    animation: like_footer_icon_animations 1s infinite 5s;
    transition: all 2s;
}

@keyframes like_footer_icon_animations {
    0% {
        transform: scale(1) translateX(0) rotate(0deg);
    }
    25% {
        transform: scale(1.4) translateX(25%) rotate(45deg);
    }
    50% {
        transform: scale(1) translateX(0) rotate(0deg);
    }
    75% {
        transform: scale(1.4) translateX(25%) rotate(-45deg);
    }
    100% {
        transform: scale(1) translateX(0) rotate(0deg);
    }
} */

*/
/**/

.container>.about-us-history-container>.about-us-history-content-container>.right-arrow>div:nth-child(1)>a:hover>i {
    transform: scale(1.4);
    color: var(--secondary-color);
}