/*
Theme Name: DMS Electronics
Theme URI: https://www.dmselectronics.com/
Description: Kadence child theme with a redesigned enterprise homepage for DMS Electronics (Pvt) Limited.
Author: DMS Electronics
Template: kadence
Version: 1.5.1
Text Domain: dmse-electronics
*/

/* ==========================================================================
   Site-wide typography — Inter everywhere
   Font file is enqueued unconditionally in functions.php (dmse-google-fonts).
   ========================================================================== */

:root,
body {
	/* Astra global typography variables (old + current names). */
	--global-body-font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	--global-heading-font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	--global-primary-nav-font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	--ast-global-body-font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	--ast-heading-font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	/* Elementor global typography variables. */
	--e-global-typography-primary-font-family: 'Inter';
	--e-global-typography-secondary-font-family: 'Inter';
	--e-global-typography-text-font-family: 'Inter';
	--e-global-typography-accent-font-family: 'Inter';
}

body,
button,
input,
select,
optgroup,
textarea,
h1, h2, h3, h4, h5, h6,
.site-title,
.site-description,
.main-header-menu,
.ast-builder-menu,
.entry-title,
.entry-content,
.widget,
.elementor-widget-container,
.elementor-heading-title,
.elementor-button,
[class^="wp-block-"],
[class*=" wp-block-"] {
	font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
}

/* Catch anything the theme or a page builder styles directly, while leaving
   icon fonts (Font Awesome, Astra icons, Dashicons, Elementor icons) and
   monospace elements alone — they render glyphs from a font set on the
   element itself. */
body *:not(i):not(svg):not(code):not(pre):not(kbd):not(samp):not(tt):not(.fa):not(.fas):not(.far):not(.fab):not(.fal):not(.fad):not([class*="fa-"]):not([class*="ast-icon"]):not([class*="dashicons"]):not([class*="eicon-"]):not([class*="icon-"]) {
	font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
}

/* ==========================================================================
   Header (Kadence parent) — compact primary nav, "Contact Us" styled as the
   primary button, and a search field pinned to the right corner.

   Live DOM:
     #masthead .site-main-header-wrap > .site-header-row-container-inner
       > .site-main-header-inner-wrap.site-header-row   (grid: left | right)
         .site-header-main-section-left   -> .site-branding a.brand img.custom-logo
         .site-header-main-section-right  -> nav.main-navigation
                .primary-menu-container.header-menu-container > ul#primary-menu > li.menu-item > a

   Sticky is handled by Kadence natively (theme mod header_sticky = "main");
   these rules just polish the sticky state.
   ========================================================================== */

/* ---- Logo ----
   The logo is a two-part lockup (functions.php → dmse_logo_lockup_markup):
   <span.dmse-logo-lockup> holding the "45 YEARS / DMS" badge <img> and the
   "DMS ELECTRONICS (PVT) LTD" wordmark <img>, split by a thin divider.
   The badge (tall) sets the overall height; the wordmark is sized down to
   sit level with it. Sized by height so nothing is ever cropped, and the
   theme's max-height / overflow caps on the branding wrappers are cleared
   so the header row can't clip it. */
#masthead #main-header,
#masthead .site-header-wrap,
#masthead .site-header-inner-wrap,
#masthead .site-header-upper-wrap,
#masthead .site-header-upper-inner-wrap,
#masthead .site-main-header-inner-wrap,
#masthead .site-header-row-container-inner,
.site-header .site-header-item,
.site-header .site-branding,
.site-header .mobile-site-branding,
.site-header .site-branding a.brand,
.site-header .mobile-site-branding a.brand {
	max-height: none !important;
	overflow: visible !important;
}

/* Taller main header row so the logo isn't cramped. */
#masthead .site-main-header-inner-wrap {
	min-height: 96px !important;
}

.site-header a.brand .dmse-logo-lockup {
	display: inline-flex !important;
	align-items: center;
	gap: 18px;
	line-height: 0;
	margin-left: -28px;
}

.site-header a.brand .dmse-logo-lockup img {
	display: block;
	width: auto;
	height: auto;
	max-width: none !important;
}

.site-header a.brand .dmse-logo-badge {
	max-height: 80px;
}

.site-header a.brand .dmse-logo-word {
	max-height: 50px;
	padding-left: 18px;
	border-left: 1px solid rgba(20, 39, 63, 0.18);
}

/* sticky (scrolled) — keep the logo and header row at full size, no shrink */
#masthead .kadence-sticky-header.item-is-fixed:not(.item-at-start) a.brand .dmse-logo-badge {
	max-height: 80px;
}
#masthead .kadence-sticky-header.item-is-fixed:not(.item-at-start) a.brand .dmse-logo-word {
	max-height: 50px;
}
#masthead .kadence-sticky-header.item-is-fixed:not(.item-at-start) .site-main-header-inner-wrap {
	min-height: 96px !important;
}
#masthead .kadence-sticky-header.item-is-fixed:not(.item-at-start) .site-branding a.brand img,
#masthead .kadence-sticky-header.item-is-fixed:not(.item-at-start) .site-branding a.brand .dmse-logo-lockup {
	transform: none !important;
}

@media (max-width: 1024px) {
	.site-header a.brand .dmse-logo-lockup {
		gap: 12px;
		margin-left: -12px;
	}
	.site-header a.brand .dmse-logo-badge {
		max-height: 56px;
	}
	.site-header a.brand .dmse-logo-word {
		max-height: 33px;
		padding-left: 12px;
	}
}

