/*
Theme Name:   My Dentist SEO Services - Dark Premium
Theme URI:    https://mydentalseoservices.com
Author:       My Dentist SEO Services
Description:  Dark premium theme for Elementor (Option 3). Same structure and class names as the original MDS theme: top bar, mega menu, CTA band and 5-column footer. Every class starts with "mds-".
Version: 2.3.1
Requires at least: 6.0
Requires PHP: 7.4
License:      GPL-2.0-or-later
Text Domain:  mds
*/

/* =====================================================================
   IS FILE ME KYA HAI (what is in this file)

    1. COLORS & SIZES ........ sab rang aur size yahan — yahin badlo
    2. BASIC STYLES .......... page background, fonts, links
    3. TOP BAR ............... upar wali patli strip (phone + email)
    4. HEADER ................ logo + menu + green button
    5. LOGO .................. logo ka white box aur crop
    6. MAIN MENU ............. desktop menu (pill shape)
    7. HEADER BUTTON ......... green "Free SEO Audit" button
    8. MEGA MENU ............. dropdown panel (Dental SEO, AI SEO, Markets)
    9. MOBILE MENU BUTTON .... hamburger
   10. CTA BAND .............. footer ke upar wala box
   11. FOOTER ................ link columns + copyright
   12. ELEMENTOR HELPERS ..... section / card / button classes
   13. BLOG & NORMAL PAGES
   14. SCREEN SIZES .......... laptop, tablet, phone
   ===================================================================== */


/* =====================================================================
   1. COLORS & SIZES
   Sirf yahan value badlo — poori website update ho jayegi.
   Elementor me bhi use kar sakte ho:  color: var(--mds-green);
   ===================================================================== */
:root {
	/* ---- Backgrounds (dark se light) ---- */
	--mds-bg-darkest:   #050913;   /* footer */
	--mds-bg:           #070D1A;   /* main page background */
	--mds-bg-alt:       #0B1324;   /* alternate section background */
	--mds-panel:        #0E172B;   /* cards, dropdown, boxes */
	--mds-panel-hover:  #13213D;   /* card / link hover */

	/* ---- Lines ---- */
	--mds-line:         #1D2A45;   /* borders, dividers */
	--mds-line-strong:  #2C3D61;   /* outline buttons, stronger borders */

	/* ---- Text ---- */
	--mds-white:        #FFFFFF;   /* headings */
	--mds-ink:          #DCE3EE;   /* normal text */
	--mds-mut:          #A7B4C8;   /* grey helper text */
	--mds-mut-dark:     #7F8DA6;   /* very small / copyright text */

	/* ---- Brand green ---- */
	--mds-green:        #34D399;   /* buttons, highlights, icons */
	--mds-green-light:  #6EE7B7;   /* button hover */
	--mds-green-soft:   rgba(52, 211, 153, .12);  /* green tint backgrounds */
	--mds-on-green:     #062018;   /* text on top of green */

	/* ---- Fonts (loaded in functions.php) ---- */
	--mds-head: 'Sora', system-ui, sans-serif;     /* headings */
	--mds-body: 'Figtree', system-ui, sans-serif;  /* normal text */

	/* ---- Sizes ---- */
	--mds-container:          1240px;  /* max content width */
	--mds-r:                  16px;    /* card corner round */
	--header-height-desktop:  88px;
	--header-height-mobile:   68px;
	--topbar-height:          38px;

	/* ---- Logo size (logo ki height, white box ke andar) ---- */
	--logo-height-desktop: 56px;
	--logo-height-mobile:  44px;
	--logo-height-footer:  60px;

	/* ---- Logo crop (sirf default logo file ke liye) ----
	   dentist-logo.webp me charon taraf khali space hai.
	   zoom = kitna bada karke dikhana, crop = kitna kaatna.
	   Trimmed logo upload karoge to ye apply nahi hoga. */
	--logo-zoom:       1.9;
	--logo-ratio:      1.5;
	--logo-crop-left:  .09;
	--logo-crop-right: .04;
}


/* =====================================================================
   2. BASIC STYLES
   ===================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
	margin: 0;
	background: var(--mds-bg);
	color: var(--mds-ink);
	font-family: var(--mds-body);
	font-size: 17px;
	line-height: 1.7;
	-webkit-font-smoothing: antialiased;
}
body.mds-no-scroll { overflow: hidden; }   /* page stops scrolling while mobile menu is open */

img { max-width: 100%; height: auto; display: block; }
a { color: var(--mds-green); }
a:hover { color: var(--mds-green-light); }
::selection { background: var(--mds-green); color: var(--mds-on-green); }

h1, h2, h3, h4 {
	font-family: var(--mds-head);
	color: var(--mds-white);
	line-height: 1.15;
	letter-spacing: -.025em;
	margin: 0 0 .5em;
}
h1 { font-size: clamp(2.3rem, 5vw, 4rem); font-weight: 700; }
h2 { font-size: clamp(1.8rem, 3.4vw, 2.6rem); font-weight: 700; }
h3 { font-size: 1.2rem; font-weight: 600; }

/* Centre box for content */
.mds-wrap { max-width: var(--mds-container); margin: 0 auto; padding: 0 24px; }

/* Green word in a heading:  <span class="mds-green-text">Patients</span> */
.mds-green-text { color: var(--mds-green); }

/* Keyboard focus ring */
a:focus-visible, button:focus-visible { outline: 2px solid var(--mds-green); outline-offset: 3px; border-radius: 6px; }

/* "Skip to content" link (only visible when using keyboard) */
.mds-skip { position: absolute; left: -9999px; }
.mds-skip:focus { left: 12px; top: 12px; z-index: 9999; background: var(--mds-green); color: var(--mds-on-green); padding: 10px 16px; border-radius: 8px; font-weight: 700; }

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after { transition: none !important; animation: none !important; }
}


/* =====================================================================
   3. TOP BAR (thin strip with message + phone + email)
   ===================================================================== */
