/* 
Theme Name: Hello Elementor Child
Theme URI: https://github.com/elementor/hello-theme-child/
Description: Hello Elementor Child is a child theme of Hello Elementor, created by Elementor team
Author: Elementor Team
Author URI: https://elementor.com/
Template: hello-elementor
Version: 2.0.0
Text Domain: hello-elementor-child
License: GNU General Public License v3 or later.
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Tags: flexible-header, custom-colors, custom-menu, custom-logo, editor-style, featured-images, rtl-language-support, threaded-comments, translation-ready
*/

/* Add your custom styles here */

/* @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;700;800&display=swap'); */


/* ==========================================================================
   SECTION 1 — :root CSS Variables (Design Tokens, rem-based)
   ========================================================================== */
:root {

  /* --- Brand colors --- */
  --mpi-color-orange:        #FF4500;
  --mpi-color-orange-50:     #FFF7ED;
  --mpi-color-orange-100:    #FFEDD5;
  --mpi-color-orange-600:    #EA580C;
  --mpi-color-navy:          #0C4DA2;
  --mpi-color-navy-overlay:  rgba(12, 77, 162, 0.7); /* hero image wash */
  --mpi-color-blue-50:       #EFF6FF;
  --mpi-color-blue-100:      #ADC6FF;
  --mpi-color-blue-light:      #DBEAFE;

  /* --- Neutrals / surfaces --- */
  --mpi-color-white:               #FFFFFF;
  --mpi-color-text:                #141B2B;
  --mpi-color-gray:                #4B5563;
  --mpi-color-gray-100:            #F3F4F6;
  --mpi-color-gray-200:            #E5E7EB;
  --mpi-color-gray-400:            #9CA3AF;
  --mpi-color-gray-500:            #6B7280;
  --mpi-color-green-500:           #22C55E;
  --mpi-color-light-bg:            #F8F9FA;
  --mpi-color-surface:             #F9F9FF;
  --mpi-color-surface-container-low: #F8F9FA;
  --mpi-color-surface-container:     #F3F4F6;

  /* --- Typography --- */
  --mpi-font-sans: 'Inter', sans-serif;

  --mpi-fs-display-lg:         3.75rem;  /* 60px — hero H1, desktop */
  --mpi-fs-display-lg-mobile:  2.25rem;  /* 36px — hero H1, mobile */
  --mpi-fs-headline-md:        3rem;     /* 48px — CTA heading */
  --mpi-fs-headline-sm:        1.5rem;     /* 32px — section H2 */
  --mpi-fs-headline-xs:      1rem; 
  --mpi-fs-card-title-lg:      2rem;     /* 32px — feature card title */
  --mpi-fs-title-lg:           1.5rem;   /* 24px — card / form title */
  --mpi-fs-body-lg:            1.25rem;  /* 20px */
  --mpi-fs-body-md:            1rem;     /* 16px */
  --mpi-fs-nav-link:           0.8125rem;/* 13px — nav + quote button */
  --mpi-fs-button:             0.9375rem;/* 15px — primary CTA buttons */
  --mpi-fs-label-bold:         0.75rem;  /* 12px — uppercase labels */
  --mpi-fs-label-sm:           0.625rem; /* 10px — eyebrow / field labels */

  /* --- Layout / spacing --- */
  --mpi-container-max:   87.5rem; /* 1400px */
  --mpi-section-py-lg:   6rem;    /* 96px */
  --mpi-section-py-sm:   4rem;    /* 64px */
  --mpi-section-py-xs:   2rem;    /* 64px */
  --mpi-section-px-lg:   6rem;    /* 96px */
  --mpi-section-px-sm:   4rem;    /* 64px */
  --mpi-gutter:          1.5rem;  /* 24px */

  /* --- Radius --- */
  --mpi-radius-sm:      0.25rem;
  --mpi-radius-default: 0.5rem;
  --mpi-radius-md:      0.75rem;
  --mpi-radius-lg:      1rem;
  --mpi-radius-xl:      1.5rem;
  /* "Full" pill radius — not a literal dimension, kept oversized on purpose */
  --mpi-radius-full:    999rem;

  /* --- Elevation --- */
  --mpi-shadow-card: 0 1.25rem 2.5rem rgba(12, 77, 162, 0.08);
  --mpi-shadow-sm:   0 0.0625rem 0.125rem rgba(0, 0, 0, 0.05);
  --mpi-shadow-gray: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
}


/* ==========================================================================
   SECTION 2 — Global / Utility Classes
   (Typography, Buttons, Containers, Spacing)
   ========================================================================== */

body.mpi-theme {
  font-family: var(--mpi-font-sans);
  color: var(--mpi-color-text);
  background-color: var(--mpi-color-surface);
}

/* Layout */
.elementor .mpi-container {
  max-width: var(--mpi-container-max);
  margin: 0 auto;
  padding: 0 var(--mpi-gutter);
}

.elementor .mpi-section       { padding-top: var(--mpi-section-py-lg); padding-bottom: var(--mpi-section-py-lg); }
.elementor .mpi-section-sm    { padding-top: var(--mpi-section-py-sm); padding-bottom: var(--mpi-section-py-sm); }
.elementor .mpi-section--bordered-top { border-top: 1px solid var(--mpi-color-gray-100); }
.elementor .mpi-section--navy { background-color: var(--mpi-color-navy); color: var(--mpi-color-white); }
.elementor .mpi-section--white { background-color: var(--mpi-color-white); }
.elementor .mpi-section--surface { background-color: var(--mpi-color-surface); }

/* Typography */
.elementor .mpi-eyebrow {
  display: block;
  color: var(--mpi-color-orange);
  font-size: var(--mpi-fs-label-sm);
  text-transform: uppercase;
  letter-spacing: 0.2em;
  font-weight: 700;
  margin-bottom: 1rem;
}

.elementor .mpi-h1 {
  font-size: var(--mpi-fs-display-lg-mobile);
  line-height: 1.2;
  font-weight: 800;
  color: var(--mpi-color-navy);
  margin: 0 0 1.5rem;
}

.elementor .mpi-h2 {
  font-size: var(--mpi-fs-headline-md);
  line-height: 1.2;
  font-weight: 800;
  color: var(--mpi-color-navy);
  margin: 0 0 1.5rem;
}

.elementor .mpi-h2--lg {
  font-size: var(--mpi-fs-headline-md);
  line-height: 1.2;
  font-weight: 800;
}

.elementor .mpi-h2-md {
  font-size: var(--mpi-fs-headline-sm);
  line-height: 1.2;
  font-weight: 800;
}


.elementor .mpi-h3 {
  font-size: var(--mpi-fs-title-lg);
  line-height: 1.4;
  font-weight: 700;
  color: var(--mpi-color-navy);
  margin: 0 0 1rem;
}

.elementor .mpi-h4 {
  font-size: var(--mpi-fs-headline-xs);
  line-height: 1.4;
  font-weight: 700;
  color: var(--mpi-color-navy);
  margin: 0 0 1rem;
}

.elementor .mpi-body-lg { font-size: var(--mpi-fs-body-lg); line-height: 1.6; }
.elementor .mpi-body-md { font-size: var(--mpi-fs-body-md); line-height: 1.5; color: var(--mpi-color-gray); }

.elementor .mpi-label-bold {
  font-size: var(--mpi-fs-label-bold);
  letter-spacing: 0.1em;
  font-weight: 800;
  text-transform: uppercase;
}

.elementor .mpi-divider {
  width: 4rem;
  height: 0.375rem;
  background-color: var(--mpi-color-orange);
  margin: 0 auto;
  border-radius: var(--mpi-radius-sm);
  padding:0;
}

.elementor .mpi-text-center { text-align: center; }

/* Buttons */
.elementor .mpi-btn {
  display: inline-block;
  font-weight: 700;
  font-size: var(--mpi-fs-button);
  padding: 1rem 2rem;
  border-radius: 0.25rem;
  text-decoration: none;
  text-align: center;
  border: none;
  cursor: pointer;
  transition: transform 0.2s ease, background-color 0.2s ease, opacity 0.2s ease;
}

.elementor .mpi-btn-primary {
  background-color: var(--mpi-color-orange);
  color: var(--mpi-color-white);
  box-shadow: var(--mpi-shadow-sm);
  transition: all 0.2s ease;
  border-radius: 0.25rem;
}
.elementor .mpi-btn-primary:hover {
  background-color: var(--mpi-color-orange-600);
  color: var(--mpi-color-white);
  transform: scale(1.05);

}

.elementor .mpi-btn-outline.e-button-base{
  background-color: transparent !important;
  border: 2px solid rgba(255, 255, 255, 0.2);
  transition: all 0.2s ease;
}
.elementor .mpi-btn-outline.e-button-base:hover {
  background-color: rgba(255, 255, 255, 0.1) !important;
  color: var(--mpi-color-white);
}
.elementor .mpi-btn-navyoutline.e-button-base{
  background-color: transparent !important;
  border: 2px solid var(--mpi-color-navy);
  transition: all 0.2s ease;
  color: var(--mpi-color-navy) !important;
}
.elementor .mpi-btn-navyoutline.e-button-base:hover {
  background-color: rgba(0, 0, 0, 0.1) !important;
  color: var(--mpi-color-navy) !important;
}
.elementor .mpi-btn-sm {
  padding: 0.75rem 1.5rem;
  font-size: var(--mpi-fs-nav-link);
  border-radius: var(--mpi-radius-default);
}


/* ==========================================================================
   SECTION 3 — Component-Specific Classes
   ========================================================================== */

/* --- Header --- */
.elementor .mpi-header {
  background-color: var(--mpi-color-white);
  padding: 1rem 0;
  box-shadow: var(--mpi-shadow-sm);
  position: sticky;
  top: 0;
  z-index: 50;
}
.elementor .mpi-header-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.elementor .mpi-header-logo { display: block; width: 12rem; height: auto; }

.elementor .mpi-nav {
  display: flex;
  gap: 2rem;
  align-items: center;
  font-size: var(--mpi-fs-nav-link);
  font-weight: 700;
  color: var(--mpi-color-gray);
}
.elementor .mpi-nav-link { color: var(--mpi-color-gray); text-decoration: none; transition: color 0.2s ease; }
.elementor .mpi-nav-link:hover { color: var(--mpi-color-navy); }
.elementor .mpi-nav-link--active {
  color: var(--mpi-color-navy);
  border-bottom: 2px solid var(--mpi-color-navy);
  padding-bottom: 0.25rem;
}

/* --- Hero --- */
.elementor .mpi-hero {
  padding-top: 2rem;
  background-size: cover;
  background-position: center;
  /* Set --mpi-hero-image per-page via inline style or a modifier class */
  background-image:
    linear-gradient(var(--mpi-color-navy-overlay), var(--mpi-color-navy-overlay)),
    var(--mpi-hero-image, none);
 padding-left:0;
 padding-right:0;
}
.elementor .mpi-hero-grid { display: grid; gap: 3rem; align-items: center; grid-template-columns: repeat(2, 1fr);padding-left:0; padding-right:0; }
.elementor .mpi-hero-title,
.elementor .mpi-hero-text { color: var(--mpi-color-white); }
.elementor .mpi-hero-title { font-size: var(--mpi-fs-display-lg); line-height: 1.1; letter-spacing: -0.02em; font-weight: 800; margin: 0 0 1.5rem; }
.elementor .mpi-hero-title-accent { color: var(--mpi-color-orange); }
.elementor .mpi-hero-text { font-size: var(--mpi-fs-body-md); max-width: 32rem; margin: 0 0 2rem; }

.elementor .mpi-hero-badges { display: flex; gap: 1rem; margin-bottom: 2rem;   flex-direction: row; justify-content: flex-start;padding-left:0;}
.elementor .mpi-hero-badge {
  display: flex;
  flex-direction: row;
  gap: 0.5rem;
  background-color: var(--mpi-color-surface);
  padding: 0.5rem 1rem;
  border-radius: var(--mpi-radius-full);
  border: 1px solid var(--mpi-color-gray-100);
  font-weight: 700;
  font-size: var(--mpi-fs-nav-link);
}
.elementor .mpi-hero-badge-icon .elementor-icon { color: var(--mpi-color-orange); font-size: 1.25rem; }
.elementor .mpi-hero-badge-icon .elementor-icon svg {fill: var(--mpi-color-orange);}
.elementor .mpi-hero-badge-text { font-weight:700; }

/* --- Quote / lead form card --- */
.elementor .mpi-form-card {
  background-color: var(--mpi-color-white);
  padding: 1rem;
  border-radius: var(--mpi-radius-xl);
  box-shadow: var(--mpi-shadow-card);
  border-top:3px solid var(--mpi-color-orange);
}
.elementor .mpi-form-card-title { font-size: var(--mpi-fs-title-lg); color: var(--mpi-color-navy); margin-bottom: 2rem; font-weight:700; }

.elementor .mpi-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; margin-bottom: 1.5rem; }
.elementor .quote-form .elementor-field-group { margin-bottom: 1.5rem !important; }
.elementor .quote-form label {
  display: block;
  font-size: 0.75rem;
  color: var(--mpi-color-gray);
  text-transform: uppercase;
  margin-bottom: 0.5rem;
  font-weight:700;
}
.elementor .quote-form input,
.elementor .quote-form select,
.elementor .quote-form textarea {
  width: 100%;
  border: 1px solid #9CA3AF;
  border-bottom: 2px solid var(--mpi-color-gray-200);
  background-color: var(--mpi-color-surface-container-low);
  padding: 0.75rem;
  font-size: var(--mpi-fs-body-md);
  border-radius: var(--mpi-radius-sm) var(--mpi-radius-sm) 0 0;
}
.elementor .quote-form [type='checkbox'], [type='radio'] {
    -webkit-appearance: auto;
    appearance: auto;
    padding: 0;
    print-color-adjust: exact;
    display: inline-block;
    vertical-align: middle;
    -webkit-user-select: none;
    flex-shrink: 0;
    height: 1.5rem;
    width: 1.5rem;
    background-color: #fff;
    border-color: #6b7280;
    border-width: 1px;
    --tw-shadow: 0 0 #0000;
}
.elementor .quote-form input:focus,
.elementor .quote-form select:focus,
.elementor .quote-form textarea:focus {
  outline: none;
  border-bottom-color: var(--mpi-color-orange);
}

/* --- Value-prop / "Why MPI" cards --- */
.elementor .mpi-card {
  background-color: var(--mpi-color-white);
  padding: 2.5rem;
  border-radius: var(--mpi-radius-xl);
  box-shadow: var(--mpi-shadow-card);
  text-align: center;
  transition: transform 0.2s ease;
}
.elementor .mpi-card:hover { transform: scale(1.02); }
.elementor .mpi-card--compact { padding: 2rem; }