@media (max-width: 420px) {
	.site-header a.brand .dmse-logo-word {
		display: none;
	}
}

/* ---- Sticky-state polish ---- */
#masthead .kadence-sticky-header.item-is-fixed:not(.item-at-start) > .site-header-row-container-inner {
	box-shadow: 0 1px 0 rgba(20, 39, 63, 0.06), 0 10px 28px -18px rgba(20, 39, 63, 0.3);
}

/* ==========================================================================
   Desktop primary menu (Kadence breakpoint is 1024px)
   ========================================================================== */
@media (min-width: 1025px) {
	.header-navigation .header-menu-container > ul#primary-menu {
		flex-wrap: nowrap;
		justify-content: flex-end;
		gap: 2px;
	}

	.header-navigation .header-menu-container > ul > li.menu-item > a {
		padding-left: 12px !important;
		padding-right: 12px !important;
		font-weight: 500;
		white-space: nowrap;
		border-radius: 6px;
		transition: color 0.2s ease, background-color 0.2s ease;
	}

	.header-navigation .header-menu-container > ul > li.menu-item:not(.dmse-search-item) > a:not([href*="/contact-us"]):hover {
		background: rgba(47, 111, 237, 0.08);
	}

	/* Safety net: reveal the dropdown on hover even if Kadence's JS toggle
	 * doesn't fire (dropdown animation is set to "none", so display is all
	 * that changes). */
	.header-navigation .header-menu-container > ul > li.menu-item-has-children:hover > ul.sub-menu {
		display: block !important;
	}
}

/* ==========================================================================
   "About Us" — non-clickable dropdown parent (href="#", class .dmse-nolink;
   a wp_footer script also preventDefaults the click). Restyle Kadence's
   default dark dropdown as a clean light card to match the site.
   ========================================================================== */
.header-menu-container > ul#primary-menu > li.dmse-nolink > a {
	cursor: default;
}
.header-menu-container > ul#primary-menu > li.dmse-nolink > a::after {
	display: none !important;
}

.header-navigation .header-menu-container ul.sub-menu {
	background: #ffffff !important;
	border: 1px solid rgba(20, 39, 63, 0.1) !important;
	border-radius: 10px !important;
	box-shadow: 0 16px 40px -14px rgba(20, 39, 63, 0.28) !important;
	/* No margin gap between the parent link and the panel — Kadence opens the
	 * dropdown on plain :hover of the <li>, so any uncovered strip between the
	 * link and the panel drops the hover and closes it. The visual breathing
	 * room is transparent top padding *inside* the panel, which stays
	 * hoverable. Overlap the bar by 1px to kill sub-pixel seams. */
	margin-top: -1px !important;
	padding: 15px 6px 6px !important;
	min-width: 210px;
}

.header-navigation .header-menu-container ul.sub-menu li.menu-item {
	border: 0 !important;
}

.header-navigation .header-menu-container ul.sub-menu li.menu-item > a {
	width: auto !important;
	padding: 10px 14px !important;
	border-radius: 7px !important;
	color: #14273f !important;
	font-size: 13.5px !important;
	font-weight: 500;
	background: transparent !important;
	transition: color 0.15s ease, background-color 0.15s ease;
}

.header-navigation .header-menu-container ul.sub-menu li.menu-item > a:hover,
.header-navigation .header-menu-container ul.sub-menu li.menu-item.current-menu-item > a {
	background: rgba(47, 111, 237, 0.08) !important;
	color: #2f6fed !important;
}

/* Narrow desktop (Kadence desktop nav still shows 1025-1200): tighten up. */
@media (min-width: 1025px) and (max-width: 1240px) {
	.site-header a.brand .dmse-logo-badge { max-height: 66px; }
	.site-header a.brand .dmse-logo-word { max-height: 40px; }
	.header-navigation .header-menu-container > ul > li.menu-item > a {
		padding-left: 8px !important;
		padding-right: 8px !important;
		font-size: 13.5px;
	}
	.dmse-search-item form { width: 150px !important; }
	.header-menu-container > ul > li.menu-item > a[href*="/contact-us"] {
		padding: 8px 14px !important;
		font-size: 13px;
	}
}

/* ==========================================================================
   "Contact Us" rendered as the primary button
   Kadence makes each > li > a  display:flex; height:100%  (full bar height),
   so centre the anchor with align-self and give it its own box.
   ========================================================================== */
.header-menu-container > ul#primary-menu > li.menu-item > a[href*="/contact-us"] {
	align-self: center;
	height: auto !important;
	min-height: 0 !important;
	line-height: 1.2 !important;
	margin-left: 10px;
	padding: 9px 20px !important;
	background: #2f6fed;
	color: #ffffff !important;
	font-weight: 600;
	border-radius: 7px;
	box-shadow: 0 6px 16px -6px rgba(47, 111, 237, 0.55);
	white-space: nowrap;
	transition: background-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

/* Kill Kadence's underline-grow pseudo + keep it white when it's the current page. */
.header-menu-container > ul#primary-menu > li.menu-item > a[href*="/contact-us"]::after {
	display: none !important;
}
.header-menu-container > ul#primary-menu > li.menu-item.current-menu-item > a[href*="/contact-us"],
.header-menu-container > ul#primary-menu > li.menu-item.current_page_item > a[href*="/contact-us"] {
	color: #ffffff !important;
}