.mds-topbar {
	background: var(--mds-bg-darkest);
	border-bottom: 1px solid var(--mds-line);
	color: var(--mds-mut);
	font-size: .84rem;
	line-height: 1.3;
}
.mds-topbar-inner {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 16px;
	min-height: var(--topbar-height);
}
.mds-topbar-message { margin: 0; display: flex; align-items: center; gap: 10px; }

/* small glowing green dot before the message */
.mds-topbar-dot {
	width: 7px; height: 7px; border-radius: 50%;
	background: var(--mds-green);
	box-shadow: 0 0 0 4px var(--mds-green-soft);
	flex: 0 0 auto;
}
.mds-topbar-contacts { display: flex; align-items: center; gap: 22px; }
.mds-topbar-link {
	display: inline-flex; align-items: center; gap: 8px;
	color: var(--mds-ink);
	text-decoration: none;
	white-space: nowrap;
	transition: color .15s;
}
.mds-topbar-link:hover { color: var(--mds-green); }
.mds-topbar-link svg { color: var(--mds-green); flex: 0 0 auto; }


/* =====================================================================
   4. HEADER (sticky dark glass bar)
   ===================================================================== */
.mds-header {
	position: sticky;
	top: var(--wp-admin--admin-bar--height, 0px);  /* WP admin bar ke neeche rehta hai */
	z-index: 999;
	background: rgba(7, 13, 26, .82);
	backdrop-filter: saturate(140%) blur(14px);
	-webkit-backdrop-filter: saturate(140%) blur(14px);
	border-bottom: 1px solid var(--mds-line);
	transition: box-shadow .2s, background .2s;
}
/* after scrolling a little: darker + shadow */
.mds-header.is-scrolled {
	background: rgba(7, 13, 26, .94);
	box-shadow: 0 12px 30px -12px rgba(0, 0, 0, .7);
}
.mds-header-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	height: var(--header-height-desktop);
}


/* =====================================================================
   5. LOGO
   .mds-logo-box  = white rounded box (logo ke colours dark par dikhein)
   .mds-logo-link = logo ka visible area
   .mds-logo-img  = image
   ===================================================================== */
.mds-header-logo { display: flex; align-items: center; flex: 0 0 auto; }

.mds-logo-box {
	display: inline-flex;
	align-items: center;
	background: #FFFFFF;
	border-radius: 12px;
	padding: 4px 12px;
	line-height: 0;
	box-shadow: 0 0 0 1px rgba(255, 255, 255, .08), 0 8px 24px -10px rgba(52, 211, 153, .35);
}
/* Customizer me "white box" OFF kiya ho to */
.mds-logo-box-off { background: transparent; padding: 0; box-shadow: none; }

.mds-logo-link {
	--logo-height: var(--logo-height-desktop);
	display: inline-block;
	height: var(--logo-height);
	line-height: 0;
	overflow: hidden;
}
.mds-logo-img { height: var(--logo-height); width: auto; max-width: none; display: block; }

/* default logo file: zoom + crop the empty space */
.mds-logo-img.mds-logo-img-padded {
	height: calc(var(--logo-height) * var(--logo-zoom));
	margin-top: calc(var(--logo-height) * (var(--logo-zoom) - 1) / -2);
	margin-left: calc(var(--logo-height) * var(--logo-zoom) * var(--logo-ratio) * var(--logo-crop-left) * -1);
	margin-right: calc(var(--logo-height) * var(--logo-zoom) * var(--logo-ratio) * var(--logo-crop-right) * -1);
	mix-blend-mode: multiply;  /* image ka grey background white box me mil jata hai */
}
.mds-logo-box-off .mds-logo-img-padded { mix-blend-mode: normal; }


/* =====================================================================
   6. MAIN MENU (desktop) — pill-shaped box in the middle
   ===================================================================== */
.mds-nav { display: flex; align-items: center; margin-left: auto; }

.mds-nav-menu {
	list-style: none;
	margin: 0;
	padding: 5px;
	display: flex;
	align-items: center;
	gap: 2px;
	background: var(--mds-panel);
	border: 1px solid var(--mds-line);
	border-radius: 999px;
}
.mds-nav-menu > li { display: flex; align-items: center; }

/* menu links + dropdown buttons (same look) */
.mds-nav-menu > li > a,
.mds-nav-dropdown-btn {
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 10px 15px;
	background: none;
	border: 0;
	border-radius: 999px;
	font-family: var(--mds-body);
	font-weight: 500;
	font-size: .93rem;
	line-height: 1;
	color: var(--mds-ink);
	text-decoration: none;
	cursor: pointer;
	white-space: nowrap;
	transition: color .15s, background .15s;
}
/* hover / open / current page */
.mds-nav-menu > li > a:hover,
.mds-nav-menu > li.current-menu-item > a,
.mds-nav-dropdown-btn:hover,
.mds-nav-item-has-mega.is-open > .mds-nav-dropdown-btn {
	background: var(--mds-panel-hover);
	color: var(--mds-white);
}
.mds-nav-dropdown-btn svg { transition: transform .2s; opacity: .75; }
.mds-nav-item-has-mega.is-open > .mds-nav-dropdown-btn > svg:last-child { transform: rotate(180deg); }
.mds-nav-dropdown-btn > svg:first-child { color: var(--mds-green); opacity: 1; }  /* AI SEO spark icon */

/* WordPress menu (if you assign one): simple dropdowns */
.mds-nav-menu > li.menu-item-has-children { position: relative; }
.mds-nav-menu .sub-menu {
	list-style: none; margin: 0; padding: 8px;
	position: absolute; top: calc(100% + 6px);
	min-width: 240px;
	background: var(--mds-panel);
	border: 1px solid var(--mds-line);
	border-radius: var(--mds-r);
	box-shadow: 0 24px 48px -12px rgba(0, 0, 0, .7);
	display: none;
}
.mds-nav-menu > li:hover > .sub-menu,
.mds-nav-menu > li:focus-within > .sub-menu { display: block; }
.mds-nav-menu .sub-menu a { display: block; padding: 10px 14px; border-radius: 10px; color: var(--mds-ink); text-decoration: none; font-size: .93rem; }
.mds-nav-menu .sub-menu a:hover { background: var(--mds-panel-hover); color: var(--mds-green); }


