body {
  font-family: "Cairo", sans-serif;
  scroll-behavior: smooth;
  overflow-x: hidden;
}

/* Background Canvas */
#bg-canvas {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  background: var(--bg-dark);
}

/* Custom Cursor */
.cursor-follower {
  width: 20px;
  height: 20px;
  background: var(--primary-color);
  border-radius: 50%;
  position: fixed;
  pointer-events: none;
  z-index: 9999;
  mix-blend-mode: difference;
  transition: transform 0.1s ease;
}

.text-glow {
  text-shadow: 0 0 20px rgba(206, 246, 25, 0.4);
}

.bg-gradient-mesh {
  position: relative;
}

.glass {
  background: rgba(255, 255, 255, 0.03);
  -webkit-backdrop-filter: blur(12px);
          backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

@keyframes blobFloatSlow {
  0% {
    transform: translate(0, 0) scale(1);
  }
  50% {
    transform: translate(50px, 30px) scale(1.15);
  }
  100% {
    transform: translate(0, 0) scale(1);
  }
}
@keyframes blobFloatSlower {
  0% {
    transform: translate(0, 0) scale(1.2);
  }
  50% {
    transform: translate(-50px, -30px) scale(1);
  }
  100% {
    transform: translate(0, 0) scale(1.2);
  }
}
.animate-blob-slow {
  animation: blobFloatSlow 18s ease-in-out infinite;
}

.animate-blob-slower {
  animation: blobFloatSlower 22s ease-in-out infinite;
}

.nav-link.active span:first-child {
  color: #cef619;
}

.nav-link.active .nav-underline {
  display: block;
}

.service-section {
  scroll-margin-top: 7rem;
}

.sidebar-link {
  display: flex;
  width: 100%;
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.sidebar-link:hover {
  padding-right: 2.5rem;
  background: rgba(255, 255, 255, 0.03);
}

/* ==========================================
   Sales Growth Floating Card
   ========================================== */
.sales-growth-card {
  position: absolute;
  z-index: 40;
  background: linear-gradient(135deg, rgba(17, 24, 39, 0.75), rgba(8, 12, 20, 0.85));
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  border: 1px solid rgba(206, 246, 25, 0.15);
  border-radius: 20px;
  padding: 16px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5), 0 0 20px rgba(206, 246, 25, 0.05);
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  animation: floatSalesCard 6s ease-in-out infinite;
  
  /* Desktop layout placement */
  left: 8%;
  top: 28%;
  width: 320px;
  direction: rtl;
}

/* Hover scale, glow intensity & animation freeze */
.sales-growth-card:hover {
  transform: scale(1.04);
  animation-play-state: paused;
  border-color: rgba(206, 246, 25, 0.45);
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.6), 0 0 30px rgba(206, 246, 25, 0.25);
}

.sales-growth-card .card-header {
  display: flex;
  align-items: center;
  gap: 12px;
  justify-content: space-between;
  width: 100%;
}

.sales-growth-card .icon-container {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: rgba(206, 246, 25, 0.12);
  color: #CEF619;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  position: relative;
}

