/* Parent equal height wrapper */
.visa-wrapper {
  display: flex;
  align-items: stretch; /* SAME HEIGHT */
  gap: 0;
  border-radius: 12px;
  overflow: hidden;
}
.visa_title {
  font-size: 2.25rem;
  color: var(--visa-blue);
  font-weight: 800;
  letter-spacing: -0.5px;
}
.visa-subtitle {
  color: #6b7280;
  font-size: 1rem;
  margin-bottom: 18px;
}
.visa-icon-sub {
  color: #6b7280;
  font-size: 1rem;
  margin-bottom: 18px;
}
/* Image column */
.visa-image {
  flex: 1;
  min-width: 40%;
  max-width: 50%;
  display: flex;
}

.visa-image img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* Auto crop, perfect alignment */
  display: block;
}

/* Form column */
.visa-form {
  flex: 1;
  min-width: 50%;
  background: #eaffe7;
  display: flex;
  align-items: stretch;
}

/* Let the inner form fill height smoothly */
.visa-form > div {
  height: 100%;
}

/* Responsive stacking */
@media (max-width: 992px) {
  .visa-wrapper {
    flex-direction: column;
  }

  .visa-image,
  .visa-form {
    max-width: 100%;
    min-width: 100%;
    height: auto;
  }

  .visa-image img {
    height: auto;
  }
}

:root {
  --visa-red: #ff2a12;
  --visa-green: #5fb324;
  --visa-blue: #0349fc;
  --visa-yellow: #f7c92f;
  --visa-cyan: #0982d9;

  --visa-bg-blue: rgba(
    0,
    73,
    255,
    0.035
  ); /* subtle page background from brand-blue */
  --visa-card-radius: 12px;
}

/* Section background: lighter shade of brand-blue */
.visa-hw-section {
  background: var(--visa-bg-blue);
  padding-top: 56px;
  padding-bottom: 56px;
}

/* Title + subtitle spacing */
.visa-hw-title {
  font-size: 2.25rem;
  color: var(--visa-blue);
  font-weight: 800;
  letter-spacing: -0.5px;
}
.visa-hw-subtitle {
  color: #6b7280;
  font-size: 1rem;
  margin-bottom: 18px; /* requested padding under subhead */
}

/* TIMELINE layout */
.visa-hw-timeline {
  display: flex;
  gap: 28px;
  justify-content: space-between;
  align-items: stretch;
  margin-top: 32px;
  position: relative;
}
.visa-hw-connector {
  position: absolute;
  left: 6%;
  right: 6%;
  top: 50%;
  height: 6px;
  transform: translateY(-50%);
  background: linear-gradient(
    90deg,
    rgba(0, 73, 255, 0.16),
    rgba(95, 179, 36, 0.12),
    rgba(255, 42, 18, 0.12)
  );
  border-radius: 6px;
  z-index: 0;
}

/* ITEM */
.visa-hw-item {
  position: relative;
  z-index: 1;
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  min-height: 220px;
}

/* BADGE (circle) + SVG icon */
.visa-hw-badge {
  width: 65px;
  height: 65px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: 800;
  font-size: 22px;
  box-shadow: 0 12px 30px rgba(3, 7, 18, 0.08);
  margin-bottom: 18px;
  flex-shrink: 0;
}

/* Set icon color inside badge to white and svg sizing */
.visa-hw-icon {
  color: #fff;
  width: 34px;
  height: 34px;
  display: block;
}

/* Gradient badge colors (unchanged feel) */
.visa-hw-badge--1 {
  background: linear-gradient(135deg, var(--visa-red), #ff6b4f);
}
.visa-hw-badge--2 {
  background: linear-gradient(135deg, var(--visa-green), #85e859);
}
.visa-hw-badge--3 {
  background: linear-gradient(135deg, var(--visa-blue), #2c6aff);
}

/* CARD body now uses subtle brand-tinted background (lighter shade of badge color) */
.visa-hw-item-body {
  width: 100%;
  max-width: 360px;
  border-radius: var(--visa-card-radius);
  padding: 22px;
  box-shadow: 0 10px 28px rgba(3, 7, 18, 0.06);
  border: 1px solid rgba(3, 7, 18, 0.04);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
  background: #fff; /* default fallback */
}

/* Modern browsers support :has() — use as primary */
.visa-hw-item:has(.visa-hw-badge--1) .visa-hw-item-body {
  background: linear-gradient(
    180deg,
    rgba(255, 42, 18, 0.06),
    rgba(255, 42, 18, 0.03)
  );
  color: #09102a;
  border-color: rgba(255, 42, 18, 0.868);
  box-shadow: 0 8px 22px rgba(255, 42, 18, 0.12),
    0 4px 10px rgba(255, 42, 18, 0.08);
}
.visa-hw-item:has(.visa-hw-badge--2) .visa-hw-item-body {
  background: linear-gradient(
    180deg,
    rgba(95, 179, 36, 0.06),
    rgba(95, 179, 36, 0.03)
  );
  color: #09102a;
  border-color: rgba(96, 179, 36, 0.818);
  box-shadow: 0 8px 22px rgba(95, 179, 36, 0.12),
    0 4px 10px rgba(95, 179, 36, 0.08);
}
.visa-hw-item:has(.visa-hw-badge--3) .visa-hw-item-body {
  background: linear-gradient(
    180deg,
    rgba(0, 73, 255, 0.06),
    rgba(0, 73, 255, 0.03)
  );
  color: #07103a;
  border-color: rgba(0, 72, 255, 0.855);
  box-shadow: 0 8px 22px rgba(0, 73, 255, 0.12),
    0 4px 10px rgba(0, 73, 255, 0.08);
}

/* Hover lift */
.visa-hw-item-body:hover {
  transform: translateY(-6px);
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.1), 0 6px 12px rgba(0, 0, 0, 0.06);
}

/* Titles and descriptions (ensure contrast against tinted background) */
.visa-hw-item-title {
  font-size: 1.05rem;
  font-weight: 700;
  margin-bottom: 8px;
  color: inherit;
}
.visa-hw-item-desc {
  color: rgba(7, 16, 58, 0.8);
  font-size: 0.97rem;
  line-height: 1.6;
  margin: 0;
}

/* Badge sits visually above the card */
.visa-hw-item .visa-hw-badge {
  margin-top: -42px;
}

/* Responsive: stack on small screens */
@media (max-width: 991.98px) {
  .visa-hw-timeline {
    flex-direction: column;
    gap: 18px;
    align-items: center;
  }
  .visa-hw-connector {
    display: none;
  }

  .visa-hw-item {
    width: 100%;
    max-width: 760px;
    padding-left: 12px;
    align-items: center;
    margin-bottom: -19px !important;
  }

  .visa-hw-item-body {
    display: flex;
    gap: 14px;
    align-items: center;
    padding: 18px;
    max-width: 100%;
  }
  .visa-hw-badge {
    width: 64px;
    height: 64px;
    margin-top: 0;
    margin-bottom: 20px;
  }
  .visa-hw-item-body .visa-hw-item-title {
    text-align: left;
  }
  .visa-hw-item-body .visa-hw-item-desc {
    text-align: left;
    margin: 0;
  }
}

/* small screens */
@media (max-width: 575.98px) {
  .visa-hw-item-body {
    padding: 14px;
  }
  .visa-hw-item-title {
    font-size: 1rem;
  }
  .visa-hw-item-desc {
    font-size: 0.92rem;
  }
}

/* Accessibility focus */
.visa-hw-item-body:focus-within {
  outline: 3px solid rgba(0, 73, 255, 0.12);
  outline-offset: 6px;
}