/* =====================================================================
   7. HEADER BUTTON (green "Free SEO Audit")
   ===================================================================== */
.mds-header-btn ul { list-style: none; margin: 0; padding: 0; }
.mds-header-btn a {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 13px 22px;
	border-radius: 999px;
	background: var(--mds-green);
	color: var(--mds-on-green);
	font-weight: 700;
	font-size: .95rem;
	line-height: 1.2;
	text-decoration: none;
	white-space: nowrap;
	box-shadow: 0 8px 24px -8px rgba(52, 211, 153, .55);
	transition: background .15s, transform .15s, box-shadow .15s;
}
.mds-header-btn a:hover {
	background: var(--mds-green-light);
	color: var(--mds-on-green);
	transform: translateY(-1px);
	box-shadow: 0 12px 28px -8px rgba(52, 211, 153, .7);
}
.mds-header-btn a svg { transition: transform .15s; }
.mds-header-btn a:hover svg { transform: translateX(3px); }
.mds-header-btn-desktop { display: flex; align-items: center; flex: 0 0 auto; }
.mds-header-btn-mobile { display: none; }


/* =====================================================================
   8. MEGA MENU (big dropdown panel)
   ===================================================================== */
.mds-mega-menu {
	display: none;
	position: absolute;
	left: 50%;
	top: calc(100% + 8px);
	transform: translateX(-50%);
	width: min(1240px, calc(100vw - 32px));
	background: var(--mds-bg-alt);
	border: 1px solid var(--mds-line);
	border-radius: 22px;
	box-shadow: 0 40px 80px -20px rgba(0, 0, 0, .8);
	max-height: calc(100vh - 150px);
	overflow: auto;
}
/* invisible bridge: mouse header se panel tak jaate waqt menu band na ho */
.mds-mega-menu::before { content: ""; position: absolute; left: 0; right: 0; top: -12px; height: 12px; }
.mds-nav-item-has-mega.is-open > .mds-mega-menu { display: block; animation: mds-drop .18s ease-out; }
@keyframes mds-drop { from { opacity: 0; transform: translate(-50%, 6px); } to { opacity: 1; transform: translate(-50%, 0); } }

.mds-mega-menu-grid {
	display: grid;
	grid-template-columns: repeat(var(--columns), 1fr) minmax(260px, .9fr);
	gap: 8px;
	padding: 18px;
}
.mds-mega-menu-grid-no-promo { grid-template-columns: repeat(var(--columns), 1fr); }

/* one column of links */
.mds-mega-column { padding: 14px 10px 6px; }
.mds-mega-column-title {
	display: flex;
	align-items: center;
	gap: 10px;
	font-family: var(--mds-head);
	font-weight: 600;
	font-size: .7rem;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--mds-mut);
	padding: 0 10px 12px;
	margin-bottom: 6px;
	border-bottom: 1px solid var(--mds-line);
}
.mds-mega-column-icon {
	width: 28px; height: 28px;
	border-radius: 8px;
	background: var(--mds-green-soft);
	color: var(--mds-green);
	display: flex; align-items: center; justify-content: center;
}
.mds-mega-links { list-style: none; margin: 0; padding: 0; }

/* one link inside the mega menu: title + small description */
.mds-mega-link {
	display: block;
	padding: 10px;
	border-radius: 12px;
	text-decoration: none;
	transition: background .15s;
}
.mds-mega-link:hover { background: var(--mds-panel-hover); }
.mds-mega-link-title {
	display: flex;
	align-items: center;
	gap: 6px;
	font-family: var(--mds-head);
	font-weight: 600;
	font-size: .92rem;
	line-height: 1.3;
	color: var(--mds-white);
	transition: color .15s;
}
.mds-mega-link-title svg { opacity: 0; transform: translateX(-4px); transition: opacity .15s, transform .15s; color: var(--mds-green); }
.mds-mega-link:hover .mds-mega-link-title { color: var(--mds-green); }
.mds-mega-link:hover .mds-mega-link-title svg { opacity: 1; transform: translateX(0); }
.mds-mega-link-desc { display: block; font-size: .83rem; line-height: 1.45; color: var(--mds-mut); margin-top: 3px; }

/* promo box on the right */
.mds-mega-promo {
	position: relative;
	overflow: hidden;
	border-radius: 16px;
	padding: 26px;
	background: var(--mds-panel);
	border: 1px solid rgba(52, 211, 153, .35);
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 24px;
}
/* soft green glow in the corner */
.mds-mega-promo::before {
	content: "";
	position: absolute;
	width: 240px; height: 240px;
	right: -90px; top: -90px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(52, 211, 153, .28), transparent 70%);
	pointer-events: none;
}
.mds-mega-promo > * { position: relative; }
.mds-mega-promo-label {
	display: inline-block;
	font-family: var(--mds-head);
	font-weight: 600;
	font-size: .68rem;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--mds-green);
	background: var(--mds-green-soft);
	padding: 6px 10px;
	border-radius: 999px;
}
.mds-mega-promo-title { color: var(--mds-white); font-size: 1.35rem; line-height: 1.25; margin: 14px 0 10px; }
.mds-mega-promo-text { margin: 0; font-size: .9rem; line-height: 1.55; color: var(--mds-mut); }
.mds-mega-promo-link {
	align-self: flex-start;
	display: inline-flex; align-items: center; gap: 8px;
	padding: 11px 18px;
	border-radius: 999px;
	background: var(--mds-green);
	color: var(--mds-on-green);
	font-weight: 700;
	font-size: .9rem;
	text-decoration: none;
	transition: background .15s;
}
.mds-mega-promo-link:hover { background: var(--mds-green-light); color: var(--mds-on-green); }

/* strip at the bottom of the dropdown */
.mds-mega-bottom-bar {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 16px;
	padding: 14px 28px;
	border-top: 1px solid var(--mds-line);
	background: var(--mds-bg);
}
.mds-mega-bottom-bar p { margin: 0; font-size: .9rem; color: var(--mds-mut); }
.mds-mega-bottom-btn {
	display: inline-block;
	padding: 10px 20px;
	border-radius: 999px;
	border: 1px solid var(--mds-line-strong);
	color: var(--mds-white);
	font-weight: 600;
	font-size: .9rem;
	text-decoration: none;
	transition: border-color .15s, color .15s;
}
.mds-mega-bottom-btn:hover { border-color: var(--mds-green); color: var(--mds-green); }


/* =====================================================================
   9. MOBILE MENU BUTTON (hamburger) — hidden on desktop
   ===================================================================== */
.mds-menu-toggle {
	display: none;
	align-items: center;
	gap: 8px;
	background: var(--mds-panel);
	border: 1px solid var(--mds-line);
	border-radius: 12px;
	padding: 11px 14px;
	font-family: var(--mds-body);
	font-weight: 600;
	font-size: .9rem;
	line-height: 1;
	color: var(--mds-white);
	cursor: pointer;
}
.mds-menu-toggle-bars { display: flex; flex-direction: column; justify-content: space-between; width: 18px; height: 12px; }
.mds-menu-toggle-bars span { display: block; height: 2px; border-radius: 2px; background: currentColor; transition: transform .2s, opacity .2s; }
/* menu open → hamburger becomes "X" */
.menu-is-open .mds-menu-toggle-bars span:nth-child(1) { transform: translateY(5px) rotate(45deg); }
.menu-is-open .mds-menu-toggle-bars span:nth-child(2) { opacity: 0; }
.menu-is-open .mds-menu-toggle-bars span:nth-child(3) { transform: translateY(-5px) rotate(-45deg); }


/* =====================================================================
   10. CTA BAND (box above the footer)
   Customizer se band ON/OFF kar sakte ho. Band ON hai to page ke end me
   alag CTA section mat banana.
   ===================================================================== */
.mds-cta-band { background: var(--mds-bg); padding: 40px 0 96px; }

.mds-cta-band-box {
	position: relative;
	overflow: hidden;
	text-align: center;
	padding: 72px 32px;
	border-radius: 28px;
	background-color: var(--mds-bg-alt);
	/* thin grid lines pattern */
	background-image:
		linear-gradient(rgba(255, 255, 255, .035) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255, 255, 255, .035) 1px, transparent 1px);
	background-size: 44px 44px;
	border: 1px solid rgba(52, 211, 153, .35);
}
/* green glow at the top */
.mds-cta-band-box::before {
	content: "";
	position: absolute;
	left: 50%; top: -260px;
	width: 640px; height: 420px;
	transform: translateX(-50%);
	border-radius: 50%;
	background: radial-gradient(closest-side, rgba(52, 211, 153, .30), transparent);
	pointer-events: none;
}
.mds-cta-band-box > * { position: relative; }

.mds-cta-band-label {
	display: inline-block;
	font-family: var(--mds-head);
	font-size: .72rem;
	font-weight: 600;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--mds-green);
	background: var(--mds-green-soft);
	border: 1px solid rgba(52, 211, 153, .3);
	padding: 7px 14px;
	border-radius: 999px;
	margin-bottom: 20px;
}
.mds-cta-band h2 { color: var(--mds-white); max-width: 760px; margin: 0 auto 16px; }
.mds-cta-band p { max-width: 620px; margin: 0 auto; color: var(--mds-mut); font-size: 1.05rem; }
.mds-cta-band-buttons { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 32px; }
.mds-cta-band-btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 16px 28px;
	border-radius: 999px;
	font-weight: 700;
	font-size: 1rem;
	text-decoration: none;
	transition: background .15s, color .15s, border-color .15s, transform .15s;
}
.mds-cta-band-btn-green {
	background: var(--mds-green);
	color: var(--mds-on-green);
	box-shadow: 0 10px 30px -8px rgba(52, 211, 153, .6);
}
.mds-cta-band-btn-green:hover { background: var(--mds-green-light); color: var(--mds-on-green); transform: translateY(-2px); }
.mds-cta-band-btn-outline { border: 1px solid var(--mds-line-strong); color: var(--mds-white); }
.mds-cta-band-btn-outline:hover { border-color: var(--mds-green); color: var(--mds-green); }


/* =====================================================================
   11. FOOTER
   ===================================================================== */
.mds-footer {
	background: var(--mds-bg-darkest);
	border-top: 1px solid var(--mds-line);
	color: var(--mds-mut);
	padding: 72px 0 28px;
	font-size: .93rem;
}
.mds-footer a { color: var(--mds-mut); text-decoration: none; transition: color .15s; }
.mds-footer a:hover { color: var(--mds-green); }

.mds-footer-columns { display: grid; grid-template-columns: 1.5fr repeat(4, 1fr); gap: 40px; }

/* column 1 */
.mds-footer-logo { margin-bottom: 22px; }
.mds-footer-logo .mds-logo-link { --logo-height: var(--logo-height-footer); }
.mds-footer-about-text { margin: 0 0 20px; line-height: 1.7; max-width: 320px; }
.mds-footer-contacts { display: flex; flex-direction: column; gap: 10px; margin-bottom: 22px; }
.mds-footer .mds-footer-contact { display: inline-flex; align-items: center; gap: 10px; color: var(--mds-ink); }
.mds-footer-contact-icon {
	width: 32px; height: 32px;
	border-radius: 9px;
	background: var(--mds-panel);
	border: 1px solid var(--mds-line);
	color: var(--mds-green);
	display: inline-flex; align-items: center; justify-content: center;
	flex: 0 0 auto;
}
.mds-footer .mds-footer-audit-link {
	display: inline-flex; align-items: center; gap: 8px;
	padding: 10px 18px;
	border-radius: 999px;
	border: 1px solid rgba(52, 211, 153, .4);
	color: var(--mds-green);
	font-weight: 600;
}
.mds-footer .mds-footer-audit-link:hover { background: var(--mds-green); color: var(--mds-on-green); }

