/* Section heading size for mobile (specific request) */
@media only screen and (max-width: 600px) {
  h2.section-heading, .section-heading { font-size: 2rem !important; }
}
/* Universal section content wrapper for non-hero sections */
.section-content {
  max-width: 1200px;
  margin: 0 auto;
  padding: 64px 32px;
  box-sizing: border-box;
}

@media (max-width: 900px) {
  .section-content {
    padding: 32px 16px;
  }
}

@media (max-width: 600px) {
  .section-content {
    padding: 24px 10px;
  }
}
/* Flexible Formats Section */
.flexible-section {
  background: #fbeeea;
  width: 100vw;
  margin: 0;
  padding: 0;
}
.flexible-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  min-height: 340px;
  gap: 32px;
  max-width: 1200px;
  margin: 0 auto;
  padding: 64px 32px;
  box-sizing: border-box;
}
.flexible-col {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
/* Ensure images scale and align consistently in all sections */
.flexible-col img {
  width: 100%;
  max-width: 400px;
  height: auto;
  object-fit: contain;
  object-position: center;
  border-radius: 18px;
  margin: 0 auto;
  display: block;
}
@media (max-width: 900px) {
  .flexible-grid {
    grid-template-columns: 1fr;
    gap: 20px;
    padding: 32px 16px;
  }
  .flexible-col img {
    max-width: 100%;
    height: auto;
    border-radius: 12px;
  }
}
@media (max-width: 600px) {
  .flexible-grid {
    padding: 24px 10px;
    gap: 16px;
  }
  .flexible-col img {
    border-radius: 8px;
  }
}
.flexible-bullets {
  list-style-type: disc;
  margin-top: 18px;
  margin-bottom: 0;
  padding-left: 28px;
  font-family: Poppins, sans-serif;
  font-size: 1.18rem;
  font-weight: 700;
  color: #800000;
  text-align: left;
}
.flexible-bullet {
  margin-bottom: 8px;
  font-weight: 700;
  color: #800000;
  text-align: left;
}
.flexible-image-slider {
  display: flex;
  flex-direction: column;
  gap: 12px;
  justify-content: center;
  align-items: center;
}
.flexible-image-container {
  position: relative;
  width: 100%;
  max-width: 640px;
  height: 320px;
  border-radius: 12px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.flexible-image-container .bottom-img {
  position: static;
  margin: 0 auto;
  width: auto;
  max-width: 100%;
  max-height: 100%;
  height: auto;
  object-fit: contain;
  object-position: center;
  display: block;
}
.flexible-image-container .top-img {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  clip-path: inset(0 100% 0 0);
  transition: clip-path 1.2s cubic-bezier(.77,0,.18,1);
}
@media (max-width: 900px) {
  .flexible-grid {
    grid-template-columns: 1fr;
    gap: 20px;
    padding: 32px 16px;
  }
  .flexible-image-container {
    max-width: 100%;
  }
}
@media (max-width: 600px) {
  .flexible-grid {
    padding: 24px 10px;
    gap: 16px;
  }
  .flexible-image-container {
    border-radius: 8px;
  }
}
.hero-content {
  background: #f7eaea;
  overflow: hidden;
}
.hero-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 12px;
  display: block;
}

/* Small, centered hero image for _info pages: 25% of viewport, centered, not cutoff */
.hero-img.small {
  width: 100%;
  max-width: none;
  height: auto;
  object-fit: contain;
  object-position: center;
  border: none;
  border-radius: 0;
  display: block;
  margin: 0 0 18px 0;
  /* subtle even shadow, no colored bottom glow */
  box-shadow: 0 8px 20px rgba(0,0,0,0.08);
  background: transparent;
}

@media (max-width: 900px) {
  .hero-img.small {
    width: 100%;
    height: auto;
    border-radius: 0;
  }
}

/* allow image glow to show without being clipped */
.hero-img-col {
  overflow: visible;
}

/* heading badge that overlaps the bottom of the hero image */
.hero-heading-badge {
  display: inline-block;
  background: #F4F4F9;
  padding: 16px 28px;
  margin-top: -42px;
  border-radius: 8px;
  box-shadow: 0 8px 18px rgba(0,0,0,0.06);
  position: relative;
  z-index: 2;
  text-align: center;
}
.hero-heading-badge .hero-title {
  margin: 0;
}

@media (max-width: 900px) {
  .hero-heading-badge { margin-top: -26px; padding: 12px 18px; }
}

/* Overlay heading on hero images */
.hero-image-wrapper {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}
.hero-image-wrapper img {
  display: block;
  position: relative;
  z-index: 2; /* sits above the glow but below overlays */
}
.hero-image-wrapper::after {
  /* subtle warm glow behind the image to add emphasis without overpowering
     the heading overlay. Kept low-contrast and blurred for a soft look. */
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1; /* below the image */
  background: radial-gradient(circle at 20% 50%, rgba(128,0,0,0.16), rgba(128,0,0,0.06) 30%, rgba(128,0,0,0.02) 45%, transparent 60%);
  filter: blur(14px);
  opacity: 0.95;
}
.hero-image-leftfade {
  position: absolute;
  left: 0;
  top: 0;
  /* cover the left half of the image
     - the overlay is fully opaque at the left edge and
       fades to transparent toward the right edge of the overlay
     - this leaves the right half of the hero image fully visible */
  width: 50%;
  height: 100%;
  pointer-events: none;
  background: linear-gradient(to right, #F4F4F9 0%, #F4F4F9 70%, rgba(244,244,249,0) 100%);
  z-index: 3; /* above the image and glow */
}
.hero-left-heading {
  position: absolute;
  /* position the heading block near the left edge and give it
     a fixed portion of the overall hero width so it occupies
     approximately 30% of the hero image area */
  left: 2%;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  width: 30%;
  max-width: 30%;
  text-align: left;
  padding: 12px 8px;
  box-sizing: border-box;
}
.hero-left-heading .hero-title-main { color: #2d0a0a; }
.hero-left-heading .hero-title-sub { color: #444; font-weight:600; }
.hero-image-overlay {
  position: absolute;
  bottom: 12px;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
  background: rgba(0,0,0,0.45);
  color: #fff;
  padding: 10px 14px;
  border-radius: 8px;
  max-width: 90%;
}
.hero-image-overlay .hero-title-main {
  color: #fff;
  display: block;
  font-size: 1.6rem;
  line-height: 1.05;
}
.hero-image-overlay .hero-title-sub {
  color: #f3f3f3;
  display: block;
  font-size: 1rem;
  font-weight: 600;
}

@media (max-width: 600px) {
  .hero-image-overlay .hero-title-main { font-size: 1.25rem; }
  .hero-image-overlay .hero-title-sub { font-size: 0.95rem; }
}
.hero-title {
  font-family: Poppins, sans-serif;
  font-size: 2.2rem;
  font-weight: 900;
  line-height: 1.1;
  margin: 18px 0 0 0;
  text-align: left;
}
.hero-title-main {
  color: #800000;
  font-weight: 900;
  letter-spacing: -1px;
}
.hero-title-sub {
  color: #2d0a0a;
  font-weight: 700;
}
.hero-desc {
  font-size: 1.08rem;
  color: #2d0a0a;
  font-family: Poppins, sans-serif;
  font-weight: 500;
  margin: 18px 0 0 0;
}
.hero-cta-row {
  margin-top: 28px;
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
}
.hero-cta {
  display: inline-block;
  font-family: Poppins, sans-serif;
  font-weight: 600;
  font-size: 1.08rem;
  padding: 12px 24px;
  border-radius: 10px;
  text-decoration: none;
  box-shadow: 0 2px 8px rgba(128,0,0,0.08);
  border: none;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
}
.hero-cta-primary {
  background: #800000;
  color: #fff;
}
.hero-cta-primary:hover {
  background: #a00000;
}
.hero-cta-secondary {
  background: #fff;
  color: #800000;
  border: 2px solid #800000;
}
.hero-cta-secondary:hover {
  background: #fbeeea;
}
@media (max-width: 900px) {
  .hero-title {
    font-size: 1.5rem;
    text-align: left;
  }
  .hero-desc {
    font-size: 1rem;
  }
  .hero-img {
    max-height: 160px;
  }
}
@media (max-width: 600px) {
  .hero-title {
    font-size: 1.15rem;
    text-align: left;
  }
  .hero-desc {
    font-size: 0.98rem;
  }
  .hero-img {
    max-height: 120px;
  }
  .hero-content {
    border-radius: 8px;
    box-shadow: 0 1px 6px rgba(0,0,0,0.07);
    margin-left: 10px;
    margin-right: 10px;
    padding-left: 10px;
    padding-right: 10px;
  }
  .hero-cta-row {
    gap: 10px;
  }
}
.hero-section {
  width: 100vw;
  background: #f7eaea;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.hero-content {
  max-width: 1400px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  min-height: 480px;
  gap: 32px;
  padding: 64px 48px;
  box-sizing: border-box;
}

@media (max-width: 900px) {
  .hero-content {
    grid-template-columns: 1fr;
    min-height: 320px;
    gap: 20px;
    padding: 32px 16px;
  }
}

@media (max-width: 600px) {
  .hero-content {
    padding: 24px 12px;
    min-height: 220px;
  }
}
.hero-content {
  padding: 64px 48px;
}

@media (max-width: 600px) {
  .hero-content {
    padding-left: 12px;
    padding-right: 12px;
    padding-top: 32px;
    padding-bottom: 32px;
  }
}
.section-heading {
  text-align: center !important;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  display: block;
  font-size: 2.7rem !important;
}
/* Why Choose Mathismo PD Section - Card Grid */
.feature-card-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  margin-top: 32px;
}

.feature-card {
  background: #f7eaea;
  border-radius: 16px;
  border: 2px solid #80000010;
  padding: 28px 32px;
  min-width: 220px;
  max-width: 340px;
  display: flex;
  flex-direction: column;
  align-items: center;
  box-shadow: 0 2px 12px rgba(0,0,0,0.07);
  text-align: center;
}

.feature-card-title {
  font-family: Poppins, sans-serif;
  font-size: 1.45rem;
  font-weight: 700;
  color: #800000;
  margin-top: 0;
  margin-bottom: 10px;
  text-align: center;
}

.feature-card-text {
  font-size: 1.08rem;
  color: #2d0a0a;
  font-family: Poppins, sans-serif;
}

@media (max-width: 900px) {
  .feature-card-grid {
    grid-template-columns: 1fr 1fr;
    gap: 20px;
  }
  .feature-card {
    max-width: 100%;
    padding: 20px 16px;
  }
}

@media (max-width: 600px) {
  .hero-section {
    padding-left: 12px;
    padding-right: 12px;
  }
  .feature-card-grid {
    grid-template-columns: 1fr;
    gap: 16px;
    padding-left: 12px;
    padding-right: 12px;
    justify-content: center;
  }
  .feature-card {
    max-width: 100%;
    padding: 16px 8px;
  }
  .feature-card-title {
    font-size: 1.15rem;
  }
  .feature-card-text {
    font-size: 0.98rem;
  }
}
/* Mathismo PD Main Styles */
body {
  font-family: 'Poppins', 'Inter', Arial, sans-serif;
  margin: 0;
  padding: 0;
  background: #fff;
  color: #222;
}
.hero-section {
  width: 100vw;
  background: #f7eaea;
  margin: 0;
  padding: 0;
}
.hero-section > div {
  max-width: 1400px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  min-height: 480px;
  padding: 64px 48px;
  gap: 32px;
}
.hero-section img {
  width: 100%;
  max-width: 600px;
  height: 420px;
  object-fit: cover;
  border-radius: 18px;
}
.hero-section h1 {
  font-family: Poppins, sans-serif;
  font-size: 3.5rem;
  font-weight: 900;
  line-height: 1.1;
  margin-top: 0;
  margin-bottom: 0;
}
.hero-section .hero-text {
  font-size: 1.15rem;
  color: #2d0a0a;
  margin-top: 32px;
  font-family: Poppins, sans-serif;
  font-weight: 500;
  max-width: 600px;
}
.hero-section .hero-cta {
  margin-top: 40px;
  display: flex;
  gap: 24px;
}
.hero-section .hero-cta a {
  background: #800000;
  color: #fff;
  font-family: Poppins, sans-serif;
  font-weight: 600;
  font-size: 1.15rem;
  padding: 16px 32px;
  border-radius: 12px;
  text-decoration: none;
  box-shadow: 0 2px 8px rgba(128,0,0,0.08);
  border: none;
  cursor: pointer;
}
.hero-section .hero-cta a:last-child {
  background: #fff;
  color: #800000;
  border: 2px solid #800000;
}
section {
  width: 100vw;
  margin: 0;
  padding: 0;
  background: #fff;
}
.section-content {
  max-width: 1400px;
  margin: 0 auto;
  padding: 64px 48px;
  text-align: center;
}
h2 {
  font-family: Poppins, sans-serif;
  font-size: 2.7rem;
  font-weight: 700;
  margin-top: 0;
  margin-bottom: 18px;
}
.section-text {
  font-size: 1.13rem;
  color: #222;
  font-family: Poppins, sans-serif;
  font-weight: 400;
  margin-bottom: 32px;
  max-width: 700px;
  margin-left: auto;
  margin-right: auto;
}
.pd-card-btn {
  font-size: 1.13rem;
  font-family: Poppins, sans-serif;
  font-weight: 600;
  padding: 16px 32px;
  border-radius: 12px;
  text-decoration: none;
  box-shadow: 0 2px 8px rgba(128,0,0,0.08);
  border: none;
  cursor: pointer;
  background: #800000;
  color: #fff;
  max-width: 320px;
  display: inline-block;
}
.pd-card-btn.alt {
  background: #fff;
  color: #800000;
  border: 2px solid #800000;
}
#pd-image-container {
  position: relative;
  width: 100%;
  max-width: 600px;
  height: 80%;
  min-height: 220px;
  display: flex;
  justify-content: center;
  align-items: center;
}
#pd-image-container img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}
#pd-bullets {
  list-style-type: disc;
  margin-top: 18px;
  margin-bottom: 0;
  padding-left: 28px;
  font-family: Poppins, sans-serif;
  font-size: 1.18rem;
  font-weight: 700;
  color: #800000;
}
#pd-bullets li {
  margin-bottom: 8px;
  font-weight: 700;
  color: #800000;
}
/* Info sections */
.info-section-license, .info-section-testlimit, .info-section-ctestem {
  background: #eaf7fb;
  margin: 48px auto 0 auto;
  border-radius: 24px;
  max-width: 1100px;
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  box-shadow: 0 2px 12px rgba(30,63,95,0.07);
  scroll-margin-top: 100px;
  padding: 32px;
}
.info-image-container img {
  flex: 1 1 100%;
  width: 100%;
  height: auto;
  max-height: 320px;
  object-fit: contain;
  object-position: center;
  border-radius: 12px;
  box-shadow: 0 2px 12px rgba(30,63,95,0.10);
  margin-bottom: 18px;
}
/* Mobile optimization for 6-inch phone screens (max-width: 430px) */
@media (max-width: 430px) {
  body {
    font-size: 1rem;
  }
  .hero-section > div {
    grid-template-columns: 1fr !important;
    padding: 24px 8px !important;
    gap: 16px !important;
  }
  .hero-section img {
    max-width: 100vw !important;
    height: 180px !important;
    border-radius: 10px !important;
  }
  .hero-section h1 {
    font-size: 2.1rem !important;
    line-height: 1.15 !important;
  }
  .hero-section .hero-text {
    font-size: 1rem !important;
    margin-top: 18px !important;
  }
  .hero-section .hero-cta a {
    font-size: 1rem !important;
    padding: 12px 18px !important;
    border-radius: 8px !important;
  }
  section, .info-section-license, .info-section-testlimit, .info-section-ctestem {
    padding: 24px 0 !important;
  }
  .section-content, .info-section-license > div, .info-section-testlimit > div, .info-section-ctestem > div {
    grid-template-columns: 1fr !important;
    padding: 18px 8px !important;
    gap: 12px !important;
    max-width: 100vw !important;
  }
  h2 {
    font-size: 1.35rem !important;
    margin-bottom: 10px !important;
  }
  .section-text, div[style*="font-size:1.13rem"], div[style*="font-size:1.08rem"] {
    font-size: 0.98rem !important;
    margin-bottom: 12px !important;
    max-width: 100vw !important;
  }
  .pd-card-btn {
    font-size: 1rem !important;
    padding: 10px 16px !important;
    border-radius: 8px !important;
    max-width: 90vw !important;
  }
  #pd-image-container {
    max-width: 98vw !important;
    height: 180px !important;
    min-height: 120px !important;
  }
  #pd-image-container img {
    height: 100% !important;
    max-width: 100vw !important;
    border-radius: 8px !important;
  }
  #pd-bullets {
    font-size: 1rem !important;
    padding-left: 18px !important;
  }
  .info-image-container img {
    height: 120px !important;
    border-radius: 8px !important;
  }
  .info-section-license, .info-section-testlimit, .info-section-ctestem {
    padding: 12px !important;
    border-radius: 10px !important;
    box-shadow: none !important;
    margin: 18px auto 0 auto !important;
    max-width: 100vw !important;
  }
}

  /* Additional mobile overrides moved from mathismopd.php to central stylesheet
     These rules target phones (<=600px) and are intentionally conservative
     to avoid conflicting with desktop grid/flex layouts already defined. */
  @media only screen and (max-width: 600px) {
    :root { -webkit-text-size-adjust: 100%; }
    body { font-size: 16px; line-height: 1.4; }

    /* Make hero children visually full width so they appear stacked on phones */
    .hero-section .hero-content > .hero-img-col,
    .hero-section .hero-content > .hero-text-col {
      width: 100%;
    }
    .hero-section .hero-img {
      max-width: 92%;
      height: auto;
      margin: 0 auto;
      display: block;
    }

    /* Center and scale titles on phones */
    .hero-title, .hero-title-main, .hero-title-sub { text-align: center; margin-left: auto; margin-right: auto; }
    .hero-title { font-size: 1.25rem; }
    .hero-title-main { font-size: 1.35rem; display: block; }
    .hero-title-sub { font-size: 0.95rem; }
    .hero-desc { font-size: 0.95rem; margin-top: 8px; text-align:center; max-width:92%; margin-left:auto; margin-right:auto; }

    /* Stack CTAs vertically but leave desktop layout untouched */
    .hero-cta-row { display: flex; flex-direction: column; gap: 10px; align-items: center; width: 100%; padding: 0; margin-top: 12px; }
    .hero-cta { width: 92%; padding: 12px 14px; border-radius: 8px; font-size: 1rem; box-sizing: border-box; text-align:center; }

    /* Feature cards: single column, but keep existing card styling */
    .feature-card-grid { grid-template-columns: 1fr; gap: 12px; }
    .feature-card { padding: 12px; max-width: 100%; }

    /* Section content horizontal padding for small screens */
    .section-content { padding-left: 14px; padding-right: 14px; }

    /* Let the main CSS handle grid/flex behaviour; just ensure images scale */
    .flexible-grid { grid-template-columns: 1fr; gap: 12px; }
    .flexible-col { width: 100%; }
    img, .flexible-image-container img, .bottom-img, .tab-img { max-width: 100%; height: auto; display: block; }

    /* Tabs: larger touch targets */
    .tab-buttons { gap: 6px; padding: 6px; }
    .tab-button { padding: 12px; font-size: 1rem; border-radius: 8px; }

    /* Reduce large margins/paddings that only help desktop */
    section.card-section, section.flexible-section, section.why-section { padding-top: 18px; padding-bottom: 18px; }

    /* Ensure flexible image container respects height on small screens */
    .flexible-image-container { max-width: 100%; height: auto; }
  }

  /* Hero-specific refinements for phones to avoid cropping/overlap and improve stacking */
  @media only screen and (max-width: 600px) {
    /* Ensure the hero stacks cleanly and reduce minimum height */
    .hero-content {
      grid-template-columns: 1fr !important;
      min-height: auto !important;
      padding: 20px 12px !important;
      gap: 12px !important;
    }

    /* Let hero images show without aggressive cropping */
    .hero-img {
      object-fit: contain !important;
      width: 100% !important;
      max-width: 100% !important;
      height: auto !important;
      max-height: 220px !important;
      border-radius: 12px !important;
      margin: 0 auto !important;
      display: block !important;
    }

    /* If a small variant class is used, keep it natural */
    .hero-img.small {
      max-height: 180px !important;
      border-radius: 8px !important;
    }

    /* Convert overlapping/absolute headings into normal flow on phones */
    .hero-left-heading {
      position: static !important;
      width: 100% !important;
      max-width: 100% !important;
      transform: none !important;
      text-align: center !important;
      padding: 6px 4px !important;
      margin-top: 6px !important;
    }

    /* Make overlay a stacked block below the image */
    .hero-image-overlay {
      position: static !important;
      transform: none !important;
      left: auto !important;
      bottom: auto !important;
      display: block !important;
      margin: 8px auto 0 auto !important;
      background: rgba(0,0,0,0.65) !important;
      color: #fff !important;
      padding: 8px 12px !important;
      border-radius: 10px !important;
      max-width: 92% !important;
      text-align: center !important;
    }
    .hero-image-overlay .hero-title-main { font-size: 1.15rem !important; }
    .hero-image-overlay .hero-title-sub { font-size: 0.9rem !important; }

    /* Set hero title/subtitle sizes on phones for desired hierarchy */
    .hero-title { font-size: 2rem !important; text-align: center !important; line-height: 1.02 !important; }
    .hero-title-main { font-size: 2rem !important; }
    /* add a small gap between main title and subtitle on mobile */
    .hero-title-sub { font-size: 1.1rem !important; font-weight: 700 !important; display: block !important; margin-top: 8px !important; }

    /* Ensure badge doesn't overlap oddly on mobile */
    .hero-heading-badge { margin-top: 8px !important; padding: 8px 12px !important; }

    /* Keep CTA cluster comfortable on small screens (tight vertical spacing) */
    .hero-cta-row { padding: 0 6px !important; gap: 5px !important; }
    .hero-cta { margin: 0 !important; font-size: 1rem !important; padding: 12px 14px !important; width: 92% !important; display: flex !important; justify-content: center !important; align-items: center !important; text-align: center !important; }
  }

  /* Tighten hero text spacing on very small screens */
  @media only screen and (max-width: 600px) {
    .hero-title {
      margin: 0 !important;
      line-height: 1.02 !important;
      letter-spacing: 0 !important;
      word-spacing: normal !important;
      text-align: center !important;
    }
    .hero-title-main, .hero-title-sub {
      display: block !important;
      margin: 0 !important;
      padding: 0 !important;
      line-height: 1.02 !important;
    }
    /* hide explicit <br> so we don't get extra gaps; spans will stack cleanly */
    .hero-title br { display: none !important; }
    .hero-desc { margin-top: 6px !important; line-height: 1.22 !important; }
  }

  /* Ensure card/flexible images always appear after text on phones
     Uses the relational selector :has() to detect image-containing columns.
     If you need broader compatibility, I can add a small JS fallback that
     moves image columns after text when window.innerWidth <= 600. */
  @media only screen and (max-width: 600px) {
    .flexible-grid { display: flex; flex-direction: column; }
    .flexible-grid .flexible-col { order: 0; }
    .flexible-grid .flexible-col:has(img),
    .flexible-grid .flexible-col:has(.flexible-image-container) { order: 1; }
  }