/* CustomFonts */



:root{
	--default-color: #1f2937;
    --accent-color:#003A99;
    --accent-color2:#002E7A;
    --accent-color3:#7A1F7A;
    --accent-color4:#00B4B8;

    --family:"Plus Jakarta Sans";
    --family2:"Plus Jakarta Sans";

    --button-color1:#003A99;
	--button-hover-color1:#002E7A;
    --button-color2:#002E7A;
	--button-hover-color2:#061e52;
    --button-color3:#7A1F7A;
	--button-hover-color3:#5E1560;
    --button-color4:#F5A623;
	--button-hover-color4:#ffcc3e;
    --button-color5:#ffffff;
	--button-hover-color5:#ffffff; 

	--link-color:#003a99;
	--link-visited-color:#003A99;
	--link-hover-color:#7A1F7A;
	--link-active-color:#003A99;

	--container-width: auto;

	--h1-color: #272727;
	--h2-color: #272727;
	--h3-color: #272727;
	--h4-color: #272727;
	--h5-color: #272727;
	--h6-color: #272727;
}
 

@media (min-width:576px) {
	:root{
		--container-width: 540px;
	}
}
@media (min-width:768px) {
	:root{
		--container-width: 760px;
	}
}
@media (min-width:992px) {
	:root{
		--container-width: 960px;
	}
}
@media (min-width:1200px) {
	:root{
		--container-width: 1140px;
	}
}
@media (min-width:1600px) {
	:root{
		--container-width: 1200px;
	}
}
 

/* =========================================================================
   MAYACO Marketing & Internet  |  Site stylesheet
   Layered on top of Bootstrap 5. Add-only custom classes — prefixed .m- or
   scoped to section selectors — so DNN / Glend theme migration stays clean.
   ========================================================================= */

/* ---------- 1. Design tokens ---------- */
:root {
  /* Brand (derived from logo: #003090 blue, #600060 magenta) */
  --m-brand-blue:      #003A99;
  --m-brand-blue-600:  #002E7A;
  --m-brand-blue-700:  #061E52;
  --m-brand-magenta:   #7A1F7A;
  --m-brand-magenta-600:#5E1560;

  /* Bright complementary accents */
  --m-accent-teal:     #00B4B8;
  --m-accent-teal-600: #008F92;
  --m-accent-amber:    #F5A623;

  /* Neutrals */
  --m-ink:             #1F2937;
  --m-ink-soft:        #374151;
  --m-muted:           #5B6B7F;
  --m-border:          #E5E9F0;
  --m-surface:         #F7F9FC;
  --m-surface-2:       #EEF2F9;
  --m-white:           #FFFFFF;

  /* Gradients */
  --m-gradient-hero:   linear-gradient(135deg, #003A99 0%, #3C2A8F 55%, #7A1F7A 100%);
  --m-gradient-soft:   linear-gradient(180deg, #F7F9FC 0%, #FFFFFF 100%);
  --m-gradient-ai:     linear-gradient(135deg, #00B4B8 0%, #003A99 100%);

  /* Typography */
  --m-font-heading: 'Plus Jakarta Sans', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --m-font-body:    'Inter', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* Shape & shadow */
  --m-radius-sm: 8px;
  --m-radius:    14px;
  --m-radius-lg: 20px;
  --m-shadow-sm: 0 2px 6px rgba(6, 30, 82, 0.06);
  --m-shadow:    0 10px 30px -12px rgba(6, 30, 82, 0.18);
  --m-shadow-lg: 0 24px 60px -20px rgba(6, 30, 82, 0.28);
}

/* ---------- 2. Base ---------- */
html { scroll-behavior: smooth; }

body {
  font-family: var(--m-font-body);
  color: var(--m-ink);
  background: var(--m-white);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: var(--m-font-heading);
  color: var(--m-brand-blue-700);
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.2;
}

h1, .h1 { font-weight: 800; letter-spacing: -0.02em; }

p { color: var(--m-ink-soft); }
.lead { color: var(--m-ink-soft); font-size: 1.15rem; line-height: 1.7; }

a { color: var(--m-brand-blue); text-decoration: none; transition: color .18s ease; }
a:hover { color: var(--m-brand-magenta); text-decoration: underline; }

/* Visible, high-contrast focus everywhere */
a:focus-visible,
button:focus-visible,
.btn:focus-visible,
.form-control:focus-visible,
.form-select:focus-visible,
.nav-link:focus-visible,
.dropdown-item:focus-visible {
  outline: 3px solid var(--m-accent-teal) !important;
  outline-offset: 2px;
  box-shadow: none !important;
}

/* Screen-reader only skip link, visible on focus */
.m-skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--m-brand-blue-700);
  color: #fff;
  padding: 12px 18px;
  z-index: 10000;
  border-radius: 0 0 var(--m-radius-sm) 0;
  font-weight: 600;
}
.m-skip-link:focus {
  left: 0;
  color: #fff;
  text-decoration: none;
}

/* ---------- 3. Layout utilities ---------- */
.m-section       { padding: 5rem 0; }
.m-section-sm    { padding: 3.5rem 0; }
.m-section-lg    { padding: 7rem 0; }
.m-surface       { background: var(--m-surface); }
.m-surface-2     { background: var(--m-surface-2); }
.m-container-narrow { max-width: 880px; margin: 0 auto; }

.m-eyebrow {
  display: inline-block;
  font-family: var(--m-font-heading);
  font-weight: 600;
  font-size: .78rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--m-brand-magenta);
  background: rgba(122, 31, 122, 0.08);
  padding: .35rem .75rem;
  border-radius: 999px;
  margin-bottom: 1rem;
}