.elementor .mpi-card-icon-circle .elementor-icon{
  width: 4rem;
  height: 4rem;
  border-radius: var(--mpi-radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1.5rem;
  font-size: 1.875rem; /* 30px icon */
}
.elementor .mpi-card-icon-circle--orange .elementor-icon{ background-color: var(--mpi-color-orange-50); color: var(--mpi-color-orange); }
.elementor .icon-orange .elementor-icon svg{fill: var(--mpi-color-orange);}
.elementor .mpi-card-icon-circle--navy   { background-color: var(--mpi-color-blue-50);   color: var(--mpi-color-navy); }

.elementor .mpi-card-title .elementor-heading-title { font-size: var(--mpi-fs-title-lg); color: var(--mpi-color-navy); margin-bottom: 1rem; font-weight: 700; }
.elementor .mpi-card-text  { color: var(--mpi-color-gray); font-size: var(--mpi-fs-body-md); }

/* Grids that hold the cards above */
.elementor .mpi-grid-3 { display: grid; gap: 2rem; grid-template-columns: repeat(3, 1fr); }
.elementor .mpi-grid-4 { display: grid; gap: 2rem; grid-template-columns: repeat(4, 1fr); }

/* --- Applications / capability gallery --- */
.elementor .mpi-gallery-grid { display: grid; gap: 1.5rem; grid-template-columns: repeat(3, 1fr); }

.elementor .mpi-gallery-card--feature {
  grid-column: span 2 / span 2;
  position: relative;
  overflow: hidden;
  border-radius: var(--mpi-radius-xl);
  background-color: var(--mpi-color-navy);
  min-height: 22.5rem; /* 360px */
  box-shadow: var(--mpi-shadow-card);
}
.elementor .mpi-gallery-card--feature img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.4;
  mix-blend-mode: multiply;
  transition: transform 0.7s ease;
}
.elementor .mpi-gallery-card--feature:hover img { transform: scale(1.05); }
.elementor .mpi-gallery-card-content {
  position: absolute;
  inset: 0;
  padding: 2.5rem;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
.elementor .mpi-gallery-card-title { font-size: var(--mpi-fs-card-title-lg); font-weight: 700; color: var(--mpi-color-white); margin-bottom: 0.75rem; }
.elementor .mpi-gallery-card-text  { color: var(--mpi-color-gray-200); font-size: var(--mpi-fs-body-md); max-width: 28rem; }

.elementor .mpi-gallery-card {
  border-radius: var(--mpi-radius-xl);
  padding: 2.5rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-shadow: var(--mpi-shadow-card);
  transition: transform 0.2s ease;
  position: relative;
  overflow: hidden;
 /* 360px */
}
.elementor .mpi-gallery-card:hover { transform: scale(1.02); }
.elementor .mpi-gallery-card--muted { background-color: var(--mpi-color-surface-container); color: var(--mpi-color-navy);}
.elementor .mpi-gallery-card--orange { background-color: var(--mpi-color-orange); color: var(--mpi-color-white); }
.elementor .mpi-gallery-card--navy   { background-color: var(--mpi-color-navy); color: var(--mpi-color-white); justify-content: center; }
.elementor .mpi-gallery-card--white  { background-color: var(--mpi-color-white); }

.elementor .mpi-gallery-card-icon .elementor-icon { width: 3rem; height: 3rem; margin-bottom: 2rem; font-size: 2.25rem; bottom:4.5rem;}
.elementor .mpi-gallery-link {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  color: var(--mpi-color-orange);
  font-size: var(--mpi-fs-label-bold);
  text-transform: uppercase;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-decoration: none;
}
.elementor .mpi-gallery-link:hover { text-decoration: underline; }

/* --- Tech specs / progress bars + comparison list --- */
.elementor .mpi-specs-grid { display: grid; gap: 4rem; align-items: center; grid-template-columns: repeat(2, 1fr); }

.elementor .mpi-progress { margin-bottom: 1.5rem; }
.elementor .mpi-progress-label {
  display: flex;
  justify-content: space-between;
  font-size: var(--mpi-fs-label-bold);
  color: var(--mpi-color-navy);
  text-transform: uppercase;
  margin-bottom: 0.5rem;
}
.elementor .mpi-progress-value { color: var(--mpi-color-orange); }
.elementor .mpi-progress-track {
  width: 100%;
  background-color: var(--mpi-color-gray-200);
  height: 0.25rem;
  border-radius: var(--mpi-radius-full);
  overflow: hidden;
}
.elementor .mpi-progress-fill { background-color: var(--mpi-color-orange); height: 0.25rem; border-radius: var(--mpi-radius-full); }

.elementor .mpi-compare-card {
  background-color: var(--mpi-color-white);
  padding: 2.5rem;
  border-radius: var(--mpi-radius-xl);
  box-shadow: var(--mpi-shadow-card);
}
.elementor .mpi-compare-card-title {
  font-size: var(--mpi-fs-title-lg);
  color: var(--mpi-color-navy);
  border-bottom: 1px solid var(--mpi-color-gray-100);
  padding-bottom: 1rem;
  margin-bottom: 1.5rem;
  font-weight:700;
}
.elementor .mpi-compare-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1.5rem; }
.elementor .mpi-compare-list-item { display: flex; align-items: flex-start; font-size: var(--mpi-fs-body-md); }
.elementor .mpi-compare-list-icon .elementor-icon { color: var(--mpi-color-green-500); margin-right: 1rem; margin-top: 0.125rem; font-size: 1.25rem; }
.elementor .mpi-compare-list-icon .elementor-icon svg { fill: var(--mpi-color-green-500); font-size: 1.25rem; }
.elementor .mpi-compare-list-label { font-weight: 700; color: var(--mpi-color-navy); }