/* link columns */
.mds-footer-heading {
	font-family: var(--mds-head);
	font-weight: 600;
	font-size: .74rem;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--mds-white);
	margin: 0 0 18px;
}
.mds-footer-subheading {
	font-family: var(--mds-head);
	font-weight: 600;
	font-size: .7rem;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--mds-green);
	margin: 26px 0 14px;
	padding-top: 22px;
	border-top: 1px solid var(--mds-line);
}
.mds-footer-links { list-style: none; margin: 0; padding: 0; }
.mds-footer-links li { margin-bottom: 9px; line-height: 1.45; }

/* bottom line */
.mds-footer-copyright {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 12px 32px;
	flex-wrap: wrap;
	border-top: 1px solid var(--mds-line);
	margin-top: 56px;
	padding-top: 22px;
	font-size: .84rem;
	color: var(--mds-mut-dark);
}
.mds-footer-copyright p { margin: 0; max-width: 820px; }
.mds-footer .mds-back-to-top { display: inline-flex; align-items: center; gap: 6px; color: var(--mds-ink); font-weight: 600; white-space: nowrap; }


/* =====================================================================
   12. ELEMENTOR HELPERS
   Elementor: Container > Advanced > CSS Classes me class name likho.

   SECTIONS (background):
     mds-sec mds-sec-dark ........ main dark background
     mds-sec mds-sec-alt ......... thoda light dark (alternate)
     mds-sec mds-sec-panel ....... card colour background
     mds-sec mds-sec-darkest ..... sabse dark
     mds-sec mds-sec-hero ........ hero (dark + green glow)
   Purani theme ke names bhi kaam karte hain:
     mds-sec-white = dark · mds-sec-ice = alt · mds-sec-navy = panel · mds-sec-navy-deep = darkest
   ===================================================================== */
.mds-sec { padding-top: 96px; padding-bottom: 96px; }
.mds-sec.mds-sec-dark,     .elementor-element.mds-sec-dark,     .mds-sec.mds-sec-white,     .elementor-element.mds-sec-white     { background-color: var(--mds-bg) !important; }
.mds-sec.mds-sec-alt,      .elementor-element.mds-sec-alt,      .mds-sec.mds-sec-ice,       .elementor-element.mds-sec-ice       { background-color: var(--mds-bg-alt) !important; border-top: 1px solid var(--mds-line); border-bottom: 1px solid var(--mds-line); }
.mds-sec.mds-sec-panel,    .elementor-element.mds-sec-panel,    .mds-sec.mds-sec-navy,      .elementor-element.mds-sec-navy      { background-color: var(--mds-panel) !important; }
.mds-sec.mds-sec-darkest,  .elementor-element.mds-sec-darkest,  .mds-sec.mds-sec-navy-deep, .elementor-element.mds-sec-navy-deep { background-color: var(--mds-bg-darkest) !important; }
.mds-sec.mds-sec-hero, .elementor-element.mds-sec-hero, .e-con.e-parent.mds-sec-hero {
	background-color: var(--mds-bg) !important;
	background-image: radial-gradient(60% 50% at 50% 0%, rgba(52, 211, 153, .16), transparent 70%) !important;
}
.mds-sec.e-con, .mds-sec.elementor-section { width: 100%; }
.mds-sec .elementor-widget-container { background: transparent; }

/* Text colours inside every section */
.mds-sec :is(h1, h2, h3, h4, .elementor-heading-title) { color: var(--mds-white); }
.mds-sec :is(p, li) { color: var(--mds-ink); }

/* Small label above a heading */
.mds-eyebrow {
	display: inline-block;
	color: var(--mds-green);
	background: var(--mds-green-soft);
	border: 1px solid rgba(52, 211, 153, .3);
	font-family: var(--mds-head);
	font-weight: 600;
	font-size: .72rem;
	letter-spacing: .14em;
	text-transform: uppercase;
	padding: 6px 12px;
	border-radius: 999px;
	margin-bottom: 14px;
}

/* BUTTONS — Button widget > Advanced > CSS Classes */
.mds-btn, .mds-btn-green a, .mds-btn-outline a, .mds-btn-white a,
.mds-btn-green .elementor-button, .mds-btn-outline .elementor-button, .mds-btn-white .elementor-button {
	display: inline-flex; align-items: center; justify-content: center; gap: 8px;
	padding: 15px 28px;
	border-radius: 999px !important;
	font-family: var(--mds-body);
	font-weight: 700;
	text-decoration: none;
	border: 1px solid transparent;
	transition: background .15s, color .15s, border-color .15s, transform .15s;
}
.mds-btn-green a, .mds-btn-green .elementor-button { background: var(--mds-green) !important; color: var(--mds-on-green) !important; box-shadow: 0 10px 28px -8px rgba(52, 211, 153, .55); }
.mds-btn-green a:hover, .mds-btn-green .elementor-button:hover { background: var(--mds-green-light) !important; transform: translateY(-2px); }
.mds-btn-outline a, .mds-btn-outline .elementor-button { background: transparent !important; border-color: var(--mds-line-strong) !important; color: var(--mds-white) !important; }
.mds-btn-outline a:hover, .mds-btn-outline .elementor-button:hover { border-color: var(--mds-green) !important; color: var(--mds-green) !important; }
.mds-btn-white a, .mds-btn-white .elementor-button { background: var(--mds-white) !important; color: var(--mds-bg) !important; }
.mds-btn-white a:hover, .mds-btn-white .elementor-button:hover { background: var(--mds-green) !important; color: var(--mds-on-green) !important; }