.header-menu-container > ul#primary-menu > li.menu-item > a[href*="/contact-us"]:hover,
.header-menu-container > ul#primary-menu > li.menu-item > a[href*="/contact-us"]:focus-visible {
	background: #1b52c9;
	color: #ffffff !important;
	transform: translateY(-1px);
	box-shadow: 0 12px 24px -8px rgba(47, 111, 237, 0.65);
}

/* ==========================================================================
   Search field — appended to the primary menu (functions.php), so it lands
   as the last item = the right-hand corner of the header.
   Covers both Kadence's search form (.search-form / .search-field /
   .search-submit) and Ivory Search's markup (.is-search-*).
   ========================================================================== */
.dmse-search-item {
	display: flex !important;
	align-items: center;
	height: auto !important;
	margin-left: 14px;
}

.dmse-search-item > form,
.dmse-search-item .search-form,
.dmse-search-item .is-search-form {
	display: flex;
	align-items: center;
	width: 210px;
	max-width: 44vw;
	height: 40px;
	margin: 0;
	padding: 0 4px 0 0;
	background: #eef1f6;
	border: 1px solid #dfe3ea;
	border-radius: 999px;
	overflow: hidden;
	transition: width 0.3s ease, background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.dmse-search-item form:focus-within {
	width: 252px;
	background: #ffffff;
	border-color: #2f6fed;
	box-shadow: 0 0 0 4px rgba(47, 111, 237, 0.12);
}

.dmse-search-item form * {
	box-shadow: none !important;
}

.dmse-search-item label {
	display: flex;
	flex: 1 1 auto;
	min-width: 0;
	margin: 0;
}

.dmse-search-item .search-field,
.dmse-search-item input[type="search"],
.dmse-search-item .is-search-input {
	flex: 1 1 auto;
	min-width: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0 4px 0 18px;
	border: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
	outline: none !important;
	font-size: 14px;
	color: #14273f;
	-webkit-appearance: none;
	appearance: none;
}

.dmse-search-item .search-field::placeholder,
.dmse-search-item input[type="search"]::placeholder,
.dmse-search-item .is-search-input::placeholder {
	color: #8a94a3;
}

.dmse-search-item .search-field::-webkit-search-cancel-button,
.dmse-search-item .is-search-input::-webkit-search-cancel-button {
	-webkit-appearance: none;
}

/* Kadence renders a decorative <div.kadence-search-icon-wrap> after an
 * <input type="submit"> — hide the decoration and turn the submit input
 * itself into a clean masked magnifier (mask paints the input via its
 * background-color; the "Search" value text is zeroed out). */
.dmse-search-item .kadence-search-icon-wrap,
.dmse-search-item .is-search-icon {
	display: none !important;
}

.dmse-search-item .search-submit,
.dmse-search-item input[type="submit"],
.dmse-search-item button[type="submit"],
.dmse-search-item .is-search-submit {
	position: static !important;
	flex: 0 0 auto;
	width: 36px !important;
	height: 100% !important;
	min-height: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	outline: 0 !important;
	opacity: 1 !important;
	-webkit-appearance: none !important;
	appearance: none !important;
	font-size: 0 !important;
	line-height: 0 !important;
	color: transparent !important;
	cursor: pointer;
	background-color: #6b7482 !important;
	background-image: none !important;
	-webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='2.1'%20stroke-linecap='round'%3E%3Ccircle%20cx='10.5'%20cy='10.5'%20r='7'/%3E%3Cline%20x1='20'%20y1='20'%20x2='15.9'%20y2='15.9'/%3E%3C/svg%3E") center / 17px 17px no-repeat;
	mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='2.1'%20stroke-linecap='round'%3E%3Ccircle%20cx='10.5'%20cy='10.5'%20r='7'/%3E%3Cline%20x1='20'%20y1='20'%20x2='15.9'%20y2='15.9'/%3E%3C/svg%3E") center / 17px 17px no-repeat;
	transition: background-color 0.2s ease;
}

.dmse-search-item .search-submit:hover,
.dmse-search-item input[type="submit"]:hover,
.dmse-search-item button[type="submit"]:hover,
.dmse-search-item .is-search-submit:hover {
	background-color: #2f6fed !important;
}

/* ==========================================================================
   Mobile (Kadence off-canvas drawer, < 1025px)
   ========================================================================== */
@media (max-width: 1024px) {
	.mobile-navigation .dmse-search-item,
	.header-navigation .dmse-search-item {
		width: 100%;
		margin: 12px 0 0;
		padding: 0 20px;
	}
	.mobile-navigation .dmse-search-item form,
	.header-navigation .dmse-search-item form {
		width: 100% !important;
		max-width: none;
	}
	.header-menu-container > ul#primary-menu > li.menu-item > a[href*="/contact-us"] {
		margin: 10px 20px 4px;
	}
}

/* The shared <footer class="dmse-footer"> now renders site-wide through the
 * Kadence `kadence_footer` hook (functions.php swaps out Kadence's own
 * footer_markup), so there is no longer a duplicate Kadence .site-footer to
 * hide. Kept as a safety net in case the hook swap is ever removed. */
