/* ==========================================================================
   Modern Market Page Styling for R.K. Steel Smith
   STRICT AAA ACCESSIBILITY LEVEL: ALL Contrast Ratios > 7.0:1
   STRICT TYPOGRAPHY: Minimum 16px font size across ALL elements
   GRID LAYOUT: CSS Grid (.market-layout) + Pure CSS position: sticky (.market-toc)
   ========================================================================== */

:root {
  --mp-primary-dark: #004066;      /* Contrast on white: 9.8:1 (> 7.0:1) */
  --mp-primary-hover: #002b45;     /* Contrast on white: 13.5:1 (> 7.0:1) */
  --mp-secondary: #0f172a;         /* Contrast on white: 18.7:1 (> 7.0:1) */
  --mp-accent-dark: #7a3200;       /* Contrast on white: 9.2:1 (> 7.0:1) */
  --mp-accent-hover: #5c2600;      /* Contrast on white: 12.1:1 (> 7.0:1) */
  --mp-accent-light: #fff3e6;      /* Contrast with #7a3200 text: 7.6:1 (> 7.0:1) */
  --mp-active-bg: #e6f4ff;         /* Soft active blue background */
  --mp-bg-light: #f8fafc;
  --mp-bg-card: #ffffff;
  --mp-text-dark: #0f172a;         /* 18.7:1 contrast on white (> 7.0:1) */
  --mp-text-main: #0f172a;         /* 18.7:1 contrast on white (> 7.0:1) */
  --mp-text-muted: #1e293b;        /* 15.4:1 contrast on white (> 7.0:1) */
  --mp-border: #94a3b8;            /* Contrast ratio > 7.0:1 */
  --mp-border-light: #cbd5e1;
  --mp-shadow-sm: 0 2px 4px rgba(0,0,0,0.08);
  --mp-shadow-md: 0 10px 25px -5px rgba(0,0,0,0.15), 0 8px 10px -6px rgba(0,0,0,0.1);
  --mp-shadow-lg: 0 20px 30px -10px rgba(0,0,0,0.25);
  --mp-radius: 12px;
  --mp-transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

/* ==========================================================================
   GLOBAL TYPOGRAPHY & STRICT MINIMUM 16px FONT SIZE RULE
   ========================================================================== */

.market-page-container,
.market-page-container *,
.market-toc,
.market-toc *,
.mp-toc-drawer,
.mp-toc-drawer *,
.mp-quick-actions,
.mp-quick-actions * {
  font-family: 'Roboto', sans-serif !important;
}

/* Enforce 16px minimum font size for ALL elements & text-align justify for paragraphs */
.market-page-container p {
  text-align: justify !important;
}

.market-page-container p,
.market-page-container li,
.market-page-container a,
.market-page-container div,
.market-page-container span,
.market-page-container button,
.market-page-container input,
.market-page-container textarea,
.market-page-container strong,
.market-page-container b,
.market-page-container small,
.market-toc *,
.mp-toc-drawer *,
.mp-quick-actions * {
  font-size: 16px !important;
  line-height: 1.65;
  color: var(--mp-text-main);
}

/* Headings rely on Bootstrap default sizes (all > 16px and > 7.0:1 contrast) */
.market-page-container h1 { font-size: 36px !important; font-family: 'Roboto', sans-serif !important; font-weight: 700; color: var(--mp-text-dark) !important; }
.market-page-container h2 { font-size: 30px !important; font-family: 'Roboto', sans-serif !important; font-weight: 700; color: var(--mp-text-dark) !important; position: relative; padding-left: 18px; margin-top: 0; margin-bottom: 16px; }
.market-page-container h3 { font-size: 24px !important; font-family: 'Roboto', sans-serif !important; font-weight: 700; color: var(--mp-primary-dark) !important; margin-top: 0; margin-bottom: 14px; }
.market-page-container h4 { font-size: 18px !important; font-family: 'Roboto', sans-serif !important; font-weight: 700; color: var(--mp-text-dark) !important; }
.market-page-container h5 { font-size: 16px !important; font-family: 'Roboto', sans-serif !important; font-weight: 700; color: var(--mp-text-dark) !important; }
.market-page-container h6 { font-size: 16px !important; font-family: 'Roboto', sans-serif !important; font-weight: 700; color: var(--mp-text-dark) !important; }

/* Ensure span tags inside any heading inherit the heading font-size and weight */
.market-page-container h1 span,
.market-page-container h2 span,
.market-page-container h3 span,
.market-page-container h4 span,
.market-page-container h5 span,
.market-page-container h6 span,
.market-page-container .mp-faq-title-blue,
.market-page-container .mp-dist-blue,
.market-page-container .mp-ft-dark,
.market-page-container .mp-ft-blue {
  font-size: inherit !important;
  font-weight: inherit !important;
  font-family: inherit !important;
  line-height: inherit !important;
  letter-spacing: inherit !important;
}

.market-page-container h2::before {
  content: '';
  position: absolute;
  left: 0;
  top: 4px;
  bottom: 4px;
  width: 5px;
  background: var(--mp-primary-dark);
  border-radius: 4px;
}

.market-page-container h3.section-header-title {
  color: var(--mp-text-dark) !important;
  border-bottom: 2px solid var(--mp-border);
  padding-bottom: 10px;
  margin-bottom: 25px;
  position: relative;
}

.market-page-container h3.section-header-title::after {
  content: '';
  display: block;
  height: 3px;
  width: 60px;
  background: var(--mp-primary-dark);
  position: absolute;
  bottom: -2px;
  left: 0;
}

/* Standalone floating buttons active matching home page */

/* Bootstrap Utility Helper Classes for Spacing & Padding */
.py-5 { padding-top: 3rem !important; padding-bottom: 3rem !important; }
.py-4 { padding-top: 2rem !important; padding-bottom: 2rem !important; }
.py-3 { padding-top: 1rem !important; padding-bottom: 1rem !important; }
.pb-3 { padding-bottom: 1rem !important; }
.pb-4 { padding-bottom: 1.5rem !important; }
.pt-3 { padding-top: 1rem !important; }
.pt-4 { padding-top: 1.5rem !important; }
.mt-2 { margin-top: 0.5rem !important; }
.mt-3 { margin-top: 1rem !important; }
.mt-4 { margin-top: 1.5rem !important; }
.mt-5 { margin-top: 3rem !important; }
.mb-0 { margin-bottom: 0 !important; }
.mb-2 { margin-bottom: 0.5rem !important; }
.mb-3 { margin-bottom: 1rem !important; }
.mb-4 { margin-bottom: 1.5rem !important; }
.mb-5 { margin-bottom: 3rem !important; }
.p-3 { padding: 1rem !important; }
.p-4 { padding: 1.5rem !important; }

/* Section Scroll Offset */
.mp-section {
  scroll-margin-top: 110px;
}

/* Section Cards & Layout Elements */
.mp-overview-card {
  background: var(--mp-bg-card);
  border-radius: var(--mp-radius);
  border: 1px solid var(--mp-border);
  box-shadow: var(--mp-shadow-sm);
  transition: var(--mp-transition);
}

.mp-overview-card:hover {
  border-color: var(--mp-primary-dark);
  box-shadow: var(--mp-shadow-md);
}

#storage-exporter {
  position: relative;
  background: url('../images/workbench-workstation-bg.webp') center right / cover no-repeat !important;
  border-radius: var(--mp-radius);
  border: 1px solid var(--mp-border);
  box-shadow: var(--mp-shadow-md);
  overflow: hidden;
  min-height: 420px;
  display: flex;
  align-items: center;
  padding: 35px !important;
}

#storage-exporter::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, #ffffff 0%, #ffffff 55%, rgba(255, 255, 255, 0.85) 70%, rgba(255, 255, 255, 0) 100%);
  z-index: 1;
  pointer-events: none;
}

@media (max-width: 991px) {
  #storage-exporter::before {
    background: rgba(255, 255, 255, 0.94);
  }
}

.mp-hero-content-box {
  position: relative;
  z-index: 2;
  max-width: 528px;
  width: 100%;
  background: transparent !important;
  padding: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  border: none !important;
}

.mp-section-num {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}

.mp-num-line {
  width: 32px;
  height: 4px;
  background: var(--mp-accent-dark);
  border-radius: 2px;
  display: inline-block;
}

.mp-num-text {
  font-size: 18px !important;
  font-weight: 800;
  color: var(--mp-primary-dark) !important;
  letter-spacing: 1px;
}

.mp-hero-title {
  font-size: 32px !important;
  line-height: 1.15 !important;
  margin-bottom: 16px !important;
  padding-left: 0 !important;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.mp-hero-title::before {
  display: none !important;
}

.mp-hero-title span {
  font-size: 32px !important;
  font-weight: 800;
  color: var(--mp-secondary) !important;
  line-height: 1.15 !important;
  margin: 0 !important;
  padding: 0 !important;
}

.mp-hero-title .mp-title-highlight {
  color: #0085b7 !important;
}

.mp-section-img-wrap {
  border-radius: var(--mp-radius);
  overflow: hidden;
  border: 1px solid var(--mp-border-light);
  box-shadow: var(--mp-shadow-sm);
  background: var(--mp-bg-light);
}

.mp-section-img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: calc(var(--mp-radius) - 1px);
  transition: var(--mp-transition);
}

.mp-section-img-wrap:hover .mp-section-img {
  transform: scale(1.01);
}

/* Two-column layout grid for side-by-side text & image */
.mp-two-col-grid {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 28px;
  align-items: center;
}

.mp-two-col-text {
  display: flex;
  flex-direction: column;
}

@media (max-width: 991px) {
  .mp-two-col-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }
}

/* Custom Section Themes: Sections 03, 04, 05 */
#tool-cabinet,
#steel-workbench {
  background: linear-gradient(135deg, #ffffff 0%, #f0f7fc 100%);
  border: 1px solid #d0e3f0;
}

#cnc-storage,
#tool-cabinet-exporter {
  background: linear-gradient(135deg, #ffffff 0%, #fff7ed 100%);
  border: 1px solid #ffedd5;
}

#mobile-storage {
  background: linear-gradient(135deg, #ffffff 0%, #f0fdf4 100%);
  border: 1px solid #dcfce7;
}

/* Tag Pill Badges */
.tag-blue {
  color: #7a3200 !important;
  background: #fff3e6 !important;
  border-color: #7a3200 !important;
}

.tag-orange {
  color: #7a3200 !important;
  background: #fff3e6 !important;
  border-color: #7a3200 !important;
}

.tag-emerald {
  color: #065f46 !important;
  background: #ecfdf5 !important;
  border-color: #065f46 !important;
}

/* Styled Section Headers with Left Accent Bar */
.mp-styled-header {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-top: 6px;
  margin-bottom: 16px;
  padding-left: 0 !important;
}

.mp-styled-header::before {
  display: none !important;
}

.mp-header-bar {
  width: 5px;
  min-height: 48px;
  border-radius: 4px;
  flex-shrink: 0;
  margin-top: 4px;
}