/* CARDS — Container > Advanced > CSS Classes */
.mds-card {
	background: var(--mds-panel);
	border: 1px solid var(--mds-line);
	border-radius: var(--mds-r);
	padding: 28px;
	transition: border-color .2s, transform .2s, background .2s;
}
.mds-card:hover { border-color: rgba(52, 211, 153, .45); transform: translateY(-3px); }
.mds-card-navy { background: var(--mds-bg-alt) !important; border: 1px solid var(--mds-line); border-radius: var(--mds-r); padding: 28px; }
.mds-card-navy :is(h2, h3, h4, .elementor-heading-title) { color: var(--mds-green) !important; }
.mds-card-mint { background: var(--mds-green-soft); border: 1px solid rgba(52, 211, 153, .3); border-radius: var(--mds-r); padding: 28px; }
.mds-card-glow { background: var(--mds-panel); border: 1px solid rgba(52, 211, 153, .45); border-radius: var(--mds-r); padding: 28px; box-shadow: 0 0 0 4px var(--mds-green-soft); }

/* IMAGE with round corners + border */
.mds-img img, img.mds-img { border-radius: var(--mds-r); width: 100%; height: auto; border: 1px solid var(--mds-line); }

/* Number circle for process steps */
.mds-step-num {
	width: 46px; height: 46px; border-radius: 50%;
	background: var(--mds-green); color: var(--mds-on-green);
	display: grid; place-items: center;
	font-family: var(--mds-head); font-weight: 700;
}

/* LIST with green ticks — Icon List / Text Editor */
.mds-ticks ul, ul.mds-ticks { list-style: none; padding: 0; margin: 12px 0 0; }
.mds-ticks li { position: relative; padding-left: 30px; margin-bottom: 10px; }
.mds-ticks li::before {
	content: ""; position: absolute; left: 0; top: .35em;
	width: 18px; height: 18px; border-radius: 50%;
	background: var(--mds-green-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2334D399' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5L20 7'/%3E%3C/svg%3E") center / 10px no-repeat;
}

/* QUOTE with green left line */
.mds-quote { border-left: 3px solid var(--mds-green); padding: 6px 0 6px 22px; font-family: var(--mds-head); font-size: 1.15rem; font-weight: 600; color: var(--mds-white); }

/* TABLE — Text Editor with an HTML table */
.mds-table { overflow-x: auto; }
.mds-table table { width: 100%; border-collapse: collapse; border: 1px solid var(--mds-line); border-radius: var(--mds-r); overflow: hidden; }
.mds-table th { background: var(--mds-panel); color: var(--mds-mut); text-align: left; font-family: var(--mds-head); font-size: .8rem; letter-spacing: .08em; text-transform: uppercase; }
.mds-table th, .mds-table td { padding: 16px 20px; border-bottom: 1px solid var(--mds-line); }
.mds-table td:first-child { font-weight: 600; color: var(--mds-white); }

/* PILL tags */
.mds-pill { display: inline-block; padding: 8px 16px; border-radius: 999px; background: var(--mds-panel); border: 1px solid var(--mds-line); color: var(--mds-ink); font-weight: 600; font-size: .9rem; margin: 0 8px 8px 0; }

/* FAQ — Accordion / Toggle widget */
.mds-faq .elementor-accordion-item, .mds-faq .elementor-toggle-item { background: var(--mds-panel); border: 1px solid var(--mds-line) !important; border-radius: 14px; margin-bottom: 10px; overflow: hidden; }
.mds-faq .elementor-tab-title { border: 0 !important; }
.mds-faq .elementor-tab-title a, .mds-faq .elementor-tab-title { font-family: var(--mds-head); font-weight: 600; color: var(--mds-white) !important; }
.mds-faq .elementor-tab-title.elementor-active a { color: var(--mds-green) !important; }
.mds-faq .elementor-tab-content { color: var(--mds-mut); border: 0 !important; }

/* Elementor: no stray gap above the first section */
main#content { display: block; margin: 0; padding: 0; }
main#content > .elementor,
main#content > .elementor > .e-con:first-child,
main#content > .elementor > .elementor-section-wrap > .elementor-section:first-child { margin-top: 0; }

/* Elementor editor: sticky header must not cover the "Add section" area */
.elementor-editor-active .mds-header, .elementor-editor-preview .mds-header { position: relative !important; top: auto !important; z-index: 1 !important; }
.elementor-editor-active .mds-topbar { display: none; }
.elementor-editor-active .elementor-add-section { margin: 0 auto; }


/* =====================================================================
   13. BLOG & NORMAL PAGES (not built with Elementor)
   ===================================================================== */
.mds-page-pad { padding: 80px 24px; max-width: 880px; }
.mds-page-pad h1 { margin-bottom: 24px; }
.mds-post { margin-bottom: 34px; padding-bottom: 28px; border-bottom: 1px solid var(--mds-line); }
.mds-post h2 a { text-decoration: none; color: var(--mds-white); }
.mds-post h2 a:hover { color: var(--mds-green); }
.mds-page-pad .nav-links { display: flex; gap: 8px; }
.mds-page-pad .page-numbers { padding: 8px 14px; border: 1px solid var(--mds-line); border-radius: 10px; color: var(--mds-ink); text-decoration: none; }
.mds-page-pad .page-numbers.current { background: var(--mds-green); color: var(--mds-on-green); border-color: var(--mds-green); }


/* =====================================================================
   14. SCREEN SIZES
   ===================================================================== */

/* ---------- Small laptop (up to 1240px): menu thoda tight ---------- */
@media (max-width: 1240px) {
	.mds-header-inner { gap: 14px; }
	.mds-nav-menu > li > a, .mds-nav-dropdown-btn { padding: 10px 11px; font-size: .88rem; }
	.mds-header-btn-desktop a { padding: 12px 18px; font-size: .9rem; }
	.mds-footer-columns { grid-template-columns: 1.3fr repeat(4, 1fr); gap: 28px; }
}

/* ---------- Tablet & mobile (up to 1100px): hamburger menu ---------- */
@media (max-width: 1100px) {
	.mds-sec { padding-top: 64px; padding-bottom: 64px; }

	/* top bar: sirf phone + email */
	.mds-topbar-message { display: none; }
	.mds-topbar-inner { justify-content: center; }

	/* header */
	.mds-header-inner { height: var(--header-height-mobile); gap: 12px; }
	.mds-header .mds-logo-link { --logo-height: var(--logo-height-mobile); }
	.mds-menu-toggle { display: inline-flex; margin-left: auto; }
	.mds-header-btn-desktop { display: none; }

	/* menu panel under the header */
	.mds-nav {
		display: none;
		position: absolute;
		left: 0; right: 0; top: 100%;
		flex-direction: column;
		align-items: stretch;
		margin: 0;
		background: var(--mds-bg);
		border-bottom: 1px solid var(--mds-line);
		box-shadow: 0 24px 40px -10px rgba(0, 0, 0, .8);
		padding: 8px 20px 24px;
		max-height: calc(100vh - var(--header-height-mobile) - var(--topbar-height));
		overflow: auto;
	}
	.mds-nav.is-open { display: flex; }
	.mds-nav-menu { flex-direction: column; align-items: stretch; gap: 0; padding: 0; background: none; border: 0; border-radius: 0; }
	.mds-nav-menu > li { flex-direction: column; align-items: stretch; border-bottom: 1px solid var(--mds-line); }
	.mds-nav-menu > li > a, .mds-nav-dropdown-btn {
		width: 100%;
		justify-content: space-between;
		padding: 17px 4px;
		border-radius: 0;
		font-size: 1rem;
		font-weight: 600;
		color: var(--mds-white);
	}
	.mds-nav-menu > li > a:hover, .mds-nav-dropdown-btn:hover,
	.mds-nav-item-has-mega.is-open > .mds-nav-dropdown-btn { background: none; color: var(--mds-green); }
	.mds-nav-dropdown-label { margin-right: auto; }

	/* mega menu becomes a simple list */
	.mds-mega-menu { position: static; transform: none; width: auto; border: 0; box-shadow: none; max-height: none; border-radius: 0; background: none; overflow: visible; }
	.mds-mega-menu::before { display: none; }
	.mds-nav-item-has-mega.is-open > .mds-mega-menu { animation: none; }
	.mds-mega-menu-grid, .mds-mega-menu-grid-no-promo { grid-template-columns: 1fr; padding: 0 0 16px; gap: 10px; }
	.mds-mega-column { padding: 6px 0; }
	.mds-mega-column-title { padding: 0 0 10px; }
	.mds-mega-link { padding: 10px 8px; }
	.mds-mega-link-title svg { display: none; }
	.mds-mega-bottom-bar { display: none; }
	.mds-mega-promo { padding: 20px; }

	/* WordPress dropdowns (assigned menu) */
	.mds-nav-menu .sub-menu { position: static; display: block; box-shadow: none; border: 0; background: none; padding: 0 0 12px 12px; }

	.mds-header-btn-mobile { display: block; margin-top: 18px; }
	.mds-header-btn-mobile a { display: flex; justify-content: center; }

	/* footer: 3 columns, about on top */
	.mds-footer-columns { grid-template-columns: repeat(2, 1fr); }
	.mds-footer-about { grid-column: 1 / -1; }
	.mds-footer-about-text { max-width: 520px; }
}

/* ---------- Phone (up to 640px) ---------- */
@media (max-width: 640px) {
	.mds-wrap { padding: 0 16px; }
	.mds-topbar { font-size: .8rem; }
	/* chhoti screen par email ka sirf icon dikhega (phone poora dikhega) */
	.mds-topbar-email span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
	.mds-menu-toggle-text { display: none; }
	.mds-menu-toggle { padding: 13px; }

	.mds-cta-band { padding: 24px 0 64px; }
	.mds-cta-band-box { padding: 52px 20px; border-radius: 22px; }
	.mds-cta-band-btn { width: 100%; justify-content: center; }

	.mds-footer { padding-top: 56px; }
	.mds-footer-columns { grid-template-columns: 1fr 1fr; gap: 36px 20px; }
	.mds-footer-copyright { margin-top: 40px; }
}

/* ---------- Very small phones (up to 420px) ---------- */
@media (max-width: 420px) {
	.mds-footer-columns { grid-template-columns: 1fr; }
}


/* =====================================================================
   BLOG — blog page, categories, search results and [mds_blog] shortcode
   (PHP: inc/blog.php)
   ===================================================================== */
.screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---- Blog hero ---- */
.mds-blog-hero { padding: 96px 0 56px; border-bottom: 1px solid var(--mds-line); }
.mds-blog-eyebrow { display: block; font-size: 13px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--mds-green); margin-bottom: 18px; }
.mds-blog-h1 { margin: 0 0 18px; font-family: var(--mds-head); font-size: clamp(40px, 6vw, 76px); font-weight: 800; line-height: 1; letter-spacing: -.045em; color: var(--mds-white); max-width: 980px; }
.mds-blog-intro { margin: 0 0 36px; max-width: 680px; font-size: 18px; line-height: 1.6; color: var(--mds-mut); }
.mds-blog-tools { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 16px 24px; }
.mds-blog-cats { display: flex; flex-wrap: wrap; gap: 8px; }
.mds-blog-pill { padding: 10px 16px; border-radius: 999px; border: 1px solid var(--mds-line-strong); color: var(--mds-ink); font-size: 14px; font-weight: 600; text-decoration: none; transition: border-color .15s, color .15s, background .15s; }
.mds-blog-pill:hover { border-color: var(--mds-green); color: var(--mds-green); }
.mds-blog-pill.is-active { background: var(--mds-green); border-color: var(--mds-green); color: var(--mds-on-green); }
.mds-blog-search { display: flex; align-items: center; flex: 0 1 320px; min-width: 240px; border: 1px solid var(--mds-line-strong); border-radius: 999px; background: var(--mds-panel); padding: 4px 4px 4px 18px; }
.mds-blog-search:focus-within { border-color: var(--mds-green); }
.mds-blog-search input[type="search"] { flex: 1 1 auto; min-width: 0; border: 0; background: none; color: var(--mds-white); font: inherit; font-size: 15px; outline: none; padding: 8px 0; }
.mds-blog-search input::placeholder { color: var(--mds-mut-dark); }
.mds-blog-search button { width: 40px; height: 40px; border: 0; border-radius: 50%; background: var(--mds-green); color: var(--mds-on-green); display: flex; align-items: center; justify-content: center; cursor: pointer; }