.m-eyebrow-light {
  color: #fff;
  background: rgba(255,255,255,0.18);
}

.m-divider {
  width: 60px;
  height: 4px;
  border-radius: 2px;
  background: var(--m-gradient-hero);
  margin: 1rem 0 1.5rem;
}

/* ---------- 4. Navbar ---------- */
.m-navbar {
  background: rgba(255,255,255,0.96);
  backdrop-filter: saturate(180%) blur(8px);
  border-bottom: 1px solid var(--m-border);
  padding-top: .6rem;
  padding-bottom: .6rem;
  transition: box-shadow .2s ease;
}
.m-navbar.is-scrolled { box-shadow: var(--m-shadow-sm); }

.m-navbar .navbar-brand img {
  height: 38px;
  width: auto;
}

.m-navbar .nav-link {
  color: var(--m-ink) !important;
  font-weight: 500;
  padding: .55rem .9rem !important;
  border-radius: var(--m-radius-sm);
  transition: color .18s ease, background .18s ease;
}
.m-navbar .nav-link:hover,
.m-navbar .nav-link.active {
  color: var(--m-brand-blue) !important;
  background: var(--m-surface);
}

.m-navbar .dropdown-menu {
  border: 1px solid var(--m-border);
  border-radius: var(--m-radius);
  box-shadow: var(--m-shadow);
  padding: .75rem;
  min-width: 260px;
}
.m-navbar .dropdown-item {
  border-radius: var(--m-radius-sm);
  padding: .6rem .75rem;
  font-weight: 500;
  color: var(--m-ink);
}
.m-navbar .dropdown-item i {
  width: 20px;
  margin-right: .5rem;
  color: var(--m-brand-blue);
}
.m-navbar .dropdown-item:hover,
.m-navbar .dropdown-item:focus {
  background: var(--m-surface);
  color: var(--m-brand-blue);
}

/* ---------- 5. Buttons ---------- */
.btn {
  font-family: var(--m-font-heading);
  font-weight: 600;
  border-radius: var(--m-radius-sm);
  padding: .7rem 1.4rem;
  transition: transform .15s ease, box-shadow .18s ease, background .18s ease, color .18s ease;
}
.btn:focus-visible { outline: 3px solid var(--m-accent-teal); outline-offset: 2px; }

.btn-m-primary {
  background: var(--m-brand-blue);
  color: #fff;
  border: 1px solid var(--m-brand-blue);
  box-shadow: 0 6px 16px -8px rgba(0, 58, 153, 0.5);
}
.btn-m-primary:hover,
.btn-m-primary:focus {
  background: var(--m-brand-blue-600);
  border-color: var(--m-brand-blue-600);
  color: #fff;
  transform: translateY(-1px);
}

.btn-m-outline {
  background: transparent;
  color: var(--m-brand-blue);
  border: 1.5px solid var(--m-brand-blue);
}
.btn-m-outline:hover,
.btn-m-outline:focus {
  background: var(--m-brand-blue);
  color: #fff;
}

.btn-m-light {
  background: #fff;
  color: var(--m-brand-blue);
  border: 1px solid #fff;
}
.btn-m-light:hover,
.btn-m-light:focus {
  background: var(--m-surface-2);
  color: var(--m-brand-blue-600);
}

.btn-m-ghost-light {
  background: transparent;
  color: #fff;
  border: 1.5px solid rgba(255,255,255,0.6);
}
.btn-m-ghost-light:hover,
.btn-m-ghost-light:focus {
  background: rgba(255,255,255,0.12);
  color: #fff;
  border-color: #fff;
}

.btn-m-amber {
  background: var(--m-accent-amber);
  color: #1F2937;
  border: 1px solid var(--m-accent-amber);
}
.btn-m-amber:hover,
.btn-m-amber:focus {
  filter: brightness(.95);
  color: #1F2937;
  transform: translateY(-1px);
}

