/* =============================================
   Single Project Layout - Main Styles
   ============================================= */

/* =============================================
   Quick Animation Test Classes
   ============================================= */
.quick-reveal {
    animation: quickReveal 1s ease-out forwards;
}

@keyframes quickReveal {
    from {
        opacity: 0;
        transform: translateY(30px) scale(0.9);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* Force show text animations */
.elementor-widget-single-project-layout .text-reveal-en .char {
    display: inline-block !important;
}

.elementor-widget-single-project-layout .text-reveal-ar .word-ar {
    display: inline-block !important;
}

/* Enhanced visibility for debugging */
.text-reveal-processed {
    min-height: 1em;
}

/* Ensure images are visible during animation */
.elementor-widget-single-project-layout .image-reveal-wrapper {
    min-height: 200px;
    background: rgba(0,0,0,0.1);
}

/* =============================================
   المتغيرات العامة
   ============================================= */
:root {
    --primary-color: #000;
    --secondary-color: #fff;
    --accent-color: #999999;
    --transition-smooth: cubic-bezier(0.4, 0, 0.2, 1);
    --transition-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

/* =============================================
   Loading & Initial States
   ============================================= */
.elementor-widget-single-project-layout {
    overflow-x: hidden;
}

/* Initial state for reveal animations */
.reveal-element {
    opacity: 0;
    transform: translateY(60px);
}

.reveal-element.revealed {
    opacity: 1;
    transform: translateY(0);
    transition: all 1s var(--transition-smooth);
}

/* Force visibility for text animations */
.elementor-widget-single-project-layout .text-reveal-en,
.elementor-widget-single-project-layout .text-reveal-ar,
.elementor-widget-single-project-layout .text-reveal-processed {
    opacity: 1 !important;
    visibility: visible !important;
    display: block !important;
}

/* Make animations more dramatic */
.elementor-widget-single-project-layout .text-reveal-en .char {
    transform: translateY(150%) rotateX(-90deg) scale(0.8) !important;
    opacity: 0 !important;
    filter: blur(4px);
}

.elementor-widget-single-project-layout .text-reveal-en .char.active {
    transform: translateY(0) rotateX(0) scale(1) !important;
    opacity: 1 !important;
    filter: blur(0);
}

.elementor-widget-single-project-layout .text-reveal-ar .word-ar {
    transform: translateY(100px) scale(0.5) rotateY(20deg) !important;
    opacity: 0 !important;
    filter: blur(4px);
}

.elementor-widget-single-project-layout .text-reveal-ar .word-ar.active {
    transform: translateY(0) scale(1) rotateY(0) !important;
    opacity: 1 !important;
    filter: blur(0);
}

/* Stagger animations */
.stagger-element {
    opacity: 0;
    transform: translateY(30px);
}

.stagger-element.revealed {
    opacity: 1;
    transform: translateY(0);
    transition: all 0.8s var(--transition-smooth);
}

/* =============================================
   الأقسام الرئيسية
   ============================================= */

/* Head Section */
.elementor-widget-single-project-layout .head {
    background-color: #000;
    color: #fff;
    text-align: center;
    padding: 60px 0;
    position: relative;
    overflow: hidden;
}

/* Animated background gradient */
.elementor-widget-single-project-layout .head::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 70%);
    animation: pulse 8s ease-in-out infinite;
    pointer-events: none;
}

@keyframes pulse {
    0%, 100% { transform: scale(0.8); opacity: 0.5; }
    50% { transform: scale(1.2); opacity: 0.8; }
}

.elementor-widget-single-project-layout .head h1 {
    background: linear-gradient(90deg, #FFFFFF 0%, #999999 95%);
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
    font-weight: 200;
    font-size: clamp(50px, 8vw, 100px);
    text-transform: uppercase;
    padding: 20px 0;
    margin: 0;
    line-height: 1.2;
    position: relative;
    z-index: 2;
    animation: titleReveal 1.2s var(--transition-smooth) forwards;
    opacity: 0;
    transform: translateY(40px) scale(0.95);
}

@keyframes titleReveal {
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* Glitch effect on hover */
.elementor-widget-single-project-layout .head h1:hover {
    animation: glitch 0.3s ease-in-out;
}

@keyframes glitch {
    0%, 100% { transform: translate(0); }
    20% { transform: translate(-2px, 2px); }
    40% { transform: translate(-2px, -2px); }
    60% { transform: translate(2px, 2px); }
    80% { transform: translate(2px, -2px); }
}

.elementor-widget-single-project-layout .head p {
    font-weight: 300;
    font-size: 18px;
    text-transform: uppercase;
    margin: 5px 0 0;
    letter-spacing: 0.1em;
    color: #fff;
    opacity: 0;
    animation: fadeInUp 0.8s 0.3s var(--transition-smooth) forwards;
    position: relative;
    z-index: 2;
}

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

/* Jump Tron */
.elementor-widget-single-project-layout .jump-tron {
    background: #fff;
    position: relative;
}

.elementor-widget-single-project-layout .jump-tron .image-container {
    position: relative;
    width: 100%;
    overflow: hidden;
    height: 70vh;
    min-height: 500px;
}

.elementor-widget-single-project-layout .jump-tron .image-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transform: scale(1.1);
    transition: transform 10s var(--transition-smooth);
}

/* Parallax zoom effect */
.elementor-widget-single-project-layout .jump-tron .image-container.parallax-active img {
    transform: scale(1);
}

/* Overlay gradient */
.elementor-widget-single-project-layout .jump-tron .image-container::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 200px;
    background: linear-gradient(to top, rgba(0,0,0,0.3) 0%, transparent 100%);
    pointer-events: none;
}

/* Released Section */
.elementor-widget-single-project-layout .released {
    background-color: #000;
    color: #fff;
    padding: 100px 0;
    position: relative;
    overflow: hidden;
}

/* Animated background pattern */
.elementor-widget-single-project-layout .released::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: 
        repeating-linear-gradient(45deg, transparent, transparent 35px, rgba(255,255,255,.02) 35px, rgba(255,255,255,.02) 70px),
        repeating-linear-gradient(-45deg, transparent, transparent 35px, rgba(255,255,255,.02) 35px, rgba(255,255,255,.02) 70px);
    animation: backgroundMove 20s linear infinite;
    pointer-events: none;
}

@keyframes backgroundMove {
    0% { transform: translate(0, 0); }
    100% { transform: translate(70px, 70px); }
}

.elementor-widget-single-project-layout .released .top-info {
    padding: 0 20px;
    margin-bottom: 60px;
}

.elementor-widget-single-project-layout .released .left-info,
.elementor-widget-single-project-layout .released .right-info {
    display: flex;
    align-items: center;
    gap: 2rem;
}