/* --- Finishing / checklist section --- */
.elementor .mpi-checklist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1rem; color: var(--mpi-color-gray); font-size: var(--mpi-fs-body-md); }
.elementor .mpi-checklist .elementor-icon-list-item{ display: flex; align-items: center; margin-top:0.75rem; }
.elementor .mpi-checklist .elementor-icon-list-icon { color: var(--mpi-color-orange); margin-right: 0.75rem; }
.elementor .mpi-checklist .elementor-icon-list-text {color: var(--mpi-color-gray);}

.elementor .mpi-media-frame { position: relative; border-radius: var(--mpi-radius-xl); overflow: hidden; box-shadow: var(--mpi-shadow-card); height: 100%; aspect-ratio:16 / 9; }
.elementor .mpi-media-frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* --- Related services cards --- */
.elementor .mpi-service-grid { display: grid; gap: 1.5rem; grid-template-columns: repeat(3, 1fr); }
.elementor .mpi-service-card {
  background-color: var(--mpi-color-white);
  border-radius: var(--mpi-radius-xl);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--mpi-color-gray-100);
  text-decoration: none;
  transition: box-shadow 0.2s ease;
  padding:0;
}
.elementor .mpi-service-card:hover { box-shadow: var(--mpi-shadow-card); }
.elementor .mpi-service-card-media { aspect-ratio: 16 / 9; width: 100%; overflow: hidden; }
.elementor .mpi-service-card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.7s ease; }
.elementor .mpi-service-card:hover .mpi-service-card-media img { transform: scale(1.05); }
.elementor .mpi-service-card-body { padding: 1.5rem; display: flex; align-items: center; gap: 1rem; flex-direction:row; }
.elementor .mpi-service-card-body-vertical { padding: 1.5rem; display: flex; gap: 0.2rem; flex-direction:column; }
.elementor .mpi-service-card-icon .elementor-icon {
  width: 3rem;
  height: 3rem;
  border-radius: var(--mpi-radius-full);
  background-color: var(--mpi-color-surface);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--mpi-shadow-sm);
  color: var(--mpi-color-navy);
  transition: background-color 0.2s ease, color 0.2s ease;
  flex-shrink: 0;
}
.elementor .mpi-service-card-icon .elementor-icon svg{font-size:1.5rem;}
.elementor .mpi-service-card:hover .mpi-service-card-icon .elementor-icon { background-color: var(--mpi-color-navy);}
.elementor .mpi-service-card:hover .mpi-service-card-icon .elementor-icon svg{fill: var(--mpi-color-white); }
.elementor .mpi-service-card-name { font-weight: 700; color: var(--mpi-color-navy); transition: color 0.2s ease; }
.elementor .mpi-service-card:hover .elementor .mpi-service-card-name { color: var(--mpi-color-orange); }

/* --- CTA banner --- */
.elementor .mpi-cta { text-align: center; max-width: 896px; }
.elementor .mpi-cta-title { font-size: var(--mpi-fs-headline-md); margin-bottom: 1.5rem; color: var(--mpi-color-white); font-weight:800;}
.elementor .mpi-cta-text { font-size: var(--mpi-fs-body-lg); color: var(--mpi-color-blue-100); max-width: 40rem; margin: 0 auto 2.5rem; }
.elementor .mpi-cta-actions { display: flex; justify-content: center; flex-wrap: wrap; gap: 1rem; }

/* --- FAQ accordion --- */
.elementor .mpi-faq { max-width: 56rem; margin: 0 auto; display: flex; flex-direction: column; gap: 1rem; }
.elementor .mpi-faq-item {
  background-color: var(--mpi-color-surface-container-low);
  border-radius: var(--mpi-radius-lg);
  padding: 1.5rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  transition: background-color 0.2s ease;
}
.elementor .mpi-faq-item:hover { background-color: var(--mpi-color-surface-container); }
.elementor .mpi-faq-question { font-weight: 700; color: var(--mpi-color-navy); font-size: var(--mpi-fs-body-md); margin: 0; }
.elementor .mpi-faq-icon { color: var(--mpi-color-gray-400); }