.site-footer:empty,
body.home .site-footer {
	display: none;
}

/* ==========================================================================
   Company / About page — "Who we are?" intro  (#about-us Elementor container)
   Elementor ships this container as content_width:full with a 440px
   min-height, so the copy runs edge-to-edge across the viewport and then
   floats in a tall empty band. Give it a real reading measure, a sensible
   vertical rhythm, and drop the dead space.
   ========================================================================== */
#about-us {
	min-height: 0 !important;
	padding: clamp(44px, 6vw, 80px) 20px clamp(36px, 5vw, 60px) !important;
}

/* Inner container: cap the width and centre the column. */
#about-us > .e-con,
#about-us > .elementor-element {
	max-width: 940px;
	margin-inline: auto;
	width: 100%;
}

#about-us .elementor-widget-heading .elementor-heading-title {
	font-size: clamp(26px, 3vw, 38px);
	line-height: 1.2;
	font-weight: 700;
	margin-bottom: 18px;
}

/* Body copy: narrower measure, left-aligned for readability (the raw
   Elementor setting centres it, which reads badly over 4-5 lines). */
#about-us .elementor-widget-text-editor {
	max-width: 760px;
	margin-inline: auto;
	font-size: 16px;
	line-height: 1.75;
	text-align: left !important;
	color: #4e5f7b;
}

#about-us .elementor-widget-text-editor p {
	margin: 0 0 1em;
}

#about-us .elementor-widget-text-editor p:last-child {
	margin-bottom: 0;
}

/* ==========================================================================
   Company / About page — "Our Values" grid
   The 8 value tiles are an ElementsKit "Client Logo" slider (widget
   .elementor-element-895218e) sitting on a blue→navy gradient section
   (.elementor-element-4aa9bff5). Strip the gradient, drop the tiles onto
   clean white cards with real spacing, and re-colour the heading for a
   light background. Selectors carry !important because they override
   Elementor's per-widget generated CSS.
   ========================================================================== */

/* --- Section: kill the gradient, keep it on the page's own background --- */
.elementor-element-4aa9bff5 {
	background-image: none !important;
	background-color: transparent !important;
	padding: clamp(40px, 5vw, 72px) 0 clamp(44px, 6vw, 84px) !important;
}

.elementor-element-4aa9bff5 > .elementor-background-overlay {
	display: none !important;
}

/* --- Heading: dark ink on the now-light section --- */
.elementor-element-7d6c639a .elementskit-section-title-wraper .elementskit-section-title,
.elementor-element-7d6c639a .ekit-heading--title {
	color: #1a2e4b !important;
	font-size: clamp(26px, 3vw, 36px) !important;
	font-weight: 700 !important;
	letter-spacing: -0.01em;
}

.elementor-element-7d6c639a .elementskit-section-title-wraper {
	margin-bottom: clamp(24px, 3vw, 40px);
}

/* --- The tile grid --- */
.elementor-element-895218e .elementskit-clients-slider .swiper-wrapper {
	align-items: stretch;
}

/* Inset each slide so the cards sit apart instead of butting together. */
.elementor-element-895218e .elementskit-client-slider-item {
	padding: 10px !important;
}

.elementor-element-895218e .elementskit-client-slider-item .swiper-slide-inner {
	height: 100%;
}

/* The card itself — reset ElementsKit's hairline border / negative margins
   and rebuild it flat and modern. */
.elementor-element-895218e .elementskit-clients-slider .single-client {
	display: flex !important;
	align-items: center;
	justify-content: center;
	height: 100% !important;
	min-height: 168px !important;
	margin: 0 !important;
	padding: 26px 22px !important;
	background: #ffffff !important;
	border: 1px solid rgba(20, 39, 63, 0.10) !important;
	border-radius: 16px !important;
	box-shadow: 0 1px 3px rgba(20, 39, 63, 0.06) !important;
	transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1),
		box-shadow 0.3s ease, border-color 0.3s ease !important;
}

.elementor-element-895218e .elementskit-clients-slider .single-client:hover {
	transform: translateY(-6px);
	border-color: rgba(47, 111, 237, 0.35) !important;
	box-shadow: 0 22px 40px -22px rgba(20, 39, 63, 0.30) !important;
}

/* Remove the widget's built-in separator line between items. */
.elementor-element-895218e .elementskit-client-slider-item.log-separator:after {
	display: none !important;
}

/* Images: the source JPGs are black glyphs + caption baked on white — drop
   the white ground into the card and give every tile the same icon scale. */
.elementor-element-895218e .single-client .content-image,
.elementor-element-895218e .single-client .content-image a {
	display: flex !important;
	align-items: center;
	justify-content: center;
	width: 100%;
}

.elementor-element-895218e .elementskit-clients-slider .single-client img {
	width: auto !important;
	max-width: 100% !important;
	max-height: 120px !important;
	object-fit: contain !important;
	opacity: 1 !important;
	mix-blend-mode: multiply;
}

/* Slider chrome isn't needed for a static 2-row grid. */
.elementor-element-895218e .elementskit-clients-slider .swiper-navigation-button,
.elementor-element-895218e .elementskit-clients-slider .swiper-pagination {
	display: none !important;
}

@media (max-width: 1024px) {
	.elementor-element-895218e .elementskit-clients-slider .single-client {
		min-height: 148px !important;
		padding: 20px 16px !important;
	}
	.elementor-element-895218e .elementskit-clients-slider .single-client img {
		max-height: 104px !important;
	}
}