.elementor-widget-single-project-layout .released .label,
.elementor-widget-single-project-layout .released .value {
    font-weight: 300;
    font-size: 18px;
    line-height: 160%;
    text-transform: uppercase;
    background: linear-gradient(180deg, #FFFFFF 0%, #999999 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin: 0;
}

.elementor-widget-single-project-layout .released .label {
    font-weight: 700;
}

.elementor-widget-single-project-layout .released .description-wrapper {
    margin: 60px 0;
    padding: 0 40px;
}

.elementor-widget-single-project-layout .released .description {
    font-weight: 400;
    font-size: 24px;
    text-align: center;
    text-transform: uppercase;
    margin: 0 auto;
    max-width: 900px;
    color: #fff;
    line-height: 1.6;
    position: relative;
}

/* Text reveal animation */
.elementor-widget-single-project-layout .released .description.text-reveal {
    overflow: hidden;
}

.elementor-widget-single-project-layout .released .description.text-reveal span {
    display: inline-block;
    opacity: 0;
    transform: translateY(100%);
    animation: textReveal 0.6s var(--transition-smooth) forwards;
}

@keyframes textReveal {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.elementor-widget-single-project-layout .released .image-container {
    width: 100%;
    margin: 60px 0;
    position: relative;
    overflow: hidden;
}

.elementor-widget-single-project-layout .released .image-container img {
    width: 100%;
    height: auto;
    display: block;
    transform: scale(1.05);
    transition: transform 8s var(--transition-smooth);
}

/* Parallax scale effect */
.elementor-widget-single-project-layout .released .image-container.in-view img {
    transform: scale(1);
}

/* Image reveal mask */
.elementor-widget-single-project-layout .released .image-container::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #000;
    transform-origin: left;
    transform: scaleX(1);
    z-index: 1;
    transition: transform 1.2s var(--transition-smooth);
}

.elementor-widget-single-project-layout .released .image-container.revealed::before {
    transform: scaleX(0);
    transform-origin: right;
}

/* Features Section */
.elementor-widget-single-project-layout .features {
    background: #000;
    position: relative;
    min-height: 100vh;
    overflow: hidden;
}

/* Pin spacer handling */
.elementor-widget-single-project-layout .pin-spacer {
    position: relative;
}

/* Gradient background animation */
.elementor-widget-single-project-layout .features::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(ellipse at center, rgba(255,255,255,0.05) 0%, transparent 50%);
    animation: rotate 30s linear infinite;
    pointer-events: none;
}

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

/* Features wrapper fix */
.elementor-widget-single-project-layout .features-wrapper {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 5%;
    position: relative;
}

/* Features wrapper container-fluid fix */
.elementor-widget-single-project-layout .features-wrapper.container-fluid {
    padding-left: 5%;
    padding-right: 5%;
    max-width: 100%;
}

/* Features d-flex layout fix */
.elementor-widget-single-project-layout .features-wrapper > .d-flex {
    gap: 60px;
    align-items: center;
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    flex-wrap: nowrap;
}

/* Force features to be in correct position */
.elementor-widget-single-project-layout .features-wrapper > .d-flex.py-5 {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

/* Ensure proper flex behavior for feature content */
.elementor-widget-single-project-layout .features-wrapper > .d-flex > div {
    flex: 1;
}

/* Feature image container */
.elementor-widget-single-project-layout .features-wrapper > .d-flex > img {
    flex: 0 0 auto;
    max-width: 50%;
}

/* Features content styling */
.elementor-widget-single-project-layout .features-wrapper .feature-title {
    font-weight: 300 !important;
    font-size: clamp(40px, 5vw, 70px) !important;
    line-height: 120% !important;
    text-transform: uppercase !important;
    background: linear-gradient(180deg, #FFFFFF 0%, #999999 90%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
    margin-bottom: 30px !important;
    position: relative !important;
    opacity: 1 !important;
    transform: translateX(0) !important;
    transition: all 0.8s var(--transition-smooth);
    display: block !important;
    color: #fff !important; /* Fallback color */
}

.elementor-widget-single-project-layout .features-wrapper .features-description {
    font-weight: 300;
    font-size: 20px;
    line-height: 150%;
    color: #fff;
    letter-spacing: 1px;
    max-width: 600px;
    opacity: 1;
    transform: translateY(0);
    transition: all 0.8s var(--transition-smooth);
}

.elementor-widget-single-project-layout .features-wrapper .feature-img {
    width: 100%;
    max-width: 600px;
    height: auto;
    object-fit: cover;
    opacity: 1;
    transform: translateX(0) scale(1);
    transition: all 0.8s var(--transition-smooth);
    filter: brightness(1);
}

/* Individual feature items with enhanced animations */
.elementor-widget-single-project-layout .features-wrapper > .d-flex.first-feature,
.elementor-widget-single-project-layout .features-wrapper > .d-flex.second-feature,
.elementor-widget-single-project-layout .features-wrapper > .d-flex.third-feature,
.elementor-widget-single-project-layout .features-wrapper > .d-flex.feature-1,
.elementor-widget-single-project-layout .features-wrapper > .d-flex.feature-2,
.elementor-widget-single-project-layout .features-wrapper > .d-flex.feature-3,
.elementor-widget-single-project-layout .features-wrapper > .d-flex.feature-4,
.elementor-widget-single-project-layout .features-wrapper > .d-flex.feature-5,
.elementor-widget-single-project-layout .features-wrapper > .d-flex.feature-6,
.elementor-widget-single-project-layout .features-wrapper > .d-flex.feature-7,
.elementor-widget-single-project-layout .features-wrapper > .d-flex.feature-8,
.elementor-widget-single-project-layout .features-wrapper > .d-flex.feature-9,
.elementor-widget-single-project-layout .features-wrapper > .d-flex.feature-10,
.elementor-widget-single-project-layout .features-wrapper > .d-flex[class*="feature-"] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    align-items: center;
    justify-content: center;
    opacity: 0;
    padding: 0 5%;
    background: #000;
    transform: scale(0.95) translateY(20px);
    transition: all 0.8s var(--transition-smooth);
    visibility: hidden;
    z-index: 1;
}

/* Active feature state - ensure it shows */
.elementor-widget-single-project-layout .feature-active {
    opacity: 1 !important;
    transform: scale(1) translateY(0) !important;
    z-index: 5;
    visibility: visible !important;
    display: flex !important;
}

/* First feature should be visible initially */
.elementor-widget-single-project-layout .features-wrapper > .d-flex.first-feature,
.elementor-widget-single-project-layout .features-wrapper > .d-flex.feature-1 {
    opacity: 1 !important;
    transform: scale(1) translateY(0) !important;
    z-index: 3;
    visibility: visible !important;
}

/* All other features hidden initially */
.elementor-widget-single-project-layout .features-wrapper > .d-flex.second-feature,
.elementor-widget-single-project-layout .features-wrapper > .d-flex.third-feature,
.elementor-widget-single-project-layout .features-wrapper > .d-flex[class*="feature-"]:not(.first-feature):not(.feature-1):not(.feature-img):not(.feature-title):not(.features-description) {
    opacity: 0;
    z-index: 2;
    visibility: hidden;
}

/* Dark Features Section */
.elementor-widget-single-project-layout .fuetuers-features-section {
    background-color: #000;
    padding: 100px 0;
    position: relative;
    overflow: hidden;
    min-height: 100vh;
}

/* Animated dots pattern */
.elementor-widget-single-project-layout .fuetuers-features-section::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: radial-gradient(circle, rgba(255,255,255,0.05) 1px, transparent 1px);
    background-size: 50px 50px;
    animation: dotsMove 40s linear infinite;
    pointer-events: none;
}

@keyframes dotsMove {
    0% { transform: translate(0, 0); }
    100% { transform: translate(50px, 50px); }
}

.elementor-widget-single-project-layout .fuetuers-features-title {
    font-weight: 300;
    font-size: clamp(50px, 6vw, 80px);
    line-height: 120%;
    text-align: center;
    text-transform: uppercase;
    background: linear-gradient(180deg, #FFFFFF 0%, #999999 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 100px;
    position: relative;
    z-index: 2;
    opacity: 1 !important;
    display: block !important;
    padding: 0 20px;
}

/* Split text animation */
.elementor-widget-single-project-layout .fuetuers-features-title.split-text span {
    display: inline-block;
    opacity: 0;
    transform: translateY(40px) rotateX(90deg);
    transition: all 0.8s var(--transition-smooth);
    transform-origin: bottom;
}

.elementor-widget-single-project-layout .fuetuers-features-title.split-text.animate span {
    opacity: 1;
    transform: translateY(0) rotateX(0);
}

.elementor-widget-single-project-layout .fuetuers-features-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: center;
    margin-bottom: 80px;
    max-width: 1400px;
    margin-left: auto;
    margin-right: auto;
    padding: 0 60px;
}

