.elementor-11 .elementor-element.elementor-element-cb80eeb{--display:flex;--margin-top:-20px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-11 .elementor-element.elementor-element-7d0f8c6{--display:flex;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-11 .elementor-element.elementor-element-c98d914{--display:flex;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-11 .elementor-element.elementor-element-873327b{--display:flex;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-11 .elementor-element.elementor-element-5bb66be{--display:flex;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-11 .elementor-element.elementor-element-ec05a7a{--display:flex;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-11 .elementor-element.elementor-element-11875aa{--display:flex;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-11 .elementor-element.elementor-element-5f9061c{--display:flex;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-11 .elementor-element.elementor-element-3cc69e0{--display:flex;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}:root{--page-title-display:none;}/* Start custom CSS for html, class: .elementor-element-8c5ea92 *//* =============================================
   EVOURIA — HERO SECTION CSS (NO HEADER)
   ============================================= */

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800;900&display=swap');

*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: 'Poppins', sans-serif;
  background: #0a0e27;
  color: #ffffff;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

/* =============================================
   HERO SECTION
   ============================================= */
.hero-section {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  background: linear-gradient(160deg, #0a0e27 0%, #12103a 40%, #0e1230 70%, #0a0e27 100%);
  padding: 80px 40px;
}

/* Canvas */
#particleCanvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
}

/* Grid Pattern */
.hero-grid-pattern {
  position: absolute;
  inset: 0;
  background-image: 
    linear-gradient(rgba(124, 58, 237, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(124, 58, 237, 0.03) 1px, transparent 1px);
  background-size: 60px 60px;
  z-index: 1;
  mask-image: radial-gradient(ellipse 60% 60% at 50% 50%, black 20%, transparent 70%);
  -webkit-mask-image: radial-gradient(ellipse 60% 60% at 50% 50%, black 20%, transparent 70%);
}

/* Gradient Orbs */
.hero-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  z-index: 1;
  pointer-events: none;
  will-change: transform;
  transition: transform 0.1s linear;
}

.orb-1 {
  width: 500px;
  height: 500px;
  background: rgba(124, 58, 237, 0.18);
  top: -15%;
  right: -8%;
  animation: orbPulse1 8s ease-in-out infinite;
}

.orb-2 {
  width: 400px;
  height: 400px;
  background: rgba(6, 214, 160, 0.1);
  bottom: -15%;
  left: -8%;
  animation: orbPulse2 10s ease-in-out infinite;
}

.orb-3 {
  width: 300px;
  height: 300px;
  background: rgba(168, 85, 247, 0.12);
  top: 40%;
  left: 30%;
  animation: orbPulse3 12s ease-in-out infinite;
}

.orb-4 {
  width: 250px;
  height: 250px;
  background: rgba(124, 58, 237, 0.08);
  top: 20%;
  right: 30%;
  animation: orbPulse4 9s ease-in-out infinite;
}

@keyframes orbPulse1 {
  0%, 100% { transform: translate(0, 0) scale(1); opacity: 0.6; }
  33% { transform: translate(-40px, 50px) scale(1.1); opacity: 1; }
  66% { transform: translate(20px, -30px) scale(0.95); opacity: 0.7; }
}

@keyframes orbPulse2 {
  0%, 100% { transform: translate(0, 0) scale(1); opacity: 0.5; }
  50% { transform: translate(50px, -40px) scale(1.15); opacity: 0.8; }
}

@keyframes orbPulse3 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(-30px, 25px) scale(0.85); }
}

@keyframes orbPulse4 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(25px, -35px) scale(1.1); }
}

/* Hero Container */
.hero-container {
  max-width: 1280px;
  width: 100%;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 70px;
  align-items: center;
  position: relative;
  z-index: 3;
}

/* ========== SCROLL REVEAL ========== */
.scroll-reveal {
  opacity: 0;
  transform: translateY(50px);
  transition: all 0.9s cubic-bezier(0.16, 1, 0.3, 1);
  transition-delay: var(--delay, 0s);
}

.scroll-reveal.revealed {
  opacity: 1;
  transform: translateY(0);
}

/* ========== HERO CONTENT LEFT ========== */
.hero-content {
  position: relative;
}

/* Badge */
.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  background: rgba(124, 58, 237, 0.08);
  border: 1px solid rgba(124, 58, 237, 0.2);
  padding: 8px 22px;
  border-radius: 50px;
  margin-bottom: 28px;
  animation: badgeGlow 3s ease-in-out infinite;
}

@keyframes badgeGlow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(124, 58, 237, 0); }
  50% { box-shadow: 0 0 20px 2px rgba(124, 58, 237, 0.15); }
}

.badge-dot {
  width: 8px;
  height: 8px;
  background: #06d6a0;
  border-radius: 50%;
  position: relative;
  animation: badgeDotPulse 2s ease-in-out infinite;
}

.badge-dot::after {
  content: '';
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  border: 1px solid rgba(6, 214, 160, 0.4);
  animation: badgeDotRing 2s ease-in-out infinite;
}

@keyframes badgeDotPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.2); }
}

@keyframes badgeDotRing {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.8); opacity: 0; }
}

.badge-text {
  font-size: 13px;
  font-weight: 500;
  color: #c4b5fd;
  letter-spacing: 0.3px;
}

/* Title */
.hero-title {
  font-size: clamp(38px, 5vw, 62px);
  font-weight: 800;
  line-height: 1.08;
  margin-bottom: 24px;
  color: #ffffff;
  letter-spacing: -2.5px;
}

.morph-text-wrapper {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  perspective: 600px;
}

