/* =========================
   Global variables + reset  landing2
   ========================= */
:root {
  --primary: #ff9f1c;
  --accent: #f04b93;
  --blue-dark: #004c8b;
  --text-main: #14213d;
  --text-muted: #6c7a89;
  --btn-grad-start: #eba000;
  --btn-grad-end: #ff8c00;
  --error: #e63946;
}

html { scroll-behavior: smooth; }
/* body {  color: var(--text-main); margin: 0; } */

/* =========================
   HERO / HEADER
   ========================= */
.hero-header { background: linear-gradient(to bottom, #e6f3ff, #ffffff); }
.top-nav { display:flex; align-items:center; justify-content:space-between; padding:6px 0; }
.logo-img { height:170px; width:auto; object-fit:contain; mix-blend-mode: multiply; filter: brightness(1.2) contrast(1.1); }
.btn-book { background:#f2a900; border:none; padding:10px 22px; font-size:17px; font-weight:600; border-radius:6px; display:inline-flex; align-items:center; text-decoration:none; color:#000; }
.btn-book:hover { background:#db9303; transform:translateY(-2px); }

.hero-grid { display:grid; grid-template-columns: 1fr 500px; gap:28px; align-items:center; padding: 5px 0; }
.hero-content { max-width:680px; padding-left: 50px; }
.hero-title { font-size:42px; line-height:1.12; font-weight:400; color:#14213d; margin-bottom:18px; }
.hero-features { list-style:none; padding:0; margin:0 0 24px; font-size:18px; color:#6c7a89; }
.hero-features li { margin:10px 0; }

.hero-cta-btn { background: linear-gradient(135deg,#eb4e9a,#ff7a00); padding:12px 28px; border-radius:10px; font-size:19px; font-weight:600; color:#fff; text-decoration:none; display:inline-flex; align-items:center; gap:14px; transition:0.25s ease; }
.hero-cta-btn:hover { transform: translateY(-3px); filter: brightness(1.05); }
.hero-image { height:650px; width:100%; object-fit:contain; mix-blend-mode:multiply; filter: brightness(1.15) contrast(1.05); margin-bottom:-46px; transform:translateX(20px); transition: all .35s ease; }
.hero-image-wrapper:hover .hero-image { transform: translateX(20px) translateY(-8px) scale(1.04); }

/* Responsive hero */
@media (max-width:992px) {
  .hero-grid {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .hero-content {
    order: 2;
    padding: 0 14px;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .hero-image-wrapper {
    order: 1;
    display: flex;
    justify-content: center;
    margin-top: 16px;
  }

  .hero-image {
    max-height: 280px;
    width: 100%;
    transform: none;
    margin-bottom: 0px;
  }

  .hero-title {
    font-size: 30px;
    line-height: 1.3;
  }
}

@media (max-width:576px) {
  .logo-img { height:110px;width:230px; }
  .hero-grid { grid-template-columns:1fr; text-align:center; }
  .hero-content { order:2; padding:0 10px; display:flex; flex-direction:column; align-items:center; }
  .hero-image-wrapper { order:1; display:flex; justify-content:center; margin-top:16px; }
  .hero-image { max-height:240px; transform:none; }
  .hero-title { font-size:26px; line-height:1.32; margin-bottom:12px; background:linear-gradient(135deg,#333,#0362aa); -webkit-background-clip:text; -webkit-text-fill-color:transparent; }
  .hero-features li { font-size:13.5px; margin:6px 0; }
  .hero-cta-btn { padding:10px 20px; font-size:14px; border-radius:20px; margin-top:12px; }
  .btn-book { padding:8px 14px; font-size:13px; border-radius:16px; }
}

/* =========================
   APPOINTMENT SECTION
   ========================= */
/* =========================
   APPOINTMENT BAR
   ========================= */
.appointment-bar {
  background: #ddeafa;
  padding: 18px 0;
  display: flex;
  justify-content: center;
}

.appointment-box {
  width: 100%;
}

.appointment-box h4 {
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 16px;
  color: #033b6c;
  text-align: center;
}

/* =========================
   FORM LAYOUT
   ========================= */

.appointment-form-new {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

/* ? ONE ROW – 5 EQUAL FIELDS */
.form-row-inputs {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px;
  width: 100%;
  max-width: 1200px;
}

/* Field wrapper */
.form-field {
  display: flex;
  flex-direction: column;
}

/* ? ALL INPUTS SAME SIZE */
.appointment-input {
  width: 100%;
  height: 42px;
  padding: 10px 14px;
  font-size: 14px;
  border-radius: 6px;
  border: 1px solid #c5d8e8;
  background: #fff;
  box-sizing: border-box;
  outline: none;
}

/* ? COMMENTS SAME AS INPUT */
#appt-comments {
  height: 102px;
  resize: none;
  outline: none;
  width: 900px !important;
}

/* =========================
   SELECT
   ========================= */

.select-wrapper {
  position: relative;
  width: 100%; /* ? FIX ADDED */
}

.select-wrapper select {
  appearance: none;
  padding-right: 40px;
  color: #2c2929;
  outline: none;
  width: 100%; /* ? FIX ADDED */
}

.select-wrapper .dropdown-icon {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 18px;
  pointer-events: none;
  color: #70757c;
}

#appt-hospital.has-value {
  color: #033b6c;
  font-weight: 500;
}

/* =========================
   CAPTCHA – CENTERED
   ========================= */

.form-row-captcha {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: nowrap;
  justify-content: center;
}

.text-captcha {
  background: #ffffff;
  border: 1px dashed #0362aa;
  padding: 8px 18px;
  border-radius: 6px;
  font-weight: 700;
  font-size: 18px;
  letter-spacing: 4px;
  color: #033b6c;
  user-select: none;
}

.captcha-refresh {
  background: transparent;
  border: none;
  font-size: 18px;
  cursor: pointer;
  color: #0362aa;
}

.captcha-input {
  width: 130px;
  text-align: center;
}

.error-msg {
  width: 100%;
  text-align: center;
  font-size: 12px;
  color: #e63946;
}

/* =========================
   SUBMIT
   ========================= */

.form-row-submit {
  display: flex;
  justify-content: center;
  width: 100%;
}

.btn-submit { 
  background: #0362aa;
  border: none;
  border-radius: 8px;
  padding: 12px 42px;
  font-size: 15px;
  font-weight: 600;
  color: #fff;
  cursor: pointer;
  text-transform: uppercase;
}

.btn-submit:hover:not(:disabled) {}

.btn-submit:disabled {}

/* =========================
   ERRORS
   ========================= */

.error-msg {
  font-size: 12px;
  color: #e63946;
  margin-top: 4px;
}

/* === FIX BUTTON COLOR CHANGE === */
.btn-submit,
.btn-submit:hover,
.btn-submit:focus,
.btn-submit:active,
.btn-submit:visited {
  background-color: #0362aa !important;
  color: #ffffff !important;
  box-shadow: none !important;
  outline: none !important;
}

/* =========================
   MOBILE – STACK
   ========================= */

@media (max-width: 768px) {
  .form-row-inputs {
    grid-template-columns: 1fr;
  }

  .appointment-input,
  .select-wrapper,
  .select-wrapper select {   /* ? FIX ADDED */
    max-width: 320px;
    margin: 0 auto;
    width: 100%;
  }

  #appt-comments {
    width: 320px !important;
  }

  .btn-submit {
    width: 100%;
    max-width: 320px;
  }

  .text-captcha {
    font-size: 16px;
    padding: 6px 12px;
    letter-spacing: 3px;
  }

  .captcha-input {
    width: 130px;
  }

  .select-wrapper .dropdown-icon {
    right: 12px;
    font-size: 16px;
  }
}

/* =========================
   TABLET = MOBILE STYLE
   ========================= */

@media (max-width: 992px) {

  .form-row-inputs {
    grid-template-columns: 1fr;
  }

  .appointment-input,
  .select-wrapper,
  .select-wrapper select {   /* ? FIX ADDED */
    max-width: 320px;
    margin: 0 auto;
    width: 100%;
  }

  #appt-comments {
    max-width: 320px !important;
    margin: 0 auto;
  }

  .form-row-captcha {
    flex-wrap: wrap;
    gap: 8px;
  }

  .btn-submit {
    width: 100%;
    max-width: 320px;
  }

  .error-msg {
    text-align: center;
  }
}
.appointment-input:focus,
.select-wrapper select:focus,
#appt-comments:focus {
  /* border-color: #0362aa; */
  box-shadow: 0 0 0 3px rgba(3, 98, 170, 0.15); /* sky-blue ring */
}


/* =========================
   STATS SECTION
   ========================= */
.stats-section { padding:15px 0; }
.stats-container { display:flex; justify-content:center; gap:20px; flex-wrap:wrap; }
.stat-box { background:#0498d3; border-radius:12px; padding:5px 10px; display:flex; align-items:start; gap:6px; width:280px; color:#fff; transition:0.3s ease-in-out; cursor:default; }
.stat-box img { width:70px; height:auto; }
.stat-text h2 { font-size:30px; margin:0 0 4px; font-weight:700; }
.stat-text p { font-size:18px; min-height:45px; line-height:1.3; margin:0; }
.stat-box:hover { transform:translateY(-6px); box-shadow:0 12px 26px rgba(0,0,0,0.18); }
@media (max-width:992px) { .stat-box { width:320px; padding:22px; } .stat-text h2 { font-size:30px; } .stat-text p { font-size:18px; } }
/* @media (max-width:600px) { .stat-box { width:100%; max-width:310px; } .stat-text h2 { font-size:30px; } .stat-text p { font-size:20px; } .stat-box img { width:60px; } } */
/* ===== MOBILE: 2 x 2 STATS GRID ===== */
@media (max-width: 600px) {

  .stats-container {
    justify-content: space-between;
    gap: 6px;
    padding: 0px 4px;
  }

  .stat-box {
    width: calc(50% - 6px);   /* 2 columns */
    padding: 12px 10px;       /* reduced padding */
    gap: 4px;
  }

  .stat-box img {
    width: 42px;              /* smaller icons */
  }

  .stat-text h2 {
    font-size: 18px;          /* reduced number size */
    margin-bottom: 2px;
  }

  .stat-text p {
    font-size: 12px;          /* reduced text size */
    line-height: 1.25;
    min-height: auto;
  }
}
/* =========================
   TREATMENTS (left menu / right content)
   ========================= */
/* SECTION */
.treatments-section {
  padding:20px 20px;
  text-align:center;
}

  .treatments-title {
    font-size:32px;
    color:#0362aa;
    font-weight:550;
    margin-bottom:30px;
  }

/* MAIN WRAPPER */
.treatments-wrapper {
  display:flex;
  align-items:stretch; /* IMPORTANT */
  justify-content:center;
  gap:25px;
  max-width:1100px;
  margin:0 auto;
}

/* LEFT MENU */
.treatments-menu {
  display:flex;
  flex-direction:column;
  gap:15px;
}

.treat-item {
  width:150px;
  padding:15px 10px;
  background:#f3f6fa;
  border-radius:12px;
  text-align:center;
  cursor:pointer;
  border:2px solid transparent;
  transition:0.25s ease;
}

.treat-item.active,
.treat-item:hover {
  border-color:#0362aa;
  background:#e3f1ff;
}

.treat-item img {
  width:50px;
  height:50px;
  margin-bottom:4px;
  border-radius:6px;
}

.treat-item span {
  display:block;
  font-size:13px;
  font-weight:600;
  color:#033b6c;
}

/* RIGHT CONTENT – FULL HEIGHT CARD */
.treat-content {
  width:100%;
  max-width:680px;
  display:flex;
  flex-direction:column;     /* STACK IMAGE + TEXT */
  background:#e3f1ff;
  border-radius:16px;
  overflow:hidden;           /* PREVENT OVERFLOW */
  text-align:left;
}

/* IMAGE ALWAYS ON TOP */
.treat-main-img {
  width:100%;
  height:auto;
  max-height:330px;
  object-fit:cover;
  display:block;
}

/* TEXT BOX ALWAYS BELOW IMAGE */
.treat-box {
  padding:22px;
  flex:1;                    /* FILL REMAINING HEIGHT */
}

.treat-box h3 {
  color:#033b6c;
  font-size:20px;
  font-weight:700;
  margin-bottom:12px;
}

.treat-box p {
  font-size:15px;
  color:#555;
  line-height:1.6;
}

/* ================= MOBILE FIX ================= */

@media (max-width:768px) {
  .treatments-wrapper {
    flex-direction:column;
    align-items:center;
  }
  .treatments-title {
  font-size:20px;
  color:#0362aa;
  font-weight:600;
  margin-bottom:30px;
}

  .treatments-menu {
    flex-direction:row;
    overflow-x:auto;
    gap:12px;
    width:100%;
    padding-bottom:10px;
  }

  .treat-item {
    width:130px;
    flex-shrink:0;
  }

  .treat-content {
    max-width:100%;
  }

  .treat-main-img {
    max-height:260px;
  }
}

@media (max-width:480px) {
  .treat-item {
    width:110px;
    padding:12px 6px;
  }

  .treat-box {
    padding:16px;
  }

  .treat-box p {
    font-size:13.5px;
  }
}

/* =========================
   ONCOLOGISTS SECTION
   ========================= */
.onco-section {
  background:#d8eaf8;
  padding:50px 20px;
  text-align:center;
}

.onco-title {
  font-size:32px;
  color:#0362aa;
  font-weight:600;
  margin-bottom:8px;
}

.onco-subtitle {
  font-size:18px;
  color:#666;
  max-width:600px;
  margin:0 auto 30px;
  line-height:1.6;
}

/* Horizontal flex layout for doctors */
.onco-grid {
  display:flex;
  gap:25px;
}

.onco-card {
  background:#fff;
  border-radius:14px;
  padding:20px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  width:100%;
  max-width:420px;
  box-shadow:0 4px 16px rgba(0,0,0,0.1);
  border:1px solid #e0e6ed;
  transition:0.3s;
  flex-shrink:0;
}

.onco-card:hover {
  transform:translateY(-4px);
}

.onco-img,
.onco-img-right {
  width:125px;
  height:125px;
  object-fit:contain;
}

.onco-info {
  text-align:left;
  padding:0 15px;
  flex:1;
}

.onco-name {
  font-size:17px;
  color:#033b6c;
  font-weight:700;
  margin-bottom:4px;
}

.onco-role {
  font-size:13px;
  color:#666;
  line-height:1.4;
  margin-bottom:12px;
}

.onco-btn {
  background:#0362aa;
  color:#fff;
  border:none;
  padding:8px 16px;
  border-radius:6px;
  font-size:12px;
  font-weight:600;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  gap:6px;
}

.onco-btn:hover {
  background:#024f8a;
  transform:translateY(-2px);
}

/* Scroller */
.onco-scroll-wrapper {
  display:flex;
  align-items:center;
  gap:10px;
}

.onco-scroll-track {
  overflow-x:auto;
  scroll-behavior:smooth;
  width:100%;
}

.onco-scroll-track::-webkit-scrollbar {
  display:none;
}

/* Arrows */
.onco-arrow {
  font-size:26px;
  background:#0362aa;
  color:#fff;
  width:42px;
  height:42px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  user-select:none;
  transition:0.3s;
}

.onco-arrow:hover {
  background:#024f8a;
}

/* Mobile */
@media (max-width:768px) {
  .onco-grid {
    gap:20px;
  }
  .onco-card {
    flex-direction:column;
    text-align:center;
    padding:20px;
  }
  .onco-title {
  font-size:20px;
  color:#0362aa;
  font-weight:600;
  margin-bottom:8px;
}
.onco-subtitle {
  font-size:14px;
  color:#555;
  max-width:600px;
  margin:0 auto 30px;
  line-height:1.6;
}
  .onco-info {
    text-align:center;
    padding:10px 0;
  }
  .onco-img-right {
    display:none;
  }
  .onco-arrow {
    display:none;
  }
}

/* =========================
   PROCEDURE / CAROUSEL
   ========================= */
/* =========================
   SECTION
   ========================= */
/* =================================================
   SECTION
   ================================================= */
.procedure-section-new {
  padding: 25px 20px;
  background: #ffffff;
}

.procedure-container {
  max-width: 1100px;
  margin: 0 auto;
}

/* =================================================
   TITLE
   ================================================= */
.procedure-title {
  text-align: center;
  font-size: 32px;
  font-weight: 600;
  color: #0362aa;
  margin-bottom: 20px;
}

/* =================================================
   GRID – ALWAYS 2 × 2
   ================================================= */
.procedure-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}

/* =================================================
   CARD BASE
   ================================================= */
.procedure-card {
  background: #e3f1ff;
  border-radius: 18px;
  padding: 22px;
  display: flex;
  flex-direction: column;
  height: 100%;

  /* LOAD ANIMATION */
  opacity: 0;
  transform: translateY(24px);
  animation: cardFadeUp 0.6s ease forwards;

  /* HOVER / ACTIVE TRANSITIONS */
  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease,
    background-color 0.3s ease;
}

/* =================================================
   STAGGERED LOAD (4 CARDS)
   ================================================= */
.procedure-card:nth-child(1) { animation-delay: 0.1s; }
.procedure-card:nth-child(2) { animation-delay: 0.2s; }
.procedure-card:nth-child(3) { animation-delay: 0.3s; }
.procedure-card:nth-child(4) { animation-delay: 0.4s; }

/* =================================================
   IMAGE
   ================================================= */
.procedure-card img {
  width: 100%;
  height: 220px;
  object-fit: cover;
  border-radius: 14px;
  margin-bottom: 16px;

  transition: transform 0.35s ease;
}

/* =================================================
   TEXT
   ================================================= */
.procedure-card h3 {
  font-size: 20px;
  font-weight: 600;
  color: #024f8a;
  margin-bottom: 10px;
}

.procedure-card p {
  font-size: 15px;
  color: #444;
  line-height: 1.6;
}

/* =================================================
   DESKTOP / LAPTOP HOVER
   ================================================= */
@media (hover: hover) {

  .procedure-card:hover {
    transform: translateY(-10px);
    background-color: #d6ecff;
    box-shadow: 0 16px 36px rgba(0, 0, 0, 0.15);
  }

  .procedure-card:hover img {
    transform: scale(1.06);
  }
}

/* =================================================
   MOBILE TAP (OPTIONAL CLASS)
   ================================================= */
.procedure-card.is-active {
  transform: translateY(-8px);
  background-color: #d6ecff;
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.18);
}

.procedure-card.is-active img {
  transform: scale(1.08);
}

/* =================================================
   TABLET
   ================================================= */
@media (max-width: 1024px) {

  .procedure-title {
    font-size: 26px;
  }

  .procedure-card img {
    height: 200px;
  }

  .procedure-card h3 {
    font-size: 18px;
  }

  .procedure-card p {
    font-size: 14.5px;
  }
}

/* =================================================
   MOBILE
   ================================================= */
@media (max-width: 768px) {

  .procedure-title {
    font-size: 22px;
  }

  .procedure-grid {
    gap: 18px;
  }

  .procedure-card {
    padding: 18px;
  }

  .procedure-card img {
    height: 110px;
    object-fit: contain;
    margin-bottom: 8px;
  }

  .procedure-card h3 {
    font-size: 17px;
  }

  .procedure-card p {
    font-size: 14px;
  }
}

/* =================================================
   SMALL MOBILE
   ================================================= */
@media (max-width: 480px) {

  .procedure-title {
    font-size: 20px;
  }

  .procedure-card img {
    height: 90px;
  }

  .procedure-card h3 {
    font-size: 14px;
  }

  .procedure-card p {
    font-size: 11.5px;
  }
}

/* =================================================
   LOAD ANIMATION KEYFRAMES
   ================================================= */
@keyframes cardFadeUp {
  from {
    opacity: 0;
    transform: translateY(24px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* =================================================
   ACCESSIBILITY – REDUCED MOTION
   ================================================= */
@media (prefers-reduced-motion: reduce) {
  .procedure-card {
    animation: none;
    opacity: 1;
    transform: none;
  }

  .procedure-card,
  .procedure-card img {
    transition: none;
  }
}

/* =========================
   WHY CHOOSE / GRID
   ========================= */

.why-section {
  text-align: center;
  padding: 20px 0;
  background: #fff;
}

/* TITLE */
.why-title {
  font-size: 32px;
  font-weight: 600;
  color: #0362aa;
  margin-bottom: 35px;
}

/* GRID */
.why-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 35px;
  justify-items: center;
}

/* CARD */
.why-card {
  text-align: center;
  padding: 15px;
  border-radius: 18px;
  cursor: pointer;
  transition: all 0.45s ease;
}

/* ICON BUBBLE */
.why-icon {
  width: 95px;
  height: 95px;
  border-radius: 50%;
  background: #eaf4ff;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 12px;
  transition: all 0.45s ease;
}

/* ICON IMAGE */
.why-icon img {
  width: 45px;
  height: 45px;
  object-fit: contain;
  transition: transform 0.45s ease;
}

/* TEXT */
.why-text {
  font-size: 15px;
  font-weight: 500;
  color: #033b6c;
  transition: transform 0.35s ease, color 0.35s ease;
}

/* =========================
   HOVER ANIMATION
   ========================= */

.why-card:hover {
  transform: translateY(-12px) scale(1.04);
  background: linear-gradient(145deg, #f4faff, #e8f2ff);
  box-shadow: 0 18px 35px rgba(3, 98, 170, 0.2);
}

/* Icon ring glow */
.why-card:hover .why-icon {
  background: linear-gradient(145deg, #d9ebff, #c6dcff);
  box-shadow:
    0 0 0 6px rgba(3, 98, 170, 0.12),
    0 14px 30px rgba(3, 98, 170, 0.35);
}

/* Icon animation */
.why-card:hover .why-icon img {
  transform: rotate(12deg) scale(1.18);
}

/* Text animation */
.why-card:hover .why-text {
  transform: translateY(-4px);
  color: #024f8a;
}

/* Subtle pulse effect */
@keyframes pulseGlow {
  0% { box-shadow: 0 0 0 0 rgba(3,98,170,0.4); }
  70% { box-shadow: 0 0 0 12px rgba(3,98,170,0); }
  100% { box-shadow: 0 0 0 0 rgba(3,98,170,0); }
}

.why-card:hover .why-icon {
  animation: pulseGlow 1.2s ease-out;
}

/* =========================
   RESPONSIVE
   ========================= */

@media (max-width: 992px) {
  .why-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 25px 40px;
  }
.why-title{
font-size:20px;
}
.faq-title{
font-size:20px;
}

}

@media (max-width: 576px) {
  .why-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }

  .why-icon {
    width: 80px;
    height: 80px;
  }

  .why-icon img {
    width: 38px;
    height: 38px;
  }

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

/* =========================
   CANCER TYPES SLIDER
   ========================= */
/* ===============================
   CANCER TYPES SECTION
================================ */

.cancer-types-section {
  background: #d8ecf7;
  padding: 60px 20px;
  text-align: center;
}

.cancer-title {
  font-size: 32px;
  font-weight: 600;
  color: #0362aa;
  margin-bottom: 40px;
  line-height: 1.4;
}

/* ===============================
   GRID LAYOUT
================================ */

.cancer-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 16px;
  max-width: 1100px;
  margin: 0 auto;
}

/* ===============================
   ITEM – BASE STATE
================================ */

.cancer-item {
  opacity: 0;
  transform: translateY(32px) scale(0.92);
  transition:
    opacity 0.7s ease,
    transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform, opacity;
}

/* ACTIVE STATE */
.cancer-item.show {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* ===============================
   ICON
================================ */

.cancer-item img {
  width: 75px;
  height: 75px;
  background: #ffffff;
  padding: 12px;
  border-radius: 50%;
  border: 2px solid #c6dce8;
  transition:
    transform 0.35s ease,
    box-shadow 0.35s ease;
}

/* Pulse animation (runs once) */
@keyframes softPulse {
  0%   { box-shadow: 0 0 0 0 rgba(3, 98, 170, 0.15); }
  70%  { box-shadow: 0 0 0 14px rgba(3, 98, 170, 0); }
  100% { box-shadow: 0 0 0 0 rgba(3, 98, 170, 0); }
}

.cancer-item.show img {
  animation: softPulse 2.8s ease-out;
}

/* ===============================
   TEXT
================================ */

.cancer-item p {
  margin-top: 10px;
  font-size: 14px;
  font-weight: 500;
  color: #044a7b;
}

/* ===============================
   HOVER EFFECT
================================ */

.cancer-item:hover {
  transform: translateY(-6px);
}

.cancer-item:hover img {
  transform: scale(1.12) rotate(3deg);
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.18);
}

/* ===============================
   RESPONSIVE
================================ */

@media (max-width: 1024px) {
  .cancer-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

@media (max-width: 768px) {
  .cancer-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 480px) {
  .cancer-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .cancer-title {
    font-size: 20px;
  }
}

/* ===============================
   ACCESSIBILITY
================================ */

@media (prefers-reduced-motion: reduce) {
  .cancer-item,
  .cancer-item img {
    animation: none !important;
    transition: none !important;
  }
}


/* =========================
   TESTIMONIALS (left untouched logically)
   ========================= */
.testimonials-section { padding:20px 8%; }
.testimonials-box { border:1px solid #d0d5dd; border-radius:16px; padding:35px; display:flex; align-items:center; gap:40px; background:#fafbfc; }
.testimonial-content { flex:1; }
.test-title { color:#d6206e; font-size:26px; font-weight:bold; }
.test-subtitle { color:#033b6c; font-size:24px; margin:10px 0; line-height:1.3; }
.testimonial-content p { font-size:16px; color:#555; margin:20px 0; line-height:1.6; }
.testimonial-videos { display:flex; align-items:center; gap:4px; flex-shrink:0; }
.video-card { text-align:center; }
.video-main { width:280px; height:160px; border-radius:10px; border:3px solid #d6206e; object-fit:cover; }
.video-small { width:120px; height:85px; border-radius:8px; object-fit:cover; opacity:0.7; transition:0.3s; }
.video-small:hover { opacity:1; }
.test-arrow, .test-arrow-right { font-size:28px; cursor:pointer; color:#014a86; font-weight:700; user-select:none; transition:0.25s; }
.test-arrow:hover, .test-arrow-right:hover { color:#d6206e; }
@media (max-width:991px) {
  .testimonials-box { flex-direction:column; text-align:center; gap:30px; padding:25px 20px; }
  .video-main { width:260px; height:160px; }
  .video-small { width:110px; height:80px; }
  .testimonial-videos { justify-content:center; }
}
@media (max-width:576px) {
  .testimonials-section { padding:25px 12px; }
  .testimonials-box { padding:20px 15px; gap:20px; }
  .test-title { font-size:18px; }
  .test-subtitle { font-size:16px; }
  .testimonial-content p { font-size:14px; }
  .video-main { width:200px; height:130px; }
  .video-small { width:55px; height:50px; }
  .video-location { font-size:12px; }
  .testimonial-videos .test-arrow.desktop-only, .testimonial-videos .test-arrow-right.desktop-only { display:none !important; }
  .testimonial-videos .video-card:first-child, .testimonial-videos .video-card:last-child { display:none; }
}
.test-nav { justify-content:center; gap:30px; margin-top:15px; }
.test-nav .test-arrow, .test-nav .test-arrow-right { width:45px; height:45px; background:rgba(1,74,134,0.12); border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:20px; color:#014a86; }

/* =========================
   FAQ (unchanged visual)
   ========================= */
.faq-section { padding:40px 20px; text-align:center; margin-bottom:40px; }
.faq-title { font-size:24px; font-weight:600; color:#0362aa; margin-bottom:25px; }
.faq-list { max-width:650px; margin:0 auto; }
.faq-item { background:#e6f3fc; border-radius:10px; margin-bottom:15px; overflow:hidden; border:1px solid #cfe5f5; }
.faq-header { width:100%; padding:16px 18px; border:none; background:transparent; font-size:15px; font-weight:500; color:#033b6c; display:flex; align-items:center; justify-content:space-between; cursor:pointer; }
/* .faq-icon { background:#1a8cff; color:#fff; width:28px; height:28px; border-radius:50%; font-size:18px; display:flex; align-items:center; justify-content:center; } */
.faq-icon {
  background: #1a8cff;
  color: #fff;
  width: 28px;
  height: 28px;
  min-width: 28px;              /* ? prevents shrink */
  border-radius: 50%;

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

  font-size: 18px;
  font-weight: 600;             /* ? fixes + vs - */
  line-height: 28px;            /* ? KEY FIX */
  flex-shrink: 0;               /* ? prevents resize */
}
.faq-content { max-height:0; overflow:hidden; padding:0 18px; transition:max-height .35s ease, padding .35s ease; }
.faq-content p { font-size:14px; color:#444; margin:12px 0 18px; line-height:1.5; text-align: start;}
.faq-item.active .faq-content { max-height:200px; padding-top:10px; }
.faq-item.active .faq-icon { background:#024f8a; }

/* =========================
   CALLBACK +  CENTRES
   ========================= */
.callback-centres-wrapper { width:100%; background:#0fb5f7; padding-top:40px; padding-bottom:40px; position:relative; }
.callback-box { width:90%; max-width:1000px; margin:0 auto; margin-top:-100px; background:#e8f4fb; border-radius:16px; padding:25px 35px; text-align:center; box-shadow:0 6px 25px rgba(0,0,0,0.18); position:relative; z-index:10; }
.callback-title { color:#033b6c; font-size:24px; font-weight:700; margin-bottom:6px; }
.callback-desc { color:#4d4d4d; font-size:14px; margin-bottom:18px; }
.callback-form { display:flex; flex-direction:column; align-items:center; gap:12px; }
.callback-form .callback-inputs-row { display:flex; justify-content:center; gap:16px; flex-wrap:wrap; width:100%; }
.callback-form input, .callback-form select { width:140px !important; height:38px !important; border-radius:6px !important; padding:8px 10px !important; font-size:13px !important; background:#fff !important; box-shadow:0 2px 4px rgba(0,0,0,0.08) !important; border:none; }

/* =========================
   COMMENTS FIELD – FULL WIDTH & RESPONSIVE
   ========================= */

.callback-form .form-field.full-width {
  width: 100%;
  display: flex;
  justify-content: center;
}

.callback-form .form-field.full-width textarea {
  width: 100% !important;
  max-width: 480px !important;
  min-height: 110px !important;
  resize: vertical;
  margin: 0px auto;
  border: none;
}

/* =========================
   CALLBACK SELECT – NATIVE DROPDOWN (MATCH APPOINTMENT FORM)
   ========================= */
.callback-form .select-wrapper select {
  appearance: auto;
  -webkit-appearance: menulist;
  -moz-appearance: menulist;

  background-image: none !important; /* ensure no custom arrow */
  cursor: pointer;
}

.callback-form textarea { width:100% !important; max-width:400px !important; height:40px !important; resize:vertical !important; }
.callback-form input:focus, .callback-form select:focus, .callback-form textarea:focus { box-shadow:0 0 0 4px rgba(3,98,170,0.3), 0 6px 20px rgba(0,0,0,0.2) !important; background:#fff !important; outline:none !important; }
.callback-form .form-field { display:flex; flex-direction:column; text-align:left; }
.callback-form .error-msg { font-size:10px; color:#e63946; margin-top:3px; min-height:14px; display:block; }
.callback-form select { color:#2b2828; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
/* .callback-form .callback-captcha-row { display:flex; justify-content:center; margin-top:5px; }
.callback-form .callback-captcha-row .g-recaptcha { transform:scale(0.9); transform-origin:center center; } */
/* =========================
   CAPTCHA (UPDATED)
   ========================= */

.callback-captcha-row {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  flex-wrap:nowrap;
}

.captcha-input {
  width:130px;
  height:38px;
  text-align:center;
}


.text-captcha {
  background:#ffffff;
  border:1px dashed #0362aa;
  padding:8px 18px;
  border-radius:6px;
  font-weight:700;
  font-size:18px;
  letter-spacing:4px;
  color:#033b6c;
  user-select:none;
  flex-shrink:0;
}

.captcha-refresh {
  background:transparent;
  border:none;
  font-size:18px;
  cursor:pointer;
  color:#0362aa;
  flex-shrink:0;
}
@media (max-width: 768px) {
  .callback-form .form-field.full-width textarea {
    max-width: 100% !important;
  }
}



.callback-form .callback-submit-row { display:flex; justify-content:center; width:100%; }
.callback-btn { height:36px; padding:0 30px;color:#fff; border:none; border-radius:6px; background: #0362aa; font-size:13px; font-weight:600; cursor:pointer; transition:0.3s;  text-transform:uppercase; letter-spacing:0.5px; }


/* .callback-btn:hover:not(:disabled) { background:linear-gradient(135deg,#d98a00,#c77a00); transform:translateY(-2px); box-shadow:0 6px 18px rgba(235,160,0,0.45); } */

/* Centres */
.centres-section {
  padding: 20px 10%;
  text-align: center;
  color: white;
}

.centres-title {
  font-size: 32px;
  font-weight: 540;
  margin-bottom: 25px;
}

.centres-container {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 15px;
}

/* arrows */
.arrow-centre {
  font-size: 36px;
  cursor: pointer;
  font-weight: 600;
  user-select: none;
  color: white;
  transition: .25s;
}
/* .arrow-centre:hover { opacity: .6; } */

/* ? CARD */
.centre-card {
  background: rgba(77,77,77,0.18);
  display: flex;
  border-radius: 10px;
  max-width: 1100px;        /* ? responsive width */
  width: 100%;
   height: 380px; 
  min-height: 290px;
  overflow: hidden;
  border: 1px solid #021309;
}

/* ? IMAGE SIDE */
.centre-card img {
  width: 50%;               /* ? flexible */
  object-fit: cover;
}

/* ? INFO SIDE */
.centre-info {
  width: 50%;               /* ? flexible */
  background: #e8f4fb;
  padding: 28px 26px;
  color: #2b2525;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.centre-info h3 {
  font-size: 22px;
  font-weight: 700;
  line-height: 1.35;
}

.centre-info p {
  font-size: 15px;
  line-height: 1.6;
}

.consult-btn {
  background: #d6206e;
  color: #fff;
  padding: 10px 18px;
  border-radius: 6px;
  border: none;
  cursor: pointer;
  font-size: 15px;
  font-weight: 600;
  margin-top: auto;
  text-decoration: none;
  text-align: center;
}
.consult-btn:hover { opacity: .8; }

/* Responsive behaviour for callback + centres */
@media (max-width:768px) {
  .callback-box { width:94%; padding:30px 20px; margin-top:-80px; border-radius:16px; }
  .callback-title { font-size:22px; }
  .callback-desc { font-size:14px; margin-bottom:20px; }
  .callback-form { flex-direction:column; align-items:center; gap:10px; }
  .callback-form .form-field { width:100%; max-width:280px; }
  .callback-form input, .callback-form select, .callback-form textarea { width:100% !important; height:42px !important; border-radius:8px !important; font-size:14px !important; padding:10px 12px !important; }
  .callback-form textarea { height:80px !important; max-width:100% !important; }
  .callback-btn { width:100%; max-width:280px; height:42px; border-radius:8px; font-size:14px;  background: #0362aa; margin-top:5px; }
  .callback-form .error-msg { font-size:11px; text-align:center;  padding-left:5px; }

  .centres-container { flex-direction:column; align-items:center; gap:15px; }
  .centres-nav { display:flex; justify-content:center; gap:25px; margin-top:10px; }
  .centre-card { flex-direction:column; width:100%; max-width:340px; height:auto; border-radius:12px; overflow:hidden; }
  .centre-card img { width:100%; height:180px; object-fit:cover; }
  .centre-info { width:100%; border:none; padding:20px 15px; text-align:center; }
  .centre-info h3 { font-size:17px; margin-bottom:10px; }
  .centre-info p { font-size:13px; line-height:1.5; }
  .consult-btn { width:100%; margin-top:12px; padding:12px; font-size:14px; }
   /* ? CAPTCHA FIX */
  .callback-captcha-row {
    width:100%;
    max-width:280px;
  }

  .callback-captcha-input {
    width:100% !important;
    max-width:100% !important;
  }
  .centres-title {
  font-size: 20px;
  font-weight: 540;
  margin-bottom: 10px;
}
}

/* Callback mobile fixed widths */
@media (max-width:576px) {
 
    .callback-form .form-field,
  .callback-form select,
  .callback-form textarea,
  .callback-form input:not(.callback-captcha-input) {
    width:301px !important;
    max-width:301px !important;
    min-width:301px !important;
    margin:0 auto !important;
  }

  .callback-form .select-wrapper {
    width:301px !important;
  }

  .callback-btn {
    width:301px !important;
    height:42px !important;
  }

  /* ? CAPTCHA INPUT */
  .callback-captcha-row {
    width:301px;
    margin:0 auto;
  }

  .callback-captcha-input {
    width:100% !important;
    max-width:100% !important;
  }

  .text-captcha {
    font-size:16px;
    padding:6px 12px;
    letter-spacing:3px;
  }
}

/* Helpers */
.mobile-only { display:none; }
.desktop-only { display:flex; }
@media (max-width:768px) { .mobile-only { display:flex; } .desktop-only { display:none !important; } }

/* Footer */
.footer { background:#eba000; text-align:center; padding:12px 15px; }
.footer p { color:#fff; font-size:13px; margin:0; }

/* Responsive tiers adjustments (kept from your css) */
@media (min-width:1400px) { .container { max-width:1320px; } .hero-title { font-size:58px; } .centre-card { width:900px; } }
@media (max-width:1199px) { .hero-title { font-size:44px; } .centre-card { width:700px; } .centre-card img { width:350px; } .centre-info { width:350px; } }
@media (max-width:991px) { .hero-title { font-size:36px; } .testimonials-box { flex-direction:column; } .centre-card { width:100%; max-width:600px; flex-direction:column; height:auto; } .centre-card img { width:100%; height:250px; } .centre-info { width:100%; } }
@media (max-width:767px) { .hero-title { font-size:30px; } .faq-section { margin-bottom:70px; } .test-title, .test-subtitle { font-size:22px; } .testimonial-content p { font-size:15px; } }
@media (max-width:575px) { body { font-size:14px; } .container { padding-left:12px; padding-right:12px; } .hero-title { font-size:26px; } .centre-info h3 { font-size:16px; } .centre-info p { font-size:12px; } .consult-btn { font-size:13px; padding:10px 15px; } }
@media (max-width:400px) { .logo-img { height:45px; width:90px; } .btn-book { padding:6px 10px; font-size:10px; } .hero-title { font-size:22px; } .faq-question { font-size:13px; padding:14px 40px 14px 14px; } }
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus {
  -webkit-text-fill-color: #2c2929 !important;
  -webkit-box-shadow: 0 0 0px 1000px #ffffff inset !important;
  box-shadow: 0 0 0px 1000px #ffffff inset !important;
  background-color: #ffffff !important;
  caret-color: #000 !important;
}