/* Custom CSS */
/* Custom Animation */

	.customAnimation.animate {
    animation: slideIn 3s ease-in-out forwards; /* Slower and smoother animation */
}

@keyframes slideIn {
    from {
        transform: translateX(-10%); /* Start from a nearby position */
        opacity: 0; /* Start invisible */
    }
    to {
        transform: translateX(0); /* End at the original position */
        opacity: 1; /* Fade in to visible */
    }
}

.customAnimationRight.animateRight {
animation: slideInRight 3s ease-in-out backwards; /* Slower and smoother animation */
}

@keyframes slideInRight {
    from {
        transform: scale(1.05) translateX(10%); /* Start from a nearby position */
        opacity: 0; /* Start invisible */
    }
    to {
        transform: scale(1) translateX(0);/* End at the original position */
        opacity: 1; /* Fade in to visible */
    }
}
	
.customAnimationDown.animateDown {
    animation: slideInDown 3s ease-in-out forwards; /* Slower and smoother animation */
}

@keyframes slideInDown {
    from {
        transform: translateY(-30%); /* Start from a closer position above */
        opacity: 0; /* Start invisible */
    }
    to {
        transform: translateY(0); /* End at the original position */
        opacity: 1; /* Fade in to visible */
    }
}
	
.customAnimationUp.animateUp {
    animation: slideInUp 3s ease-in-out forwards; /* Slower and smoother animation */
}

@keyframes slideInUp {
    from {
        transform: translateY(30%); /* Start from a closer position above */
        opacity: 0; /* Start invisible */
    }
    to {
        transform: translateY(0); /* End at the original position */
        opacity: 1; /* Fade in to visible */
    }
}

/* Custom Animation */

.leftUL ul li{
    cursor: pointer !important;
}
.rightUL ul li{
    cursor: pointer !important;
}

/* Custom Animation */

.fadeInRightTemp,
.fadeInLeftTemp,
.fadeInUpTemp,
.fadeInDownTemp {
    opacity: 0;
    visibility: hidden;
}

.fadeInRightTemp {
    transform: translate3d(10%, 0, 0);
}
.fadeInRight-active {
    animation: fadeInRight-Custom 3s ease-in-out forwards;
    visibility: visible;
}

.fadeInLeftTemp {
    transform: translate3d(-10%, 0, 0);
}
.fadeInLeft-active {
    animation: fadeInLeft-Custom 3s ease-in-out forwards;
    visibility: visible;
}

.fadeInUpTemp {
    transform: translateY(60px);
}
.fadeInUp-active {
    animation: fadeInUp-Custom 3s ease-in-out forwards;
    visibility: visible;
}

.fadeInDownTemp {
    transform: translateY(-60px);
}
.fadeInDown-active {
    animation: fadeInDown-Custom 3s ease-in-out forwards;
    visibility: visible;
}

@keyframes fadeInRight-Custom {
    from { opacity: 0; transform: translate3d(10%, 0, 0); }
    to   { opacity: 1; transform: none; }
}

@keyframes fadeInLeft-Custom {
    from { opacity: 0; transform: translate3d(-10%, 0, 0); }
    to   { opacity: 1; transform: none; }
}

@keyframes fadeInUp-Custom {
    from { opacity: 0; transform: translateY(60px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes fadeInDown-Custom {
    from { opacity: 0; transform: translateY(-60px); }
    to   { opacity: 1; transform: translateY(0); }
}

body.elementor-editor-active .fadeInRightTemp,
body.elementor-editor-active .fadeInLeftTemp,
body.elementor-editor-active .fadeInUpTemp,
body.elementor-editor-active .fadeInDownTemp {
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
}

.fadein-bg-4 {
    position: relative !important;
    overflow: hidden !important;
}

.fadein-bg-4:after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: inherit;
    background-repeat: inherit;
    background-position: inherit;
    background-size: inherit;
    transform: scale(1.1);
    transition: transform 4s;
}

.fadein-bg-4.animated:after {
    transform: scale(1);
}

.fadein-bg-4:before {
    z-index: 1;
}

/* End Custom Animation */