.elementor-kit-6{--e-global-color-primary:#0A192F;--e-global-color-secondary:#0F172A;--e-global-color-text:#FFFFFF;--e-global-color-accent:#0EA5E9;--e-global-color-caa61ac:#94A3B8;--e-global-typography-primary-font-family:"Space Grotesk";--e-global-typography-primary-font-weight:700;--e-global-typography-secondary-font-family:"Space Grotesk";--e-global-typography-secondary-font-weight:600;--e-global-typography-text-font-family:"Inter";--e-global-typography-text-font-weight:400;--e-global-typography-accent-font-family:"Space Grotesk";--e-global-typography-accent-font-weight:700;}.elementor-kit-6 e-page-transition{background-color:#FFBC7D;}.elementor-kit-6 button,.elementor-kit-6 input[type="button"],.elementor-kit-6 input[type="submit"],.elementor-kit-6 .elementor-button{padding:016px 032px 016px 032px;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1140px;}.e-con{--container-max-width:1140px;}.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 *//* --- 1. THE TECH GRID BACKGROUND --- */
/* Apply this class to your main Sections */
.tech-grid-bg {
    background-color: #050D1A;
    /* Restored the working Base64 grid without the dark blanket */
    background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDAiIGhlaWdodD0iNDAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTSA0MCAwIEwgMCAwIDAgNDAiIGZpbGw9Im5vbmUiIHN0cm9rZT0icmdiYSgyNTUsMjU1LDI1NSwwLjA4KSIgc3Ryb2tlLXdpZHRoPSIxIi8+PC9zdmc+');
    background-size: 40px 40px;
}



/* --- 2. NEON CLOCKWISE BORDER ANIMATION --- */

@keyframes neonClockwise {

  0% { box-shadow: 8px -8px 20px #0EA5E9, inset 2px 2px 10px rgba(14, 165, 233, 0.2); border-color: #0EA5E9; }

  25% { box-shadow: 8px 8px 20px #0EA5E9, inset -2px 2px 10px rgba(14, 165, 233, 0.2); border-color: #38BDF8; }

  50% { box-shadow: -8px 8px 20px #0EA5E9, inset -2px -2px 10px rgba(14, 165, 233, 0.2); border-color: #0EA5E9; }

  75% { box-shadow: -8px -8px 20px #0EA5E9, inset 2px -2px 10px rgba(14, 165, 233, 0.2); border-color: #0284C7; }

  100% { box-shadow: 8px -8px 20px #0EA5E9, inset 2px 2px 10px rgba(14, 165, 233, 0.2); border-color: #0EA5E9; }

}



/* Apply this class to the Container holding the "GF" logo graphic */

.neon-box {

    border: 2px solid #0EA5E9;

    border-radius: 24px;

    animation: neonClockwise 4s linear infinite;

}



/* --- 3. PULSE "G" ANIMATION --- */

@keyframes pulseGrow {

  0% { transform: scale(1); box-shadow: 0 0 0px rgba(14, 165, 233, 0.4); }

  50% { transform: scale(1.15); box-shadow: 0 0 25px rgba(14, 165, 233, 0.8); }

  100% { transform: scale(1); box-shadow: 0 0 0px rgba(14, 165, 233, 0.4); }

}



/* Apply this to the "G" icon box */

.g-box-pulse {

    animation: pulseGrow 2s ease-in-out infinite;

}



/* --- 4. BUTTON STYLES --- */

/* Primary "Start Project" Button */

.btn-neon-primary .elementor-button {

    background-color: #0EA5E9 !important;

    color: #FFFFFF !important;

    font-family: 'Space Grotesk', sans-serif !important;

    font-weight: 700;

    border-radius: 8px;

    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);

}

.btn-neon-primary .elementor-button:hover {

    box-shadow: 0 0 20px rgba(14, 165, 233, 0.6), 0 0 40px rgba(14, 165, 233, 0.2);

    transform: translateY(-3px) scale(1.02);

    border-color: #7DD3FC;

}



/* Secondary "Outline" Button */

.btn-neon-outline .elementor-button {

    background-color: transparent !important;

    border: 1px solid #64748B !important;

    color: #FFFFFF !important;

    font-family: 'Space Grotesk', sans-serif !important;

    border-radius: 8px;

    transition: all 0.3s ease;

}

.btn-neon-outline .elementor-button:hover {

    border-color: #0EA5E9 !important;

    color: #0EA5E9 !important;

    background: rgba(14, 165, 233, 0.05) !important;

    box-shadow: 0 0 15px rgba(14, 165, 233, 0.3);

    transform: translateY(-2px);

}



/* --- 5. GLASS HEADER --- */

.glass-nav {

    background: rgba(10, 25, 47, 0.85) !important;

    backdrop-filter: blur(12px);

    -webkit-backdrop-filter: blur(12px);

    border-bottom: 1px solid rgba(14, 165, 233, 0.1);

}

/* --- 6. PAGE ENTRANCE ANIMATION --- */

@keyframes slideUpFade {

    0% { opacity: 0; transform: translateY(20px); }

    100% { opacity: 1; transform: translateY(0); }

}

/* Apply this to your main Section/Container on every page */

.page-transition {

    animation: slideUpFade 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;

}



/* --- 7. SKELETON LOADING LINES --- */

@keyframes skeletonPulse {

  0%, 100% { opacity: 1; }

  50% { opacity: 0.3; }

}

.skeleton-line {

    animation: skeletonPulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;

}

.skeleton-delay-1 {

    animation-delay: 200ms;

}

.skeleton-delay-2 {

    animation-delay: 400ms;

}



/* --- 8. PULSING DOT BADGE --- */

.badge-pulse-dot {

    position: relative;

    display: inline-flex;

    height: 8px;

    width: 8px;

    margin-right: 8px;

    top: -1px; /* Vertically aligns dot with text */

}

.badge-pulse-ring {

    position: absolute;

    height: 100%;

    width: 100%;

    border-radius: 50%;

    background-color: #38BDF8;

    animation: badgePing 1.5s cubic-bezier(0, 0, 0.2, 1) infinite;

}

.badge-pulse-core {

    position: relative;

    border-radius: 50%;

    height: 8px;

    width: 8px;

    background-color: #0EA5E9;

}

@keyframes badgePing {

    75%, 100% { transform: scale(2.5); opacity: 0; }

}

/* New: Dark Button for Pricing Cards (Starter/Enterprise) */
.btn-neon-dark .elementor-price-table__button {
    background-color: #1E293B !important;
    color: #FFFFFF !important;
    width: 100%; /* Forces full width */
    border: 1px solid transparent !important; /* Prepared for hover border */
    transition: all 0.3s ease;
}
.btn-neon-dark .elementor-price-table__button:hover {
    border-color: #0EA5E9 !important;
    color: #0EA5E9 !important;
    box-shadow: 0 0 20px rgba(14, 165, 233, 0.25);
    transform: translateY(-3px);
    background-color: #0F172A !important;
}

/* --- 9. FORCE NAV MENU HOVER & ACTIVE STATES --- */
.elementor-nav-menu--main .elementor-item:hover,
.elementor-nav-menu--main .elementor-item.elementor-item-active,
.elementor-nav-menu--main .elementor-item.highlighted {
    color: #0EA5E9 !important;
    transition: color 0.3s ease !important;
}

/* 1. Smooth transition for the hiding container */
.nav-hide-scroll {
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* 2. When user scrolls past offset, fade and slide the container up */
.elementor-sticky--effects .nav-hide-scroll {
    opacity: 0 !important;
    visibility: hidden !important;
    transform: translateY(-20px) !important;
    pointer-events: none !important; /* Prevents users from accidentally clicking invisible links */
}/* End custom CSS */