/* /var/www/relyn/static_src/css/choose_2.css */

.choose2-section {
  width: 100%;
  display: flex;
  justify-content: center;
  padding: 0 24px 80px;
  color: #FFFFFF;
}

.choose2-shell {
  position: relative;
  width: 100%;
  max-width: 1919px;
  min-height: 1223px;

  display: flex;
  flex-direction: column;
  align-items: center;

  padding-top: 77px;
  box-sizing: border-box;

  --blur-top: 58%;
  --blur-h: 780px;

  /* ✅ UPDATED: wider blur so it reaches closer to section edges */
  --blur-w: 2200px;
}

/* Background blur layer */
.choose2-blur-layer {
  position: absolute;
  left: 50%;
  top: var(--blur-top);
  transform: translate(-50%, -50%);

  /* ✅ UPDATED: use wider blur width */
  width: var(--blur-w);
  max-width: 100%;
  height: var(--blur-h);

  background:
    radial-gradient(circle at 24% 40%, rgba(99, 62, 178, 0.55), transparent 62%),
    radial-gradient(circle at 72% 44%, rgba(166, 151, 224, 0.30), transparent 66%),
    radial-gradient(circle at 50% 76%, rgba(99, 62, 178, 0.38), transparent 62%);

  filter: blur(100px);
  opacity: 0.95;
  pointer-events: none;
  z-index: 0;
}

/* Header */
.choose2-header {
  position: relative;
  z-index: 1;
  text-align: center;
  max-width: 1100px;
}

.choose2-kicker {
  margin: 0;

  font-family: "Urbanist", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 20px;
  font-weight: 700;
  color: #FFFFFF;

  text-transform: uppercase;
  letter-spacing: 0.18em;
}

.choose2-title {
  margin: 22px 0 0;

  font-family: "Urbanist", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 48px;
  font-weight: 600;
  color: #FFFFFF;
}

/* Compare wrap */
.choose2-compare-wrap {
  position: relative;
  z-index: 1;
  margin-top: 141px;
  width: 100%;
  display: flex;
  justify-content: center;
}

/* Main compare box: W=1200 H=786 radius=20 glass + gradient border */
.choose2-compare-box {
  position: relative;
  width: 1200px;
  height: 786px;

  border-radius: 20px;
  overflow: hidden;

  /* Border gradient */
  border: 1px solid transparent;
  background:
    /* inner glass */
    linear-gradient(
      135deg,
      rgba(99, 62, 178, 0.80) 0%,
      rgba(99, 62, 178, 0.40) 100%
    ) padding-box,
    /* border gradient */
    linear-gradient(
      135deg,
      rgba(99, 62, 178, 0.80) 0%,
      rgba(99, 62, 178, 0.40) 100%
    ) border-box;

  backdrop-filter: blur(26px);
  -webkit-backdrop-filter: blur(26px);

  box-shadow: 0 28px 120px rgba(0, 0, 0, 0.78);

  /* ✅ base size tokens (desktop remains unchanged) */
  --box-w: 1200px;
  --box-h: 786px;
}

.choose2-compare-box {
  width: var(--box-w);
  height: var(--box-h);
}

/* Inner columns grid */
.choose2-cols {
  position: relative;
  z-index: 2;

  width: 100%;
  height: 100%;

  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 0;

  box-sizing: border-box;
}

/* Column base */
.choose2-col {
  position: relative;
  height: 100%;
  box-sizing: border-box;
}

/* LEFT column padding based on your measurements */
.choose2-col--relyn {
  padding-left: 118px;
  padding-top: 121px;
  padding-right: 50px;
}

/* RIGHT column padding based on your measurements */
.choose2-col--others {
  padding-left: 85px; /* aligns title around x ≈ 685 from left border (118 + 400 + gap-ish) */
  padding-top: 121px;
  padding-right: 50px;
}

/* Column title */
.choose2-col-title {
  margin: 0;

  font-family: "Urbanist", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 32px;
  font-weight: 600;
  color: #FFFFFF;
  text-align: left;
}

/* line W=400 H=5 radius=5 bg #A697E0, 30px below title */
.choose2-col-line {
  width: 400px;
  height: 5px;
  border-radius: 5px;
  background: #A697E0;
  margin-top: 30px;
}

/* List */
.choose2-list {
  list-style: none;
  padding: 0;
  margin: 57px 0 0; /* 57px after line */
  display: flex;
  flex-direction: column;
  gap: 51px; /* spacing between items */
}

/* Item */
.choose2-item {
  display: flex;
  align-items: center;
  gap: 23px; /* icon-to-text */
}

/* Icon circle: W=20 H=20 */
.choose2-icon {
  width: 20px;
  height: 20px;
  border-radius: 50%;

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

  flex: 0 0 20px;

  border: 1px solid rgba(255, 255, 255, 0.95);
  color: #FFFFFF;

  transform: translateZ(0);
}