.morph-text {
  display: inline-block;
  background: linear-gradient(135deg, #7c3aed 0%, #a855f7 40%, #06d6a0 100%);
  background-size: 200% 200%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  animation: gradientShift 4s ease-in-out infinite;
}

.morph-text.morph-out {
  opacity: 0;
  transform: translateY(20px) rotateX(90deg) scale(0.8);
  filter: blur(4px);
}

.morph-text.morph-in {
  animation: morphInAnim 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

@keyframes morphInAnim {
  0% { opacity: 0; transform: translateY(-20px) rotateX(-90deg) scale(0.8); filter: blur(4px); }
  100% { opacity: 1; transform: translateY(0) rotateX(0) scale(1); filter: blur(0); }
}

@keyframes gradientShift {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

.morph-cursor {
  color: #06d6a0;
  font-weight: 300;
  animation: cursorBlink 1s step-end infinite;
}

@keyframes cursorBlink {
  0%, 50% { opacity: 1; }
  51%, 100% { opacity: 0; }
}

/* Subtitle */
.hero-subtitle {
  font-size: 16px;
  line-height: 1.75;
  color: #7d82a6;
  margin-bottom: 40px;
  max-width: 520px;
  font-weight: 400;
}

/* ========== BUTTONS ========== */
.hero-buttons {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 50px;
}

.hero-btn-primary {
  position: relative;
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  border-radius: 50px;
  overflow: hidden;
  transition: all 0.4s ease;
}

.hero-btn-primary .btn-bg {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, #7c3aed, #a855f7);
  transition: all 0.4s ease;
  z-index: 1;
}

.hero-btn-primary:hover .btn-bg {
  background: linear-gradient(135deg, #a855f7, #7c3aed);
  transform: scale(1.05);
}

.hero-btn-primary .btn-content {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px 34px;
  color: #ffffff;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.2px;
}

.hero-btn-primary:hover {
  transform: translateY(-3px);
  box-shadow: 0 15px 40px rgba(124, 58, 237, 0.5),
              0 0 60px rgba(124, 58, 237, 0.15);
}

.hero-btn-primary:hover .btn-content svg {
  transform: translateX(4px);
}

.hero-btn-primary .btn-content svg {
  transition: transform 0.3s ease;
}

.hero-btn-secondary {
  position: relative;
  display: inline-flex;
  align-items: center;
  padding: 16px 34px;
  color: #ffffff;
  text-decoration: none;
  border-radius: 50px;
  font-size: 15px;
  font-weight: 600;
  border: 1.5px solid rgba(124, 58, 237, 0.35);
  background: rgba(124, 58, 237, 0.06);
  overflow: hidden;
  transition: all 0.4s ease;
  letter-spacing: 0.2px;
}

.btn-shimmer {
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(124, 58, 237, 0.15), transparent);
  animation: shimmerMove 3s ease-in-out infinite;
}

@keyframes shimmerMove {
  0% { left: -100%; }
  50% { left: 100%; }
  100% { left: 100%; }
}

.hero-btn-secondary span:last-child {
  position: relative;
  z-index: 2;
}

.hero-btn-secondary:hover {
  border-color: rgba(124, 58, 237, 0.6);
  background: rgba(124, 58, 237, 0.12);
  transform: translateY(-3px);
  box-shadow: 0 10px 30px rgba(124, 58, 237, 0.2);
}

/* ========== STATS ========== */
.hero-stats {
  display: flex;
  align-items: center;
  gap: 36px;
  margin-bottom: 40px;
}

.stat-item {
  text-align: center;
}

.stat-number-wrap {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 2px;
}

.stat-number {
  font-size: 36px;
  font-weight: 800;
  color: #ffffff;
  letter-spacing: -1px;
  line-height: 1;
}

.stat-suffix {
  font-size: 22px;
  font-weight: 700;
  color: #06d6a0;
}

.stat-label {
  display: block;
  font-size: 11px;
  color: #5c6090;
  margin-top: 6px;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  font-weight: 500;
}

.stat-divider {
  width: 1px;
  height: 45px;
  background: linear-gradient(180deg, transparent, rgba(124, 58, 237, 0.3), transparent);
}

/* ========== CLIENT LOGOS ========== */
.hero-clients {
  display: flex;
  align-items: center;
  gap: 20px;
}

.client-label {
  font-size: 11px;
  color: #4a4e6a;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  font-weight: 600;
  white-space: nowrap;
}

.client-logos {
  display: flex;
  gap: 24px;
  align-items: center;
}

.client-logo {
  font-size: 13px;
  font-weight: 700;
  color: #3a3e5c;
  letter-spacing: 1px;
  transition: color 0.3s ease;
  cursor: default;
}

.client-logo:hover {
  color: #7c3aed;
}

/* =============================================
   HERO VISUAL — RIGHT SIDE
   ============================================= */
.hero-visual {
  position: relative;
  perspective: 1200px;
}

.hero-dashboard {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 20px;
  overflow: hidden;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition: transform 0.15s ease-out;
  will-change: transform;
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.3),
              0 0 80px rgba(124, 58, 237, 0.06);
}

.dashboard-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  background: rgba(255, 255, 255, 0.02);
}

.dash-dots {
  display: flex;
  gap: 6px;
}

.dash-dots span {
  width: 10px;
  height: 10px;
  border-radius: 50%;
}

.dot-red { background: #ff5f57; }
.dot-yellow { background: #febc2e; }
.dot-green { background: #28c840; }

.dash-title {
  font-size: 12px;
  color: #5c6090;
  font-weight: 500;
  flex: 1;
}

.dash-live {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: #06d6a0;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.live-dot {
  width: 6px;
  height: 6px;
  background: #06d6a0;
  border-radius: 50%;
  animation: livePulse 1.5s ease-in-out infinite;
}

@keyframes livePulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(6, 214, 160, 0.5); }
  50% { box-shadow: 0 0 0 6px rgba(6, 214, 160, 0); }
}

.dashboard-body {
  padding: 24px;
}

/* Revenue */
.dash-revenue {
  margin-bottom: 20px;
}

.revenue-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 14px;
}

.revenue-label {
  font-size: 13px;
  color: #6b6f8d;
  font-weight: 500;
}

.revenue-badge {
  background: rgba(6, 214, 160, 0.12);
  color: #06d6a0;
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 700;
}

/* Chart */
.dash-chart {
  height: 100px;
  position: relative;
  overflow: hidden;
  border-radius: 8px;
}

.chart-svg {
  width: 100%;
  height: 100%;
}

.chart-area {
  opacity: 0.6;
}

.chart-line {
  stroke-linecap: round;
}

.chart-dot {
  animation: chartDotPulse 2s ease-in-out infinite;
}

@keyframes chartDotPulse {
  0%, 100% { r: 4; }
  50% { r: 6; }
}

/* Metrics */
.dash-metrics {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.metric-card {
  display: flex;
  align-items: center;
  gap: 12px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 12px;
  padding: 14px 16px;
  transition: all 0.3s ease;
}

.metric-card:hover {
  background: rgba(124, 58, 237, 0.06);
  border-color: rgba(124, 58, 237, 0.15);
  transform: translateX(4px);
}

.metric-icon {
  font-size: 22px;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(124, 58, 237, 0.1);
  border-radius: 10px;
  flex-shrink: 0;
}

.metric-info {
  flex: 1;
}

.metric-val {
  display: block;
  font-size: 16px;
  font-weight: 700;
  color: #ffffff;
}

.metric-lab {
  display: block;
  font-size: 11px;
  color: #5c6090;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.metric-bar {
  width: 60px;
  height: 4px;
  background: rgba(255, 255, 255, 0.06);
  border-radius: 4px;
  overflow: hidden;
  flex-shrink: 0;
}

.metric-fill {
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, #7c3aed, #06d6a0);
  border-radius: 4px;
  transition: width 1.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.metric-fill.animate {
  width: var(--width);
}

/* ========== FLOATING CARDS ========== */
.float-card {
  position: absolute;
  background: rgba(10, 14, 39, 0.92);
  border: 1px solid rgba(124, 58, 237, 0.2);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  padding: 12px 18px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  gap: 12px;
  z-index: 10;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
  transition: all 0.3s ease;
}

.float-card:hover {
  border-color: rgba(124, 58, 237, 0.5);
  transform: scale(1.05) !important;
}

.float-icon {
  font-size: 20px;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(124, 58, 237, 0.12);
  border-radius: 10px;
}

.float-info strong {
  display: block;
  font-size: 13px;
  color: #ffffff;
  font-weight: 600;
}

.float-info span {
  font-size: 11px;
  color: #5c6090;
}

.float-card-1 {
  top: -15px;
  right: -15px;
  animation: floatAnim1 5s ease-in-out infinite;
}

.float-card-2 {
  bottom: 35%;
  left: -35px;
  animation: floatAnim2 6s ease-in-out infinite;
}

.float-card-3 {
  bottom: -15px;
  right: 15%;
  animation: floatAnim3 5.5s ease-in-out infinite;
}

@keyframes floatAnim1 {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  25% { transform: translate(-8px, 12px) rotate(1.5deg); }
  50% { transform: translate(5px, 20px) rotate(-1deg); }
  75% { transform: translate(-12px, 8px) rotate(2deg); }
}

@keyframes floatAnim2 {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  33% { transform: translate(12px, -8px) rotate(-1.5deg); }
  66% { transform: translate(-5px, -18px) rotate(1deg); }
}

@keyframes floatAnim3 {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  50% { transform: translate(-15px, -12px) rotate(2deg); }
}

/* ========== SCROLL INDICATOR ========== */
.scroll-indicator {
  position: absolute;
  bottom: 35px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  z-index: 5;
  opacity: 1;
  transition: opacity 0.3s ease;
}

.scroll-mouse {
  width: 24px;
  height: 40px;
  border: 2px solid rgba(124, 58, 237, 0.35);
  border-radius: 14px;
  display: flex;
  justify-content: center;
  padding-top: 8px;
}

.scroll-wheel {
  width: 3px;
  height: 8px;
  background: linear-gradient(180deg, #7c3aed, #06d6a0);
  border-radius: 2px;
  animation: scrollWheelAnim 2s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

@keyframes scrollWheelAnim {
  0% { transform: translateY(0); opacity: 1; }
  50% { transform: translateY(10px); opacity: 0.4; }
  100% { transform: translateY(0); opacity: 1; }
}

.scroll-indicator span {
  font-size: 10px;
  color: #4a4e6a;
  text-transform: uppercase;
  letter-spacing: 3px;
  font-weight: 500;
}

/* =============================================
   RESPONSIVE — TABLET (1024px)
   ============================================= */
@media (max-width: 1024px) {
  .hero-section {
    padding: 80px 30px 60px;
  }
  
  .hero-container {
    grid-template-columns: 1fr;
    gap: 50px;
    text-align: center;
  }
  
  .hero-content {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  
  .hero-subtitle {
    max-width: 100%;
  }
  
  .hero-buttons {
    justify-content: center;
  }
  
  .hero-stats {
    justify-content: center;
  }
  
  .hero-clients {
    flex-direction: column;
    gap: 12px;
  }
  
  .hero-visual {
    max-width: 520px;
    margin: 0 auto;
  }
  
  .float-card-2 {
    left: -10px;
  }
}

/* =============================================
   RESPONSIVE — MOBILE (768px)
   ============================================= */
@media (max-width: 768px) {
  .hero-section {
    padding: 60px 20px 50px;
    min-height: auto;
  }
  
  .hero-title {
    font-size: clamp(32px, 8vw, 42px);
    letter-spacing: -1.5px;
  }
  
  .hero-subtitle {
    font-size: 14px;
    margin-bottom: 30px;
  }
  
  .hero-buttons {
    flex-direction: column;
    align-items: center;
    width: 100%;
    margin-bottom: 40px;
  }
  
  .hero-btn-primary,
  .hero-btn-secondary {
    width: 100%;
    max-width: 300px;
    justify-content: center;
    text-align: center;
  }
  
  .hero-btn-primary .btn-content {
    justify-content: center;
    width: 100%;
  }
  
  .hero-stats {
    gap: 20px;
    margin-bottom: 30px;
  }
  
  .stat-number {
    font-size: 28px;
  }
  
  .stat-suffix {
    font-size: 18px;
  }
  
  .stat-label {
    font-size: 9px;
    letter-spacing: 1px;
  }
  
  .stat-divider {
    width: 1px;
    height: 35px;
  }
  
  .hero-clients {
    gap: 10px;
  }
  
  .client-logos {
    gap: 16px;
    flex-wrap: wrap;
    justify-content: center;
  }
  
  .client-logo {
    font-size: 11px;
  }
  
  .hero-visual {
    max-width: 100%;
  }
  
  .float-card {
    display: none;
  }
  
  .dash-chart {
    height: 80px;
  }
  
  .metric-card {
    padding: 10px 12px;
  }
  
  .metric-bar {
    display: none;
  }
  
  .scroll-indicator {
    display: none;
  }
  
  .orb-3, .orb-4 {
    display: none;
  }
  
  .orb-1 {
    width: 300px;
    height: 300px;
  }
  
  .orb-2 {
    width: 250px;
    height: 250px;
  }
}

/* =============================================
   RESPONSIVE — SMALL MOBILE (420px)
   ============================================= */
@media (max-width: 420px) {
  .hero-section {
    padding: 50px 16px 40px;
  }
  
  .hero-title {
    font-size: 28px;
    letter-spacing: -1px;
  }
  
  .hero-badge {
    padding: 6px 16px;
  }
  
  .badge-text {
    font-size: 11px;
  }
  
  .hero-subtitle {
    font-size: 13px;
  }
  
  .hero-stats {
    gap: 14px;
  }
  
  .stat-number {
    font-size: 24px;
  }
  
  .dashboard-body {
    padding: 16px;
  }
  
  .metric-icon {
    width: 32px;
    height: 32px;
    font-size: 16px;
  }
  
  .metric-val {
    font-size: 14px;
  }
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-3704b1f *//* =============================================
   EVOURIA — ANNOUNCEMENT MARQUEE BAR CSS
   ============================================= */

/* ========== BAR BASE ========== */
.announce-marquee-bar {
  position: relative;
  width: 100%;
  background: linear-gradient(135deg, #1a0f3c 0%, #0f1235 40%, #0c1a2e 70%, #1a0f3c 100%);
  overflow: hidden;
  z-index: 10000;
  height: 44px;
  display: flex;
  align-items: center;
  border-bottom: 1px solid rgba(124, 58, 237, 0.15);
  transform: translateY(-100%);
  opacity: 0;
  transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1),
              opacity 0.7s ease;
}

.announce-marquee-bar.ambar-visible {
  transform: translateY(0);
  opacity: 1;
}

/* Shimmer Background */
.ambar-bg-shimmer {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(124, 58, 237, 0.06) 20%,
    rgba(6, 214, 160, 0.04) 40%,
    rgba(124, 58, 237, 0.06) 60%,
    transparent 100%
  );
  background-size: 200% 100%;
  animation: ambarShimmer 5s ease-in-out infinite;
  z-index: 0;
}

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

/* Particles */
.ambar-bg-particles {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

.ambar-particle {
  position: absolute;
  bottom: -3px;
  background: rgba(124, 58, 237, 0.4);
  border-radius: 50%;
  animation: ambarParticleFloat linear infinite;
}

@keyframes ambarParticleFloat {
  0% { transform: translateY(0) translateX(0); opacity: 0; }
  10% { opacity: 0.5; }
  90% { opacity: 0.1; }
  100% { transform: translateY(-45px) translateX(15px); opacity: 0; }
}

/* Glowing bottom border */
.announce-marquee-bar::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, 
    transparent, #7c3aed, #06d6a0, #7c3aed, transparent
  );
  background-size: 200% 100%;
  animation: ambarBorderGlow 3s linear infinite;
}

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

/* Ambient glow */
.announce-marquee-bar::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 50%;
  height: 200%;
  background: radial-gradient(ellipse, rgba(124, 58, 237, 0.08), transparent 70%);
  pointer-events: none;
  z-index: 0;
}

/* ========== MARQUEE TRACK ========== */
.ambar-track-wrapper {
  width: 100%;
  overflow: hidden;
  position: relative;
  z-index: 2;
  mask-image: linear-gradient(90deg, transparent, black 5%, black 95%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, black 5%, black 95%, transparent);
}

.ambar-track {
  display: flex;
  gap: 0;
  white-space: nowrap;
  width: max-content;
  animation: ambarScroll 30s linear infinite;
  will-change: transform;
}

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

/* ========== MARQUEE ITEMS ========== */
.ambar-item {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 0 30px;
  flex-shrink: 0;
  transition: all 0.3s ease;
  cursor: default;
}

.ambar-item:hover {
  transform: scale(1.05);
}

.ambar-item:hover .ambar-emoji {
  animation: ambarEmojiPop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes ambarEmojiPop {
  0% { transform: scale(1); }
  50% { transform: scale(1.4) rotate(10deg); }
  100% { transform: scale(1) rotate(0deg); }
}

.ambar-emoji {
  font-size: 16px;
  transition: transform 0.3s ease;
}

.ambar-text {
  font-size: 13px;
  color: #c4c7e0;
  font-weight: 500;
  letter-spacing: 0.2px;
}

.ambar-text strong {
  color: #ffffff;
  font-weight: 700;
}

.ambar-divider {
  width: 4px;
  height: 4px;
  background: linear-gradient(135deg, #7c3aed, #06d6a0);
  border-radius: 50%;
  flex-shrink: 0;
  animation: ambarDividerPulse 2s ease-in-out infinite;
  margin: 0 4px;
}

@keyframes ambarDividerPulse {
  0%, 100% { opacity: 0.4; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.3); box-shadow: 0 0 8px rgba(124, 58, 237, 0.5); }
}

/* =============================================
   FUN FACTS COUNTER SECTION CSS
   ============================================= */

/* ========== SECTION BASE ========== */
.funfacts-section {
  padding: 80px 40px;
  background: linear-gradient(135deg, #0e1235 0%, #1a0f3c 50%, #0e1235 100%);
  position: relative;
  overflow: hidden;
  border-top: 1px solid rgba(124, 58, 237, 0.15);
  border-bottom: 1px solid rgba(124, 58, 237, 0.15);
}

/* Shimmer */
.funfacts-bg-shimmer {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(124, 58, 237, 0.04),
    rgba(6, 214, 160, 0.03),
    rgba(124, 58, 237, 0.04),
    transparent
  );
  background-size: 200% 100%;
  animation: ffBgShimmer 6s ease-in-out infinite;
  z-index: 0;
}

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

/* Orbs */
.funfacts-bg-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  pointer-events: none;
  z-index: 0;
  will-change: transform;
}

.funfacts-orb-1 {
  width: 350px;
  height: 350px;
  background: rgba(124, 58, 237, 0.1);
  top: -20%;
  left: -5%;
  animation: ffOrbFloat1 10s ease-in-out infinite;
}

.funfacts-orb-2 {
  width: 280px;
  height: 280px;
  background: rgba(6, 214, 160, 0.06);
  bottom: -20%;
  right: -5%;
  animation: ffOrbFloat2 12s ease-in-out infinite;
}

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

@keyframes ffOrbFloat2 {
  0%, 100% { transform: translate(0, 0); }
  50% { transform: translate(-20px, -30px); }
}

/* Canvas */
#funfactsCanvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
}

/* Container */
.funfacts-container {
  max-width: 1280px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  position: relative;
  z-index: 3;
  flex-wrap: wrap;
}

/* ========== SCROLL REVEAL ========== */
.ff-reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: all 0.8s cubic-bezier(0.16, 1, 0.3, 1);
  transition-delay: var(--ff-delay, 0s);
}

.ff-reveal.ff-revealed {
  opacity: 1;
  transform: translateY(0);
}

/* ========== FUN FACT ITEM ========== */
.funfact-item {
  flex: 1;
  min-width: 140px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 20px 16px;
  position: relative;
  cursor: default;
  transition: all 0.4s ease;
}

.funfact-item:hover {
  transform: translateY(-8px);
}

.funfact-item:hover .funfact-icon-ring {
  opacity: 1;
  transform: scale(1);
}

.funfact-item:hover .funfact-icon {
  transform: scale(1.15);
}

/* Icon */
.funfact-icon-wrap {
  position: relative;
  width: 56px;
  height: 56px;
  margin-bottom: 16px;
}

.funfact-icon {
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  background: rgba(124, 58, 237, 0.1);
  border: 1px solid rgba(124, 58, 237, 0.15);
  border-radius: 16px;
  position: relative;
  z-index: 2;
  transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes ffIconBounce {
  0% { transform: scale(1) rotate(0deg); }
  25% { transform: scale(1.3) rotate(-10deg); }
  50% { transform: scale(0.9) rotate(5deg); }
  75% { transform: scale(1.15) rotate(-3deg); }
  100% { transform: scale(1) rotate(0deg); }
}

.funfact-icon-ring {
  position: absolute;
  inset: -8px;
  border-radius: 20px;
  border: 1.5px solid rgba(124, 58, 237, 0.2);
  z-index: 1;
  opacity: 0;
  transform: scale(0.8);
  transition: all 0.4s ease;
  animation: ffRingRotate 8s linear infinite;
}

@keyframes ffRingRotate {
  0% { border-color: rgba(124, 58, 237, 0.2); }
  50% { border-color: rgba(6, 214, 160, 0.2); }
  100% { border-color: rgba(124, 58, 237, 0.2); }
}

/* Number */
.funfact-number-wrap {
  margin-bottom: 6px;
  min-height: 42px;
  display: flex;
  align-items: center;
}

.funfact-counter {
  font-size: 32px;
  font-weight: 900;
  color: #ffffff;
  letter-spacing: -1.5px;
  line-height: 1;
  font-family: 'Poppins', sans-serif;
  transition: all 0.3s ease;
}

.funfact-counter.ff-counter-done {
  animation: ffCounterBounce 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes ffCounterBounce {
  0% { transform: scale(1); }
  40% { transform: scale(1.15); color: #06d6a0; }
  100% { transform: scale(1); }
}

/* Label */
.funfact-label {
  font-size: 12px;
  font-weight: 600;
  color: #7d82a6;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  margin-bottom: 14px;
}

/* Progress Bar */
.funfact-bar {
  width: 60px;
  height: 3px;
  background: rgba(124, 58, 237, 0.1);
  border-radius: 3px;
  overflow: hidden;
}

.funfact-bar-fill {
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, #7c3aed, #06d6a0);
  border-radius: 3px;
  transition: width 1.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.funfact-bar-fill.ff-bar-animated {
  width: var(--ff-bar-w);
}

/* Divider */
.funfact-divider {
  width: 1px;
  height: 70px;
  background: linear-gradient(180deg, transparent, rgba(124, 58, 237, 0.2), transparent);
  flex-shrink: 0;
}

/* ========== FOOTER MESSAGE ========== */
.funfacts-footer {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 40px;
  position: relative;
  z-index: 3;
}

.funfacts-footer-emoji {
  font-size: 20px;
  animation: ffFooterEmoji 3s ease-in-out infinite;
}

@keyframes ffFooterEmoji {
  0%, 100% { transform: rotate(0deg); }
  25% { transform: rotate(-10deg); }
  75% { transform: rotate(10deg); }
}

.funfacts-footer span:last-child {
  font-size: 13px;
  color: #5c6090;
  font-weight: 500;
  font-style: italic;
}

/* =============================================
   RESPONSIVE — TABLET (1024px)
   ============================================= */
@media (max-width: 1024px) {
  .announce-marquee-bar {
    height: 40px;
  }

  .ambar-text {
    font-size: 12px;
  }

  .ambar-emoji {
    font-size: 14px;
  }

  .ambar-item {
    padding: 0 24px;
  }

  .funfacts-section {
    padding: 60px 30px;
  }

  .funfacts-container {
    gap: 0;
  }

  .funfact-counter {
    font-size: 28px;
  }

  .funfact-icon {
    width: 48px;
    height: 48px;
    font-size: 24px;
  }

  .funfact-icon-wrap {
    width: 48px;
    height: 48px;
  }
}

/* =============================================
   RESPONSIVE — MOBILE (768px)
   ============================================= */
@media (max-width: 768px) {
  .announce-marquee-bar {
    height: 38px;
  }

  .ambar-text {
    font-size: 11px;
  }

  .ambar-emoji {
    font-size: 13px;
  }

  .ambar-item {
    padding: 0 20px;
  }

  .ambar-track {
    animation-duration: 20s;
  }

  .funfacts-section {
    padding: 50px 20px;
  }

  .funfacts-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px 0;
  }

  .funfact-divider {
    display: none;
  }

  .funfact-item {
    padding: 16px 10px;
  }

  .funfact-counter {
    font-size: 24px;
    letter-spacing: -1px;
  }

  .funfact-label {
    font-size: 10px;
    letter-spacing: 1px;
  }

  .funfact-icon {
    width: 44px;
    height: 44px;
    font-size: 20px;
  }

  .funfact-icon-wrap {
    width: 44px;
    height: 44px;
    margin-bottom: 12px;
  }

  .funfact-bar {
    width: 40px;
  }

  .funfacts-footer {
    margin-top: 30px;
  }

  .funfacts-footer span:last-child {
    font-size: 12px;
  }

  .funfacts-orb-1 {
    width: 200px;
    height: 200px;
  }

  .funfacts-orb-2 {
    width: 150px;
    height: 150px;
  }
}

/* =============================================
   RESPONSIVE — SMALL MOBILE (420px)
   ============================================= */
@media (max-width: 420px) {
  .announce-marquee-bar {
    height: 36px;
  }

  .ambar-text {
    font-size: 10px;
  }

  .ambar-emoji {
    font-size: 12px;
  }

  .ambar-item {
    padding: 0 16px;
    gap: 6px;
  }

  .ambar-divider {
    width: 3px;
    height: 3px;
  }

  .funfacts-section {
    padding: 40px 16px;
  }

  .funfacts-container {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px 0;
  }

  .funfact-counter {
    font-size: 22px;
  }

  .funfact-label {
    font-size: 9px;
  }

  .funfact-icon {
    width: 38px;
    height: 38px;
    font-size: 18px;
    border-radius: 12px;
  }

  .funfact-icon-wrap {
    width: 38px;
    height: 38px;
    margin-bottom: 10px;
  }

  .funfact-bar {
    width: 30px;
    height: 2px;
  }

  .funfacts-footer {
    margin-top: 24px;
    gap: 8px;
  }

  .funfacts-footer span:last-child {
    font-size: 11px;
  }

  .funfacts-footer-emoji {
    font-size: 16px;
  }
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-671741f *//* =============================================
   EVOURIA — SERVICES OVERVIEW SECTION CSS
   ============================================= */

/* ========== SECTION BASE ========== */
.services-section {
  padding: 130px 40px;
  background: #0a0e27;
  position: relative;
  overflow: hidden;
}

/* Top Divider Line */
.services-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 70%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(124, 58, 237, 0.25), transparent);
}

/* Background Orbs */
.services-bg-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(100px);
  pointer-events: none;
  z-index: 0;
  will-change: transform;
  transition: transform 0.1s linear;
}

.services-orb-1 {
  width: 450px;
  height: 450px;
  background: rgba(124, 58, 237, 0.1);
  top: 10%;
  left: -10%;
  animation: svcOrbFloat1 10s ease-in-out infinite;
}

.services-orb-2 {
  width: 350px;
  height: 350px;
  background: rgba(6, 214, 160, 0.06);
  bottom: 5%;
  right: -8%;
  animation: svcOrbFloat2 12s ease-in-out infinite;
}

@keyframes svcOrbFloat1 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(40px, -30px) scale(1.1); }
}

@keyframes svcOrbFloat2 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(-30px, 40px) scale(1.08); }
}

