/* ==========================================================================
   MARUTI — Elementor-built header, footer, Home, About, Contact
   Small helpers for things Elementor has no setting for (header states,
   sideways-scrolling rows, hover panels, logo ribbons, slider, patterns,
   Maruti form). Everything else is set in each Elementor element.
   ========================================================================== */

/* ---------- Header (template "Maruti: Header") ---------- */
.site-header--elementor > .elementor,
.site-header--elementor .site-header__bar,
.site-header--elementor .site-header__bar > .e-con-inner { height: 100%; }
.site-header--elementor .site-header__bar { --min-height: 0; }
.site-header--elementor .site-header__bar > .e-con-inner { align-items: center; }
.elementor-widget-maruti-nav-menu { display: flex; align-items: center; justify-content: flex-end; }
.elementor-widget-maruti-nav-menu .nav { margin-left: auto; }
.elementor-widget-maruti-site-logo .logo { display: inline-flex; }
.site-header--elementor .site-header__cta .elementor-button { white-space: nowrap; }
.site-header--editing { position: relative !important; }
.site-main--template-gap { min-height: 40vh; background: repeating-linear-gradient(45deg, #f6f6fb 0 12px, #fff 12px 24px); }
@media (max-width: 1023px) {
	.elementor-widget-maruti-nav-menu { justify-content: flex-end; }
}
@media (max-width: 767px) {
	.site-header--elementor .site-header__cta { display: none !important; }
}

/* ---------- Footer (template "Maruti: Footer") ---------- */
.site-footer-el .mx-footer-contact a { color: inherit; text-decoration: none; }
.site-footer-el .mx-footer-contact a:hover { color: #fff; }
.site-footer-el .mx-footer-contact p { margin: 0 0 6px; }

/* ---------- Shared ---------- */
/* Linked images: the link takes the widget's width so "Width 100%" works. */
.elementor .elementor-widget-image a { display: block; }

.elementor .mx-lift { transition: transform .3s var(--ease, ease), box-shadow .3s var(--ease, ease); }
.elementor .mx-lift:hover { transform: translateY(-4px); }
.elementor .mx-zoom-card { overflow: hidden; transition: transform .35s var(--ease, ease); }
.elementor a.mx-zoom-card:hover { transform: translateY(-4px); }
.elementor .mx-glass { -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.elementor .mx-contact-lines a { color: inherit; text-decoration: none; }
.elementor .mx-contact-lines a:hover { color: var(--blue, #040186); }
.elementor .elementor-widget-heading .elementor-heading-title a { color: inherit; }

/* Faint grid pattern (About hero, Quality box). */
.elementor .mx-grid-bg { position: relative; }
.elementor .mx-grid-bg::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	background-image: linear-gradient(rgba(4, 1, 134, .05) 1px, transparent 1px), linear-gradient(90deg, rgba(4, 1, 134, .05) 1px, transparent 1px);
	background-size: 48px 48px;
	border-radius: inherit;
}
.elementor .mx-grid-bg--dark::after { background-image: linear-gradient(rgba(255, 255, 255, .05) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .05) 1px, transparent 1px); }
.elementor .mx-grid-bg > * { position: relative; z-index: 1; }

/* Soft glow behind "Why choose Maruti". */
.elementor .mx-glow { position: relative; overflow: hidden; }
.elementor .mx-glow::before {
	content: "";
	position: absolute;
	left: 50%;
	top: 52%;
	width: 760px;
	height: 360px;
	transform: translate(-50%, -50%);
	background: radial-gradient(closest-side, rgba(150, 150, 255, .28), rgba(150, 150, 255, 0));
	pointer-events: none;
}

/* Text links (buttons without a background) keep their text left-aligned. */
.elementor .mx-text-link .elementor-button { text-align: left; }
.elementor .mx-text-link .elementor-button-content-wrapper { justify-content: flex-start; }
.elementor .elementor-widget-text-editor p:last-child { margin-bottom: 0; }

/* Counters: number and label centred under each other. */
.elementor .mx-stat .elementor-counter { flex-direction: column; align-items: center; text-align: center; }
.elementor .mx-stat .elementor-counter-title { text-align: center; }

/* ---------- Sideways rows (drag with the mouse, swipe on touch) ---------- */
.elementor .mx-hscroll { overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity; scrollbar-width: none; cursor: grab; padding-bottom: 6px; }
.elementor .mx-hscroll::-webkit-scrollbar { display: none; }
.elementor .mx-hscroll > .e-con { scroll-snap-align: start; }
.elementor .mx-hscroll.is-dragging { cursor: grabbing; scroll-snap-type: none; }
.elementor .mx-hscroll.is-dragging a { pointer-events: none; }
@media (min-width: 768px) {
	.elementor .mx-bleed-right { margin-right: calc(-1 * max(24px, (100vw - 1320px) / 2)); padding-right: max(24px, (100vw - 1320px) / 2); }
}

/* ---------- Quality panels: hover / focus opens a panel ---------- */
.elementor .mx-panels > .e-con.mx-panel { flex: 1 1 0; min-width: 0; text-align: center; align-items: center; transition: flex-grow .55s var(--ease, ease); cursor: pointer; }
.elementor .mx-panels > .e-con.mx-panel.is-active { flex-grow: 3.6; text-align: left; align-items: flex-start; }
.elementor .mx-panel .mx-panel__text { display: none; }
.elementor .mx-panel.is-active .mx-panel__text { display: block; animation: mx-fade .5s var(--ease, ease); }
.elementor .mx-panel.is-active .mx-panel__title .elementor-heading-title { font-size: 1.35em; }
.elementor .mx-panel .elementor-widget { width: 100%; }
@keyframes mx-fade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (max-width: 767px) {
	.elementor .mx-panels > .e-con.mx-panel { flex: 0 0 auto; text-align: left; align-items: flex-start; }
	.elementor .mx-panel .mx-panel__text { display: block; }
}

/* ---------- Logo ribbons (moving) ---------- */
.elementor .mx-ribbons { overflow: hidden; }
.elementor .mx-ribbon { width: 112%; margin-left: -6%; }
.elementor .mx-ribbon + .mx-ribbon { margin-top: -28px; }
.elementor .mx-marquee { width: max-content; }
.elementor .mx-marquee.is-ready { animation: mx-marquee 38s linear infinite; }
.elementor .mx-marquee--reverse.is-ready { animation-direction: reverse; }
.elementor .mx-ribbon:hover .mx-marquee { animation-play-state: paused; }
@keyframes mx-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .elementor .mx-marquee.is-ready { animation: none; } }

/* ---------- Testimonial slider ---------- */
.elementor .mx-slider { overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; scroll-behavior: smooth; }
.elementor .mx-slider::-webkit-scrollbar { display: none; }
.elementor .mx-slider > .e-con.mx-slide { flex: 0 0 calc((100% - 48px) / 3); scroll-snap-align: start; }
@media (max-width: 1023px) { .elementor .mx-slider > .e-con.mx-slide { flex-basis: calc((100% - 24px) / 2); } }
@media (max-width: 767px) { .elementor .mx-slider > .e-con.mx-slide { flex-basis: 86%; } }
.elementor .mx-slider-prev .elementor-button-icon,
.elementor .mx-slider-next .elementor-button-icon { margin: 0; }

/* ---------- Why Maruti steps (line between the circles) ---------- */
.elementor .mx-steps > .e-con-inner, .elementor .mx-steps { position: relative; }
.elementor .mx-step { position: relative; }
.elementor .mx-step:not(:last-child)::before {
	content: "";
	position: absolute;
	left: 21px;
	top: 60px;
	bottom: -22px;
	width: 1px;
	background: #d9dbf4;
}

/* ---------- Orbit widget (About) ---------- */
.elementor-widget-maruti-orbit .ab-trust { padding: 0; background: none; }
.elementor-widget-maruti-orbit .ab-container { padding: 0; max-width: none; }
.elementor-widget-maruti-orbit .ab-head { display: none; }

/* ---------- Latest insights widget ---------- */
.elementor-widget-maruti-posts .insights__grid { margin: 0; }

/* ---------- Maruti form ---------- */
.elementor .mf__fields { display: flex; flex-wrap: wrap; column-gap: 24px; row-gap: 22px; }
.elementor .mf__group { display: flex; flex-direction: column; gap: 10px; flex: 0 0 100%; min-width: 0; }
.elementor .mf__w-50 { flex-basis: calc(50% - 12px); }
.elementor .mf__w-33 { flex-basis: calc(33.333% - 16px); }
.elementor .mf__w-66 { flex-basis: calc(66.666% - 8px); }
.elementor .mf__w-25 { flex-basis: calc(25% - 18px); }
.elementor .mf__w-auto { flex-basis: auto; }
@media (max-width: 1023px) {
	.elementor .mf__w-t-100 { flex-basis: 100%; }
	.elementor .mf__w-t-50 { flex-basis: calc(50% - 12px); }
}
@media (max-width: 767px) {
	.elementor .mf__w-m-100, .elementor .mf__group { flex-basis: 100%; }
	.elementor .mf__w-m-50 { flex-basis: calc(50% - 12px); }
}
.elementor .mf__label { font-family: var(--font); font-size: 12px; font-weight: 500; color: #111; }
.elementor .mf__mark { color: #e5484d; }
.elementor .mf__input {
	width: 100%;
	min-height: 52px;
	padding: 13px 16px;
	font: inherit;
	font-size: 16px;
	color: #111;
	background: #f3f4f6;
	border: 1px solid #e4e6f2;
	border-radius: 6px;
	transition: border-color .2s, box-shadow .2s, background-color .2s;
}
.elementor textarea.mf__input { min-height: 98px; resize: vertical; }
.elementor .mf__input::placeholder { color: #8b8f9e; }
.elementor .mf__input:focus { outline: none; background: #fff; border-color: var(--blue, #040186); box-shadow: 0 0 0 3px rgba(4, 1, 134, .12); }
.elementor .mf__input.is-invalid { border-color: #e5484d; }
.elementor .mf__actions { margin-top: 32px; }
.elementor .mf__submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	width: 100%;
	padding: 18px 24px;
	font-family: var(--font);
	font-size: 16px;
	font-weight: 600;
	color: #fff;
	background: var(--blue, #040186);
	border: 0;
	border-radius: 6px;
	cursor: pointer;
	transition: background-color .2s;
}
.elementor .mf__w-auto .mf__submit { width: auto; }
.elementor .mf__submit:hover, .elementor .mf__submit:focus-visible { background: #03016c; }
.elementor .mf__submit:focus-visible { outline: 2px solid var(--blue, #040186); outline-offset: 3px; }
.elementor .mf__icon svg { width: 1em; height: 1em; fill: currentColor; }
.elementor .mf__note { margin-top: 18px; text-align: center; font-size: 12px; color: #5a5e70; }
.elementor .mf__note p { margin: 0; }
.elementor .mf__note a { color: inherit; }
.elementor .mf__message { margin: 0 0 20px; padding: 14px 16px; font-size: 14.5px; border-radius: 6px; }
.elementor .mf__message--ok { color: #0b5d2a; background: #e6f6ec; border: 1px solid #b7e2c5; }
.elementor .mf__message--error { color: #8a1c1c; background: #fdecec; border: 1px solid #f3c2c2; }
.elementor .mf__hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }