/* =========================
   GLOBAL FULL-WIDTH FIX (OPTIMIZED)
========================= */

html, body{
  margin:0;
  padding:0;
  width:100%;
  max-width:100%;
  overflow-x:hidden;
}

.elementor,
.elementor-section,
.elementor-container{
  max-width:100% !important;
}

/* =========================
   BASE OPTIMIZATION
========================= */

*{
  box-sizing:border-box;
}

body{
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

/* =========================
   SCROLL MOUSE (UNCHANGED - LIGHT)
========================= */

.khan-scroll-mouse{
  position:absolute;
  bottom:35px;
  left:50%;
  transform:translateX(-50%);
  width:60px;
  height:80px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:6px;
  cursor:pointer;
  z-index:9999;
}

.mouse-body{
  width:28px;
  height:44px;
  border:2px solid #0036e9;
  border-radius:20px;
  position:relative;
}

.mouse-wheel{
  width:4px;
  height:8px;
  background:#0036e9;
  border-radius:4px;
  position:absolute;
  top:8px;
  left:50%;
  transform:translateX(-50%);
  animation:wheel 1.4s infinite;
}

@keyframes wheel{
  0%{top:8px;opacity:1}
  50%{opacity:.4}
  100%{top:24px;opacity:0}
}

/* =========================
   FLOAT IMAGE (GPU SAFE)
========================= */

.imagefloat{
  animation:float 6s ease-in-out infinite;
  will-change:transform;
  z-index:12;
}

@keyframes float{
  0%{transform:translate3d(0,0,0);}
  50%{transform:translate3d(0,-20px,0);}
  100%{transform:translate3d(0,0,0);}
}



/* =========================
   TESTIMONIAL WRAPPER FIX
========================= */

.kh-testimonial{
  position:relative;
  padding:60px 0;
  overflow:visible;
}

.kh-testimonial .swiper{
  padding:30px 0;
}

/* =========================
   SWIPER SLIDE (REDUCED PAINT COST)
========================= */

.kh-testimonial .swiper-slide{
  background:rgba(255,255,255,0.06) !important;
  border:1px solid rgba(255,255,255,0.12);
  border-radius:18px;

  overflow:hidden;
  position:relative;

  transition:transform .3s ease, box-shadow .3s ease;
  margin:15px 0;
  will-change:transform;
}

.kh-testimonial .swiper-slide:hover{
  transform:translate3d(0,-8px,0) scale(1.02);
  box-shadow:0 18px 45px rgba(0,0,0,0.18);
  z-index:10;
}

/* ===================================================
   FX GLOW LIGHT (REUSABLE CLEAN VERSION)
   Apply: class="fx-glow"
=================================================== */

.fx-glow{
  position: relative;
  overflow: hidden;
  isolation: isolate;

  /* Base Background */
  background: linear-gradient(135deg,#F7FAFF 0%,#EEF4FF 50%,#FFFFFF 100%);
}

/* Glow Layer */
.fx-glow::before{
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;

  background:
    radial-gradient(circle at 35% 35%, rgba(3,56,232,0.30), transparent 60%),
    radial-gradient(circle at 70% 70%, rgba(0,120,255,0.20), transparent 65%);

  filter: blur(40px);
  animation: fxGlowMove 6s ease-in-out infinite alternate;
}

/* Particles Layer */
.fx-glow::after{
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;

  background-image: radial-gradient(circle, rgba(60,60,60,0.7) 2px, transparent 2px);
  background-size: 90px 90px;

  opacity: 0.7;
  animation: fxParticlesMove 10s linear infinite;
}

/* Animations */
@keyframes fxGlowMove{
  0%   { transform: translate(0,0) scale(1); }
  100% { transform: translate(4%,3%) scale(1.1); }
}

@keyframes fxParticlesMove{
  from { background-position: 0 0; }
  to   { background-position: 0 -140px; }
}




/* =========================
   DARK GLOW BACKGROUND (OPTIMIZED)
========================= */
.kh-gradient{
    position: relative;
    overflow: hidden;
    isolation: isolate;

    background:
        radial-gradient(circle at center,
        rgba(3,56,232,0.55) 0%,
        rgba(3,56,232,0.25) 25%,
        transparent 60%),

        radial-gradient(circle at top,
        rgba(4,8,13,0.95) 0%,
        transparent 60%),

        radial-gradient(circle at bottom,
        rgba(4,8,13,0.95) 0%,
        transparent 60%),

        radial-gradient(circle at left,
        rgba(4,8,13,0.95) 0%,
        transparent 60%),

        radial-gradient(circle at right,
        rgba(4,8,13,0.95) 0%,
        transparent 60%),

        linear-gradient(135deg,#04080D 0%, #04080D 100%);

    animation: khBgFlow 14s ease-in-out infinite alternate;
}

.kh-gradient::before{
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;

    background:
        radial-gradient(circle at 40% 45%,
        rgba(3,56,232,0.65) 0%,
        rgba(3,56,232,0.25) 30%,
        transparent 65%),

        radial-gradient(circle at 60% 55%,
        rgba(3,56,232,0.35) 0%,
        transparent 70%);

    filter: blur(45px);

    animation: blueDrift 6s ease-in-out infinite alternate;
}

.kh-gradient::after{
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;

    background-image: radial-gradient(
        circle,
        rgba(192,192,192,0.3) 2px,
        transparent 2px
    );

    background-size: 95px 95px;
    opacity: 0.45;

    animation: fxParticlesMove 12s linear infinite;
}

/* BLUE MOVEMENT (VISIBLE DRIFT) */
@keyframes blueDrift{
    0%{
        transform: translate(-3%, -2%) scale(1);
    }
    50%{
        transform: translate(3%, 2%) scale(1.12);
    }
    100%{
        transform: translate(-2%, 3%) scale(1.05);
    }
}

@keyframes fxParticlesMove{
    from{background-position: 0 0;}
    to{background-position: 0 -160px;}
}

@keyframes khBgFlow{
    0%{background-position: 0% 0%;}
    100%{background-position: 100% 100%;}
}




/* =========================
   ULTRA CLEAN GLASS CARD
========================= */

.kh-card{
  position: relative;
  border-radius: 20px !important;
  border: 2px solid rgba(255,255,255,0.6);

  background: rgba(255,255,255,0.08);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);

  overflow: hidden;

  transition: all 0.35s ease;

  transform: perspective(1200px) rotateX(0deg) rotateY(0deg) translateY(0);

  -webkit-mask-image: -webkit-radial-gradient(white, black);

  /* IMPORTANT: create stacking context */
  z-index: 0;
}

/* =========================
   REAL VISIBLE DEPTH FIX
   (shadow moved to BEFORE layer)
========================= */
.kh-card::before{
  content:"";
  position:absolute;
  inset:0;

  border-radius: 20px;

  /* shadow layer */
  box-shadow: none;

  opacity: 0;

  transition: all 0.35s ease;

  z-index: -1;
}

/* hover lift + SHADOW FIXED */
.kh-card:hover{
  transform: perspective(1200px) rotateX(10deg) rotateY(-12deg) translateY(-12px);
}

.kh-card:hover::before{
  opacity: 1;
  box-shadow:
    0 50px 100px rgba(0,0,0,0.55),
    0 20px 40px rgba(0,0,0,0.35);
}

/* =========================
   DIAGONAL SHINE (MOVED TO AFTER FIXED LAYERING)
========================= */
.kh-card::after{
  content:"";
  position:absolute;

  width: 90%;
  height: 90%;

  top: -120%;
  left: -120%;

  background: linear-gradient(135deg,
    transparent 40%,
    rgba(255,255,255,0.35) 50%,
    transparent 60%
  );

  transform: rotate(135deg);
  opacity: 0;

  pointer-events: none;

  z-index: 2;
}

/* hover shine */
.kh-card:hover::after{
  animation: diagonalShine 0.8s ease forwards;
}

@keyframes diagonalShine {
  0%{
    transform: translate(-100%, -100%) rotate(135deg);
    opacity: 0;
  }
  30%{
    opacity: 1;
  }
  100%{
    transform: translate(200%, 200%) rotate(135deg);
    opacity: 0;
  }
}




/* ========================= ELEMENTOR GLASS CARD FIXED Class: fx-glass-av ========================= */ .fx-glass-av{ position: relative; border-radius: 20px; overflow: hidden; isolation: isolate; /* glass */ background: rgba(255, 255, 255, 0.08); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); /* depth */ box-shadow: 0 10px 35px rgba(0, 0, 0, 0.25); /* important for Elementor layout stability */ display: block; } /* glass shine layer */ .fx-glass-av::before{ content: ""; position: absolute; inset: 0; background: linear-gradient( 135deg, rgba(255,255,255,0.18), rgba(255,255,255,0.05), rgba(255,255,255,0.02) ); pointer-events: none; z-index: 1; } /* animated border (edge chasing illusion) */ .fx-glass-av::after{ content: ""; position: absolute; inset: 0; border-radius: 20px; padding: 2px; background: linear-gradient(90deg, #0338E8, transparent, #0338E8); background-size: 200% 100%; animation: borderMove 2.2s linear infinite; /* show only border */ -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; z-index: 2; } /* animation */ @keyframes borderMove{ 0%{ background-position: 0% 50%; } 100%{ background-position: 200% 50%; } }