.elementor-1380 .elementor-element.elementor-element-7d34c58b{--display:flex;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;--e-transform-origin-x:center;--e-transform-origin-y:center;}.elementor-widget-text-editor{font-family:var( --e-global-typography-text-font-family ), Cormorant Garamond;font-size:var( --e-global-typography-text-font-size );font-weight:var( --e-global-typography-text-font-weight );line-height:var( --e-global-typography-text-line-height );letter-spacing:var( --e-global-typography-text-letter-spacing );color:var( --e-global-color-text );}.elementor-widget-text-editor.elementor-drop-cap-view-stacked .elementor-drop-cap{background-color:var( --e-global-color-primary );}.elementor-widget-text-editor.elementor-drop-cap-view-framed .elementor-drop-cap, .elementor-widget-text-editor.elementor-drop-cap-view-default .elementor-drop-cap{color:var( --e-global-color-primary );border-color:var( --e-global-color-primary );}.elementor-1380 .elementor-element.elementor-element-26996d37{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;padding:0px 0px 0px 0px;text-align:center;}@media(max-width:1024px){.elementor-widget-text-editor{font-size:var( --e-global-typography-text-font-size );line-height:var( --e-global-typography-text-line-height );letter-spacing:var( --e-global-typography-text-letter-spacing );}}@media(max-width:767px){.elementor-widget-text-editor{font-size:var( --e-global-typography-text-font-size );line-height:var( --e-global-typography-text-line-height );letter-spacing:var( --e-global-typography-text-letter-spacing );}}/* Start custom CSS */CSS Scroll Animations Code
Classes

rotate-image

fade-text-single

fade-text-multi

blur-text


/* For rotating wheel */
.rotate-image {
    animation: rotateOnScroll linear;
    animation-timeline: view();
    animation-range: entry 0% cover 100%;
    animation-fill-mode: both;
    will-change: transform;
    transform-origin: center; /* Ensures rotation happens from its own center */
}

@keyframes rotateOnScroll {
    0% {
        transform: rotate(0deg);
    }
    50% {
        transform: rotate(180deg);
    }
    100% {
        transform: rotate(360deg);
    }
}


/* For single-line headings */
.fade-text-single {
    animation: fadeZoomIn both;
    animation-timeline: view();
    animation-range: entry 100% cover 40%;
    animation-fill-mode: both;
}

/* For multi-line content (image + text) */
.fade-text-multi {
    animation: fadeZoomIn both;
    animation-timeline: view();
    animation-range: entry 50% cover 40%;
    animation-fill-mode: both;
    will-change: opacity, transform;
}


@keyframes fadeZoomIn {
    from {
        opacity: 0;
        transform: translateY(80px) scale(0.1);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}


/* Seamless smooth blur effect on scroll */
.blur-text {
    animation: blurOnScroll both ease-in-out;
    animation-timeline: view();
    animation-range: entry 150% cover 80%;
    animation-fill-mode: both;
    will-change: filter;
}

@keyframes blurOnScroll {
    0% {
        filter: blur(20px);
        opacity: 1;
    }
    20% {
        filter: blur(5px);
    }
    40% {
        filter: blur(1px); /* Soft blur before full clarity */
        opacity: 1;
    }
    50% {
        filter: blur(0px); /* Fully visible */
        opacity: 1;
    }
    60% {
        filter: blur(1px); /* Light blur starts */
    }
    80% {
        filter: blur(5px);
    }
    100% {
        filter: blur(20px);
        opacity: 1; /* Fully blurred again */
    }
}/* End custom CSS */