/* Background Grid */
.services-grid-bg {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(124, 58, 237, 0.02) 1px, transparent 1px),
    linear-gradient(90deg, rgba(124, 58, 237, 0.02) 1px, transparent 1px);
  background-size: 80px 80px;
  mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, black 10%, transparent 70%);
  -webkit-mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, black 10%, transparent 70%);
  z-index: 0;
}

/* Container */
.services-container {
  max-width: 1280px;
  margin: 0 auto;
  position: relative;
  z-index: 2;
}

/* ========== SCROLL REVEAL ========== */
.svc-reveal {
  opacity: 0;
  transform: translateY(50px);
  transition: all 0.9s cubic-bezier(0.16, 1, 0.3, 1);
  transition-delay: var(--svc-delay, 0s);
}

.svc-reveal.svc-revealed {
  opacity: 1;
  transform: translateY(0);
}

/* ========== SECTION HEADER ========== */
.services-header {
  text-align: center;
  margin-bottom: 80px;
}

.services-tag {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: rgba(124, 58, 237, 0.08);
  border: 1px solid rgba(124, 58, 237, 0.2);
  padding: 7px 20px;
  border-radius: 50px;
  font-size: 12px;
  font-weight: 600;
  color: #a78bfa;
  text-transform: uppercase;
  letter-spacing: 2.5px;
  margin-bottom: 22px;
}

.tag-dot {
  width: 6px;
  height: 6px;
  background: #06d6a0;
  border-radius: 50%;
  animation: tagDotPulse 2s ease-in-out infinite;
}

@keyframes tagDotPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(6, 214, 160, 0.4); }
  50% { box-shadow: 0 0 0 5px rgba(6, 214, 160, 0); }
}

.services-title {
  font-size: clamp(32px, 4.5vw, 50px);
  font-weight: 800;
  color: #ffffff;
  letter-spacing: -1.5px;
  margin-bottom: 18px;
  line-height: 1.15;
}

.svc-gradient-text {
  background: linear-gradient(135deg, #7c3aed 0%, #a855f7 50%, #06d6a0 100%);
  background-size: 200% 200%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: svcGradientShift 5s ease-in-out infinite;
}

@keyframes svcGradientShift {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

.services-desc {
  font-size: 16px;
  color: #7d82a6;
  max-width: 580px;
  margin: 0 auto;
  line-height: 1.75;
}

/* ========== SERVICES GRID ========== */
.services-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-bottom: 60px;
}

/* ========== SERVICE CARD ========== */
.service-card {
  position: relative;
  border-radius: 20px;
  transition: transform 0.15s ease-out;
  will-change: transform;
  cursor: pointer;
}

.card-glow-border {
  position: absolute;
  inset: 0;
  border-radius: 20px;
  opacity: 0;
  transition: opacity 0.4s ease;
  z-index: 0;
  pointer-events: none;
}

.card-inner {
  position: relative;
  z-index: 1;
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 20px;
  padding: 40px 32px;
  height: 100%;
  display: flex;
  flex-direction: column;
  transition: all 0.4s ease;
  overflow: hidden;
}

/* Inner Shimmer Effect */
.card-inner::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(124, 58, 237, 0.04), transparent);
  transition: left 0.8s ease;
}

.service-card:hover .card-inner::before {
  left: 100%;
}

.service-card:hover .card-inner {
  border-color: rgba(124, 58, 237, 0.2);
  background: rgba(124, 58, 237, 0.04);
}

/* ========== ICON ========== */
.svc-icon-wrap {
  position: relative;
  width: 64px;
  height: 64px;
  margin-bottom: 28px;
}

.svc-icon {
  width: 64px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(124, 58, 237, 0.08);
  border: 1px solid rgba(124, 58, 237, 0.15);
  border-radius: 16px;
  position: relative;
  z-index: 2;
  transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.service-card:hover .svc-icon {
  transform: scale(1.1) rotate(5deg);
  background: rgba(124, 58, 237, 0.15);
  border-color: rgba(124, 58, 237, 0.3);
  box-shadow: 0 8px 25px rgba(124, 58, 237, 0.2);
}

.service-card:hover .svc-icon svg {
  stroke: #06d6a0;
}

.svc-icon svg {
  transition: stroke 0.4s ease;
}

.icon-ring {
  position: absolute;
  inset: -6px;
  border-radius: 20px;
  border: 1px solid rgba(124, 58, 237, 0.1);
  z-index: 1;
  opacity: 0;
  transform: scale(0.8);
  transition: all 0.4s ease;
}

.service-card:hover .icon-ring {
  opacity: 1;
  transform: scale(1);
  animation: iconRingSpin 8s linear infinite;
}

@keyframes iconRingSpin {
  0% { border-color: rgba(124, 58, 237, 0.2); }
  50% { border-color: rgba(6, 214, 160, 0.2); }
  100% { border-color: rgba(124, 58, 237, 0.2); }
}

.icon-glow {
  position: absolute;
  inset: 0;
  background: rgba(124, 58, 237, 0.25);
  border-radius: 16px;
  filter: blur(18px);
  z-index: 0;
  opacity: 0;
  transition: opacity 0.4s ease;
}

.service-card:hover .icon-glow {
  opacity: 1;
}

/* ========== CARD CONTENT ========== */
.svc-card-title {
  font-size: 20px;
  font-weight: 700;
  color: #ffffff;
  margin-bottom: 12px;
  letter-spacing: -0.3px;
  transition: color 0.3s ease;
}

.service-card:hover .svc-card-title {
  color: #e0d4fc;
}

.svc-card-desc {
  font-size: 14px;
  line-height: 1.75;
  color: #6b6f8d;
  margin-bottom: 20px;
  flex: 1;
}

/* Card Tags */
.svc-card-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 24px;
}

.svc-card-tags span {
  display: inline-block;
  padding: 4px 12px;
  background: rgba(124, 58, 237, 0.06);
  border: 1px solid rgba(124, 58, 237, 0.12);
  border-radius: 20px;
  font-size: 11px;
  font-weight: 500;
  color: #8b7fc7;
  letter-spacing: 0.3px;
  opacity: 0;
  transform: translateY(10px) scale(0.9);
  transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.svc-card-tags span.tag-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.service-card:hover .svc-card-tags span {
  border-color: rgba(124, 58, 237, 0.25);
  background: rgba(124, 58, 237, 0.1);
}

/* Card Link */
.svc-card-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #7c3aed;
  text-decoration: none;
  font-size: 14px;
  font-weight: 600;
  transition: all 0.3s ease;
  margin-top: auto;
}

.svc-card-link svg {
  transition: transform 0.3s ease;
}

.svc-card-link:hover {
  color: #06d6a0;
  gap: 12px;
}

.svc-card-link:hover svg {
  transform: translateX(4px);
}

/* ========== BOTTOM CTA ========== */
.services-bottom-cta {
  text-align: center;
  padding-top: 20px;
}

.services-bottom-cta p {
  font-size: 15px;
  color: #6b6f8d;
  margin-bottom: 20px;
}

.svc-cta-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  border-radius: 50px;
  overflow: hidden;
  transition: all 0.4s ease;
}

.svc-cta-bg {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, #7c3aed, #a855f7);
  z-index: 1;
  transition: all 0.4s ease;
}

.svc-cta-btn:hover .svc-cta-bg {
  background: linear-gradient(135deg, #a855f7, #06d6a0);
}

.svc-cta-content {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 32px;
  color: #ffffff;
  font-size: 15px;
  font-weight: 600;
}

.svc-cta-btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 15px 40px rgba(124, 58, 237, 0.45);
}

.svc-cta-btn:hover .svc-cta-content svg {
  transform: translateX(4px);
}

.svc-cta-content svg {
  transition: transform 0.3s ease;
}

/* =============================================
   RESPONSIVE — TABLET (1024px)
   ============================================= */
@media (max-width: 1024px) {
  .services-section {
    padding: 100px 30px;
  }

  .services-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }

  .services-header {
    margin-bottom: 60px;
  }
}

/* =============================================
   RESPONSIVE — MOBILE (768px)
   ============================================= */
@media (max-width: 768px) {
  .services-section {
    padding: 80px 20px;
  }

  .services-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .card-inner {
    padding: 30px 24px;
  }

  .services-header {
    margin-bottom: 45px;
  }

  .services-title {
    letter-spacing: -1px;
  }

  .services-desc {
    font-size: 14px;
  }

  .svc-icon-wrap {
    width: 56px;
    height: 56px;
    margin-bottom: 22px;
  }

  .svc-icon {
    width: 56px;
    height: 56px;
  }

  .svc-icon svg {
    width: 24px;
    height: 24px;
  }

  .svc-card-title {
    font-size: 18px;
  }

  .svc-card-desc {
    font-size: 13px;
  }

  .services-bg-orb {
    filter: blur(60px);
  }

  .services-orb-1 {
    width: 250px;
    height: 250px;
  }

  .services-orb-2 {
    width: 200px;
    height: 200px;
  }
}

/* =============================================
   RESPONSIVE — SMALL MOBILE (420px)
   ============================================= */
@media (max-width: 420px) {
  .services-section {
    padding: 60px 16px;
  }

  .card-inner {
    padding: 24px 20px;
  }

  .services-tag {
    font-size: 10px;
    letter-spacing: 2px;
    padding: 6px 16px;
  }

  .services-title {
    font-size: 26px;
  }

  .services-desc {
    font-size: 13px;
  }

  .svc-card-tags span {
    font-size: 10px;
    padding: 3px 10px;
  }

  .services-bottom-cta p {
    font-size: 13px;
  }
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-e23e080 *//* =============================================
   EVOURIA — PROCESS / HOW IT WORKS CSS
   ============================================= */

/* ========== SECTION BASE ========== */
.process-section {
  padding: 130px 40px;
  background: linear-gradient(180deg, #0a0e27 0%, #0e1235 50%, #0a0e27 100%);
  position: relative;
  overflow: hidden;
}

.process-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 70%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(124, 58, 237, 0.25), transparent);
}

/* Background Orbs */
.process-bg-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(100px);
  pointer-events: none;
  z-index: 0;
  will-change: transform;
}

.process-orb-1 {
  width: 400px;
  height: 400px;
  background: rgba(124, 58, 237, 0.1);
  top: 15%;
  right: -10%;
  animation: procOrbFloat1 12s ease-in-out infinite;
}

.process-orb-2 {
  width: 350px;
  height: 350px;
  background: rgba(6, 214, 160, 0.06);
  bottom: 10%;
  left: -8%;
  animation: procOrbFloat2 14s ease-in-out infinite;
}

@keyframes procOrbFloat1 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(-30px, 40px) scale(1.08); }
}

@keyframes procOrbFloat2 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(40px, -30px) scale(1.1); }
}

/* Background Lines Pattern */
.process-lines-bg {
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(
    90deg,
    transparent,
    transparent 100px,
    rgba(124, 58, 237, 0.015) 100px,
    rgba(124, 58, 237, 0.015) 101px
  );
  z-index: 0;
  mask-image: radial-gradient(ellipse 50% 60% at 50% 50%, black 10%, transparent 70%);
  -webkit-mask-image: radial-gradient(ellipse 50% 60% at 50% 50%, black 10%, transparent 70%);
}

/* Container */
.process-container {
  max-width: 1100px;
  margin: 0 auto;
  position: relative;
  z-index: 2;
}

/* ========== SCROLL REVEAL ========== */
.proc-reveal {
  opacity: 0;
  transform: translateY(50px);
  transition: all 0.9s cubic-bezier(0.16, 1, 0.3, 1);
  transition-delay: var(--proc-delay, 0s);
}

.proc-reveal.proc-revealed {
  opacity: 1;
  transform: translateY(0);
}

/* ========== SECTION HEADER ========== */
.process-header {
  text-align: center;
  margin-bottom: 90px;
}

.process-tag {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: rgba(124, 58, 237, 0.08);
  border: 1px solid rgba(124, 58, 237, 0.2);
  padding: 7px 20px;
  border-radius: 50px;
  font-size: 12px;
  font-weight: 600;
  color: #a78bfa;
  text-transform: uppercase;
  letter-spacing: 2.5px;
  margin-bottom: 22px;
}

.proc-tag-dot {
  width: 6px;
  height: 6px;
  background: #06d6a0;
  border-radius: 50%;
  animation: procTagPulse 2s ease-in-out infinite;
}

@keyframes procTagPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(6, 214, 160, 0.4); }
  50% { box-shadow: 0 0 0 5px rgba(6, 214, 160, 0); }
}

.process-title {
  font-size: clamp(32px, 4.5vw, 50px);
  font-weight: 800;
  color: #ffffff;
  letter-spacing: -1.5px;
  margin-bottom: 18px;
  line-height: 1.15;
}

.proc-gradient-text {
  background: linear-gradient(135deg, #7c3aed 0%, #a855f7 50%, #06d6a0 100%);
  background-size: 200% 200%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: procGradientShift 5s ease-in-out infinite;
}

@keyframes procGradientShift {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

.process-desc {
  font-size: 16px;
  color: #7d82a6;
  max-width: 560px;
  margin: 0 auto;
  line-height: 1.75;
}

/* =============================================
   TIMELINE
   ============================================= */
.process-timeline {
  position: relative;
  padding: 0 0 20px 0;
}

/* ========== PROGRESS TRACK ========== */
.timeline-track {
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 3px;
  transform: translateX(-50%);
  background: rgba(124, 58, 237, 0.1);
  border-radius: 3px;
  z-index: 1;
}

.timeline-progress {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 0%;
  background: linear-gradient(180deg, #7c3aed, #06d6a0);
  border-radius: 3px;
  transition: height 0.05s linear;
  box-shadow: 0 0 12px rgba(124, 58, 237, 0.4),
              0 0 30px rgba(124, 58, 237, 0.15);
}

/* Glowing tip */
.timeline-progress::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 50%;
  transform: translateX(-50%);
  width: 10px;
  height: 10px;
  background: #06d6a0;
  border-radius: 50%;
  box-shadow: 0 0 15px rgba(6, 214, 160, 0.6);
}

/* ========== PROCESS STEP ========== */
.process-step {
  display: flex;
  align-items: flex-start;
  gap: 40px;
  margin-bottom: 80px;
  position: relative;
  z-index: 2;
}

.process-step:last-child {
  margin-bottom: 0;
}

/* Alternate layout: even steps go right */
.process-step {
  flex-direction: row;
  padding-right: 50%;
}

.process-step.step-right {
  flex-direction: row-reverse;
  padding-right: 0;
  padding-left: 50%;
  text-align: left;
}

/* ========== STEP MARKER ========== */
.step-marker {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  z-index: 5;
}

.marker-outer {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: #0e1235;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  border: 2px solid rgba(124, 58, 237, 0.2);
  transition: all 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.marker-outer.marker-animated {
  border-color: rgba(124, 58, 237, 0.5);
  box-shadow: 0 0 25px rgba(124, 58, 237, 0.2);
}

.step-active .marker-outer {
  border-color: #7c3aed;
  background: rgba(124, 58, 237, 0.12);
  box-shadow: 0 0 30px rgba(124, 58, 237, 0.3);
  transform: scale(1.1);
}

.marker-inner {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(124, 58, 237, 0.2), rgba(124, 58, 237, 0.05));
  display: flex;
  align-items: center;
  justify-content: center;
}

.marker-inner span {
  font-size: 14px;
  font-weight: 800;
  background: linear-gradient(135deg, #7c3aed, #06d6a0);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.marker-pulse {
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  border: 1px solid rgba(124, 58, 237, 0.15);
  opacity: 0;
  transition: opacity 0.4s ease;
}

.step-active .marker-pulse {
  opacity: 1;
  animation: markerPulseAnim 2s ease-in-out infinite;
}

@keyframes markerPulseAnim {
  0% { transform: scale(1); opacity: 0.8; }
  100% { transform: scale(1.5); opacity: 0; }
}

.marker-connector {
  width: 2px;
  height: 40px;
  background: linear-gradient(180deg, rgba(124, 58, 237, 0.2), transparent);
  margin-top: 4px;
}

/* ========== STEP CARD ========== */
.step-card {
  position: relative;
  flex: 1;
  transition: transform 0.4s ease;
  cursor: default;
}

.step-card-inner {
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 20px;
  padding: 36px 32px;
  position: relative;
  z-index: 1;
  transition: all 0.4s ease;
  overflow: hidden;
}

.step-card-inner::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(124, 58, 237, 0.03), transparent);
  transition: left 0.7s ease;
}

.step-active .step-card-inner {
  border-color: rgba(124, 58, 237, 0.15);
  background: rgba(124, 58, 237, 0.03);
}

.step-active .step-card-inner::before {
  left: 100%;
}

.step-card:hover .step-card-inner {
  border-color: rgba(124, 58, 237, 0.25);
  background: rgba(124, 58, 237, 0.05);
}

.step-card-glow {
  position: absolute;
  inset: 0;
  border-radius: 20px;
  opacity: 0;
  transition: opacity 0.4s ease;
  z-index: 0;
  pointer-events: none;
}

/* Step Badge */
.step-badge {
  display: inline-block;
  padding: 4px 14px;
  background: rgba(124, 58, 237, 0.1);
  border: 1px solid rgba(124, 58, 237, 0.2);
  border-radius: 20px;
  font-size: 11px;
  font-weight: 600;
  color: #a78bfa;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  margin-bottom: 16px;
}

.badge-final {
  background: rgba(6, 214, 160, 0.1);
  border-color: rgba(6, 214, 160, 0.2);
  color: #06d6a0;
}

/* Step Title */
.step-title {
  font-size: 22px;
  font-weight: 700;
  color: #ffffff;
  margin-bottom: 12px;
  letter-spacing: -0.3px;
}

/* Step Description */
.step-desc {
  font-size: 14px;
  line-height: 1.75;
  color: #6b6f8d;
  margin-bottom: 22px;
}

/* Step Features */
.step-features {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 22px;
}

.step-feature {
  display: flex;
  align-items: center;
  gap: 10px;
  opacity: 0;
  transform: translateX(-15px);
  transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.step-feature.feature-visible {
  opacity: 1;
  transform: translateX(0);
}

.step-right .step-feature {
  transform: translateX(15px);
}

.step-right .step-feature.feature-visible {
  transform: translateX(0);
}

.step-feature span {
  font-size: 13px;
  color: #9ca0bd;
  font-weight: 500;
}

/* Step Duration */
.step-duration {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  background: rgba(124, 58, 237, 0.06);
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
  color: #8b7fc7;
}

/* =============================================
   RESULT BANNER
   ============================================= */
.process-result {
  margin-top: 80px;
}

.result-inner {
  display: flex;
  align-items: center;
  gap: 30px;
  background: linear-gradient(135deg, rgba(124, 58, 237, 0.1), rgba(6, 214, 160, 0.05));
  border: 1px solid rgba(124, 58, 237, 0.2);
  border-radius: 24px;
  padding: 40px 44px;
  position: relative;
  overflow: hidden;
  transition: all 0.4s ease;
}

.result-inner:hover {
  border-color: rgba(124, 58, 237, 0.35);
  box-shadow: 0 20px 60px rgba(124, 58, 237, 0.1);
}

/* Shimmer sweep on result */
.result-inner::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 60%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(124, 58, 237, 0.06), transparent);
  animation: resultShimmer 4s ease-in-out infinite;
}

@keyframes resultShimmer {
  0% { left: -100%; }
  50% { left: 150%; }
  100% { left: 150%; }
}

.result-icon-wrap {
  position: relative;
  flex-shrink: 0;
}

.result-icon {
  width: 64px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 30px;
  background: rgba(124, 58, 237, 0.1);
  border-radius: 18px;
  position: relative;
  z-index: 1;
  animation: resultIconBounce 3s ease-in-out infinite;
}

@keyframes resultIconBounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}

.result-icon-glow {
  position: absolute;
  inset: -8px;
  background: rgba(124, 58, 237, 0.2);
  border-radius: 22px;
  filter: blur(15px);
  z-index: 0;
  animation: resultGlowPulse 3s ease-in-out infinite;
}

@keyframes resultGlowPulse {
  0%, 100% { opacity: 0.4; }
  50% { opacity: 0.8; }
}

.result-content {
  flex: 1;
}

.result-content h3 {
  font-size: 22px;
  font-weight: 700;
  color: #ffffff;
  margin-bottom: 6px;
}

.result-content p {
  font-size: 14px;
  color: #7d82a6;
  line-height: 1.7;
}

.result-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 30px;
  background: linear-gradient(135deg, #7c3aed, #a855f7);
  color: #ffffff;
  text-decoration: none;
  border-radius: 50px;
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
  transition: all 0.4s ease;
  box-shadow: 0 8px 25px rgba(124, 58, 237, 0.35);
  flex-shrink: 0;
}

.result-cta:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 40px rgba(124, 58, 237, 0.5);
}

.result-cta svg {
  transition: transform 0.3s ease;
}

.result-cta:hover svg {
  transform: translateX(4px);
}

/* =============================================
   RESPONSIVE — TABLET (1024px)
   ============================================= */
@media (max-width: 1024px) {
  .process-section {
    padding: 100px 30px;
  }

  .process-step {
    padding-right: 0;
    padding-left: 80px;
    flex-direction: row;
  }

  .process-step.step-right {
    flex-direction: row;
    padding-left: 80px;
    padding-right: 0;
    text-align: left;
  }

  .step-marker {
    left: 30px;
    transform: translateX(0);
  }

  .timeline-track {
    left: 30px;
    transform: translateX(0);
  }

  .process-header {
    margin-bottom: 70px;
  }

  .result-inner {
    padding: 30px;
    flex-wrap: wrap;
  }

  .result-cta {
    width: 100%;
    justify-content: center;
    margin-top: 10px;
  }
}

/* =============================================
   RESPONSIVE — MOBILE (768px)
   ============================================= */
@media (max-width: 768px) {
  .process-section {
    padding: 80px 20px;
  }

  .process-step {
    padding-left: 60px;
    gap: 0;
    margin-bottom: 50px;
  }

  .process-step.step-right {
    padding-left: 60px;
  }

  .step-marker {
    left: 0px;
  }

  .timeline-track {
    left: 14px;
  }

  .marker-outer {
    width: 48px;
    height: 48px;
  }

  .marker-inner {
    width: 34px;
    height: 34px;
  }

  .marker-inner span {
    font-size: 12px;
  }

  .marker-connector {
    height: 25px;
  }

  .step-card-inner {
    padding: 28px 22px;
  }

  .step-title {
    font-size: 19px;
  }

  .step-desc {
    font-size: 13px;
  }

  .process-header {
    margin-bottom: 55px;
  }

  .process-desc {
    font-size: 14px;
  }

  .result-inner {
    flex-direction: column;
    text-align: center;
    padding: 30px 24px;
    gap: 20px;
  }

  .result-content h3 {
    font-size: 20px;
  }

  .result-content p {
    font-size: 13px;
  }

  .process-orb-1 {
    width: 250px;
    height: 250px;
  }

  .process-orb-2 {
    width: 200px;
    height: 200px;
  }

  .step-right .step-feature {
    transform: translateX(-15px);
  }

  .step-right .step-feature.feature-visible {
    transform: translateX(0);
  }
}

/* =============================================
   RESPONSIVE — SMALL MOBILE (420px)
   ============================================= */
@media (max-width: 420px) {
  .process-section {
    padding: 60px 16px;
  }

  .process-step {
    padding-left: 50px;
    margin-bottom: 40px;
  }

  .process-step.step-right {
    padding-left: 50px;
  }

  .marker-outer {
    width: 40px;
    height: 40px;
  }

  .marker-inner {
    width: 28px;
    height: 28px;
  }

  .marker-inner span {
    font-size: 10px;
  }

  .step-card-inner {
    padding: 22px 18px;
  }

  .step-title {
    font-size: 17px;
  }

  .step-desc {
    font-size: 12px;
  }

  .step-feature span {
    font-size: 12px;
  }

  .step-badge {
    font-size: 10px;
    padding: 3px 10px;
  }

  .process-title {
    font-size: 26px;
  }

  .result-icon {
    width: 50px;
    height: 50px;
    font-size: 24px;
  }
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-28573e8 *//* =============================================
   EVOURIA — ANNOUNCEMENT BAR CSS (PERSISTENT)
   ============================================= */

/* ========== BAR BASE ========== */
.announce-bar {
  position: relative;
  width: 100%;
  background: linear-gradient(135deg, #1a0f3c 0%, #0f1235 40%, #0c1a2e 70%, #1a0f3c 100%);
  overflow: hidden;
  z-index: 10000;
  border-bottom: 1px solid rgba(124, 58, 237, 0.15);
  transform: translateY(-100%);
  opacity: 0;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1),
              opacity 0.6s ease;
}

.announce-bar.announce-visible {
  transform: translateY(0);
  opacity: 1;
}

.announce-bar.announce-entered {
  transform: translateY(0);
  opacity: 1;
}

/* ========== ANIMATED BACKGROUNDS ========== */
.announce-bg-shimmer {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(124, 58, 237, 0.08) 25%,
    rgba(6, 214, 160, 0.05) 50%,
    rgba(124, 58, 237, 0.08) 75%,
    transparent 100%
  );
  background-size: 200% 100%;
  animation: announceShimmer 4s ease-in-out infinite;
  z-index: 0;
}

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

.announce-bg-particles {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

.announce-particle {
  position: absolute;
  bottom: -5px;
  background: rgba(124, 58, 237, 0.5);
  border-radius: 50%;
  animation: announceParticleFloat linear infinite;
}

@keyframes announceParticleFloat {
  0% {
    transform: translateY(0) translateX(0);
    opacity: 0;
  }
  10% { opacity: 0.6; }
  90% { opacity: 0.2; }
  100% {
    transform: translateY(-50px) translateX(20px);
    opacity: 0;
  }
}

/* Glowing bottom border line */
.announce-bar::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, 
    transparent, 
    #7c3aed, 
    #06d6a0, 
    #7c3aed, 
    transparent
  );
  background-size: 200% 100%;
  animation: borderGlow 3s linear infinite;
}

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

/* ========== CONTAINER ========== */
.announce-container {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  height: 48px;
  position: relative;
  z-index: 2;
}

/* ========== MARQUEE (Desktop left side) ========== */
.announce-marquee {
  overflow: hidden;
  position: absolute;
  left: 40px;
  max-width: 280px;
  mask-image: linear-gradient(90deg, transparent, black 15%, black 85%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, black 15%, black 85%, transparent);
}