.elementor-widget-single-project-layout .fuetuers-feature-block {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.elementor-widget-single-project-layout .fuetuers-feature-block.flex-row {
    flex-direction: row;
    align-items: center;
    gap: 80px;
    justify-content: space-between;
}

.elementor-widget-single-project-layout .fuetuers-feature-text {
    font-weight: 300;
    font-size: 22px;
    line-height: 160%;
    letter-spacing: 0.5px;
    max-width: 600px;
    color: #fff;
    opacity: 0.9;
    transition: opacity 0.3s ease;
}

.elementor-widget-single-project-layout .fuetuers-feature-text:hover {
    opacity: 1;
}

.elementor-widget-single-project-layout .fuetuers-feature-img {
    width: 100%;
    max-width: 500px;
    height: auto;
    object-fit: cover;
    display: block !important;
    position: relative;
    overflow: hidden;
    transform: scale(1);
    transition: all 0.6s var(--transition-smooth);
    border-radius: 8px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.5);
    opacity: 1 !important;
    visibility: visible !important;
}

/* Magnetic hover effect */
.elementor-widget-single-project-layout .fuetuers-feature-img:hover {
    transform: scale(1.05);
}

/* Image reveal effect */
.elementor-widget-single-project-layout .fuetuers-feature-img {
    animation: fadeInScale 1s ease-out forwards;
}

@keyframes fadeInScale {
    from {
        opacity: 0;
        transform: scale(0.9) translateY(30px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

.elementor-widget-single-project-layout .fuetuers-feature-img.reveal-image {
    opacity: 0;
    transform: scale(0.9) translateY(30px);
}

.elementor-widget-single-project-layout .fuetuers-feature-img.reveal-image.revealed {
    opacity: 1;
    transform: scale(1) translateY(0);
    transition: all 1s var(--transition-smooth);
}

.elementor-widget-single-project-layout .fuetuers-feature-img.right {
    margin-left: auto;
}

.elementor-widget-single-project-layout .fuetuers-bottom-image-row {
    display: flex;
    justify-content: flex-end;
    margin-top: 80px;
    width: 100%;
    padding-right: 60px;
}

.elementor-widget-single-project-layout .fuetuers-bottom-image-row img {
    width: 60%;
    max-width: 800px;
    height: auto;
    border-radius: 8px;
    box-shadow: 0 30px 80px rgba(0,0,0,0.6);
    transition: transform 0.6s ease;
}

.elementor-widget-single-project-layout .fuetuers-bottom-image-row img:hover {
    transform: scale(1.02) translateY(-10px);
}

/* Add visual separator */
.elementor-widget-single-project-layout .fuetuers-features-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 10%;
    right: 10%;
    height: 1px;
    background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.2) 50%, transparent 100%);
}

/* Layout Solution */
.elementor-widget-single-project-layout .layout-solution {
    padding: 120px 0;
    background: #000;
    position: relative;
    overflow: hidden;
}

/* Grid pattern background */
.elementor-widget-single-project-layout .layout-solution::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: 
        linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px);
    background-size: 50px 50px;
    animation: gridMove 20s linear infinite;
    pointer-events: none;
}

/* Scanning line effect */
.elementor-widget-single-project-layout .layout-solution::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.4) 50%, transparent 100%);
    animation: scanLine 4s linear infinite;
    pointer-events: none;
}

@keyframes gridMove {
    0% { transform: translate(0, 0); }
    100% { transform: translate(50px, 50px); }
}

@keyframes scanLine {
    0% { transform: translateY(0); }
    100% { transform: translateY(100vh); }
}

.elementor-widget-single-project-layout .layout-solution h2 {
    font-weight: 300;
    font-size: clamp(40px, 5vw, 70px);
    line-height: 120%;
    text-transform: uppercase;
    background: linear-gradient(180deg, #FFFFFF 0%, #999999 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 60px;
    text-align: center;
    position: relative;
    z-index: 2;
    opacity: 0;
    transform: translateY(-30px);
    animation: fadeInDown 1s 0.2s var(--transition-smooth) forwards;
}

@keyframes fadeInDown {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.elementor-widget-single-project-layout .layout-solution .image-container {
    position: relative;
    max-width: 1200px;
    margin: 0 auto;
    overflow: hidden;
}

/* Blueprint/Technical drawing effect overlay */
.elementor-widget-single-project-layout .layout-solution .image-container::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: 
        linear-gradient(45deg, transparent 30%, rgba(0,255,255,0.1) 30%, rgba(0,255,255,0.1) 31%, transparent 31%),
        linear-gradient(-45deg, transparent 30%, rgba(0,255,255,0.1) 30%, rgba(0,255,255,0.1) 31%, transparent 31%);
    background-size: 20px 20px;
    opacity: 0;
    transition: opacity 1s ease;
    pointer-events: none;
    z-index: 2;
    mix-blend-mode: screen;
}

.elementor-widget-single-project-layout .layout-solution .image-container:hover::before {
    opacity: 1;
}

.elementor-widget-single-project-layout .layout-image {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    display: block !important;
    height: auto;
    opacity: 1 !important; /* Force visibility */
    transform: scale(1) rotateX(0) !important;
    filter: none !important;
    transition: all 1.5s var(--transition-smooth);
    visibility: visible !important;
}

.elementor-widget-single-project-layout .layout-image.revealed {
    opacity: 1;
    transform: scale(1) rotateX(0);
    filter: blur(0) brightness(1);
}

/* Glow effect on reveal */
.elementor-widget-single-project-layout .layout-image.revealed {
    box-shadow: 0 0 100px rgba(255,255,255,0.1);
}

/* 3D perspective hover */
.elementor-widget-single-project-layout .layout-image:hover {
    transform: perspective(1000px) rotateY(3deg) rotateX(-3deg) scale(1.05);
    box-shadow: 0 0 150px rgba(255,255,255,0.2);
}

/* Projects Section */
.elementor-widget-single-project-layout .projects-section {
    padding: 120px 0;
    background: #000;
    overflow: hidden;
    position: relative;
}

/* Animated gradient background */
.elementor-widget-single-project-layout .projects-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 200%;
    height: 100%;
    background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.03) 50%, transparent 100%);
    animation: gradientMove 15s linear infinite;
    pointer-events: none;
}

@keyframes gradientMove {
    0% { transform: translateX(0); }
    100% { transform: translateX(50%); }
}

.elementor-widget-single-project-layout .projects-section h2 {
    font-size: clamp(30px, 4vw, 50px);
    font-weight: 300;
    text-transform: uppercase;
    margin-bottom: 40px;
}

.elementor-widget-single-project-layout .grad-color {
    background: linear-gradient(180deg, #FFFFFF 0%, #999999 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.elementor-widget-single-project-layout .view-all {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: #fff;
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 12px 24px;
    border: 1px solid rgba(255,255,255,0.2);
    border-radius: 30px;
    transition: all 0.4s var(--transition-smooth);
    position: relative;
    overflow: hidden;
}

/* Button shine effect */
.elementor-widget-single-project-layout .view-all::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.2) 50%, transparent 100%);
    transition: left 0.5s ease;
}

.elementor-widget-single-project-layout .view-all:hover::before {
    left: 100%;
}

.elementor-widget-single-project-layout .view-all:hover {
    background: rgba(255,255,255,0.1);
    border-color: rgba(255,255,255,0.4);
    transform: translateY(-2px);
}

.elementor-widget-single-project-layout .view-all svg {
    transition: transform 0.3s ease;
}

.elementor-widget-single-project-layout .view-all:hover svg {
    transform: translate(3px, -3px);
}

/* Project Cards */
.elementor-widget-single-project-layout .project-card {
    background: #0a0a0a;
    border-radius: 8px;
    overflow: hidden;
    transition: all 0.5s var(--transition-smooth);
    position: relative;
    cursor: pointer;
}

/* Card glow effect */
.elementor-widget-single-project-layout .project-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(circle at var(--mouse-x, 50%) var(--mouse-y, 50%), rgba(255,255,255,0.1) 0%, transparent 50%);
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
    z-index: 1;
}