/* ==========================================================================
   SmartChat AI chat bubble
   The plugin pins its bubble (#sca-btn) at bottom:24px / right:24px. Lift the
   bubble and its window so the bubble stacks directly above the site's
   back-to-top button (#dmse-top, rendered by dmse_back_to_top() in
   functions.php) in the bottom-right corner, site-wide.
   Inline styles on the plugin elements need overriding, hence !important.
   ========================================================================== */
#sca-wrap #sca-btn {
	bottom: 84px !important;
	right: 22px !important;
}

#sca-wrap #sca-win {
	bottom: 160px !important;
	right: 22px !important;
}

@media (max-width: 480px) {
	#sca-wrap #sca-btn {
		bottom: 76px !important;
	}
	#sca-wrap #sca-win {
		bottom: 140px !important;
		max-height: calc(100vh - 160px) !important;
	}
}

/* ==========================================================================
   GLOBAL PRESENCE page (post 2904) — modern location cards
   The hero is the shared Prime Slider (styled in site.css §9b). Below it the
   countries are two Elementor flex rows (#5d2b7e9, #a142587), each holding
   three child containers of [ photo + ElementsKit heading ]. The heading
   carries the country name (title) AND the full address / phone / website in
   its "extra title" block (.ekit-heading__description). So each cell becomes
   a card with the photo as a banner on top and a white info panel below —
   NOT an overlay (too much dark text to sit legibly on a photo). Responsive
   3 / 2 / 1 grid. Editable in Elementor: swap the image, edit the heading;
   the empty 6th slot un-hides the moment a widget lands in it.
   ========================================================================== */

/* heading block */
body.page-id-2904 .elementor-element-867b8af {
	padding: clamp(30px, 4vw, 56px) 20px clamp(6px, 1.5vw, 16px) !important;
}

body.page-id-2904 .elementor-element-4324db0 .elementskit-section-title-wraper .elementskit-section-title,
body.page-id-2904 .elementor-element-4324db0 .ekit-heading--title {
	color: #14273f !important;
	font-weight: 700 !important;
	font-size: clamp(26px, 3vw, 38px) !important;
	letter-spacing: -0.01em !important;
}

body.page-id-2904 .elementor-element-4324db0 .elementskit-section-subtitle,
body.page-id-2904 .elementor-element-4324db0 .ekit-heading--subtitle {
	color: #2f6fed !important;
	font-weight: 600 !important;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

/* the two country rows → responsive grids (Boxed containers wrap children in
   .e-con-inner; Full ones don't — cover both) */
body.page-id-2904 .elementor-element-5d2b7e9 > .e-con-inner,
body.page-id-2904 .elementor-element-5d2b7e9.e-con-full,
body.page-id-2904 .elementor-element-a142587 > .e-con-inner,
body.page-id-2904 .elementor-element-a142587.e-con-full {
	display: grid !important;
	align-items: stretch !important;
	gap: clamp(18px, 2.2vw, 28px) !important;
	max-width: 1140px !important;
	margin-inline: auto !important;
	padding: clamp(10px, 1.6vw, 18px) 20px !important;
	justify-content: center !important;
}

/* row 1 = 3 up */
body.page-id-2904 .elementor-element-5d2b7e9 > .e-con-inner,
body.page-id-2904 .elementor-element-5d2b7e9.e-con-full {
	grid-template-columns: repeat(3, minmax(0, 360px)) !important;
}

/* row 2 = 2 real cards (empty 6th slot is hidden below), centred */
body.page-id-2904 .elementor-element-a142587 > .e-con-inner,
body.page-id-2904 .elementor-element-a142587.e-con-full {
	grid-template-columns: repeat(2, minmax(0, 360px)) !important;
}

body.page-id-2904 .elementor-element-5d2b7e9 {
	padding-bottom: 0 !important;
}
body.page-id-2904 .elementor-element-a142587 {
	padding-top: 0 !important;
	padding-bottom: clamp(32px, 5vw, 64px) !important;
}

/* each cell → a card: photo banner on top, white info panel below */
body.page-id-2904 .elementor-element-5d2b7e9 > .e-con-inner > .elementor-element,
body.page-id-2904 .elementor-element-5d2b7e9 > .elementor-element,
body.page-id-2904 .elementor-element-a142587 > .e-con-inner > .elementor-element,
body.page-id-2904 .elementor-element-a142587 > .elementor-element {
	display: flex !important;
	flex-direction: column !important;
	height: 100% !important;
	width: 100% !important;
	max-width: 100% !important;
	min-width: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 16px !important;
	overflow: hidden !important;
	background: #ffffff !important;
	box-shadow: 0 12px 30px -16px rgba(20, 39, 63, 0.26) !important;
	transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.35s ease !important;
}

body.page-id-2904 .elementor-element-5d2b7e9 .elementor-element:hover,
body.page-id-2904 .elementor-element-a142587 .elementor-element:hover {
	transform: translateY(-6px);
	box-shadow: 0 28px 52px -20px rgba(20, 39, 63, 0.38) !important;
}

/* Empty 6th slot — hide it (it currently renders as a blank white card).
   To add a 6th country later: drop an Image + Heading into #defda95 in
   Elementor, then delete these two rules. */
body.page-id-2904 .elementor-element-defda95 {
	display: none !important;
}
body.page-id-2904 .elementor-element-defda95:empty {
	display: none !important;
}

/* photo banner */
body.page-id-2904 .elementor-element-5d2b7e9 .elementor-widget-image,
body.page-id-2904 .elementor-element-a142587 .elementor-widget-image {
	flex: 0 0 auto;
	margin: 0 !important;
}
body.page-id-2904 .elementor-element-5d2b7e9 .elementor-widget-image img,
body.page-id-2904 .elementor-element-a142587 .elementor-widget-image img {
	display: block;
	width: 100% !important;
	height: clamp(150px, 15vw, 190px) !important;
	object-fit: cover !important;
	border-radius: 0 !important;
	transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1) !important;
}
body.page-id-2904 .elementor-element-5d2b7e9 .elementor-element:hover .elementor-widget-image img,
body.page-id-2904 .elementor-element-a142587 .elementor-element:hover .elementor-widget-image img {
	transform: scale(1.05) !important;
}