/* ---- List ---- */
.mds-blog-list { padding: 56px 0 104px; }
.mds-blog-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.mds-blog-img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .4s; }
.mds-blog-noimg { display: flex; width: 100%; height: 100%; align-items: center; justify-content: center; background: radial-gradient(var(--mds-line) 1.2px, transparent 1.2px) 0 0 / 16px 16px, var(--mds-bg-alt); }
.mds-blog-noimg span { font-family: var(--mds-head); font-size: 64px; font-weight: 800; color: transparent; -webkit-text-stroke: 1.5px var(--mds-green); }
.mds-blog-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; font-size: 13px; color: var(--mds-mut-dark); }
.mds-blog-cat { padding: 4px 10px; border-radius: 999px; background: var(--mds-green-soft); color: var(--mds-green); font-weight: 700; font-size: 12px; letter-spacing: .04em; text-decoration: none; }
.mds-blog-cat:hover { background: var(--mds-green); color: var(--mds-on-green); }
.mds-blog-excerpt { margin: 0; color: var(--mds-mut); font-size: 15.5px; line-height: 1.6; }
.mds-blog-foot { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: auto; padding-top: 16px; border-top: 1px solid var(--mds-line); font-size: 13px; color: var(--mds-mut-dark); }
.mds-blog-more { color: var(--mds-green); font-weight: 700; font-size: 14px; text-decoration: none; }
.mds-blog-more:hover { color: var(--mds-green-light); }

/* Card */
.mds-blog-card { display: flex; flex-direction: column; border: 1px solid var(--mds-line); border-radius: 22px; overflow: hidden; background: var(--mds-panel); transition: transform .2s, border-color .2s; }
.mds-blog-card:hover { transform: translateY(-4px); border-color: rgba(52, 211, 153, .55); }
.mds-blog-card:hover .mds-blog-img { transform: scale(1.05); }
.mds-blog-thumb { display: block; aspect-ratio: 16 / 9; overflow: hidden; background: var(--mds-bg-alt); }
.mds-blog-body { display: flex; flex-direction: column; gap: 12px; flex: 1 1 auto; padding: 22px 24px 22px; }
.mds-blog-title { margin: 0; font-family: var(--mds-head); font-size: 21px; font-weight: 700; line-height: 1.3; letter-spacing: -.02em; }
.mds-blog-title a { color: var(--mds-white); text-decoration: none; }
.mds-blog-title a:hover { color: var(--mds-green); }

/* Featured (first post on page 1) */
.mds-blog-featured { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); margin-bottom: 40px; border: 1px solid rgba(52, 211, 153, .45); border-radius: 28px; overflow: hidden; background: var(--mds-panel); }
.mds-blog-featured-thumb { display: block; min-height: 380px; overflow: hidden; background: var(--mds-bg-alt); }
.mds-blog-featured:hover .mds-blog-img { transform: scale(1.04); }
.mds-blog-featured-body { display: flex; flex-direction: column; gap: 16px; padding: 44px 44px 40px; }
.mds-blog-badge { align-self: flex-start; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--mds-line-strong); font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--mds-white); }
.mds-blog-featured-title { margin: 0; font-family: var(--mds-head); font-size: clamp(26px, 2.8vw, 38px); font-weight: 800; line-height: 1.12; letter-spacing: -.035em; }
.mds-blog-featured-title a { color: var(--mds-white); text-decoration: none; }
.mds-blog-featured-title a:hover { color: var(--mds-green); }
.mds-blog-btn { display: inline-flex; align-items: center; gap: 8px; padding: 13px 22px; border-radius: 999px; background: var(--mds-green); color: var(--mds-on-green); font-weight: 700; font-size: 14px; text-decoration: none; }
.mds-blog-btn:hover { background: var(--mds-green-light); color: var(--mds-on-green); }

/* ---- Pagination ---- */
.mds-blog-pagination { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 16px; margin-top: 56px; padding-top: 28px; border-top: 1px solid var(--mds-line-strong); }
.mds-blog-page-count { font-size: 14px; color: var(--mds-mut-dark); }
.mds-blog-pagination ul { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0; padding: 0; }
.mds-blog-pagination .page-numbers { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-width: 46px; height: 46px; padding: 0 16px; border: 1px solid var(--mds-line-strong); border-radius: 999px; color: var(--mds-ink); font-weight: 600; font-size: 15px; text-decoration: none; transition: border-color .15s, color .15s; }
.mds-blog-pagination a.page-numbers:hover { border-color: var(--mds-green); color: var(--mds-green); }
.mds-blog-pagination .page-numbers.current { background: var(--mds-green); border-color: var(--mds-green); color: var(--mds-on-green); }
.mds-blog-pagination .page-numbers.dots { border-color: transparent; min-width: 24px; padding: 0; }

.mds-blog-empty { padding: 64px 0; text-align: center; }
.mds-blog-empty h2 { font-family: var(--mds-head); color: var(--mds-white); }
.mds-blog-empty p { color: var(--mds-mut); }

/* ---- Tablet / phone ---- */
@media (max-width: 1024px) {
	.mds-blog-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.mds-blog-featured { grid-template-columns: 1fr; }
	.mds-blog-featured-thumb { min-height: 0; aspect-ratio: 16 / 9; }
	.mds-blog-featured-body { padding: 32px 28px; }
}
@media (max-width: 640px) {
	.mds-blog-hero { padding: 64px 0 40px; }
	.mds-blog-grid { grid-template-columns: 1fr; }
	.mds-blog-search { flex: 1 1 100%; }
	.mds-blog-pagination { justify-content: center; }
	.mds-blog-pagination .page-numbers.prev, .mds-blog-pagination .page-numbers.next { padding: 0 14px; }
}