.announce-marquee-track {
  display: flex;
  gap: 16px;
  white-space: nowrap;
  animation: announceMarquee 15s linear infinite;
}

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

.announce-marquee-item {
  font-size: 11px;
  font-weight: 600;
  color: #a78bfa;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

.announce-divider-dot {
  width: 3px;
  height: 3px;
  background: rgba(124, 58, 237, 0.4);
  border-radius: 50%;
  flex-shrink: 0;
  align-self: center;
}

/* ========== CENTER CONTENT ========== */
.announce-content {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-shrink: 0;
}

/* Badge */
.announce-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  background: rgba(124, 58, 237, 0.2);
  border: 1px solid rgba(124, 58, 237, 0.3);
  border-radius: 20px;
  flex-shrink: 0;
}

.announce-badge-dot {
  width: 5px;
  height: 5px;
  background: #06d6a0;
  border-radius: 50%;
  animation: announceBadgePulse 1.5s ease-in-out infinite;
}

@keyframes announceBadgePulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(6, 214, 160, 0.5); transform: scale(1); }
  50% { box-shadow: 0 0 0 4px rgba(6, 214, 160, 0); transform: scale(1.2); }
}

.announce-badge span:last-child {
  font-size: 10px;
  font-weight: 800;
  color: #a78bfa;
  letter-spacing: 1.5px;
}

/* Message */
.announce-message {
  font-size: 13px;
  color: #c4c7e0;
  font-weight: 500;
  white-space: nowrap;
}

.announce-message strong {
  color: #ffffff;
  font-weight: 700;
}

/* ========== COUNTDOWN ========== */
.announce-countdown {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}

.countdown-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 36px;
  padding: 3px 6px;
  background: rgba(124, 58, 237, 0.12);
  border: 1px solid rgba(124, 58, 237, 0.2);
  border-radius: 8px;
  position: relative;
  overflow: hidden;
}

.countdown-block::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(124, 58, 237, 0.1), transparent);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.countdown-block:hover::before {
  opacity: 1;
}

.countdown-num {
  font-size: 14px;
  font-weight: 800;
  color: #ffffff;
  letter-spacing: -0.5px;
  font-family: 'Poppins', sans-serif;
  line-height: 1.2;
  transition: all 0.3s ease;
  position: relative;
  z-index: 1;
}

.countdown-num.tick {
  animation: countdownTick 0.3s ease-out;
}

@keyframes countdownTick {
  0% { transform: translateY(0) scale(1); }
  40% { transform: translateY(-3px) scale(1.15); color: #06d6a0; }
  100% { transform: translateY(0) scale(1); }
}

.countdown-label {
  font-size: 8px;
  font-weight: 600;
  color: #5c6090;
  text-transform: uppercase;
  letter-spacing: 1px;
  line-height: 1;
  position: relative;
  z-index: 1;
}

.countdown-sep {
  font-size: 14px;
  font-weight: 700;
  color: #7c3aed;
  animation: colonBlink 1s step-end infinite;
}

@keyframes colonBlink {
  0%, 50% { opacity: 1; }
  51%, 100% { opacity: 0.3; }
}

/* ========== CTA BUTTON ========== */
.announce-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 18px;
  background: linear-gradient(135deg, #7c3aed, #a855f7);
  color: #ffffff;
  text-decoration: none;
  border-radius: 50px;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
  transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
  box-shadow: 0 4px 15px rgba(124, 58, 237, 0.3);
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
}

.announce-cta::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.15), transparent);
  animation: ctaShimmer 2.5s ease-in-out infinite;
}

@keyframes ctaShimmer {
  0% { left: -100%; }
  60% { left: 100%; }
  100% { left: 100%; }
}

.announce-cta:hover {
  transform: translateY(-2px) scale(1.05);
  box-shadow: 0 8px 25px rgba(124, 58, 237, 0.45);
  background: linear-gradient(135deg, #a855f7, #06d6a0);
}

.announce-cta:hover svg {
  transform: translateX(3px);
}

.announce-cta svg {
  transition: transform 0.3s ease;
  position: relative;
  z-index: 1;
}

.announce-cta span {
  position: relative;
  z-index: 1;
}

/* =============================================
   RESPONSIVE — TABLET (1024px)
   ============================================= */
@media (max-width: 1024px) {
  .announce-marquee {
    display: none;
  }

  .announce-container {
    gap: 14px;
    padding: 0 20px;
  }

  .announce-message {
    font-size: 12px;
  }

  .announce-badge {
    padding: 2px 8px;
  }

  .announce-badge span:last-child {
    font-size: 9px;
  }

  .countdown-block {
    min-width: 32px;
    padding: 2px 5px;
  }

  .countdown-num {
    font-size: 13px;
  }
}

/* =============================================
   RESPONSIVE — MOBILE (768px)
   ============================================= */
@media (max-width: 768px) {
  .announce-container {
    height: auto;
    padding: 10px 16px;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
  }

  .announce-content {
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    width: 100%;
  }

  .announce-message {
    font-size: 12px;
    white-space: normal;
    text-align: center;
    width: 100%;
    order: 1;
  }

  .announce-badge {
    order: 0;
  }

  .announce-countdown {
    order: 2;
  }

  .announce-cta {
    order: 3;
    padding: 6px 16px;
    font-size: 11px;
  }

  .countdown-block {
    min-width: 30px;
    padding: 2px 4px;
  }

  .countdown-num {
    font-size: 12px;
  }

  .countdown-label {
    font-size: 7px;
  }

  .countdown-sep {
    font-size: 12px;
  }
}

/* =============================================
   RESPONSIVE — SMALL MOBILE (420px)
   ============================================= */
@media (max-width: 420px) {
  .announce-container {
    padding: 10px 12px;
    gap: 6px;
  }

  .announce-message {
    font-size: 11px;
    line-height: 1.4;
  }

  .announce-badge {
    padding: 2px 6px;
  }

  .announce-badge span:last-child {
    font-size: 8px;
    letter-spacing: 1px;
  }

  .announce-countdown {
    gap: 3px;
  }

  .countdown-block {
    min-width: 26px;
    border-radius: 6px;
  }

  .countdown-num {
    font-size: 11px;
  }

  .countdown-sep {
    font-size: 11px;
  }

  .announce-cta {
    padding: 5px 14px;
    font-size: 10px;
    gap: 4px;
  }

  .announce-cta svg {
    width: 12px;
    height: 12px;
  }
}

/* ========== BACKGROUND GLOW AMBIENT ========== */
.announce-bar::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 60%;
  height: 150%;
  background: radial-gradient(ellipse, rgba(124, 58, 237, 0.1) 0%, transparent 70%);
  pointer-events: none;
  z-index: 0;
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-ece6ac0 *//* =============================================
   EVOURIA — TRUSTED BY / MARQUEE CSS
   ============================================= */

/* ========== SECTION BASE ========== */
.trusted-section {
  padding: 110px 0;
  background: #0a0e27;
  position: relative;
  overflow: hidden;
}

/* Top divider */
.trusted-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 70%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(124, 58, 237, 0.25), transparent);
}

/* Background Orb */
.trusted-bg-orb {
  position: absolute;
  top: 30%;
  left: 50%;
  transform: translateX(-50%);
  width: 700px;
  height: 400px;
  background: radial-gradient(ellipse, rgba(124, 58, 237, 0.1) 0%, transparent 70%);
  border-radius: 50%;
  filter: blur(80px);
  pointer-events: none;
  z-index: 0;
  will-change: transform;
}

/* Glow horizontal line */
.trusted-glow-line {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(124, 58, 237, 0.15), transparent);
  z-index: 0;
}

/* Container */
.trusted-container {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 40px;
  position: relative;
  z-index: 2;
}

/* ========== SCROLL REVEAL ========== */
.trust-reveal {
  opacity: 0;
  transform: translateY(40px);
  transition: all 0.9s cubic-bezier(0.16, 1, 0.3, 1);
  transition-delay: var(--trust-delay, 0s);
}

.trust-reveal.trust-revealed {
  opacity: 1;
  transform: translateY(0);
}

/* ========== SECTION HEADER ========== */
.trusted-header {
  text-align: center;
  margin-bottom: 40px;
}

.trusted-tag {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: rgba(124, 58, 237, 0.08);
  border: 1px solid rgba(124, 58, 237, 0.2);
  padding: 7px 20px;
  border-radius: 50px;
  font-size: 12px;
  font-weight: 600;
  color: #a78bfa;
  text-transform: uppercase;
  letter-spacing: 2.5px;
  margin-bottom: 22px;
}

.trust-tag-dot {
  width: 6px;
  height: 6px;
  background: #06d6a0;
  border-radius: 50%;
  animation: trustTagPulse 2s ease-in-out infinite;
}

@keyframes trustTagPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(6, 214, 160, 0.4); }
  50% { box-shadow: 0 0 0 5px rgba(6, 214, 160, 0); }
}

.trusted-title {
  font-size: clamp(28px, 4vw, 44px);
  font-weight: 800;
  color: #ffffff;
  letter-spacing: -1.5px;
  margin-bottom: 16px;
  line-height: 1.2;
}

.trust-gradient-text {
  background: linear-gradient(135deg, #7c3aed 0%, #a855f7 50%, #06d6a0 100%);
  background-size: 200% 200%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: trustGradientShift 5s ease-in-out infinite;
}

@keyframes trustGradientShift {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

.trusted-desc {
  font-size: 15px;
  color: #7d82a6;
  max-width: 520px;
  margin: 0 auto;
  line-height: 1.7;
}

/* ========== TRUST STATS ========== */
.trust-stats {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 30px;
  margin-bottom: 60px;
  flex-wrap: wrap;
}

.trust-stat-item {
  display: flex;
  align-items: center;
  gap: 12px;
}

.trust-stat-icon {
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(6, 214, 160, 0.08);
  border: 1px solid rgba(6, 214, 160, 0.2);
  border-radius: 10px;
  flex-shrink: 0;
}

.trust-stat-text {
  font-size: 14px;
  color: #7d82a6;
  font-weight: 500;
}

.trust-stat-text strong {
  color: #ffffff;
  font-weight: 700;
  margin-right: 4px;
}

.trust-stat-divider {
  width: 1px;
  height: 30px;
  background: rgba(124, 58, 237, 0.2);
}

/* =============================================
   MARQUEE
   ============================================= */
.marquee-wrapper {
  position: relative;
  padding: 20px 0;
  margin-bottom: 50px;
  overflow: hidden;
  /* Fade edges */
  mask-image: linear-gradient(90deg, transparent, black 12%, black 88%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, black 12%, black 88%, transparent);
}

.marquee-row {
  overflow: hidden;
  margin-bottom: 20px;
  position: relative;
}

.marquee-row:last-child {
  margin-bottom: 0;
}

.marquee-content {
  display: flex;
  gap: 20px;
  width: max-content;
  will-change: transform;
}

/* Row 1: Left scroll */
.marquee-row-1 .marquee-content {
  animation: marqueeScrollLeft 40s linear infinite;
}

/* Row 2: Right scroll */
.marquee-row-2 .marquee-content {
  animation: marqueeScrollRight 45s linear infinite;
}

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

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

/* ========== LOGO BADGE ========== */
.logo-badge {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 16px 28px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 60px;
  transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
  cursor: default;
  white-space: nowrap;
  position: relative;
  flex-shrink: 0;
  z-index: 1;
}

.logo-badge::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 60px;
  background: linear-gradient(135deg, rgba(124, 58, 237, 0.15), rgba(6, 214, 160, 0.1));
  opacity: 0;
  transition: opacity 0.4s ease;
  z-index: -1;
}

.logo-badge:hover {
  transform: translateY(-6px) scale(1.05);
  border-color: rgba(124, 58, 237, 0.4);
  background: rgba(124, 58, 237, 0.05);
  box-shadow: 0 15px 40px rgba(124, 58, 237, 0.15),
              0 0 60px rgba(124, 58, 237, 0.08);
}

.logo-badge:hover::before {
  opacity: 1;
}

/* Logo Icon (colored circle with initials) */
.logo-icon {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 800;
  color: #ffffff;
  letter-spacing: -0.5px;
  flex-shrink: 0;
  transition: all 0.4s ease;
  position: relative;
  overflow: hidden;
}

.logo-icon::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.15), transparent);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.logo-badge:hover .logo-icon {
  transform: rotate(-5deg) scale(1.1);
}

.logo-badge:hover .logo-icon::after {
  opacity: 1;
}

