/* CSS for newHome-hero */
.newHome-hero {
  position: relative;
  width: 100%;
  overflow: hidden;
  background-color: #081229;
  /* Dark background in case of scaling */
}

.newHome-hero-video {
  width: 100%;
  height: auto;
  display: block;
}

.newHome-hero-content {
  position: absolute;
  top: 10%;
  left: 50%;
  transform: translate(-50%, 24px);
  /* starts slightly lower */
  opacity: 0;
  /* hidden until 6s */
  visibility: hidden;
  transition: opacity 0.8s ease, transform 0.8s ease, visibility 0.8s;
  z-index: 1;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
  text-align: center;
}

.newHome-hero-content.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
  /* slides up into place */
}

@media (prefers-reduced-motion: reduce) {
  .newHome-hero-content {
    transition: opacity 0.3s ease;
    transform: translate(-50%, 0);
  }
}

.newHome-hero-title {
  color: #ffffff;
  /* font-size: 40px; */
  font-weight: 600;
  padding-top: 10px;
  margin: 0;
  font-size: 40px !important;
}

/* CSS for newHome-sec7 */
.newHome-sec7 {
  width: 100%;
  padding: 100px;
  background: linear-gradient(110deg, #0d2b57 0%, #12366d 40%, #28498d 100%);
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.newHome-sec7-container {
  width: 100%;
  margin: 0 auto;
  text-align: center;
}

.newHome-sec7-title {
  color: #ffffff;
  font-size: 40px;
  font-weight: 500;
  line-height: 50px;
  margin-left: auto;
  margin-right: auto;
}

.newHome-sec7-image {
  width: 85%;
  height: auto;
  display: block;
  margin: 0 auto;
  object-fit: contain;
}

/* CSS for newHome-sec4 */
.newHome-sec4 {
  width: 100%;
  padding: 100px;

  position: relative;
  /* background-image: url("../images/medicalBg.webp");
  background-size: cover;
  background-position: top;
  background-repeat: no-repeat; */
  /* 
  background-image:
    linear-gradient(
      to bottom,
      rgba(255,255,255,0) 0%,
      rgba(255,255,255,0.08) 10%,
      rgba(255,255,255,0.65) 20%,
      rgba(255,255,255,0.98) 100%
    ),
    linear-gradient(
      100deg,
      rgba(27,52,86,0.98) 0%,
      rgba(76,87,126,0.90) 20%,
      rgba(165,164,196,0.65) 58%,
      rgba(202,184,238,0.82) 100%
    ),
    url("../images/testimonial-bg.webp"); */


  /* background-image: linear-gradient(rgba(255, 255, 255, 0.664), rgba(255, 255, 255, 0.53)), url(../images/medicalBg.webp); */
  background-image: url(../images/light_bg.webp);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* .newHome-sec4::before {
    content: "";
  position: absolute;
  inset: 0;


   background: linear-gradient(
    125deg,
    rgba(24, 48, 82, 0.98) 0%,
    rgba(70, 82, 119, 0.88) 22%,
    rgba(137, 141, 174, 0.70) 45%,
    rgba(201, 194, 226, 0.78) 72%,
    rgba(255, 255, 255, 0.96) 100%
  );
  z-index: 0;
} */

.newHome-sec4-container {
  /* max-width: 1240px; */
  margin: 0 auto;
  position: relative;
  z-index: 1;
}

/* ==========================================
   COMMON HEADING LINE
   Uppercase label + extending horizontal rule
   Usage: <div class="comman-heading-line"><span>SECTION TITLE</span></div>
========================================== */
.comman-heading-line {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 40px;
}

.comman-heading-line span {
  font-family: 'Manrope', sans-serif;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--color-periwinkle);
  white-space: nowrap;
  flex-shrink: 0;
}

.comman-heading-line::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--color-periwinkle);
  opacity: 0.55;
}

/* Responsive — tablet */
@media screen and (max-width: 900px) {
  .comman-heading-line {
    margin-bottom: 28px;
    padding: 0px !important;
    margin-left: 0px !important;
  }

  .comman-heading-line span {
    font-size: 11px;
    letter-spacing: 1.1px;
  }
}

/* Responsive — mobile */
@media screen and (max-width: 600px) {
  .comman-heading-line {
    margin-bottom: 20px;
    padding: 0px !important;
    margin-left: 0px !important;
  }

  .comman-heading-line span {
    font-size: 11px !important;
    letter-spacing: 0.9px;
  }
}

.newHome-sec4-cards {
  display: flex;
  justify-content: center;
  gap: 70px;
  flex-wrap: nowrap;
}

.newHome-sec4-card {
  background-color: #ffffff;
  border-radius: 16px;
  flex: 1;
  display: flex;
  flex-direction: column;
  box-shadow: 0 10px 32px rgba(0, 0, 0, 0.12);
  transition: transform 0.4s ease, box-shadow 0.4s ease;
  overflow: hidden;
  padding: 24px;
  border: 1px solid rgba(219, 234, 254, 0.6);
  /* max-width: 585px; */
}

.newHome-sec4-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.2);
}

.newHome-sec4-quote {
  padding: 0 0 20px 0;
  background-color: #ffffff;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  gap: 14px;
  border-bottom: 1.5px solid var(--color-periwinkle);
}

.newHome-sec4-quote p {
  color: #2e3e5c;
  font-size: 18px !important;
  line-height: 1.6;
  margin: 0;
  font-style: italic;
  font-weight: 500;
}

.newHome-sec4-quote-icon {
  color: #4b6bf5;
  font-size: 20px;
  font-weight: 700;
  margin: 0 3px;
}

.newHome-sec4-author {
  background: #ffffff;
  padding: 20px 0 0 0;
  display: flex;
  align-items: center;
  gap: 18px;
  position: relative;
}

.newHome-sec4-avatar-img {
  width: 150px;
  height: 150px;
  object-fit: cover;
  object-position: top center;
  border-radius: 50%;
  border: 1px solid #688EFB;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  flex-shrink: 0;
  margin-top: 0;
  background-color: #ffffff;
}

.newHome-sec4-author-info {
  color: #1e293b;
  flex: 1;
}

.newHome-sec4-author-info h4 {
  font-size: 18px;
  font-weight: 800;
  margin: 0 0 4px 0;
  color: #688EFB;
  font-family: 'Manrope', sans-serif !important;
}

.newHome-sec4-author-info p {
  font-size: 12px;
  line-height: 1.45;
  margin: 0;
  color: #1e293b;
  font-family: 'Manrope', sans-serif;
}

.newHome-sec4-author-info strong {
  font-weight: 700;
  color: #0f172a;
}

.newHome-sec4-logo-img {
  max-height: 44px;
  max-width: 120px;
  object-fit: contain;
  flex-shrink: 0;
}

/* CSS for newHome-sec5 */
.newHome-sec5 {
  position: relative;
  width: 100%;
  padding: 100px;
  background-color: #ffffff;
  /* background-image: linear-gradient(180deg,
      #ffffff 0%,
      #ffffff 22%,
      rgba(255, 255, 255, 0.95) 35%,
      rgba(200, 218, 246, 0.75) 65%,
      rgba(55, 82, 132, 0.88) 88%,
      #243c68 100%), url('../images/medicalBg.webp'); */

  /* background-image: linear-gradient(rgba(255, 255, 255, 0.664), rgba(255, 255, 255, 0.53)), url(../images/medicalBg.webp);
   */
  /* background-image: url(../images/new-homebg-1.webp); */

  background-image: url(../images/light_bg.webp);
  background-size: cover;
  background-position: center bottom;
  background-repeat: no-repeat;
  overflow: visible;
}


.newHome-sec5-container {
  /* max-width: 1240px; */
  margin: 0 auto;
  position: relative;
  z-index: 2;
}


.newHome-sec5-cards {
  display: flex;
  justify-content: space-between;
  gap: 28px;
  flex-wrap: nowrap;
}

.newHome-sec5-card {
  --sec5-accent: #8c95c9;
  --sec5-img-h: 250px;

  border-radius: 20px;
  overflow: hidden;
  flex: 1;
  cursor: pointer;
  border: none;
  padding: 10px 6px 14px 6px;
  /* thinner frame */
  display: flex;
  flex-direction: column;
  box-shadow: 7px 7px 7px rgba(0, 0, 0, 0.4);
  transition: transform 0.4s ease, box-shadow 0.4s ease;

  /* 6px top padding + image + 6px below = image height + 12px */
  background: linear-gradient(180deg,
      var(--sec5-accent) 0,
      #fff 35%,
      #ffffff calc(var(--sec5-img-h)),
      #ffffff 100%);

}

.newHome-sec5-card--aqua {
  --sec5-accent: #b3e5e8;
}

.newHome-sec5-card--lavender {
  --sec5-accent: #b99acb;
}

.newHome-sec5-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 0 22px var(--sec5-accent), 0 20px 45px rgba(0, 0, 0, 0.28);
}

.newHome-sec5-card-image {
  width: 100%;
  height: var(--sec5-img-h);
  object-fit: cover;
  display: block;
  border-radius: 18px;
  border: 1px solid #5b82f2;
  transition: transform 0.5s ease;

}

.newHome-sec5-card-image-wrapper {
  box-shadow: inset 3px 3px 3px rgba(0, 0, 0, 0.4);
  position: relative;
  border-radius: 18px;
  overflow: hidden;
}

.newHome-sec5-card-image-wrapper::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;

  box-shadow: inset 3px 3px 10px rgba(0, 0, 0, 0.6);
}


.newHome-sec5-card-content {
  padding: 12px 12px 6px 12px;
  background-color: transparent;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  gap: 0;
  position: relative;
}

.newHome-sec5-card-location {
  color: var(--color-periwinkle);
  font-size: 11px;
  font-weight: 600;
  font-family: 'Manrope', sans-serif;
  letter-spacing: 0.2px;
  flex-shrink: 0;
}

.newHome-sec5-card-name {
  color: var(--color-navy);
  font-size: 22px;
  font-weight: 700;
  margin: 0 0 10px 0;
  font-family: 'Manrope', Georgia, serif;
  line-height: 1.2;
}

/* Stats row: # Patients  # Oncologists */
.newHome-sec5-card-stats {
  display: flex;
  gap: 18px;
  margin-bottom: 10px;
}

.newHome-sec5-stat {
  display: flex;
  align-items: baseline;
  gap: 6px;
}

.newHome-sec5-stat-icon {
  color: var(--color-periwinkle);
  font-family: "TeX Gyre Pagella", serif !important;
  font-size: 45px;
  font-weight: 800;
  line-height: 1;
}

.newHome-sec5-stat-label {
  color: var(--color-periwinkle);
  font-size: 15px;
  font-weight: 600;
  font-family: 'Manrope', sans-serif;
}

/* 'in a registered clinical study' subtitle */
.newHome-sec5-card-desc {
  color: var(--color-navy);
  font-size: 12px;
  line-height: 1.4;
  margin: 2px 0 8px 0;
  font-family: 'Manrope', sans-serif;
  font-weight: 500;
}

.newHome-sec5-card-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 6px;
  border-top: 1px solid rgba(104, 142, 251, 0.15);
  margin-top: auto;
  gap: 8px;
}

.newHome-sec5-card-logo-img {
  max-height: 36px;
  max-width: 110px;
  object-fit: contain;
  flex-shrink: 0;
}

/* Per-card accent color themes */
.newHome-sec5-card--aqua .newHome-sec5-card-location,
.newHome-sec5-card--aqua .newHome-sec5-stat-icon,
.newHome-sec5-card--aqua .newHome-sec5-stat-label {
  color: var(--color-dark-aqua);
}

.newHome-sec5-card--lavender .newHome-sec5-card-location,
.newHome-sec5-card--lavender .newHome-sec5-stat-icon,
.newHome-sec5-card--lavender .newHome-sec5-stat-label {
  color: var(--color-dark-lavender);
}

