/******************** HOME STEPS *********************/
/* Base layout */
.homesteps-wrapper {
  position: relative;
  width: 100%;
  margin: 0 auto;
  /*padding: 4rem 0;*/
}

.homesteps-loader {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  pointer-events: none;
  z-index: 30;
}
/*
.homesteps-loader img {
  margin-top: 1rem;
  width: 60px;
  height: auto;
}
*/
/* Main carousel container */
.homesteps-carousel {
  position: relative;
  margin: 0 auto;
  width: 100%;
  max-width: 1100px;
  height: 74vh;
  min-height: 620px;
  border-radius: 24px;
  overflow: hidden;
  opacity: 0; /* revealed by GSAP after scroll */
}

/* Background GIF */
.homesteps-bg {
  position: absolute;
  inset: 0;
  background-image: url("/images/steps-bg.gif"); /* <-- replace with your animated GIF */
  background-size: cover;
  background-position: center;
  filter: blur(0.5px);
  z-index: 1;
}

/* Steps container */
.homesteps-steps {
  position: relative;
  width: 100%;
  height: 100%;
  z-index: 10; /*****was 5 ******/
}

/* Each step */
.homesteps-step {
  position: absolute;
  inset: 0;
  padding: 4vh 5vw;
  opacity: 0;
  pointer-events: none;
}

.homesteps-step--active {
  opacity: 1 !important;
  pointer-events: auto;
}

/* Generic layer styling */
.homesteps-layer {
  position: absolute;
  opacity: 0;
	z-index: 15; /* was not there */
}

.homesteps-layer img {
  display: block;
  max-width: 100%;
  height: auto;
}

/* Layer positions based on your description */
/* 1 & 2: 678x519px, top left */
.homesteps-layer1,
.homesteps-layer2 {
  top: 0;
  left: 0;
  width: min(60%, 678px);
}

/* 3: 216x223px, ~80px left of 1/2 and 35px from top.
   80px is ~8% of a 1000px container → -8% left. */
.homesteps-layer3 {
  top: 5%;
  right: 130px;
  left: auto;
  width: 180px; /* slightly smaller for better placement */
  z-index: 25;  /* above all layers */
}

/* 4: title, overlapping layers 1&2 vertically by 40px.
   400px is ~40% of a 1000px container → ~40% left. */
.homesteps-layer4 {
  top: 64%;   /* moves title BELOW the main image */
  left: 42%;
  right: 2%;
  text-align: left;
	
}

.homesteps-layer4 h2 {
  font-size: clamp(1.6rem, 1.5vw + 1rem, 2.4rem);
  font-weight: 700;
  line-height: 1.2;
  color: #22215a;
	text-shadow: 2px 2px 4px white;
}

/* 5: description paragraph just below media.
   130px ≈ 13% of 1000px → 13% left. */
.homesteps-layer5 {
  top: 72%; 
  left: 8%;
  right: 8%;
}

.homesteps-layer5 p {
  font-size: clamp(1rem, 0.7vw + 0.85rem, 1.1rem);
  line-height: 1.5;
  color: #2a2a3f;
	text-align: left;
}

/* Pagination */
.homesteps-pagination {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 0.75rem;
  z-index: 10;
	
}

.homesteps-dot {
  position: relative;
  width: 35px;     /* increased size */
  height: 35px;
  padding: 0;      /* remove padding to ensure perfect centering */
  border-radius: 50%;
  border: none;
  background: transparent;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.homesteps-dot-core {
  width: 12px;     /* inner dot size */
  height: 12px;
  background: #c5c5c5;
  border-radius: 50%;
  z-index: 5;
}

.homesteps-dot--active .homesteps-dot-core {
  background: #6c6c6c;
}

/* Centered Ring */
.homesteps-dot-ring {
  position: absolute;
  width: 100%;
  height: 100%;
  transform: rotate(-90deg); /* for ring animation */
}

.homesteps-dot-ring-progress,
.homesteps-dot-ring-bg {
  fill: none;
  stroke-width: 6;
}

.homesteps-dot-ring-bg {
  stroke: #e0e0e0;
}

/* Perfectly optimized animation stroke */
.homesteps-dot-ring-progress {
  stroke: #6c6c6c;
  stroke-linecap: round;
  stroke-dasharray: 100.5;
  stroke-dashoffset: 100.5; /* fully hidden */
  transform-origin: center;
  transform: rotate(-90deg);
}


/* Responsive adjustments */
@media (max-width: 768px) {

  .homesteps-carousel {
    height: 82vh;
    min-height: 540px;
  }

  /* Layers 1 & 2 scale down */
  .homesteps-layer1,
  .homesteps-layer2 {
    width: 85%;
  }

  /* Layer 3 stays on RIGHT, scales with container */
  .homesteps-layer3 {
    top: 6%;
    right: 20px;
    width: 150px; /* scaled down from 180px */
    left: auto;
  }

  /* Title moves closer to image, reduces size */
  .homesteps-layer4 {
    top: 60%;
    left: 6%;
    right: 6%;
  }

  .homesteps-layer4 h2 {
    font-size: clamp(1.4rem, 1.2vw + 0.8rem, 1.9rem);
  }

  /* Description shifts up slightly and tightens spacing */
  .homesteps-layer5 {
    top: 68%;
    left: 6%;
    right: 6%;
  }

  .homesteps-layer5 p {
    font-size: clamp(0.95rem, 0.8vw + 0.6rem, 1.05rem);
    line-height: 1.45;
  }

  /* Pagination spacing */
  .homesteps-pagination {
    bottom: 0.9rem;
  }
}

@media (max-width: 600px) {

  .homesteps-carousel {
    height: 88vh;
    min-height: 560px;
  }

  .homesteps-layer1,
  .homesteps-layer2 {
    width: 92%;
  }

  /* Keep layer 3 on RIGHT even on narrow devices */
  .homesteps-layer3 {
    top: 7%;
    right: 12px;
    width: 120px;
    left: auto;
  }

  .homesteps-layer4 {
    top: 54%;
    left: 5%;
    right: 5%;
  }

  .homesteps-layer4 h2 {
    font-size: clamp(1.2rem, 3vw, 1.6rem);
  }

  .homesteps-layer5 {
    top: 66%;
    left: 5%;
    right: 5%;
  }

  .homesteps-layer5 p {
    font-size: clamp(0.9rem, 2.5vw, 1rem);
    line-height: 1.42;
  }

  .homesteps-pagination {
    bottom: 0.6rem;
  }
}

@media (max-width: 480px) {

  .homesteps-carousel {
    height: 80vh;
    min-height: 540px;
  }

  .homesteps-layer1,
  .homesteps-layer2 {
    width: 95%;
  }

  .homesteps-layer3 {
    top: 8%;
    right: 10px;
    width: 95px;
  }

  /* Title below image but tighter */
  .homesteps-layer4 {
    top: 49%;
    left: 4%;
    right: 4%;
  }

  .homesteps-layer4 h2 {
    font-size: clamp(1.1rem, 4vw, 1.4rem);
  }

  .homesteps-layer5 {
    top: 57%;
    left: 4%;
    right: 4%;
  }

  .homesteps-layer5 p {
    font-size: clamp(0.85rem, 3vw, 0.95rem);
    line-height: 1.4;
  }

  .homesteps-pagination {
    bottom: 1rem;
  }
}