/* CustomFonts */ :root{ --default-color: #1f2937; --accent-color:#003A99; --accent-color2:#002E7A; --accent-color3:#7A1F7A; --accent-color4:#00B4B8; --family:"Inter"; --family2:"Inter"; --button-color1:#003A99; --button-hover-color1:#002E7A; --button-color2:#00b4b8; --button-hover-color2:#00999c; --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 ors — 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-:focus-visible,.nav-link:focus-visible,.down-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); back-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 .down-menu { border: 1px solid var(--m-border); border-radius: var(--m-radius); box-shadow: var(--m-shadow); padding: .75rem; min-width: 260px;}.m-navbar .down-item { border-radius: var(--m-radius-sm); padding: .6rem .75rem; font-weight: 500; color: var(--m-ink);}.m-navbar .down-item i { width: 20px; margin-right: .5rem; color: var(--m-brand-blue);}.m-navbar .down-item:hover,.m-navbar .down-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-secondary { background: var(--m-brand-magenta); color: #fff; border: 1px solid var(--m-brand-magenta); box-shadow: 0 6px 16px -8px rgba(122, 31, 122, 0.5);}.btn-m-secondary:hover,.btn-m-secondary:focus { filter: brightness(1.08); 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; }}/* 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,.m-spotlight h3 { 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); }.m-spotlight * { position: relative; z-index: 1; }.m-spotlight__icon { width: 56px; height: 56px; border-radius: 14px; background: rgba(255,255,255,0.18); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 1.5rem; margin-bottom: 1.25rem;}/* ---------- 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);}/* Checkmark bullet. The icon is drawn with an inline SVG data-URI rather than a Font Awesome glyph. This is deliberate: a ::before that depends on the FA webfont renders as an empty circle whenever FA is slow, blocked, self-hosted at a different path, or simply not included by the surrounding DNN skin. The SVG has no external dependency, so it always renders. */.m-checklist li::before { content: ""; position: absolute; left: 0; top: .5rem; width: 22px; height: 22px; border-radius: 50%; background-color: rgba(0, 180, 184, 0.18); background-image: url("image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23008F92' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: center; background-size: 12px 12px;}/* Optional: use the real Font Awesome glyph instead of the SVG above. Only worth adding on a page where you know FA is loaded. Usage: */.m-checklist--fa li::before { content: "\f00c"; /* fa-check */ font-family: "Font Awesome 6 Free", "Font Awesome 6 Pro", "FontAwesome"; font-weight: 900; /* solid style lives at weight 900 */ font-style: normal; line-height: 1; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; color: var(--m-accent-teal-600); font-size: .7rem; background-image: none; display: flex; align-items: center; justify-content: center;}/* If an is left inline inside a checklist item, hide it — the ::before already supplies the icon, and showing both produces a double checkmark. */.m-checklist li i.fa-check,.m-checklist li i.fa-solid.fa-check { display: none; }/* ---------- 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- { 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-: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__image {border-top-left-radius: var(--m-radius);border-top-right-radius: var(--m-radius);}.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-sm);}@media (max-width: 575.98px) { .m-form-card { padding: 1.25rem; }}/* ---------- 19e. Pricing / package cards ---------- */.m-pricing { background: #fff; border: 1px solid var(--m-border); border-top: 4px solid var(--m-brand-blue); border-radius: var(--m-radius); padding: 2rem; height: 100%; display: flex; flex-direction: column; transition: transform .18s ease, box-shadow .18s ease;}.m-pricing:hover { transform: translateY(-4px); box-shadow: var(--m-shadow);}.m-pricing--magenta { border-top-color: var(--m-brand-magenta); }.m-pricing__head { border-bottom: 1px solid var(--m-border); padding-bottom: 1.25rem; margin-bottom: 1.25rem;}.m-pricing__head h3 { font-size: 1.15rem; margin-bottom: .75rem; color: var(--m-brand-blue-700);}.m-pricing__price { font-family: var(--m-font-heading); font-size: 2.4rem; font-weight: 800; line-height: 1; color: var(--m-brand-blue);}.m-pricing--magenta .m-pricing__price { color: var(--m-brand-magenta); }.m-pricing__price span { display: block; font-size: .85rem; font-weight: 600; color: var(--m-muted); letter-spacing: .04em; text-transform: uppercase; margin-top: .4rem;}.m-pricing .m-checklist { flex: 1 1 auto; }/* ---------- 19f. Social media action verbs ---------- */.m-social-verb { font-size: .82rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; margin-bottom: .5rem; background: linear-gradient(90deg, #003A99 0%, #7A1F7A 100%); -webkit-background-clip: text; background-clip: text; color: transparent;}/* ---------- 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 .down-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:"Inter Tight"; font-weight:800; font-size:2.25rem; line-height:1.2; letter-spacing:0; } h2{ color:var(--h2-color); font-family:"Inter Tight"; font-weight:500; font-size:1.75rem; line-height:1.3; letter-spacing:0; } h3{ color:var(--h3-color); font-family:"Inter Tight"; font-weight:500; font-size:1.75rem; line-height:1.3; letter-spacing:0; } h4{ color:var(--h4-color); font-family:"Inter Tight"; font-weight:500; font-size:1.625rem; line-height:1.4; letter-spacing:0; } h5{ color:var(--h5-color); font-family:"Inter Tight"; font-weight:500; font-size:1.375rem; line-height:1.4; letter-spacing:0; } h6{ color:var(--h6-color); font-family:"Inter Tight"; 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 */ .fixed-backtop{ position: fixed; right: 42px; bottom:42px; margin: 0; padding: 0; z-index: 1100; width: 56px; height: 56px; color: #c72d29; cursor: pointer; transition:all 300ms ease-in ; margin-right: -100px; } .fixed-backtop.active{ margin-right: 0; } .fixed-backtop::after{ content: ""; width: 100%; height: 100%; border: 2px solid currentColor; position: absolute; left: 0; top: 0; border-radius: 50%; opacity: .3; transition:all 300ms ease-in ; } .fixed-backtop svg{ fill: transparent; transform: rotate(-90deg); } .fixed-backtop svg circle { stroke: currentColor; stroke-width: 2; fill: none; stroke-dasharray: 150px; box-sizing: border-box; stroke-dashoffset: -150px; } .fixed-backtop .backtop-arrow{ opacity: 0.6; transition:all 300ms ease-in ; } .fixed-backtop .backtop-arrow::after{ content: ""; width: 12px; height: 12px; border-top: 2px solid currentColor; border-right: 2px solid currentColor; position: absolute; left: 50%; top: 50%; transform: rotate(-45deg); margin: -8px 0 0 -5px; } .fixed-backtop .backtop-arrow::before{ content: ""; position: absolute; left: 50%; border-right: 2px solid currentColor; top: 18px; bottom: 18px; } .fixed-backtop:hover .backtop-arrow{ opacity: 1; } @media only screen and (max-width: 767px) { .fixed-backtop{ right: 15px; bottom: 15px; -webkit-transform: scale(0.714285714); transform: scale(0.714285714); -webkit-transform-origin: right bottom; transform-origin: right bottom; } }