body {
      font-family: Arial, sans-serif;
    }

    .hero {
      background: linear-gradient(135deg, #eef2ff, #f8f9fa);
      padding: 80px 0;
    }

    .section-padding {
      padding: 60px 0;
    }

    .step-box {
      border: 1px solid #dee2e6;
      border-radius: 12px;
      padding: 25px;
      text-align: center;
      height: 100%;
    }

    .cta-section {
      background: #f1f5ff;
      padding: 60px 0;
      text-align: center;
    }

    .btn-custom {
      padding: 12px 25px;
      font-size: 16px;
      border-radius: 8px;
    }
   .hero-text {
  font-size: 4.4rem;      
  line-height: 1.05;     
  max-width: 600px;       
}

.image-cluster {
  position: relative;
  width: 350px;
  height: 350px;
  margin: auto;
}

.img-box {
  position: absolute;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  overflow: hidden;
  transition: transform 0.4s ease;
}

.img-box img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

/* Positioning (circular layout) */
.img1 { top: 0; left: 40%; }
.img2 { top: 30%; left: 75%; }
.img3 { top: 80%; left: 70%; }
.img4 { top: 30%; left: 0; }
.img5 { top: 80%; left: 10%; }

/* Icon overlay */
.icon {
  position: absolute;
  top: 10px;              /* better placement */
  right: 10px;
  background: #fff;
  border-radius: 50%;
  padding: 6px;
  font-size: 14px;
  opacity: 0;
  transform: scale(0.6);
}

/* ========================= */
/* 🔁 ANIMATION KEYFRAMES */
/* ========================= */

@keyframes highlightCycle {
  0%   { transform: rotate(0deg) scale(1); }
  
  8%   { transform: rotate(6deg) scale(1.15); }   /* smoother entry */
  15%  { transform: rotate(10deg) scale(1.32); }  /* BIG zoom peak */
  22%  { transform: rotate(10deg) scale(1.32); }  /* hold */
  
  30%  { transform: rotate(0deg) scale(1); }
  100% { transform: rotate(0deg) scale(1); }
}

@keyframes iconCycle {
  0%   { opacity: 0; transform: scale(0.6); }

  8%   { opacity: 1; transform: scale(0.9); }
  15%  { opacity: 1; transform: scale(1.1); }  /* slight pop */
  22%  { opacity: 1; transform: scale(1); }

  30%  { opacity: 0; transform: scale(0.6); }
  100% { opacity: 0; transform: scale(0.6); }
}

/* ========================= */
/* 🎯 APPLY SEQUENCE */
/* Order: 1 → 3 → 4 → 2 → 5 */
/* ========================= */

/* Total cycle = 10s */

.img1 {
  animation: highlightCycle 10s infinite;
  animation-delay: 0s;
}
.img1 .icon {
  animation: iconCycle 10s infinite;
  animation-delay: 0s;
}

.img3 {
  animation: highlightCycle 10s infinite;
  animation-delay: 2s;
}
.img3 .icon {
  animation: iconCycle 10s infinite;
  animation-delay: 2s;
}

.img4 {
  animation: highlightCycle 10s infinite;
  animation-delay: 4s;
}
.img4 .icon {
  animation: iconCycle 10s infinite;
  animation-delay: 4s;
}

.img2 {
  animation: highlightCycle 10s infinite;
  animation-delay: 6s;
}
.img2 .icon {
  animation: iconCycle 10s infinite;
  animation-delay: 6s;
}

.img5 {
  animation: highlightCycle 10s infinite;
  animation-delay: 8s;
}
.img5 .icon {
  animation: iconCycle 10s infinite;
  animation-delay: 8s;
}
/* Normal links hover */
.footer-link {
  text-decoration: none;
  color: inherit;
  position: relative;
}

.footer-link:hover {
  text-decoration: underline;
  text-decoration-color: grey;
}

/* Disabled / placeholder links */
.footer-link.disabled-link:hover {
  text-decoration: none;
}

/* Red circle effect */
.footer-link.disabled-link::after {
  content: "";
  position: absolute;
  width: 8px;
  height: 8px;
  border: 2px solid red;
  border-radius: 50%;
  top: 50%;
  right: -14px;
  transform: translateY(-50%) scale(0);
  transition: 0.2s ease;
}

.footer-link.disabled-link:hover::after {
  transform: translateY(-50%) scale(1);
}

/* =========================
   SECTION CONTAINER
========================= */

.image-slider {
  position: relative;
  width: 100%;
  height: 420px;
  overflow: hidden;
  border-radius: 16px;
}

/* =========================
   SLIDE BASE (ONE SLIDE AT A TIME)
========================= */

.slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  animation: slideFade 21s infinite;
  overflow: hidden;
}

/* =========================
   CLEAN FADE TIMELINE
   (NO FLASHING, NO OVERLAP)
========================= */

@keyframes slideFade {
  0%   { opacity: 0; }
  3%   { opacity: 1; }
  14%  { opacity: 1; }
  17%  { opacity: 0; }
  100% { opacity: 0; }
}

/* =========================
   IMAGE LAYER (SMOOTH ZOOM ONLY)
========================= */

.slide img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;

  animation: zoomMotion 21s infinite;
  transform-origin: center;
  will-change: transform;
}

/* NO OPACITY HERE → prevents flicker */

@keyframes zoomMotion {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.08); }
  100% { transform: scale(1.12); }
}

/* =========================
   DARK OVERLAY (PREMIUM LOOK)
========================= */

.slide::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to right,
    rgba(0,0,0,0.55),
    rgba(0,0,0,0.25),
    rgba(0,0,0,0.1)
  );
  z-index: 1;
}

/* =========================
   TEXT BASE (ALWAYS CRISP)
========================= */

.text {
  position: absolute;
  z-index: 5;
  color: #fff;
  font-size: 30px;
  font-weight: 600;
  letter-spacing: 0.5px;

  opacity: 0;
  filter: none !important;
}

/* =========================
   TEXT ANIMATION
========================= */

@keyframes textFade {
  0% {
    opacity: 0;
    transform: translateY(25px);
  }

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

  70% {
    opacity: 1;
  }

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

  100% {
    opacity: 0;
  }
}

/* =========================
   TEXT POSITIONS
========================= */

.left {
  left: 8%;
  top: 50%;
  transform: translateY(-50%);
}

.right {
  right: 8%;
  top: 50%;
  transform: translateY(-50%);
}

.top {
  top: 15%;
  left: 50%;
  transform: translateX(-50%);
}

.bottom {
  bottom: 15%;
  left: 50%;
  transform: translateX(-50%);
}

.center {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* =========================
   SLIDE TIMING (7 SLIDES)
========================= */

.s1 { animation-delay: 0s; }
.s2 { animation-delay: 3s; }
.s3 { animation-delay: 6s; }
.s4 { animation-delay: 9s; }
.s5 { animation-delay: 12s; }
.s6 { animation-delay: 15s; }
.s7 { animation-delay: 18s; }

/* =========================
   TEXT SYNC (ONLY WHERE USED)
========================= */

.s1 .text { animation: textFade 21s infinite; animation-delay: 0s; }
.s2 .text { animation: textFade 21s infinite; animation-delay: 3s; }
.s4 .text { animation: textFade 21s infinite; animation-delay: 9s; }
.s6 .text { animation: textFade 21s infinite; animation-delay: 15s; }
.s7 .text { animation: textFade 21s infinite; animation-delay: 18s; }

/* =========================
   PAUSE ON HOVER
========================= */

.image-slider:hover .slide,
.image-slider:hover .slide img,
.image-slider:hover .text {
  animation-play-state: paused;
}