/* ==========================================================================
   1. GLOBAL MENU & HEADER GLOW
   ========================================================================== */
.head-men li.menu-item a:hover {
    text-shadow: 0px 0px 22px #FFFFFF, 0px 0px 14px #FFFFFF !important;
    transition: text-shadow 0.3s ease-in-out;
}
.head-men li.menu-item a.elementor-item.elementor-item-active {
    text-shadow: 0px 0px 22px #FFFFFF, 0px 0px 14px #FFFFFF !important;
}

/* White Text Shadow Utility */
.white-tex-shad a { color:#fff; }
.white-tex-shad a:hover {
    text-shadow: 0px 0px 22px #FFF, 0px 0px 14px #FFF;
}

/* ==========================================================================
   2. BUTTON STYLES (STABLE VERSION)
   ========================================================================== */

/* A. The "Problem Button" (Stable Fix applied here) */
.btn.insetred .elementor-button {
    background-image: linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 0)), 
                      linear-gradient(90deg, #F37845, #EE465A) !important;
    background-origin: border-box;
    background-clip: content-box, border-box;
    border: 2.2px solid transparent !important;
    border-radius: 50px; 
    /* The Dark Blue Fill Hack */
    box-shadow: inset 0 0 0 100px #072136 !important; 
    color: #FFFFFF !important;
    font-family: "Poppins", Sans-serif;
    font-weight: 600;
    letter-spacing: 0.7px;
    
    /* THE BLUR FIX: Forces GPU Layer */
    transform: translateZ(0);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.btn.insetred .elementor-button:hover {
    box-shadow: inset 0 0 0 100px #072136, 0px 0px 50px 0px #EE465A !important;
    transform: translateY(0px);
    color: #FFFFFF !important;
}

/* B. Generic Red Button (Fallback for other buttons) */
.btn .elementor-button-wrapper a {
    color: #fff;
    background: #5f4bdb;
    border-radius: 2em;
    letter-spacing: .7px;
    font-weight: 500;
    font-size: 1rem;
    border: solid 3px transparent;
    background-origin: border-box;
    background-clip: content-box, border-box;
    box-shadow: 2px 1000px 1px #072136 inset;
    background-image: linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 0)), linear-gradient(90deg, #f37845, #ee465a);
    transition: color .5s ease;
    text-transform: capitalize;
    background-color: transparent;
}
.btn .elementor-button-wrapper a:focus { box-shadow:none; }

/* C. Transparent/White Variant */
.btn-whi .elementor-button-wrapper a {
    color: #415473 !important;
    background: #5f4bdb;
    border-radius: 2em;
    letter-spacing: .7px;
    font-weight: 500;
    font-size: 1rem;
    border: solid 3px transparent;
    background-origin: border-box;
    background-clip: content-box, border-box;
    box-shadow: 2px 1000px 1px #fff inset;
    background-image: linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 0)), linear-gradient(90deg, #f37845, #ee465a);
    transition: color .5s ease;
    text-transform: capitalize;
    background-color: transparent;
}
.btn-whi .elementor-button-wrapper a:hover { box-shadow:none; color: #fff !important; }

/* D. White Back Button */
.whi_but .elementor-button-wrapper a {
    background: #5f4bdb;
    border-radius: 2em;
    letter-spacing: .7px;
    border: solid 3px transparent;
    background-origin: border-box;
    background-clip: content-box, border-box;
    box-shadow: 2px 1000px 1px #fff inset;
    background-image: linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 0)), linear-gradient(90deg, #f37845, #ee465a);
    transition: color .5s ease;
    text-transform: capitalize;
    background-color: transparent;
}
.whi_but .elementor-button-wrapper a:hover { box-shadow:none; }

/* ==========================================================================
   3. MOBILE MENU BUTTON
   ========================================================================== */
.mob-men li.menu-item.menu-item-type-custom.menu-item-object-custom.menu-item-904 a {
    background: #5f4bdb;
    border-radius: 2em;
    font-weight: 500;
    font-size: 1rem;
    border: solid 3px transparent;
    background-origin: border-box;
    background-clip: content-box, border-box;
    box-shadow: 2px 1000px 1px #072136 inset;
    background-image: linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 0)), linear-gradient(90deg, #f37845, #ee465a);
    transition: color .5s ease;
    text-transform: capitalize;
    background-color: transparent;
    width: 60%;
    text-align: center;
    margin-left: 9px;
    margin-bottom: 25px;
    align-items: center;
    justify-content: center;
}
.mob-men li.menu-item.menu-item-type-custom.menu-item-object-custom.menu-item-904 a:hover {
    box-shadow: 0 0 30px rgb(238 72 89 / 75%), 2px 1000px 1px rgb(7 33 54 / 100%) inset !important;
}
.mob-men li.menu-item.menu-item-type-custom.menu-item-object-custom.menu-item-904 a:focus { box-shadow:none; }

