:root {
  --card-width: 130px;
}

/* NARROW CARD */
.display-card { 
  cursor: pointer;
  width: var(--card-width) ;   /* mobile-friendly width */
  height: 230px;  /* adjust slightly for proportion */
  box-sizing: border-box;

  position: relative;
  padding: 50px 18px 30px;
  border-radius: 14px;
  border-color: white ;
  text-align: center;
  color: #fff;

  /* deep blue gradient */
  background: linear-gradient(
    180deg,
    #0b2a3d 0%,
    #0a2233 60%,
    #091e2d 100%
  );

  /* subtle green tint glow */
  box-shadow:
    inset 0 0 0 1px rgba(107, 210, 107, 0.15),
    0 10px 30px rgba(0,0,0,0.6);

  overflow: visible;
}

.display-card:hover {
  /*transform: translateY(-6px);*/

  box-shadow:
    0 10px 25px rgba(0,0,0,0.5),
    0 0 15px rgba(124,255,107,0.3),
    0 0 30px rgba(124,255,107,0.15);

  border: 3px solid rgba(124,255,107,0.6);
}

.display-card::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 6px;

  background: var(--card-color);

  clip-path: polygon(
    0% 0%,
    100% 0%,
    96% 100%,
    4% 100%
  );
}


.display-card:not(:last-child)::before {
  content: "";
  position: absolute;

  right: 0;
  top: 58px;
  transform: translateX(70%);

  width: 30px;
  height: 25px;

  /* gradient: dark tail → main color */
  background: linear-gradient(
    to right,
    color-mix(in srgb, var(--card-color) 40%, black) 0%,
    color-mix(in srgb, var(--card-color) 60%, black) 15%,
    var(--card-color) 40%,
    var(--card-color) 100%
  );

  /* sharper arrow head */
  clip-path: polygon(
    0% 30%,
    60% 30%,
    55% 0%,
    100% 50%,
    55% 100%,
    60% 70%,
    0% 70%
  );

  /* layered shadow (core → fog) */
  box-shadow:
    -2px 4px 6px rgba(0,0,0,0.9),   /* core */
    -4px 8px 14px rgba(0,0,0,0.6),  /* spread */
    -6px 12px 30px rgba(0,0,0,0.35),/* fog */
    inset 0 1px 1px rgba(255,255,255,0.2);

  z-index: 3;
  pointer-events: none; /* prevents hover issues */
}

.display-card-icon-circle {
  width: 65px;
  height: 65px;
  border-radius: 50%;

  /* bottom-left (dark) → top-right (light) */
 background: linear-gradient(
    to top right,
    color-mix(in srgb, var(--card-color) 70%, black) 0%,   /* darker */
    color-mix(in srgb, var(--card-color) 85%, black) 40%,  /* mid */
    var(--card-color) 100%                                 /* main */
  );

  display: flex;
  justify-content: center;
  align-items: center;

  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -50%);

  color: #ffffff;
  font-size: 32px;

  box-shadow: 0 6px 12px rgba(0,0,0,0.25);
}

/* Number with gradient underline */
.display-card-number {
  font-size: 20px;
  font-weight: bold;
  color: var(--card-color);
  display: inline-block;
  margin-bottom: 10px;
  position: relative;

}

.display-card-number::after {
  content: "";
  display: block;
  height: 3px;
  width: 60px;
  margin: 8px auto 0;
  border-radius: 50px;

  background: linear-gradient(
    90deg,
    rgba(107, 210, 107, 0) 0%,     /* transparent start */
    rgba(107, 210, 107, 0.4) 25%,  /* soft fade-in */
    var(--card-color) 50%,                   /* bright center */
    rgba(107, 210, 107, 0.4) 75%,  /* soft fade-out */
    rgba(107, 210, 107, 0) 100%    /* transparent end */
  );

  box-shadow: 
    0 0 6px rgba(107, 210, 107, 0.6),
    0 0 12px rgba(107, 210, 107, 0.3);
}


/* Heading same color as number */
.display-card h3 {
  font-size: 13px;
  margin-bottom: 12px;
  line-height: 1.4;
  color: var(--card-color);
}

.display-card p {
  font-size: 11px;
  color: #cfd8e3;
}

.display-card-container {
  display: grid;
  grid-template-columns: repeat(5, var(--card-width));

  gap: 70px 10px;

  justify-content: center;   /* 🔥 KEY FIX */
  align-content: center;
  width: 100%;                     /* full width */

  max-width: var(--container-width); 
  margin: 0 auto;

  padding: 50px 0px 0;            /* add side padding */
}



/* SECTION WRAPPER */
.lifecycle-section {
  /*border: 2px solid white;*/

  max-width: var(--container-width);   /* 🔥 match global width */
  margin: 20px auto;                  /* 🔥 CENTER IT */

  padding: 10px 20px 20px;            /* balanced spacing */
  text-align: center;
}

/* TITLE */
.lifecycle-title {
  font-size: 22px;
  font-weight: 700;
  color: #9be15d; /* green glow */
  margin-top: 5px;
  margin-bottom: 1px;
}

/* TAGLINE CONTAINER */
.lifecycle-tagline {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 15px;
  margin-bottom: 5px;
}

/* TEXT */
.lifecycle-tagline p {
  color: #cfd8e3;
  font-size: 16px;
  white-space: nowrap;
}

/* LINES */
.lifecycle-tagline .line {
  height: 2px;
  width: 120px;

  background: linear-gradient(
    to right,
    transparent,
    #4fc3f7,
    transparent
  );
  position: relative;
}

/* OPTIONAL DOT AT END */
.lifecycle-tagline .line::after {
  content: "";
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);

  width: 6px;
  height: 6px;
  background: #4fc3f7;
  border-radius: 50%;
}



.lifecycle-footer {
  margin-top: 40px;
  padding: 18px 30px;

  display: flex;
  align-items: center;
  justify-content: center;
  gap: 15px;

  max-width: 900px;
  margin-left: auto;
  margin-right: auto;

  border-radius: 40px;

  background: rgba(255, 255, 255, 0.03);
  backdrop-filter: blur(10px);

  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.08),
    0 0 25px rgba(0, 180, 255, 0.2);
}

.footer-icon {
  font-size: 22px;
  color: #7fdfff;
}

.footer-text {
  color: #d6f3ff;
  font-size: 16px;
  font-weight: 500;
}


.header-container,
.hero-container,
.about-container {
  max-width: var(--container-width);
  margin: 0 auto;
  padding: 0 30px;
}




@media (max-width: 768px) {

  .display-card-container {
    grid-template-columns: 1fr !important;   /* 🔥 force override */
    gap: 60px 0;
    justify-content: center;
  }

  .display-card {
    width: 100%;
    max-width: 320px;
    margin: 0 auto;
  }

  /* arrows vertical */
  .display-card:not(:last-child)::before {
    top: auto;
    bottom: -35px;
    left: 50%;
    right: auto;

    transform: translateX(-50%) rotate(90deg);
  }

}