/* Individual logo colors */
.logo-1 { background: linear-gradient(135deg, #7c3aed, #a855f7); }
.logo-2 { background: linear-gradient(135deg, #06d6a0, #14b8a6); }
.logo-3 { background: linear-gradient(135deg, #f59e0b, #ef4444); }
.logo-4 { background: linear-gradient(135deg, #8b5cf6, #ec4899); }
.logo-5 { background: linear-gradient(135deg, #06d6a0, #3b82f6); }
.logo-6 { background: linear-gradient(135deg, #ec4899, #f43f5e); }
.logo-7 { background: linear-gradient(135deg, #3b82f6, #6366f1); }
.logo-8 { background: linear-gradient(135deg, #a855f7, #7c3aed); }
.logo-9 { background: linear-gradient(135deg, #14b8a6, #06d6a0); }
.logo-10 { background: linear-gradient(135deg, #f43f5e, #f97316); }
.logo-11 { background: linear-gradient(135deg, #f97316, #f59e0b); }
.logo-12 { background: linear-gradient(135deg, #6366f1, #8b5cf6); }
.logo-13 { background: linear-gradient(135deg, #10b981, #06d6a0); }
.logo-14 { background: linear-gradient(135deg, #ec4899, #a855f7); }
.logo-15 { background: linear-gradient(135deg, #3b82f6, #06d6a0); }
.logo-16 { background: linear-gradient(135deg, #f59e0b, #a855f7); }

/* Logo Name */
.logo-name {
  font-size: 15px;
  font-weight: 600;
  color: #c4c7e0;
  letter-spacing: -0.2px;
  transition: color 0.3s ease;
}

.logo-badge:hover .logo-name {
  color: #ffffff;
}

/* ========== FOOTER MESSAGE ========== */
.trusted-footer {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 12px 24px;
  background: rgba(124, 58, 237, 0.05);
  border: 1px solid rgba(124, 58, 237, 0.15);
  border-radius: 50px;
  width: fit-content;
  margin: 0 auto;
}

.trusted-footer-dot {
  width: 8px;
  height: 8px;
  background: #06d6a0;
  border-radius: 50%;
  position: relative;
  animation: trustFooterPulse 2s ease-in-out infinite;
}

.trusted-footer-dot::after {
  content: '';
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  border: 1px solid rgba(6, 214, 160, 0.4);
  animation: trustFooterRing 2s ease-in-out infinite;
}

@keyframes trustFooterPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.2); }
}

@keyframes trustFooterRing {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.8); opacity: 0; }
}

.trusted-footer span {
  font-size: 13px;
  color: #9ca0bd;
  font-weight: 500;
}

.trusted-footer strong {
  color: #ffffff;
  font-weight: 700;
}

/* =============================================
   RESPONSIVE — TABLET (1024px)
   ============================================= */
@media (max-width: 1024px) {
  .trusted-section {
    padding: 90px 0;
  }

  .trusted-container {
    padding: 0 30px;
  }

  .trust-stats {
    gap: 20px;
  }

  .marquee-row-1 .marquee-content {
    animation-duration: 35s;
  }

  .marquee-row-2 .marquee-content {
    animation-duration: 40s;
  }
}

/* =============================================
   RESPONSIVE — MOBILE (768px)
   ============================================= */
@media (max-width: 768px) {
  .trusted-section {
    padding: 70px 0;
  }

  .trusted-container {
    padding: 0 20px;
  }

  .trusted-header {
    margin-bottom: 30px;
  }

  .trusted-title {
    letter-spacing: -1px;
  }

  .trusted-desc {
    font-size: 14px;
  }

  /* Stack stats vertically */
  .trust-stats {
    flex-direction: column;
    gap: 14px;
    margin-bottom: 40px;
  }

  .trust-stat-divider {
    width: 40px;
    height: 1px;
  }

  .marquee-wrapper {
    mask-image: linear-gradient(90deg, transparent, black 8%, black 92%, transparent);
    -webkit-mask-image: linear-gradient(90deg, transparent, black 8%, black 92%, transparent);
    margin-bottom: 35px;
  }

  .logo-badge {
    padding: 12px 22px;
    gap: 10px;
  }

  .logo-icon {
    width: 34px;
    height: 34px;
    font-size: 11px;
  }

  .logo-name {
    font-size: 13px;
  }

  .marquee-content {
    gap: 14px;
  }

  .marquee-row {
    margin-bottom: 14px;
  }

  /* Speed up marquee on mobile */
  .marquee-row-1 .marquee-content {
    animation-duration: 25s;
  }

  .marquee-row-2 .marquee-content {
    animation-duration: 28s;
  }

  .trusted-footer {
    padding: 10px 20px;
  }

  .trusted-footer span {
    font-size: 12px;
  }

  .trusted-bg-orb {
    width: 400px;
    height: 300px;
  }
}

/* =============================================
   RESPONSIVE — SMALL MOBILE (420px)
   ============================================= */
@media (max-width: 420px) {
  .trusted-section {
    padding: 60px 0;
  }

  .trusted-title {
    font-size: 24px;
  }

  .trusted-desc {
    font-size: 13px;
  }

  .trust-stat-text {
    font-size: 13px;
  }

  .logo-badge {
    padding: 10px 18px;
    gap: 8px;
  }

  .logo-icon {
    width: 30px;
    height: 30px;
    font-size: 10px;
  }

  .logo-name {
    font-size: 12px;
  }

  .marquee-content {
    gap: 10px;
  }

  .trusted-footer span {
    font-size: 11px;
  }
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-76e355d *//* =============================================
   EVOURIA — RESULTS / NUMBERS SECTION CSS
   ============================================= */

/* ========== SECTION BASE ========== */
.results-section {
  padding: 130px 40px;
  background: linear-gradient(180deg, #0a0e27 0%, #0f1338 35%, #110e30 65%, #0a0e27 100%);
  position: relative;
  overflow: hidden;
}

.results-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 70%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(124, 58, 237, 0.25), transparent);
}

/* Background Gradient */
.results-bg-gradient {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 60% 50% at 50% 50%, rgba(124, 58, 237, 0.06), transparent);
  z-index: 0;
}

/* Background Orbs */
.results-bg-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(100px);
  pointer-events: none;
  z-index: 0;
  will-change: transform;
}

.results-orb-1 {
  width: 400px;
  height: 400px;
  background: rgba(124, 58, 237, 0.12);
  top: -5%;
  left: -8%;
  animation: resOrbFloat1 10s ease-in-out infinite;
}

.results-orb-2 {
  width: 350px;
  height: 350px;
  background: rgba(6, 214, 160, 0.08);
  bottom: -5%;
  right: -6%;
  animation: resOrbFloat2 12s ease-in-out infinite;
}

.results-orb-3 {
  width: 250px;
  height: 250px;
  background: rgba(168, 85, 247, 0.08);
  top: 40%;
  right: 20%;
  animation: resOrbFloat3 14s ease-in-out infinite;
}

@keyframes resOrbFloat1 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(30px, 40px) scale(1.1); }
}

@keyframes resOrbFloat2 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(-40px, -30px) scale(1.08); }
}

@keyframes resOrbFloat3 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(-20px, 30px) scale(0.9); }
}

/* Grid Pattern */
.results-grid-pattern {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(124, 58, 237, 0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(124, 58, 237, 0.025) 1px, transparent 1px);
  background-size: 70px 70px;
  mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, black 10%, transparent 70%);
  -webkit-mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, black 10%, transparent 70%);
  z-index: 0;
}

/* Canvas */
#resultsParticles {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
}

/* Container */
.results-container {
  max-width: 1200px;
  margin: 0 auto;
  position: relative;
  z-index: 3;
}

/* ========== SCROLL REVEAL ========== */
.res-reveal {
  opacity: 0;
  transform: translateY(50px);
  transition: all 0.9s cubic-bezier(0.16, 1, 0.3, 1);
  transition-delay: var(--res-delay, 0s);
}

.res-reveal.res-revealed {
  opacity: 1;
  transform: translateY(0);
}

/* ========== SECTION HEADER ========== */
.results-header {
  text-align: center;
  margin-bottom: 70px;
}

.results-tag {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: rgba(124, 58, 237, 0.08);
  border: 1px solid rgba(124, 58, 237, 0.2);
  padding: 7px 20px;
  border-radius: 50px;
  font-size: 12px;
  font-weight: 600;
  color: #a78bfa;
  text-transform: uppercase;
  letter-spacing: 2.5px;
  margin-bottom: 22px;
}

.res-tag-dot {
  width: 6px;
  height: 6px;
  background: #06d6a0;
  border-radius: 50%;
  animation: resTagPulse 2s ease-in-out infinite;
}

@keyframes resTagPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(6, 214, 160, 0.4); }
  50% { box-shadow: 0 0 0 5px rgba(6, 214, 160, 0); }
}

.results-title {
  font-size: clamp(30px, 4.5vw, 48px);
  font-weight: 800;
  color: #ffffff;
  letter-spacing: -1.5px;
  margin-bottom: 16px;
  line-height: 1.15;
}

.res-gradient-text {
  background: linear-gradient(135deg, #7c3aed 0%, #a855f7 50%, #06d6a0 100%);
  background-size: 200% 200%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: resGradientShift 5s ease-in-out infinite;
}

@keyframes resGradientShift {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

.results-desc {
  font-size: 16px;
  color: #7d82a6;
  max-width: 550px;
  margin: 0 auto;
  line-height: 1.75;
}

/* =============================================
   MAIN STATS GRID
   ============================================= */
.results-stats-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-bottom: 40px;
}

/* ========== RESULT CARD ========== */
.result-card {
  position: relative;
  border-radius: 24px;
  overflow: hidden;
  transition: transform 0.4s ease;
}

.result-card:hover {
  transform: translateY(-6px);
}

.result-card-bg {
  position: absolute;
  inset: 0;
  border-radius: 24px;
  opacity: 0;
  transition: opacity 0.4s ease;
  z-index: 0;
  pointer-events: none;
}

.result-card-content {
  position: relative;
  z-index: 1;
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 24px;
  padding: 40px 36px;
  height: 100%;
  transition: all 0.4s ease;
  overflow: hidden;
}

.result-card-content::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(124, 58, 237, 0.04), transparent);
  transition: left 0.8s ease;
}

.result-card:hover .result-card-content {
  border-color: rgba(124, 58, 237, 0.2);
  background: rgba(124, 58, 237, 0.04);
}

.result-card:hover .result-card-content::before {
  left: 100%;
}

/* ========== FEATURED CARD ========== */
.result-card-featured .result-card-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 50px 40px;
}

/* ========== PROGRESS RING ========== */
.result-ring-wrap {
  position: relative;
  width: 120px;
  height: 120px;
  margin-bottom: 24px;
}

.result-ring {
  width: 100%;
  height: 100%;
}

.ring-progress {
  filter: drop-shadow(0 0 6px rgba(124, 58, 237, 0.4));
}

.result-ring-center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
}

.ring-emoji {
  font-size: 36px;
  animation: ringEmojiFloat 3s ease-in-out infinite;
}

@keyframes ringEmojiFloat {
  0%, 100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-4px) scale(1.05); }
}

/* Small Ring */
.result-ring-sm {
  width: 80px;
  height: 80px;
  margin-bottom: 0;
  flex-shrink: 0;
}

.ring-center-sm {
  width: 100%;
  height: 100%;
}

.ring-emoji-sm {
  font-size: 24px;
  animation: ringEmojiFloat 3s ease-in-out infinite;
}

/* ========== NUMBER ========== */
.result-number-wrap {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 2px;
  margin-bottom: 8px;
}

.result-prefix {
  font-size: 32px;
  font-weight: 700;
  color: #06d6a0;
}

.result-counter {
  font-size: 56px;
  font-weight: 900;
  color: #ffffff;
  letter-spacing: -3px;
  line-height: 1;
}

.result-number-sm .result-counter {
  font-size: 36px;
  letter-spacing: -2px;
}

.result-number-sm {
  margin-bottom: 4px;
  justify-content: flex-start;
}

/* ========== LABELS ========== */
.result-label {
  display: block;
  font-size: 16px;
  font-weight: 600;
  color: #a78bfa;
  text-transform: uppercase;
  letter-spacing: 2px;
  margin-bottom: 12px;
}

.result-label-sm {
  font-size: 13px;
  letter-spacing: 1.5px;
  margin-bottom: 4px;
}

.result-sublabel {
  font-size: 12px;
  color: #5c6090;
  line-height: 1.5;
}

.result-detail {
  font-size: 13px;
  color: #6b6f8d;
  line-height: 1.7;
  max-width: 350px;
  margin-bottom: 24px;
}

/* ========== ROW LAYOUT ========== */
.result-row-layout {
  display: flex;
  align-items: center;
  gap: 24px;
  text-align: left;
}

/* ========== TREND BADGE ========== */
.result-trend {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: 20px;
  font-size: 13px;
  font-weight: 700;
  flex-shrink: 0;
  margin-left: auto;
}

.result-trend-up {
  background: rgba(6, 214, 160, 0.1);
  color: #06d6a0;
  border: 1px solid rgba(6, 214, 160, 0.2);
}

.result-trend-down {
  background: rgba(6, 214, 160, 0.1);
  color: #06d6a0;
  border: 1px solid rgba(6, 214, 160, 0.2);
}

/* ========== MINI CHART ========== */
.result-mini-chart {
  display: flex;
  align-items: flex-end;
  gap: 6px;
  height: 60px;
  width: 100%;
  max-width: 280px;
}

.mini-bar {
  flex: 1;
  height: 0;
  background: linear-gradient(180deg, #7c3aed, rgba(124, 58, 237, 0.2));
  border-radius: 4px 4px 1px 1px;
  position: relative;
  transition: height 1.2s cubic-bezier(0.16, 1, 0.3, 1);
  transition-delay: var(--bar-delay, 0s);
}

.mini-bar.bar-animated {
  height: var(--bar-h);
}

.mini-bar::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: #06d6a0;
  border-radius: 4px 4px 0 0;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.mini-bar.bar-animated::after {
  opacity: 1;
  transition-delay: calc(var(--bar-delay) + 1s);
}

/* ========== RESULTS RIGHT COLUMN ========== */
.results-right-col {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* =============================================
   BOTTOM STATS ROW
   ============================================= */
.results-bottom-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

.result-bottom-card {
  position: relative;
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 20px;
  padding: 32px 24px;
  text-align: center;
  transition: all 0.4s ease;
  overflow: hidden;
}

.result-bottom-card:hover {
  border-color: rgba(124, 58, 237, 0.25);
  background: rgba(124, 58, 237, 0.04);
  transform: translateY(-5px);
  box-shadow: 0 15px 40px rgba(124, 58, 237, 0.1);
}

/* Glowing top line */
.bottom-card-line {
  position: absolute;
  top: 0;
  left: 20%;
  right: 20%;
  height: 2px;
  background: linear-gradient(90deg, transparent, #7c3aed, transparent);
  opacity: 0;
  transition: opacity 0.4s ease;
}

.result-bottom-card:hover .bottom-card-line {
  opacity: 1;
  animation: bottomLineGlow 2s ease-in-out infinite;
}

@keyframes bottomLineGlow {
  0%, 100% { filter: blur(0px); opacity: 0.7; }
  50% { filter: blur(2px); opacity: 1; }
}

.bottom-stat-icon {
  font-size: 28px;
  margin-bottom: 16px;
  display: block;
  transition: transform 0.4s ease;
}

.result-bottom-card:hover .bottom-stat-icon {
  transform: scale(1.2) translateY(-4px);
}

.bottom-stat-number {
  margin-bottom: 8px;
}

.bottom-stat-number .result-counter {
  font-size: 38px;
  font-weight: 900;
  letter-spacing: -2px;
}

.bottom-stat-label {
  font-size: 12px;
  font-weight: 600;
  color: #5c6090;
  text-transform: uppercase;
  letter-spacing: 1.5px;
}

/* =============================================
   RESPONSIVE — TABLET (1024px)
   ============================================= */
@media (max-width: 1024px) {
  .results-section {
    padding: 100px 30px;
  }

  .results-stats-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .result-card-featured .result-card-content {
    padding: 40px 30px;
  }

  .results-bottom-row {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }

  .results-header {
    margin-bottom: 55px;
  }
}

/* =============================================
   RESPONSIVE — MOBILE (768px)
   ============================================= */
@media (max-width: 768px) {
  .results-section {
    padding: 80px 20px;
  }

  .results-title {
    letter-spacing: -1px;
  }

  .results-desc {
    font-size: 14px;
  }

  .result-card-content {
    padding: 30px 24px;
  }

  .result-card-featured .result-card-content {
    padding: 36px 24px;
  }

  .result-counter {
    font-size: 44px;
    letter-spacing: -2px;
  }

  .result-number-sm .result-counter {
    font-size: 30px;
  }

  .result-row-layout {
    flex-wrap: wrap;
    gap: 16px;
  }

  .result-ring-sm {
    width: 60px;
    height: 60px;
  }

  .ring-emoji-sm {
    font-size: 20px;
  }

  .result-trend {
    margin-left: 0;
  }

  .result-ring-wrap {
    width: 100px;
    height: 100px;
  }

  .ring-emoji {
    font-size: 28px;
  }

  .results-bottom-row {
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
  }

  .result-bottom-card {
    padding: 24px 18px;
  }

  .bottom-stat-number .result-counter {
    font-size: 30px;
  }

  .bottom-stat-label {
    font-size: 10px;
    letter-spacing: 1px;
  }

  .result-mini-chart {
    height: 45px;
  }

  .result-label {
    font-size: 14px;
    letter-spacing: 1.5px;
  }

  .result-detail {
    font-size: 12px;
  }

  .results-orb-3 {
    display: none;
  }

  .results-orb-1 {
    width: 250px;
    height: 250px;
  }

  .results-orb-2 {
    width: 200px;
    height: 200px;
  }
}

/* =============================================
   RESPONSIVE — SMALL MOBILE (420px)
   ============================================= */
@media (max-width: 420px) {
  .results-section {
    padding: 60px 16px;
  }

  .results-title {
    font-size: 24px;
  }

  .results-desc {
    font-size: 13px;
  }

  .result-counter {
    font-size: 36px;
  }

  .result-number-sm .result-counter {
    font-size: 26px;
  }

  .result-prefix {
    font-size: 24px;
  }

  .result-card-content {
    padding: 24px 18px;
  }

  .result-row-layout {
    gap: 14px;
  }

  .result-ring-sm {
    width: 50px;
    height: 50px;
  }

  .ring-emoji-sm {
    font-size: 18px;
  }

  .results-bottom-row {
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }

  .result-bottom-card {
    padding: 20px 14px;
  }

  .bottom-stat-icon {
    font-size: 22px;
    margin-bottom: 10px;
  }

  .bottom-stat-number .result-counter {
    font-size: 26px;
  }

  .bottom-stat-label {
    font-size: 9px;
  }

  .result-mini-chart {
    height: 35px;
    max-width: 200px;
  }

  .result-label {
    font-size: 12px;
  }

  .result-ring-wrap {
    width: 80px;
    height: 80px;
  }

  .ring-emoji {
    font-size: 22px;
  }
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-074b858 *//* =============================================
   EVOURIA — TESTIMONIALS SECTION CSS
   ============================================= */

/* ========== SECTION BASE ========== */
.testimonials-section {
  padding: 130px 40px;
  background: linear-gradient(180deg, #0a0e27 0%, #0e1235 50%, #0a0e27 100%);
  position: relative;
  overflow: hidden;
}

.testimonials-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 70%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(124, 58, 237, 0.25), transparent);
}

/* Background Orbs */
.testi-bg-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(100px);
  pointer-events: none;
  z-index: 0;
  will-change: transform;
}

.testi-orb-1 {
  width: 450px;
  height: 450px;
  background: rgba(124, 58, 237, 0.1);
  top: -10%;
  right: -10%;
  animation: testiOrbFloat1 12s ease-in-out infinite;
}

.testi-orb-2 {
  width: 350px;
  height: 350px;
  background: rgba(6, 214, 160, 0.06);
  bottom: -10%;
  left: -8%;
  animation: testiOrbFloat2 14s ease-in-out infinite;
}

@keyframes testiOrbFloat1 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(-30px, 40px) scale(1.1); }
}

@keyframes testiOrbFloat2 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(40px, -30px) scale(1.08); }
}

/* Background Pattern */
.testi-bg-pattern {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(124, 58, 237, 0.04) 1px, transparent 1px);
  background-size: 40px 40px;
  mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, black 10%, transparent 70%);
  -webkit-mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, black 10%, transparent 70%);
  z-index: 0;
}

/* Watermark Quote */
.testi-watermark {
  position: absolute;
  top: 10%;
  left: 5%;
  font-size: 400px;
  font-weight: 900;
  color: rgba(124, 58, 237, 0.03);
  line-height: 1;
  pointer-events: none;
  z-index: 0;
  font-family: Georgia, serif;
  user-select: none;
}

/* Container */
.testimonials-container {
  max-width: 1400px;
  margin: 0 auto;
  position: relative;
  z-index: 2;
}

/* ========== SCROLL REVEAL ========== */
.testi-reveal {
  opacity: 0;
  transform: translateY(45px);
  transition: all 0.9s cubic-bezier(0.16, 1, 0.3, 1);
  transition-delay: var(--testi-delay, 0s);
}

.testi-reveal.testi-revealed {
  opacity: 1;
  transform: translateY(0);
}

/* ========== SECTION HEADER ========== */
.testi-header {
  text-align: center;
  margin-bottom: 60px;
}

.testi-tag {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: rgba(124, 58, 237, 0.08);
  border: 1px solid rgba(124, 58, 237, 0.2);
  padding: 7px 20px;
  border-radius: 50px;
  font-size: 12px;
  font-weight: 600;
  color: #a78bfa;
  text-transform: uppercase;
  letter-spacing: 2.5px;
  margin-bottom: 22px;
}

.testi-tag-dot {
  width: 6px;
  height: 6px;
  background: #06d6a0;
  border-radius: 50%;
  animation: testiTagPulse 2s ease-in-out infinite;
}

@keyframes testiTagPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(6, 214, 160, 0.4); }
  50% { box-shadow: 0 0 0 5px rgba(6, 214, 160, 0); }
}

.testi-title {
  font-size: clamp(30px, 4.5vw, 48px);
  font-weight: 800;
  color: #ffffff;
  letter-spacing: -1.5px;
  margin-bottom: 16px;
  line-height: 1.15;
}

.testi-gradient-text {
  background: linear-gradient(135deg, #7c3aed, #a855f7, #06d6a0);
  background-size: 200% 200%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: testiGradShift 5s ease-in-out infinite;
}

@keyframes testiGradShift {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

.testi-desc {
  font-size: 16px;
  color: #7d82a6;
  max-width: 530px;
  margin: 0 auto 28px;
  line-height: 1.75;
}

/* Aggregate Rating */
.testi-aggregate {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  padding: 12px 28px;
  border-radius: 50px;
}

.agg-stars {
  display: flex;
  gap: 3px;
}

.agg-score {
  font-size: 16px;
  font-weight: 800;
  color: #f59e0b;
}

.agg-divider {
  width: 1px;
  height: 20px;
  background: rgba(255, 255, 255, 0.1);
}

.agg-count {
  font-size: 13px;
  color: #6b6f8d;
  font-weight: 500;
}

/* =============================================
   CAROUSEL
   ============================================= */
.testi-carousel {
  position: relative;
}

.testi-track-wrapper {
  overflow: hidden;
  margin: 0 -10px;
  padding: 20px 10px;
}

.testi-track {
  display: flex;
  gap: 24px;
  transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
  cursor: grab;
  user-select: none;
}

/* ========== TESTIMONIAL CARD ========== */
.testi-card {
  min-width: calc(33.333% - 16px);
  flex-shrink: 0;
  transition: all 0.5s ease;
  opacity: 0.5;
  transform: scale(0.95);
  filter: blur(1px);
}

.testi-card.testi-active {
  opacity: 1;
  transform: scale(1);
  filter: blur(0);
}

.testi-card.testi-active ~ .testi-card:first-of-type,
.testi-card:has(+ .testi-active),
.testi-card.testi-active + .testi-card {
  opacity: 0.7;
  transform: scale(0.97);
  filter: blur(0);
}

.testi-card-inner {
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 24px;
  padding: 36px 32px;
  height: 100%;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
  transition: all 0.4s ease, transform 0.1s ease-out;
  will-change: transform;
}

.testi-card:hover .testi-card-inner {
  border-color: rgba(124, 58, 237, 0.25);
  background: rgba(124, 58, 237, 0.04);
}

/* Shimmer */
.testi-card-inner::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(124, 58, 237, 0.04), transparent);
  transition: left 0.8s ease;
}

.testi-card:hover .testi-card-inner::before {
  left: 100%;
}

/* Cursor glow */
.testi-card-glow {
  position: absolute;
  inset: 0;
  border-radius: 24px;
  opacity: 0;
  transition: opacity 0.4s ease;
  z-index: 0;
  pointer-events: none;
}

/* Quote icon */
.testi-quote-icon {
  position: absolute;
  top: 20px;
  right: 24px;
  opacity: 0.5;
  transition: opacity 0.3s ease;
}

.testi-card:hover .testi-quote-icon {
  opacity: 1;
}

/* Stars */
.testi-stars {
  display: flex;
  gap: 3px;
  margin-bottom: 16px;
}

/* Result Badge */
.testi-result-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 16px;
  background: rgba(6, 214, 160, 0.08);
  border: 1px solid rgba(6, 214, 160, 0.18);
  border-radius: 20px;
  margin-bottom: 18px;
  width: fit-content;
  transition: all 0.3s ease;
}

.testi-card:hover .testi-result-badge {
  background: rgba(6, 214, 160, 0.12);
  border-color: rgba(6, 214, 160, 0.3);
  transform: translateX(4px);
}

.result-badge-icon {
  font-size: 14px;
}

.testi-result-badge span:last-child {
  font-size: 12px;
  font-weight: 700;
  color: #06d6a0;
  letter-spacing: 0.3px;
}

/* Quote Text */
.testi-quote {
  font-size: 15px;
  line-height: 1.8;
  color: #c4c7e0;
  margin-bottom: 20px;
  flex: 1;
  font-style: italic;
  position: relative;
  z-index: 1;
}

/* Service Tag */
.testi-service-tag {
  display: inline-block;
  padding: 4px 14px;
  background: rgba(124, 58, 237, 0.08);
  border: 1px solid rgba(124, 58, 237, 0.15);
  border-radius: 20px;
  font-size: 11px;
  font-weight: 600;
  color: #a78bfa;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 22px;
  width: fit-content;
}

/* Author */
.testi-author {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: auto;
}

.testi-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 800;
  color: #ffffff;
  position: relative;
  flex-shrink: 0;
  transition: transform 0.4s ease;
}