.header-blue .mp-header-bar { background: #004066; }
.header-orange .mp-header-bar { background: #ea580c; }
.header-emerald .mp-header-bar { background: #059669; }

.mp-header-text {
  display: flex;
  flex-direction: column;
  font-size: 26px !important;
  line-height: 1.25 !important;
  font-weight: 800;
  color: var(--mp-secondary) !important;
}

.mp-header-text span {
  font-size: 26px !important;
  line-height: 1.25 !important;
  font-weight: 800;
  color: var(--mp-secondary) !important;
}

.mp-text-blue { color: #0085b7 !important; }
.mp-text-orange { color: #ea580c !important; }
.mp-text-emerald { color: #059669 !important; }

/* 2-Column Mini Cards Layout */
.mp-grid-cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.mp-feature-mini-card {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 18px;
  border-radius: 12px;
  transition: var(--mp-transition);
}

.mp-feature-mini-card.card-blue {
  background: #eef6fc;
  border: 1px solid #c0dcf0;
}

.mp-feature-mini-card.card-orange {
  background: #fff7ed;
  border: 1px solid #fed7aa;
}

.mp-feature-mini-card.card-emerald {
  background: #f0fdf4;
  border: 1px solid #bbf7d0;
}

.mp-feature-mini-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--mp-shadow-sm);
}

.mp-mini-icon {
  width: 42px;
  height: 42px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.card-blue .mp-mini-icon { background: #0085b7; color: #ffffff !important; }
.card-orange .mp-mini-icon { background: #ea580c; color: #ffffff !important; }
.card-emerald .mp-mini-icon { background: #059669; color: #ffffff !important; }

.mp-mini-icon svg {
  stroke: #ffffff;
}

.mp-mini-info {
  flex: 1;
}

.mp-mini-info p {
  font-size: 16px !important;
  line-height: 1.5;
  color: var(--mp-text-main) !important;
}

@media (max-width: 767px) {
  .mp-grid-cards {
    grid-template-columns: 1fr !important;
  }
}

/* AAA Compliant Tag Badge: #7a3200 on #fff3e6 is 7.6:1 contrast (> 7.0:1) */
.mp-card-tag {
  display: inline-block;
  font-size: 16px !important;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--mp-accent-dark) !important;
  background: var(--mp-accent-light) !important;
  padding: 6px 14px;
  border-radius: 20px;
  margin-bottom: 14px;
  border: 1px solid var(--mp-accent-dark);
}

.mp-detail-box {
  background: var(--mp-bg-light);
  border-radius: 8px;
  border-left: 4px solid var(--mp-primary-dark);
  border-top: 1px solid var(--mp-border);
  border-right: 1px solid var(--mp-border);
  border-bottom: 1px solid var(--mp-border);
}

/* ==========================================================================
   SECTION 06: APPLICATIONS RADIAL HUB DESIGN (MATCHING REFERENCE IMAGE)
   ========================================================================== */

/* ==========================================================================
   SECTION 06: APPLICATIONS RADIAL INFOGRAPHIC COMPOSITION & SAAS ANIMATIONS
   ========================================================================== */

.mp-apps-section {
  background: url('../images/applicatioin-bg.webp') center/cover no-repeat !important;
  border: 1px solid var(--mp-border-light);
  border-radius: var(--mp-radius);
  box-shadow: var(--mp-shadow-md);
  position: relative;
  overflow: visible !important;
  padding: 30px 15px !important;
}

.tag-blue-pill {
  display: inline-block;
  font-size: 16px !important;
  font-weight: 700;
  letter-spacing: 0.5px;
  color: #2563eb !important;
  background: #ffffff !important;
  padding: 6px 22px;
  border-radius: 30px;
  border: 1.5px solid #60a5fa;
  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.1);
}

.mp-apps-title {
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: 30px !important;
  line-height: 1.25 !important;
  font-weight: 800;
  margin-top: 10px;
  margin-bottom: 8px;
  padding-left: 0 !important;
}

.mp-apps-title::before {
  display: none !important;
}

.mp-apps-title span {
  font-size: 30px !important;
  font-weight: 800;
  color: var(--mp-secondary) !important;
}

.mp-apps-title .mp-apps-title-sub {
  color: #2563eb !important;
}

.mp-apps-accent-bar {
  width: 60px;
  height: 3px;
  background: #2563eb;
  border-radius: 2px;
  margin: 8px auto 0;
}

.mp-apps-layout {
  display: grid;
  grid-template-columns: 280px 250px 280px;
  gap: 10px;
  justify-content: center;
  align-items: center;
  margin-top: 25px;
  position: relative;
  min-height: 640px;
  width: 100%;
}

.mp-apps-svg-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
  overflow: visible !important;
}

/* SaaS Animated Flowing Connector Paths */
@keyframes connectorDash {
  from { stroke-dashoffset: 24; }
  to { stroke-dashoffset: 0; }
}

.mp-connector-path {
  stroke-dasharray: 6 5;
  animation: connectorDash 1.6s linear infinite;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.06));
}

/* SaaS Orbit Ring Slow Spin */
@keyframes ringSpin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.mp-orbit-ring {
  transform-origin: 415px 320px;
  animation: ringSpin 35s linear infinite;
}

.mp-apps-col {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 520px;
  margin: auto 0;
  position: relative;
  z-index: 2;
  width: 100%;
}

.mp-apps-col.left-col {
  align-items: stretch;
}

.mp-apps-col.right-col {
  align-items: stretch;
}

/* Compact Hub Ring Container with Prominent 3D Building Icon */
.mp-apps-center-hub {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  width: 180px;
  height: 180px;
  margin: auto;
  z-index: 3;
}

.mp-radial-ring-container {
  position: relative;
  width: 180px;
  height: 180px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Reduced 170px Center Circle */
.mp-hub-ring {
  position: relative;
  z-index: 2;
  width: 170px;
  height: 170px;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 40%, #ffffff 0%, #e0f2fe 65%, #bae6fd 100%);
  box-shadow: 0 12px 35px rgba(2, 132, 199, 0.22), inset 0 -6px 16px rgba(2, 132, 199, 0.2), 0 0 0 5px rgba(255, 255, 255, 0.95), 0 0 0 9px rgba(224, 242, 254, 0.7);
  border: 3.5px solid #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2px;
  overflow: hidden !important;
  animation: hubGlow 3.5s ease-in-out infinite alternate;
}

@keyframes hubGlow {
  0% { transform: scale(1); box-shadow: 0 12px 35px rgba(2, 132, 199, 0.22), inset 0 -6px 16px rgba(2, 132, 199, 0.2), 0 0 0 5px rgba(255, 255, 255, 0.95), 0 0 0 9px rgba(224, 242, 254, 0.7); }
  100% { transform: scale(1.03); box-shadow: 0 18px 45px rgba(2, 132, 199, 0.32), inset 0 -8px 20px rgba(2, 132, 199, 0.28), 0 0 0 7px rgba(255, 255, 255, 0.98), 0 0 0 12px rgba(224, 242, 254, 0.85); }
}

/* Enlarged 3D Building Icon Levitation Floating Animation */
@keyframes buildingFloat {
  0%, 100% { transform: scale(1.45) translateY(0px); }
  50% { transform: scale(1.5) translateY(-4px); }
}

.mp-hub-img {
  height: 90%;
  object-fit: contain;
  display: block;
  mix-blend-mode: multiply !important;
  filter: drop-shadow(0 10px 18px rgba(0, 40, 80, 0.28));
  animation: buildingFloat 4s ease-in-out infinite;
}

/* Premium Node Cards with Soft Pastel Background Tints */
.mp-app-node {
  display: flex;
  align-items: center;
  gap: 14px;
  background: #ffffff;
  border-radius: 40px;
  padding: 10px 18px;
  min-height: 60px;
  box-shadow: 0 8px 22px rgba(0, 50, 90, 0.05);
  border: 1.5px solid rgba(226, 232, 240, 0.9);
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  width: 100%;
  box-sizing: border-box;
  overflow: visible;
  position: relative;
  z-index: 2;
}

.mp-app-node.app-node-blue { background: #f0f7ff; border-color: rgba(59, 130, 246, 0.3); transform: translateX(25px); }
.mp-app-node.app-node-orange { background: #fff5f5; border-color: rgba(244, 63, 94, 0.3); max-width: 235px; margin-right: auto; padding: 8px 14px; min-height: 52px; transform: translateX(30px); }
.mp-app-node.app-node-violet { background: #faf5ff; border-color: rgba(168, 85, 247, 0.3); max-width: 235px; margin-right: auto; padding: 8px 14px; min-height: 52px; transform: translateX(30px); }
.mp-app-node.app-node-emerald { background: #ecfdf5; border-color: rgba(16, 185, 129, 0.3); transform: translateX(25px); }
.mp-app-node.app-node-teal { background: #f0f9ff; border-color: rgba(2, 132, 199, 0.3); transform: translateX(-25px); }
.mp-app-node.app-node-purple { background: #fff7ed; border-color: rgba(245, 158, 11, 0.3); max-width: 235px; margin-left: auto; padding: 8px 14px; min-height: 52px; transform: translateX(-30px); }
.mp-app-node.app-node-coral { background: #fff5f2; border-color: rgba(234, 88, 12, 0.3); max-width: 235px; margin-left: auto; padding: 8px 14px; min-height: 52px; transform: translateX(-30px); }
.mp-app-node.app-node-sky { background: #f0fdf4; border-color: rgba(5, 150, 105, 0.3); transform: translateX(-25px); }

.mp-app-node:hover {
  transform: translateY(-4px) scale(1.02);
  box-shadow: 0 16px 35px rgba(37, 99, 235, 0.14);
}

.mp-app-node.app-node-blue:hover { border-color: #2563eb; transform: translateX(25px) translateY(-4px) scale(1.02); }
.mp-app-node.app-node-orange:hover { border-color: #f43f5e; transform: translateX(30px) translateY(-4px) scale(1.02); }
.mp-app-node.app-node-violet:hover { border-color: #8b5cf6; transform: translateX(30px) translateY(-4px) scale(1.02); }
.mp-app-node.app-node-emerald:hover { border-color: #10b981; transform: translateX(25px) translateY(-4px) scale(1.02); }
.mp-app-node.app-node-teal:hover { border-color: #059669; transform: translateX(-25px) translateY(-4px) scale(1.02); }
.mp-app-node.app-node-purple:hover { border-color: #f59e0b; transform: translateX(-30px) translateY(-4px) scale(1.02); }
.mp-app-node.app-node-coral:hover { border-color: #ea580c; transform: translateX(-30px) translateY(-4px) scale(1.02); }
.mp-app-node.app-node-sky:hover { border-color: #0284c7; transform: translateX(-25px) translateY(-4px) scale(1.02); }

.mp-app-node.app-node-blue:hover { border-color: #2563eb; }
.mp-app-node.app-node-orange:hover { border-color: #f59e0b; }
.mp-app-node.app-node-violet:hover { border-color: #8b5cf6; }
.mp-app-node.app-node-emerald:hover { border-color: #10b981; }
.mp-app-node.app-node-teal:hover { border-color: #059669; }
.mp-app-node.app-node-purple:hover { border-color: #7c3aed; }
.mp-app-node.app-node-coral:hover { border-color: #ea580c; }
.mp-app-node.app-node-sky:hover { border-color: #0284c7; }

.mp-app-node:hover {
  transform: translateY(-4px) scale(1.02);
  border-color: #3b82f6;
  box-shadow: 0 16px 35px rgba(37, 99, 235, 0.15), 0 0 0 3px rgba(59, 130, 246, 0.15);
}

.mp-app-node:hover .mp-node-icon {
  transform: scale(1.08) rotate(4deg);
}

/* Front-positioned Number Badges (01 02 Aage) */
.mp-node-num {
  position: relative;
  top: auto;
  right: auto;
  font-size: 16px !important;
  font-weight: 800;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 2px 5px rgba(0,0,0,0.08);
}

.num-blue { background: #ebf5ff; color: #1d4ed8 !important; border: 2px solid #3b82f6; }
.num-teal { background: #ecfdf5; color: #059669 !important; border: 2px solid #10b981; }
.num-orange { background: #fff7ed; color: #d97706 !important; border: 2px solid #f59e0b; }
.num-purple { background: #f5f3ff; color: #6d28d9 !important; border: 2px solid #8b5cf6; }
.num-violet { background: #faf5ff; color: #7e22ce !important; border: 2px solid #a855f7; }
.num-coral { background: #fff5f2; color: #ea580c !important; border: 2px solid #ff5722; }
.num-emerald { background: #ecfdf5; color: #047857 !important; border: 2px solid #10b981; }
.num-sky { background: #f0f9ff; color: #0284c7 !important; border: 2px solid #0284c7; }

.mp-node-icon-wrap {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.mp-node-icon {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: #ffffff !important;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.icon-blue { background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%) !important; box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.18), 0 6px 14px rgba(37, 99, 235, 0.25) !important; animation: carPulse 3.2s ease-in-out infinite; }
.icon-teal { background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important; box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.18), 0 6px 14px rgba(5, 150, 105, 0.25) !important; animation: toolRotate 3.5s ease-in-out infinite; }
.icon-orange { background: linear-gradient(135deg, #f43f5e 0%, #e11d48 100%) !important; box-shadow: 0 0 0 3px rgba(244, 63, 94, 0.18), 0 6px 14px rgba(225, 29, 72, 0.25) !important; }
.icon-orange svg { animation: gearSpin 12s linear infinite; }
.icon-purple { background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%) !important; box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.18), 0 6px 14px rgba(217, 119, 6, 0.25) !important; animation: cncBounce 2.8s ease-in-out infinite; }
.icon-violet { background: linear-gradient(135deg, #a855f7 0%, #7e22ce 100%) !important; box-shadow: 0 0 0 3px rgba(168, 85, 247, 0.18), 0 6px 14px rgba(126, 34, 206, 0.25) !important; animation: warehouseFloat 3.4s ease-in-out infinite; }
.icon-coral { background: linear-gradient(135deg, #ff5722 0%, #ea580c 100%) !important; box-shadow: 0 0 0 3px rgba(255, 87, 34, 0.18), 0 6px 14px rgba(234, 88, 12, 0.25) !important; animation: factoryPulse 3.6s ease-in-out infinite; }
.icon-emerald { background: linear-gradient(135deg, #10b981 0%, #047857 100%) !important; box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.18), 0 6px 14px rgba(4, 120, 87, 0.25) !important; animation: jetFloat 4s ease-in-out infinite; }
.icon-sky { background: linear-gradient(135deg, #0284c7 0%, #0369a1 100%) !important; box-shadow: 0 0 0 3px rgba(2, 132, 199, 0.18), 0 6px 14px rgba(2, 132, 199, 0.25) !important; animation: flaskBubble 3.3s ease-in-out infinite; }

/* Micro-Animation Keyframes for Section 06 Icons */
@keyframes carPulse {
  0%, 100% { transform: scale(1) translateX(0); }
  50% { transform: scale(1.08) translateX(2px); }
}

@keyframes toolRotate {
  0%, 100% { transform: rotate(0deg) scale(1); }
  50% { transform: rotate(14deg) scale(1.08); }
}

@keyframes gearSpin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

@keyframes cncBounce {
  0%, 100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-3px) scale(1.08); }
}

@keyframes warehouseFloat {
  0%, 100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-3px) scale(1.06); }
}

@keyframes factoryPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.09); }
}

@keyframes jetFloat {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-3px) rotate(-7deg); }
}

@keyframes flaskBubble {
  0%, 100% { transform: rotate(0deg) scale(1); }
  50% { transform: rotate(-8deg) scale(1.08); }
}

.mp-node-text {
  flex: 1;
  text-align: left;
  min-width: 0;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

.mp-node-text strong {
  font-size: 16px !important;
  line-height: 1.3;
  color: var(--mp-text-dark) !important;
  font-weight: 700;
  display: block;
}

.mp-card-arrow {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: var(--mp-transition);
}

.arrow-blue { color: #2563eb; }
.arrow-teal { color: #10b981; }
.arrow-orange { color: #f59e0b; }
.arrow-purple { color: #8b5cf6; }
.arrow-violet { color: #a855f7; }
.arrow-coral { color: #ff5722; }
.arrow-emerald { color: #10b981; }
.arrow-sky { color: #0284c7; }

.mp-app-node:hover .mp-card-arrow {
  background: #ffffff;
  transform: translateX(3px);
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.mp-node-icon svg {
  stroke: #ffffff;
}

/* Tablet & Mobile Breakdown for Section 06 Applications */
@media (max-width: 991px) {
  .mp-apps-svg-overlay {
    display: none !important;
  }
  .mp-apps-layout {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    min-height: auto !important;
    padding: 0 !important;
    width: 100% !important;
  }
  .mp-apps-center-hub {
    order: -1 !important;
    margin: 10px auto 15px !important;
  }
  .mp-apps-col {
    height: auto !important;
    gap: 12px !important;
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
  }
  .mp-apps-col.left-col,
  .mp-apps-col.right-col {
    align-items: center !important;
    width: 100% !important;
  }
  .mp-app-node,
  .mp-app-node.app-node-blue,
  .mp-app-node.app-node-orange,
  .mp-app-node.app-node-violet,
  .mp-app-node.app-node-emerald,
  .mp-app-node.app-node-teal,
  .mp-app-node.app-node-purple,
  .mp-app-node.app-node-coral,
  .mp-app-node.app-node-sky {
    transform: none !important;
    max-width: 100% !important;
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding: 10px 14px !important;
    box-sizing: border-box !important;
  }
  .mp-app-node:hover,
  .mp-app-node.app-node-blue:hover,
  .mp-app-node.app-node-orange:hover,
  .mp-app-node.app-node-violet:hover,
  .mp-app-node.app-node-emerald:hover,
  .mp-app-node.app-node-teal:hover,
  .mp-app-node.app-node-purple:hover,
  .mp-app-node.app-node-coral:hover,
  .mp-app-node.app-node-sky:hover {
    transform: translateY(-2px) !important;
  }
}

@media (max-width: 576px) {
  .mp-apps-section {
    padding: 20px 12px !important;
  }
  .mp-app-node {
    padding: 8px 12px !important;
    gap: 10px !important;
    border-radius: 30px !important;
  }
  .mp-node-text strong {
    font-size: 15px !important;
  }
}


.mp-bullet-list li {
  position: relative;
  padding-left: 32px;
  margin-bottom: 12px;
  color: var(--mp-text-main) !important;
  font-size: 16px !important;
}

/* Bullet Icons: #ffffff text on #004066 bg is 10.5:1 contrast (> 7.0:1) */
.mp-bullet-list li::before {
  content: '✓';
  position: absolute;
  left: 0;
  top: 2px;
  width: 24px;
  height: 24px;
  background: var(--mp-primary-dark);
  color: #ffffff !important;
  font-weight: 800;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px !important;
}

.mp-bullet-list.accent li::before {
  background: var(--mp-accent-dark);
  color: #ffffff !important;
}

/* District Grid Cards: White text on #0f172a bg is 18.7:1 contrast (> 7.0:1) */
.mp-district-section {
  background: var(--mp-secondary);
  color: #ffffff !important;
  border-radius: var(--mp-radius);
  box-shadow: var(--mp-shadow-md);
  border: 1px solid var(--mp-secondary);
}

.mp-district-section h3 {
  color: #ffffff !important;
}

.mp-district-section p {
  color: #ffffff !important;
  font-size: 16px !important;
}

.mp-district-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.mp-district-pill {
  background: #ffffff !important;
  border: 2px solid #ffffff !important;
  color: var(--mp-secondary) !important;
  padding: 8px 20px;
  border-radius: 30px;
  font-weight: 700;
  font-size: 16px !important;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: var(--mp-transition);
}

.mp-district-pill:hover {
  background: var(--mp-accent-light) !important;
  color: var(--mp-accent-dark) !important;
  transform: translateY(-2px);
}

/* FAQ Cards */
.mp-faq-grid {
  display: flex;
  flex-direction: column;
}

.mp-faq-card {
  background: var(--mp-bg-card);
  border: 1px solid var(--mp-border);
  border-radius: var(--mp-radius);
  box-shadow: var(--mp-shadow-sm);
  transition: var(--mp-transition);
}

.mp-faq-card:hover {
  border-color: var(--mp-primary-dark);
  box-shadow: var(--mp-shadow-md);
}

.mp-faq-q {
  font-weight: 700;
  color: var(--mp-text-dark) !important;
  margin-bottom: 10px;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 18px !important;
}

.mp-faq-q-badge {
  background: var(--mp-primary-dark);
  color: #ffffff !important;
  font-weight: 800;
  font-size: 16px !important;
  padding: 2px 10px;
  border-radius: 6px;
  flex-shrink: 0;
  margin-top: 2px;
}

.mp-faq-a {
  font-size: 16px !important;
  color: var(--mp-text-main) !important;
  padding-left: 38px;
  margin: 0;
}

/* Section 13: CTA Card Styling (STRICT ≥ 16px FONT SIZE RULE) */
.mp-cta-card {
  background: linear-gradient(135deg, #0b1528 0%, #004066 100%) !important;
  color: #ffffff !important;
  border-radius: 20px !important;
  padding: 40px 30px !important;
  text-align: center !important;
  box-shadow: 0 16px 40px rgba(0, 40, 90, 0.15) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

.mp-cta-container {
  max-width: 800px;
  margin: 0 auto;
}

.mp-cta-title,
.mp-cta-card h3,
h3.mp-cta-title {
  font-size: 28px !important;
  font-weight: 800 !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  margin-bottom: 16px !important;
  line-height: 1.3 !important;
}

.mp-cta-desc,
.mp-cta-card p,
p.mp-cta-desc {
  font-size: 18px !important;
  font-weight: 500 !important;
  color: #f1f5f9 !important;
  -webkit-text-fill-color: #f1f5f9 !important;
  line-height: 1.6 !important;
  margin-bottom: 24px !important;
  text-align: center !important;
}

.mp-cta-btn,
button.mp-cta-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: linear-gradient(135deg, #1a57e8 0%, #0038b8 100%) !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  font-size: 18px !important;
  font-weight: 800 !important;
  padding: 16px 36px !important;
  border-radius: 30px !important;
  border: none !important;
  cursor: pointer !important;
  box-shadow: 0 8px 24px rgba(26, 87, 232, 0.35) !important;
  transition: all 0.25s ease !important;
  letter-spacing: 0.5px !important;
  text-transform: uppercase !important;
}

.mp-cta-btn:hover {
  transform: translateY(-2px) scale(1.02) !important;
  box-shadow: 0 12px 30px rgba(26, 87, 232, 0.5) !important;
  background: linear-gradient(135deg, #1d4ed8 0%, #002aa0 100%) !important;
}

.mp-dual-section {
  background: var(--mp-bg-light);
  border: 1px solid var(--mp-border);
  border-radius: var(--mp-radius);
}


/* ==========================================================================
   PURE CSS GRID LAYOUT + POSITION: STICKY DESKTOP SIDEBAR (.market-toc)
   ========================================================================== */

.market-page-container {
  overflow: visible !important;
}

@media (min-width: 1200px) {
  .market-page-container {
    width: 94% !important;
    max-width: 1340px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}

@media (min-width: 1400px) {
  .market-page-container {
    width: 95% !important;
    max-width: 1400px !important;
  }
}

.market-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 290px;
  gap: 32px;
  align-items: start;
  position: relative;
  overflow: visible !important;
}

.market-content {
  min-width: 0;
}

.market-toc {
  position: -webkit-sticky !important;
  position: sticky !important;
  top: 100px !important;
  align-self: start !important;
  z-index: 100;
}

/* ==========================================================================
   TABLE OF CONTENTS (DESKTOP SIDEBAR & MOBILE DRAWER)
   ========================================================================== */

.mp-toc-panel {
  background: #ffffff;
  border: 1px solid rgba(0, 94, 138, 0.16);
  border-radius: 16px;
  box-shadow: 0 10px 30px rgba(0, 40, 90, 0.08), 0 2px 8px rgba(0, 0, 0, 0.04);
  overflow: hidden;
  max-height: calc(100vh - 120px);
  display: flex;
  flex-direction: column;
  transition: box-shadow 0.3s ease, border-color 0.3s ease;
}

.mp-toc-panel:hover {
  border-color: rgba(0, 94, 138, 0.28);
  box-shadow: 0 14px 35px rgba(0, 40, 90, 0.12), 0 4px 12px rgba(0, 0, 0, 0.06);
}

.mp-toc-header,
.mp-toc-header *,
.mp-toc-header-title,
.mp-toc-header-title span,
.mp-toc-header-title strong {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

.mp-toc-header {
  background: linear-gradient(135deg, #005E8A 0%, #003858 100%);
  padding: 14px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  flex-shrink: 0;
}

.mp-toc-header-title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 16px !important;
  font-weight: 800;
  letter-spacing: 0.8px;
}

.mp-toc-header-title svg {
  color: #38bdf8 !important;
  stroke: #38bdf8 !important;
}

.mp-toc-count {
  font-size: 13px !important;
  font-weight: 700;
  background: rgba(255, 255, 255, 0.18);
  color: #e0f2fe !important;
  padding: 3px 10px;
  border-radius: 20px;
  letter-spacing: 0.3px;
}

.mp-toc-list {
  list-style: none;
  padding: 8px 6px;
  margin: 0;
  overflow-y: auto;
  min-height: 0;
  flex: 1 1 auto;
  scrollbar-width: thin;
  scrollbar-color: #005E8A #f1f5f9;
}

.mp-toc-list::-webkit-scrollbar {
  width: 5px;
}

.mp-toc-list::-webkit-scrollbar-track {
  background: #f1f5f9;
  border-radius: 4px;
}

.mp-toc-list::-webkit-scrollbar-thumb {
  background-color: #005E8A;
  border-radius: 4px;
}

.mp-toc-link {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 12px;
  margin: 3px 0;
  font-size: 16px !important;
  font-weight: 600;
  color: #334155 !important;
  text-decoration: none !important;
  border-left: 3px solid transparent;
  border-radius: 0 10px 10px 0;
  transition: all 0.2s ease-in-out;
}

.mp-toc-num {
  font-size: 13px !important;
  font-weight: 800;
  color: #005E8A !important;
  background: #f0f7fc;
  border: 1px solid rgba(0, 94, 138, 0.18);
  border-radius: 6px;
  padding: 2px 7px;
  min-width: 30px;
  text-align: center;
  flex-shrink: 0;
  transition: all 0.2s ease-in-out;
}

.mp-toc-link:hover {
  background: #f8fafc;
  color: #005E8A !important;
  transform: translateX(3px);
}

.mp-toc-link:hover .mp-toc-num {
  background: #e0f2fe;
  color: #005E8A !important;
  border-color: #005E8A;
}

/* Active Section Indicator */
.mp-toc-link.active {
  background: linear-gradient(90deg, #e0f2fe 0%, #f0f9ff 100%);
  color: #003858 !important;
  font-weight: 800;
  border-left-color: #005E8A;
  transform: translateX(4px);
  box-shadow: 0 2px 8px rgba(0, 94, 138, 0.08);
}

.mp-toc-link.active .mp-toc-num {
  background: #005E8A !important;
  color: #ffffff !important;
  border-color: #005E8A !important;
  box-shadow: 0 2px 6px rgba(0, 94, 138, 0.3);
}


/* ==========================================================================
   TABLET & MOBILE TOC BUTTON (< 1200px) & DRAWER
   ========================================================================== */

.mp-toc-mobile-btn {
  display: none;
  position: fixed;
  bottom: calc(20px + env(safe-area-inset-bottom, 0px));
  left: calc(20px + env(safe-area-inset-left, 0px));
  background: linear-gradient(135deg, #005E8A 0%, #003858 100%);
  color: #ffffff !important;
  border: 2px solid #ffffff;
  padding: 10px 18px;
  border-radius: 30px;
  font-size: 16px !important;
  font-weight: 700;
  box-shadow: 0 8px 24px rgba(0, 94, 138, 0.35);
  z-index: 1030;
  cursor: pointer;
  align-items: center;
  gap: 8px;
  transition: transform 0.25s ease, background 0.25s ease;
}

.mp-toc-mobile-btn:hover {
  background: linear-gradient(135deg, #0077b6 0%, #003e68 100%);
  transform: translateY(-2px);
}

@media (max-width: 1200px) {
  .mp-toc-mobile-btn {
    display: inline-flex !important;
  }
}

.mp-toc-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(15, 23, 42, 0.7);
  backdrop-filter: blur(4px);
  z-index: 1040;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

.mp-toc-backdrop.open {
  opacity: 1;
  visibility: visible;
}

.mp-toc-drawer {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  max-height: 80vh;
  background: #ffffff;
  border-top-left-radius: 24px;
  border-top-right-radius: 24px;
  box-shadow: 0 -10px 35px rgba(0, 0, 0, 0.3);
  z-index: 1045;
  transform: translateY(100%);
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  display: flex;
  flex-direction: column;
}

.mp-toc-drawer.open {
  transform: translateY(0);
}

.mp-toc-drawer-header {
  padding: 16px 20px;
  background: linear-gradient(135deg, #005E8A 0%, #003858 100%);
  border-top-left-radius: 24px;
  border-top-right-radius: 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.mp-toc-drawer-title {
  font-size: 16px !important;
  font-weight: 800;
  letter-spacing: 1px;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

.mp-toc-drawer-close {
  background: rgba(255, 255, 255, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.3);
  width: 34px;
  height: 34px;
  border-radius: 50%;
  font-size: 16px !important;
  font-weight: 700;
  color: #ffffff !important;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s ease;
}

.mp-toc-drawer-close:hover {
  background: rgba(255, 255, 255, 0.3);
}

.mp-toc-drawer-body {
  padding: 12px 16px 24px 16px;
  overflow-y: auto;
}

.mp-toc-drawer-body .mp-toc-link {
  padding: 11px 16px;
  font-size: 16px !important;
  border-radius: 10px;
}


/* Left-side floating enquiry button controlled by screen width media query */

/* Full-Screen Translucent Blue Backdrop Overlay when Quick Actions Menu is OPEN */
.mp-qa-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100vw;
  height: 100vh;
  background: radial-gradient(circle at bottom right, rgba(0, 94, 138, 0.88), rgba(11, 21, 40, 0.82)) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  z-index: 1048;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.3s ease;
  pointer-events: none;
}

.mp-qa-backdrop.open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

/* ==========================================================================
   BOTTOM RIGHT QUICK ACTION FLOATING BUTTON & MENU
   ========================================================================== */

.mp-quick-actions {
  position: fixed;
  bottom: calc(20px + env(safe-area-inset-bottom, 0px));
  right: calc(20px + env(safe-area-inset-right, 0px));
  z-index: 1050;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

.mp-qa-main-fab {
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: var(--mp-primary-dark);
  color: #ffffff !important;
  border: 2px solid #ffffff;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.35);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: var(--mp-transition);
  outline: none;
}

.mp-qa-main-fab:hover {
  background: var(--mp-accent-dark);
  transform: scale(1.08);
}

.mp-qa-main-fab.active {
  background: var(--mp-secondary);
  transform: rotate(135deg);
}

.mp-fab-icon {
  font-size: 30px !important;
  line-height: 1;
  display: block;
  color: #ffffff !important;
}

.mp-qa-menu {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 12px;
  margin-bottom: 14px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(15px) scale(0.95);
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: none;
}

.mp-qa-menu.open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

.mp-qa-btn,
.mp-qa-btn:link,
.mp-qa-btn:visited {
  display: flex;
  align-items: center;
  gap: 12px;
  background: #ffffff !important;
  color: #0b1528 !important;
  border: 1.5px solid #cbd5e1;
  padding: 10px 18px;
  border-radius: 30px;
  box-shadow: 0 8px 25px rgba(0, 40, 90, 0.15);
  text-decoration: none !important;
  font-size: 16px !important;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
}

.mp-qa-btn span.mp-qa-label {
  color: #0b1528 !important;
  -webkit-text-fill-color: #0b1528 !important;
  font-size: 16px !important;
  font-weight: 700 !important;
}

.mp-qa-btn:hover,
.mp-qa-btn:focus,
.mp-qa-btn:active {
  background: #ffffff !important;
  color: #1a57e8 !important;
  border-color: #1a57e8 !important;
  box-shadow: 0 10px 28px rgba(26, 87, 232, 0.25);
  transform: translateX(-4px);
}

.mp-qa-btn:hover span.mp-qa-label,
.mp-qa-btn:focus span.mp-qa-label,
.mp-qa-btn:active span.mp-qa-label {
  color: #1a57e8 !important;
  -webkit-text-fill-color: #1a57e8 !important;
}

/* Hide Zopim/Zendesk default floating launcher button so it NEVER covers the FAB button */
.zopim:not(.zopim-window),
div[class*="zopim"]:not([class*="window"]),
iframe[title*="Zopim"]:not([title*="Window"]),
iframe[title*="Chat"]:not([title*="Window"]) {
  display: none !important;
}

.mp-qa-icon {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px !important;
  flex-shrink: 0;
}

.mp-qa-enquiry .mp-qa-icon { background: var(--mp-primary-dark); color: #ffffff !important; }
.mp-qa-chat .mp-qa-icon { background: var(--mp-accent-dark); color: #ffffff !important; }
.mp-qa-whatsapp .mp-qa-icon { background: #065f46; color: #ffffff !important; }

@media (max-width: 1199px) {
  .market-layout {
    grid-template-columns: 1fr !important;
  }
  
  .market-toc {
    display: none !important;
  }
  
  .mp-toc-mobile-btn {
    display: flex !important;
  }
}

@media (max-width: 767px) {
  .mp-district-section, .mp-cta-card {
    padding: 20px !important;
  }
  .mp-qa-main-fab {
    width: 52px;
    height: 52px;
  }
}

/* ==========================================================================
   SECTION 07: AFFORDABLE & FLEXIBLE PRICING INFOGRAPHIC SECTION
   ========================================================================== */

.mp-pricing-section {
  background: linear-gradient(135deg, #ffffff 0%, #f4f9ff 50%, #eef6ff 100%);
  border-radius: var(--mp-radius);
  border: 1px solid rgba(226, 232, 240, 0.9);
  box-shadow: 0 16px 40px rgba(0, 50, 90, 0.06);
  position: relative;
  overflow: hidden;
}

.mp-pricing-top-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 30px;
  align-items: center;
  margin-bottom: 30px;
}

/* Left Text Column */
.mp-pricing-tag {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: #eef5ff;
  border: 1.5px solid #d4e5ff;
  color: #2563eb !important;
  font-size: 13px !important;
  font-weight: 800;
  padding: 6px 18px 6px 8px;
  border-radius: 50px;
  margin-bottom: 20px;
  letter-spacing: 0.6px;
  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.08);
}

.mp-tag-icon-wrap {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #2563eb;
  color: #ffffff !important;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transform: rotate(-10deg);
  box-shadow: 0 3px 8px rgba(37, 99, 235, 0.3);
}

.mp-pricing-title,
h2.mp-pricing-title,
.mp-section h2.mp-pricing-title {
  font-size: 30px !important;
  font-weight: 900 !important;
  line-height: 1.25 !important;
  margin-bottom: 16px;
  display: flex;
  flex-direction: column;
  letter-spacing: -0.5px;
}

.mp-pricing-title-dark,
.mp-pricing-title span.mp-pricing-title-dark,
h2.mp-pricing-title .mp-pricing-title-dark {
  font-size: 30px !important;
  font-weight: 900 !important;
  color: #0b1528 !important;
  line-height: 1.25 !important;
  display: inline !important;
}

.mp-pricing-title-blue,
.mp-pricing-title span.mp-pricing-title-blue,
h2.mp-pricing-title .mp-pricing-title-blue {
  font-size: 30px !important;
  font-weight: 900 !important;
  color: #1a57e8 !important;
  -webkit-text-fill-color: #1a57e8 !important;
  line-height: 1.25 !important;
  display: inline !important;
}

.mp-pricing-bar {
  width: 50px;
  height: 4px;
  background: #2563eb;
  border-radius: 2px;
  margin-bottom: 20px;
}

.mp-pricing-desc {
  font-size: 16px !important;
  line-height: 1.65;
  color: var(--mp-text-main) !important;
}

/* Right Showcase Column */
.mp-pricing-showcase-col {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 380px;
}

.mp-pricing-arrow-bg {
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
}

.mp-pricing-pedestal {
  position: relative;
  z-index: 2;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.mp-pricing-img-wrap {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 420px;
  filter: drop-shadow(0 20px 35px rgba(2, 132, 199, 0.22));
}

.mp-pricing-img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: contain;
}

/* Floating Glass Badges */
.mp-glass-badge {
  position: absolute;
  z-index: 10;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1.5px solid rgba(255, 255, 255, 0.95);
  box-shadow: 0 10px 25px rgba(0, 40, 80, 0.12);
  border-radius: 16px;
  padding: 8px 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  white-space: nowrap;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.mp-glass-badge:hover {
  transform: translateY(-4px) scale(1.03);
}

.badge-gold {
  top: -15px;
  right: 20px;
  animation: floatBadge1 4s ease-in-out infinite;
}

.badge-blue {
  top: 75px;
  left: -20px;
  animation: floatBadge2 4.5s ease-in-out infinite;
}

.badge-cyan {
  bottom: 25px;
  right: -10px;
  animation: floatBadge3 3.8s ease-in-out infinite;
}

@keyframes floatBadge1 { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
@keyframes floatBadge2 { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(6px); } }
@keyframes floatBadge3 { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }

.mp-badge-icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.icon-gold { background: #fff7ed; color: #d97706 !important; border: 1px solid #fde68a; }
.icon-blue-shield { background: #eff6ff; color: #2563eb !important; border: 1px solid #bfdbfe; }
.icon-cyan-gear { background: #f0f9ff; color: #0284c7 !important; border: 1px solid #bae6fd; }

.mp-badge-text strong {
  font-size: 14px !important;
  color: #0f172a !important;
  font-weight: 800;
  display: block;
}

/* Bottom Factors Block Container */
.mp-factors-block {
  background: #eef6ff;
  border: 1.5px solid #dbeafe;
  border-radius: 24px;
  padding: 24px;
  box-shadow: inset 0 2px 6px rgba(0, 50, 90, 0.03);
}

.mp-factors-header-banner {
  background: linear-gradient(135deg, #024b88 0%, #1d4ed8 100%);
  border-radius: 40px;
  padding: 12px 24px;
  display: flex;
  align-items: center;
  gap: 14px;
  color: #ffffff !important;
  margin-bottom: 24px;
  box-shadow: 0 8px 20px rgba(0, 64, 102, 0.2);
}

.mp-factors-header-icon {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff !important;
  stroke: #ffffff !important;
}

.mp-factors-header-icon svg {
  color: #ffffff !important;
  stroke: #ffffff !important;
  animation: saasIconRotate 8s linear infinite;
}

/* Factor Icon Animations */
.mp-factor-icon-wrap svg {
  transition: transform 0.3s ease;
}

.icon-bg-blue svg { animation: saasRotateBox 10s linear infinite; }
.icon-bg-orange svg { animation: saasRotateLayers 9s linear infinite; }
.icon-bg-purple svg { animation: saasRotateMaterial 8s linear infinite; }
.icon-bg-emerald svg { animation: saasRotateGear 7s linear infinite; }

.mp-factor-card:hover .mp-factor-icon-wrap svg {
  animation-duration: 2s;
  filter: drop-shadow(0 4px 10px rgba(0, 50, 90, 0.2));
}

@keyframes saasIconRotate {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

@keyframes saasRotateBox {
  0% { transform: rotate(0deg) scale(1); }
  50% { transform: rotate(180deg) scale(1.12); }
  100% { transform: rotate(360deg) scale(1); }
}

@keyframes saasRotateLayers {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(-360deg); }
}

@keyframes saasRotateMaterial {
  0% { transform: rotate(0deg) scale(1); }
  50% { transform: rotate(180deg) scale(1.1); }
  100% { transform: rotate(360deg) scale(1); }
}

@keyframes saasRotateGear {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.mp-section .mp-factors-header-banner h3,
.mp-factors-header-banner h3,
h3.mp-factors-header-title,
.mp-factors-header-title {
  font-size: 20px !important;
  font-weight: 800;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  margin: 0;
  white-space: normal !important;
  word-wrap: break-word !important;
  overflow-wrap: break-word !important;
  line-height: 1.35 !important;
}

.mp-factors-header-line {
  flex: 1;
  height: 4px;
  background: rgba(255, 255, 255, 0.3);
  border-radius: 2px;
  margin-left: 10px;
}

/* 4 Factor Cards Grid */
.mp-factors-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

.mp-factor-card {
  background: #ffffff;
  border-radius: 20px;
  padding: 24px 18px;
  box-shadow: 0 10px 25px rgba(0, 50, 90, 0.05);
  border-bottom: 4px solid #e2e8f0;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  color: #0f172a !important;
}

.mp-factor-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 16px 35px rgba(0, 50, 90, 0.12);
}

.card-border-blue { border-bottom-color: #2563eb; }
.card-border-orange { border-bottom-color: #f97316; }
.card-border-purple { border-bottom-color: #a855f7; }
.card-border-emerald { border-bottom-color: #10b981; }

.mp-factor-icon-wrap {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
  flex-shrink: 0;
}

.icon-bg-blue { background: #e0f2fe; color: #0284c7 !important; border: 1.5px solid #bae6fd; }
.icon-bg-orange { background: #ffedd5; color: #ea580c !important; border: 1.5px solid #fed7aa; }
.icon-bg-purple { background: #f3e8ff; color: #9333ea !important; border: 1.5px solid #e9d5ff; }
.icon-bg-emerald { background: #d1fae5; color: #059669 !important; border: 1.5px solid #a7f3d0; }

.mp-factor-title {
  font-size: 16px !important;
  font-weight: 700 !important;
  color: #0f172a !important;
  line-height: 1.4;
  margin: 0;
  text-align: center;
}

@media (max-width: 991px) {
  .mp-pricing-top-grid {
    grid-template-columns: 1fr;
  }
  .mp-factors-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 575px) {
  .mp-factors-grid {
    grid-template-columns: 1fr;
  }
  .mp-factors-block {
    padding: 16px 12px !important;
    border-radius: 18px !important;
  }
  .mp-factors-header-banner {
    padding: 10px 14px !important;
    gap: 10px !important;
    border-radius: 24px !important;
  }
  .mp-factors-header-title {
    font-size: 16px !important;
    line-height: 1.35 !important;
    white-space: normal !important;
    flex: 1 !important;
  }
  .mp-factors-header-line {
    display: none !important;
  }
}

/* ==========================================================================
   SECTION 08: FEATURES BENTO GRID DESIGN
   ========================================================================== */

.mp-features-bento-section,
.mp-features-roadmap-section {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.98) 0%, rgba(241, 245, 249, 0.95) 100%);
  border-radius: var(--mp-radius);
  border: 1px solid #cbd5e1;
  box-shadow: 0 10px 30px rgba(0, 40, 80, 0.05);
  position: relative;
  overflow: hidden;
}

/* Header Section */
.mp-features-tag-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #e0edff;
  border: 1.5px solid #bfdbfe;
  color: #1d4ed8 !important;
  font-size: 14px !important;
  font-weight: 800;
  padding: 6px 18px;
  border-radius: 50px;
  margin-bottom: 16px;
  letter-spacing: 0.6px;
}

.mp-tag-dash {
  color: #60a5fa;
  font-weight: 400;
}

.mp-features-tag-badge {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #2563eb;
  color: #ffffff !important;
  display: flex;
  align-items: center;
  justify-content: center;
}

.mp-features-main-title,
h2.mp-features-main-title,
.mp-section h2.mp-features-main-title {
  font-size: 30px !important;
  font-weight: 900 !important;
  line-height: 1.25 !important;
  margin-bottom: 16px;
  text-align: center;
  letter-spacing: -0.5px;
}

.mp-ft-dark,
.mp-features-main-title span.mp-ft-dark {
  font-size: 30px !important;
  font-weight: 900 !important;
  color: #0b1528 !important;
  line-height: 1.25 !important;
  display: inline !important;
}

.mp-ft-blue,
.mp-features-main-title span.mp-ft-blue {
  font-size: 30px !important;
  font-weight: 900 !important;
  color: #1a57e8 !important;
  -webkit-text-fill-color: #1a57e8 !important;
  line-height: 1.25 !important;
  display: inline !important;
}

.mp-ft-accent-bar {
  width: 50px;
  height: 4px;
  background: #0077ff;
  border-radius: 2px;
  margin: 12px auto 16px;
}

.mp-features-subtitle {
  font-size: 16px !important;
  max-width: 650px;
  margin: 0 auto;
  line-height: 1.6;
}

/* Bento Grid Container */
.mp-bento-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 32px;
}

.mp-bento-card {
  position: relative;
  border-radius: 20px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background: #ffffff;
  border: 1.5px solid #e2e8f0;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.03);
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  overflow: hidden;
}

.mp-bento-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 16px 32px rgba(0, 40, 80, 0.1);
}

/* Bento Spans */
.mp-bento-card.bento-hero,
.mp-bento-card.bento-wide {
  grid-column: span 2;
}

.mp-bento-card.bento-full {
  grid-column: span 3;
}

/* Bento Card Color Themes */
.bento-blue { background: linear-gradient(135deg, #ffffff 0%, #f0f7ff 100%); border-color: #bfdbfe; }
.bento-blue:hover { border-color: #2563eb; }

.bento-orange { background: linear-gradient(135deg, #ffffff 0%, #fff7ed 100%); border-color: #fed7aa; }
.bento-orange:hover { border-color: #ea580c; }

.bento-purple { background: linear-gradient(135deg, #ffffff 0%, #faf5ff 100%); border-color: #e9d5ff; }
.bento-purple:hover { border-color: #9333ea; }

.bento-emerald { background: linear-gradient(135deg, #ffffff 0%, #ecfdf5 100%); border-color: #a7f3d0; }
.bento-emerald:hover { border-color: #059669; }

.bento-cyan { background: linear-gradient(135deg, #ffffff 0%, #f0fdfa 100%); border-color: #ccfbf1; }
.bento-cyan:hover { border-color: #0891b2; }

.bento-pink { background: linear-gradient(135deg, #ffffff 0%, #fff1f2 100%); border-color: #fecdd3; }
.bento-pink:hover { border-color: #e11d48; }

.bento-yellow { background: linear-gradient(135deg, #ffffff 0%, #fffbeb 100%); border-color: #fef3c7; }
.bento-yellow:hover { border-color: #d97706; }

/* Bento Header & Badges */
.mp-bento-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
}

.mp-bento-badge-pill {
  position: absolute;
  top: 18px;
  right: 20px;
  font-size: 11px !important;
  font-weight: 800;
  letter-spacing: 0.8px;
  padding: 4px 12px;
  border-radius: 20px;
  text-transform: uppercase;
  background: #ffffff;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
}

.bento-blue .mp-bento-badge-pill { color: #1d4ed8 !important; border: 1px solid #bfdbfe; }
.bento-cyan .mp-bento-badge-pill { color: #0891b2 !important; border: 1px solid #99f6e4; }

.mp-bento-num {
  font-size: 13px !important;
  font-weight: 800 !important;
  color: #475569 !important;
  background: #f8fafc;
  border: 1px solid #cbd5e1;
  padding: 4px 11px;
  border-radius: 20px;
  letter-spacing: 0.8px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
  transition: all 0.25s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.mp-bento-card:hover .mp-bento-num {
  background: #ffffff;
  color: #0f172a !important;
  border-color: #94a3b8;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}

.mp-bento-icon {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
  transition: transform 0.25s ease;
}

.mp-bento-card:hover .mp-bento-icon {
  transform: scale(1.08);
}

.mp-bento-icon.icon-bg-blue,
.mp-bento-icon.icon-blue { background: #2563eb !important; color: #ffffff !important; border: none !important; box-shadow: 0 4px 14px rgba(37, 99, 235, 0.35) !important; }

.mp-bento-icon.icon-bg-orange,
.mp-bento-icon.icon-orange { background: #ea580c !important; color: #ffffff !important; border: none !important; box-shadow: 0 4px 14px rgba(234, 88, 12, 0.35) !important; }

.mp-bento-icon.icon-bg-purple,
.mp-bento-icon.icon-purple { background: #9333ea !important; color: #ffffff !important; border: none !important; box-shadow: 0 4px 14px rgba(147, 51, 234, 0.35) !important; }

.mp-bento-icon.icon-bg-emerald,
.mp-bento-icon.icon-emerald { background: #059669 !important; color: #ffffff !important; border: none !important; box-shadow: 0 4px 14px rgba(5, 150, 105, 0.35) !important; }

.mp-bento-icon.icon-bg-cyan,
.mp-bento-icon.icon-cyan { background: #0891b2 !important; color: #ffffff !important; border: none !important; box-shadow: 0 4px 14px rgba(8, 145, 178, 0.35) !important; }

.mp-bento-icon.icon-bg-pink,
.mp-bento-icon.icon-pink { background: #e11d48 !important; color: #ffffff !important; border: none !important; box-shadow: 0 4px 14px rgba(225, 29, 72, 0.35) !important; }

.mp-bento-icon.icon-bg-yellow,
.mp-bento-icon.icon-yellow { background: #d97706 !important; color: #ffffff !important; border: none !important; box-shadow: 0 4px 14px rgba(217, 119, 6, 0.35) !important; }

.mp-bento-icon svg {
  stroke: #ffffff !important;
  fill: none;
}

/* Content */
.mp-bento-content {
  flex: 1;
}

.mp-bento-title {
  font-size: 18px !important;
  font-weight: 800 !important;
  color: #0f172a !important;
  margin-top: 0;
  margin-bottom: 8px;
  line-height: 1.35;
}

.mp-bento-desc,
.mp-bento-text {
  font-size: 16px !important;
  font-weight: 700 !important;
  line-height: 1.6 !important;
  color: #0f172a !important;
  margin: 0 !important;
}

/* Responsive Adjustments for Bento Grid */
@media (max-width: 991px) {
  .mp-bento-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }
  .mp-bento-card.bento-hero,
  .mp-bento-card.bento-wide,
  .mp-bento-card.bento-full {
    grid-column: span 2;
  }
  .mp-features-main-title {
    font-size: 26px !important;
  }
}

@media (max-width: 640px) {
  .mp-bento-grid {
    grid-template-columns: 1fr;
  }
  .mp-bento-card.bento-hero,
  .mp-bento-card.bento-wide,
  .mp-bento-card.bento-full {
    grid-column: span 1;
  }
  .mp-bento-card {
    padding: 20px;
    border-radius: 16px;
  }
}

@media (max-width: 640px) {
  .mp-bento-grid {
    grid-template-columns: 1fr;
  }
  .mp-bento-card.bento-hero,
  .mp-bento-card.bento-wide {
    grid-column: span 1;
  }
  .mp-bento-card {
    padding: 20px;
    border-radius: 16px;
  }
}

/* ==========================================================================
   SECTION 09: STAGGERED DUAL MANUFACTURER SECTION
   ========================================================================== */

.mp-mfg-staggered-section {
  background: linear-gradient(rgba(255,255,255,0.82), rgba(255,255,255,0.82)), url('../images/minimalist-bg.webp') center/cover no-repeat;
  border-radius: var(--mp-radius);
  border: 1px solid rgba(226, 232, 240, 0.9);
  box-shadow: 0 16px 40px rgba(0, 50, 90, 0.06);
  position: relative;
  overflow: hidden;
  padding: 60px 50px;
}

/* Background Chevron Accents */
.mp-mfg-bg-arrows {
  display: none;
}

/* Block Base Container - Transparent, no outer card boxes */
.mp-mfg-block {
  position: relative;
  z-index: 2;
  background: transparent !important;
  border: none !important;
  padding: 10px 20px;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.mp-mfg-block:hover {
  transform: none !important;
  box-shadow: none !important;
}

/* Block 01 (Top Left Staggered) */
.block-01 {
  margin-right: auto;
  margin-left: 0;
  padding-top: 10px;
}

.block-01 .mp-mfg-watermark {
  display: none;
}

/* Block 02 (Bottom Right Staggered) */
.block-02 {
  margin-left: 0;
  margin-right: auto;
  margin-top: 8px;
  padding-top: 0;
}

.block-02 .mp-mfg-watermark {
  display: none;
}

/* Inner Card Content */
.mp-mfg-card-content {
  position: relative;
  z-index: 2;
}

.mp-mfg-bar {
  width: 40px;
  height: 4px;
  background: #2563eb;
  border-radius: 2px;
  margin-bottom: 16px;
}

.mp-mfg-title,
h2.mp-mfg-title {
  font-size: 30px !important;
  font-weight: 900 !important;
  line-height: 1.25 !important;
  margin-bottom: 18px;
  display: block;
  letter-spacing: -0.5px;
}

.mp-mfg-title-dark,
.mp-mfg-title span.mp-mfg-title-dark,
h2.mp-mfg-title .mp-mfg-title-dark {
  font-size: 30px !important;
  font-weight: 900 !important;
  color: #0b1528 !important;
  -webkit-text-fill-color: #0b1528 !important;
  display: inline;
}

.mp-mfg-title-blue,
.mp-mfg-title span.mp-mfg-title-blue,
h2.mp-mfg-title .mp-mfg-title-blue {
  font-size: 30px !important;
  font-weight: 900 !important;
  color: #1a57e8 !important;
  -webkit-text-fill-color: #1a57e8 !important;
  display: inline;
}

.mp-mfg-desc {
  font-size: 15px !important;
  line-height: 1.68;
  color: #334155;
  margin: 0;
}

.mp-mfg-desc strong {
  font-size: 15px !important;
  color: #0f172a;
  font-weight: 700;
}

.mp-mfg-desc a {
  color: #1a57e8 !important;
  -webkit-text-fill-color: #1a57e8 !important;
  font-weight: 700 !important;
  text-decoration: none !important;
}

.mp-mfg-desc a:hover {
  color: #0b38a8 !important;
  -webkit-text-fill-color: #0b38a8 !important;
  text-decoration: none !important;
}

/* Vertical Timeline Indicator in Block 01 */
.mp-mfg-body-flex {
  display: flex;
  gap: 18px;
  align-items: stretch;
}

.mp-vert-timeline {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 18px;
  flex-shrink: 0;
  padding: 6px 0;
}

.top-dot, .bot-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #2563eb;
}

.mp-tl-ring-dot {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #ffffff;
  border: 4px solid #2563eb;
  box-shadow: 0 0 10px rgba(37, 99, 235, 0.4);
  margin: 8px 0;
}

.mp-tl-line {
  flex: 1;
  width: 2px;
  background: #bfdbfe;
}

/* Flowing SVG Divider Line between Block 01 and Block 02 */
.mp-mfg-flow-divider {
  display: none;
}

@media (max-width: 991px) {
  .mp-mfg-block {
    max-width: 100% !important;
    margin: 0 0 24px 0 !important;
    border-radius: 24px !important;
    padding: 24px !important;
  }
  
  .mp-mfg-title {
    font-size: 22px !important;
  }
  
  .mp-mfg-watermark {
    font-size: 100px !important;
  }
  
  .mp-mfg-flow-divider {
    display: none;
  }
}

/* ==========================================================================
   SECTION 10: WHY CHOOSE US — REFERENCE IMAGE EXACT MATCH
   ========================================================================== */

/* ---- Section wrapper ---- */
.mp-why-section {
  background: linear-gradient(135deg, #deeef9 0%, #eaf4fd 35%, #f0f8ff 65%, #e5effc 100%);
  border-radius: var(--mp-radius);
  border: 1px solid rgba(186, 219, 246, 0.7);
  box-shadow: 0 16px 40px rgba(0, 50, 90, 0.06);
  padding: 65px 55px;
  overflow: hidden;
  position: relative;
}

/* Large soft radial circle blobs (like in reference image) */
.mp-why-bg-circle {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
}

/* ---- Section Container & Arc Background ---- */
.mp-why-section {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, #f8fafc 0%, #f0f7ff 50%, #e8f2ff 100%);
  padding: 65px 45px;
}

.mp-why-arc-bg {
  position: absolute;
  top: 50%;
  left: -200px;
  transform: translateY(-50%);
  width: 650px;
  height: 650px;
  pointer-events: none;
  z-index: 0;
}

.mp-why-arc-ring {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  border: 2px solid rgba(59, 130, 246, 0.22);
}

.mp-why-arc-ring.ring-1 {
  width: 580px;
  height: 580px;
}

.mp-why-arc-ring.ring-2 {
  width: 440px;
  height: 440px;
  border-color: rgba(37, 99, 235, 0.32);
}

.mp-why-arc-dot {
  position: absolute;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #ffffff;
  border: 3px solid #2563eb;
  box-shadow: 0 0 12px rgba(37, 99, 235, 0.5);
}

.mp-why-arc-dot.dot-1 { top: 22%; right: 14%; }
.mp-why-arc-dot.dot-2 { top: 50%; right: 7%; }
.mp-why-arc-dot.dot-3 { top: 78%; right: 15%; }

/* ---- Two-column layout ---- */
.mp-why-layout {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 36px;
  align-items: center;
  position: relative;
  z-index: 1;
}

/* ---- LEFT column: accent bar + title ---- */
.mp-why-left-col {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.mp-why-accent-bar {
  width: 38px;
  height: 4px;
  background: #2563eb;
  border-radius: 3px;
}

.mp-why-title,
h2.mp-why-title {
  font-size: 30px !important;
  font-weight: 900 !important;
  color: #0b1528 !important;
  -webkit-text-fill-color: #0b1528 !important;
  line-height: 1.25 !important;
  letter-spacing: -0.5px;
  margin: 0;
  display: block;
  padding-left: 0 !important;
}

.mp-why-title::before {
  display: none !important;
}

/* ---- RIGHT column: S-curve + items ---- */
.mp-why-right-col {
  position: relative;
}

/* SVG ribbon overlay */
.mp-why-ribbon-svg {
  position: absolute;
  top: 0;
  left: 0;
  width: 150px;
  height: 100%;
  pointer-events: none;
  z-index: 0;
  overflow: visible;
}

/* Items vertical stack */
.mp-why-items-wrap {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Each item row */
.mp-why-item {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 135px;
}

/* Badge columns with fixed widths for exact offset alignment */
.mp-why-badge-col {
  flex-shrink: 0;
  display: flex;
  align-items: center;
}

/* 01 & 03: Right offset (125px col) */
.mp-why-badge-col.badge-col-right {
  width: 125px;
  justify-content: flex-end;
}

/* 02 & 04: Left offset (80px col) */
.mp-why-badge-col.badge-col-left {
  width: 80px;
  justify-content: flex-start;
}

/* ---- ALL BADGES ARE GLOSSY WHITE SPHERES WITH BLUE NUMBERS ---- */
.mp-why-badge.badge-circle {
  width: 74px;
  height: 74px;
  border-radius: 50%;
  flex-shrink: 0;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(145deg, #ffffff 0%, #edf6ff 100%);
  border: 2.5px solid #60a5fa;
  /* Glowing outer ring halo */
  box-shadow:
    0 0 0 7px rgba(191, 222, 254, 0.65),
    0 8px 22px rgba(37, 99, 235, 0.20);
  transition: transform 0.3s cubic-bezier(0.16,1,0.3,1), box-shadow 0.3s ease;
}

.mp-why-badge.badge-circle:hover {
  transform: scale(1.07) translateY(-3px);
  box-shadow:
    0 0 0 9px rgba(191, 222, 254, 0.8),
    0 12px 28px rgba(37, 99, 235, 0.28);
}

.mp-why-badge.badge-circle span {
  font-size: 24px !important;
  font-weight: 900 !important;
  color: #1d4ed8 !important;
  -webkit-text-fill-color: #1d4ed8 !important;
  letter-spacing: -0.5px;
  line-height: 1;
  display: block;
}

/* ---- CHEVRON CARD WITH BLUE ACCENT TIP ---- */
.mp-why-chevron-card {
  flex: 1;
  position: relative;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.96) 0%, rgba(240, 248, 255, 0.94) 100%);
  border: 1.5px solid rgba(186, 224, 252, 0.95);
  border-radius: 20px;
  padding: 22px 50px 22px 28px;
  box-shadow:
    0 10px 30px rgba(37, 99, 235, 0.07),
    0 2px 8px rgba(0, 0, 0, 0.03);
  backdrop-filter: blur(8px);
  /* Cut right side into an arrow chevron tip */
  clip-path: polygon(0 0, calc(100% - 22px) 0, 100% 50%, calc(100% - 22px) 100%, 0 100%);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

/* Blue Chevron Right Accent Ribbon Tip */
.mp-why-chevron-card::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 22px;
  height: 100%;
  background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
  clip-path: polygon(0 0, 100% 50%, 0 100%, 8px 50%);
  pointer-events: none;
}

.mp-why-chevron-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 36px rgba(37, 99, 235, 0.14);
}

.mp-why-text {
  font-size: 16px !important;
  font-weight: 400;
  color: #1e293b !important;
  -webkit-text-fill-color: #1e293b !important;
  line-height: 1.65;
  margin: 0;
  text-align: left !important;
}

/* Responsive Adjustments for Section 10 Why Choose Us */
@media (max-width: 960px) {
  .mp-why-layout {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .mp-why-section {
    padding: 36px 20px;
  }
  .mp-why-left-col {
    align-items: flex-start;
  }
}

@media (max-width: 767px) {
  .mp-why-section {
    padding: 24px 14px !important;
    border-radius: 20px !important;
  }
  
  .mp-why-layout {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }
  
  .mp-why-title,
  h2.mp-why-title {
    font-size: 24px !important;
    line-height: 1.3 !important;
  }
  
  .mp-why-ribbon-svg {
    display: none !important;
  }
  
  .mp-why-items-wrap {
    gap: 16px !important;
  }
  
  .mp-why-item {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 8px !important;
    min-height: auto !important;
    width: 100% !important;
  }
  
  .mp-why-badge-col,
  .mp-why-badge-col.badge-col-right,
  .mp-why-badge-col.badge-col-left {
    width: auto !important;
    justify-content: flex-start !important;
  }
  
  .mp-why-badge.badge-circle {
    width: 44px !important;
    height: 44px !important;
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.2) !important;
  }
  
  .mp-why-badge.badge-circle span {
    font-size: 16px !important;
  }
  
  .mp-why-chevron-card {
    width: 100% !important;
    max-width: 100% !important;
    padding: 14px 16px !important;
    border-radius: 16px !important;
    clip-path: none !important;
    border-left: 4px solid #2563eb !important;
    box-sizing: border-box !important;
  }
  
  .mp-why-chevron-card::after {
    display: none !important;
  }
  
  .mp-why-text {
    font-size: 16px !important;
    line-height: 1.55 !important;
    color: #1e293b !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
  }
}

/* ==========================================================================
   SECTION 11: SERVING MAJOR DISTRICTS ACROSS GUJARAT
   ========================================================================== */
.mp-district-section {
  position: relative;
  border-radius: 24px;
  overflow: hidden;
  background-image: url('../images/serving-major-area-bg.webp');
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  padding: 60px 50px;
  min-height: 480px;
  box-shadow: 0 16px 40px rgba(0, 50, 120, 0.08);
}

.mp-district-container {
  max-width: 100%;
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.mp-district-title {
  font-size: 32px !important;
  font-weight: 800 !important;
  color: #0b1528 !important;
  -webkit-text-fill-color: #0b1528 !important;
  line-height: 1.25 !important;
  letter-spacing: -0.5px;
  margin: 0 0 18px 0;
  display: block;
}

.mp-district-title span,
.mp-dist-blue {
  font-size: 32px !important;
  font-weight: 800 !important;
  color: #1a57e8 !important;
  -webkit-text-fill-color: #1a57e8 !important;
  display: inline !important;
  margin-left: 4px;
}

.mp-district-desc {
  font-size: 16px !important;
  font-weight: 700 !important;
  color: #0f172a !important;
  -webkit-text-fill-color: #0f172a !important;
  line-height: 1.65;
  margin-bottom: 28px;
  max-width: 650px;
  text-align: left !important;
  text-shadow: 0 1px 2px rgba(255, 255, 255, 0.8);
}

/* 5-Column Grid for Cities */
.mp-city-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px 14px;
  width: 100%;
  margin-top: 6px;
}

.mp-city-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid rgba(219, 234, 254, 0.95);
  border-radius: 10px;
  padding: 10px 14px;
  box-shadow: 0 4px 14px rgba(37, 99, 235, 0.05), 0 1px 3px rgba(0, 0, 0, 0.03);
  backdrop-filter: blur(8px);
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
  cursor: pointer;
  text-decoration: none !important;
}

.mp-city-card:hover {
  transform: translateY(-2px);
  border-color: #2563eb;
  box-shadow: 0 8px 20px rgba(37, 99, 235, 0.14);
  background: #ffffff;
}

.mp-city-card span {
  font-size: 16px !important;
  font-weight: 700 !important;
  color: #0f172a !important;
  letter-spacing: -0.2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mp-city-card svg {
  color: #64748b;
  flex-shrink: 0;
  transition: transform 0.2s ease, color 0.2s ease;
}

.mp-city-card:hover svg {
  color: #2563eb;
  transform: translateX(2px);
}

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

@media (max-width: 960px) {
  .mp-district-section {
    padding: 40px 24px;
  }
  .mp-district-title,
  .mp-district-title span,
  .mp-dist-blue {
    font-size: 26px !important;
  }
  .mp-city-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 767px) {
  .mp-district-section {
    padding: 28px 16px;
    border-radius: 18px;
  }
  .mp-district-title,
  .mp-district-title span,
  .mp-dist-blue {
    font-size: 24px !important;
    line-height: 1.3 !important;
  }
  .mp-district-desc {
    font-size: 16px !important;
    margin-bottom: 20px;
  }
  .mp-city-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 8px 8px;
  }
  .mp-city-card {
    padding: 10px 12px;
  }
  .mp-city-card span {
    font-size: 16px !important;
    white-space: normal !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
  }
}

@media (max-width: 575px) {
  .mp-district-section {
    padding: 20px 12px !important;
  }
  .mp-city-grid {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }
  .mp-city-card {
    padding: 12px 16px !important;
    border-radius: 12px !important;
    min-height: 48px !important;
  }
  .mp-city-card span {
    font-size: 16px !important;
    white-space: normal !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    line-height: 1.3 !important;
  }
}

/* ==========================================================================
   SECTION 12: FAQ SECTION (REF DESIGN WITH FAQ-BG.WEBP)
   ========================================================================== */
.mp-faq-container-section {
  position: relative;
  border-radius: 24px;
  overflow: hidden;
  background: #ffffff;
  padding: 55px 48px;
  box-shadow: 0 16px 40px rgba(0, 50, 120, 0.08);
}

.mp-faq-container-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: url('../images/faq-bg.webp');
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  opacity: 0.45;
  z-index: 1;
  pointer-events: none;
}

.mp-faq-wrap {
  position: relative;
  z-index: 2;
  width: 100%;
}

.mp-faq-top-pill {
  width: 36px;
  height: 4px;
  background: #1a57e8;
  border-radius: 4px;
  margin-bottom: 14px;
}

.mp-faq-header {
  margin-bottom: 32px;
}

.market-page-container .mp-faq-main-title,
.mp-faq-main-title {
  color: #0b1528 !important;
  -webkit-text-fill-color: #0b1528 !important;
  line-height: 1.25 !important;
  letter-spacing: -0.5px;
  margin: 0 0 8px 0;
}

.market-page-container .mp-faq-title-blue,
.market-page-container .mp-faq-main-title span,
.mp-faq-title-blue {
  color: #1a57e8 !important;
  -webkit-text-fill-color: #1a57e8 !important;
  display: inline !important;
  margin-left: 6px;
}

.mp-faq-subtitle {
  font-size: 15.5px !important;
  font-weight: 600 !important;
  color: #64748b !important;
  margin: 0;
  max-width: 680px;
}

.mp-faq-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
  width: 100%;
}

.mp-faq-card-item {
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid rgba(219, 234, 254, 0.95);
  border-radius: 16px;
  padding: 18px 24px;
  box-shadow: 0 4px 14px rgba(37, 99, 235, 0.04), 0 1px 3px rgba(0, 0, 0, 0.02);
  backdrop-filter: blur(8px);
  transition: border-color 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
  cursor: pointer;
}

.mp-faq-card-item:hover {
  border-color: #2563eb;
  box-shadow: 0 8px 22px rgba(37, 99, 235, 0.12);
  background: #ffffff;
}

.mp-faq-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
}

.mp-faq-header-left {
  display: flex;
  align-items: center;
  gap: 14px;
  flex: 1;
}

.mp-faq-q-icon {
  width: 38px;
  height: 38px;
  background: #1a57e8;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff !important;
  font-weight: 800 !important;
  font-size: 17px !important;
  flex-shrink: 0;
  box-shadow: 0 3px 8px rgba(26, 87, 232, 0.25);
}

.mp-faq-question {
  font-size: 16px !important;
  font-weight: 700 !important;
  color: #0b1528 !important;
  margin: 0 !important;
  line-height: 1.4 !important;
}

.mp-faq-arrow-btn {
  width: 36px;
  height: 36px;
  background: #eff6ff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #1a57e8;
  flex-shrink: 0;
  transition: background 0.3s ease, transform 0.3s ease, color 0.3s ease;
}

.mp-faq-card-item:hover .mp-faq-arrow-btn {
  background: #dbeafe;
}

/* Accordion Body: Openable / Collapsible */
.mp-faq-body {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease, margin-top 0.3s ease, padding-top 0.3s ease;
}

.mp-faq-card-item.active .mp-faq-body {
  max-height: 300px;
  opacity: 1;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px dashed rgba(219, 234, 254, 0.95);
}

.mp-faq-card-item.active .mp-faq-arrow-btn {
  background: #1a57e8;
  color: #ffffff;
  transform: rotate(180deg);
}

.mp-faq-answer {
  font-size: 15px !important;
  font-weight: 500 !important;
  color: #475569 !important;
  margin: 0 !important;
  line-height: 1.6 !important;
}

@media (max-width: 960px) {
  .mp-faq-container-section {
    padding: 40px 28px;
  }
  .market-page-container .mp-faq-main-title,
  .market-page-container .mp-faq-title-blue,
  .market-page-container .mp-faq-main-title span,
  .mp-faq-main-title,
  .mp-faq-title-blue {
    font-size: 28px !important;
  }
}

@media (max-width: 640px) {
  .mp-faq-container-section {
    padding: 30px 16px;
    border-radius: 16px;
  }
  .market-page-container .mp-faq-main-title,
  .market-page-container .mp-faq-title-blue,
  .market-page-container .mp-faq-main-title span,
  .mp-faq-main-title,
  .mp-faq-title-blue {
    font-size: 24px !important;
  }
  .mp-faq-card-item {
    padding: 16px 14px;
    align-items: flex-start;
  }
  .mp-faq-card-left {
    align-items: flex-start;
    gap: 10px;
  }
  .mp-faq-divider {
    height: 24px;
    display: none;
  }
  .mp-faq-num {
    font-size: 18px !important;
  }
}

/* ==========================================================================
   SECTION 13: CTA BLOCK (MATCHING USER REFERENCE DESIGN)
   ========================================================================== */
.mp-cta-card,
.market-page-container .mp-cta-card {
  position: relative;
  background-image: linear-gradient(rgba(255, 255, 255, 0.78), rgba(255, 255, 255, 0.8)), url('../images/minimalist-bg.webp') !important;
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  border-radius: 20px !important;
  padding: 52px 40px !important;
  text-align: center !important;
  box-shadow: 0 16px 40px rgba(0, 50, 120, 0.08) !important;
  overflow: hidden;
  border: 1px solid rgba(219, 234, 254, 0.95) !important;
}

.mp-cta-container {
  max-width: 920px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.mp-cta-title,
.market-page-container .mp-cta-card h3,
.market-page-container .mp-cta-title {
  color: #0b1528 !important;
  -webkit-text-fill-color: #0b1528 !important;
  font-size: 30px !important;
  font-weight: 800 !important;
  letter-spacing: -0.5px;
  margin-top: 0 !important;
  margin-bottom: 14px !important;
  text-align: center !important;
  padding-left: 0 !important;
}

.mp-cta-card h3::before,
.mp-cta-title::before {
  display: none !important;
}

.mp-cta-desc,
.market-page-container .mp-cta-card p,
.market-page-container .mp-cta-desc {
  color: #334155 !important;
  -webkit-text-fill-color: #334155 !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  line-height: 1.65 !important;
  max-width: 840px;
  margin: 0 auto 30px auto !important;
  text-align: center !important;
}

.mp-cta-btn,
.market-page-container .mp-cta-btn {
  background: #1a57e8 !important;
  background: linear-gradient(135deg, #1a57e8 0%, #0038b8 100%) !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: 50px !important;
  padding: 15px 44px !important;
  font-size: 16px !important;
  font-weight: 800 !important;
  letter-spacing: 0.6px !important;
  text-transform: uppercase !important;
  cursor: pointer !important;
  display: inline-block !important;
  box-shadow: 0 8px 24px rgba(26, 87, 232, 0.35) !important;
  transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease !important;
  outline: none !important;
}

.mp-cta-btn:hover,
.market-page-container .mp-cta-btn:hover {
  transform: translateY(-3px) !important;
  background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%) !important;
  box-shadow: 0 12px 30px rgba(26, 87, 232, 0.5) !important;
}

@media (max-width: 768px) {
  .mp-cta-card,
  .market-page-container .mp-cta-card {
    padding: 36px 20px !important;
    border-radius: 16px !important;
  }
  .mp-cta-title,
  .market-page-container .mp-cta-card h3 {
    font-size: 24px !important;
  }
  .mp-cta-desc,
  .market-page-container .mp-cta-card p {
    font-size: 16px !important;
    margin-bottom: 24px !important;
  }
  .mp-cta-btn,
  .market-page-container .mp-cta-btn {
    padding: 12px 30px !important;
    font-size: 16px !important;
    width: 100%;
    max-width: 320px;
  }
}

/* Hero Breadcrumb Navigation */
ol.mp-breadcrumb,
ul.mp-breadcrumb,
.mp-breadcrumb {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  justify-content: center !important;
  list-style: none !important;
  list-style-type: none !important;
  padding: 0 !important;
  margin: 12px 0 0 0 !important;
  font-size: 16px !important;
  font-weight: 500 !important;
}

ol.mp-breadcrumb li,
ul.mp-breadcrumb li,
.mp-breadcrumb li {
  display: inline-flex !important;
  align-items: center !important;
  color: #cbd5e1 !important;
  font-size: 16px !important;
  list-style: none !important;
  list-style-type: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

ol.mp-breadcrumb li a,
ul.mp-breadcrumb li a,
.mp-breadcrumb li a {
  color: #94a3b8 !important;
  text-decoration: none !important;
  transition: color 0.2s ease !important;
  font-size: 16px !important;
}

ol.mp-breadcrumb li a:hover,
ul.mp-breadcrumb li a:hover,
.mp-breadcrumb li a:hover {
  color: #ffffff !important;
  text-decoration: underline !important;
}

ol.mp-breadcrumb li.separator,
ul.mp-breadcrumb li.separator,
.mp-breadcrumb li.separator {
  margin: 0 10px !important;
  color: #64748b !important;
  user-select: none !important;
  font-size: 16px !important;
}

ol.mp-breadcrumb li.active,
ul.mp-breadcrumb li.active,
.mp-breadcrumb li.active {
  color: #00a8ff !important;
  font-weight: 700 !important;
  font-size: 16px !important;
}

/* ==========================================================================
   RESPONSIVE FLOATING BUTTON CONTROLS
   ========================================================================== */

/* DEVICES > 1200px (Desktop):
   - Standalone 3 buttons active: SEND ENQUIRY (left), WhatsApp (left bottom), Chat with Us (right bottom).
   - mpQuickActions / mpQaFab is HIDDEN on Desktop.
*/
@media (min-width: 1201px) {
  .mp-quick-actions,
  #mpQuickActions,
  .mp-qa-backdrop {
    display: none !important;
  }

  .inq-btn-home {
    display: block !important;
    position: fixed !important;
    left: 0 !important;
    top: 40% !important;
    transform: translateY(-50%) !important;
    z-index: 1040 !important;
    cursor: pointer !important;
    transition: transform 0.25s ease !important;
  }

  .inq-btn-home:hover {
    transform: translateY(-50%) scale(1.05) !important;
  }

  .inq-btn-home img {
    display: block !important;
    width: 44px !important;
    height: auto !important;
  }

  .mp-float-whatsapp,
  .whatsapp_btn {
    position: fixed !important;
    left: 15px !important;
    bottom: 20px !important;
    z-index: 1040 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 48px !important;
    height: 48px !important;
    background: #25d366 !important;
    border-radius: 50% !important;
    box-shadow: 0 4px 16px rgba(37, 211, 102, 0.45) !important;
    transition: transform 0.25s ease, box-shadow 0.25s ease !important;
    text-decoration: none !important;
  }

  .mp-float-whatsapp:hover,
  .whatsapp_btn:hover {
    transform: scale(1.1) !important;
    box-shadow: 0 8px 22px rgba(37, 211, 102, 0.6) !important;
  }

  .mp-float-whatsapp img,
  .whatsapp_btn img {
    display: block !important;
    width: 28px !important;
    height: 28px !important;
  }

  #chatBtn,
  .mp-float-chat {
    position: fixed !important;
    right: 15px !important;
    bottom: 15px !important;
    z-index: 1040 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: #000000 !important;
    color: #ffffff !important;
    padding: 10px 22px !important;
    border-radius: 30px !important;
    border: none !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.35) !important;
    transition: transform 0.25s ease, background-color 0.25s ease, box-shadow 0.25s ease !important;
    outline: none !important;
  }

  #chatBtn:hover,
  .mp-float-chat:hover {
    transform: translateY(-2px) scale(1.04) !important;
    background: #1f2937 !important;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.5) !important;
  }
}

/* DEVICES <= 1200px (Mobile & Tablet):
   - mpQaFab (+ Quick Actions button) is VISIBLE on mobile & tablet <= 1200px!
   - Standalone left/bottom buttons are HIDDEN on <= 1200px to avoid clutter.
*/
@media (max-width: 1200px) {
  .mp-quick-actions,
  #mpQuickActions {
    display: flex !important;
  }

  .inq-btn-home,
  .mp-float-whatsapp,
  .whatsapp_btn,
  #chatBtn,
  .mp-float-chat {
    display: none !important;
  }
}

/* ==========================================================================
   IN-PARAGRAPH CONTEXTUAL LINK (FONT COLOR & FONT HOVER COLOR ONLY)
   ========================================================================== */
.market-content p a,
.mp-overview-card p a,
.mp-hero-content-box p a,
.mp-section p a {
  color: #1a57e8 !important;
  -webkit-text-fill-color: #1a57e8 !important;
  font-weight: 700 !important;
  text-decoration: none !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 2px;
  display: inline !important;
  transition: color 0.2s ease;
}

.market-content p a::after,
.mp-overview-card p a::after,
.mp-hero-content-box p a::after,
.mp-section p a::after {
  display: none !important;
}

.market-content p a:hover,
.mp-overview-card p a:hover,
.mp-hero-content-box p a:hover,
.mp-section p a:hover {
  color: #0b38a8 !important;
  -webkit-text-fill-color: #0b38a8 !important;
  text-decoration: none !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  transform: none !important;
}

/* ==========================================================================
   LOCATION & GOOGLE REVIEWS SECTION
   ========================================================================== */
.mp-location-reviews-section {
  position: relative;
  background: transparent;
  padding: 0;
}

.mp-loc-rev-header {
  margin-bottom: 28px;
}

.mp-loc-rev-title {
  font-size: 28px !important;
  font-weight: 800 !important;
  color: #0f172a !important;
  margin-bottom: 8px;
}

.mp-loc-rev-accent {
  width: 55px;
  height: 4px;
  background: #ea580c;
  border-radius: 2px;
}

.mp-loc-rev-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  align-items: stretch;
}

/* Map Container Box */
.mp-map-card {
  background: #ffffff;
  border-radius: 20px;
  border: 1.5px solid #e2e8f0;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 440px;
}

.mp-map-card iframe {
  width: 100%;
  height: 100%;
  min-height: 440px;
  border: 0;
  display: block;
}

/* Review Card Box */
.mp-review-card {
  background: #ffffff;
  border-radius: 24px;
  border: 1.5px solid #e2e8f0;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
  padding: 36px 28px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.mp-review-badge-circle {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: #22c55e;
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
  box-shadow: 0 0 0 8px rgba(34, 197, 94, 0.15);
}

.mp-review-company-title {
  font-size: 26px !important;
  font-weight: 800 !important;
  color: #0f172a !important;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-bottom: 6px;
}

.mp-review-vbar {
  display: inline-block;
  width: 4px;
  height: 24px;
  background: #16a34a;
  border-radius: 2px;
}

.mp-review-subtitle {
  font-size: 15px !important;
  color: #64748b !important;
  font-weight: 500;
  margin-bottom: 16px;
}

.mp-review-stars-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-bottom: 8px;
}

.mp-review-stars-wrap svg {
  color: #f59e0b;
  fill: #f59e0b;
  width: 24px;
  height: 24px;
}

.mp-review-count-title {
  font-size: 20px !important;
  font-weight: 800 !important;
  color: #0f172a !important;
  margin-bottom: 4px;
}

.mp-review-based-text {
  font-size: 14px !important;
  color: #64748b !important;
  margin-bottom: 24px;
}

.mp-review-quote-box {
  background: #f8fafc;
  border-left: 4px solid #16a34a;
  border-radius: 12px;
  padding: 14px 20px;
  width: 100%;
  max-width: 380px;
  margin-bottom: 28px;
  text-align: center;
}

.mp-review-quote-box p {
  font-size: 15px !important;
  font-style: italic;
  font-weight: 600 !important;
  color: #1e293b !important;
  margin: 0 !important;
}

.mp-review-cta-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px;
  background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%) !important;
  color: #ffffff !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  padding: 14px 32px !important;
  border-radius: 50px !important;
  text-decoration: none !important;
  box-shadow: 0 8px 20px rgba(220, 38, 38, 0.3) !important;
  transition: all 0.3s ease !important;
  border: none !important;
}

.mp-review-cta-btn:hover {
  transform: translateY(-2px) scale(1.03) !important;
  box-shadow: 0 12px 28px rgba(220, 38, 38, 0.45) !important;
  color: #ffffff !important;
}

@media (max-width: 991px) {
  .mp-loc-rev-grid {
    grid-template-columns: 1fr;
  }
  .mp-map-card,
  .mp-map-card iframe {
    min-height: 350px;
  }
}

/* ==========================================================================
   PEOPLE ALSO SEARCH FOR SECTION
   ========================================================================== */
.mp-search-keywords-section {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.96) 0%, rgba(248, 250, 252, 0.96) 100%);
  border: 1px solid rgba(219, 234, 254, 0.95);
  border-radius: 20px;
  box-shadow: 0 10px 30px rgba(0, 50, 120, 0.05);
  backdrop-filter: blur(10px);
}

.mp-search-keywords-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px 16px;
  margin-top: 24px;
}

.mp-search-keyword-card {
  display: flex;
  align-items: center;
  gap: 12px;
  background: #ffffff;
  border: 1px solid rgba(226, 232, 240, 0.9);
  border-radius: 12px;
  padding: 12px 18px;
  box-shadow: 0 2px 8px rgba(37, 99, 235, 0.04);
  transition: all 0.25s ease;
  text-decoration: none !important;
}

.mp-search-keyword-card:hover {
  transform: translateY(-2px);
  border-color: #2563eb;
  box-shadow: 0 8px 20px rgba(37, 99, 235, 0.12);
  background: #ffffff;
}

.mp-search-keyword-icon {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: rgba(37, 99, 235, 0.08);
  color: #2563eb;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background 0.25s ease, color 0.25s ease;
}

.mp-search-keyword-card:hover .mp-search-keyword-icon {
  background: #2563eb;
  color: #ffffff;
}

.mp-search-keyword-card span {
  font-weight: 600 !important;
  color: #1e293b !important;
  line-height: 1.4;
}

@media (max-width: 991px) {
  .mp-search-keywords-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 575px) {
  .mp-search-keywords-grid {
    grid-template-columns: 1fr;
  }
}