.elementor-widget-single-project-layout .project-card:hover::before {
    opacity: 1;
}

.elementor-widget-single-project-layout .project-card:hover {
    transform: translateY(-15px) scale(1.02);
    box-shadow: 0 20px 40px rgba(255,255,255,0.1);
}

.elementor-widget-single-project-layout .project-image {
    width: 100%;
    height: 300px;
    object-fit: cover;
    transition: all 0.6s var(--transition-smooth);
    filter: brightness(0.9);
}

.elementor-widget-single-project-layout .project-card:hover .project-image {
    transform: scale(1.1);
    filter: brightness(1.1);
}

/* Image overlay effect */
.elementor-widget-single-project-layout .project-card .project-image-wrapper {
    position: relative;
    overflow: hidden;
}

.elementor-widget-single-project-layout .project-card .project-image-wrapper::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,0.7) 100%);
    opacity: 0;
    transition: opacity 0.5s ease;
}

.elementor-widget-single-project-layout .project-card:hover .project-image-wrapper::after {
    opacity: 1;
}

.elementor-widget-single-project-layout .project-info {
    padding: 30px;
}

.elementor-widget-single-project-layout .project-info h5 {
    font-size: 24px;
    font-weight: 300;
    margin-bottom: 10px;
    color: #fff;
}

.elementor-widget-single-project-layout .project-info p {
    font-size: 14px;
    color: #999;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: 20px;
}

/* Swiper */
.elementor-widget-single-project-layout .swiper {
    padding-bottom: 50px;
}

.elementor-widget-single-project-layout .swiper-pagination-bullet {
    background: rgba(255,255,255,0.3);
    opacity: 1;
}

.elementor-widget-single-project-layout .swiper-pagination-bullet-active {
    background: #fff;
}

/* Contact Section */
.elementor-widget-single-project-layout .lets-talk-section {
    background: #000;
    padding: 120px 0;
    position: relative;
    overflow: hidden;
}

/* Animated particles background */
.elementor-widget-single-project-layout .lets-talk-section::before {
    content: '';
    position: absolute;
    width: 4px;
    height: 4px;
    background: rgba(255,255,255,0.3);
    border-radius: 50%;
    animation: float 15s infinite linear;
    box-shadow: 
        20vw 20vh 0 rgba(255,255,255,0.2),
        40vw 40vh 0 rgba(255,255,255,0.3),
        60vw 60vh 0 rgba(255,255,255,0.2),
        80vw 80vh 0 rgba(255,255,255,0.3),
        10vw 90vh 0 rgba(255,255,255,0.2),
        90vw 10vh 0 rgba(255,255,255,0.3);
}

@keyframes float {
    0% { transform: translateY(100vh) translateX(-10vw); }
    100% { transform: translateY(-100vh) translateX(10vw); }
}

.elementor-widget-single-project-layout .lets-talk-section p {
    font-weight: 300;
    font-size: 36px;
    line-height: 150%;
    text-transform: uppercase;
    color: #fff;
    max-width: 900px;
    letter-spacing: 1px;
    margin-bottom: 40px;
}

.elementor-widget-single-project-layout .btn-contact {
    display: inline-block;
    padding: 18px 40px;
    background: #fff;
    color: #000;
    text-decoration: none;
    font-weight: 600;
    font-size: 16px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    border-radius: 50px;
    transition: all 0.4s var(--transition-smooth);
    position: relative;
    overflow: hidden;
    z-index: 1;
}

/* Button ripple effect */
.elementor-widget-single-project-layout .btn-contact::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: rgba(0,0,0,0.1);
    transform: translate(-50%, -50%);
    transition: width 0.6s, height 0.6s;
}

.elementor-widget-single-project-layout .btn-contact:hover::after {
    width: 300px;
    height: 300px;
}

.elementor-widget-single-project-layout .btn-contact:hover {
    transform: translateY(-5px) scale(1.05);
    box-shadow: 0 15px 40px rgba(255,255,255,0.3);
}

/* =============================================
   Responsive
   ============================================= */
@media (max-width: 1200px) {
    .elementor-widget-single-project-layout .fuetuers-features-grid {
        gap: 40px;
    }
    
    .elementor-widget-single-project-layout .right-info {
        gap: 100px;
    }
}

@media (max-width: 992px) {
    .elementor-widget-single-project-layout .head h1 {
        font-size: 60px;
    }
    
    .elementor-widget-single-project-layout .features-wrapper h2.feature-title,
    .elementor-widget-single-project-layout .fuetuers-features-title,
    .elementor-widget-single-project-layout .layout-solution h2 {
        font-size: 50px;
    }
    
    .elementor-widget-single-project-layout .features-wrapper > .d-flex {
        flex-direction: column;
        text-align: center;
        gap: 40px;
    }
    
    .elementor-widget-single-project-layout .fuetuers-features-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }
    
    .elementor-widget-single-project-layout .fuetuers-feature-block.flex-row {
        flex-direction: column !important;
        text-align: center;
    }
    
    .elementor-widget-single-project-layout .fuetuers-feature-img {
        margin: 0 auto;
    }
}

@media (max-width: 768px) {
    /* Disable pinning on mobile */
    .elementor-widget-single-project-layout .features {
        position: relative !important;
        height: auto !important;
    }
    
    .elementor-widget-single-project-layout .pin-spacer {
        height: auto !important;
    }
    
    .elementor-widget-single-project-layout .first-feature,
    .elementor-widget-single-project-layout .second-feature,
    .elementor-widget-single-project-layout .third-feature,
    .elementor-widget-single-project-layout [class*="feature-"] {
        position: relative !important;
        height: auto !important;
        opacity: 1 !important;
        padding: 60px 5%;
    }
    
    .elementor-widget-single-project-layout .head {
        padding: 40px 0;
    }
    
    .elementor-widget-single-project-layout .head h1 {
        font-size: 40px;
    }
    
    .elementor-widget-single-project-layout .released {
        padding: 60px 0;
    }
    
    .elementor-widget-single-project-layout .released .top-info {
        flex-direction: column;
        gap: 20px;
        text-align: center;
    }
    
    .elementor-widget-single-project-layout .right-info {
        gap: 20px;
        justify-content: center;
    }
    
    .elementor-widget-single-project-layout .released .description {
        font-size: 20px;
        width: 90%;
    }
    
    .elementor-widget-single-project-layout .fuetuers-bottom-image-row {
        justify-content: center;
    }
    
    .elementor-widget-single-project-layout .fuetuers-bottom-image-row img {
        width: 90%;
    }
    
    .elementor-widget-single-project-layout .lets-talk-section p {
        font-size: 24px;
        text-align: center;
    }
}

@media (max-width: 576px) {
    .elementor-widget-single-project-layout .head h1 {
        font-size: 32px;
    }
    
    .elementor-widget-single-project-layout .head p {
        font-size: 14px;
    }
    
    .elementor-widget-single-project-layout .features-wrapper h2.feature-title,
    .elementor-widget-single-project-layout .fuetuers-features-title,
    .elementor-widget-single-project-layout .layout-solution h2 {
        font-size: 32px;
    }
    
    .elementor-widget-single-project-layout .features-wrapper .features-description,
    .elementor-widget-single-project-layout .fuetuers-feature-text {
        font-size: 16px;
    }
    
    .elementor-widget-single-project-layout .released .label,
    .elementor-widget-single-project-layout .released .value {
        font-size: 16px;
    }
    
    .elementor-widget-single-project-layout .released .description {
        font-size: 18px;
    }
    
    .elementor-widget-single-project-layout .lets-talk-section p {
        font-size: 20px;
    }
    
    .elementor-widget-single-project-layout .projects-section {
        padding: 80px 0;
    }
}

/* =============================================
   Scroll Indicators & Progress
   ============================================= */
.scroll-progress {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: rgba(255,255,255,0.1);
    z-index: 1000;
}