/* ==========================================================================
   4. TEXT GRADIENTS & UTILITIES
   ========================================================================== */
.text-blue {
    background: linear-gradient(138deg, #5eb5ca 0, #bfffff 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-style: normal;
}

.text-red {
    background: linear-gradient(to right, #ee465a, #f37845);
    background-clip: text;
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text;
}
.text-red span.elementor-button-text {
    background: linear-gradient(to right, #ee465a, #f37845);
    background-clip: text;
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text;
}
.text-red a.elementor-button.elementor-button-link.elementor-size-sm:hover {
    color: #f37746;
    box-shadow: 0px 0px 40px 0px rgba(255, 255, 255, 0.50);
}

.text-count-blue .elementor-counter-number-wrapper {
    background: linear-gradient(138deg, #5eb5ca 0, #bfffff 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: 0 0 24px rgba(191, 255, 255, .5);
}
.text-count-blue .elementor-counter-title { text-align:center; }

.our-p { font-family:Poppins; font-size:24px; font-weight:700; }
.sing-pos-hea h2,h3,h4,h5,h5 { color:#415473; font-size: 30px; font-family: 'Poppins'; font-weight: 700; }

/* New: Change the link color inside the widget */
.sing-pos-hea a { 
    color: #415473; 
    text-decoration: none; /* Optional: removes the default underline */
}

/* Optional: Add a hover effect so users know it's a link */
.sing-pos-hea a:hover {
    text-decoration: underline; 
}

/* ==========================================================================
   5. SPECIFIC WIDGET OVERRIDES
   ========================================================================== */
/* Newsletter Form */
.ser-sec-nl-f button.elementor-button.elementor-size-md {
    color: #fff;
    background: #5f4bdb;
    padding: 15px 30px;
    border-radius: 2em;
    letter-spacing: .7px;
    font-weight: 500;
    font-size: 1rem;
    border: solid 3px transparent;
    background-origin: border-box;
    background-clip: content-box, border-box;
    box-shadow: 2px 1000px 1px #031422 inset !important;
    background-image: linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 0)), linear-gradient(90deg, #5eb5ca, #bfffff); 
    transition: color .5s ease;
    text-transform: capitalize;
    font-family:'Poppins';
}
.ser-sec-nl-f.insetb button.elementor-button.elementor-size-md:hover {
    box-shadow: 0 0 30px rgb(191 255 255 / 75%), 2px 1000px 1px rgb(7 33 54 / 79%) inset !important;
    color:#fff;
}
.ser-sec-nl-f button.elementor-button.elementor-size-md:focus { box-shadow: none !important; color: #fff; }

.ser-gry-sec .elementor-widget-container { min-height: 121px; margin:0px; }

/* Testimonial Layouts */
.test-cls-vid .elementor-testimonial__text { display: flex; gap: 80px; }
.test-cls-vid .tes-vid { width: 50%; }
.test-cls-vid .tes-vid video { border-radius: 30px; }
.test-cls-vid .tes-cont { width: 50%; }
.test-cls-vid span.elementor-testimonial__title, 
.test-cls span.elementor-testimonial__title { position: absolute; right: 25px; bottom:50px; }
.test-cls-vid .elementor-testimonial__footer { width: 45%; float: right; height:100px; }
.test-cls-vid span.elementor-testimonial__name { position: absolute; bottom: 150px; }
.test-cls-vid .swiper-wrapper, .test-cls .swiper-wrapper { padding-bottom:80px; }
.test-cls .elementor-testimonial__footer { align-items: flex-start !important; height:100px; }

.test-btn {
    color: #fff;
    background: #5f4bdb;
    padding: 15px 30px;
    border-radius: 2em;
    letter-spacing: .7px;
    font-weight: 500;
    font-size: 1rem;
    border: solid 3px transparent;
    background-origin: border-box;
    background-clip: content-box, border-box;
    box-shadow: 2px 1000px 1px #031422 inset !important;
    background-image: linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 0)), linear-gradient(90deg, #5eb5ca, #bfffff); 
    transition: color .5s ease;
    text-transform: capitalize;
    font-family:'Poppins';
}
.test-btn.insetblue:hover {
    box-shadow: 0 0 30px rgb(191 255 255 / 75%), 2px 1000px 1px rgb(7 33 54 / 79%) inset !important;
    color:#fff;
}
.test-btn:focus { box-shadow: none !important; color: #fff; }

.btn--insetblue {
    box-shadow: 2px 1000px 1px #031422 inset !important;
    background-image: linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 0)), linear-gradient(90deg, #5eb5ca, #bfffff) !important;
}
.btn--insetblue:hover { box-shadow: none !important; }

/* Box Hover Glows */
.sol-box-hov .elementor-widget-wrap.elementor-element-populated:hover { box-shadow: 0px 0px 20px 0px rgba(191, 255, 255, 0.70); }
.sol-box-hov .elementor-widget-wrap.elementor-element-populated:hover img { filter: drop-shadow(0px 0px 20px #BFFFFF) drop-shadow(0px 0px 20px #BFFFFF); }
.sol-box-hov .elementor-widget-wrap.elementor-element-populated:hover .text-blue { text-shadow: 0px 0px 50px #BFFFFF; }

/* Newsletter Form Highlight */
.news-lett .elementor-form-fields-wrapper.elementor-labels-above:hover input#form-field-email,
.news-lett .elementor-form-fields-wrapper.elementor-labels-above:focus input#form-field-email,
.news-lett .elementor-form-fields-wrapper.elementor-labels-above:hover button.elementor-button.elementor-size-md,
.news-lett .elementor-form-fields-wrapper.elementor-labels-above:focus button.elementor-button.elementor-size-md {
    border-color: #5EB5CA;
}

/* Service Page Positioning */
.ser-sec-link a.elementor-button.elementor-button-link {
    width: 113%;
    position: absolute;
    z-index: 999 !important;
    height: 420px !important;
    bottom: -65px !important;
    left: -15px;
    right: 0px;
}

.ser-pg-help .elementor-widget-wrap.elementor-element-populated:hover h4.elementor-heading-title.elementor-size-default {
    background: linear-gradient(to right, #F37845, #EE465A);
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text;
}
.ser-pg-help .elementor-widget-wrap.elementor-element-populated:hover .help-sec-but span.elementor-button-content-wrapper { color: #5EB5CA; }

/* Resources Page */
.sc-resources { background: radial-gradient(74.89% 54.36% at 20.35% 47.12%, #415473 0, #072136 100%), #072136; }
.res-pg-ani .e-lottie__animation, .res-pg-ani svg, .res-pg-ani path { filter: drop-shadow(0 0 1rem #f37647); }

/* Contact Form Button */
.cont-form button.elementor-button.elementor-size-lg {
    background: #5f4bdb;
    border-radius: 2em;
    letter-spacing: .7px;
    border: solid 3px transparent;
    background-origin: border-box;
    background-clip: content-box, border-box;
    box-shadow: 2px 1000px 1px #fff inset;
    background-image: linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 0)), linear-gradient(90deg, #f37845, #ee465a);
    transition: color .5s ease;
    text-transform: capitalize;
    background-color: transparent;
}
.cont-form button.elementor-button.elementor-size-lg:hover { box-shadow:none; }

.signup-form button.elementor-button.elementor-size-lg:hover { box-shadow: 0px 0px 40px 0px rgba(255, 255, 255, 0.50); }

/* Start Page Button */
.sti_fom button.elementor-button.elementor-size-lg {
    color: #fff;
    background: #5f4bdb;
    border-radius: 2em;
    letter-spacing: .7px;
    font-weight: 500;
    font-size: 1rem;
    border: solid 3px transparent;
    background-origin: border-box;
    background-clip: content-box, border-box;
    box-shadow: 2px 1000px 1px #072136 inset;
    background-image: linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 0)), linear-gradient(90deg, #f37845, #ee465a);
    transition: color .5s ease;
    text-transform: capitalize;
    background-color: transparent;
}
.sti_fom button.elementor-button.elementor-size-lg:focus { box-shadow:none; }
.sti_fom.insi button.elementor-button.elementor-size-lg:hover { box-shadow: 0 0 30px rgb(238 72 89 / 75%), 2px 1000px 1px rgb(7 33 54 / 82%) inset !important; }

/* ==========================================================================
   6. BLOG STYLES
   ========================================================================== */
.hero-blog a.elementor-post__thumbnail__link { width: 55% !important; } 
.hero-blog .elementor-post__meta-data {
    display: flex;
    width: 100%;
    padding-left: 38% !important;
    position: absolute;
    align-items: end;
    justify-content: center;
}
.hero-blog .elementor-post__card { display: flex; flex-direction: row !important; }
.hero-blog .elementor-post__text {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    width: 45% !important;
    padding-left: 101px !important;
}
.hero-blog .elementor-posts .elementor-post__badge { right: 32%; top: 20px; }
.hero-blog .elementor-post__thumbnail.elementor-fit-height { border-radius: 15px !important; }
.hero-blog .elementor-post__text:hover h3.elementor-post__title {
    background: -webkit-linear-gradient(#EE4A58, #F27247);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.hero-blog .elementor-post__thumbnail { border-radius: 15px !important; }

/* Archive Blog */
.adv-tab .eael-tabs-nav { display: flex; justify-content: center; }
.adv-tab .eael-tab-item-trigger:hover { text-decoration: underline; text-decoration-thickness: 2px; }
.adv-tab .eael-tab-item-trigger.active { font-weight: 700 !important; }
.adv-tab .elementor-posts-container.elementor-posts.elementor-posts--skin-cards.elementor-grid { gap: 15px !important; }
.adv-tab .elementor-posts-container .elementor-post__card { border-radius: 10px !important; }
.adv-tab a.elementor-button-link.elementor-button { background-color: transparent !important; color:#415473 !important; }
.adv-tab a.elementor-button-link.elementor-button:hover { color:#57A5B8 !important; }
.adv-tab .elementor-section.elementor-top-section { margin-top: 50px !important; }
.adv-tab .elementor-post__text { padding:0px !important; }

.arch-blog .elementor-post__card { padding: 15px; }
.arch-blog .elementor-post__thumbnail.elementor-fit-height { border-radius: 10px; object-fit: contain; }
.arch-blog .elementor-post__thumbnail.elementor-fit-height img { object-fit: contain !important; }
.arch-blog .elementor-post__badge {
    position: relative !important;
    top: 0 !important;
    left: 0; right: 0; bottom: 0;
    margin: 0 !important;
    display: inline-flex;
    width: 35%;
    max-width: 350px;
    justify-content: center;
    align-items: center;
    background-color: #ECEDF0 !important;
    color: #415473 !important;
}

/* ==========================================================================
   7. AUTOMATION MINING & SUCCESS STORIES
   ========================================================================== */
.sc-automation-mining-hero {
    background: radial-gradient(35.74% 66.08% at 50.00% 29.63%, #415473 0%, #072136 100%);
    padding-top: 200px;
    position: relative;
}

.ss-cate span.elementor-post-info__terms-list a.elementor-post-info__terms-list-item,
.ss-inpg-cat span.elementor-post-info__terms-list a.elementor-post-info__terms-list-item {
    background-color: #ECEDF0;
    padding: 4px 10px 5px 10px;
    border-radius: 15px;
    margin: 19px 2px;
}
.ss-cate span.elementor-post-info__terms-list,
.ss-inpg-cat span.elementor-post-info__terms-list { color: transparent; }

.blg-ss:hover .text-red-hov {
    background: linear-gradient(to right, #ee465a, #f37845);
    background-clip: text;
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text;
}
.blg-ss:hover .bl-rm .elementor-button-wrapper a { color:#5EB5CA; }

.custom-butt a.elementor-button.elementor-button-link.elementor-size-sm {
    width: 135% !important;
    max-width: 1300px;
    height: 350px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 0; left: 0;
    margin-top: -31%;
    margin-left: -32%;
}
.ss-inpg-ms-link-but a.elementor-button.elementor-button-link {
    width: 110%;
    position: absolute;
    z-index: 999 !important;
    height: 390px !important;
    bottom: -3px !important;
    left: -18px;
    right: 0px;
}
.ss-nav-cls span.post-navigation__next--title {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 250px;
}
.ss-nav-cls span.post-navigation__arrow-wrapper.post-navigation__arrow-next::before {
    content: "→";
    font-size: 26px;
    font-weight: 700;
    width: 24px;
    height: 13px;
    padding: 5px;
    top: -14px;
    position: absolute;
    right: 1px;
}
.ss-nav-cls .elementor-post-navigation__prev.elementor-post-navigation__link a { display: none; }

/* ==========================================================================
   8. PAGINATION FIX
   ========================================================================== */
.elementor-posts-nothing-found,
.elementor-ms-no-results { display: none !important; }

.elementor-button-state-flat.all-loaded {
    display: none !important;
    visibility: hidden;
    opacity: 0;
}

/* ==========================================================================
   9. MEDIA QUERIES
   ========================================================================== */
@media(max-width:1440px){
    .hero-blog .elementor-posts .elementor-post__badge { right: 27%; top: 0px; }
}
@media(max-width:1366px){
    .hero-blog .elementor-post__text { padding-left: 65px !important; }
    .hero-blog .elementor-posts .elementor-post__badge { right: 32%; top: 20px; }
}
@media (max-width: 1024px) {
    .hero-blog .elementor-posts .elementor-post__badge { right: 30%; top: 5px; }
    .hero-blog .elementor-post__text { padding-left: 35px !important; }
    .ser-sec-link a.elementor-button.elementor-button-link { width: 113%; height: 300px !important; bottom: -12px !important; }
    .ser-gry-sec .elementor-widget-container { min-height: 100px; }
    .ss-inpg-cat span.elementor-post-info__terms-list { display: block !important; font-size: 0px; }
    .ss-inpg-cat span.elementor-post-info__terms-list a{
        font-size: 14px; padding: 0px; margin: 2px !important;
        flex-wrap: nowrap; align-items: center; width:100% !important; display:block !important;
    }
    .custom-butt a.elementor-button.elementor-button-link.elementor-size-sm {
        width: 100% !important; height: 380px; top: 0; left: 0; margin-top: -43%; margin-left: -0%;
    }
    .ss-inpg-ms-link-but a.elementor-button.elementor-button-link { width: 100%; }
}
@media (max-width: 768px) {
    .hero-blog .elementor-post__card { flex-direction: column !important; }
    .hero-blog a.elementor-post__thumbnail__link { width: 100% !important; } 
    .hero-blog .elementor-post__text { width: 100% !important; padding-left: 20px !important; }
    .hero-blog .elementor-posts .elementor-post__badge { right: auto; top: 61%; left: 0px; }
    .custom-butt a.elementor-button.elementor-button-link.elementor-size-sm {
        width: 100% !important; height: 469px; top: 0; left: 0; margin-top: -70%; margin-left: -0%;
    }
    .test-cls-vid .elementor-testimonial__text { display: flex; gap: 0px; flex-direction:column; }
    .test-cls-vid .tes-vid, .test-cls-vid .tes-cont { width: 100%; }
    .test-cls-vid .elementor-testimonial__footer { width: 100%; float: left; }
    .test-cls-vid span.elementor-testimonial__name { position: absolute; bottom: 90px; }
}
@media(max-width:452px){
    .test-cls .elementor-testimonial__footer { height: 130px; }
    .test-cls span.elementor-testimonial__name { bottom: 120px; position: absolute; }
    .test-cls .elementor-widget-container { margin-top: 320px !important; }
    .hero-blog .elementor-posts .elementor-post__badge { right: auto; top: 37%; margin-left: 0px; left: 0px; }
    .hero-blog .elementor-post__text { padding-left:5px !important; padding-right:5px !important; }
    .custom-butt a.elementor-button.elementor-button-link.elementor-size-sm {
        width: 100% !important; height: 550px; top: 0; left: 0; bottom: 0; margin-top: -161%; margin-left: -0%;
    }
}
@media(max-width:375px){
    .hero-blog .elementor-posts .elementor-post__badge { top: 35%; }
    .test-cls .elementor-widget-container { margin-top: 280px !important; }
    .hero-blog .elementor-posts .elementor-post__badge { top: 29%; }
    .custom-butt a.elementor-button.elementor-button-link.elementor-size-sm { height: 490px; margin-top: -170%; }
}
@media (max-width: 320px) {
    .custom-butt a.elementor-button.elementor-button-link.elementor-size-sm { height: 500px; margin-top: -218%; }
    .test-cls .elementor-widget-container { margin-top: 205px !important; }
}

/* =======================================================
   CUSTOM CLASS: Uniform Image Sizes for Loop Grid
   ======================================================= */
/* Only affects widgets with the class 'uniform-grid-images' */

.uniform-grid-images .elementor-widget-featured-image img,
.uniform-grid-images .elementor-widget-image img {
    height: 250px !important; /* Forces the height */
    width: 100% !important;   /* Ensures full width */
    object-fit: cover !important; /* Crops excess without squishing */
    aspect-ratio: 16/9; /* OPTIONAL: Enforces landscape ratio */
    border-radius: 15px; /* Keeps your rounded look */
}

/* Prevent horizontal overflow and hide bottom horizontal slider */
html, 
body {
    overflow-x: hidden !important;
    position: relative;
    width: 100%;
    margin: 0;
    padding: 0;
}


/* =======================================================
   After Website Rebuild
   ======================================================= */
/* Fix for WordPress Admin Bar Overlap */
.admin-bar .light-menu, 
.admin-bar .dark-menu { margin-top: 32px !important; }

@media screen and (max-width: 782px) {
    .admin-bar .light-menu, 
    .admin-bar .dark-menu { margin-top: 46px !important; }
}

/* --------------------------------------
   BASE STYLES (What loads instantly)
--------------------------------------- */
.light-menu, .dark-menu {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    transition: transform 0.4s ease, opacity 0.4s ease !important;
}

/* Light menu is strictly visible by default */
.light-menu { 
    z-index: 99998 !important; 
    transform: translateY(0) !important;
    opacity: 1 !important;
    pointer-events: auto !important;
}

/* Dark menu is strictly hidden by default */
.dark-menu { 
    z-index: 99999 !important; 
    transform: translateY(0) !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

/* --------------------------------------
   STATE 1: At Top of Page
--------------------------------------- */
body.is-at-top .light-menu {
    transform: translateY(0) !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    /* Force instant position, only fade opacity to prevent flashes */
    transition: opacity 0.4s ease !important; 
}

body.is-at-top .dark-menu {
    transform: translateY(0) !important;
    opacity: 0 !important;
    pointer-events: none !important;
    /* Smoothly crossfade out */
    transition: opacity 0.4s ease !important; 
}

/* --------------------------------------
   STATE 2: Scrolling Down
--------------------------------------- */
body.is-scrolling-down .light-menu,
body.is-scrolling-down .dark-menu {
    transform: translateY(-100%) !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

/* --------------------------------------
   STATE 3: Scrolling Up
--------------------------------------- */
body.is-scrolling-up .light-menu {
    transform: translateY(-100%) !important;
    opacity: 0 !important;
    pointer-events: none !important;
    /* Disable transitions so the light menu stays pinned out of sight instantly */
    transition: none !important; 
}

body.is-scrolling-up .dark-menu {
    transform: translateY(0) !important;
    opacity: 1 !important;
    pointer-events: auto !important;
}

/* Anchor the wrapper */
.hero-wrapper {
    position: relative !important;
    width: 100% !important;
    overflow: hidden !important; 
}

/* ------ Home Hero: Making the Carousel Slider Fade -------- */

/* * Continuous Linear Image Carousel 
 * Add the class 'ticker-carousel' to any Elementor Image Carousel widget 
 */
.ticker-carousel .swiper-wrapper {
    -webkit-transition-timing-function: linear !important;
    transition-timing-function: linear !important;
}

/* ------ Home Hero: Making the Carousel Slider Fade -------- */
.fade-carousel .swiper-wrapper {
    display: grid !important;
    transform: none !important;
}

.fade-carousel .swiper-slide {
    grid-area: 1 / 1 !important;
    opacity: 0 !important;
    /* UPDATED: Fade animation is now extremely fast (0.1 seconds) */
    transition: opacity 1.5s ease-in-out !important; 
    z-index: 0 !important;
    transform: none !important;
    visibility: hidden !important; /* Completely removes hidden slides from mouse interactions */
    pointer-events: none !important; 
}

.fade-carousel .swiper-slide.swiper-slide-active {
    opacity: 1 !important;
    z-index: 99 !important; 
    visibility: visible !important; /* Restores visibility for the active slide */
    pointer-events: auto !important; 
}

/* ------ Pure CSS Slow Fade for Elementor Carousel ------ */

/* 1. Stop the side-to-side sliding and stack the track */
.fade-carousel .swiper-wrapper {
    display: grid !important;
    transform: none !important; 
}

/* 2. Hide all slides and set the fade speed */
.fade-carousel .swiper-slide {
    grid-area: 1 / 1 !important; /* Stacks them perfectly on top of each other */
    opacity: 0 !important;
    visibility: hidden !important;
    transform: none !important;
    
    /* THE MAGIC NUMBER: 1.5 second slow fade */
    transition: opacity 1.5s ease-in-out, visibility 1.5s ease-in-out !important; 
}

/* 3. Reveal the active slide that Elementor chooses */
.fade-carousel .swiper-slide.swiper-slide-active {
    opacity: 1 !important;
    visibility: visible !important;
    z-index: 2 !important;
}

/* Deep override to guarantee inner elements like CTA buttons accept clicks */
.fade-carousel .swiper-slide.swiper-slide-active * {
    pointer-events: auto !important;
}


/* Anchor the left column */
.dynamic-accordion-images {
    position: relative !important;
    width: 100%;
    height: 100%;
    min-height: 400px; /* Adjust based on your tallest image */
}

/* ---------  Accordion Image Switcher: Stack all images on top of each other and hide them smoothly---------------- */

/* 1. The LHS Image Container */
.dynamic-accordion-images {
    position: relative !important;
    min-height: 500px; /* IMPORTANT: Adjust this to match the height of your tallest image */
    width: 100% !important; /* Fills the Elementor column without overflowing it */
}

/* 2. The Stacking Images (Scoped strictly for WP Customizer safety) */
.dynamic-accordion-images .acc-image {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important; 
    height: 100% !important;
    object-fit: contain !important; /* Perfectly scales the image to fit the container */
    opacity: 0; /* Base state - NO !important so JS can control it */
    transition: opacity 0.5s ease-in-out !important;
    z-index: 1;
    pointer-events: none; /* Prevents hidden images from blocking interactions */
}

/* 3. Default state for the first image */
.dynamic-accordion-images .acc-image.acc-img-1 {
    /* Removed !important tags here so JavaScript inline styles can successfully override it and hide Image 1 */
    opacity: 1;
    z-index: 2;
}



/* Accordion Header Text formatting: 1. Pin the Icon and the Title to the top (Hugs the top instead of centering) */
.dynamic-accordion .elementor-tab-title {
    align-items: flex-start !important;
    padding-top: 20px !important; /* Optional: adds breathing room at the top of the tab */
    padding-bottom: 20px !important; 
}

/* 2. Push the icon down slightly so its center aligns with the first line of text */
.dynamic-accordion .elementor-tab-title .elementor-accordion-icon {
    margin-top: 3px !important; /* Tweak this between 2px-8px to perfectly align with your specific font size */
}

/* 3. The "Hanging Indent" Flexbox trick for the numbering */
.dynamic-accordion .elementor-tab-title .elementor-accordion-title {
    display: flex !important;
    align-items: flex-start !important;
    gap: 8px !important; /* Space between the "1." and the rest of the text */
    line-height: 1.4 !important; /* Healthy line spacing for wrapped text */
}

/* 4. Prevent the number from shrinking on small mobile screens */
.dynamic-accordion .elementor-tab-title .elementor-accordion-title span {
    flex-shrink: 0 !important;
}

/* 1. Pin the entire tab row (text + right icon) to the top */
.dynamic-accordion .e-n-accordion-item-title {
    align-items: flex-start !important;
    padding-top: 20px !important;
    padding-bottom: 20px !important;
}

/* 2. The CSS Grid Magic targeting the exact Nested Element text container */
.dynamic-accordion .e-n-accordion-item-title-text {
    display: grid !important;
    grid-template-columns: min-content 1fr !important; /* Col 1 hugs number, Col 2 takes text */
    gap: 12px !important; /* Space between the "1." and the text */
    align-items: flex-start !important;
    text-align: left !important;
    line-height: 1.4 !important;
    margin: 0 !important;
    padding-right: 20px !important; /* Stop text from touching the right icon */
}

/* 3. Prevent the number span from ever wrapping */
.dynamic-accordion .e-n-accordion-item-title-text > span {
    white-space: nowrap !important;
    line-height: 1.4 !important;
}

/* 4. Pin the right-side icon to the top and align it with the text */
.dynamic-accordion .e-n-accordion-item-title-icon,
.dynamic-accordion .e-n-accordion-icon {
    align-self: flex-start !important;
    margin-top: 4px !important; /* Tweak this (2px - 6px) to align perfectly with your font */
    flex-shrink: 0 !important;
}

/* Continuous Linear Image Carousel */

.ticker-carousel .swiper-wrapper {
    -webkit-transition-timing-function: linear !important;
    transition-timing-function: linear !important;
}

/* ------ Global & Carousel: Remove Blue Click/Focus Highlight -------- */
a, button, [role="button"], *:focus, *:active, *:focus-visible,
.fade-carousel *:focus,
.fade-carousel *:active,
.fade-carousel *:focus-visible,
.fade-carousel a:focus,
.fade-carousel a:active,
.fade-carousel .elementor-button:focus,
.fade-carousel .elementor-button:active,
.fade-carousel .elementor-cta__button:focus,
.fade-carousel .elementor-cta__button:active,
.fade-carousel .swiper-slide:focus,
.fade-carousel .elementor-cta:focus,
.fade-carousel .elementor-widget-container:focus {
    outline: none !important;
    -webkit-tap-highlight-color: transparent !important;
    box-shadow: none !important;
    text-decoration: none !important;
}

/* ------ Utility: Button Text Underline on Hover -------- */
/* Add the class 'hover-underline' to the widget container */
.hover-underline:hover a,
.hover-underline:hover .elementor-button,
.hover-underline:hover .elementor-cta__button,
.elementor-button.hover-underline:hover,
.elementor-cta__button.hover-underline:hover,
a.hover-underline:hover {
    text-decoration: underline !important;
    text-decoration-color: inherit !important; /* Guarantees the line matches your text color */
    text-underline-offset: 4px !important;
}

/* 1. Change Image on Scroll with dotts-- THE MAIN PARENT CONTAINER */
/* Keeps overflow visible as a safety net in case of shape dividers */
.scroll-section-wrapper,
.scroll-section-wrapper > .e-con-inner {
    overflow: visible !important;
}

/* 2. THE LEFT HAND SIDE (Inner Sticky Container) */
.sticky-left-col {
    /* SIZING PROPERTIES: CRITICAL so absolute images don't shrink to a dot */
    height: 70vh !important; 
    min-height: 400px !important; 
    width: 100%; /* Allows it to fill whatever width Elementor gives its parent */
    z-index: 10 !important; 
}

/* 3. THE LEFT IMAGES (STACKED & HIDDEN) */
.fade-img {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    opacity: 0 !important; 
    transition: opacity 0.6s ease-in-out !important; 
    transform: none !important; 
    pointer-events: none; 
}

.fade-img.is-active {
    opacity: 1 !important;
    z-index: 99 !important;
    pointer-events: auto;
}

/* Force the actual image inside the Elementor widget to fit perfectly */
.fade-img img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important; 
    object-position: center top !important; 
}

/* 4. THE RIGHT SCROLLING STEPS */
.scrolling-step {
    min-height: 60vh; 
    display: flex;
    flex-direction: column;
    justify-content: flex-start; /* Aligns text to the top instead of the center */
    padding-top: 15vh; /* Pushes the text down slightly from the very edge */
    opacity: 0.3;
    transition: opacity 0.4s ease;
    padding-left: 40px;
    position: relative;
}

.scrolling-step.is-active {
    opacity: 1;
}

/* NEW: Connected DASHED Line */
.scrolling-step::after {
    content: '';
    position: absolute;
    left: 0px; 
    top: 0;
    bottom: -50px; /* Shoots past the bottom to bridge Elementor's invisible column gap */
    width: 2px;
    
    /* The Restored Dashes! */
    background-image: linear-gradient(to bottom, rgba(100, 198, 210, 0.8) 50%, transparent 50%);
    background-size: 2px 40px;
    background-repeat: repeat-y;
    
    z-index: 1; /* Keeps line underneath the dot */
}

/* First Step: Line starts exactly at the center of the dot */
.scrolling-step:first-child::after {
    top: calc(15vh + 18px); 
}

/* Last Step: Line ends exactly at the center of the dot */
.scrolling-step:last-child::after {
    bottom: auto;
    height: calc(15vh + 18px);
}

/* The Gliding Traveling Dot (Powered by JS) */
.traveling-dot {
    position: absolute;
    top: 0;
    left: 0;
    width: 20px;
    height: 20px;
    background-color: #64C6D2;
    border-radius: 50%;
    box-shadow: 0 0 15px rgba(100, 198, 210, 0.6);
    transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.3s ease;
    z-index: 2; /* Keeps dot above the line */
    opacity: 0; /* Hidden initially until JS calculates exact coordinates */
}

.traveling-dot.is-visible {
    opacity: 1;
}

/* When the wrapper is hovered, underline the heading inside it */
.blog-card-wrapper:hover .card-heading-link h1,
.blog-card-wrapper:hover .card-heading-link h2,
.blog-card-wrapper:hover .card-heading-link h3,
.blog-card-wrapper:hover .card-heading-link h4,
.blog-card-wrapper:hover .card-heading-link h5,
.blog-card-wrapper:hover .card-heading-link h6,
.blog-card-wrapper:hover .card-heading-link a {
    text-decoration: underline !important;
    text-underline-offset: 5px !important; /* Pushes the line down slightly so it doesn't cross the letters */
    text-decoration-thickness: 2px !important; /* Makes the line a little bolder and cleaner */
}

/* Optional: Add a smooth transition so the line doesn't just snap in instantly */
.card-heading-link h1,
.card-heading-link h2,
.card-heading-link h3,
.card-heading-link h4,
.card-heading-link h5,
.card-heading-link h6,
.card-heading-link a {
    transition: text-decoration 0.3s ease-in-out, text-decoration-color 0.3s ease-in-out !important;
}