/* --- Footer --- */
.elementor .mpi-footer { background-color: var(--mpi-color-surface); padding-top: 5rem; padding-bottom: 2.5rem; border-top: 1px solid var(--mpi-color-gray-200); }
.elementor .mpi-footer-grid { display: grid; gap: 3rem; margin-bottom: 4rem; grid-template-columns: repeat(4, 1fr); }
.elementor .mpi-footer-logo { width: 12rem; margin-bottom: 1.5rem; }
.elementor .mpi-footer-text { color: var(--mpi-color-gray); margin-bottom: 1.5rem; }
.elementor .mpi-footer-social { display: flex; gap: 1rem; }
.elementor .mpi-footer-social-icon {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: var(--mpi-radius-full);
  background-color: var(--mpi-color-surface-container);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--mpi-color-gray);
  font-weight: 700;
  font-size: 0.875rem;
  text-decoration: none;
  transition: background-color 0.2s ease, color 0.2s ease;
}
.elementor .mpi-footer-social-icon:hover { background-color: var(--mpi-color-navy); color: var(--mpi-color-white); }

.elementor .mpi-footer-heading { font-size: var(--mpi-fs-label-bold); color: var(--mpi-color-navy); text-transform: uppercase; margin-bottom: 1.5rem; }
.elementor .mpi-footer-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1rem; color: var(--mpi-color-gray); }
.elementor .mpi-footer-list a { color: var(--mpi-color-gray); text-decoration: none; }
.elementor .mpi-footer-list a:hover { color: var(--mpi-color-orange); }
.elementor .mpi-footer-contact-item { display: flex; align-items: flex-start; }
.elementor .mpi-footer-contact-icon { color: var(--mpi-color-orange); margin-right: 0.75rem; }

.elementor .mpi-footer-bottom {
  border-top: 1px solid var(--mpi-color-gray-200);
  padding-top: 2rem;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  font-size: 0.875rem;
  color: var(--mpi-color-gray-500);
}
.elementor .mpi-footer-bottom-links { display: flex; align-items: center; gap: 1.5rem; }


/* ==========================================================================
   SECTION 4 — Responsive Overrides
   Breakpoints: Tablet = 64rem (1024px) · Mobile = 47.9375rem (767px)
   ========================================================================== */

/* Tablet */
@media (max-width: 64rem) {
  .elementor .mpi-grid-4,
  .elementor .mpi-footer-grid { grid-template-columns: repeat(2, 1fr); }

  .elementor .mpi-service-grid { grid-template-columns: repeat(2, 1fr); }
}

/* Mobile */
@media (max-width: 47.9375rem) {
  .elementor .mpi-nav { display: none; }

  .elementor .mpi-hero-grid,
  .elementor .mpi-specs-grid,
  .elementor .mpi-gallery-grid,
  .elementor .mpi-grid-3,
  .elementor .mpi-grid-4,
  .elementor .mpi-service-grid,
  .elementor .mpi-footer-grid { grid-template-columns: 1fr; }

  .elementor .mpi-gallery-card--feature { grid-column: span 1 / span 1; }

  .elementor .mpi-hero-title { font-size: var(--mpi-fs-display-lg-mobile); line-height: 1.2; letter-spacing: normal; }

  .elementor .mpi-form-row { grid-template-columns: 1fr; gap: 1rem; }

  .elementor .mpi-section,
  .elementor .mpi-cta,
  .elementor .mpi-section--navy { padding-top: var(--mpi-section-py-sm); padding-bottom: var(--mpi-section-py-sm); }

  .elementor .mpi-footer-bottom { flex-direction: column; gap: 1rem; align-items: flex-start; }
  .elementor .mpi-footer-bottom-links { margin-top: 0.5rem; }
 .elementor .mpi-container {
  padding: 0 1rem;
}

}


/* ==========================================================================
   SECTION 5 — Elementor Override Fixes
   Elementor's own widget classes (.elementor-button, .elementor-field, etc.)
   carry high specificity. Use sparingly, only where needed to force the
   MPI look onto native Elementor widgets.
   ========================================================================== */

.elementor-button.elementor .mpi-btn-primary,
.elementor-widget-button .elementor .mpi-btn-primary, .elementor .e-button-base {
  background-color: var(--mpi-color-orange) !important;
  color: var(--mpi-color-white) !important;
  border-radius: var(--mpi-radius-default) !important;
  font-weight: 700 !important;
}
.elementor-button.elementor .mpi-btn-primary:hover, .elementor .e-button-base:hover {
  background-color: var(--mpi-color-orange-600) !important;
}

.elementor-field-group .elementor-field.elementor .mpi-form-input,
.elementor-field-group .elementor-field.elementor .mpi-form-textarea {
  border: none !important;
  border-bottom: 2px solid var(--mpi-color-gray-200) !important;
  background-color: var(--mpi-color-surface-container-low) !important;
  border-radius: var(--mpi-radius-sm) var(--mpi-radius-sm) 0 0 !important;
}

a.elementor .mpi-nav-link,
a.elementor .mpi-footer-list a,
a.elementor .mpi-service-card-name {
  text-decoration: none !important;
}
.elementor-nav-menu--dropdown.elementor-nav-menu__container {
    position: absolute !important;
    top: 100% !important;
    left: 0;
    width: 100%;
    z-index: 999;
}