/* info panel = the ElementsKit heading widget */
body.page-id-2904 .elementor-element-5d2b7e9 .elementor-widget-elementskit-heading,
body.page-id-2904 .elementor-element-a142587 .elementor-widget-elementskit-heading {
	flex: 1 1 auto;
	margin: 0 !important;
}
body.page-id-2904 .elementor-element-5d2b7e9 .elementskit-section-title-wraper,
body.page-id-2904 .elementor-element-a142587 .elementskit-section-title-wraper {
	padding: 18px 20px 20px !important;
	text-align: left !important;
}

/* country name */
body.page-id-2904 .elementor-element-5d2b7e9 .elementskit-section-title,
body.page-id-2904 .elementor-element-5d2b7e9 .ekit-heading--title,
body.page-id-2904 .elementor-element-a142587 .elementskit-section-title,
body.page-id-2904 .elementor-element-a142587 .ekit-heading--title {
	color: #14273f !important;
	font-weight: 700 !important;
	font-size: 18px !important;
	letter-spacing: 0.02em !important;
	text-transform: uppercase !important;
	text-align: left !important;
	line-height: 1.25 !important;
	margin: 0 0 10px !important;
}

/* address / phone / website block */
body.page-id-2904 .elementor-element-5d2b7e9 .ekit-heading__description,
body.page-id-2904 .elementor-element-a142587 .ekit-heading__description {
	color: #4e5f7b !important;
	font-size: 13px !important;
	line-height: 1.6 !important;
	text-align: left !important;
}
body.page-id-2904 .ekit-heading__description p {
	margin: 0 0 6px !important;
}
body.page-id-2904 .ekit-heading__description p:first-child {
	color: #33415c !important;
}
body.page-id-2904 .ekit-heading__description p:first-child strong {
	color: #14273f !important;
	font-weight: 700;
}
body.page-id-2904 .ekit-heading__description .global-solution-links {
	margin-top: 8px;
}
body.page-id-2904 .ekit-heading__description .global-link {
	display: flex !important;
	gap: 8px;
	align-items: flex-start;
	margin: 0 0 7px !important;
}
body.page-id-2904 .ekit-heading__description .global-link i {
	color: #2f6fed;
	flex: 0 0 auto;
	margin-top: 3px;
	font-size: 12px;
}
body.page-id-2904 .ekit-heading__description a {
	color: #2f6fed !important;
	font-weight: 600;
	word-break: break-word;
}
body.page-id-2904 .ekit-heading__description a:hover {
	color: #1b52c9 !important;
}

/* drop the stray shadow word + "Time has changed" subtitle on the cards */
body.page-id-2904 .elementor-element-5d2b7e9 .ekit-heading__shadow-text,
body.page-id-2904 .elementor-element-a142587 .ekit-heading__shadow-text,
body.page-id-2904 .elementor-element-5d2b7e9 .elementskit-section-subtitle,
body.page-id-2904 .elementor-element-a142587 .elementskit-section-subtitle,
body.page-id-2904 .elementor-element-5d2b7e9 .ekit-heading--subtitle,
body.page-id-2904 .elementor-element-a142587 .ekit-heading--subtitle {
	display: none !important;
}

/* hide the hand-built Elementor footer — the real .dmse-footer renders
   site-wide via the kadence_footer hook (see functions.php) */
body.page-id-2904 .elementor-element-66f89f48,
body.page-id-2904 .elementor-element-3a893db9 {
	display: none !important;
}

@media (max-width: 1100px) {
	body.page-id-2904 .elementor-element-5d2b7e9 > .e-con-inner,
	body.page-id-2904 .elementor-element-5d2b7e9.e-con-full,
	body.page-id-2904 .elementor-element-a142587 > .e-con-inner,
	body.page-id-2904 .elementor-element-a142587.e-con-full {
		grid-template-columns: repeat(2, minmax(0, 340px)) !important;
	}
}

@media (max-width: 640px) {
	body.page-id-2904 .elementor-element-5d2b7e9 > .e-con-inner,
	body.page-id-2904 .elementor-element-5d2b7e9.e-con-full,
	body.page-id-2904 .elementor-element-a142587 > .e-con-inner,
	body.page-id-2904 .elementor-element-a142587.e-con-full {
		grid-template-columns: minmax(0, 380px) !important;
	}
}