/* ---- 4th card: More Hospitals ---- */
.newHome-sec5-card--more {
  background:
    radial-gradient(circle at 0% 100%, rgba(204, 146, 228, 0.95) 0%, rgba(204, 146, 228, 0) 50%),
    linear-gradient(200deg, #0a1233 0%, #14225e 25%, #3a52c8 60%, #6a7dff 100%);
  border: none;
  box-shadow: 7px 7px 18px rgba(0, 0, 0, 0.45);
  display: flex;
  flex-direction: column;
  padding: 22px 26px;
  min-height: 320px;
}


.newHome-sec5-card--more:hover {
  box-shadow: 0 0 25px rgba(106, 125, 255, 0.6), 0 20px 40px rgba(0, 0, 0, 0.35);
}


.newHome-sec5-more-icon-wrap {
  display: flex;
  justify-content: flex-end;
  align-items: flex-start;
}

.newHome-sec5-more-icon {
  width: 120px;
  height: 128px;

  object-fit: contain;
  transition: transform 0.7s ease;
}

/* .newHome-sec5-card--more:hover .newHome-sec5-more-icon {
  transform: rotate(180deg) scale(1.08);
} */

.newHome-sec5-more-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 22px;
}

.newHome-sec5-more-count {
  color: var(--color-aqua);
  font-size: 50px;
  font-weight: 900;
  font-family: "TeX Gyre Pagella", serif !important;
  line-height: 1;
  margin: 0;
}

.newHome-sec5-more-tagline {
  color: #ffffff;
  font-size: 32px;
  font-weight: 900;
  /* font-family: 'Manrope', sans-serif; */
  font-family: "TeX Gyre Pagella", serif !important;

  line-height: 1.25;
  margin: 0;
}

.newHome-sec5-more-milestone {
  color: var(--color-aqua);
  font-size: 12px;
  font-weight: 600;
  font-family: 'Manrope', sans-serif;
  line-height: 1.45;
  margin: 6px 0 0 0;
}

/* CSS for drBg-section */
.drBg-section {
  position: relative;
  width: 100%;
  /* background-color: #0c1b33; */
  background-image: url('../images/drbg-new.webp');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  overflow: hidden;
  padding: 100px;

}

.drBg-section-bg {

  width: 100%;
  height: 100%;
  background-image: url('../images/drbg-new.webp');
  background-repeat: no-repeat;
  background-position: right center;
  background-size: cover;
  z-index: 1;
}

.drBg-section-bg-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, #081d4f 20%, #9a7edd 50%, rgba(12, 27, 51, 0.85) 68%, rgba(99, 15, 158, 0.2) 85%, rgba(12, 27, 51, 0) 100%);

  z-index: 2;
}


.drBg-section-container {
  position: relative;
  z-index: 3;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 40px;
}

.drBg-section-content {
  /* flex: 0 0 44%; */
  max-width: 68%;
  display: flex;
  flex-direction: column;
  gap: 26px;
}

.drBg-section-p1 {
  color: #ffffff;
  font-size: 50px;
  line-height: 1.2;
  font-weight: 800;
  margin: 0;
  font-family: "Tex gyre pagella", "serif" !important;

}

.drBg-section-highlight {
  color: var(--color-aqua);
  font-weight: 700;
  font-family: "Tex gyre pagella", "serif" !important;

}

.drBg-section-block {
  margin: 0;
  margin-top: 30px;
}

.drBg-section-title {
  color: var(--color-aqua);
  font-size: 21px;
  font-weight: 700;
  display: inline;


}

.drBg-section-text {
  color: white;
  font-size: 23px;
  text-align: left;
  line-height: 1.6;
  font-weight: 700;
  margin: 0;

}

.drBg-section-middle {
  flex: 0 0 32%;
  max-width: 480px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.drBg-section-middle-img {
  width: 100%;
  max-width: 400px;
  height: auto;
  display: block;
  object-fit: contain;
  animation: upDown 2s linear infinite alternate forwards;
  transition: all 0.5s;
}

@keyframes upDown{
  0%{
    transform: scale(0.95);
  }

  100%{
    transform: scale(1);
  }
}

.drBg-section-block1 {
  display: flex;
  flex-direction: row;
}



/* ==========================================
   NEW HEALTH SECTION
   Prefix: new_health
========================================== */

.new_health-section {
  position: relative;
  width: 100%;
  min-height: 100vh;
  background: url('../images/newHome-bg-sec11.webp') no-repeat center center / cover;
  padding: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  overflow: hidden;
}

.new_health-container {
  width: 100%;
  max-width: 1240px;
  margin: 0 auto;
}

/* Top 2 Main Cards Grid */
.new_health-top-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  margin-bottom: 24px;
}

/* Divider Line between top cards and bottom mini cards */
.new_health-divider {
  width: 100%;
  height: 1.5px;
  background: linear-gradient(90deg, rgba(179, 247, 255, 0.4) 0%, rgba(184, 156, 232, 0.4) 100%);
  margin: 24px 0;
}

.new_health-card {
  background: linear-gradient(180deg, rgba(12, 28, 56, 0.92) 0%, rgba(8, 20, 42, 0.95) 100%);
  border-radius: 16px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease;

}

.new_health-card-left {
  border: 1.5px solid rgba(179, 247, 255, 0.35);
}

.new_health-card-right {
  border: 1.5px solid rgba(184, 156, 232, 0.35);
}

/* Hover effects for main cards */
.new_health-card-left:hover {
  transform: translateY(-8px);
  border-color: #B3F7FF;
  box-shadow: 0 0 25px rgba(179, 247, 255, 0.25), 0 20px 40px rgba(0, 0, 0, 0.5);
}

.new_health-card-right:hover {
  transform: translateY(-8px);
  border-color: #B89CE8;
  box-shadow: 0 0 25px rgba(184, 156, 232, 0.25), 0 20px 40px rgba(0, 0, 0, 0.5);
}

.new_health-card-img-wrapper {
  width: 100%;
  height: 220px;
  overflow: hidden;
  position: relative;
}

.new_health-card-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.5s ease;
}

.new_health-card:hover .new_health-card-img {
  transform: scale(1.04);
}

.new_health-card-body {
  padding: 30px 32px 35px 32px;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.new_health-card-kicker {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.7);
  margin-bottom: 14px;
}

.new_health-card-title {
  font-size: 28px;
  /* font-weight: 600; */
  line-height: 1.25;
  margin-bottom: 16px;
  max-width: 450px;
}

.new_health-highlight-cyan {
  color: #B3F7FF;
  font-weight: 800;
}

.new_health-highlight-lavender {
  color: #B89CE8;
  font-weight: 800;


}

.new_health-card-desc {
  font-size: 14.5px;
  font-weight: 600;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.957);
  margin-bottom: 28px;
  flex-grow: 1;
}

/* Buttons */
.new_health-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  padding: 12px 28px;
  border-radius: 999px;
  font-size: 13.5px;
  font-weight: 700;
  text-decoration: none;
  transition: transform 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease;
  color: #0b1f3b;
}

.new_health-btn-left {
  background-color: #B3F7FF;
  border: 1px solid #B3F7FF;
}

.new_health-btn-left:hover {
  transform: translateY(-2px);
  background-color: #a0f4fc;
  box-shadow: 0 0 20px rgba(179, 247, 255, 0.6);
}

.new_health-btn-right {
  background-color: #B89CE8;
  border: 1px solid #B89CE8;
}

.new_health-btn-right:hover {
  transform: translateY(-2px);
  background-color: #a888e2;
  box-shadow: 0 0 20px rgba(184, 156, 232, 0.6);
}

/* Bottom 4 Mini Cards Grid */
.new_health-bottom-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

.new_health-mini-card {
  background: linear-gradient(180deg, rgba(12, 28, 56, 0.9) 0%, rgba(8, 20, 42, 0.92) 100%);
  border-radius: 12px;
  padding: 20px 22px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

.new_health-mini-card-cyan {
  border: 1px solid rgba(179, 247, 255, 0.3);
}

.new_health-mini-card-cyan:hover {
  transform: translateY(-4px);
  border-color: #B3F7FF;
  box-shadow: 0 0 15px rgba(179, 247, 255, 0.25), 0 10px 20px rgba(0, 0, 0, 0.3);
}

.new_health-mini-card-lavender {
  border: 1px solid rgba(184, 156, 232, 0.3);
}

.new_health-mini-card-lavender:hover {
  transform: translateY(-4px);
  border-color: #B89CE8;
  box-shadow: 0 0 15px rgba(184, 156, 232, 0.25), 0 10px 20px rgba(0, 0, 0, 0.3);
}

.new_health-mini-title {
  font-size: 16px;
  font-weight: 700;
  color: #ffffff;
  margin-bottom: 4px;
}

.new_health-mini-desc {
  font-size: 12.5px;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.75);
  margin: 0;
}

/* ==========================================================
   CASE STUDY – Clinical Grade CancerAI
   Uses :root tokens + fonts from style.css
   (TeX Gyre Pagella for headings, Manrope for body)
   Desktop styles here. Tablet/mobile styles are at the
   very bottom of this file.
========================================================== */

.case_study_sect {
  position: relative;
  width: 100%;
  overflow: hidden;
  color: var(--text-white);
  padding: 80px 100px;
  background: url('../images/blue-bg.webp') no-repeat center center / cover;
}

.case_study_sect-wrapper {
  position: relative;
  z-index: 1;
  max-width: 1400px;
  width: 100%;
  margin: 0 auto;
  padding: 0;
}

.case_study_sect-left-space {
  display: none;
}

.case_study_sect-content {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: clamp(22px, 2.6vw, 36px);
}

/* ---------- Header row ---------- */
.case_study_sect-header-row {
  display: flex;
  align-items: center;
  gap: clamp(16px, 1.8vw, 26px);
  padding-right: 0;
}

.case_study_sect-badge {
  flex: 0 0 auto;
  width: clamp(84px, 8.4vw, 118px);
  height: clamp(84px, 8.4vw, 118px);
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--color-periwinkle) 0%, var(--color-lavender) 100%);
  box-shadow: 0 0 28px rgba(104, 142, 251, 0.35);
}

.case_study_sect-badge span {
  font-family: "Manrope", sans-serif;
  font-weight: 600;
  font-size: clamp(13px, 1.2vw, 17px);
  line-height: 1.15;
  text-transform: uppercase;
  color: var(--text-white);
}

.case_study_sect-header-text {
  flex: 1;
  min-width: 0;
}

.case_study_sect-meta-row {
  display: flex;
  align-items: center;
  gap: 14px;
}

.case_study_sect-meta {
  font-family: "Manrope", sans-serif;
  font-size: clamp(10px, 0.95vw, 13px);
  font-weight: 500;
  letter-spacing: 0.3px;
  color: #d6b8f5;
  white-space: nowrap;
}

.case_study_sect-meta-line {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, rgba(214, 184, 245, 0.8), rgba(214, 184, 245, 0.15));
}

.case_study_sect .case_study_sect-title {
  font-weight: 700;
  line-height: 1.15;
  margin: 6px 0 20px;
  color: var(--text-white);
}

.case_study_sect .case_study_sect-subtitle {
  font-family: "Manrope", sans-serif;
  font-size: clamp(13px, 1.25vw, 17px);
  font-weight: 500;
  line-height: 1.4;
  color: var(--color-aqua);
}

/* ---------- Patient journey ---------- */
.case_study_sect-journey {
  padding-right: 0;
}

.case_study_sect-journey-header {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: clamp(16px, 2vw, 28px);
}

.case_study_sect-journey-title {
  font-family: "Manrope", sans-serif;
  font-size: clamp(10px, 0.95vw, 13px);
  font-weight: 600;
  letter-spacing: 0.3px;
  color: var(--color-periwinkle);
  white-space: nowrap;
}

.case_study_sect-journey-line {
  flex: 1;
  height: 1px;
  background: var(--color-periwinkle);
  opacity: 0.8;
}

.case_study_sect-journey-steps-container {
  width: 100%;
}

.case_study_sect-journey-steps {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  align-items: stretch;
}

.case_study_sect-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 0 2px;
}

.case_study_sect-icon-wrapper {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: clamp(10px, 1.1vw, 16px);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.18), 0 6px 20px rgba(8, 15, 45, 0.35);
}

.case_study_sect-icon {
  width: 56%;
  height: 56%;
  object-fit: contain;
  filter: brightness(0) invert(1);
}