/* Infinite Pulse Ring around the Icon */
.sales-growth-card .pulse-ring {
  position: absolute;
  inset: -5px;
  border: 1.5px solid rgba(206, 246, 25, 0.4);
  border-radius: 50%;
  pointer-events: none;
  animation: pulseRing 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

.sales-growth-card .card-details {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  text-align: right;
}

.sales-growth-card .card-title {
  font-size: 0.95rem;
  font-weight: 800;
  color: #ffffff;
  margin: 0;
  font-family: 'Cairo', sans-serif;
}

.sales-growth-card .card-desc {
  font-size: 0.72rem;
  color: #9ca3af;
  margin: 0;
  font-family: 'Cairo', sans-serif;
}

.sales-growth-card .sales-badge {
  background: rgba(206, 246, 25, 0.2);
  color: #CEF619;
  border: 1px solid rgba(206, 246, 25, 0.3);
  padding: 4px 10px;
  border-radius: 12px;
  font-weight: 800;
  font-size: 0.78rem;
  font-family: 'Cairo', sans-serif;
  letter-spacing: 0.5px;
  box-shadow: 0 0 10px rgba(206, 246, 25, 0.1);
}

/* Chart Container & Sparkline */
.sales-growth-card .card-chart {
  position: relative;
  width: 100%;
  height: 80px;
  overflow: visible;
  margin-top: 4px;
}

.sales-growth-card .sparkline-svg {
  width: 100%;
  height: 100%;
  overflow: visible;
}

.sales-growth-card .chart-path {
  stroke-dasharray: 320;
  stroke-dashoffset: 320;
  animation: drawPath 4s ease-in-out infinite;
}

.sales-growth-card .chart-area {
  animation: fadeInArea 4s ease-in-out infinite;
}

/* Pulsing peak dot at top-right end of curve */
.sales-growth-card .chart-dot {
  position: absolute;
  left: 95.45%; /* Coordinates (210/220 * 100) */
  top: 16.67%;  /* Coordinates (15/90 * 100) */
  transform: translate(-50%, -50%);
  width: 7px;
  height: 7px;
  background-color: #CEF619;
  border-radius: 50%;
  box-shadow: 0 0 8px #CEF619, 0 0 15px #CEF619;
  z-index: 5;
}

.sales-growth-card .chart-dot::after {
  content: '';
  position: absolute;
  inset: -6px;
  border: 1.5px solid #CEF619;
  border-radius: 50%;
  pointer-events: none;
  animation: chartDotPulse 1.5s ease-out infinite;
}

/* Keyframe Animations */
@keyframes floatSalesCard {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
}

@keyframes pulseRing {
  0% {
    transform: scale(0.85);
    opacity: 1;
  }
  100% {
    transform: scale(1.25);
    opacity: 0;
  }
}

@keyframes chartDotPulse {
  0% {
    transform: scale(0.5);
    opacity: 1;
  }
  100% {
    transform: scale(2.2);
    opacity: 0;
  }
}

@keyframes drawPath {
  0% {
    stroke-dashoffset: 320;
  }
  65% {
    stroke-dashoffset: 0;
  }
  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes fadeInArea {
  0%, 5% {
    opacity: 0;
  }
  65%, 100% {
    opacity: 1;
  }
}

/* =========================================
   Responsive Breakpoints — Sales Card
   =========================================

   STRATEGY:
   - ≥ 1400px  → Left-side float (original position)
   - 1200–1399px → Slight inward nudge (still left side)
   - ≤ 1199px  → Move card to BOTTOM-CENTER of hero.
                 The hero text sits in the top part and
                 the stats grid at the very bottom, so we
                 anchor the card between the CTA button
                 and the stats grid using `bottom` offset.
   - ≤ 575px   → Even smaller, still bottom-centered
   ========================================= */

@media (max-width: 1399px) {
  .sales-growth-card {
    left: 2%;
    top: 30%;
    width: 290px;
    padding: 14px;
  }
}

/* ---- Tablet landscape + small desktop (1200px – 1199px) ---- */
@media (max-width: 1199px) {
  .sales-growth-card {
    /* Detach from top, center horizontally, anchor above stats grid */
    top: auto;
    bottom: 230px;         /* above the stats grid (4 cards row) */
    left: 50%;
    transform: translateX(-50%);
    width: 280px;
    padding: 14px;
    /* Override float animation so translateX centering is preserved */
    animation: floatSalesCardCentered 6s ease-in-out infinite;
  }
}

/* ---- Tablet portrait (768px – 991px) ---- */
@media (max-width: 991px) {
  .sales-growth-card {
    bottom: 200px;
    left: 50%;
    transform: translateX(-50%);
    width: 260px;
    padding: 12px;
  }
  .sales-growth-card .card-title  { font-size: 0.88rem; }
  .sales-growth-card .card-desc   { font-size: 0.68rem; }
  .sales-growth-card .sales-badge { font-size: 0.74rem; padding: 3px 8px; }
  .sales-growth-card .card-chart  { height: 65px; }
}

/* ---- Large mobile (576px – 767px) ---- */
@media (max-width: 767px) {
  .sales-growth-card {
    bottom: 170px;
    width: 240px;
    padding: 11px;
  }
  .sales-growth-card .card-chart  { height: 58px; }
}

/* ---- Small mobile (≤ 575px) ---- */
@media (max-width: 575px) {
  .sales-growth-card {
    bottom: 150px;
    width: 210px;
    padding: 10px;
    border-radius: 16px;
  }
  .sales-growth-card .card-title  { font-size: 0.82rem; }
  .sales-growth-card .card-desc   { font-size: 0.63rem; }
  .sales-growth-card .sales-badge { font-size: 0.7rem; padding: 2px 7px; }
  .sales-growth-card .icon-container { width: 36px; height: 36px; font-size: 0.9rem; }
  .sales-growth-card .card-chart  { height: 52px; }
}

/* Centered float animation — uses margin offsets so translateX(-50%) isn't disturbed */
@keyframes floatSalesCardCentered {
  0%,  100% { transform: translateX(-50%) translateY(0);    }
  50%        { transform: translateX(-50%) translateY(-10px); }
}
/*# sourceMappingURL=styles.css.map */