/* ==========================================================================
   PRODUCTS & SERVICES page (post 1344) — kill entrance animations
   Elementor + ElementsKit fade / slide / zoom "in" effects are applied via
   the .elementor-invisible + .animated + <effect-name> classes and a scroll
   observer. Neutralise them so every block is simply present on load.
   Scoped to /our-services/ (post 1344).
   ========================================================================== */
body.page-id-1344 .elementor-invisible {
	visibility: visible !important;
	opacity: 1 !important;
}

body.page-id-1344 .animated,
body.page-id-1344 [data-settings*="animation"],
body.page-id-1344 .fadeIn,
body.page-id-1344 .fadeInUp,
body.page-id-1344 .fadeInDown,
body.page-id-1344 .fadeInLeft,
body.page-id-1344 .fadeInRight,
body.page-id-1344 .slideInUp,
body.page-id-1344 .slideInDown,
body.page-id-1344 .slideInLeft,
body.page-id-1344 .slideInRight,
body.page-id-1344 .zoomIn,
body.page-id-1344 .bounceIn,
body.page-id-1344 .rotateIn,
body.page-id-1344 .lightSpeedIn,
body.page-id-1344 .flipInX,
body.page-id-1344 .flipInY {
	animation: none !important;
	animation-name: none !important;
	opacity: 1 !important;
	transform: none !important;
	visibility: visible !important;
}

/* --------------------------------------------------------------------------
   Services grid — modern cards
   The services are ~14 ElementsKit image-box widgets spread across four
   legacy Elementor inner-sections (3 + 3 + 3 + 5) inside one column
   (#21bd58e0). Flatten all of that with display:contents so every image-box
   becomes a direct item of one uniform 3-column grid, then reskin each box
   to the homepage service-card look (photo, title, 3-line blurb, arrow CTA,
   hover lift). Editable in Elementor: swap the image / edit title + text.
   -------------------------------------------------------------------------- */

/* outer section rhythm */
body.page-id-1344 .elementor-element-183726e4 {
	padding-top: clamp(36px, 5vw, 64px) !important;
	padding-bottom: clamp(40px, 6vw, 76px) !important;
}

/* page title above the grid (the layout has no heading of its own).
   To manage this in WordPress instead: drop a Heading widget at the top of
   #183726e4 in Elementor and delete this rule. */
body.page-id-1344 .elementor-element-183726e4::before {
	content: "Our Services";
	display: block;
	flex: 0 0 100%;
	width: 100%;
	order: -1;
	max-width: 1200px;
	margin: 0 auto clamp(26px, 3.6vw, 46px);
	padding: 0 20px 16px;
	text-align: center;
	font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	font-weight: 800;
	font-size: clamp(28px, 3.6vw, 44px);
	line-height: 1.1;
	letter-spacing: -0.02em;
	color: #14273f;
	background: linear-gradient(90deg,
		transparent calc(50% - 24px),
		#2f6fed calc(50% - 24px),
		#2f6fed calc(50% + 24px),
		transparent calc(50% + 24px)) bottom / 100% 3px no-repeat;
}

/* the wrapping column becomes the grid */
body.page-id-1344 .elementor-element-21bd58e0 > .elementor-widget-wrap,
body.page-id-1344 .elementor-element-21bd58e0 > .elementor-element-populated > .elementor-widget-wrap {
	display: grid !important;
	grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
	grid-auto-rows: 1fr !important;
	align-items: stretch !important;
	gap: clamp(18px, 2.2vw, 28px) !important;
	max-width: 1200px !important;
	margin-inline: auto !important;
	padding: 0 20px !important;
}

/* dissolve the nested sections / containers / columns so the image-boxes
   promote to grid items */
body.page-id-1344 .elementor-element-21bd58e0 .elementor-section,
body.page-id-1344 .elementor-element-21bd58e0 .elementor-container,
body.page-id-1344 .elementor-element-21bd58e0 .elementor-column,
body.page-id-1344 .elementor-element-21bd58e0 .elementor-column > .elementor-widget-wrap,
body.page-id-1344 .elementor-element-21bd58e0 .elementor-column > .elementor-column-wrap,
body.page-id-1344 .elementor-element-21bd58e0 .elementor-column > .elementor-column-wrap > .elementor-widget-wrap {
	display: contents !important;
}

/* the image-box widget = one equal-height card */
body.page-id-1344 .elementor-element-21bd58e0 .elementor-widget-elementskit-image-box,
body.page-id-1344 .elementor-element-21bd58e0 .elementor-widget-elementskit-image-box > .elementor-widget-container {
	height: 100% !important;
	display: flex !important;
	flex-direction: column !important;
	margin: 0 !important;
}

body.page-id-1344 .elementskit-info-image-box.ekit-image-box {
	display: flex !important;
	flex-direction: column !important;
	height: 100% !important;
	margin: 0 !important;
	padding: 0 !important;
	background: #ffffff !important;
	border: 1px solid rgba(20, 39, 63, 0.10) !important;
	border-radius: 18px !important;
	overflow: hidden !important;
	box-shadow: 0 1px 3px rgba(20, 39, 63, 0.06) !important;
	transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.3s ease, border-color 0.3s ease !important;
	text-align: left !important;
}