.case_study_sect-icon.case_study_sect-icon-dna {
  width: 52%;
  height: 52%;
}

/* icon circle colours: teal -> blue -> violet -> pink */
/* Step 1 – Screening: dark navy-teal disc, cyan ring */
.case_study_sect-step-1 .case_study_sect-icon-wrapper,
.case_study_sect-step.step-color-1 .case_study_sect-icon-wrapper,
.step-color-1 .case_study_sect-icon-wrapper {
  background: linear-gradient(to right, var(--color-aqua) 0%, #1c306b 65%) !important;
  box-shadow: 0 0 14px rgba(63, 208, 234, 0.55),
    inset 0 0 12px rgba(63, 208, 234, 0.25) !important;
}

/* Step 2 – Diagnostic Imaging: royal/cyan-blue disc, blue ring */
.case_study_sect-step-2 .case_study_sect-icon-wrapper,
.case_study_sect-step.step-color-2 .case_study_sect-icon-wrapper,
.step-color-2 .case_study_sect-icon-wrapper {
  background: linear-gradient(to right, #00d2ff 0%, #183b86 75%) !important;
  box-shadow: 0 0 14px rgba(0, 210, 255, 0.5),
    inset 0 0 12px rgba(0, 210, 255, 0.2) !important;
}

/* Step 3 – Biopsy: deep blue to periwinkle */
.case_study_sect-step-3 .case_study_sect-icon-wrapper,
.case_study_sect-step.step-color-3 .case_study_sect-icon-wrapper,
.step-color-3 .case_study_sect-icon-wrapper {
  background: linear-gradient(110deg, #132275 0%, #6a8cff 100%) !important;
  box-shadow: 0 0 14px rgba(106, 140, 255, 0.5),
    inset 0 0 12px rgba(106, 140, 255, 0.2) !important;
}

/* Step 4 – Pathology: periwinkle to vibrant pink */
.case_study_sect-step-4 .case_study_sect-icon-wrapper,
.case_study_sect-step.step-color-4 .case_study_sect-icon-wrapper,
.step-color-4 .case_study_sect-icon-wrapper {
  background: linear-gradient(135deg, #6a7ff0 0%, #f18df8 100%) !important;
  box-shadow: 0 0 14px rgba(241, 141, 248, 0.55),
    inset 0 0 12px rgba(241, 141, 248, 0.25) !important;
}

/* Step 5 – Molecular: lavender to soft pink-lilac */
.case_study_sect-step-5 .case_study_sect-icon-wrapper,
.case_study_sect-step.step-color-5 .case_study_sect-icon-wrapper,
.step-color-5 .case_study_sect-icon-wrapper {
  background: linear-gradient(135deg, #cbb0f0 0%, #a374dd 100%) !important;
  box-shadow: 0 0 14px rgba(203, 176, 240, 0.55),
    inset 0 0 12px rgba(203, 176, 240, 0.25) !important;
}

/* Step 6 – Treatment: lilac to orchid */
.case_study_sect-step-6 .case_study_sect-icon-wrapper,
.case_study_sect-step.step-color-6 .case_study_sect-icon-wrapper,
.step-color-6 .case_study_sect-icon-wrapper {
  background: linear-gradient(135deg, #c9a8f2 0%, #d380d7 100%) !important;
  box-shadow: 0 0 14px rgba(211, 128, 215, 0.55),
    inset 0 0 12px rgba(211, 128, 215, 0.25) !important;
}

/* Step 7 – Outcome: muted mauve-purple */
.case_study_sect-step-7 .case_study_sect-icon-wrapper,
.case_study_sect-step.step-color-7 .case_study_sect-icon-wrapper,
.step-color-7 .case_study_sect-icon-wrapper {
  background: linear-gradient(135deg, #b98fd8 0%, #875db3 100%) !important;
  box-shadow: 0 0 14px rgba(185, 143, 216, 0.55),
    inset 0 0 12px rgba(185, 143, 216, 0.25) !important;
}

.case_study_sect-step .case_study_sect-step-title {
  font-family: "Manrope", sans-serif !important;
  font-size: 20px;
  font-weight: 900;
  line-height: 1.2;
  margin-bottom: 6px;
  color: var(--text-white);
}

.case_study_sect-step .case_study_sect-step-desc {
  font-family: "Manrope", sans-serif;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.35;
  color: var(--text-white);
}

/* connector fills the gap between description and Casebook bar */
.case_study_sect-connector {
  flex: 1;
  width: 1px;
  min-height: 22px;
  margin-top: 8px;
  background: rgba(104, 142, 251, 0.75);
}

/* ---------- Casebook pill ---------- */
.case_study_sect-casebook {
  width: 100%;
}

.case_study_sect-casebook-pill {
  width: 100%;
  padding: clamp(8px, 0.9vw, 12px) 20px;
  border-radius: 999px;
  text-align: center;
  background: linear-gradient(180deg, #2a3a7a 0%, #14214f 100%);
  border: 1px solid rgba(179, 247, 255, 0.35);
  box-shadow: 0 6px 22px rgba(8, 15, 45, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

.case_study_sect-casebook-bold {
  font-family: "TeX Gyre Pagella", serif !important;
  font-weight: 900;
  font-size: 26px;
  color: var(--text-white);
}

.case_study_sect-casebook-light {
  font-family: "Manrope", sans-serif;
  font-weight: 600;
  font-size: 20px;
  color: var(--text-white);
}

/* ---------- Biological kernel ---------- */
.case_study_sect-kernel {
  /* display: flex;
  align-items: center;
  gap: clamp(14px, 1.6vw, 22px); */
  width: 90%;
  margin-left: auto;
  margin-top: clamp(0px, 0.5vw, 8px);

}

.case_study_sect-kernel-circle {
  flex: 0 0 auto;
  width: clamp(96px, 9.8vw, 140px);
  height: clamp(96px, 9.8vw, 140px);
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: linear-gradient(100deg, var(--color-periwinkle) 0%, var(--color-lavender) 100%);
  box-shadow: 0 0 30px rgba(184, 156, 232, 0.4);
  position: absolute;
  top: -2px;
  left: -5%;
  z-index: 2;

}

.case_study_sect-kernel-circle span {
  font-family: "TeX Gyre Pagella", serif !important;
  font-weight: 700;
  font-size: clamp(16px, 1.7vw, 24px);
  line-height: 1.15;
  color: var(--text-white);
}

.case_study_sect-kernel-content {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(8px, 1vw, 14px);
}

.case_study_sect-kernel-top-band {
  width: 100%;
  /* padding: clamp(8px, 1vw, 14px) 12% clamp(8px, 1vw, 14px) 0; */
  /* border-top: 1px solid rgba(255, 255, 255, 0.28);
  border-bottom: 1px solid rgba(255, 255, 255, 0.28); */
  border:  1px solid var(--color-lavender);
  padding: 20px 10px 20px 100px;
  font-family: "Manrope", sans-serif;
  font-size: 18px;
  font-weight: 800;
  line-height: 1.4;
  color: var(--text-white);
  position: relative;
}

.case_study_sect-kernel-text2 {
  font-family: "Manrope", sans-serif;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.4;
  color: var(--color-aqua);
  padding-left: 100px;
}


.case_study_sect-kernel-content .program-participation-btn{
  margin-left: 100px;
}

.case_study_sect-kernel-text2 small {
  font-family: inherit;
  font-size: 0.85em;
  font-weight: 400;
  opacity: 0.85;
}

.case_study_sect-btn {
  display: inline-block;
  padding: 10px 24px;
  border-radius: 999px;
  font-family: "Manrope", sans-serif;
  font-size: clamp(11px, 0.95vw, 13px);
  font-weight: 600;
  color: var(--text-white);
  background: linear-gradient(180deg, #24336f 0%, #142050 100%);
  border: 1px solid var(--color-periwinkle);
  transition: box-shadow 0.3s ease, background 0.3s ease;
}

.case_study_sect-btn:hover {
  background: rgba(104, 142, 251, 0.25);
  box-shadow: 0 0 14px rgba(104, 142, 251, 0.55);
}

/* ==========================================
   PROGRAM PARTICIPATION SECTION

========================================== */

.program-participation {
  width: 100%;
  padding: 100px;
  /* background: #eef0ff; */
  background-image: linear-gradient(rgba(255, 255, 255, 0.664), rgba(255, 255, 255, 0.829)), url(../images/medicalBg.webp);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;

  font-family: "Manrope", sans-serif;
  color: var(--color-navy);
}

.program-participation-container {
  max-width: 1240px;
  margin: 0 auto;
}

.program-participation-header {
  border-bottom: 1px solid var(--color-periwinkle);
  margin-bottom: 18px;
}

.program-participation-title {
  font-size: 44px;
  font-weight: 700;
  line-height: 1.15;
  color: var(--color-navy);
  margin-bottom: 4px;
}

.program-participation-title span {
  color: var(--color-periwinkle);
  font-weight: 700 !important;
}

.program-participation-subtitle {
  font-size: 17px;
  line-height: 1.4;
  font-weight: 500;
  color: var(--color-navy);
  margin: 0 0 22px 6px;
}

.program-participation-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 28px;
  align-items: stretch;
}

/* ---- Card ---- */
.program-participation-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: #ffffff;
  border-radius: 22px;
  padding: 18px 18px 26px;
  box-shadow: 6px 8px 18px rgba(11, 31, 59, 0.18);
  border: 1px solid transparent;
  transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1), box-shadow 0.4s ease, border-color 0.4s ease;
}

.program-participation-card--mayo:hover {
  transform: translateY(-8px);
  border-color: var(--color-aqua);
  box-shadow: 0 0 25px rgba(179, 247, 255, 0.6), 0 20px 40px rgba(11, 31, 59, 0.22);
}

.program-participation-card--nvidia:hover {
  transform: translateY(-8px);
  border-color: var(--color-lavender);
  box-shadow: 0 0 25px rgba(184, 156, 232, 0.55), 0 20px 40px rgba(11, 31, 59, 0.22);
}

/* ---- Diagram panel ---- */
.program-participation-diagram {
  position: relative;
  border-radius: 14px;
  padding: 30px 10px 12px;
  margin-bottom: 22px;
  border: 1px solid var(--color-aqua);
  background: #ffffff;
}

.program-participation-diagram--lavender {
  border-color: var(--color-lavender);
}

.program-participation-legend {
  position: absolute;
  top: -8px;
  left: 18px;
  padding: 0 10px;
  background: #ffffff;
  font-size: 11px;
  letter-spacing: 0.2px;
  color: var(--color-navy);
  white-space: nowrap;
}

.program-participation-legend strong {
  font-weight: 700;
}

.program-participation-legend span {
  color: var(--color-periwinkle);
  font-weight: 600;
}

.program-participation-diagram--lavender .program-participation-legend span {
  color: var(--color-lavender);
}

/* ---- Nested layers ---- */
.program-participation-layer {
  border-radius: 12px;
  padding: 10px 12px 12px;
  text-align: center;
  transition: transform 0.35s ease, box-shadow 0.35s ease;
}

.program-participation-layer:hover {
  box-shadow: 0 6px 18px rgba(104, 142, 251, 0.35);
}

.program-participation-layer-title {
  font-size: 17px;
  font-weight: 700;
  line-height: 1.2;
  color: var(--color-navy);
  margin-bottom: 2px;
}

.program-participation-layer-sub {
  font-size: 14px;
  line-height: 1.3;
  color: var(--color-navy);
  font-weight: 700;
  margin-bottom: 10px;
}

.program-participation-layer-sub b {
  font-weight: 700;
  color: var(--color-periwinkle);
}

.program-participation-layer-sub span+span::before {
  content: "|";
  margin: 0 6px;
  color: var(--color-periwinkle);
  opacity: 0.9;
}

/* Mayo palette */
.program-participation-diagram--cyan .program-participation-layer--l1 {
  background: linear-gradient(135deg, #c6ccf5 0%, #d5f3fa 100%);
}

.program-participation-diagram--cyan .program-participation-layer--l2 {
  background: linear-gradient(135deg, #b7ddf0 0%, #94acf3 100%);
}

.program-participation-diagram--cyan .program-participation-layer--l3 {
  background: linear-gradient(135deg, #89abe8 0%, #a6d9ed 100%);
  border: 1px solid #b3f7ff;
}

.program-participation-diagram--cyan .program-participation-layer--l2 .program-participation-layer-sub,
.program-participation-diagram--cyan .program-participation-layer--l3 .program-participation-layer-sub {
  color: #ffffff;
}

/* NVIDIA palette */
.program-participation-diagram--lavender .program-participation-layer--l1 {
  background: linear-gradient(135deg, #dfe0fb 0%, #ecdff7 100%);
}

.program-participation-diagram--lavender .program-participation-layer--l2 {
  background: linear-gradient(135deg, #c9b8ee 0%, #b4b7f6 100%);
}

.program-participation-diagram--lavender .program-participation-layer--l3 {
  background: linear-gradient(135deg, #b4aaf0 0%, #a9b2f6 100%);
  border: 1px solid rgba(255, 255, 255, 0.5);
}

.program-participation-diagram--lavender .program-participation-layer--l2 .program-participation-layer-sub {
  color: #ffffff;
}

/* ---- Chips ---- */
.program-participation-chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 5px;
  margin-bottom: 10px;
}

.program-participation-chips span {
  padding: 1px 9px;
  border: 1px solid #ffffff;
  border-radius: 999px;
  font-size: 12.5px;
  color: var(--color-navy);
  cursor: default;
  transition: background 0.25s ease, color 0.25s ease, transform 0.25s ease;
}

.program-participation-chips span:hover {
  background: var(--color-navy);
  color: var(--color-aqua);
  transform: translateY(-2px);
}

/* ---- Dark pill ---- */
.program-participation-pill {
  display: flex;
  align-items: center;
  gap: 10px;
  text-align: left;
  padding: 8px 16px 8px 8px;
  border-radius: 12px;
  background: linear-gradient(90deg, #0d1834 0%, #2a3f8f 55%, #5b7cf0 100%);
  border: 1px solid rgba(255, 255, 255, 0.35);
  transition: box-shadow 0.35s ease, transform 0.35s ease;
}

.program-participation-pill:hover {
  transform: scale(1.02);
  box-shadow: 0 0 20px rgba(104, 142, 251, 0.7);
}

.program-participation-pill-icon {
  width: 42px;
  height: 46px;
  object-fit: contain;
  flex-shrink: 0;
  transition: transform 0.6s ease;
}

.program-participation-pill:hover .program-participation-pill-icon {
  transform: rotate(180deg) scale(1.12);
}

.program-participation-pill-text {
  font-family: "TeX Gyre Pagella", serif;
  font-size: 19px;
  font-weight: 700;
  line-height: 1.1;
  color: #ffffff;
}

.program-participation-pill-text em {
  font-family: "Manrope", sans-serif;
  font-style: normal;
  font-weight: 500;
  font-size: 15px;
  color: #b3d4ff;
}

.program-participation-pill-sub {
  font-family: "Manrope", sans-serif;
  font-size: 14px;
  font-weight: 500;
  color: var(--color-lavender);
  margin-top: 2px;
}

/* ---- Why it matters ---- */
.program-participation-why {
  margin-top: 10px;
  text-align: center;
  font-size: 11px;
  line-height: 1.35;
  color: var(--color-navy);
}

.program-participation-why b {
  font-weight: 600;
  color: var(--color-periwinkle);
}

.program-participation-diagram--lavender .program-participation-why b {
  color: var(--color-lavender);
}

/* ---- Info area ---- */
.program-participation-info {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  padding: 0 6px;
  position: relative;
}

/* ---- NVIDIA logo badge ---- */
.program-participation-nvidia-logo {
  position: absolute;
  top: -12px;
  right: -18px;
  display: flex;
  align-items: center;
  gap: 10px;
  /* border: 1px solid #e0e0e0; */
  border-radius: 10px;
  padding: 8px 14px;
  background: #ffffff;
}

.program-participation-nvidia-icon {
  width: 40px;
  height: auto;
  flex-shrink: 0;
}

.program-participation-nvidia-text {
  display: flex;
  flex-direction: column;
  border-left: 1px solid #cccccc;
  padding-left: 10px;
}

.program-participation-nvidia-name {
  font-family: 'Manrope', sans-serif;
  font-size: 13px;
  font-weight: 700;
  color: var(--color-navy);
  line-height: 1.2;
  letter-spacing: 0.5px;
}

.program-participation-nvidia-program {
  font-family: 'Manrope', sans-serif;
  font-size: 11px;
  font-weight: 600;
  color: var(--color-navy);
  line-height: 1.3;
}


.program-participation-kicker {
  font-size: 12px;
  letter-spacing: 0.2px;
  color: var(--color-periwinkle);
  margin-bottom: 2px;
  font-weight: 700;
}

.program-participation-kicker--lav {
  color: var(--color-lavender);
}

.program-participation-card-title {
  font-size: 30px;
  font-weight: 700;
  line-height: 1.15;
  color: var(--color-navy);
  margin-bottom: 8px;
  padding-top: 10px;
}

.program-participation-highlight {
  font-size: 14px;
  line-height: 1.4;
  color: var(--color-periwinkle);
  margin-bottom: 4px;
  font-weight: 500;
}

.program-participation-highlight--lav {
  color: var(--color-dark-lavender);
}

.program-participation-desc {
  font-size: 13px;
  line-height: 1.55;
  color: var(--color-navy);
  margin-bottom: 20px;
  flex-grow: 1;
}

/* ---- Button ---- */
.program-participation-btn {
  position: relative;
  overflow: hidden;
  align-self: flex-start;
  padding: 11px 17px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 700;
  color: #ffffff;
  background: linear-gradient(90deg, #0d1834 0%, #2a3f8f 60%, #688efb 100%);
  border: 1px solid #0d1834;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.program-participation-btn::before {
  content: "";
  position: absolute;
  top: 0;
  left: -120%;
  width: 60px;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(179, 247, 255, 0.55), transparent);
  transform: skewX(-25deg);
  transition: left 0.6s ease;
}

.program-participation-btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 0 20px rgba(104, 142, 251, 0.6);
  color: #ffffff;
}

.program-participation-btn:hover::before {
  left: 130%;
}

/* ---- Footnote ---- */
.program-participation-footnote {
  margin-top: 14px;
  font-size: 11px;
  line-height: 1.4;
  color: var(--color-navy);
}

/* ====================================================
    Combained  Media Queries 
    (case study tablet/mobile rules live at the bottom
     of this file, not in these blocks)
   ==================================================== */

@media screen and (max-width: 1100px) {
  .drBg-section-middle {
    flex: 0 0 380px;
  }

  .drBg-section-middle-img {
    max-width: 380px;
  }

  .drBg-section-content {
    max-width: 95%;
  }

  .drBg-section-p1 {
    font-size: 25px !important;
    margin-top: 50px;
  }

  .program-participation {
    padding: 60px 20px;
  }

  .program-participation-card-title {
    font-size: 28px;
  }

  .program-participation-pill-text {
    font-size: 16px;
  }

  .program-participation-layer-title {
    font-size: 15px;
  }

  .newbg-journey {
    padding: 10px 60px 45px;
  }

  .newbg-journey-title {
    font-size: 34px;
    max-width: 75%;
  }
}

/* Media Query for Tablet (501px - 800px) */
@media screen and (min-width: 501px) and (max-width: 800px) {

  .new-home-platfrom {
    padding: 80px 40px !important;
  }

  .drBg-section-block1 {
    flex-direction: column;
    align-items: center;
  }

  /* drBg-section specific */
  .drBg-section {
    padding: 80px 40px;
  }

  .drBg-section-bg {
    width: 100%;
    opacity: 0.35;
  }

  .drBg-section-bg-overlay {
    background: linear-gradient(90deg, #0b1a33 0%, rgba(11, 26, 51, 0.9) 60%, rgba(11, 26, 51, 0.6) 100%);
  }

  .drBg-section-container {
    flex-direction: column;
    align-items: center;
    gap: 35px;
  }

  .drBg-section-content {
    max-width: 100%;
  }

  .drBg-section-middle {
    flex: 0 0 auto;
    width: 100%;
    max-width: 360px;
  }

  .drBg-section-middle-img {
    max-width: 360px;
  }

  /* hero specific */
  .newHome-hero-title {
    font-size: 25px !important;
  }

  .newHome-hero-title {
    padding-top: 49px;
  }

  /* sec7 specific */
  .newHome-sec7 {
    padding: 80px 40px;
  }

  .newHome-sec7-title {
    line-height: 48px;
    margin-bottom: 40px;
  }

  .newHome-sec7-image {
    width: 90%;
  }

  /* health section start */

  .new_health-section {
    padding: 80px 40px;
  }

  .new_health-top-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .new_health-bottom-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
  }

  .new_health-card-body {
    padding: 24px;
  }

  .new_health-card-title {
    font-size: 36px !important;
    max-width: 600px;
  }

  .new_health-card-img-wrapper {
    height: 230px;
  }

  .new_health-card-kicker {
    font-size: 16px;
  }

  .new_health-card-desc {
    font-size: 22px !important;
  }

  .new_health-btn {
    font-size: 22px;
  }

  .new_health-mini-title,
  .new_health-mini-desc {
    font-size: 18px !important;
  }

  /* health section end */

  /* sec4 specific */
  .newHome-sec4 {
    padding: 80px 40px;
  }


  .newHome-sec4-card {
    max-width: 650px;
  }

  .newHome-sec4-cards {
    flex-direction: column;
    gap: 40px;
    align-items: center;
    justify-content: center;
  }

  /* .newHome-sec4-title replaced by .comman-heading-line */


  .newHome-sec4-avatar-img {
    width: 95px;
    height: 95px;

  }

  /* sec5 specific
     (publications .stage padding is now handled in the
      PUBLICATIONS block further down) */
  .newHome-sec5 {
    padding: 80px 40px;
  }


  .newHome-sec5-cards {
    flex-direction: column;
    align-items: center;
    gap: 30px;
  }

  .newHome-sec5-card {
    width: 100%;
    max-width: 630px;
  }

  /* .newHome-sec5-title removed — now uses .comman-heading-line */

  .program-participation {
    padding: 80px 40px;
  }

  .program-participation-grid {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .program-participation-card-title {
    font-size: 32px;
  }

  .program-participation-layer-title {
    font-size: 17px;
  }

  .program-participation-pill-text {
    font-size: 19px;
  }

  .lead,
  .audience p {
    font-size: 19px !important;
    line-height: 1.4;
    max-width: 100% !important;
  }

  .audience h3 {
    font-size: 28px !important;
  }

  .newHome-sec4 {
    padding: 80px 40px !important;
  }
}

/* Media Query for Mobile (max-width: 500px) */
@media screen and (max-width: 500px) {

  .drBg-section-block1 {
    flex-direction: column;
    align-items: center;
  }

  /* drBg-section specific */
  .drBg-section {
    padding: 60px 20px;
  }

  .drBg-section-bg {
    width: 100%;
    opacity: 0.25;
  }

  .drBg-section-bg-overlay {
    background: #0b1a33;
    opacity: 0.8;
  }

  .drBg-section-container {
    flex-direction: column;
    align-items: center;
    gap: 25px;
  }

  .drBg-section-content {
    max-width: 100%;
    gap: 18px;
  }

  .drBg-section-p1 {
    font-size: 32px !important;
    line-height: 1.3;
  }

  .drBg-section-p1 br{
    display: none;
  }

  .drBg-section-title {
    font-size: 15px;
  }

  .drBg-section-text {
    font-size: 14px;
    line-height: 1.55;
  }

  .drBg-section-middle {
    flex: 0 0 auto;
    width: 100%;
    max-width: 280px;
  }

  .drBg-section-middle-img {
    max-width: 280px;
  }


  /* health section start */
  .new_health-section {
    padding: 60px 20px;
  }

  .new_health-top-grid {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .new_health-bottom-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .new_health-card-img-wrapper {
    height: 180px;
  }

  .new_health-card-body {
    padding: 20px;
  }

  .new_health-card-title {
    font-size: 24px !important;
  }

  .new_health-card-desc {
    font-size: 13.5px;
    margin-bottom: 20px;
  }

  .new_health-btn {
    width: 100%;
    padding: 11px 20px;
  }

  /* health section end */

  /* hero specific */
  .newHome-hero-content {
    top: 5%;
  }

  .newHome-hero-title {
    font-size: 11px !important;
  }

  .newHome-hero-title {
    padding-top: 10px;
  }

  /* sec7 specific */
  .newHome-sec7 {
    padding: 60px 20px;
  }

  .newHome-sec7-title {
    font-size: 20px !important;
    line-height: 30px;
    margin-bottom: 32px;
  }

  .newHome-sec7-image {
    width: 100%;
  }

  /* sec4 specific */
  .newHome-sec4 {
    padding: 60px 20px;
  }



  .newHome-sec4-cards {
    flex-direction: column;
    gap: 35px;
  }

  /* .newHome-sec4-title replaced by .comman-heading-line */

  .newHome-sec4-quote {
    padding: 20px 20px 35px 20px;
  }

  .newHome-sec4-quote p {
    font-size: 12.5px;
    line-height: 1.55;
  }

  .newHome-sec4-author {
    padding: 14px 16px;
    gap: 12px;
    flex-wrap: wrap;
  }

  .newHome-sec4-avatar-img {
    width: 80px;
    height: 80px;
    /* margin-top: -25px; */
  }

  .newHome-sec4-author-info h4 {
    font-size: 15px;
  }

  .newHome-sec4-author-info p {
    font-size: 11px;
  }

  .newHome-sec4-logo-img {
    max-height: 38px;
    max-width: 100px;
  }

  /* sec5 specific */
  .newHome-sec5 {
    padding: 60px 20px;
  }

  .newHome-sec5-cards {
    flex-direction: column;
    gap: 25px;
  }

  .newHome-sec5-card {
    width: 100%;
    --sec5-img-h: 180px;
  }

  .newHome-sec5-card-image {
    height: 180px;
  }

  /* .newHome-sec5-title removed — now uses .comman-heading-line */

  .newHome-sec5-card-name {
    font-size: 17px;
  }

  .newHome-sec5-card-logo-img {
    max-height: 35px;
    max-width: 95px;
  }

  /* (publications nature-logo / stage / section-title rules moved to
     the PUBLICATIONS block further down) */


  /* inside @media screen and (max-width: 500px) { ... } */
  .program-participation {
    padding: 60px 20px;
  }

  .program-participation-grid {
    grid-template-columns: 1fr;
    gap: 22px;
  }

  .program-participation-subtitle {
    font-size: 14px;
    margin-left: 0;
  }

  .program-participation-card {
    padding: 14px 12px 22px;
    border-radius: 18px;
  }

  .program-participation-legend {
    font-size: 9.5px;
    left: 10px;
    padding: 0 6px;
  }

  .program-participation-diagram {
    padding: 26px 6px 10px;
  }

  .program-participation-layer {
    padding: 8px 8px 10px;
  }

  .program-participation-layer-title {
    font-size: 13.5px;
  }

  .program-participation-layer-sub {
    font-size: 11.5px;
  }

  .program-participation-chips span {
    font-size: 10.5px;
    padding: 1px 7px;
  }

  .program-participation-pill {
    padding: 6px 10px 6px 6px;
    gap: 6px;
  }

  .program-participation-pill-icon {
    width: 30px;
    height: 34px;
  }

  .program-participation-pill-text {
    font-size: 14px;
  }

  .program-participation-pill-text em,
  .program-participation-pill-sub {
    font-size: 11.5px;
  }

  .program-participation-why {
    font-size: 10px;
  }

  .program-participation-card-title {
    font-size: 22px !important;
  }

  .program-participation-highlight {
    font-size: 13px;
  }

  .program-participation-desc {
    font-size: 13px;
  }

  .program-participation-btn {
    align-self: stretch;
    text-align: center;
    font-size: 12.5px;
  }

  .program-participation-footnote {
    font-size: 9.5px;
  }

  .newHome-sec5-more-icon {
    width: 105px;
    height: 95px;
  }
}

/* ====================================================
   CSS for platform section
   ==================================================== */
:root {
  --bg-deep: #0c1a44;
  --bg-mid: #3446a6;
  --cyan: #8de8ef;
  --cyan-strong: #1db4e4;
  --violet: #c49de6;
  --violet-strong: #9c6cc9;
  --white: #ffffff;
  --text: #e9edff;
  --serif: "TeX Gyre Pagella", serif;
  --sans: "Manrope", sans-serif;
}

.new-home-platfrom img {
  display: block;
  max-width: 100%;
}

/* ---------- Section ---------- */
.new-home-platfrom {
  /* min-height: 100vh; */
  padding: 100px;
  /* background:
    radial-gradient(ellipse 70% 60% at 30% 25%, rgba(70, 90, 190, 0.55), transparent 70%),
    radial-gradient(ellipse 60% 70% at 75% 70%, rgba(75, 95, 210, 0.6), transparent 70%),
    linear-gradient(180deg, #13245a 0%, #2b3b92 55%, #1a2a6c 100%); */
  /* background-image: url(../images/new-homebg-2.webp); */
  /* background:
    linear-gradient(to bottom,
      rgba(5, 20, 45, 0) 0%,
      rgba(5, 20, 45, 0.05) 50%,
      rgba(5, 20, 45, 0.30) 100%),
    linear-gradient(90deg,
      rgba(11, 30, 58, 0.96) 0%,
      rgba(26, 53, 100, 0.90) 22%,
      rgba(54, 90, 159, 0.78) 42%,
      rgba(70, 111, 196, 0.72) 50%,
      rgba(54, 90, 159, 0.78) 58%,
      rgba(26, 53, 100, 0.90) 78%,
      rgba(11, 30, 58, 0.96) 100%),
    url("../images/medicalBg.webp"); */

  background-image: url(../images/blue-bg.webp);
  background-size: cover;
  background-position: top;
  overflow: hidden;
  font-family: var(--sans);
  /* color: var(--text); */
  color: white;
  -webkit-font-smoothing: antialiased;
}

.eyebrow {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 22px clamp(0px, 1vw, 12px);
  font-size: 14px;
  letter-spacing: 0.02em;
  color: #8ea4ff;
}

.eyebrow i {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, #6f86ff, rgba(111, 134, 255, 0.4));
}

.platform__grid {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.4fr);
  gap: clamp(32px, 6vw, 110px);
  align-items: start;
  /* max-width: 1280px; */
  margin: 0 auto;
}

/* ---------- Copy ---------- */
.copy {
  padding-top: 4px;
}

.copy h1 {
  font-family: var(--serif);
  font-weight: 700;
  font-size: 40px;
  line-height: 1.2;
  color: var(--white);
  letter-spacing: -0.005em;
}

.copy h1 .accent {
  color: var(--color-aqua);
  font-family: var(--serif) !important;


}

.lead {
  margin-top: 36px;
  font-size: 20px !important;
  line-height: 1.4;
  max-width: 100%;
  font-weight: 600;
}

.audience {
  margin-top: 14px;
}

.audience h3 {
  font-family: var(--serif);
  font-weight: 700;
  font-size: 25px;
  line-height: 1.15;
}

.audience p {
  font-size: 17px;
  line-height: 1.4;
  max-width: 100%;
  font-weight: 600;

}

.cyan {
  color: var(--color-aqua);
}

.violet {
  color: var(--color-lavender);
}

.platform_cto_btn {
  display: flex;
  flex-wrap: wrap;
  gap: 30px;
  margin-top: 50px;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 12px;
  min-width: 168px;
  border-radius: 999px;
  font-size: 11.5px;
  color: #10204a;
  text-decoration: none;
  transition: transform 0.2s, box-shadow 0.2s;
  font-weight: 700;
}

.btn--cyan {
  background: #7fe3ec;

}

.btn--violet {
  background: #b37ee0;
  min-width: 168px;
}

.btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
}

/* ---------- Diagram ---------- */
.diagram {
  border: 1px solid rgba(160, 180, 255, 0.45);
  border-radius: 12px;
  padding: 16px 10px 12px;
  background: linear-gradient(180deg, rgba(13, 26, 66, 0.92), rgba(18, 34, 84, 0.92));
  box-shadow: 0 20px 50px rgba(5, 10, 40, 0.5);
}

.diagram__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 6px 16px;
  border: 1px solid rgba(110, 150, 255, 0.45);
  border-radius: 10px;
  background: linear-gradient(180deg, rgba(40, 70, 160, 0.4), rgba(30, 55, 135, 0.35));
  text-align: center;
}

.diagram__head h2 {
  font-family: var(--serif);
  font-weight: 800;
  font-size: clamp(17px, 1.6vw, 20px);
  color: var(--white);
  font-size: 24px;
}

.diagram__head p {
  font-size: clamp(11px, 1.05vw, 14px);
  color: #8ee6f5;
}

.sparkle {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
}

.sparkle path {
  fill: none;
  stroke: #8fa8ff;
  stroke-width: 1.6;
  stroke-linejoin: round;
}

.sparkle path.small {
  stroke: #6fb7ff;
  filter: drop-shadow(0 0 3px rgba(120, 180, 255, 0.6));
}

/* products row */
.products {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1.4fr 1fr;
  margin-top: 100px;
  min-height: 300px;
}

.hero-img {
  grid-column: 1 / -1;
  grid-row: 1;
  justify-self: center;
  width: 50%;
  margin-top: 10px;
  margin-bottom: 12px;
  border-radius: 4px;
  overflow: hidden;
  /* Background image replaces the <img> tag */
  background-image: url('../images/platform-mid.webp');
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
  /* Natural-flow text sits at the bottom */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  text-align: center;
  padding: 0 12px 16px;
  /* Ensure the div has height since there is no img child anymore */
  min-height: 300px;
}

.hero-img-label {
  font-family: "TeX Gyre Pagella", serif !important;
  font-size: 35px;
  font-weight: 800;
  color: #fff;
  line-height: 1.1;
  padding-bottom: 130px;
  letter-spacing: 0.02em;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.7);
}

.hero-img-sub {
  font-family: "TeX Gyre Pagella", serif !important;
  font-size: 16px;
  font-weight: 800;
  color: #fff;
  line-height: 1.3;
  margin-top: 4px;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.6);
}

.hero-img-tagline {
  font-family: "Manrope", sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #fff;
  margin-top: 3px;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.5);
}

.product {
  grid-row: 1;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 26px 6px 8px;
  border-radius: 10px;
  z-index: 1;
}

.product--clinic {
  grid-column: 1;
  background: linear-gradient(180deg, #2ec4ec 0%, #13a8dc 100%);
  box-shadow: 0 0 0 1px rgba(150, 230, 255, 0.5);
}

.product--pharma {
  grid-column: 3;
  margin-bottom: 12px;
  background: linear-gradient(180deg, #a77ad3 0%, #9265c4 100%);
  box-shadow: 0 0 0 1px rgba(220, 190, 255, 0.5);
}

.orb {
  position: absolute;
  top: -90px;
  width: 115px;
  height: 115px;
  border-radius: 50%;
  overflow: hidden;
  border: 2px solid rgba(190, 210, 255, 0.85);
  box-shadow: 0 0 18px rgba(120, 170, 255, 0.45);
  z-index: 2;
}

.product--clinic .orb {
  right: -45px;
}

.product--pharma .orb {
  left: -40px;
}

.orb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.tag {
  align-self: stretch;
  font-size: 7.5px;
  letter-spacing: 0.02em;
  color: #102048;
}

.product--pharma .tag {
  text-align: right;
  padding-right: 6px;
}

.product--clinic .tag {
  padding-left: 6px;
}

.product h3 {
  margin: 14px 0 18px;
  font-family: var(--serif);
  font-weight: 900;
  font-size: clamp(16px, 1.55vw, 20px);
  line-height: 1.2;
  color: var(--white);
  text-align: center;
  /* max-width: 11ch; */
}

.product ul {
  list-style: none;
  flex: 1;
  width: 100%;
  padding: 12px 10px;
  border-radius: 8px;
  font-size: 12px;
  line-height: 1.7;
  color: #10204a;
}

.product--clinic ul {
  background: #e4f4fb;
}

.product--pharma ul {
  background: #e6d9f0;
}

.product li {
  position: relative;
  padding-left: 10px;
}

.product li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.72em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
}

.product--clinic li::before {
  background: #1db4e4;
}

.product--pharma li::before {
  background: #a77ad3;
}

/* engine */
.engine {
  margin-top: 14px;
  padding: 8px 8px 8px;
  border-radius: 10px;
  background: linear-gradient(90deg, #22b4e6 0%, #3d8fe6 50%, #6a6fe0 100%);
  box-shadow: 0 0 0 1px rgba(180, 210, 255, 0.5);
  text-align: center;
}

.engine h3 {
  font-family: var(--serif);
  font-weight: 700;
  font-size: clamp(17px, 1.6vw, 20px);
  color: var(--white);
  margin-bottom: 4px;
}

.engine__pill {
  position: relative;
  padding: 6px 12px;
  border-radius: 6px;
  background: rgba(220, 238, 255, 0.85);
  font-size: 12px;
  color: #10204a;
}

.engine__pill::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-right: 8px;
  vertical-align: middle;
  border-radius: 50%;
  background: var(--color-periwinkle);
}

/* sources */
.sources {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 10px;
  padding: 8px 10px;
  border-radius: 10px;
  background: linear-gradient(to left, rgb(13, 24, 52) 0%, rgb(53, 75, 160) 60%, rgb(104, 142, 251) 100%);
  box-shadow: 0 0 0 1px rgba(180, 230, 240, 0.5);

}

.sources span {
  font-family: "TeX Gyre Pagella", serif !important;
  font-weight: 900;
  font-size: 19px;
  letter-spacing: -0.01em;
  color: var(--white);

}

.sources span+span::before {
  content: "|";
  margin: 0 0.35em;
  font-weight: 900;
}

/* ---------- Responsive ---------- */
@media (max-width: 1080px) {
  .platform__grid {
    grid-template-columns: 1fr;
  }

  .copy h1 br.lg {
    display: none;
  }

  .diagram {
    max-width: 780px;
    width: 100%;
    margin: 0 auto;
  }
}

@media (max-width: 640px) {
  .new-home-platfrom {
    /* padding-bottom: 40px; */
    padding: 60px 20px;
  }

  .lead {
    margin-top: 24px;
  }

  .platform_cto_btn {
    gap: 14px;
    margin-top: 32px;
  }

  .btn {
    flex: 1 1 200px;
  }

  .sparkle {
    width: 28px;
    height: 28px;
  }

  .products {
    grid-template-columns: 1fr;
    row-gap: 84px;
    margin-top: 70px;
  }

  .hero-img {
    grid-row: 2;
    width: 100%;
    margin: -64px 0 0;
    border-radius: 8px;
  }

  .product--clinic {
    grid-column: 1;
    grid-row: 1;
  }

  .product--pharma {
    grid-column: 1;
    grid-row: 3;
    margin-bottom: 0;
  }

  .product--pharma ul {
    min-height: 60px;
  }

  .orb {
    width: 96px;
    height: 96px;
    top: -64px;
  }

  .product--clinic .orb {
    right: auto;
    left: 50%;
    transform: translateX(-50%);
  }

  .product--pharma .orb {
    left: 50%;
    transform: translateX(-50%);
  }

  .tag {
    font-size: 9px;
    text-align: center !important;
    padding: 34px 0 0 !important;
  }

  .product h3 {
    max-width: none;
  }

  .product ul {
    font-size: 14px;
  }

  .sources {
    font-size: 15px;
    line-height: 1.6;
  }
}

/* ---------- Publications Section ---------- */
.publications-section {
  position: relative;
  width: 100%;
  overflow: hidden;
  --navy: #121f3d;
  --navy-2: #142b4a;
  --blue: #4c78e8;
  --label-blue: #6d8de2;
  --cyan: #67d8ef;
  --purple: #a987df;
  --pink: #d987e8;
  --green: #35b88a;
  --text: #1d2433;
  --muted: #3a4150;
  --serif: "Manrope", sans-serif;
  --sans: "TeX Gyre Pagella", serif !important;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  font-family: var(--sans);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
}

/* ---------- Background ---------- */
.publications-section .bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  background-image: url(../images/light_bg.webp);
  background-size: cover;
}

/* ---------- Heading (outside the scaled canvas) ---------- */
.publications-section-heading {
  position: relative;
  z-index: 1;
  padding: 100px 100px 20px 100px;
}


.publications-section .viewport {
  position: relative;
  z-index: 1;
  width: 100%;
  overflow: hidden;
}

.publications-section .stage {
  position: relative;
  /* width: 2000px; */
  height: 750px;
  transform-origin: 0 0;
}

/* ---------- Reveal animation ---------- */
.publications-section .reveal {
  opacity: 0;
  transform: translateY(15px);
  transition: opacity 700ms var(--ease), transform 700ms var(--ease);
}

.publications-section .reveal.in {
  opacity: 1;
  transform: translateY(0);
}

/* ---------- Header ---------- */
.publications-section .page-title {
  position: absolute;
  left: 168px;
  top: 78px;
  font-family: var(--serif);
  font-weight: 700;
  font-size: 58px;
  line-height: 1;
  letter-spacing: 0.2px;
  color: var(--navy);
}

.publications-section .title-rule {
  position: absolute;
  left: 165px;
  top: 152px;
  width: 1670px;
  height: 1.5px;
  background: #9fb2ea;
}

/* ---------- Card base ---------- */
.publications-section .card {
  background: rgba(255, 255, 255, 0.97);
  border: 1px solid rgba(214, 220, 232, 0.9);
  border-radius: 14px;
  box-shadow:
    0 1px 2px rgba(20, 35, 70, 0.06),
    4px 8px 16px rgba(20, 35, 70, 0.13);
}

/* ---------- Left publication card ---------- */
.publications-section .pub-card {
  position: absolute;
  left: 165px;
  top: 23px;
  width: 438px;
  height: 678px;
  padding: 0 16px;
  box-shadow:
    0 1px 2px rgba(20, 35, 70, 0.06),
    6px 9px 16px rgba(20, 35, 70, 0.18);
}

.publications-section .nature-logo {
  position: absolute;
  right: 37px;
  top: 18px;
  font-weight: 800;
  font-size: 64px;
  line-height: 1;
  letter-spacing: -2.6px;
  color: #000;
  font-variation-settings: "opsz" 60;
}

.publications-section .summary-box {
  position: absolute;
  left: 17px;
  width: 404px;
  border-radius: 14px;
  font-size: 14.2px;
  line-height: 17.4px;
  letter-spacing: -0.25px;
  color: #111;
  hyphens: auto;
  -webkit-hyphens: auto;
}

.publications-section .summary-box b {
  font-weight: 700;
}

.publications-section .summary-box.blue {
  top: 90px;
  height: 100px;
  padding: 13px 14px 0 14px;
  border: 1.5px solid var(--color-periwinkle);
  box-shadow: 0 2px 6px rgba(80, 110, 200, 0.12);
}

.publications-section .summary-box.green {
  left: 21px;
  top: 414px;
  height: 80px;
  padding: 15px 9px 0 9px;
  font-size: 13.6px;
  line-height: 17.6px;
  letter-spacing: -0.3px;
  border: 1.5px solid var(--color-green);
  box-shadow: 0 2px 6px rgba(60, 170, 120, 0.12);
}

.publications-section .stat {
  position: absolute;
  left: 33px;
  width: 380px;
}

.publications-section .stat-1 {
  top: 200px;
}

.publications-section .stat-2 {
  top: 508px;
}

.publications-section .stat-num {
  font-weight: 700;
  font-size: 52px;
  line-height: 56px;
  letter-spacing: -0.5px;
  color: var(--navy);
}

.publications-section .stat-num small {
  font-size: 40px;
  font-weight: 700;
  letter-spacing: 0;
}

.publications-section .stat-label {
  margin-top: 6px;
  font-weight: 600;
  font-size: 20.5px;
  line-height: 24px;
  letter-spacing: -0.3px;
  text-transform: uppercase;
}

.publications-section .stat-1 .stat-label {
  color: var(--color-periwinkle);
  font-weight: 700;
}

.publications-section .stat-2 .stat-label {
  color: var(--color-green);
  margin-top: 8px;
  font-weight: 700;
}

.publications-section .stat-text {
  font-size: 17.5px;
  line-height: 22.5px;
  letter-spacing: -0.75px;
  color: #1f2430;
  hyphens: auto;
  -webkit-hyphens: auto;
}

.stat-num span {
  font-family: 'TeX Gyre Pagella', serif !important;
}

.publications-section .stat-1 .stat-text {
  margin-top: 2px;
}

.publications-section .stat-2 .stat-text {
  font-size: 18px;
  letter-spacing: -0.6px;
  width: 300px;
}

.publications-section .stat-text b {
  font-weight: 600;
  color: #11151f;
}

.publications-section .dashed {
  position: absolute;
  left: 33px;
  top: 393px;
  width: 372px;
  border-top: 1.4px dashed #9aa1ad;
}

/* ---------- Section heading ---------- */
.publications-section .section-title {
  position: absolute;
  left: 631px;
  top: 16px;
  font-weight: 700;
  font-size: 35px;
  line-height: 44px;
  letter-spacing: 0.1px;
  color: var(--navy);
}

/* ---------- Chart cards ---------- */
.publications-section .charts {
  position: absolute;
  left: 630px;
  top: 75px;
  display: flex;
  gap: 15px;
}

.publications-section .chart-card {
  position: relative;
  width: 197px;
  height: 272px;
  border-radius: 14px;
}

.publications-section .chart-card:nth-child(2) {
  margin-left: 1px;
}

.publications-section .chart-title {
  position: absolute;
  left: 12px;
  top: 19px;
  font-size: 17px;
  line-height: 22px;
  font-weight: 600;
  color: #1d2230;
  font-family: "Manrope", sans-serif !important;
  letter-spacing: -0.4px;
}

.publications-section .bars {
  position: absolute;
  left: 12px;
  bottom: 52px;
  height: 170px;
  display: flex;
  align-items: flex-end;
  gap: 4.3px;
}

.publications-section .bar {
  position: relative;
  width: 15px;
  height: 0;
  border-radius: 3px 3px 1px 1px;
}

/* Continuous 0 -> target -> 0 loop; --h and --d are set per bar by JS */
.publications-section .bar.loop {
  animation: barLoop var(--loop, 3600ms) infinite;
  animation-delay: var(--d, 0ms);
  animation-fill-mode: backwards;
}

@keyframes barLoop {
  0% {
    height: 0;
    animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
  }

  42%,
  58% {
    height: var(--h);
    animation-timing-function: cubic-bezier(0.65, 0, 0.35, 1);
  }

  100% {
    height: 0;
  }
}

.publications-section .bar.g {
  width: 32px;
  margin-left: 0.5px;
  border-radius: 4px 4px 2px 2px;
}

.publications-section .score {
  position: absolute;
  right: 0;
  bottom: calc(100% + 4px);
  font-size: 12.5px;
  line-height: 1;
  font-weight: 500;
  letter-spacing: -0.1px;
  opacity: 0;
  transition: opacity 500ms ease;
  white-space: nowrap;
}

.publications-section .bar.g.grown .score {
  opacity: 1;
}

.publications-section .chart-rule {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 41px;
  height: 1.5px;
}

.publications-section .chart-foot {
  position: absolute;
  left: 7px;
  right: 11px;
  bottom: 11px;
  display: flex;
  justify-content: space-between;
  font-size: 17.5px;
  line-height: 22px;
  letter-spacing: -0.55px;
  color: #1d2230;
}

/* per-card palettes */
.publications-section .c1 .bar {
  background: linear-gradient(180deg, #d5e1ea 0%, #c3eef7 60%, #b6f0fa 100%);
}

.publications-section .c1 .bar.g {
  background: linear-gradient(180deg, #b5f0fb 0%, #8fd9f3 45%, #69b9e9 100%);
}

.publications-section .c1 .chart-rule {
  background: #bfeef7;
}

.publications-section .c1 .score,
.publications-section .c1 .gs {
  color: #6fb6e6;
}

.publications-section .c2 .bar {
  background: linear-gradient(180deg, #d7dcf3 0%, #9fb0ee 45%, #5c7ae6 100%);
}

.publications-section .c2 .bar.g {
  background: linear-gradient(180deg, #7d98f0 0%, #6c89ee 50%, #6382ec 100%);
}

.publications-section .c2 .chart-rule {
  background: #c4d0f6;
}

.publications-section .c2 .score,
.publications-section .c2 .gs {
  color: #5f80ea;
}

.publications-section .c3 .bar {
  background: linear-gradient(180deg, #e8e0f2 0%, #c9b6ea 50%, #a68ddf 100%);
}

.publications-section .c3 .bar.g {
  background: linear-gradient(180deg, #b9a2e7 0%, #ac94e2 50%, #a68ddf 100%);
}

.publications-section .c3 .chart-rule {
  background: #ddd2f2;
}

.publications-section .c3 .score,
.publications-section .c3 .gs {
  color: #a78fe0;
}

.publications-section .c4 .bar {
  background: linear-gradient(180deg, #ede1f2 0%, #e6cbf2 50%, #ddb7ef 100%);
}

.publications-section .c4 .bar.g {
  background: linear-gradient(180deg, #efc9f5 0%, #e7b9f2 50%, #e1b1f0 100%);
}

.publications-section .c4 .chart-rule {
  background: #efdbf5;
}

.publications-section .c4 .score,
.publications-section .c4 .gs {
  color: #d99be9;
}

.publications-section .c5 .bar {
  background: linear-gradient(180deg, #8fd0b3 0%, #5cc298 50%, #3cb684 100%);
}

.publications-section .c5 .bar.g {
  background: linear-gradient(180deg, #5bc394 0%, #45b98a 50%, #36af80 100%);
}

.publications-section .c5 .chart-rule {
  background: #bfe6d5;
}

.publications-section .c5 .score,
.publications-section .c5 .gs {
  color: #3fb385;
}

/* ---------- Article card ---------- */
.publications-section .article-card {
  position: absolute;
  left: 630px;
  top: 371px;
  width: 622px;
  height: 333px;
  padding: 14px 18px 14px;
  display: flex;
  flex-direction: column;
  gap: 0;
  overflow: hidden;
}

.publications-section .npj-head {
  display: flex;
  align-items: baseline;
  white-space: nowrap;
  margin-bottom: 6px;
}

.publications-section .npj-mark {
  font-family: var(--sans);
  font-weight: 500;
  font-size: 33px;
  letter-spacing: -0.8px;
  color: #e3322f;
}

.publications-section .npj-bar {
  display: inline-block;
  width: 3px;
  height: 32px;
  margin: 0 15px 0 13px;
  background: #e3322f;
  transform: translateY(5px);
}

.publications-section .npj-name {
  font-family: var(--sans);
  font-weight: 400;
  font-size: 27px;
  letter-spacing: -0.8px;
  color: #15181f;
}

.publications-section .npj-rule {
  height: 1.5px;
  background: #b9c6ee;
  margin-bottom: 6px;
}

.publications-section .crumbs {
  font-size: 16.5px;
  line-height: 22px;
  letter-spacing: -0.45px;
  color: #1d2230;
  word-spacing: 0.5px;
  margin-bottom: 2px;
}

.publications-section .published {
  font-size: 13px;
  line-height: 16px;
  font-weight: 400;
  color: var(--color-periwinkle);
  text-transform: uppercase;
  letter-spacing: 0.1px;
  font-family: "Manrope", sans-serif !important;
  margin-top: 4px;
  margin-bottom: 4px;
}

.publications-section .article-title {
  font-family: "TeX Gyre Pagella", serif !important;
  font-weight: 700;
  font-size: 35px;
  line-height: 38px;
  letter-spacing: -0.1px;
  color: var(--navy);
  margin-bottom: 4px;
}

.publications-section .authors {
  font-size: 15px;
  line-height: 20px;
  color: var(--color-periwinkle);
}

/* ---------- Blue info card ---------- */
.publications-section .info-card {
  position: absolute;
  left: 1268px;
  top: 371px;
  width: 419px;
  height: 333px;
  border-radius: 18px;
  padding: 24px 22px;
  background: linear-gradient(180deg, #0d1834 0%, #1b2c5c 30%, #3d56aa 66%, #6683df 100%);
  box-shadow: 4px 8px 18px rgba(20, 35, 80, 0.22);
  color: #fff;
  display: flex;
  flex-direction: column;
  gap: 0;
  overflow: hidden;
}

.publications-section .info-kicker {
  font-weight: 600;
  font-size: 20px;
  line-height: 24px;
  letter-spacing: -0.5px;
  text-transform: uppercase;
  margin-bottom: 4px;
}

.publications-section .info-head {
  font-family: "TeX Gyre Pagella", serif !important;
  font-weight: 700;
  font-size: 29px;
  line-height: 36px;
  letter-spacing: 0.4px;
  color: var(--color-green);
  white-space: nowrap;
  margin-bottom: 8px;
}

.publications-section .info-rule {
  height: 1px;
  background: rgba(140, 175, 235, 0.55);
  margin-bottom: 12px;
}

.publications-section .info-body {
  font-size: 20px;
  line-height: 24.5px;
  letter-spacing: -0.6px;
  color: #fff;
  font-weight: 700;
}

/* ==========================================================
   PUBLICATIONS – TABLET + MOBILE (stacked flow layout)
   Desktop (≥900px) keeps the absolute-positioned canvas.
========================================================== */

/* ---------- Tablet + mobile shared (≤899px) ---------- */
@media (max-width: 899px) {

  .publications-section .viewport {
    overflow: visible;
  }

  .publications-section .stage {
    width: 100%;
    height: auto;
    transform: none !important;
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 0 40px 40px;
  }

  /* heading wrapper responsive */
  .publications-section-heading {
    padding: 60px 40px 16px 40px;
  }

  .publications-section .comman-heading-line {
    margin-bottom: 0;
  }

  /* ---- Reset every absolutely-positioned piece to normal flow ---- */
  .publications-section .stage .pub-card,
  .publications-section .stage .article-card,
  .publications-section .stage .info-card,
  .publications-section .stage .section-title,
  .publications-section .stage .charts,
  .publications-section .stage .summary-box,
  .publications-section .stage .stat,
  .publications-section .stage .dashed,
  .publications-section .stage .nature-logo {
    position: relative;
    left: auto;
    right: auto;
    top: auto;
    width: auto;
    height: auto;
  }

  /* ---- Left publication card ---- */
  .publications-section .pub-card {
    padding: 22px 20px 26px;
    display: flex;
    flex-direction: column;
    gap: 16px;
  }

  .publications-section .nature-logo {
    align-self: flex-end;
    font-size: 48px;
    letter-spacing: -2px;
  }

  .publications-section .stage .summary-box,
  .publications-section .stage .summary-box.blue,
  .publications-section .stage .summary-box.green {
    padding: 14px 16px;
    font-size: 15px;
    line-height: 1.5;
    letter-spacing: -0.1px;
  }

  .publications-section .stage .stat {
    padding: 0 4px;
  }

  .publications-section .stat-num {
    font-size: 46px;
    line-height: 50px;
  }

  .publications-section .stat-num small {
    font-size: 34px;
  }

  .publications-section .stat-label {
    font-size: 18px;
    line-height: 22px;
  }

  .publications-section .stage .stat-text,
  .publications-section .stage .stat-2 .stat-text {
    font-size: 16px;
    line-height: 1.4;
    letter-spacing: -0.2px;
    width: auto;
  }

  .publications-section .stage .dashed {
    margin: 2px 4px;
    width: auto;
  }

  /* ---- Section heading ---- */
  .publications-section .section-title {
    font-size: 28px !important;
    line-height: 1.25 !important;
    margin-top: 8px;
  }

  /* ---- Charts ---- */
  .publications-section .stage .charts {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(197px, 1fr));
    gap: 14px;
  }

  .publications-section .chart-card,
  .publications-section .chart-card:nth-child(2) {
    width: 100%;
    margin-left: 0;
  }

  .publications-section .chart-title {
    white-space: nowrap;
  }

  .publications-section .chart-title br {
    display: none;
  }

  .publications-section .bars {
    left: 50%;
    transform: translateX(-50%);
  }

  /* ---- Article card ---- */
  .publications-section .stage .article-card {
    padding: 18px 20px 22px;
    gap: 4px;
    overflow: visible;
  }

  .publications-section .npj-head {
    flex-wrap: wrap;
    white-space: normal;
    margin-bottom: 4px;
  }

  .publications-section .npj-mark {
    font-size: 28px;
  }

  .publications-section .npj-name {
    font-size: 22px;
  }

  .publications-section .npj-bar {
    height: 26px;
    margin: 0 12px 0 10px;
  }

  .publications-section .npj-rule {
    margin: 6px 0;
  }

  .publications-section .crumbs {
    font-size: 14px;
    line-height: 1.4;
    margin-bottom: 4px;
  }

  .publications-section .article-title {
    font-size: 30px;
    line-height: 1.2;
    margin: 4px 0 8px;
  }

  .publications-section .stage .article-title br {
    display: none;
  }

  .publications-section .authors {
    font-size: 14px;
    line-height: 1.5;
  }

  /* ---- Blue info card ---- */
  .publications-section .stage .info-card {
    padding: 24px 22px 26px;
    gap: 6px;
    overflow: visible;
  }

  .publications-section .info-kicker {
    font-size: 17px;
  }

  .publications-section .info-head {
    white-space: normal;
    font-size: 26px;
    line-height: 1.25;
  }

  .publications-section .info-rule {
    margin: 8px 0;
  }

  .publications-section .info-body {
    font-size: 18px;
    line-height: 1.4;
    letter-spacing: -0.2px;
  }
}

/* ---------- Tablet only (600px–899px): use the extra width ---------- */
@media (min-width: 600px) and (max-width: 899px) {

  .publications-section .stage {
    max-width: 760px;
    margin: 0 auto;
  }

  /* two stat blocks side by side inside the card */
  .publications-section .pub-card {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 24px;
    row-gap: 16px;
  }

  .publications-section .pub-card .nature-logo,
  .publications-section .pub-card .summary-box.blue,
  .publications-section .pub-card .summary-box.green {
    grid-column: 1 / -1;
  }

  .publications-section .pub-card .dashed {
    display: none;
  }

  /* DOM order: logo, blue, stat-1, dashed, green, stat-2
     → reorder so each summary sits above its own stat */
  .publications-section .pub-card .nature-logo {
    order: 0;
  }

  .publications-section .pub-card .summary-box.blue {
    order: 1;
  }

  .publications-section .pub-card .stat-1 {
    order: 2;
    grid-column: 1;
  }

  .publications-section .pub-card .summary-box.green {
    order: 3;
  }

  .publications-section .pub-card .stat-2 {
    order: 4;
    grid-column: 1 / -1;
  }
}

/* ---------- Mobile (≤600px) ---------- */
@media (max-width: 600px) {

  .publications-section-heading {
    padding: 60px 20px 12px 20px;
  }

  .publications-section .stage {
    padding: 0 20px 60px !important;
    gap: 18px;
  }

  .publications-section .pub-card {
    padding: 18px 14px 22px;
    gap: 14px;
  }

  .publications-section .nature-logo {
    font-size: 38px !important;
  }

  .publications-section .stage .summary-box,
  .publications-section .stage .summary-box.blue,
  .publications-section .stage .summary-box.green {
    font-size: 14px;
    padding: 12px;
  }

  .publications-section .stat-num {
    font-size: 40px;
    line-height: 44px;
  }

  .publications-section .stat-num small {
    font-size: 30px;
  }

  .publications-section .stat-label {
    font-size: 16px;
  }

  .publications-section .stage .stat-text,
  .publications-section .stage .stat-2 .stat-text {
    font-size: 15px;
  }

  .publications-section .section-title {
    font-size: 22px !important;
    line-height: 1.3 !important;
  }

  /* charts: 2-up with slimmer bars so nothing overflows */
  .publications-section .stage .charts {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }

  .publications-section .chart-card {
    height: 250px;
  }

  .publications-section .chart-title {
    font-size: 14px;
    line-height: 18px;
    left: 10px;
    top: 14px;
  }

  .publications-section .bars {
    height: 150px;
    gap: 3px;
    bottom: 48px;
  }

  .publications-section .bar {
    width: 11px;
  }

  .publications-section .bar.g {
    width: 24px;
  }

  .publications-section .score {
    font-size: 11px;
  }

  .publications-section .chart-foot {
    font-size: 14px;
    left: 6px;
    right: 6px;
  }

  /* article + info cards */
  .publications-section .stage .article-card {
    padding: 14px 14px 18px;
  }

  .publications-section .npj-mark {
    font-size: 24px;
  }

  .publications-section .npj-name {
    font-size: 18px;
  }

  .publications-section .npj-bar {
    height: 22px;
    margin: 0 10px 0 8px;
  }

  .publications-section .crumbs {
    font-size: 12px;
  }

  .publications-section .published {
    font-size: 12px;
  }

  .publications-section .article-title {
    font-size: 23px;
  }

  .publications-section .authors {
    font-size: 12.5px;
  }

  .publications-section .stage .info-card {
    padding: 20px 18px 22px;
  }

  .publications-section .info-kicker {
    font-size: 15px;
  }

  .publications-section .info-head {
    font-size: 22px;
  }

  .publications-section .info-body {
    font-size: 16px;
  }
}

/* ---------- Very small phones (≤380px): charts in one column ---------- */
@media (max-width: 380px) {
  .publications-section .stage .charts {
    grid-template-columns: 1fr;
  }

  .publications-section .bar {
    width: 15px;
  }

  .publications-section .bar.g {
    width: 32px;
  }
}


/* ---- NVIDIA logo badge – responsive ---- */
@media screen and (max-width: 900px) {
  .program-participation-nvidia-logo {
    padding: 6px 10px;
    gap: 7px;
  }

  .program-participation-nvidia-icon {
    width: 38px;
  }

  .program-participation-nvidia-name {
    font-size: 13px;
  }

  .program-participation-nvidia-program {
    font-size: 10px;
  }
}

@media screen and (max-width: 600px) {
  .program-participation-nvidia-logo {
    position: static;
    align-self: flex-end;
    margin-bottom: 10px;
    padding: 5px 8px;
    gap: 6px;
  }



  .program-participation-nvidia-icon {
    width: 32px;
  }
}



.newbg-journey {
  background-image: url(../images/patient_bg.webp);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: top;
  padding: 10px 100px 45px;
  /* min-height: auto;s */
  overflow: hidden;
}

.newbg-journey-title {
  /* max-width: 50% */
  margin-top: 50px;
  font-size: 40px;
  padding-bottom: 50px;
  color: white;
  font-weight: 700;
}

.newbg-journey-title span {
  color: var(--primary-color)
}

.newbg-journey-subtitle {
  font-size: 16px;
  color: var(--color-periwinkle);
  font-weight: 600;
}

.newbg-journey-heading {
  position: relative;
}

.newbg-journey-line {
  width: 100%;
  height: 2px;
  background-color: var(--color-periwinkle);
  /* margin-top: 10px; */
  position: absolute;
  top: 14px;
  left: 180px;
}


.newbg-journey-btn {
  position: relative;
  overflow: hidden;
  display: inline-block;
  margin-top: 26px;
  padding: 12px 26px;
  border-radius: 999px;
  background: #8be0ed;
  color: var(--color-navy);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.2px;
  transition: transform 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease;
}

.newbg-journey-btn::before {
  content: "";
  position: absolute;
  top: 0;
  left: -120%;
  width: 50px;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.7), transparent);
  transform: skewX(-25deg);
  transition: left 0.6s ease;
}

.newbg-journey-btn:hover {
  transform: translateY(-3px);
  background: #b3f7ff;
  box-shadow: 0 0 22px rgba(139, 224, 237, 0.7);
  color: var(--color-navy);
}

.newbg-journey-btn:hover::before {
  left: 130%;
}



@media screen and (max-width: 850px) {
  .newbg-journey-title {
    font-size: 30px;
    max-width: 70%;
  }

  .newbg-journey-title {
    margin-top: 0px;
    font-size: 18px;
    max-width: 100%;
    letter-spacing: 1.1px;
  }

  .newbg-journey {
    padding: 10px 20px;
    background-size: 150%;
    background-position: top right;

  }

  .newbg-journey-line {
    display: none;
  }
}


@media screen and (max-width: 600px) {
  .newbg-journey {
    background-position: top right;
    padding: 5px 20px 0px;
    background-size: 250%;
  }

  .newbg-journey-subtitle {
    font-size: 12px;
    padding-top: 15px;
  }

  .newbg-journey-title {
    font-size: 20px;
    margin-top: 30px;
    max-width: 70%;
  }

  .newbg-journey-btn {
    margin-top: 20px;
    padding: 10px 22px;
    font-size: 12px;
  }

}


/* ==========================================================
   CASE STUDY – RESPONSIVE (tablet + mobile)
   Keep this block at the VERY BOTTOM of the file so it wins
   over the desktop rules above.
========================================================== */

/* ---------- Tablet (≤1100px) ---------- */
@media screen and (max-width: 1100px) {

  .case_study_sect {
    padding: 80px 40px;
  }

  .case_study_sect .case_study_sect-content {
    gap: 32px;
  }

  .case_study_sect .case_study_sect-journey-steps {
    grid-template-columns: repeat(4, 1fr);
    gap: 28px 10px;
  }

  .case_study_sect .case_study_sect-connector {
    display: none;
  }

  .case_study_sect .case_study_sect-casebook {
    margin-top: 28px;
  }

  .case_study_sect .case_study_sect-title {
    font-size: 38px !important;
  }

  .case_study_sect .case_study_sect-subtitle {
    font-size: 15px !important;
  }

  .case_study_sect .case_study_sect-step-desc {
    font-size: 14px !important;
  }

  .case_study_sect .case_study_sect-icon-wrapper {
    width: 80px;
    height: 80px;
  }

  .case_study_sect .case_study_sect-step .case_study_sect-step-title {
    font-size: 17px;
  }

  .case_study_sect .case_study_sect-casebook-bold {
    font-size: 20px;
  }

  .case_study_sect .case_study_sect-casebook-light {
    font-size: 16px;
  }

  .case_study_sect .case_study_sect-kernel-circle {
    width: 120px;
    height: 120px;
    left: -9%;
  }

  .case_study_sect .case_study_sect-kernel-top-band {
    padding-right: 0;
    font-size: 15px;
  }

  .case_study_sect .case_study_sect-kernel-text2 {
    font-size: 15px;
  }
}

/* ---------- Mobile (≤600px) ---------- */
@media screen and (max-width: 600px) {

  .case_study_sect {
    padding: 60px 20px;
  }

  .case_study_sect .case_study_sect-content {
    gap: 28px;
  }

  /* header: badge stacks above text */
  .case_study_sect .case_study_sect-header-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
  }

  .case_study_sect .case_study_sect-badge {
    width: 72px;
    height: 72px;
  }

  .case_study_sect .case_study_sect-badge span {
    font-size: 12px;
  }

  .case_study_sect .case_study_sect-header-text {
    width: 100%;
  }

  .case_study_sect .case_study_sect-meta {
    white-space: normal;
    font-size: 11px;
    line-height: 1.4;
  }

 

  .case_study_sect .case_study_sect-title {
    font-size: 30px !important;
    margin: 8px 0 6px;
  }

  .case_study_sect .case_study_sect-subtitle {
    font-size: 14px !important;
  }

  /* steps: vertical single-column list on small screens */
  .case_study_sect .case_study_sect-journey-steps {
    grid-template-columns: repeat(2, 1fr);
    gap: 22px 12px;
  }

  .case_study_sect .case_study_sect-casebook {
    margin-top: 20px;
  }

  .case_study_sect .case_study_sect-casebook-pill {
    border-radius: 22px;
    padding: 12px 16px;
  }

  .case_study_sect .case_study_sect-casebook-bold {
    font-size: 17px;
  }

  .case_study_sect .case_study_sect-casebook-light {
    font-size: 14px;
  }

  /* kernel: stacks vertically on mobile */
  .case_study_sect .case_study_sect-kernel {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }

  .case_study_sect .case_study_sect-kernel-circle {
    width: 80px;
    height: 80px;
    border-radius: 999px;
    padding: 12px 24px;
    flex-direction: column;
    gap: 6px;
    top: -15px;
    left: -11%;
  }



  .case_study_sect .case_study_sect-kernel-circle span {
    font-size: 14px;
  }

  .case_study_sect .case_study_sect-kernel-content {
    width: 100%;
  }

  .case_study_sect .case_study_sect-kernel-top-band {
    padding: 12px 0;
    font-size: 14px;
    padding-left: 60px;
  }

  .case_study_sect .case_study_sect-kernel-text2 {
    font-size: 14px;
    padding-left: 60px;
  }

  .case_study_sect-kernel-content .program-participation-btn{
    margin-left: 60px;
  }
}

/* ---------- Large screens (≥1600px) ---------- */
@media screen and (min-width: 1600px) {

  .case_study_sect {
    padding: 100px 120px;
  }
}








@media screen and (max-width: 500px) {
  header .home-page-access-btn {
    font-size: 12px;
    width: fit-content;
    padding: 5px 10px;
  }
}


@media screen and (max-width: 900px) {
  .newHome-sec4-avatar-img {
    width: 70px;
    height: 70px;

  }

  .newHome-sec4-cards {
    gap: 15px;
  }



  .newHome-sec4,
  .new-home-platfrom,
  .drBg-section {
    padding: 60px 40px;
  }

  .newHome-sec5-card {
    min-width: 45%;
  }

  .newHome-sec5-cards {
    flex-wrap: wrap;
  }

}

@media screen and (max-width: 600px) {

  .newHome-sec4,
  .new-home-platfrom,
  .drBg-section {
    padding: 60px 20px;
  }

  .newHome-sec4-card {
    padding: 10px;
  }

  .newHome-sec4-quote {
    padding: 10px 10px 25px 10px;
  }
}




@media screen and (min-width:2000px) {

  .platform__grid {
    /* max-width: 1700px; */
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1.2fr);
    gap: 100px;
  }

  .lead,
  .audience p {
    max-width: 100%;
  }

  .copy h1 {
    font-size: 45px;
    max-width: 100%;
    /* optional: controls where the heading breaks */
  }

  .comman-heading-line span {
    font-size: 21px;
  }

  .copy h1 {
    font-size: 55px;
  }

  .copy h1 br {
    display: none;
  }

  .newbg-journey-title{
    font-size: 45px;
  }

  .lead,
  .audience p,
  .product h3 {
    font-size: 22px;
  }

  .audience h3,
  .diagram__head h2 {
    font-size: 30px;
  }


  .program-participation-btn,
  .engine__pill,
  .newHome-sec5-card-location {
    font-size: 16px;
  }

  .diagram__head p {
    font-size: 18px;
  }

  .tag {
    font-size: 11px;
  }

  .engine h3 {
    font-size: 28px;
  }

  .sources {
    font-size: 20px;
  }


  .drBg-section-text {
    font-size: 27px;
  }
.newHome-hero-title{
  font-size: 50px;
}
  .drBg-section-p1 {
    font-size: 50px;
  }

  .newHome-sec5-card-desc {
    font-size: 18px;
    font-weight: 900;
  }

  .newHome-sec5-card-name {
    font-size: 30px;
  }

  .newHome-sec5-stat-icon {
    font-size: 48px;
  }

  .newHome-sec5-more-milestone {
    font-size: 25px;
  }

  .newHome-sec5-more-tagline {
    font-size: 42px;
  }

  .newHome-sec5-more-count {
    font-size: 70px;
  }

  .newHome-sec5-stat-label {
    font-size: 32px;
    font-weight: 900;

  }

  .newHome-sec5-stat,
  .newHome-sec5-stat-icon,
  .newHome-sec5-stat-label {
    font-family: "TeX Gyre Pagella", serif !important;

  }
}