.testi-card:hover .testi-avatar {
  transform: scale(1.08);
}

.testi-avatar span {
  position: relative;
  z-index: 1;
}

.avatar-status {
  position: absolute;
  bottom: 1px;
  right: 1px;
  width: 12px;
  height: 12px;
  background: #06d6a0;
  border: 2.5px solid #0e1235;
  border-radius: 50%;
  z-index: 2;
}

.testi-author-info strong {
  display: block;
  font-size: 15px;
  color: #ffffff;
  font-weight: 700;
}

.testi-author-info span {
  font-size: 12px;
  color: #5c6090;
  font-weight: 500;
}

/* =============================================
   CAROUSEL CONTROLS
   ============================================= */
.testi-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  margin-top: 50px;
}

/* Nav Buttons */
.testi-nav-btn {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  border: 1px solid rgba(124, 58, 237, 0.25);
  background: rgba(124, 58, 237, 0.06);
  color: #a78bfa;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
  flex-shrink: 0;
}

.testi-nav-btn:hover {
  background: #7c3aed;
  border-color: #7c3aed;
  color: #ffffff;
  transform: scale(1.1);
  box-shadow: 0 8px 25px rgba(124, 58, 237, 0.35);
}

.testi-nav-btn:active {
  transform: scale(0.95);
}

/* Progress Bar */
.testi-progress-bar {
  width: 120px;
  height: 3px;
  background: rgba(124, 58, 237, 0.12);
  border-radius: 3px;
  overflow: hidden;
}

.testi-progress-fill {
  height: 100%;
  width: 20%;
  background: linear-gradient(90deg, #7c3aed, #06d6a0);
  border-radius: 3px;
  transition: width 0.7s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 0 8px rgba(124, 58, 237, 0.4);
}

/* Dots */
.testi-dots {
  display: flex;
  gap: 8px;
}

.testi-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(124, 58, 237, 0.2);
  border: none;
  cursor: pointer;
  transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
  padding: 0;
}

.testi-dot.active {
  background: #7c3aed;
  width: 30px;
  border-radius: 5px;
  box-shadow: 0 0 12px rgba(124, 58, 237, 0.4);
}

.testi-dot:hover:not(.active) {
  background: rgba(124, 58, 237, 0.4);
  transform: scale(1.2);
}

/* Counter */
.testi-counter {
  display: flex;
  align-items: baseline;
  gap: 4px;
  font-family: 'Poppins', sans-serif;
}

.testi-current {
  font-size: 20px;
  font-weight: 800;
  color: #ffffff;
}

.testi-separator {
  font-size: 14px;
  color: #5c6090;
  font-weight: 500;
}

.testi-total {
  font-size: 14px;
  font-weight: 600;
  color: #5c6090;
}

/* =============================================
   RESPONSIVE — TABLET (1024px)
   ============================================= */
@media (max-width: 1024px) {
  .testimonials-section {
    padding: 100px 30px;
  }

  .testi-card {
    min-width: calc(50% - 12px);
  }

  .testi-header {
    margin-bottom: 45px;
  }

  .testi-watermark {
    font-size: 250px;
  }

  .testi-aggregate {
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    padding: 10px 22px;
  }
}

/* =============================================
   RESPONSIVE — MOBILE (768px)
   ============================================= */
@media (max-width: 768px) {
  .testimonials-section {
    padding: 80px 20px;
  }

  .testi-card {
    min-width: calc(100% - 0px);
    opacity: 0.4;
    transform: scale(0.92);
  }

  .testi-card.testi-active {
    opacity: 1;
    transform: scale(1);
  }

  .testi-card-inner {
    padding: 28px 22px;
  }

  .testi-title {
    letter-spacing: -1px;
  }

  .testi-desc {
    font-size: 14px;
    margin-bottom: 20px;
  }

  .testi-quote {
    font-size: 14px;
  }

  .testi-watermark {
    font-size: 180px;
    top: 5%;
    left: 0;
  }

  .testi-controls {
    gap: 12px;
    margin-top: 35px;
    flex-wrap: wrap;
    justify-content: center;
  }

  .testi-nav-btn {
    width: 44px;
    height: 44px;
  }

  .testi-progress-bar {
    width: 80px;
  }

  .testi-aggregate {
    padding: 10px 18px;
  }

  .agg-score {
    font-size: 14px;
  }

  .agg-count {
    font-size: 12px;
  }

  .testi-track {
    gap: 16px;
  }

  .testi-orb-1 {
    width: 250px;
    height: 250px;
  }

  .testi-orb-2 {
    width: 200px;
    height: 200px;
  }
}

/* =============================================
   RESPONSIVE — SMALL MOBILE (420px)
   ============================================= */
@media (max-width: 420px) {
  .testimonials-section {
    padding: 60px 16px;
  }

  .testi-title {
    font-size: 24px;
  }

  .testi-desc {
    font-size: 13px;
  }

  .testi-card-inner {
    padding: 22px 18px;
  }

  .testi-quote {
    font-size: 13px;
    line-height: 1.7;
  }

  .testi-stars svg {
    width: 14px;
    height: 14px;
  }

  .testi-result-badge {
    padding: 5px 12px;
  }

  .testi-result-badge span:last-child {
    font-size: 11px;
  }

  .testi-author-info strong {
    font-size: 14px;
  }

  .testi-avatar {
    width: 42px;
    height: 42px;
    font-size: 12px;
  }

  .testi-watermark {
    font-size: 120px;
  }

  .testi-controls {
    gap: 10px;
  }

  .testi-dots {
    gap: 6px;
  }

  .testi-dot {
    width: 8px;
    height: 8px;
  }

  .testi-dot.active {
    width: 24px;
  }

  .testi-progress-bar {
    width: 60px;
  }

  .testi-nav-btn {
    width: 40px;
    height: 40px;
  }

  .testi-current {
    font-size: 17px;
  }

  .testi-service-tag {
    font-size: 10px;
  }
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-09863fa *//* =============================================
   EVOURIA — FAQ SECTION CSS
   ============================================= */

/* ========== SECTION BASE ========== */
.faq-section {
  padding: 130px 40px;
  background: #0a0e27;
  position: relative;
  overflow: hidden;
}

.faq-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 70%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(124, 58, 237, 0.25), transparent);
}