/* Tick and cross */
.choose2-icon--tick {
  background: rgba(255, 255, 255, 0.12);
}

.choose2-icon--cross {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.40);
  color: rgba(255, 255, 255, 0.40);
}

/* Text */
.choose2-text {
  font-family: "Urbanist", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 24px;
  font-weight: 400;
  color: #FFFFFF;
  text-align: left;
  line-height: 1.25;
}

/* Dim items (for other agencies where it's not offered) */
.choose2-item.is-dim .choose2-text {
  color: rgba(255, 255, 255, 0.40);
}

.choose2-item.is-dim .choose2-icon {
  border-color: rgba(255, 255, 255, 0.40);
}

/* Subtle shine overlay */
.choose2-shine {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;

  background:
    radial-gradient(circle at 20% 18%, rgba(255, 255, 255, 0.12), transparent 52%),
    radial-gradient(circle at 75% 25%, rgba(255, 255, 255, 0.08), transparent 55%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.06), transparent 60%);

  opacity: 0.9;
}

/* Responsive */
@media (max-width: 1280px) {
  .choose2-compare-box {
    width: min(1200px, 92vw);
  }

  .choose2-col-line {
    width: min(400px, 38vw);
  }
}

@media (max-width: 1024px) {
  .choose2-shell {
    min-height: 1100px;
  }

  .choose2-title {
    font-size: 40px;
  }

  .choose2-compare-wrap {
    margin-top: 110px;
  }

  .choose2-compare-box {
    height: auto;
    padding-bottom: 60px;
  }

  .choose2-cols {
    grid-template-columns: 1fr;
    row-gap: 70px;
  }

  .choose2-col--relyn,
  .choose2-col--others {
    padding-left: 54px;
    padding-right: 54px;
  }

  .choose2-col-line {
    width: 100%;
    max-width: 520px;
  }
}

/* ✅ Mobile + Tablet (Portrait): reduce title/subtitle/text sizes AND reduce box size */
@media (max-width: 1024px) and (orientation: portrait) {
  .choose2-shell {
    padding-top: 64px;
    min-height: 960px;
  }

  .choose2-header {
    max-width: 92vw;
  }

  .choose2-kicker {
    font-size: 16px;
    letter-spacing: 0.16em;
  }

  .choose2-title {
    margin-top: 18px;
    font-size: 28px;
  }

  .choose2-compare-wrap {
    margin-top: 70px;
  }

  /* ✅ Reduce the compare box size on portrait */
  .choose2-compare-box {
    width: min(92vw, 680px);
    padding-bottom: 42px;
  }

  .choose2-cols {
    row-gap: 48px;
  }

  .choose2-col--relyn,
  .choose2-col--others {
    padding-left: 20px;
    padding-right: 20px;
    padding-top: 52px;
  }

  .choose2-col-title {
    font-size: 22px;
  }

  .choose2-col-line {
    height: 4px;
    margin-top: 18px;
    max-width: 460px;
  }

  .choose2-list {
    margin-top: 28px;
    gap: 20px;
  }

  .choose2-item {
    gap: 14px;
  }

  .choose2-icon {
    width: 18px;
    height: 18px;
    flex: 0 0 18px;
  }

  .choose2-text {
    font-size: 15px;
    line-height: 1.3;
  }
}

@media (max-width: 768px) {
  .choose2-shell {
    padding-top: 70px;
    min-height: 980px;
  }

  .choose2-kicker {
    font-size: 18px;
  }

  .choose2-title {
    font-size: 30px;
  }

  .choose2-compare-wrap {
    margin-top: 80px;
  }

  .choose2-col--relyn,
  .choose2-col--others {
    padding-left: 22px;
    padding-right: 22px;
    padding-top: 70px;
  }

  .choose2-text {
    font-size: 18px;
  }

  .choose2-list {
    gap: 28px;
    margin-top: 40px;
  }
}

/* ✅ Mobile portrait: slightly tighter than tablet portrait */
@media (max-width: 480px) and (orientation: portrait) {
  .choose2-shell {
    padding-top: 58px;
    min-height: 900px;
  }

  .choose2-kicker {
    font-size: 14px;
    letter-spacing: 0.15em;
  }

  .choose2-title {
    font-size: 24px;
    margin-top: 16px;
  }

  .choose2-compare-wrap {
    margin-top: 58px;
  }

  .choose2-compare-box {
    width: min(92vw, 360px);
    padding-bottom: 36px;
  }

  .choose2-col--relyn,
  .choose2-col--others {
    padding-left: 16px;
    padding-right: 16px;
    padding-top: 44px;
  }

  .choose2-col-title {
    font-size: 20px;
  }

  .choose2-col-line {
    height: 4px;
    margin-top: 16px;
  }

  .choose2-list {
    margin-top: 24px;
    gap: 18px;
  }

  .choose2-text {
    font-size: 14px;
  }
}