/* ==========================================================================
   NEW
   ========================================================================== */
 .text-white .elementor-kit-10 h1 {color:#ffffff !important;}
  .elementor .text-white{color:#ffffff;}
 .elementor .outer-container {
  display: flex;
  flex-direction: column;
  width: 100%;
  gap: 0;
}
.elementor .inner-container {
  max-width: 1400px;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  padding: 0 1.5rem;
  box-sizing: border-box;
}
.elementor .py-large{padding-top: var(--mpi-section-py-lg); padding-bottom: var(--mpi-section-py-lg);}
.elementor .py-xs{  padding-top: var(--mpi-section-py-xs); padding-bottom: var(--mpi-section-py-xs);}
.elementor .mb-4{margin-bottom:1rem;}
.elementor .pb-4{margin-bottom:1rem;}
.elementor .txt-32{font-size:2rem;}
.elementor .txt-24{font-size:1.5rem;}
.elementor .color-navy{color: var(--mpi-color-navy);}
.elementor .color-white{color: var(--mpi-color-white);}
.elementor .color-gray-500{color: var(--mpi-color-gray-500);}
.elementor .color-dark-gray{color: var(--mpi-color-text);}
.elementor .color-light-blue{color: var(--mpi-color-blue-100);}
.elementor .padding-0{padding:0;}
.elementor .margin-0{margin:0;}
.elementor .pill-container { display: flex; gap: 1rem; margin-bottom: 2rem;   flex-direction: row; justify-content: flex-start;padding-left:0;}
.elementor .pill{
  display: flex;
  flex-direction: row;
  gap: 0.5rem;
  background-color: var(--mpi-color-surface);
  padding: 0.5rem 1rem;
  border-radius: var(--mpi-radius-full);
  border: 1px solid var(--mpi-color-gray-100);
  font-weight: 700;
  font-size: var(--mpi-fs-nav-link);
  width: max-content
}
.elementor .pill-icon .elementor-icon { color: var(--mpi-color-orange); font-size: 1.25rem; }
.elementor .pill-icon .elementor-icon svg {fill: var(--mpi-color-orange);}
.elementor .pill-text { font-weight:700; padding-top:2px; }
.shadow-sm{  box-shadow: var(--mpi-shadow-sm);}
.elementor .px-sm{padding-left:1rem; padding-right:1rem;}
.elementor .txt-center{text-align:center;}
.glass-panel {
background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
box-shadow: 0 20px 40px rgba(12, 77, 162, 0.08); 
border-radius: var( --mpi-radius-md);
padding:3rem !important;
}
.max-w-3xl{max-width:48rem;}
.elementor .mpi-eyebrow-pill {  display: block;
  color: var(--mpi-color-orange);
  font-size: var(--mpi-fs-label-sm);
  text-transform: uppercase;
  letter-spacing: 0.2em;
  font-weight: 700;
  margin-bottom: 1rem;
  border-radius: var(--mpi-radius-full);
  background-color: rgba(255, 69, 0, 0.1);
  padding:0.7rem;
  width:max-content;
}
.elementor .text-body-lg{font-size:1.25rem;}
.elementor .row-container{display:flex; gap:3rem; direction:row;}
.elementor .mpi-row-container{display:flex; gap:3rem; direction:row;}
.elementor .service-intro-img {aspect-ratio: 4 / 3; box-shadow: var(--mpi-shadow-gray); border-radius: var(--mpi-radius-xl); object-fit:cover; }
.elementor .mpi-service-callout{
	position:absolute;bottom:-5px; left:-24px;border-radius:var(--mpi-radius-sm); padding:1.5rem; 
    box-shadow: var(--mpi-shadow-gray);width:max-content;background-color: var(--mpi-color-surface);border:1px solid rgb(226 226 234);}
.elementor .max-w-2xl {
    max-width: 42rem !important;
	margin:0 auto;
}
.elementor .home-hero {
  padding-top: 2rem;
  background-size: cover;
  background-position: center;
  /* Set --mpi-hero-image per-page via inline style or a modifier class */
  background-image:
    linear-gradient(var(--mpi-color-navy-overlay), var(--mpi-color-navy-overlay)),
    var(--mpi-hero-image, none);
 padding-left:0;
 padding-right:0;
}
.elementor .icon-card{
	transition-property: all;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 300ms;
	border:1px solid rgba(0, 51, 102, 0.05);
	border-radius:0.75rem;
	background-color: var( --mpi-color-surface-container-low);
}
.elementor .icon-card:hover{
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
transform: translateY(-0.5rem);
border-color:var(--mpi-color-orange);
}
.elementor .icon-card:hover .elementor-icon{
transform: scale(1.1);
}
.elementor .icon-card:hover .mpi-h4{
color: var(--mpi-color-orange);
}
.elementor .machine-card{
	transition-property: all;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 300ms;
}
.elementor .machine-card-media{
    aspect-ratio: 16 / 9;
    width: 100%;
    overflow: hidden;
	border:1px solid rgba(0, 51, 102, 0.05);
	border-radius:0.75rem;
	background-color: var( --mpi-color-surface-container-low);
}
.elementor .machine-card-media img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.7s;
}
.elementor .machine-card:hover .machine-card-media img{
transform: scale(1.15);
}
.elementor .machine-card .mpi-h4{
padding-top: 1rem;
}
.elementor .machine-card:hover .mpi-h4{
color: var(--mpi-color-orange);
}
.elementor .step-container{text-align:center;transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);}
.elementor .step-container .step{
  width: 4rem;
  height: 4rem;
  border-radius: var(--mpi-radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1.5rem;
  font-size: 1.75rem; 
  font-weight:800;
  color:var(--mpi-color-white);
  background-color:var(--mpi-color-orange);
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
}
.elementor .step-container:hover .step{transform: scale(1.15);}
.elementor .step-container:hover .mpi-h4{color: var(--mpi-color-orange);}
.elementor .step-divider{background-color:rgba(203, 213, 225, 1); width:3rem;height:3px;);padding:0; margin-top:2rem;}
.elementor .video-container{aspect-ratio: 16 / 9; max-width: 64rem;position:relative;border-radius:var(--mpi-radius-xl);     justify-content: center; /* Horizontally centers the icon */
    align-items: center;  }
	
	