body.page-id-1344 .elementskit-info-image-box.ekit-image-box:hover {
	transform: translateY(-6px);
	box-shadow: 0 22px 40px -22px rgba(20, 39, 63, 0.30) !important;
	border-color: rgba(47, 111, 237, 0.35) !important;
}

/* if the header is wrapped in a link, keep it a full-width block */
body.page-id-1344 .elementskit-info-image-box > a {
	display: block;
	width: 100%;
	flex: 0 0 auto;
}

/* photo */
body.page-id-1344 .elementskit-info-image-box .elementskit-box-header {
	margin: 0 !important;
	padding: 0 !important;
	aspect-ratio: 16 / 10;
	overflow: hidden;
	background: #e2e6ec;
	border-radius: 0 !important;
}
body.page-id-1344 .elementskit-info-image-box .elementskit-box-header img {
	width: 100% !important;
	height: 100% !important;
	object-fit: cover !important;
	padding: 0 !important;
	border-radius: 0 !important;
	transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1) !important;
}
body.page-id-1344 .elementskit-info-image-box:hover .elementskit-box-header img {
	transform: scale(1.05) !important;
}

/* body — fixed-height parts so every card is exactly the same size;
   overflowing title / text is cut with an ellipsis */
body.page-id-1344 .elementskit-info-image-box .elementskit-box-body {
	flex: 1 1 auto !important;
	min-height: 0;
	margin: 0 !important;
	padding: 18px 22px 16px !important;
}
body.page-id-1344 .elementskit-info-image-box .elementskit-box-content {
	margin: 0 !important;
	padding: 0 !important;
}
body.page-id-1344 .elementskit-info-image-box .elementskit-info-box-title {
	color: #14273f !important;
	font-weight: 700 !important;
	font-size: 16.5px !important;
	line-height: 1.35 !important;
	margin: 0 0 8px !important;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	min-height: calc(2 * 1.35 * 16.5px);   /* always reserve 2 lines */
}
body.page-id-1344 .elementskit-info-image-box .elementskit-box-style-content {
	color: #4e5f7b !important;
	font-size: 13.5px !important;
	line-height: 1.6 !important;
	margin: 0 !important;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
	height: calc(3 * 1.6 * 13.5px);        /* fixed at 3 lines, clip the rest */
}
body.page-id-1344 .elementskit-info-image-box .elementskit-box-style-content p {
	margin: 0 !important;
}

/* footer: pinned to the bottom of every card, separated by a hairline rule,
   the "Read More" pill reduced to a clean sentence-case arrow link */
body.page-id-1344 .elementskit-info-image-box .elementskit-box-footer {
	margin: 0 !important;
	padding: 14px 22px 18px !important;
	border-top: 1px solid rgba(20, 39, 63, 0.08);
}
body.page-id-1344 .elementskit-info-image-box .elementskit-box-footer .box-footer,
body.page-id-1344 .elementskit-info-image-box .elementskit-box-footer .btn-wraper {
	margin: 0 !important;
	padding: 0 !important;
}
body.page-id-1344 .elementskit-info-image-box .elementskit-btn {
	display: inline-flex !important;
	align-items: center;
	gap: 6px;
	margin: 0 !important;
	padding: 0 !important;
	background: transparent !important;
	border: 0 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	color: #2f6fed !important;
	font-size: 13px !important;
	font-weight: 600 !important;
	text-transform: none !important;
	letter-spacing: normal !important;
	line-height: 1.2 !important;
	transition: gap 0.25s ease !important;
}
body.page-id-1344 .elementskit-info-image-box:hover .elementskit-btn {
	color: #1b52c9 !important;
	gap: 10px;
}
body.page-id-1344 .elementskit-info-image-box .elementskit-btn i,
body.page-id-1344 .elementskit-info-image-box .elementskit-btn svg {
	font-size: 12px !important;
	max-width: 14px;
	transition: transform 0.25s ease;
}
body.page-id-1344 .elementskit-info-image-box:hover .elementskit-btn i,
body.page-id-1344 .elementskit-info-image-box:hover .elementskit-btn svg {
	transform: translateX(3px);
}

/* Remove the two empty image-box widgets that render as blank cards
   (#6e491cc, #2160e98 — no image, no title, no text). The :has() rule below
   also catches any other empty box added later. */
body.page-id-1344 .elementor-element-6e491cc,
body.page-id-1344 .elementor-element-2160e98,
body.page-id-1344 .elementor-widget-elementskit-image-box:not(:has(.elementskit-box-header img)):not(:has(.elementskit-info-box-title)) {
	display: none !important;
}

/* hide the hand-built Elementor footer (real .dmse-footer renders site-wide) */
body.page-id-1344 .elementor-element-8f716cd,
body.page-id-1344 .elementor-element-957901e {
	display: none !important;
}

@media (max-width: 1024px) {
	body.page-id-1344 .elementor-element-21bd58e0 > .elementor-widget-wrap,
	body.page-id-1344 .elementor-element-21bd58e0 > .elementor-element-populated > .elementor-widget-wrap {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
	}
}

@media (max-width: 600px) {
	body.page-id-1344 .elementor-element-21bd58e0 > .elementor-widget-wrap,
	body.page-id-1344 .elementor-element-21bd58e0 > .elementor-element-populated > .elementor-widget-wrap {
		grid-template-columns: minmax(0, 1fr) !important;
		max-width: 420px !important;
	}
}