/* ---------- 6. Hero ---------- */
.m-hero {
  position: relative;
  color: #fff;
  background: var(--m-gradient-hero);
  padding: 6rem 0 7rem;
  overflow: hidden;
}
.m-hero::before,
.m-hero::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  opacity: .55;
  pointer-events: none;
}
.m-hero::before {
  width: 480px; height: 480px;
  background: #00B4B8;
  top: -160px; right: -120px;
}
.m-hero::after {
  width: 420px; height: 420px;
  background: #F5A623;
  bottom: -180px; left: -100px;
  opacity: .35;
}
.m-hero > .container { position: relative; z-index: 2; }

.m-hero h1 {
  color: #fff;
  font-size: clamp(2.1rem, 4vw, 3.4rem);
  margin-bottom: 1.25rem;
}
.m-hero .lead {
  color: rgba(255,255,255,0.92);
  font-size: 1.2rem;
  max-width: 640px;
}
.m-hero-visual {
  position: relative;
  display: flex;
  justify-content: center;
}
.m-hero-visual__svg {
  width: 100%;
  max-width: 480px;
  height: auto;
  animation: mHeroFloat 6s ease-in-out infinite;
}
@keyframes mHeroFloat {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-10px); }
}
@media (max-width: 991.98px) {
  .m-hero-visual { margin-top: 1rem; max-width: 420px; margin-inline: auto; }
}
@media (prefers-reduced-motion: reduce) {
  .m-hero-visual__svg { animation: none; }
}
.hero__particles {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
}
/* Page-header (smaller hero) for interior pages */
.m-page-header {
  background: var(--m-gradient-hero);
  color: #fff;
  padding: 4.5rem 0 3.5rem;
  position: relative;
  overflow: hidden;
}
.m-page-header::before {
  content: "";
  position: absolute;
  width: 520px; height: 520px;
  border-radius: 50%;
  background: #00B4B8;
  filter: blur(90px);
  opacity: .35;
  right: -180px; top: -220px;
  pointer-events: none;
}
.m-page-header > .container { position: relative; z-index: 2; }
.m-page-header h1 {
  color: #fff;
  font-size: clamp(1.9rem, 3.2vw, 2.8rem);
}
.m-page-header p.lead {
  color: rgba(255,255,255,0.9);
  max-width: 720px;
}

.m-breadcrumbs {
  background: transparent;
  padding: 0;
  margin-bottom: 1rem;
}
.m-breadcrumbs a { color: rgba(255,255,255,0.85); }
.m-breadcrumbs a:hover { color: #fff; }
.m-breadcrumbs .breadcrumb-item + .breadcrumb-item::before {
  color: rgba(255,255,255,0.55);
}
.m-breadcrumbs .breadcrumb-item.active { color: #fff; }

/* ---------- 7. Trust strip ---------- */
.m-trust-strip {
  background: #fff;
  border-top: 1px solid var(--m-border);
  border-bottom: 1px solid var(--m-border);
  padding: 1.2rem 0;
}
.m-trust-strip__label {
  font-family: var(--m-font-heading);
  font-weight: 600;
  color: var(--m-muted);
  letter-spacing: .08em;
  text-transform: uppercase;
  font-size: .78rem;
}
.m-trust-strip__item {
  color: var(--m-ink);
  font-weight: 600;
  font-size: .95rem;
  display: inline-flex;
  align-items: center;
  gap: .4rem;
}
.m-trust-strip__item i { color: var(--m-brand-magenta); }

/* ---------- 8. Cards (service / feature / industry) ---------- */
.m-card {
  background: #fff;
  border: 1px solid var(--m-border);
  border-radius: var(--m-radius);
  padding: 2rem 1.75rem;
  height: 100%;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  position: relative;
}
.m-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--m-shadow);
  border-color: transparent;
}