/******************** LANDING PAGES STYLES *************************************/

.landing-hero{color:#ffffff;}
.text-white, .text-white p, .text-white span, .text-white h1, .text-white h2{color: var(--mpi-color-white) !important;}
.contact-us__area .contact-us__form-wrapper{padding:30px;}
.contact-us__area .contact-us__form-wrapper .contact-us__form .contact-us__input select {
    margin-left: 0;
    background: var(--rr-common-white);
    margin-bottom: 30px;
    padding: 13px 20px;
    border-radius: 4px;
    border: 1px solid rgba(0, 29, 8, 0.5);
	width:100%;
}
#landing-form .section__title{margin-bottom:0;}
#iconbox-container .elementor-icon-box-wrapper{
    background:#fbf9fa;
    border-radius: 15px;
    padding: 19px;}
#iconbox-container .elementor-icon-box-title{    font-size: 1.25rem; line-height:1.35rem;color: #333333;}
#iconbox-container .elementor-icon{font-size: 3rem;
    padding: 9px;
    background: #0c4da2;
    border-radius: 5px;
    fill: #ffffff;}
#iconbox-container .elementor-icon svg path{fill:#ffffff;}
#landing-icongrid-wrapper .elementor-widget-icon-box{
	background:#ffffff;
	text-align: left;
    border: 1px solid #cccccc;
    border-radius: 15px;
    padding: 19px;}
#landing-icongrid-wrapper .elementor-icon{font-size: 25px;
    padding: 15px;
    background: #ff0000;
    border-radius: 5px;
    fill: #ffffff;}
#landing-icongrid-wrapper.elementor-icon svg path{fill:#ffffff;}
#landing-icongrid-wrapper .elementor-icon-box-title{    font-size: 1.5rem; line-height:1.3; margin-bottom:1rem;
    color: #333333;}
#landing-icongrid-wrapper .elementor-icon-box-description{line-height:1.25;}
.landing-cta p{color:#ffffff;}
#process-wrapper .process-number{width:70px;height:70px;border-radius:50%;background:#0c4da2;color:#ffffff;}
#process-wrapper .process-title .elementor-heading-title{font-size:1.75rem;}
#landing-whympi-wrapper .elementor-icon-box-wrapper{
	background:#ffffff;
	text-align: left;
    border: 1px solid #cccccc;
    border-radius: 15px;
    padding: 19px;}
#landing-whympi-wrapper .elementor-icon-box-title{    font-size: 1.5rem; line-height:1.3; margin-bottom:1rem;
    color: #333333;}
#landing-whympi-wrapper .elementor-icon{font-size:3rem;}
#landing-whympi-wrapper .elementor-icon svg path{fill:#00a63e;}
#landing-areas-wrapper .elementor-icon-box-title{font-size:1.25rem;font-weight:400;}
#landing-areas-wrapper .elementor-icon{font-size:3rem;}
#landing-areas-wrapper .elementor-icon svg path{fill:#00a63e;}
#landing-areas-wrapper .elementor-icon-box-wrapper{
	border: 1px solid #cccccc;
    background:#ffffff;
    border-radius: 15px;
    padding: 19px;}
#landing-form .wpcf7 form.sent .wpcf7-response-output{color:#46b450;}
#landing-form .wpcf7 form.invalid .wpcf7-response-output{color:#ffb900;}
.contact-us__area .contact-us__form-wrapper .contact-us__form .contact-us__input input{border:1px solid rgba(0,29,8,.5)}
.contact-us__area .contact-us__form-wrapper .contact-us__form .contact-us__textarea textarea{border:1px solid rgba(0,29,8,.5)}
.contact-us__area .contact-us__form-wrapper .contact-us__form .contact-us__input select{border:1px solid rgba(0,29,8,.5)}
/******************** LANDING PAGES STYLES END *************************************/