.scroll-progress-bar {
    height: 100%;
    background: linear-gradient(90deg, #fff 0%, #999 100%);
    width: 0;
    transition: width 0.3s ease;
}

/* =============================================
   Loading Animation
   ============================================= */
.widget-loading {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #000;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    opacity: 1;
    transition: opacity 0.5s ease;
}

.widget-loading.loaded {
    opacity: 0;
    pointer-events: none;
}

.loading-spinner {
    width: 50px;
    height: 50px;
    border: 2px solid rgba(255,255,255,0.1);
    border-top-color: #fff;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* =============================================
   Features Scroll Indicator
   ============================================= */
.features-scroll-indicator {
    position: absolute;
    bottom: 40px;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
    z-index: 10;
    opacity: 0;
    animation: fadeInUp 1s 1s forwards;
}

.features-scroll-indicator span {
    color: #fff;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    display: block;
    margin-bottom: 10px;
}

.features-scroll-indicator::after {
    content: '';
    display: block;
    width: 1px;
    height: 40px;
    background: linear-gradient(to bottom, #fff 0%, transparent 100%);
    margin: 0 auto;
    animation: scrollDown 1.5s ease-in-out infinite;
}

@keyframes scrollDown {
    0% { transform: translateY(0); opacity: 1; }
    100% { transform: translateY(20px); opacity: 0; }
}

/* Features counter already defined above - removed duplicate */

/* =============================================
   Mobile Fixes
   ============================================= */
@media (max-width: 768px) {
    /* Reset all feature animations on mobile */
    .elementor-widget-single-project-layout .features-wrapper > .d-flex.first-feature,
    .elementor-widget-single-project-layout .features-wrapper > .d-flex.second-feature,
    .elementor-widget-single-project-layout .features-wrapper > .d-flex.third-feature,
    .elementor-widget-single-project-layout .features-wrapper > .d-flex[class*="feature-"] {
        position: relative !important;
        opacity: 1 !important;
        visibility: visible !important;
        transform: none !important;
        height: auto !important;
        padding: 60px 20px !important;
        display: flex !important;
        flex-direction: column !important;
    }
    
    .elementor-widget-single-project-layout .features-scroll-indicator {
        display: none;
    }
    
    .elementor-widget-single-project-layout .layout-solution {
        padding: 60px 0;
    }
    
    .elementor-widget-single-project-layout .layout-image {
        padding: 0 20px;
    }
}

/* Features troubleshooting - force visibility for debugging */
.elementor-widget-single-project-layout .features {
    min-height: 100vh;
}

.elementor-widget-single-project-layout .features * {
    /* Remove this after debugging */
    /* opacity: 1 !important;
    visibility: visible !important; */
}

/* First feature absolute must show */
.elementor-widget-single-project-layout .features-wrapper > .d-flex:first-of-type[class*="feature"] {
    opacity: 1 !important;
    visibility: visible !important;
}

/* Pin spacer should not hide content */
.elementor-widget-single-project-layout .pin-spacer {
    overflow: visible !important;
}

/* Emergency visibility fix for features */
.elementor-widget-single-project-layout .features-wrapper > .d-flex[class*="feature"].feature-active,
.elementor-widget-single-project-layout .features-wrapper > .d-flex.first-feature {
    opacity: 1 !important;
    visibility: visible !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100vh !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: 10 !important;
    transform: none !important;
    padding: 0 5% !important;
    background: #000 !important;
    gap: 60px !important;
}

/* Fix for missing content in features */
.elementor-widget-single-project-layout .features {
    position: relative !important;
    background: #000 !important;
    min-height: 100vh !important;
}

.elementor-widget-single-project-layout .features-wrapper {
    position: relative !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 100vh !important;
}

/* Ensure content inside features is visible */
.elementor-widget-single-project-layout .features-wrapper > .d-flex.feature-active *,
.elementor-widget-single-project-layout .features-wrapper > .d-flex.first-feature * {
    opacity: 1 !important;
    visibility: visible !important;
}

/* Force feature content to show */
.elementor-widget-single-project-layout .features-wrapper .feature-title,
.elementor-widget-single-project-layout .features-wrapper .features-description,
.elementor-widget-single-project-layout .features-wrapper .feature-img {
    opacity: 1 !important;
    visibility: visible !important;
    display: block !important;
    position: relative !important;
    z-index: 20 !important;
}

/* =============================================
   CRITICAL FEATURES FIX
   ============================================= */
/* Make features sticky container */
.elementor-widget-single-project-layout .features {
    position: sticky !important;
    top: 0;
    height: 100vh;
    background: #000;
    overflow: hidden;
}

/* Features wrapper must be full height */
.elementor-widget-single-project-layout .features-wrapper {
    position: relative !important;
    height: 100vh !important;
    width: 100% !important;
}

/* Each feature item styling */
.elementor-widget-single-project-layout .features-wrapper > .d-flex[class*="feature"] {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100vh !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 5% !important;
    background: #000 !important;
    transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1) !important;
    /* Hidden by default */
    opacity: 0 !important;
    visibility: hidden !important;
    transform: scale(0.95) translateY(20px) !important;
    z-index: 1 !important;
}

/* Active feature visible */
.elementor-widget-single-project-layout .features-wrapper > .d-flex.feature-active {
    opacity: 1 !important;
    visibility: visible !important;
    transform: scale(1) translateY(0) !important;
    z-index: 10 !important;
}

/* First feature initially visible */
.elementor-widget-single-project-layout .features-wrapper > .d-flex:first-child[class*="feature"] {
    opacity: 1 !important;
    visibility: visible !important;
    transform: scale(1) translateY(0) !important;
    z-index: 10 !important;
}

/* Ensure content inside features is properly sized */
.elementor-widget-single-project-layout .features-wrapper > .d-flex > div {
    flex: 1;
    max-width: 600px;
}

.elementor-widget-single-project-layout .features-wrapper > .d-flex > img {
    flex: 0 0 auto;
    max-width: 50%;
    height: auto;
}

/* Fix feature title and description */
.elementor-widget-single-project-layout .features-wrapper .feature-title {
    font-size: clamp(40px, 5vw, 70px) !important;
    line-height: 1.2 !important;
    margin-bottom: 30px !important;
    color: #fff !important;
    /* Animation */
    opacity: 0;
    transform: translateY(50px);
    transition: all 1s cubic-bezier(0.4, 0, 0.2, 1);
}

.elementor-widget-single-project-layout .features-wrapper .features-description {
    font-size: 20px !important;
    line-height: 1.6 !important;
    color: #fff !important;
    /* Animation */
    opacity: 0;
    transform: translateY(50px);
    transition: all 1s cubic-bezier(0.4, 0, 0.2, 1) 0.2s;
}

.elementor-widget-single-project-layout .features-wrapper .feature-img {
    /* Animation */
    opacity: 0;
    transform: scale(0.9) translateX(30px);
    transition: all 1s cubic-bezier(0.4, 0, 0.2, 1) 0.4s;
}

/* Active state animations */
.elementor-widget-single-project-layout .feature-active .feature-title {
    opacity: 1 !important;
    transform: translateY(0) !important;
}

.elementor-widget-single-project-layout .feature-active .features-description {
    opacity: 1 !important;
    transform: translateY(0) !important;
}

.elementor-widget-single-project-layout .feature-active .feature-img {
    opacity: 1 !important;
    transform: scale(1) translateX(0) !important;
}

/* Reset animations on feature change */
.elementor-widget-single-project-layout .features-wrapper > .d-flex:not(.feature-active) .feature-title,
.elementor-widget-single-project-layout .features-wrapper > .d-flex:not(.feature-active) .features-description,
.elementor-widget-single-project-layout .features-wrapper > .d-flex:not(.feature-active) .feature-img {
    opacity: 0 !important;
    transform: translateY(50px) !important;
}

.elementor-widget-single-project-layout .features-wrapper > .d-flex:not(.feature-active) .feature-img {
    transform: scale(0.9) translateX(30px) !important;
}

/* Features counter styling */
.features-counter {
    position: fixed;
    right: 40px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 1000;
    color: #fff;
    font-size: 14px;
    opacity: 0;
    transition: opacity 0.5s ease;
}

.features-counter.active {
    opacity: 1;
}

.features-counter .current {
    font-size: 24px;
    font-weight: 300;
}

.features-counter .separator {
    margin: 0 5px;
    opacity: 0.5;
}

.features-counter .total {
    opacity: 0.5;
    font-size: 14px;
}

/* Mobile features fix */
@media (max-width: 768px) {
    .elementor-widget-single-project-layout .features {
        position: relative !important;
        height: auto !important;
    }
    
    .elementor-widget-single-project-layout .features-wrapper > .d-flex[class*="feature"] {
        position: relative !important;
        opacity: 1 !important;
        visibility: visible !important;
        transform: none !important;
        height: auto !important;
        min-height: 70vh !important;
        margin-bottom: 40px !important;
    }
}

/* Fix flex layout inside features */
.elementor-widget-single-project-layout .features-wrapper > .d-flex > .d-flex.flex-column {
    display: flex !important;
    flex-direction: column !important;
    gap: 2rem !important;
    z-index: 20 !important;
    position: relative !important;
}

/* Ensure images are visible */
.elementor-widget-single-project-layout .features-wrapper img.feature-img {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    max-width: 600px !important;
    width: 100% !important;
    height: auto !important;
    object-fit: cover !important;
}

/* Features content layout fix */
.elementor-widget-single-project-layout .features-wrapper > .d-flex > .d-flex.flex-column {
    max-width: 600px;
    width: 100%;
}

/* Override any conflicting styles */
.elementor-widget-single-project-layout .features *[style*="opacity: 0"] {
    opacity: 1 !important;
}

/* Override inline styles that set opacity to 0 */
.elementor-widget-single-project-layout [style*="opacity: 0"] {
    opacity: 1 !important;
}

/* CRITICAL FIX: Ensure text is visible even without gradient */
.elementor-widget-single-project-layout .feature-title:not(:empty) {
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
}

.elementor-widget-single-project-layout .features-description:not(:empty) {
    color: #fff !important;
}

/* Fix for Bootstrap conflict */
.elementor-widget-single-project-layout .features-wrapper .d-flex {
    display: flex !important;
}

.elementor-widget-single-project-layout .features-wrapper .justify-content-between {
    justify-content: space-between !important;
}

/* Add gradient back to title after ensuring visibility */
.elementor-widget-single-project-layout .features-wrapper .feature-title {
    background: linear-gradient(180deg, #FFFFFF 0%, #999999 90%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
}

/* Fallback for gradient issues */
.elementor-widget-single-project-layout .features-wrapper .feature-title:empty,
.elementor-widget-single-project-layout .features-wrapper .feature-title:not(:has(*)) {
    -webkit-text-fill-color: #fff !important;
}

/* Fix for elements with translate or transform */
.elementor-widget-single-project-layout [style*="transform"],
.elementor-widget-single-project-layout [style*="translate"] {
    transform: none !important;
}

/* Ensure images are visible */
.elementor-widget-single-project-layout img {
    opacity: 1 !important;
    visibility: visible !important;
    display: block !important;
}

/* Fix text elements */
.elementor-widget-single-project-layout h1,
.elementor-widget-single-project-layout h2,
.elementor-widget-single-project-layout h3,
.elementor-widget-single-project-layout h4,
.elementor-widget-single-project-layout h5,
.elementor-widget-single-project-layout h6,
.elementor-widget-single-project-layout p,
.elementor-widget-single-project-layout span {
    opacity: 1 !important;
    visibility: visible !important;
}

/* Fix sections */
.elementor-widget-single-project-layout section {
    opacity: 1 !important;
    visibility: visible !important;
    display: block !important;
}
.pin-spacer {
    height: auto !important;
}

/* =============================================
   Fix Blur Issues
   ============================================= */

/* Force clear text after animation */
.elementor-widget-single-project-layout .reveal-element.revealed,
.elementor-widget-single-project-layout .text-reveal-processed,
.elementor-widget-single-project-layout h1,
.elementor-widget-single-project-layout h2,
.elementor-widget-single-project-layout h3,
.elementor-widget-single-project-layout p,
.elementor-widget-single-project-layout span {
    -webkit-filter: blur(0) !important;
    filter: blur(0) !important;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    transform: translateZ(0);
}

/* Remove blur from gradient text completely */
.elementor-widget-single-project-layout .grad-color,
.elementor-widget-single-project-layout .feature-title,
.elementor-widget-single-project-layout .features-description {
    -webkit-filter: none !important;
    filter: none !important;
}

/* Fix for all text with gradient */
.elementor-widget-single-project-layout [style*="background-clip: text"],
.elementor-widget-single-project-layout [style*="-webkit-background-clip: text"] {
    -webkit-filter: none !important;
    filter: none !important;
}

/* Disable blur for titles completely */
.elementor-widget-single-project-layout .head h1,
.elementor-widget-single-project-layout .head h1 * {
    -webkit-filter: none !important;
    filter: none !important;
    opacity: 1 !important;
}

/* Remove blur from ALL text elements */
.elementor-widget-single-project-layout h1,
.elementor-widget-single-project-layout h2,
.elementor-widget-single-project-layout h3,
.elementor-widget-single-project-layout h4,
.elementor-widget-single-project-layout h5,
.elementor-widget-single-project-layout h6,
.elementor-widget-single-project-layout p,
.elementor-widget-single-project-layout span,
.elementor-widget-single-project-layout a,
.elementor-widget-single-project-layout div:not(.image-container) {
    -webkit-filter: none !important;
    filter: none !important;
}

/* Keep blur ONLY for images during animation */
.elementor-widget-single-project-layout img:not(.revealed) {
    filter: blur(20px);
    -webkit-filter: blur(20px);
}

.elementor-widget-single-project-layout img.revealed,
.elementor-widget-single-project-layout .revealed img {
    filter: blur(0) !important;
    -webkit-filter: blur(0) !important;
}

/* =============================================
   Scroll Text Reveal Animations
   ============================================= */

/* English Text Reveal */
.text-reveal-en {
    position: relative;
    overflow: hidden;
    display: block;
}

.text-reveal-en .word {
    display: inline-block;
    position: relative;
    overflow: hidden;
    margin-right: 0.3em;
}

.text-reveal-en .char {
    display: inline-block;
    opacity: 0;
    transform: translateY(100%) rotateX(-90deg);
    transform-style: preserve-3d;
    transform-origin: bottom center;
    transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    transition-delay: calc(var(--char-index) * 0.03s);
    will-change: transform, opacity;
}

/* Active state for characters */
.text-reveal-en .char.active {
    opacity: 1;
    transform: translateY(0) rotateX(0);
}

/* Smooth scroll-based reveal */
.text-reveal-en[style*="--scroll-progress"] .char {
    transition: none;
}

/* Enhanced animation for headers */
.elementor-widget-single-project-layout h1.text-reveal-en .char,
.elementor-widget-single-project-layout h2.text-reveal-en .char {
    font-weight: inherit;
    letter-spacing: inherit;
}

/* Arabic Text Reveal */
.text-reveal-ar {
    position: relative;
    overflow: hidden;
    direction: rtl;
    display: block;
}

.text-reveal-ar .word-ar {
    display: inline-block;
    opacity: 0;
    transform: translateY(50px) scale(0.8) rotateY(10deg);
    transform-origin: center bottom;
    transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    transition-delay: calc(var(--word-index) * 0.08s);
    margin-left: 0.3em;
    will-change: transform, opacity;
}

/* Active state for Arabic words */
.text-reveal-ar .word-ar.active {
    opacity: 1;
    transform: translateY(0) scale(1) rotateY(0);
}

/* Smooth scroll-based reveal for Arabic */
.text-reveal-ar[style*="--scroll-progress"] .word-ar {
    transition: none;
}

/* =============================================
   Image Reveal Animations
   ============================================= */

.image-reveal-wrapper {
    position: relative;
    overflow: hidden;
    display: block;
    width: 100%;
    background: #000;
}

.image-reveal-wrapper::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 40px;
    height: 40px;
    border: 2px solid rgba(255,255,255,0.3);
    border-radius: 50%;
    animation: pulse 2s ease-out infinite;
    z-index: 3;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.image-reveal-wrapper.loading::before {
    opacity: 1;
}

@keyframes pulse {
    0% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 1;
    }
    100% {
        transform: translate(-50%, -50%) scale(2);
        opacity: 0;
    }
}

.image-reveal-wrapper img {
    display: block;
    width: 100%;
    height: auto;
    transform-origin: center center;
    opacity: 0;
    transform: scale(1.1);
    filter: blur(10px);
    transition: all 1.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.image-reveal-wrapper.revealed img {
    opacity: 1;
    transform: scale(1);
    filter: blur(0);
}

/* Reveal mask */
.image-reveal-mask {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #000;
    transform-origin: right center;
    z-index: 2;
    pointer-events: none;
    box-shadow: 0 0 100px rgba(0,0,0,0.5);
}

/* RTL support for image reveal */
.rtl .image-reveal-mask,
[dir="rtl"] .image-reveal-mask {
    transform-origin: left center;
}

/* Parallax effect on scroll */
.image-reveal-wrapper[style*="--reveal-progress"] img {
    will-change: transform, opacity;
}

/* Enhanced image hover effects */
.image-reveal-wrapper:hover img {
    transform: scale(1.05);
    transition: transform 0.6s var(--transition-smooth);
}

/* =============================================
   Text Gradient Animation Fix
   ============================================= */

/* Ensure gradient text works with animations */
.text-reveal-en.grad-color,
.text-reveal-ar.grad-color {
    background: linear-gradient(180deg, #FFFFFF 0%, #999999 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Gradient animation on reveal */
@keyframes gradientShift {
    0% {
        background-position: 0% 50%;
    }
    100% {
        background-position: 100% 50%;
    }
}

.text-reveal-en .char {
    background: linear-gradient(90deg, #999999 0%, #FFFFFF 50%, #999999 100%);
    background-size: 200% 100%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.text-reveal-en .char.active {
    animation: gradientShift 2s ease infinite;
}

/* Fix for individual characters/words */
.text-reveal-en .char,
.text-reveal-ar .word-ar {
    color: inherit;
    -webkit-text-fill-color: inherit;
}

/* Maintain gradient on parent */
.text-reveal-en.grad-color .char {
    background: inherit;
    -webkit-background-clip: inherit;
    -webkit-text-fill-color: inherit;
    background-clip: inherit;
}

/* =============================================
   Performance Optimizations
   ============================================= */

/* GPU acceleration for animations */
.text-reveal-en .char,
.text-reveal-ar .word-ar,
.image-reveal-wrapper img,
.image-reveal-mask {
    will-change: transform, opacity;
    backface-visibility: hidden;
    -webkit-font-smoothing: antialiased;
}

/* Remove will-change after animation */
.text-reveal-en .char[style*="opacity: 1"],
.text-reveal-ar .word-ar[style*="opacity: 1"] {
    will-change: auto;
}

/* =============================================
   Responsive Adjustments
   ============================================= */

@media (max-width: 768px) {
    /* Simplify animations on mobile */
    .text-reveal-en .char {
        transform: translateY(50px) rotateX(-45deg);
        transition-delay: calc(var(--char-index) * 0.02s);
    }
    
    .text-reveal-ar .word-ar {
        transform: translateY(30px) scale(0.9);
        transition-delay: calc(var(--word-index) * 0.04s);
    }
    
    /* Faster animations on mobile */
    .text-reveal-en .char,
    .text-reveal-ar .word-ar {
        transition-duration: 0.2s;
    }
    
    /* Simpler image reveal on mobile */
    .image-reveal-mask {
        display: none;
    }
    
    .image-reveal-wrapper img {
        opacity: 0;
        transform: translateY(30px);
        transition: all 0.6s var(--transition-smooth);
    }
    
    .image-reveal-wrapper[style*="--reveal-progress"] img {
        opacity: 1;
        transform: translateY(0);
    }
}

/* =============================================
   Fallback for No JavaScript
   ============================================= */

.no-js .text-reveal-en .char,
.no-js .text-reveal-ar .word-ar,
.no-js .image-reveal-wrapper img {
    opacity: 1 !important;
    transform: none !important;
}

.no-js .image-reveal-mask {
    display: none;
}

/* =============================================
   Additional Fixes for Dark Features & Layout
   ============================================= */
/* Ensure all images in the widget are visible */
.elementor-widget-single-project-layout img:not([src=""]) {
    min-height: 50px;
    background-color: #111;
}

/* Fix for full-width text block in dark features */
.elementor-widget-single-project-layout .fuetuers-feature-block:not(.flex-row) {
    grid-column: 1 / -1;
    text-align: center;
    max-width: 900px;
    margin: 0 auto;
}

/* Better spacing for dark features content */
.elementor-widget-single-project-layout .fuetuers-features-section .container-fluid {
    max-width: 1600px;
    margin: 0 auto;
}

/* Ensure layout image container has proper sizing */
.elementor-widget-single-project-layout .layout-solution .image-container {
    min-height: 300px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: radial-gradient(ellipse at center, rgba(255,255,255,0.02) 0%, transparent 70%);
}

/* Fallback styles for missing images */
.elementor-widget-single-project-layout img[src=""],
.elementor-widget-single-project-layout img:not([src]) {
    display: none !important;
}

/* Improve dark features grid on smaller screens */
@media (max-width: 1200px) {
    .elementor-widget-single-project-layout .fuetuers-features-grid {
        padding: 0 40px;
    }
}

/* Final visibility insurance */
.elementor-widget-single-project-layout .layout-solution *,
.elementor-widget-single-project-layout .fuetuers-features-section * {
    opacity: 1 !important;
    visibility: visible !important;
}

/* Force text color for dark sections */
.elementor-widget-single-project-layout .fuetuers-features-section h2,
.elementor-widget-single-project-layout .fuetuers-features-section p,
.elementor-widget-single-project-layout .layout-solution h2 {
    color: #fff !important;
}

/* =============================================
   Fade & Blur Text Animation
   ============================================= */
.blur-fade-text {
    opacity: 0;
    filter: blur(10px);
    transform: translateY(20px);
    transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.blur-fade-text.active {
    opacity: 1;
    filter: blur(0);
    transform: translateY(0);
}

/* Stagger effect */
.blur-fade-text:nth-child(1) { transition-delay: 0.1s; }
.blur-fade-text:nth-child(2) { transition-delay: 0.2s; }
.blur-fade-text:nth-child(3) { transition-delay: 0.3s; }
.blur-fade-text:nth-child(4) { transition-delay: 0.4s; }

/* Mobile optimization */
@media (max-width: 768px) {
    .blur-fade-text {
        filter: blur(5px);
        transform: translateY(15px);
    }
}

/* =============================================
   Extra Animation Effects
   ============================================= */

/* Stagger reveal for multiple elements */
.elementor-widget-single-project-layout [class*="text-reveal-"] {
    --stagger-delay: 0;
}

.elementor-widget-single-project-layout [class*="text-reveal-"]:nth-child(1) { --stagger-delay: 0.1s; }
.elementor-widget-single-project-layout [class*="text-reveal-"]:nth-child(2) { --stagger-delay: 0.2s; }
.elementor-widget-single-project-layout [class*="text-reveal-"]:nth-child(3) { --stagger-delay: 0.3s; }
.elementor-widget-single-project-layout [class*="text-reveal-"]:nth-child(4) { --stagger-delay: 0.4s; }
.elementor-widget-single-project-layout [class*="text-reveal-"]:nth-child(5) { --stagger-delay: 0.5s; }

/* Highlight effect on complete */
.text-reveal-en .char::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background: linear-gradient(90deg, transparent, #fff, transparent);
    transform: translateX(-100%);
    transition: transform 0.8s ease;
}

.text-reveal-en .char.active::after {
    transform: translateX(100%);
    transition-delay: 0.5s;
}

/* =============================================
   Animation Integration Fixes
   ============================================= */

/* Ensure animations work with existing gradient styles */
.elementor-widget-single-project-layout .text-reveal-processed.grad-color {
    background: linear-gradient(180deg, #FFFFFF 0%, #999999 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Fix for gradient text in split animations */
.elementor-widget-single-project-layout .text-reveal-en .char {
    background: linear-gradient(180deg, #FFFFFF 0%, #999999 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-decoration: none !important;
}

/* Arabic text gradient fix */
.elementor-widget-single-project-layout .text-reveal-ar .word-ar {
    background: linear-gradient(180deg, #FFFFFF 0%, #999999 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-decoration: none !important;
}

/* Remove underline from all animated text */
.elementor-widget-single-project-layout .text-reveal-processed,
.elementor-widget-single-project-layout .text-reveal-en,
.elementor-widget-single-project-layout .text-reveal-ar {
    text-decoration: none !important;
    border-bottom: none !important;
}

/* Blur animation styles */
.elementor-widget-single-project-layout .text-reveal-en .char {
    filter: blur(10px);
    transition: none !important;
}

.elementor-widget-single-project-layout .text-reveal-ar .word-ar {
    filter: blur(8px);
    transition: none !important;
}

/* Clean state after animation */
.elementor-widget-single-project-layout .text-reveal-en .char.active,
.elementor-widget-single-project-layout .text-reveal-ar .word-ar.active {
    filter: blur(0) !important;
    opacity: 1 !important;
}

/* Keep spaces visible */
.elementor-widget-single-project-layout .text-reveal-en .space {
    opacity: 1 !important;
    filter: none !important;
}

/* Override any conflicting animations */
.elementor-widget-single-project-layout .text-reveal-processed {
    animation: none !important;
    min-height: 2em;
    display: block;
    line-height: 1.6;
}

/* Special handling for descriptions */
.elementor-widget-single-project-layout .description.text-reveal-processed,
.elementor-widget-single-project-layout .features-description.text-reveal-processed {
    min-height: 100px;
}

/* Remove all underlines from headings and paragraphs */
.elementor-widget-single-project-layout h1,
.elementor-widget-single-project-layout h2,
.elementor-widget-single-project-layout h3,
.elementor-widget-single-project-layout p,
.elementor-widget-single-project-layout span {
    text-decoration: none !important;
    border-bottom: none !important;
}

/* Ensure proper layering */
.elementor-widget-single-project-layout .text-reveal-en,
.elementor-widget-single-project-layout .text-reveal-ar {
    position: relative;
    z-index: 1;
}

/* Fix for titles that already have animations */
.elementor-widget-single-project-layout h1.text-reveal-processed,
.elementor-widget-single-project-layout h2.text-reveal-processed,
.elementor-widget-single-project-layout h3.text-reveal-processed {
    opacity: 1 !important;
    transform: none !important;
}

/* Smooth scroll performance */
.elementor-widget-single-project-layout [style*="--scroll-progress"] {
    will-change: transform;
}

/* Disable animations if user prefers reduced motion */
@media (prefers-reduced-motion: reduce) {
    .elementor-widget-single-project-layout .text-reveal-en .char,
    .elementor-widget-single-project-layout .text-reveal-ar .word-ar,
    .elementor-widget-single-project-layout .image-reveal-wrapper img,
    .elementor-widget-single-project-layout .image-reveal-mask {
        transition: none !important;
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
    }
    
    .elementor-widget-single-project-layout .image-reveal-mask {
        display: none;
    }
}

/* =============================================
   CSS-Only Fallback Animations
   ============================================= */
@supports (animation: none) {
    /* Fallback animation for browsers without JS */
    .elementor-widget-single-project-layout h1,
    .elementor-widget-single-project-layout h2,
    .elementor-widget-single-project-layout h3,
    .elementor-widget-single-project-layout p {
        animation: fallbackReveal 1.5s ease-out forwards;
        animation-delay: var(--delay, 0s);
    }
    
    @keyframes fallbackReveal {
        from {
            opacity: 0;
            transform: translateY(40px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }
    
    /* Stagger delays */
    .elementor-widget-single-project-layout *:nth-child(1) { --delay: 0.1s; }
    .elementor-widget-single-project-layout *:nth-child(2) { --delay: 0.2s; }
    .elementor-widget-single-project-layout *:nth-child(3) { --delay: 0.3s; }
    .elementor-widget-single-project-layout *:nth-child(4) { --delay: 0.4s; }
    .elementor-widget-single-project-layout *:nth-child(5) { --delay: 0.5s; }
}

/* Intersection Observer Animation Trigger */
@media (prefers-reduced-motion: no-preference) {
    .elementor-widget-single-project-layout [data-animate] {
        opacity: 0;
        transform: translateY(50px);
        transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
    }
    
    .elementor-widget-single-project-layout [data-animate].in-view {
        opacity: 1;
        transform: translateY(0);
    }
}

/* =============================================
   Debug Mode (Remove in Production)
   ============================================= */
/*
.text-reveal-processed {
    border: 1px solid red !important;
}

.image-reveal-wrapper {
    border: 1px solid blue !important;
}
*/

/* =============================================
   CRITICAL FIX: Force Initial State
   ============================================= */

/* Force characters to be hidden initially */
.elementor-widget-single-project-layout .text-reveal-en .char {
    opacity: 0 !important;
    transform: translateY(100%) rotateX(-90deg) !important;
    display: inline-block !important;
}

/* Only show when active or has progress */
.elementor-widget-single-project-layout .text-reveal-en .char.active,
.elementor-widget-single-project-layout .text-reveal-en .char[style*="opacity: 1"] {
    opacity: 1 !important;
    transform: translateY(0) rotateX(0) !important;
}

/* Force Arabic words to be hidden initially */
.elementor-widget-single-project-layout .text-reveal-ar .word-ar {
    opacity: 0 !important;
    transform: translateY(50px) scale(0.8) rotateY(10deg) !important;
    display: inline-block !important;
}

/* Only show when active or has progress */
.elementor-widget-single-project-layout .text-reveal-ar .word-ar.active,
.elementor-widget-single-project-layout .text-reveal-ar .word-ar[style*="opacity: 1"] {
    opacity: 1 !important;
    transform: translateY(0) scale(1) rotateY(0) !important;
}

/* Ensure parent containers are visible */
.elementor-widget-single-project-layout .text-reveal-en,
.elementor-widget-single-project-layout .text-reveal-ar {
    opacity: 1 !important;
    visibility: visible !important;
    display: block !important;
    overflow: visible !important;
}

/* Reset any inline styles that might interfere */
.elementor-widget-single-project-layout .text-reveal-processed[style*="--scroll-progress: 1"] .char {
    /* If scroll is at 100%, still hide non-active chars */
}

/* Force immediate visibility for elements at top of page */
.elementor-widget-single-project-layout .head .text-reveal-en .char,
.elementor-widget-single-project-layout .head .text-reveal-ar .word-ar {
    transition-delay: calc(var(--char-index, 0) * 0.05s + 0.5s);
    transition-duration: 0.8s;
}

/* Debug - show all text borders */
/*
.text-reveal-en .char {
    border: 1px solid yellow !important;
    padding: 2px;
}

.text-reveal-ar .word-ar {
    border: 1px solid cyan !important;
    padding: 2px;
}
*/