.elementor-kit-15{--e-global-color-primary:#6EC1E4;--e-global-color-secondary:#54595F;--e-global-color-text:#7A7A7A;--e-global-color-accent:#61CE70;--e-global-color-2159172:#79EB93;--e-global-color-f454f26:#D6FFAD;--e-global-color-860d766:#FFFFFF;--e-global-color-4a5df8b:#161616;--e-global-color-9db3237:#F3F5F4;--e-global-typography-primary-font-family:"Roboto";--e-global-typography-primary-font-weight:600;--e-global-typography-secondary-font-family:"Roboto Slab";--e-global-typography-secondary-font-weight:400;--e-global-typography-text-font-family:"Roboto";--e-global-typography-text-font-weight:400;--e-global-typography-accent-font-family:"Roboto";--e-global-typography-accent-font-weight:500;}.elementor-kit-15 e-page-transition{background-color:#FFBC7D;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1420px;}.e-con{--container-max-width:1420px;}.elementor-widget:not(:last-child){--kit-widget-spacing:20px;}.elementor-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}{}h1.entry-title{display:var(--page-title-display);}@media(max-width:1024px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}/* Start custom CSS *//* =========================================================
   GOOGLE FONT IMPORT (From File 1)
   ========================================================= */
@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@200..1000&display=swap');


/* ======================================================
   GLOBAL 
====================================================== */
h1, h2, h3, h4, h5, h6,
a, p, span, div,
input, textarea, select {
    font-family: 'Cairo' !important;
}

[data-elementor-type="wp-page"],
[data-elementor-type="footer"] {
    background-color: #f3f5f4;
}

/* ======================================================
   KEYFRAMES  (FILE 2 PRIORITY)
====================================================== */

@keyframes reveal {
    to {
        opacity: 1;
        transform: translateX(0) scale(1);
        filter: blur(0);
    }
}

@keyframes revealUp {
    to {
        opacity: 1;
        transform: translateY(0);
        filter: blur(0);
    }
}

@keyframes arrowLoop {
    0% { transform: translateX(0); opacity: 1; }
    50% { transform: translateX(140%); opacity: 0; }
    51% { transform: translateX(-60%); opacity: 0; }
    100% { transform: translateX(0); opacity: 1; }
}

/* Legacy keyframes kept (no conflict) */
@keyframes slide-in-left {
    0% { transform: translateX(-20%); opacity: 0; }
    100% { transform: translateX(0); opacity: 1; }
}

@keyframes slide-in-right {
    0% { transform: translateX(20%); opacity: 0; }
    100% { transform: translateX(0); opacity: 1; }
}

@keyframes slide-in-up {
    0% { transform: translateY(100%); opacity: 0; }
    100% { transform: translateY(0); opacity: 1; }
}


/* ======================================================
   WORD REVEAL (File 2 version retained)
====================================================== */

.animated-word-reveal h1,
.animated-word-reveal h2,
.animated-word-reveal h3,
.animated-word-reveal h4,
.animated-word-reveal h5,
.animated-word-reveal h6,
.animated-word-reveal p {
    display: flex;
    flex-wrap: wrap;
    direction: rtl;
    overflow: hidden;
}

.animated-word-reveal .word {
    display: inline-block;
    padding-left: 8px;
    opacity: 0;
    transform: translateX(-30px) scale(1.15);
    filter: blur(2px);
    animation: reveal 0.8s cubic-bezier(.22,.61,.36,1) forwards;
    animation-delay: calc(0.5s + var(--i) * 0.125s);
    animation-play-state: paused;
}

.animated-word-reveal.is-visible .word {
    animation-play-state: running !important;
}


/* ======================================================
   SLIDE UP REVEAL (File 2)
====================================================== */

.reveal-up {
    opacity: 0;
    transform: translateY(40px);
    filter: blur(12px);
    animation: revealUp 0.8s cubic-bezier(.22,.61,.36,1) forwards;
    animation-play-state: paused;
}

.reveal-up.is-visible {
    animation-play-state: running !important;
}


/* ======================================================
   GRADIENT TEXT (File 2)
====================================================== */

.gradient-text {
    background: linear-gradient(90deg, #79eb93, #d1feab);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
}


/* ======================================================
   BULLISH BUTTON (File 2)
====================================================== */

.bullish-btn .elementor-button {
    background: linear-gradient(90deg, #79eb93 0%, #d1feab 50%, #79eb93 100%);
    background-size: 200% 100%;
    background-position: 100% 0;
    transition: background-position 0.5s cubic-bezier(.22,.61,.36,1);
    overflow: hidden;
}

.bullish-btn .elementor-button:hover {
    background-position: 0 0;
}

.bullish-btn .elementor-button-icon {
    transform: scale(-1);
}

.bullish-btn .elementor-button:hover .elementor-button-icon svg {
    animation: arrowLoop .5s cubic-bezier(.22,.61,.36,1);
}

/* Base button setup */
.bullish-btn.transparent .elementor-button {
    position: relative;
    overflow: hidden;
    background: transparent;
}

/* Normal state */
.bullish-btn.transparent .elementor-button.transparent {
    background: transparent;
}

/* Gradient pseudo-element */
.bullish-btn.transparent .elementor-button::before {
    content: "";
    position: absolute;
    inset: 0;

    background: linear-gradient(90deg, #79eb93 0%, #d1feab 50%, #79eb93 100%);
    background-size: 200% 100%;
    background-position: 100% 0;

    opacity: 0;
    transform: translateX(100%);
    transition:
        opacity 0.5s cubic-bezier(.22,.61,.36,1),
        transform 0.5s cubic-bezier(.22,.61,.36,1);

    z-index: 0;

    /* Soft edge fade */
    -webkit-mask-image: radial-gradient(
        circle at center,
        rgba(0,0,0,1) 70%,
        rgba(0,0,0,0.2) 88%,
        rgba(0,0,0,0) 100%
    );

    mask-image: radial-gradient(
        circle at center,
        rgba(0,0,0,1) 70%,
        rgba(0,0,0,0.2) 88%,
        rgba(0,0,0,0) 100%
    );
}

/* Reveal gradient on hover */
.bullish-btn.transparent:hover .elementor-button::before {
    opacity: 1;
    transform: translateX(0);
}

/* Keep button content above gradient */
.bullish-btn.transparent .elementor-button > * {
    position: relative;
    z-index: 1;
}

/* Icon animation */
.bullish-btn.transparent .elementor-button-icon {
    transform: scale(-1);
}

.bullish-btn.transparent:hover .elementor-button-icon svg {
    animation: arrowLoop .5s cubic-bezier(.22,.61,.36,1);
}

/* Make gradient layer larger */
.bullish-btn.transparent .elementor-button::before {
    transform: translateX(100%) scale(1.5);
}

/* On hover bring and center the enlarged gradient */
.bullish-btn.transparent:hover .elementor-button::before {
    opacity: 1;
    transform: translateX(0) scale(1.5);
}


/* Border layer */
.bullish-btn.transparent .elementor-button::after {
    content: "";
    position: absolute;
    inset: 0;

    border: 2px solid #16161680;
    border-radius: inherit;

    pointer-events: none;
    z-index: 2;

    opacity: 1;
    transition: opacity 0.5s cubic-bezier(.22,.61,.36,1);
}

/* Smooth disappearance on hover */
.bullish-btn.transparent:hover .elementor-button::after {
    opacity: 0;
}


/* ======================================================
   DELAY UTILITIES (File 2)
====================================================== */

.delay-100 { animation-delay: 0.1s; }
.delay-200 { animation-delay: 0.2s; }
.delay-300 { animation-delay: 0.3s; }
.delay-400 { animation-delay: 0.4s; }
.delay-500 { animation-delay: 0.5s; }
.delay-600 { animation-delay: 0.6s; }
.delay-700 { animation-delay: 0.7s; }
.delay-800 { animation-delay: 0.8s; }
.delay-900 { animation-delay: 0.9s; }
.delay-1000 { animation-delay: 1s; }


/* =========================================================
   HORIZONTAL TABS (merged)
========================================================= */

.horizontal-tab-widget .wdt-tabs-content-wrapper {
    display: flex;
    justify-content: center;
}


/* =========================================================
   PIE CHART / PROGRESS WIDGETS (merged identical)
========================================================= */

.ekit-single-piechart {
    padding: 0 !important;
    max-width: 125px !important;
}

.ekit-chart-content {
    font-size: 22px !important;
    font-weight: 400 !important;
    top: 49% !important;
    margin-right: -3px;
    color: rgb(51, 51, 51) !important;
}

@media (max-width: 767px) {
    .ekit-chart-content {
        top: 50% !important;
        font-size: 20px !important;
    }
}

.finclix-progress-bar .elementor-title {
    display: inline-block;
    margin-bottom: 10px;
}

.finclix-progress-bar :has(.elementor-progress-percentage) {
    overflow: visible !important;
}

.finclix-progress-bar .elementor-progress-percentage {
    position: absolute;
    top: -25px;
    left: -5px;
    font-size: 16px;
    color: rgb(100, 100, 100);
}


/* =========================================================
   TABS (FINCLIX)
========================================================= */

.finclix-tabs .e-n-tabs-heading {
    background: white !important;
    width: 100%;
    padding: 7px;
    border-radius: 99px;
}

.finclix-tabs .e-n-tab-title {
    margin: 0;
    border-radius: 99px;
    flex: 1;
    padding: 12px 0;
}
.finclix-tabs .e-n-tab-title:hover {
    background-color: #8aee98 !important;
}
.finclix-tabs .e-n-tab-title[aria-selected="true"] {
    background-image: linear-gradient(90deg, rgb(121, 235, 147), rgb(209, 254, 171)) !important;
}


@media (max-width: 479px) {
    .finclix-tabs .e-n-tab-title {
        flex: 1 0 100px;
    }
}

.finclix-tabs .wpr-prbar-circle-line,
.finclix-tabs .wpr-prbar-circle-prline {
    stroke-width: 10 !important;
}


/* =========================================================
   ELEMENTOR EDITOR OVERRIDE
========================================================= */

body.elementor-editor-active * {
    animation-play-state: running !important;
}/* End custom CSS */