.m-card__icon {
  width: 56px;
  height: 56px;
  border-radius: var(--m-radius-sm);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  color: #fff;
  margin-bottom: 1.2rem;
  background: var(--m-gradient-hero);
}
.m-card--accent-teal   .m-card__icon { background: var(--m-gradient-ai); }
.m-card--accent-magenta .m-card__icon { background: linear-gradient(135deg, #7A1F7A 0%, #003A99 100%); }
.m-card--accent-amber  .m-card__icon { background: linear-gradient(135deg, #F5A623 0%, #7A1F7A 100%); }

.m-card h3, .m-card .h3 {
  font-size: 1.2rem;
  margin-bottom: .6rem;
}
.m-card p { margin-bottom: .75rem; }
.m-card a.m-card__link {
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: .35rem;
}
.m-card a.m-card__link i { font-size: .85rem; transition: transform .15s ease; }
.m-card a.m-card__link:hover i { transform: translateX(3px); }

/* Compact industry card */
.m-industry {
  background: #fff;
  border: 1px solid var(--m-border);
  border-radius: var(--m-radius);
  padding: 1.5rem 1.25rem;
  text-align: center;
  height: 100%;
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.m-industry:hover {
  transform: translateY(-3px);
  border-color: var(--m-brand-blue);
  box-shadow: var(--m-shadow-sm);
}
.m-industry i {
  font-size: 1.6rem;
  color: var(--m-brand-blue);
  margin-bottom: .75rem;
  display: block;
}
.m-industry h4 {
  font-size: 1rem;
  margin-bottom: .25rem;
}
.m-industry p {
  font-size: .88rem;
  color: var(--m-muted);
  margin: 0;
}

/* ---------- 9. Feature / benefit row ---------- */
.m-benefit {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
}
.m-benefit__icon {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 180, 184, 0.15);
  color: var(--m-accent-teal-600);
  font-size: 1.05rem;
}
.m-benefit h4 {
  font-size: 1.1rem;
  margin-bottom: .3rem;
}
.m-benefit p { margin: 0; }

/* ---------- 10. Spotlight banner (used for AI) ---------- */
.m-spotlight {
  background: var(--m-gradient-ai);
  color: #fff;
  border-radius: var(--m-radius-lg);
  padding: 3rem 2.5rem;
  position: relative;
  overflow: hidden;
}
.m-spotlight::before {
  content: "";
  position: absolute;
  right: -100px; bottom: -100px;
  width: 300px; height: 300px;
  background: rgba(255,255,255,0.08);
  border-radius: 50%;
}
.m-spotlight h2 { color: #fff; }
.m-spotlight p { color: rgba(255,255,255,0.92); }
.m-spotlight .m-eyebrow { color: #fff; background: rgba(255,255,255,0.18); }

/* ---------- 11. Approach steps ---------- */
.m-step {
  background: #fff;
  border: 1px solid var(--m-border);
  border-radius: var(--m-radius);
  padding: 1.75rem 1.5rem;
  height: 100%;
  position: relative;
}
.m-step__number {
  font-family: var(--m-font-heading);
  font-weight: 800;
  font-size: 2.25rem;
  line-height: 1;
  background: var(--m-gradient-hero);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  margin-bottom: .5rem;
}
.m-step h4 { font-size: 1.1rem; margin-bottom: .4rem; }
.m-step p  { font-size: .95rem; margin: 0; }

/* ---------- 12. Tags / pill list ---------- */
.m-tag {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  background: var(--m-surface-2);
  border: 1px solid var(--m-border);
  color: var(--m-brand-blue-700);
  padding: .4rem .75rem;
  border-radius: 999px;
  font-size: .88rem;
  font-weight: 500;
  margin: 0 .3rem .5rem 0;
}
.m-tag i { color: var(--m-brand-magenta); font-size: .8rem; }

/* ---------- 13. Check list ---------- */
.m-checklist {
  list-style: none;
  padding: 0;
  margin: 0;
}
.m-checklist li {
  position: relative;
  padding: .45rem 0 .45rem 2rem;
  color: var(--m-ink-soft);
}
.m-checklist li::before {
  content: "\f00c"; /* fa-check */
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  position: absolute;
  left: 0; top: .55rem;
  width: 22px; height: 22px;
  background: rgba(0, 180, 184, 0.18);
  color: var(--m-accent-teal-600);
  border-radius: 50%;
  font-size: .7rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ---------- 14. Image placeholder ---------- */
.m-image-placeholder {
  background: var(--m-gradient-soft);
  border: 1px dashed var(--m-border);
  border-radius: var(--m-radius);
  min-height: 280px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: var(--m-muted);
  padding: 2rem;
}
.m-image-placeholder i {
  font-size: 2.2rem;
  color: var(--m-brand-blue);
  opacity: .45;
  margin-bottom: .5rem;
}
.m-image-placeholder small {
  display: block;
  margin-top: .3rem;
  font-size: .8rem;
  color: var(--m-muted);
}

/* ---------- 15. Accordion (FAQ) ---------- */
.m-accordion .accordion-item {
  border: 1px solid var(--m-border);
  border-radius: var(--m-radius) !important;
  margin-bottom: .75rem;
  overflow: hidden;
}
.m-accordion .accordion-button {
  font-family: var(--m-font-heading);
  font-weight: 600;
  color: var(--m-brand-blue-700);
  padding: 1.1rem 1.25rem;
  background: #fff;
}
.m-accordion .accordion-button:not(.collapsed) {
  background: var(--m-surface);
  color: var(--m-brand-blue);
  box-shadow: none;
}
.m-accordion .accordion-button:focus {
  box-shadow: none;
  outline: 3px solid var(--m-accent-teal);
  outline-offset: 2px;
}
.m-accordion .accordion-body { color: var(--m-ink-soft); }

/* ---------- 16. Forms ---------- */
.m-form .form-label {
  font-family: var(--m-font-heading);
  font-weight: 600;
  color: var(--m-brand-blue-700);
  margin-bottom: .35rem;
}
.m-form .form-control,
.m-form .form-select {
  border: 1px solid var(--m-border);
  border-radius: var(--m-radius-sm);
  padding: .7rem .9rem;
  font-size: .98rem;
  background: #fff;
}
.m-form .form-control:focus,
.m-form .form-select:focus {
  border-color: var(--m-brand-blue);
  box-shadow: 0 0 0 3px rgba(0,58,153,0.18);
}
.m-form textarea.form-control { min-height: 140px; }
.m-form .form-text { color: var(--m-muted); }

/* ---------- 17. Footer ---------- */
.m-footer {
  background: var(--m-brand-blue-700);
  color: rgba(255,255,255,0.82);
  padding: 4rem 0 1.5rem;
}
.m-footer h5 {
  color: #fff;
  font-size: 1rem;
  font-weight: 700;
  margin-bottom: 1rem;
  letter-spacing: .02em;
}
.m-footer a {
  color: rgba(255,255,255,0.82);
  text-decoration: none;
}
.m-footer a:hover,
.m-footer a:focus {
  color: #fff;
  text-decoration: underline;
}
.m-footer ul.m-footer__list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.m-footer ul.m-footer__list li { margin-bottom: .5rem; }
.m-footer__brand-img {
  background: #fff;
  padding: .5rem .75rem;
  border-radius: var(--m-radius-sm);
  display: inline-block;
  margin-bottom: 1rem;
}
.m-footer__brand-img img { height: 34px; width: auto; }
.m-footer__social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(255,255,255,0.1);
  margin-right: .5rem;
  transition: background .18s ease, transform .15s ease;
}
.m-footer__social a:hover {
  background: var(--m-accent-teal);
  color: #fff;
  transform: translateY(-2px);
  text-decoration: none;
}
.m-footer__bottom {
  border-top: 1px solid rgba(255,255,255,0.12);
  margin-top: 3rem;
  padding-top: 1.25rem;
  font-size: .87rem;
  color: rgba(255,255,255,0.65);
}

/* ---------- 18. CTA block ---------- */
.m-cta-block {
  background: var(--m-gradient-hero);
  color: #fff;
  border-radius: var(--m-radius-lg);
  padding: 3.5rem 2.5rem;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.m-cta-block::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 20% 20%, rgba(0,180,184,0.4), transparent 50%),
              radial-gradient(circle at 80% 80%, rgba(245,166,35,0.25), transparent 50%);
  pointer-events: none;
}
.m-cta-block > * { position: relative; z-index: 2; }
.m-cta-block h2 { color: #fff; margin-bottom: 1rem; }
.m-cta-block p { color: rgba(255,255,255,0.92); margin-bottom: 1.75rem; }

/* ---------- 19. Portfolio card ---------- */
.m-portfolio {
  background: #fff;
  border: 1px solid var(--m-border);
  border-radius: var(--m-radius);
  overflow: hidden;
  height: 100%;
  transition: transform .18s ease, box-shadow .18s ease;
}
.m-portfolio:hover {
  transform: translateY(-4px);
  box-shadow: var(--m-shadow);
}
.m-portfolio__media {
  aspect-ratio: 16 / 10;
  background: var(--m-gradient-hero);
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255,255,255,0.8);
  font-size: 2.4rem;
  position: relative;
}
.m-portfolio__media--teal  { background: var(--m-gradient-ai); }
.m-portfolio__media--amber { background: linear-gradient(135deg, #F5A623 0%, #7A1F7A 100%); }
.m-portfolio__media--magenta { background: linear-gradient(135deg, #7A1F7A 0%, #003A99 100%); }
.m-portfolio__body { padding: 1.5rem; }
.m-portfolio__body h3 { font-size: 1.15rem; margin-bottom: .35rem; }
.m-portfolio__meta,
.m-portfolio__sector {
  font-size: .82rem;
  color: var(--m-muted);
  text-transform: uppercase;
  letter-spacing: .08em;
  font-weight: 600;
  margin-bottom: .35rem;
}
.m-portfolio-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.5rem;
}
@media (max-width: 991.98px) {
  .m-portfolio-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 599px) {
  .m-portfolio-grid { grid-template-columns: 1fr; }
}

/* Variant tinting for portfolio media backgrounds */
.m-portfolio[data-variant="medical"]       .m-portfolio__media { background: linear-gradient(135deg, #003A99 0%, #00B4B8 100%); }
.m-portfolio[data-variant="nonprofit"]     .m-portfolio__media { background: linear-gradient(135deg, #7A1F7A 0%, #F5A623 100%); }
.m-portfolio[data-variant="agency"]        .m-portfolio__media { background: linear-gradient(135deg, #061E52 0%, #003A99 100%); }
.m-portfolio[data-variant="association"]   .m-portfolio__media { background: linear-gradient(135deg, #003A99 0%, #7A1F7A 100%); }
.m-portfolio[data-variant="b2b"]           .m-portfolio__media { background: linear-gradient(135deg, #00B4B8 0%, #003A99 100%); }
.m-portfolio[data-variant="manufacturing"] .m-portfolio__media { background: linear-gradient(135deg, #5B6B7F 0%, #061E52 100%); }
.m-portfolio[data-variant="local"]         .m-portfolio__media { background: linear-gradient(135deg, #F5A623 0%, #003A99 100%); }
.m-portfolio[data-variant="education"]     .m-portfolio__media { background: linear-gradient(135deg, #00B4B8 0%, #7A1F7A 100%); }
.m-portfolio[data-variant="health2"]       .m-portfolio__media { background: linear-gradient(135deg, #003A99 0%, #F5A623 100%); }

/* ---------- 19b. Tag wrapper ---------- */
.m-tags { display: flex; flex-wrap: wrap; margin-top: .75rem; }

/* ---------- 19c. Contact page list ---------- */
.m-contact-list { margin-top: 1.25rem; }
.m-contact-list li {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  padding: 1rem 0;
  border-bottom: 1px dashed var(--m-border);
}
.m-contact-list li:last-child { border-bottom: 0; }
.m-contact-list li > i {
  flex: 0 0 40px;
  height: 40px;
  width: 40px;
  border-radius: 10px;
  background: var(--m-surface-2);
  color: var(--m-brand-blue-700);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
}
.m-contact-list a { color: var(--m-brand-blue-700); font-weight: 600; }

/* ---------- 19d. Form card wrapper ---------- */
.m-form-card {
  background: #fff;
  border: 1px solid var(--m-border);
  border-radius: var(--m-radius);
  padding: 2rem;
  box-shadow: var(--m-shadow-soft, 0 4px 20px rgba(6, 30, 82, 0.06));
}
@media (max-width: 575.98px) {
  .m-form-card { padding: 1.25rem; }
}

/* ---------- 20. Responsive polish ---------- */
@media (max-width: 991.98px) {
  .m-section    { padding: 4rem 0; }
  .m-section-lg { padding: 5rem 0; }
  .m-hero       { padding: 4.5rem 0 5rem; }
  .m-cta-block  { padding: 2.5rem 1.5rem; }
  .m-spotlight  { padding: 2.5rem 1.5rem; }

  .m-navbar .navbar-collapse {
    margin-top: .75rem;
    padding: .5rem;
    border-top: 1px solid var(--m-border);
  }
  .m-navbar .dropdown-menu {
    box-shadow: none;
    border: 0;
    padding: .25rem .5rem;
  }
}

@media (max-width: 575.98px) {
  .m-section-sm { padding: 2.5rem 0; }
  .m-hero h1    { font-size: 2rem; }
  .m-card       { padding: 1.5rem 1.25rem; }
}

/* Respect reduced motion preferences */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* Print */
@media print {
  .m-navbar, .m-footer, .m-cta-block, .btn { display: none !important; }
  .m-hero, .m-page-header { background: #fff !important; color: #000 !important; padding: 1rem 0; }
  body { color: #000; background: #fff; }
}



	
:root{
	--headerHeight: calc( var(--header-top-height,0px) + var(--header-center-height,0px) + var(--header-bottom-height,0px) );
	--mobileHeaderHeight: calc( var(--header-mobile-top-height,0px) + var(--header-mobile-height,0px) + var(--header-mobile-bottom-height,0px) );
	--floatingHeaderHeight: calc( var(--floating-header-top-height,0px) + var(--floating-header-center-height,0px) + var(--floating-header-bottom-height,0px) );
}

.dng-main{
	 background-color:#FFFFFF;  	}
.container{
		padding-left:15px;
	padding-right:15px;
		width: var(--container-width);
	max-width: 100%;
}
.is-container{
	max-width:var(--container-width);
}
.container-fluid {
		padding-right:15px;
	padding-left:15px;
		margin-right: auto;
	margin-left: auto;
}   
#dnn_content{
	 padding-top:0px;		 padding-bottom:0px;	}		

@media (min-width:576px) {
	
		}
@media (min-width:768px) {
		}
@media (min-width:992px) {
		}
@media (min-width:1200px) {
		}


	.left-full-column > .full-column-inner{
		margin-inline-start:calc((var(--container-width) - 100vw)/2);
		width:calc(100% + (100vw - var(--container-width))/2);
	}
	.right-full-column > .full-column-inner{
		margin-inline-end:calc((var(--container-width) - 100vw)/2);
		width:calc(100% + (100vw - var(--container-width))/2);
	}
	.full-column > .full-column-inner{
		width:100vw;	
		margin-inline-start:calc((var(--container-width) - 100vw)/2 - 15px);
	}
	.layout-no-plr .full-column > .full-column-inner{
		margin-inline-start:calc((var(--container-width) - 100vw)/2);
	}

		@media (max-width:575px) {
		.left-full-column > .full-column-inner{
			margin-inline-start:-15px;
			width:calc(100% + 15px);
		}
		.right-full-column > .full-column-inner{
			margin-inline-end:-15px;
			width:calc(100% + 15px);
		}
		.full-column > .full-column-inner{
			width:calc(100% + 30px);
			margin-inline-start:-15px;
		}
	}
	



h1, h2, h3, h4, h5, h6{
	font-family:inherit;
}

h1{
	color:var(--h1-color);
	font-family:"Plus Jakarta Sans"; 	font-weight:800;
	font-size:2.25rem;
	line-height:1.2;
	letter-spacing:0;
}		
h2{
	color:var(--h2-color);
		font-family:"Plus Jakarta Sans"; 	font-weight:500;
	font-size:1.75rem;
	line-height:1.3;
	letter-spacing:0;
}		
h3{
	color:var(--h3-color);
		font-family:"Plus Jakarta Sans"; 	font-weight:500;
	font-size:1.75rem;
	line-height:1.3;
	letter-spacing:0;
}		
h4{
	color:var(--h4-color);
		font-family:"Plus Jakarta Sans"; 	font-weight:500;
	font-size:1.625rem;
	line-height:1.4;
	letter-spacing:0;
}		
h5{
	color:var(--h5-color);
		font-family:"Plus Jakarta Sans"; 	font-weight:500;
	font-size:1.375rem;
	line-height:1.4;
	letter-spacing:0;
}		
h6{
	color:var(--h6-color);
		font-family:"Plus Jakarta Sans"; 	font-weight:500;
	font-size:1.25rem;
	line-height:1.5;
	letter-spacing:0;
}	

#Body .is-inherit-root-text,
#Body .is-inherit-root-text p,
#Body .is-inherit-root-text li,
#Body .is-inherit-root-text div,
#Body .is-inherit-root-text span{
	color: var(--default-color);
}
#Body .is-inherit-root-text h1{
	color:var(--h1-color);
}
#Body .is-inherit-root-text h2{
	color:var(--h2-color);
}
#Body .is-inherit-root-text h3{
	color:var(--h3-color);
}
#Body .is-inherit-root-text h4{
	color:var(--h4-color);
}
#Body .is-inherit-root-text h5{
	color:var(--h5-color);
}
#Body .is-inherit-root-text h6{
	color:var(--h6-color);
}
#Body .is-inherit-root-text a, 
#Body .is-inherit-root-text a:link{
	color:var(--link-color);
}
#Body .is-inherit-root-text a:visited{
	color:var(--link-visited-color);
}
#Body .is-inherit-root-text a:hover{
	color:var(--link-hover-color);
}
#Body .is-inherit-root-text a:active{
	color:var(--link-active-color);
}

 
@media only screen and (min-width: 576px)  {
						}
@media only screen and (min-width: 768px) {	
						}
@media only screen and (min-width: 992px) {	
		h1{
		font-size:3rem;		line-height:1.2;	}
			h2{
		font-size:2.5rem;		line-height:1.4;	}		
			h3{
		font-size:2rem;			}		
				}
@media only screen and (min-width: 1200px) {	
						}

a, 
a:link{
	color: var(--link-color);
}
a:visited{
	color: var(--link-visited-color);
}
a:hover{
	color: var(--link-hover-color);
}
a:active{
	color: var(--link-active-color);
}


.btn-accent,
a.btn-accent{
	color:var(--accent-color);
	border-color:var(--accent-color);
	background-color:var(--accent-color);
}
[class*="am-btn-"].btn-accent:before{
	background-color:var(--accent-color);
}

div [class*="am-btn-"].hover-accent:hover{
	color:var(--accent-color);
	border-color:var(--accent-color);
	background-color:var(--accent-color);
}
div [class*="am-btn-"].hover-accent:hover:before{
	background-color:var(--accent-color); 
}



#Body .bg-accent{
	background-color:var(--accent-color);
}
#Body .color-accent{
	color:var(--accent-color);
} 
#Body .border-accent{
	border-color:var(--accent-color);
}
#Body .bg-accent-hover:hover{
	background-color:var(--accent-color);
}
#Body .color-accent-hover:hover{
	color:var(--accent-color);
} 
#Body .border-accent-hover:hover{
	border-color:var(--accent-color);
}

#Body .bg-accent2{
	background-color:var(--accent-color2);
}
#Body .color-accent2{
	color:var(--accent-color2);
} 
#Body .border-accent2{
	border-color:var(--accent-color2);
}

#Body .bg-accent3{
	background-color:var(--accent-color3);
}
#Body .color-accent3{
	color:var(--accent-color3);
} 
#Body .border-accent3{
	border-color:var(--accent-color3);
}
#Body .bg-accent4{
	background-color:var(--accent-color4);
}
#Body .color-accent4{
	color:var(--accent-color4);
} 
#Body .border-accent4{
	border-color:var(--accent-color4);
}

b,
strong{
	font-weight:600;
}
.bold,
.font-weight-bold,
.strong-before:before,
.strong-after:after,
.strong-before :before,
.strong-after :after{
	font-weight:600!important;
}



#Body, body, .Head, .SubTitle, .SubSubTitle, .Normal{
	font-family: var(--family);  
	font-size: 1rem; 
	line-height: 1.8;
	letter-spacing: 0;
	color: var(--default-color);
}
.default-size{font-size:1rem;}
.default-lineheight{line-height:1.8;}

@media (min-width:576px) {
		}
@media (min-width:768px) {
		}
@media (min-width:992px) {
		}
@media (min-width:1200px) {
		}



button, 
input, 
select, 
textarea,
.btn{
	font-family: var(--family);  
}

.default-color{
	color: var(--default-color)!important;
}
.default-bg-color{
	background-color: var(--default-color)!important;
}
.default-bg-color-hover:hover{
	background-color: var(--default-color)!important;
}
.default-border-color{
	border-color: var(--default-color)!important;
}
.accent-color{
	color: $var(--accent-color);
}
.default-family{
	font-family: var(--family)!important;
}
.family2{
	font-family: var(--family2)!important;
}

/*default color*/



/*page title*/
.page-title-bg{
			background-color:#f0f0f0; 
		}		
.page-title .title-area:after{
	border-color: #f3bebe; 
}



	

.page-title-bg.light-overlay::after{
	background-color: rgba(255, 255, 255, 0.10);
}
.page-title-bg.dark-overlay::after{
	background-color: rgba(0, 0, 0, 0.10);
}

.page-title-container{
	 height: 200px;
}
@media only screen and (max-width: 767px) {
	.page-title-container{
		height: auto;padding-top:35px;padding-bottom:35px;
	}
}
@media only screen and (min-width: 768px) and (max-width: 991px){
	.page-title-container{
		height:120px;
		min-height:162px;
		padding-top: 45px;
		padding-bottom: 45px;
	}
}
 


 	.page-title .main-title span::before{
		background-image: linear-gradient(to right, #f3bebe , #fff1cd);
	}
 


/*breadcrumbs*/
.page-breadcrumbs{
	background-color:#ffffff;  
	}
.page-breadcrumbs > .container{
		padding-top:20px;
				padding-bottom:10px;
		}

.page-breadcrumbs .breadcrumbs a:hover{
		color:var(--accent-color)!important;
	}

.page-breadcrumbs .breadcrumbs{
    color: #666666;
    font-size: 14px;
}
.page-breadcrumbs .breadcrumbs-box > a,
.page-breadcrumbs .breadcrumbs-box > span > span > span{
    line-height:20px;
}
.page-breadcrumbs .breadcrumbs a,
.page-breadcrumbs .breadcrumbs a:link,
.page-breadcrumbs .breadcrumbs a:active,
.page-breadcrumbs .breadcrumbs a:visited{
    color: #666666;
    font-size: 14px;
}
.page-breadcrumbs .breadcrumbs a:hover{
			color:var(--accent-color)!important;
	}

.breadcrumbs_sytle2 .breadcrumbs-box,
.breadcrumbs_sytle3 .breadcrumbs-box > a:before, 
.breadcrumbs_sytle3 .breadcrumbs-box > span > span > span:before{
	background-color:#ededed;
}

/*sidebar dynamic*/

.sidebar_dynamic.sidebar_dynamic_sytle01{
	padding-right:40px;	}
.sidebar_dynamic.sidebar_dynamic_sytle01 > .sidebar_sticky{
	 	 }


.sidebar-main{
	display: flex;
}
.sidebar-main .sidebar-bar{
	width: 340px;
    flex: 0 0 340px;
}
.sidebar-main .sidebar-container{
	 flex-grow: 1;
	 width:  calc(100% - 340px);
}

.sidebar-main .sidebar_pos_right{
	order:2
}


@media only screen and (max-width: 767px) {
	.sidebar-main{
		flex-direction: column;
	}
	.sidebar-main .sidebar-bar{
		width:100%;
		flex: 0 0 100%;
	}	
	.sidebar-main .sidebar-container{
		width: 100%;
		flex: 0 0 100%;
	}

				.sidebar-main .sidebar-bar{
			order:1
		}	
		.sidebar-main .sidebar-container{
			order:0
		}
	}
 
@media only screen and (max-width: 991px) {
	.sidebar_dynamic.sidebar_dynamic_sytle01{
		padding-right:15px!important;
		padding-left:15px!important;
		margin-top: 30px;
	}
	.sidebar_dynamic.sidebar_dynamic_sytle01 > .sidebar_sticky{
		padding-top:0!important;
		padding-bottom:0!important;
	 }

}

.has-sidebar >.row{
	position: relative;
}




/*page */
.swiper-container .swiper-pagination-bullet-active{
	background: var(--accent-color);	
}
.swiper-container .swiper-button-next:hover, 
.swiper-container .swiper-button-prev:hover{
	color: var(--accent-color);	
}
 
.isotope-grid .isotope-group a:before {
    border-top-color:var(--accent-color2);
}

.isotope-grid .isotope-group a:after {
    border-top-color:var(--accent-color2);
}

.easy-carousel .pagination-bullet{
	color: var(--accent-color);	
}
 

/*backtop */