/* Background Orbs */
.faq-bg-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(100px);
  pointer-events: none;
  z-index: 0;
  will-change: transform;
}

.faq-orb-1 {
  width: 400px;
  height: 400px;
  background: rgba(124, 58, 237, 0.1);
  top: 10%;
  left: -10%;
  animation: faqOrbFloat1 12s ease-in-out infinite;
}

.faq-orb-2 {
  width: 300px;
  height: 300px;
  background: rgba(6, 214, 160, 0.06);
  bottom: 5%;
  right: -6%;
  animation: faqOrbFloat2 14s ease-in-out infinite;
}

@keyframes faqOrbFloat1 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(30px, -40px) scale(1.08); }
}

@keyframes faqOrbFloat2 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(-30px, 30px) scale(1.1); }
}

/* Dot Pattern */
.faq-bg-pattern {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(124, 58, 237, 0.04) 1px, transparent 1px);
  background-size: 30px 30px;
  mask-image: radial-gradient(ellipse 40% 50% at 30% 50%, black 10%, transparent 70%);
  -webkit-mask-image: radial-gradient(ellipse 40% 50% at 30% 50%, black 10%, transparent 70%);
  z-index: 0;
}

/* Horizontal Glow Line */
.faq-glow-line {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(124, 58, 237, 0.1), transparent);
  z-index: 0;
}

/* Container */
.faq-container {
  max-width: 1200px;
  margin: 0 auto;
  position: relative;
  z-index: 2;
}

/* ========== SCROLL REVEAL ========== */
.faq-reveal {
  opacity: 0;
  transform: translateY(45px);
  transition: all 0.9s cubic-bezier(0.16, 1, 0.3, 1);
  transition-delay: var(--faq-delay, 0s);
}

.faq-reveal.faq-revealed {
  opacity: 1;
  transform: translateY(0);
}

/* =============================================
   TWO COLUMN GRID
   ============================================= */
.faq-grid {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: 70px;
  align-items: flex-start;
}

/* =============================================
   LEFT COLUMN
   ============================================= */
.faq-left {
  position: sticky;
  top: 120px;
}

.faq-tag {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: rgba(124, 58, 237, 0.08);
  border: 1px solid rgba(124, 58, 237, 0.2);
  padding: 7px 20px;
  border-radius: 50px;
  font-size: 12px;
  font-weight: 600;
  color: #a78bfa;
  text-transform: uppercase;
  letter-spacing: 2.5px;
  margin-bottom: 22px;
}

.faq-tag-dot {
  width: 6px;
  height: 6px;
  background: #06d6a0;
  border-radius: 50%;
  animation: faqTagPulse 2s ease-in-out infinite;
}

@keyframes faqTagPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(6, 214, 160, 0.4); }
  50% { box-shadow: 0 0 0 5px rgba(6, 214, 160, 0); }
}

.faq-title {
  font-size: clamp(30px, 4vw, 44px);
  font-weight: 800;
  color: #ffffff;
  letter-spacing: -1.5px;
  margin-bottom: 18px;
  line-height: 1.2;
}

.faq-gradient-text {
  background: linear-gradient(135deg, #7c3aed, #a855f7, #06d6a0);
  background-size: 200% 200%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: faqGradShift 5s ease-in-out infinite;
}

@keyframes faqGradShift {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

.faq-desc {
  font-size: 15px;
  color: #7d82a6;
  line-height: 1.75;
  margin-bottom: 36px;
}

/* Contact Mini Card */
.faq-contact-card {
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 20px;
  padding: 28px 24px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-bottom: 30px;
  transition: all 0.4s ease;
}

.faq-contact-card:hover {
  border-color: rgba(124, 58, 237, 0.2);
  background: rgba(124, 58, 237, 0.04);
}

.faq-contact-icon-wrap {
  position: relative;
  width: 50px;
  height: 50px;
}

.faq-contact-icon {
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  background: rgba(124, 58, 237, 0.1);
  border-radius: 14px;
  position: relative;
  z-index: 1;
  animation: faqContactBounce 3s ease-in-out infinite;
}

@keyframes faqContactBounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-5px); }
}

.faq-contact-icon-glow {
  position: absolute;
  inset: -5px;
  background: rgba(124, 58, 237, 0.2);
  border-radius: 18px;
  filter: blur(12px);
  z-index: 0;
  opacity: 0.5;
}

.faq-contact-info strong {
  display: block;
  font-size: 15px;
  color: #ffffff;
  font-weight: 700;
  margin-bottom: 4px;
}

.faq-contact-info span {
  font-size: 13px;
  color: #6b6f8d;
  line-height: 1.5;
}

.faq-contact-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  border-radius: 50px;
  overflow: hidden;
  transition: all 0.4s ease;
  align-self: flex-start;
}

.faq-btn-bg {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, #7c3aed, #a855f7);
  z-index: 1;
  transition: all 0.4s ease;
}

.faq-contact-btn:hover .faq-btn-bg {
  background: linear-gradient(135deg, #a855f7, #06d6a0);
}

.faq-btn-text {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 28px;
  color: #ffffff;
  font-size: 14px;
  font-weight: 600;
}

.faq-contact-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 30px rgba(124, 58, 237, 0.4);
}

.faq-contact-btn:hover .faq-btn-text svg {
  transform: translateX(4px);
}

.faq-btn-text svg {
  transition: transform 0.3s ease;
}

/* Quick Stats */
.faq-quick-stats {
  display: flex;
  gap: 24px;
}

.faq-quick-stat {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 14px;
  flex: 1;
  transition: all 0.3s ease;
}

.faq-quick-stat:hover {
  border-color: rgba(124, 58, 237, 0.2);
  background: rgba(124, 58, 237, 0.04);
}

.faq-stat-ring {
  width: 42px;
  height: 42px;
  position: relative;
  flex-shrink: 0;
}

.faq-stat-ring svg {
  width: 100%;
  height: 100%;
}

.faq-ring-fill {
  filter: drop-shadow(0 0 4px rgba(124, 58, 237, 0.4));
}

.faq-ring-text {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
}

.faq-quick-stat strong {
  display: block;
  font-size: 15px;
  color: #ffffff;
  font-weight: 700;
}

.faq-quick-stat span {
  font-size: 11px;
  color: #5c6090;
}

/* =============================================
   RIGHT COLUMN — ACCORDION
   ============================================= */
.faq-accordion {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* ========== FAQ ITEM ========== */
.faq-item {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 18px;
  overflow: hidden;
  transition: all 0.4s ease;
  position: relative;
}

/* Mouse glow */
.faq-item::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 18px;
  background: radial-gradient(400px circle at var(--mouse-x, 50%) var(--mouse-y, 50%), rgba(124, 58, 237, 0.06), transparent 40%);
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
  z-index: 0;
}

.faq-item:hover::before {
  opacity: 1;
}

.faq-item:hover {
  border-color: rgba(124, 58, 237, 0.15);
  background: rgba(124, 58, 237, 0.02);
}

.faq-item.faq-open {
  border-color: rgba(124, 58, 237, 0.25);
  background: rgba(124, 58, 237, 0.04);
  box-shadow: 0 8px 30px rgba(124, 58, 237, 0.08);
}

/* ========== QUESTION BUTTON ========== */
.faq-question {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 22px 26px;
  background: none;
  border: none;
  cursor: pointer;
  position: relative;
  z-index: 1;
  transition: all 0.3s ease;
}

.faq-q-left {
  display: flex;
  align-items: center;
  gap: 16px;
  text-align: left;
}

.faq-q-number {
  font-size: 13px;
  font-weight: 800;
  color: #7c3aed;
  min-width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(124, 58, 237, 0.1);
  border-radius: 8px;
  flex-shrink: 0;
  transition: all 0.4s ease;
}

.faq-open .faq-q-number {
  background: #7c3aed;
  color: #ffffff;
  transform: scale(1.1);
  box-shadow: 0 4px 12px rgba(124, 58, 237, 0.3);
}

.faq-q-text {
  font-size: 15px;
  font-weight: 600;
  color: #c4c7e0;
  font-family: 'Poppins', sans-serif;
  line-height: 1.4;
  transition: color 0.3s ease;
}

.faq-open .faq-q-text {
  color: #ffffff;
}

.faq-item:hover .faq-q-text {
  color: #e0d4fc;
}

/* Plus/Minus Icon */
.faq-q-icon {
  width: 28px;
  height: 28px;
  position: relative;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.faq-icon-line {
  position: absolute;
  background: #7c3aed;
  border-radius: 2px;
  transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.faq-line-h {
  width: 16px;
  height: 2px;
}

.faq-line-v {
  width: 2px;
  height: 16px;
}

.faq-open .faq-line-v {
  transform: rotate(90deg);
  opacity: 0;
}

.faq-open .faq-line-h {
  background: #06d6a0;
  width: 18px;
}

.faq-open .faq-q-icon {
  transform: rotate(180deg);
}

/* ========== ANSWER ========== */
.faq-answer {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height 0.6s cubic-bezier(0.16, 1, 0.3, 1),
              opacity 0.4s ease;
}

.faq-answer-inner {
  padding: 0 26px 26px 70px;
  opacity: 0;
  transform: translateY(-10px);
}

@keyframes faqFadeSlideIn {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.faq-answer-inner p {
  font-size: 14px;
  line-height: 1.8;
  color: #8b8fad;
  margin-bottom: 18px;
}

.faq-answer-inner p strong {
  color: #c4c7e0;
}

/* Answer Tags */
.faq-answer-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.faq-answer-tags span {
  display: inline-block;
  padding: 4px 14px;
  background: rgba(124, 58, 237, 0.08);
  border: 1px solid rgba(124, 58, 237, 0.15);
  border-radius: 20px;
  font-size: 11px;
  font-weight: 600;
  color: #a78bfa;
  letter-spacing: 0.3px;
  transition: all 0.3s ease;
}

.faq-answer-tags span:hover {
  background: rgba(124, 58, 237, 0.15);
  border-color: rgba(124, 58, 237, 0.3);
  transform: translateY(-2px);
}

/* Answer Highlight Box */
.faq-answer-highlight {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 20px;
  background: rgba(124, 58, 237, 0.06);
  border: 1px solid rgba(124, 58, 237, 0.12);
  border-radius: 14px;
  transition: all 0.3s ease;
}

.faq-answer-highlight:hover {
  border-color: rgba(124, 58, 237, 0.25);
  background: rgba(124, 58, 237, 0.08);
}

.faq-highlight-icon {
  font-size: 22px;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(124, 58, 237, 0.1);
  border-radius: 10px;
  flex-shrink: 0;
}

.faq-answer-highlight strong {
  display: block;
  font-size: 13px;
  color: #c4c7e0;
  font-weight: 700;
  margin-bottom: 2px;
}

.faq-answer-highlight span {
  font-size: 12px;
  color: #6b6f8d;
  line-height: 1.5;
}

/* Answer CTA */
.faq-answer-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 26px;
  background: linear-gradient(135deg, #7c3aed, #a855f7);
  color: #ffffff;
  text-decoration: none;
  border-radius: 50px;
  font-size: 13px;
  font-weight: 600;
  transition: all 0.4s ease;
  box-shadow: 0 6px 20px rgba(124, 58, 237, 0.3);
  margin-top: 4px;
}

.faq-answer-cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 30px rgba(124, 58, 237, 0.5);
}

.faq-answer-cta:hover svg {
  transform: translateX(4px);
}

.faq-answer-cta svg {
  transition: transform 0.3s ease;
}

/* =============================================
   RESPONSIVE — TABLET (1024px)
   ============================================= */
@media (max-width: 1024px) {
  .faq-section {
    padding: 100px 30px;
  }

  .faq-grid {
    grid-template-columns: 1fr;
    gap: 50px;
  }

  .faq-left {
    position: static;
    text-align: center;
  }

  .faq-desc {
    max-width: 520px;
    margin: 0 auto 30px;
  }

  .faq-contact-card {
    align-items: center;
    text-align: center;
  }

  .faq-contact-btn {
    align-self: center;
  }

  .faq-quick-stats {
    justify-content: center;
  }
}

/* =============================================
   RESPONSIVE — MOBILE (768px)
   ============================================= */
@media (max-width: 768px) {
  .faq-section {
    padding: 80px 20px;
  }

  .faq-grid {
    gap: 40px;
  }

  .faq-title {
    letter-spacing: -1px;
  }

  .faq-desc {
    font-size: 14px;
  }

  .faq-question {
    padding: 18px 20px;
    gap: 12px;
  }

  .faq-q-text {
    font-size: 14px;
  }

  .faq-q-number {
    font-size: 11px;
    min-width: 24px;
    height: 24px;
  }

  .faq-answer-inner {
    padding: 0 20px 22px 20px;
  }

  .faq-answer-inner p {
    font-size: 13px;
  }

  .faq-quick-stats {
    flex-direction: column;
    gap: 14px;
  }

  .faq-contact-card {
    padding: 22px 20px;
  }

  .faq-accordion {
    gap: 12px;
  }

  .faq-orb-1 {
    width: 250px;
    height: 250px;
  }

  .faq-orb-2 {
    width: 200px;
    height: 200px;
  }

  .faq-answer-highlight {
    padding: 14px 16px;
    gap: 12px;
  }

  .faq-answer-tags span {
    font-size: 10px;
    padding: 3px 10px;
  }
}

/* =============================================
   RESPONSIVE — SMALL MOBILE (420px)
   ============================================= */
@media (max-width: 420px) {
  .faq-section {
    padding: 60px 16px;
  }

  .faq-title {
    font-size: 24px;
  }

  .faq-question {
    padding: 16px 16px;
  }

  .faq-q-left {
    gap: 10px;
  }

  .faq-q-text {
    font-size: 13px;
  }

  .faq-answer-inner {
    padding: 0 16px 18px 16px;
  }

  .faq-answer-inner p {
    font-size: 12px;
  }

  .faq-answer-highlight {
    flex-direction: column;
    text-align: center;
    gap: 10px;
  }

  .faq-answer-cta {
    width: 100%;
    justify-content: center;
    padding: 11px 20px;
    font-size: 12px;
  }

  .faq-contact-icon {
    width: 44px;
    height: 44px;
    font-size: 20px;
  }

  .faq-contact-info strong {
    font-size: 14px;
  }

  .faq-contact-info span {
    font-size: 12px;
  }

  .faq-quick-stat {
    padding: 12px 14px;
  }

  .faq-quick-stat strong {
    font-size: 14px;
  }
}/* End custom CSS */