/* =========================================================================
   MB MAHIM THEME — CONSOLIDATED STYLESHEET
   Merge this single file into /css/style.css and remove/replace any
   previously merged pieces — this supersedes all the separate
   *-suggested.css files delivered earlier in pieces.

   NOTE ON FILES DELIBERATELY *NOT* INCLUDED BELOW:
   - The OLD two-tier header-suggested.css (utility bar + white navbar) is
     NOT included. It's superseded by the transparent-over-hero header
     design below and defines the same selectors with conflicting values —
     loading both was the root cause of earlier "nav looks broken" issues.

   Both the plain-grid AND the Owl Carousel versions of "Most Visited
   Services" ARE included below — they use different wrapper class names
   (.mbmahim-most-visited-services vs .mbmahim-services-section) so they
   don't conflict with each other. Whichever template file you're actually
   using (template-parts/most-visited-services.php vs
   template-parts/most-visited-services-owl.php) will pick up its matching
   CSS automatically; the unused one's rules simply won't match anything
   and are harmless.

   The Customer Info Bar section (template-parts/customer-info-bar.php,
   section#customer / .mbmahim-info-bar) is also included at the end of
   this file.

   The About Section (template-parts/about-section.php, section#about /
   .mbmahim-about-section) is also included at the very end of this file.

   The Feedback/Testimonials section (template-parts/feedback-section.php,
   section#feedback / .mbmahim-feedback-section) is also included at the
   very end of this file.

   The Quote / Consultation modal forms (header.php's #mbmahimQuoteModal
   and footer.php's #mbmahimConsultationModal) are also included at the
   very end of this file.

   Brand variables (defined once, at the top, used everywhere via var()):
   --mbmahim-primary #0F172A | --mbmahim-accent #C8A96B
   --mbmahim-white #FFFFFF   | --mbmahim-light #F5F5F5
   ========================================================================= */


/* =========================================================================
   TRANSPARENT HEADER (over hero) + HERO SLIDER — suggested styles
   Merge into /css/style.css (already enqueued in functions.php)
   This file is self-contained — do NOT also load the older two-tier
   header-suggested.css (utility bar + white navbar); that version is
   superseded by this transparent-over-hero design and defines the same
   selectors with conflicting colors, which is why the nav may currently
   look broken/unstyled if both files are merged together.
   ========================================================================= */

:root {
	--mbmahim-header-height: 88px; /* navbar padding (18px*2) + logo height (~50px), used to offset inner-page content below the fixed header */
	--mbmahim-primary: #0F172A;   /* deep navy — text, logo, primary UI   */
	--mbmahim-accent:  #C8A96B;   /* warm gold — hover/active, signature  */
	--mbmahim-white:   #FFFFFF;
	--mbmahim-light:   #F5F5F5;
	--mbmahim-text-muted: #64748B;
	--mbmahim-border: #E5E5E5;
}

/* =========================================================================
   HEADER — fixed on every page; transparent overlay only on the front
   page (before scrolling), where it sits on top of the hero slider.
   ========================================================================= */

/* Default: fixed, solid navy bar — used on every inner page from the start,
   and on the front page once the user scrolls past the threshold (JS adds
   .scrolled to this element — see the scroll-listener snippet). */
.mbmahim-site-header {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 1050;
	background: var(--mbmahim-primary);
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
	transition: background 0.3s ease, box-shadow 0.3s ease;
}

/* Front page, pre-scroll: transparent overlay sitting on the hero, no shadow. */
.mbmahim-site-header.is-transparent {
	position: absolute;
	background: transparent;
	box-shadow: none;
}

/* Once scrolled past the threshold, force solid + shadow even on the front page. */
.mbmahim-site-header.scrolled {
	position: fixed;
	background: var(--mbmahim-primary);
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
}

/* Reserve space for the fixed header on every page EXCEPT the front page —
   there, the header overlays the hero with zero reserved height instead. */
body.mbmahim-inner-page {
	padding-top: var(--mbmahim-header-height);
}

.mbmahim-navbar {
	padding: 18px 0;
	transition: padding 0.3s ease;
}

.mbmahim-navbar .container-fluid {
	padding-left: clamp(16px, 4vw, 48px);
	padding-right: clamp(16px, 4vw, 48px);
}

/* Front page, pre-scroll: slightly taller padding for a more spacious overlay look */
.mbmahim-site-header.is-transparent .mbmahim-navbar {
	padding: 28px 0;
}

/* Shrink padding once scrolled (both front and inner pages) */
.mbmahim-site-header.scrolled .mbmahim-navbar {
	padding: 14px 0;
}

/* ---- Logo -------------------------------------------------------------- */
.mbmahim-brand {
	display: flex;
	align-items: center;
}

.mbmahim-logo-img {
	max-height: 50px;
	width: auto;
	transition: max-height 0.3s ease;
}

.mbmahim-site-header.scrolled .mbmahim-logo-img {
	max-height: 38px;
}

.mbmahim-logo-text {
	font-family: 'Montserrat', sans-serif;
	font-weight: 700;
	font-size: 1.4rem;
	color: var(--mbmahim-white);
}

/* ---- Nav links ----------------------------------------------------------- */
.mbmahim-navbar .navbar-nav .nav-link {
	font-family: 'Poppins', sans-serif;
	font-weight: 500;
	font-size: 0.82rem;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: var(--mbmahim-white);
	padding: 0.5rem 1.05rem;
	position: relative;
	transition: color 0.2s ease;
}

.mbmahim-navbar .navbar-nav .nav-link::after {
	content: '';
	position: absolute;
	left: 50%;
	bottom: 0.15rem;
	width: 0;
	height: 2px;
	background: var(--mbmahim-accent);
	transform: translateX(-50%);
	transition: width 0.25s ease;
}

.mbmahim-navbar .navbar-nav .nav-link:hover,
.mbmahim-navbar .navbar-nav .nav-link.active,
.mbmahim-navbar .navbar-nav .current-menu-item > .nav-link {
	color: var(--mbmahim-white);
}

.mbmahim-navbar .navbar-nav .nav-link:hover::after,
.mbmahim-navbar .navbar-nav .nav-link.active::after,
.mbmahim-navbar .navbar-nav .current-menu-item > .nav-link::after {
	width: calc(100% - 2.1rem);
}

/* ---- Mobile toggle icon (white, since it sits on dark bg) --------------- */
.mbmahim-toggler {
	border: none;
	padding: 0.35rem 0.5rem;
}

.mbmahim-toggler .navbar-toggler-icon {
	background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(255,255,255,0.9)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

.mbmahim-toggler:focus {
	box-shadow: none;
	outline: 2px solid var(--mbmahim-accent);
	outline-offset: 2px;
}

/* ---- CTA button ------------------------------------------------------------ */
.mbmahim-cta-btn {
	display: inline-block;
	background: var(--mbmahim-accent);
	color: var(--mbmahim-primary);
	font-family: 'Poppins', sans-serif;
	font-weight: 600;
	font-size: 0.8rem;
	letter-spacing: 0.8px;
	text-transform: uppercase;
	text-decoration: none;
	padding: 12px 28px;
	border-radius: 4px;
	margin-left: 24px;
	transition: background 0.2s ease, transform 0.2s ease;
	white-space: nowrap;
	border: 0;
}

.mbmahim-cta-btn:hover {
	background: #b6944f;
	color: var(--mbmahim-primary);
	transform: translateY(-2px);
}

/* =========================================================================
   HERO SLIDER
   ========================================================================= */
.mbmahim-hero-slider {
	position: relative;
}

.mbmahim-hero-slide {
	min-height: 92vh;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	position: relative;
	/* NOTE: no `display` property here — Bootstrap controls display:none/block
	   on .carousel-item to show/hide slides. Overriding it here (e.g. with
	   display:flex) breaks the carousel by showing all slides at once. */
}

/* Bootstrap's .carousel-fade crossfades opacity between items; make sure
   our custom slide keeps its background visible throughout the transition. */
.mbmahim-hero-slider.carousel-fade .carousel-item {
	transition: opacity 0.8s ease;
}

/* Dark gradient overlay: darker on the left (text side), lighter on the right */
.mbmahim-hero-overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(
		90deg,
		rgba(15, 23, 42, 0.88) 0%,
		rgba(15, 23, 42, 0.6) 40%,
		rgba(15, 23, 42, 0.15) 75%
	);
	z-index: 1;
}

/* Flex centering lives on this container (the actual element used in the
   markup — see header.php), not on .carousel-item, so it never conflicts
   with Bootstrap's own display:none/block show/hide logic. */
.mbmahim-hero-container {
	position: relative;
	z-index: 2;
	display: flex;
	align-items: center;
	min-height: 92vh;
	padding-left: clamp(20px, 6vw, 80px);
	padding-right: clamp(20px, 6vw, 80px);
}

.mbmahim-hero-content {
	max-width: 720px;
	padding-top: 100px;
}

/* ---- Entrance animation: staggered fade-up on the active slide ---------- */
@keyframes mbmahimFadeUp {
	from {
		opacity: 0;
		transform: translateY(32px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.mbmahim-hero-content .mbmahim-hero-heading,
.mbmahim-hero-content .mbmahim-hero-subtitle,
.mbmahim-hero-content .mbmahim-hero-buttons {
	opacity: 0;
}

.carousel-item.active .mbmahim-hero-heading {
	animation: mbmahimFadeUp 0.8s ease forwards;
	animation-delay: 0.25s;
}

.carousel-item.active .mbmahim-hero-subtitle {
	animation: mbmahimFadeUp 0.8s ease forwards;
	animation-delay: 0.5s;
}

.carousel-item.active .mbmahim-hero-buttons {
	animation: mbmahimFadeUp 0.8s ease forwards;
	animation-delay: 0.75s;
}

.mbmahim-hero-heading {
	font-family: 'Montserrat', sans-serif;
	font-weight: 700;
	font-size: clamp(2.2rem, 5vw, 3.6rem);
	line-height: 1.15;
	letter-spacing: 0.5px;
	text-transform: uppercase;
	margin-bottom: 24px;
}

.mbmahim-hero-heading span {
	display: block;
}

.mbmahim-heading-white {
	color: var(--mbmahim-white);
}

.mbmahim-heading-gold {
	color: var(--mbmahim-accent);
}

.mbmahim-hero-subtitle {
	font-family: 'Poppins', sans-serif;
	font-size: 1rem;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.85);
	border-top: 2px solid var(--mbmahim-accent);
	padding-top: 20px;
	margin-top: 4px;
	margin-bottom: 36px;
	max-width: 480px;
}

.mbmahim-hero-buttons {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	margin-bottom: 90px;
}

.mbmahim-btn-hero-primary,
.mbmahim-btn-hero-secondary {
	display: inline-block;
	font-family: 'Poppins', sans-serif;
	font-weight: 600;
	font-size: 0.85rem;
	letter-spacing: 0.6px;
	text-transform: uppercase;
	text-decoration: none;
	padding: 16px 32px;
	border-radius: 2px;
	transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
}

.mbmahim-btn-hero-primary {
	background: var(--mbmahim-accent);
	color: var(--mbmahim-primary);
	border: 1px solid var(--mbmahim-accent);
}

.mbmahim-btn-hero-primary:hover {
	background: transparent;
	color: var(--mbmahim-white);
	transform: translateY(-2px);
}

.mbmahim-btn-hero-secondary {
	background: transparent;
	color: var(--mbmahim-white);
	border: 1px solid rgba(255, 255, 255, 0.5);
}

.mbmahim-btn-hero-secondary:hover {
	background: var(--mbmahim-white);
	color: var(--mbmahim-primary);
	border-color: var(--mbmahim-white);
	transform: translateY(-2px);
}

/* ---- Prev/Next arrow controls -------------------------------------------- */
.mbmahim-hero-slider .carousel-control-prev,
.mbmahim-hero-slider .carousel-control-next {
	width: auto;
	top: 50%;
	transform: translateY(-50%);
	bottom: auto;
	opacity: 1;
	z-index: 3;
}

.mbmahim-hero-slider .carousel-control-prev {
	left: clamp(12px, 3vw, 40px);
}

.mbmahim-hero-slider .carousel-control-next {
	right: clamp(12px, 3vw, 40px);
}

.mbmahim-hero-arrow {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.12);
	color: var(--mbmahim-white);
	font-size: 1rem;
	backdrop-filter: blur(2px);
	transition: background 0.2s ease;
}

.mbmahim-hero-slider .carousel-control-prev:hover .mbmahim-hero-arrow,
.mbmahim-hero-slider .carousel-control-next:hover .mbmahim-hero-arrow {
	background: var(--mbmahim-accent);
	color: var(--mbmahim-primary);
}

/* ---- Stats bar (overlaid at the bottom of the hero) ---------------------- */
.mbmahim-hero-stats {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 32px;
	z-index: 3;
}

.mbmahim-hero-stats .container-fluid {
	padding-left: clamp(20px, 6vw, 80px);
	padding-right: clamp(20px, 6vw, 80px);
}

.mbmahim-hero-stats .row {
	background: rgba(15, 23, 42, 0.55);
	backdrop-filter: blur(6px);
	border: 1px solid rgba(255, 255, 255, 0.12);
	border-radius: 8px;
	margin: 0;
	padding: 24px clamp(16px, 3vw, 32px);
	max-width: 720px;
}

.mbmahim-stat-item {
	display: flex;
	align-items: center;
	gap: 14px;
}

.mbmahim-stat-item i {
	font-size: 1.4rem;
	color: var(--mbmahim-accent);
	flex-shrink: 0;
}

.mbmahim-stat-text {
	display: flex;
	flex-direction: column;
	line-height: 1.3;
}

.mbmahim-stat-number {
	font-family: 'Montserrat', sans-serif;
	font-weight: 700;
	font-size: 1.15rem;
	color: var(--mbmahim-white);
}

.mbmahim-stat-label {
	font-family: 'Poppins', sans-serif;
	font-size: 0.72rem;
	color: rgba(255, 255, 255, 0.7);
	text-transform: uppercase;
	letter-spacing: 0.4px;
}

/* =========================================================================
   RESPONSIVE
   ========================================================================= */
@media (max-width: 991.98px) {
	.mbmahim-navbar .navbar-collapse {
		background: var(--mbmahim-primary);
		margin-top: 12px;
		padding: 16px;
		border-radius: 6px;
	}

	.mbmahim-cta-btn {
		margin-left: 0;
		margin-top: 12px;
		text-align: center;
	}

	.mbmahim-hero-content {
		padding-top: 130px;
	}

	.mbmahim-hero-buttons {
		margin-bottom: 200px;
	}

	.mbmahim-hero-stats {
		position: relative;
		bottom: auto;
		margin-top: -60px;
	}

	.mbmahim-hero-stats .row {
		max-width: 100%;
	}
}

@media (max-width: 575.98px) {
	.mbmahim-hero-slide {
		min-height: 100vh;
	}

	.mbmahim-hero-heading {
		font-size: 1.9rem;
	}

	.mbmahim-stat-item {
		gap: 10px;
	}

	.mbmahim-stat-number {
		font-size: 1rem;
	}
}

/* Respect reduced-motion preference */
@media (prefers-reduced-motion: reduce) {
	.mbmahim-navbar,
	.mbmahim-navbar .navbar-nav .nav-link::after,
	.mbmahim-cta-btn,
	.mbmahim-btn-hero-primary,
	.mbmahim-btn-hero-secondary,
	.mbmahim-hero-arrow,
	.mbmahim-logo-img,
	.mbmahim-hero-slider.carousel-fade .carousel-item {
		transition: none;
	}

	.carousel-item.active .mbmahim-hero-heading,
	.carousel-item.active .mbmahim-hero-subtitle,
	.carousel-item.active .mbmahim-hero-buttons {
		animation: none;
		opacity: 1;
		transform: none;
	}
}


/* =========================================================================
   INNER PAGE TEMPLATES — suggested styles
   Covers: breadcrumbs, single.php, page.php, archive.php, category.php,
   search.php, 404.php, pagination, and WP entry-content typography.
   Merge into /css/style.css (already enqueued in functions.php).

   Uses fallback values on every var() so this file works safely regardless
   of merge order with header/footer/hero stylesheets:
   --mbmahim-primary #0F172A | --mbmahim-accent #C8A96B
   --mbmahim-white #FFFFFF   | --mbmahim-light #F5F5F5
   ========================================================================= */

/* =========================================================================
   BREADCRUMB BANNER
   Rendered by mbmahim_breadcrumbs() in functions.php on every inner page.
   ========================================================================= */
.mbmahim-breadcrumb {
	position: relative;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	min-height: 280px;
	display: flex;
	align-items: center;
}

/* Used when no post with a featured image exists yet — a solid brand
   gradient instead of a missing/broken background image. */
.mbmahim-breadcrumb.mbmahim-breadcrumb-noimage {
	background: linear-gradient(135deg, var(--mbmahim-primary, #0F172A) 0%, #1e293b 100%);
}

.mbmahim-breadcrumb-overlay {
	position: relative;
	width: 100%;
	min-height: 280px;
	display: flex;
	align-items: center;
	background: linear-gradient(
		180deg,
		rgba(15, 23, 42, 0.75) 0%,
		rgba(15, 23, 42, 0.6) 100%
	);
}

.mbmahim-breadcrumb .container {
	position: relative;
	z-index: 2;
	padding-left: clamp(16px, 4vw, 48px);
	padding-right: clamp(16px, 4vw, 48px);
}

.mbmahim-breadcrumb-title {
	font-family: 'Montserrat', sans-serif;
	font-weight: 700;
	font-size: clamp(1.8rem, 4vw, 2.75rem);
	text-transform: uppercase;
	letter-spacing: 1px;
	color: var(--mbmahim-white, #FFFFFF);
	margin-bottom: 16px;
	position: relative;
	padding-bottom: 18px;
}

.mbmahim-breadcrumb-title::after {
	content: '';
	position: absolute;
	left: 0;
	bottom: 0;
	width: 56px;
	height: 3px;
	background: var(--mbmahim-accent, #C8A96B);
}

.mbmahim-breadcrumb-trail .breadcrumb {
	background: none;
	margin: 0;
	padding: 0;
	flex-wrap: wrap;
}

.mbmahim-breadcrumb-trail .breadcrumb-item {
	font-family: 'Poppins', sans-serif;
	font-size: 0.85rem;
	letter-spacing: 0.3px;
	color: rgba(255, 255, 255, 0.6);
}

.mbmahim-breadcrumb-trail .breadcrumb-item + .breadcrumb-item {
	padding-left: 0.6rem;
}

.mbmahim-breadcrumb-trail .breadcrumb-item + .breadcrumb-item::before {
	content: '\f105'; /* fa-chevron-right */
	font-family: 'Font Awesome 6 Free';
	font-weight: 900;
	color: var(--mbmahim-accent, #C8A96B);
	padding-right: 0.6rem;
	font-size: 0.7rem;
}

.mbmahim-breadcrumb-trail .breadcrumb-item a {
	color: rgba(255, 255, 255, 0.75);
	text-decoration: none;
	transition: color 0.2s ease;
}

.mbmahim-breadcrumb-trail .breadcrumb-item a:hover {
	color: var(--mbmahim-accent, #C8A96B);
}

.mbmahim-breadcrumb-trail .breadcrumb-item.active {
	color: var(--mbmahim-accent, #C8A96B);
	font-weight: 500;
}

@media (max-width: 575.98px) {
	.mbmahim-breadcrumb,
	.mbmahim-breadcrumb-overlay {
		min-height: 200px;
	}
}

/* =========================================================================
   MAIN CONTENT WRAPPER
   ========================================================================= */
.mbmahim-main-content {
	background: var(--mbmahim-white, #FFFFFF);
}

.mbmahim-main-content .container-fluid {
	padding-left: clamp(16px, 4vw, 48px);
	padding-right: clamp(16px, 4vw, 48px);
	max-width: 1400px;
}

/* =========================================================================
   ENTRY CONTENT TYPOGRAPHY
   Shared by single.php and page.php (.mbmahim-single-content / .mbmahim-page-content)
   ========================================================================= */
.mbmahim-single-title,
.mbmahim-archive-title {
	font-family: 'Montserrat', sans-serif;
	font-weight: 700;
	color: var(--mbmahim-primary, #0F172A);
}

.mbmahim-single-title {
	font-size: clamp(1.6rem, 3vw, 2.25rem);
	margin-bottom: 28px;
	line-height: 1.3;
}

.mbmahim-single-thumb,
.mbmahim-page-thumb {
	margin-bottom: 36px;
	border-radius: 10px;
	overflow: hidden;
}

.mbmahim-single-thumb img,
.mbmahim-page-thumb img {
	width: 100%;
	height: auto;
	display: block;
}

.mbmahim-single-content,
.mbmahim-page-content {
	max-width: 820px;
	font-family: 'Poppins', sans-serif;
	font-size: 1.03rem;
	line-height: 1.85;
	color: #374151;
}

.mbmahim-single-content h2,
.mbmahim-page-content h2 {
	font-family: 'Montserrat', sans-serif;
	font-weight: 600;
	font-size: 1.5rem;
	color: var(--mbmahim-primary, #0F172A);
	margin-top: 2.2em;
	margin-bottom: 0.7em;
}

.mbmahim-single-content h3,
.mbmahim-page-content h3 {
	font-family: 'Montserrat', sans-serif;
	font-weight: 600;
	font-size: 1.25rem;
	color: var(--mbmahim-primary, #0F172A);
	margin-top: 1.8em;
	margin-bottom: 0.6em;
}

.mbmahim-single-content p,
.mbmahim-page-content p {
	margin-bottom: 1.4em;
}

.mbmahim-single-content a,
.mbmahim-page-content a {
	color: var(--mbmahim-primary, #0F172A);
	text-decoration: underline;
	text-decoration-color: var(--mbmahim-accent, #C8A96B);
	text-underline-offset: 3px;
	transition: color 0.2s ease;
}

.mbmahim-single-content a:hover,
.mbmahim-page-content a:hover {
	color: var(--mbmahim-accent, #C8A96B);
}

.mbmahim-single-content blockquote,
.mbmahim-page-content blockquote {
	margin: 2em 0;
	padding: 1.2em 1.6em;
	background: var(--mbmahim-light, #F5F5F5);
	border-left: 3px solid var(--mbmahim-accent, #C8A96B);
	font-style: italic;
	color: var(--mbmahim-primary, #0F172A);
	border-radius: 0 6px 6px 0;
}

.mbmahim-single-content ul,
.mbmahim-single-content ol,
.mbmahim-page-content ul,
.mbmahim-page-content ol {
	margin-bottom: 1.4em;
	padding-left: 1.4em;
}

.mbmahim-single-content ul li,
.mbmahim-page-content ul li {
	margin-bottom: 0.5em;
}

.mbmahim-single-content img,
.mbmahim-page-content img {
	max-width: 100%;
	height: auto;
	border-radius: 8px;
	margin: 1.5em 0;
}

.mbmahim-page-links {
	margin-top: 2em;
	font-weight: 600;
	color: var(--mbmahim-primary, #0F172A);
}

.mbmahim-page-links a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	margin-left: 6px;
	border-radius: 50%;
	background: var(--mbmahim-light, #F5F5F5);
	color: var(--mbmahim-primary, #0F172A);
	text-decoration: none;
	transition: background 0.2s ease, color 0.2s ease;
}

.mbmahim-page-links a:hover {
	background: var(--mbmahim-accent, #C8A96B);
	color: var(--mbmahim-white, #FFFFFF);
}

/* =========================================================================
   ARCHIVE / CATEGORY / SEARCH — card grid
   ========================================================================= */
.mbmahim-archive-grid {
	row-gap: 32px;
}

.mbmahim-archive-card {
	display: flex;
	flex-direction: column;
	height: 100%;
	background: var(--mbmahim-white, #FFFFFF);
	border: 1px solid var(--mbmahim-border, #E5E5E5);
	border-radius: 8px;
	overflow: hidden;
	text-decoration: none;
	transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.mbmahim-archive-card:hover {
	transform: translateY(-6px);
	box-shadow: 0 20px 40px rgba(15, 23, 42, 0.1);
	border-color: var(--mbmahim-accent, #C8A96B);
}

.mbmahim-archive-thumb {
	aspect-ratio: 4 / 3;
	overflow: hidden;
}

.mbmahim-archive-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.4s ease;
}

.mbmahim-archive-card:hover .mbmahim-archive-thumb img {
	transform: scale(1.06);
}

.mbmahim-archive-body {
	padding: 22px;
	display: flex;
	flex-direction: column;
	gap: 8px;
	flex: 1;
}

.mbmahim-archive-date,
.mbmahim-archive-type {
	display: inline-block;
	font-family: 'Poppins', sans-serif;
	font-size: 0.7rem;
	font-weight: 600;
	letter-spacing: 0.6px;
	text-transform: uppercase;
	color: var(--mbmahim-accent, #C8A96B);
}

.mbmahim-archive-title {
	font-size: 1.1rem;
	margin: 0;
	transition: color 0.2s ease;
}

.mbmahim-archive-card:hover .mbmahim-archive-title {
	color: var(--mbmahim-accent, #C8A96B);
}

.mbmahim-archive-excerpt {
	font-family: 'Poppins', sans-serif;
	font-size: 0.88rem;
	line-height: 1.7;
	color: var(--mbmahim-text-muted, #64748B);
	flex: 1;
}

.mbmahim-archive-excerpt p {
	margin: 0;
}

/* =========================================================================
   SEARCH
   ========================================================================= */
.mbmahim-search-summary {
	font-family: 'Poppins', sans-serif;
	font-size: 1.1rem;
	color: var(--mbmahim-primary, #0F172A);
	margin-bottom: 32px;
}

.mbmahim-search-summary strong {
	color: var(--mbmahim-accent, #C8A96B);
}

/* =========================================================================
   PAGINATION
   Applies to the_posts_pagination() output (.pagination / .page-numbers)
   ========================================================================= */
.pagination,
.navigation.pagination {
	margin-top: 48px;
}

.pagination .nav-links {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	justify-content: center;
	list-style: none;
	padding: 0;
}

.page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 42px;
	height: 42px;
	padding: 0 12px;
	border-radius: 6px;
	background: var(--mbmahim-light, #F5F5F5);
	color: var(--mbmahim-primary, #0F172A);
	font-family: 'Poppins', sans-serif;
	font-weight: 500;
	font-size: 0.9rem;
	text-decoration: none;
	transition: background 0.2s ease, color 0.2s ease;
}

.page-numbers:hover {
	background: var(--mbmahim-accent, #C8A96B);
	color: var(--mbmahim-white, #FFFFFF);
}

.page-numbers.current {
	background: var(--mbmahim-primary, #0F172A);
	color: var(--mbmahim-white, #FFFFFF);
}

.page-numbers.dots {
	background: none;
}

/* =========================================================================
   404
   ========================================================================= */
.mbmahim-404 {
	padding-top: 60px;
	padding-bottom: 80px;
	max-width: 640px;
	margin: 0 auto;
}

.mbmahim-404-code {
	font-family: 'Montserrat', sans-serif;
	font-weight: 800;
	font-size: clamp(4rem, 12vw, 7rem);
	line-height: 1;
	color: var(--mbmahim-primary, #0F172A);
	margin-bottom: 8px;
	position: relative;
	display: inline-block;
}

.mbmahim-404-code::after {
	content: '';
	display: block;
	width: 72px;
	height: 3px;
	background: var(--mbmahim-accent, #C8A96B);
	margin: 16px auto 0;
}

.mbmahim-404-message {
	font-family: 'Poppins', sans-serif;
	font-size: 1.05rem;
	color: var(--mbmahim-text-muted, #64748B);
	margin: 24px 0 32px;
	line-height: 1.7;
}

.mbmahim-404-search .search-form {
	display: flex;
	max-width: 420px;
	margin: 0 auto;
	border: 1px solid var(--mbmahim-border, #E5E5E5);
	border-radius: 6px;
	overflow: hidden;
}

.mbmahim-404-search .search-field {
	flex: 1;
	border: none;
	padding: 12px 16px;
	font-family: 'Poppins', sans-serif;
	font-size: 0.9rem;
	outline: none;
}

.mbmahim-404-search .search-submit {
	border: none;
	background: var(--mbmahim-primary, #0F172A);
	color: var(--mbmahim-white, #FFFFFF);
	padding: 0 20px;
	font-family: 'Poppins', sans-serif;
	font-weight: 500;
	cursor: pointer;
	transition: background 0.2s ease;
}

.mbmahim-404-search .search-submit:hover {
	background: var(--mbmahim-accent, #C8A96B);
	color: var(--mbmahim-primary, #0F172A);
}

/* =========================================================================
   RESPONSIVE
   ========================================================================= */
@media (max-width: 991.98px) {
	.mbmahim-single-content,
	.mbmahim-page-content {
		font-size: 0.98rem;
	}
}

/* Respect reduced-motion preference */
@media (prefers-reduced-motion: reduce) {
	.mbmahim-archive-card,
	.mbmahim-archive-thumb img,
	.mbmahim-archive-title,
	.page-numbers {
		transition: none;
	}
}


/* =========================================================================
   MOST VISITED SERVICES — suggested styles
   Merge this into /css/style.css (already enqueued in functions.php)
   Uses the same brand variables from header-suggested.css:
   --mbmahim-primary: #0F172A | --mbmahim-accent: #C8A96B
   --mbmahim-white: #FFFFFF   | --mbmahim-light: #F5F5F5
   ========================================================================= */

.mbmahim-most-visited-services {
	padding: 72px 0;
	background: var(--mbmahim-white);
}

.mbmahim-most-visited-services .container-fluid {
	padding-left: clamp(16px, 4vw, 48px);
	padding-right: clamp(16px, 4vw, 48px);
}

.mbmahim-section-heading {
	font-family: 'Montserrat', sans-serif;
	font-weight: 600;
	font-size: clamp(1.5rem, 2.5vw, 2rem);
	color: var(--mbmahim-primary);
	margin-bottom: 40px;
	position: relative;
	padding-bottom: 16px;
}

.mbmahim-section-heading::after {
	content: '';
	position: absolute;
	left: 0;
	bottom: 0;
	width: 48px;
	height: 3px;
	background: var(--mbmahim-accent);
}

/* ---- Grid ---------------------------------------------------------------- */
.mbmahim-services-grid {
	row-gap: 32px;
	column-gap: 24px;
}

/* Defensive fallback: guarantees spacing between cards even if Bootstrap's
   own column gutter padding isn't rendering correctly for some reason
   (e.g. a global CSS reset stripping default padding). */
.mbmahim-service-col {
	padding-left: 12px;
	padding-right: 12px;
	margin-bottom: 8px;
}

/* ---- Card ------------------------------------------------------------------ */
.mbmahim-service-card {
	display: flex;
	flex-direction: column;
	height: 100%;
	background: var(--mbmahim-white);
	border: 1px solid var(--mbmahim-border, #E5E5E5);
	border-radius: 8px;
	overflow: hidden;
	text-decoration: none;
	transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.mbmahim-service-card:hover {
	transform: translateY(-6px);
	box-shadow: 0 20px 40px rgba(15, 23, 42, 0.1);
	border-color: var(--mbmahim-accent);
}

.mbmahim-service-thumb {
	aspect-ratio: 4 / 3;
	overflow: hidden;
}

.mbmahim-service-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.4s ease;
}

.mbmahim-service-card:hover .mbmahim-service-thumb img {
	transform: scale(1.06);
}

.mbmahim-service-body {
	padding: 20px;
	display: flex;
	flex-direction: column;
	gap: 8px;
	flex: 1;
}

.mbmahim-service-title {
	font-family: 'Montserrat', sans-serif;
	font-weight: 600;
	font-size: 1.05rem;
	color: var(--mbmahim-primary);
	margin: 0;
	transition: color 0.2s ease;
}

.mbmahim-service-card:hover .mbmahim-service-title {
	color: var(--mbmahim-accent);
}

.mbmahim-service-excerpt {
	font-family: 'Poppins', sans-serif;
	font-size: 0.85rem;
	line-height: 1.6;
	color: var(--mbmahim-text-muted, #64748B);
	margin: 0;
	flex: 1;
}

.mbmahim-service-views {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 0.75rem;
	font-weight: 500;
	letter-spacing: 0.3px;
	text-transform: uppercase;
	color: var(--mbmahim-accent);
	margin-top: 8px;
}

.mbmahim-service-views i {
	font-size: 0.75rem;
}

/* ---- Responsive ------------------------------------------------------------ */
@media (max-width: 991.98px) {
	.mbmahim-most-visited-services {
		padding: 56px 0;
	}
}

@media (max-width: 575.98px) {
	.mbmahim-section-heading {
		margin-bottom: 28px;
	}
}

/* Respect reduced-motion preference */
@media (prefers-reduced-motion: reduce) {
	.mbmahim-service-card,
	.mbmahim-service-thumb img,
	.mbmahim-service-title {
		transition: none;
	}
}


/* =========================================================================
   MOST VISITED SERVICES — Owl Carousel variant
   Use this section INSTEAD of (or alongside, harmlessly) the grid version
   above if your live template is template-parts/most-visited-services-owl.php
   (section id="services", class .mbmahim-services-section / .mbmahim-services-owl)
   rather than the plain Bootstrap grid version. Card styles (.mbmahim-service-card
   etc.) are already defined above and are reused here — only the section
   wrapper and Owl Carousel's nav/dots need their own rules.
   ========================================================================= */
.mbmahim-services-section {
	padding: 72px 0;
	background: #FAF7F2;
}

.mbmahim-services-section .container-fluid {
	padding-left: clamp(16px, 4vw, 48px);
	padding-right: clamp(16px, 4vw, 48px);
}

.mbmahim-services-owl .item {
	padding: 6px;
}

/* ---- Owl Carousel nav arrows + dots (overriding Owl's default gray/blue theme) --- */
.mbmahim-services-owl .owl-nav {
	position: absolute;
	top: -76px;
	right: 0;
	display: flex;
	gap: 10px;
}

.mbmahim-services-owl .owl-nav button.owl-prev,
.mbmahim-services-owl .owl-nav button.owl-next {
	width: 42px;
	height: 42px;
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	background: var(--mbmahim-light, #F5F5F5) !important;
	color: var(--mbmahim-primary, #0F172A) !important;
	border-radius: 50%;
	font-size: 0.9rem;
	margin: 0;
	transition: background 0.2s ease, color 0.2s ease;
}

.mbmahim-services-owl .owl-nav button.owl-prev:hover,
.mbmahim-services-owl .owl-nav button.owl-next:hover {
	background: var(--mbmahim-accent, #C8A96B) !important;
	color: var(--mbmahim-white, #FFFFFF) !important;
}

.mbmahim-services-owl .owl-dots {
	display: flex;
	justify-content: center;
	gap: 8px;
	margin-top: 32px;
}

.mbmahim-services-owl .owl-dots .owl-dot span {
	width: 8px;
	height: 8px;
	margin: 0;
	background: var(--mbmahim-border, #E5E5E5);
	border-radius: 50%;
	transition: background 0.2s ease, width 0.2s ease;
}

.mbmahim-services-owl .owl-dots .owl-dot.active span {
	background: var(--mbmahim-accent, #C8A96B);
	width: 22px;
	border-radius: 4px;
}

@media (max-width: 767.98px) {
	.mbmahim-services-owl .owl-nav {
		position: static;
		justify-content: center;
		margin-top: 20px;
	}

	.mbmahim-services-section {
		padding: 56px 0;
	}
}

@media (prefers-reduced-motion: reduce) {
	.mbmahim-services-owl .owl-nav button {
		transition: none;
	}
}


/* =========================================================================
   FOOTER — suggested styles for footer.php
   Merge this into /css/style.css (already enqueued in functions.php)
   Uses the same brand variables defined in header-suggested.css:
   --mbmahim-primary: #0F172A | --mbmahim-accent: #C8A96B
   --mbmahim-white: #FFFFFF   | --mbmahim-light: #F5F5F5
   ========================================================================= */

/* ---- Footer shell -------------------------------------------------------- */
.mbmahim-footer {
	background: var(--mbmahim-primary);
	color: rgba(255, 255, 255, 0.72);
	font-family: 'Poppins', sans-serif;
	padding-top: 64px;
}

.mbmahim-footer .container-fluid {
	padding-left: clamp(16px, 4vw, 48px);
	padding-right: clamp(16px, 4vw, 48px);
}

.mbmahim-footer-row {
	padding-bottom: 48px;
	row-gap: 40px;
}

/* ---- Shared column heading ------------------------------------------------ */
.mbmahim-footer-heading {
	font-family: 'Montserrat', sans-serif;
	font-weight: 600;
	font-size: 1.05rem;
	letter-spacing: 0.4px;
	color: var(--mbmahim-white);
	margin-bottom: 20px;
	position: relative;
	padding-bottom: 12px;
}

.mbmahim-footer-heading::after {
	content: '';
	position: absolute;
	left: 0;
	bottom: 0;
	width: 36px;
	height: 2px;
	background: var(--mbmahim-accent);
}

/* =========================================================================
   COLUMN 1 — Logo + About
   ========================================================================= */
.mbmahim-footer-col-about {
	display: flex;
	flex-direction: column;
}

.mbmahim-footer-brand {
	display: inline-block;
	margin-bottom: 20px;
	text-decoration: none;
}

.mbmahim-footer-logo-img {
	max-height: 44px;
	width: auto;
	/* If your logo is dark/colored and needs to read on navy, uncomment: */
	/* filter: brightness(0) invert(1); */
}

.mbmahim-footer-logo-text {
	font-family: 'Montserrat', sans-serif;
	font-weight: 700;
	font-size: 1.4rem;
	color: var(--mbmahim-white);
}

.mbmahim-footer-about {
	font-size: 0.9rem;
	line-height: 1.75;
	color: rgba(255, 255, 255, 0.65);
	max-width: 360px;
	margin-bottom: 0;
}

/* =========================================================================
   COLUMN 2 — Bottom Menu
   ========================================================================= */
.mbmahim-footer-menu {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.mbmahim-footer-menu li a {
	display: inline-flex;
	align-items: center;
	font-size: 0.9rem;
	color: rgba(255, 255, 255, 0.68);
	transition: color 0.2s ease, padding-left 0.2s ease;
}

.mbmahim-footer-menu li a::before {
	content: '\f105'; /* fa-chevron-right */
	font-family: 'Font Awesome 6 Free';
	font-weight: 900;
	font-size: 0.7rem;
	color: var(--mbmahim-accent);
	margin-right: 10px;
	transition: margin-right 0.2s ease;
}

.mbmahim-footer-menu li a:hover {
	color: var(--mbmahim-white);
}

.mbmahim-footer-menu li a:hover::before {
	margin-right: 14px;
}

/* =========================================================================
   COLUMN 3 — Portfolio Gallery
   3 images per row × 2 rows = 6 total. Image-only — no visible captions or
   titles anywhere; the hyperlink is sized exactly to each thumbnail.
   ========================================================================= */
.mbmahim-footer-gallery {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 6px;
}

.mbmahim-footer-gallery-item {
	position: relative;
	display: block;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	border-radius: 4px;
	background: rgba(255, 255, 255, 0.06);
	line-height: 0; /* prevents inline-image whitespace gaps inside the cell */
}

.mbmahim-footer-gallery-item img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.35s ease;
}

.mbmahim-footer-gallery-placeholder {
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	color: rgba(255, 255, 255, 0.3);
	font-size: 1.1rem;
}

/* Hover state — a subtle gold tint + zoom, still no text/caption shown */
.mbmahim-footer-gallery-overlay {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(200, 169, 107, 0.85);
	color: var(--mbmahim-primary, #0F172A);
	font-size: 0.85rem;
	opacity: 0;
	transition: opacity 0.25s ease;
}

.mbmahim-footer-gallery-item:hover .mbmahim-footer-gallery-overlay {
	opacity: 1;
}

.mbmahim-footer-gallery-item:hover img {
	transform: scale(1.1);
}

.mbmahim-footer-gallery-empty {
	font-size: 0.85rem;
	color: rgba(255, 255, 255, 0.5);
}

/* =========================================================================
   COLUMN 4 — Contact + Social
   ========================================================================= */
.mbmahim-footer-contact {
	display: flex;
	flex-direction: column;
	gap: 16px;
	margin-bottom: 24px;
}

.mbmahim-footer-contact-item {
	display: flex;
	align-items: flex-start;
	gap: 14px;
	font-size: 0.9rem;
	line-height: 1.6;
}

.mbmahim-footer-contact-item i {
	flex-shrink: 0;
	width: 32px;
	height: 32px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: rgba(255, 255, 255, 0.08);
	color: var(--mbmahim-accent);
	border-radius: 50%;
	font-size: 0.8rem;
}

.mbmahim-footer-contact-item a {
	color: rgba(255, 255, 255, 0.72);
	transition: color 0.2s ease;
	text-decoration: none;
}

.mbmahim-footer-contact-item a:hover {
	color: var(--mbmahim-accent);
}

.mbmahim-footer-social {
	gap: 10px;
	margin-top: 20px;
}

.mbmahim-footer-social a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.08);
	color: var(--mbmahim-white);
	font-size: 0.85rem;
	transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
	text-decoration: none;
}

.mbmahim-footer-social a:hover {
	background: var(--mbmahim-accent);
	color: var(--mbmahim-primary);
	transform: translateY(-2px);
}

/* =========================================================================
   BOTTOM BAR — copyright
   ========================================================================= */
.mbmahim-footer-bottom {
	background: rgba(0, 0, 0, 0.18);
	border-top: 1px solid rgba(255, 255, 255, 0.08);
	padding: 18px 0;
}

.mbmahim-footer-bottom .container-fluid {
	padding-left: clamp(16px, 4vw, 48px);
	padding-right: clamp(16px, 4vw, 48px);
}

.mbmahim-footer-bottom p {
	font-size: 0.8rem;
	color: rgba(255, 255, 255, 0.55);
	text-align: center;
	letter-spacing: 0.3px;
}

/* =========================================================================
   RESPONSIVE
   ========================================================================= */
@media (max-width: 991.98px) {
	.mbmahim-footer {
		padding-top: 48px;
		text-align: left;
	}

	.mbmahim-footer-row {
		row-gap: 36px;
	}

	.mbmahim-footer-about {
		max-width: 100%;
	}
}

@media (max-width: 575.98px) {
	.mbmahim-footer-bottom p {
		font-size: 0.75rem;
		line-height: 1.5;
	}
}

/* Respect reduced-motion preference */
@media (prefers-reduced-motion: reduce) {
	.mbmahim-footer-menu li a,
	.mbmahim-footer-menu li a::before,
	.mbmahim-footer-contact-item a,
	.mbmahim-footer-social a {
		transition: none;
	}
}
/* =========================================================================
   CUSTOMER INFO BAR — suggested styles
   Merge into /css/style.css (already enqueued in functions.php)
   Uses brand variables: --mbmahim-primary #0F172A | --mbmahim-accent #C8A96B
   --mbmahim-white #FFFFFF | --mbmahim-light #F5F5F5
   ========================================================================= */

.mbmahim-info-bar {
	background: #FAF7F2; /* warm off-white/cream, distinct from pure white sections */
	border-top: 1px solid var(--mbmahim-border, #E5E5E5);
	border-bottom: 1px solid var(--mbmahim-border, #E5E5E5);
	padding: 28px 0;
}

.mbmahim-info-bar .container-fluid {
	padding-left: clamp(16px, 4vw, 48px);
	padding-right: clamp(16px, 4vw, 48px);
}

.mbmahim-info-bar-row {
	row-gap: 20px;
}

/* ---- Icon + text item --------------------------------------------------- */
.mbmahim-info-bar-item {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 4px 24px;
	position: relative;
}

/* Vertical divider between items (desktop only — see responsive section) */
.mbmahim-info-bar-item + .mbmahim-info-bar-item::before {
	content: '';
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	width: 1px;
	height: 42px;
	background: var(--mbmahim-border, #E5E5E5);
}

.mbmahim-info-bar-item:first-child {
	padding-left: 0;
}

.mbmahim-info-bar-icon {
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	font-size: 1.3rem;
	color: var(--mbmahim-accent, #C8A96B);
}

.mbmahim-info-bar-text h3 {
	font-family: 'Montserrat', sans-serif;
	font-weight: 700;
	font-size: 0.95rem;
	color: var(--mbmahim-primary, #0F172A);
	margin: 0 0 4px;
}

.mbmahim-info-bar-text p {
	font-family: 'Poppins', sans-serif;
	font-size: 0.82rem;
	color: var(--mbmahim-text-muted, #64748B);
	margin: 0;
	line-height: 1.5;
}

/* ---- CTA button ----------------------------------------------------------- */
.mbmahim-info-bar-cta {
	margin-left: auto;
	padding-left: 24px;
}

.mbmahim-info-bar-btn {
	display: inline-block;
	white-space: nowrap;
	background: var(--mbmahim-accent, #C8A96B);
	color: var(--mbmahim-primary, #0F172A);
	font-family: 'Poppins', sans-serif;
	font-weight: 600;
	font-size: 0.8rem;
	letter-spacing: 0.6px;
	text-transform: uppercase;
	text-decoration: none;
	padding: 16px 30px;
	border-radius: 4px;
	transition: background 0.2s ease, transform 0.2s ease;
	border: 0;
}

.mbmahim-info-bar-btn:hover {
	background: #b6944f;
	color: var(--mbmahim-primary, #0F172A);
	transform: translateY(-2px);
}

/* ---- Responsive ------------------------------------------------------------ */
@media (max-width: 991.98px) {
	.mbmahim-info-bar-item {
		padding: 4px 0;
		justify-content: flex-start;
	}

	.mbmahim-info-bar-item + .mbmahim-info-bar-item::before {
		display: none; /* dividers only make sense in a single horizontal row */
	}

	.mbmahim-info-bar-cta {
		margin-left: 0;
		padding-left: 0;
		width: 100%;
	}

	.mbmahim-info-bar-btn {
		display: block;
		text-align: center;
	}
}

@media (max-width: 575.98px) {
	.mbmahim-info-bar {
		padding: 24px 0;
	}

	.mbmahim-info-bar-text h3 {
		font-size: 0.9rem;
	}

	.mbmahim-info-bar-text p {
		font-size: 0.78rem;
	}
}

/* Respect reduced-motion preference */
@media (prefers-reduced-motion: reduce) {
	.mbmahim-info-bar-btn {
		transition: none;
	}
}

/* =========================================================================
   ABOUT SECTION — suggested styles
   template-parts/about-section.php — section#about / .mbmahim-about-section
   Uses brand variables: --mbmahim-primary #0F172A | --mbmahim-accent #C8A96B
   --mbmahim-white #FFFFFF | --mbmahim-light #F5F5F5
   ========================================================================= */

.mbmahim-about-section {
	padding: 80px 0;
	background: var(--mbmahim-white, #FFFFFF);
}

.mbmahim-about-section .container-fluid {
	padding-left: clamp(16px, 4vw, 48px);
	padding-right: clamp(16px, 4vw, 48px);
}

.mbmahim-about-row {
	row-gap: 40px;
}

/* =========================================================================
   COLUMN 1 — Sliding Photo Gallery
   ========================================================================= */
.mbmahim-about-gallery {
	border-radius: 10px;
	overflow: hidden;
	height: 400px;
	max-height: 400px;
	box-shadow: 0 20px 40px rgba(15, 23, 42, 0.12);
	position: relative; /* required for caption positioning */
}

.mbmahim-about-gallery .carousel-inner,
.mbmahim-about-gallery .carousel-item {
	height: 100%;
}

.mbmahim-about-gallery img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.mbmahim-about-gallery-placeholder {
	height: 300px;
	max-height: 300px;
	border-radius: 10px;
	background: var(--mbmahim-light, #F5F5F5);
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--mbmahim-text-muted, #64748B);
	font-size: 2.5rem;
}

.mbmahim-about-gallery-caption {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    margin: 0;
    padding: 0.5rem 0.75rem;
    background: rgba(0, 0, 0, 0.55);
    text-align: center;
}

.mbmahim-about-gallery-caption p {
    margin: 0;
    font-size: 13px;
    font-weight: 500;
    color: #fff;
    line-height: 1.4;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* =========================================================================
   COLUMN 2 — About Title + Content
   ========================================================================= */
.mbmahim-about-col-text {
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.mbmahim-about-title {
	font-family: 'Montserrat', sans-serif;
	font-weight: 700;
	font-size: clamp(1.5rem, 2.5vw, 2rem);
	color: var(--mbmahim-primary, #0F172A);
	margin-bottom: 20px;
	position: relative;
	padding-bottom: 18px;
}

.mbmahim-about-title::after {
	content: '';
	position: absolute;
	left: 0;
	bottom: 0;
	width: 48px;
	height: 3px;
	background: var(--mbmahim-accent, #C8A96B);
}

.mbmahim-about-content {
	font-family: 'Poppins', sans-serif;
	font-size: 0.98rem;
	line-height: 1.85;
	color: var(--mbmahim-text-muted, #64748B);
	margin: 0 0 24px;
}

.mbmahim-about-content-missing {
	font-style: italic;
	color: var(--mbmahim-accent, #C8A96B);
	background: var(--mbmahim-light, #F5F5F5);
	padding: 12px 16px;
	border-radius: 6px;
	font-size: 0.85rem !important;
}

/* Column 2's "Read More" link reuses .mbmahim-about-view-all (styled in
   COLUMN 3 below) — no extra rule needed beyond this spacing tweak. */
.mbmahim-about-col-text .mbmahim-about-view-all {
	margin-top: 4px;
}

/* =========================================================================
   COLUMN 3 — Latest Portfolio List
   ========================================================================= */
.mbmahim-about-portfolio-list {
	display: flex;
	flex-direction: column;
	gap: 18px;
	margin-bottom: 24px;
}

.mbmahim-about-portfolio-link {
	display: flex;
	align-items: center;
	gap: 14px;
	text-decoration: none;
}

.mbmahim-about-portfolio-thumb {
	flex-shrink: 0;
	width: 64px;
	height: 64px;
	border-radius: 8px;
	overflow: hidden;
	background: var(--mbmahim-light, #F5F5F5);
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--mbmahim-text-muted, #64748B);
}

.mbmahim-about-portfolio-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.3s ease;
}

.mbmahim-about-portfolio-link:hover .mbmahim-about-portfolio-thumb img {
	transform: scale(1.08);
}

.mbmahim-about-portfolio-text {
	display: flex;
	flex-direction: column;
	gap: 4px;
	min-width: 0; /* allows text truncation to work inside a flex child */
}

.mbmahim-about-portfolio-title {
	font-family: 'Montserrat', sans-serif;
	font-weight: 600;
	font-size: 0.92rem;
	color: var(--mbmahim-primary, #0F172A);
	transition: color 0.2s ease;
}

.mbmahim-about-portfolio-link:hover .mbmahim-about-portfolio-title {
	color: var(--mbmahim-accent, #C8A96B);
}

.mbmahim-about-portfolio-desc {
	font-family: 'Poppins', sans-serif;
	font-size: 0.8rem;
	line-height: 1.5;
	color: var(--mbmahim-text-muted, #64748B);
}

.mbmahim-about-view-all {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-family: 'Poppins', sans-serif;
	font-weight: 600;
	font-size: 0.85rem;
	letter-spacing: 0.3px;
	text-transform: uppercase;
	color: var(--mbmahim-primary, #0F172A);
	text-decoration: none;
	border-bottom: 2px solid var(--mbmahim-accent, #C8A96B);
	padding-bottom: 4px;
	transition: color 0.2s ease, gap 0.2s ease;
}

.mbmahim-about-view-all:hover {
	color: var(--mbmahim-accent, #C8A96B);
	gap: 12px;
}

.mbmahim-about-portfolio-empty {
	font-family: 'Poppins', sans-serif;
	font-size: 0.9rem;
	color: var(--mbmahim-text-muted, #64748B);
}

/* =========================================================================
   RESPONSIVE
   ========================================================================= */
@media (max-width: 991.98px) {
	.mbmahim-about-section {
		padding: 56px 0;
	}

	.mbmahim-about-gallery,
	.mbmahim-about-gallery-placeholder {
		max-width: 480px;
		margin: 0 auto;
	}
}

/* Respect reduced-motion preference */
@media (prefers-reduced-motion: reduce) {
	.mbmahim-about-portfolio-thumb img,
	.mbmahim-about-portfolio-title,
	.mbmahim-about-view-all {
		transition: none;
	}
}

/* =========================================================================
   FEEDBACK (TESTIMONIALS) — Owl Carousel, suggested styles
   template-parts/feedback-section.php — section#feedback
   Uses brand variables: --mbmahim-primary #0F172A | --mbmahim-accent #C8A96B
   --mbmahim-white #FFFFFF | --mbmahim-light #F5F5F5
   ========================================================================= */

.mbmahim-feedback-section {
	padding: 80px 0;

}

.mbmahim-feedback-section .container-fluid {
	padding-left: clamp(16px, 4vw, 48px);
	padding-right: clamp(16px, 4vw, 48px);
}

.mbmahim-feedback-owl .item {
	padding: 6px;
}

/* ---- Card ---------------------------------------------------------------- */
.mbmahim-feedback-card {
	position: relative;
	height: 100%;
	background: var(--mbmahim-white, #FFFFFF);
	border-radius: 10px;
	padding: 32px 28px;
	box-shadow: 0 10px 30px rgba(15, 23, 42, 0.06);
}

.mbmahim-feedback-quote-icon {
	font-size: 1.6rem;
	color: var(--mbmahim-accent, #C8A96B);
	opacity: 0.35;
	margin-bottom: 16px;
	display: block;
}

.mbmahim-feedback-message {
	font-family: 'Poppins', sans-serif;
	font-size: 0.92rem;
	line-height: 1.75;
	color: var(--mbmahim-text-muted, #64748B);
	margin-bottom: 24px;
	min-height: 96px;
}

/* ---- Person (photo + name + designation) --------------------------------- */
.mbmahim-feedback-person {
	display: flex;
	align-items: center;
	gap: 14px;
	padding-top: 20px;
	border-top: 1px solid var(--mbmahim-border, #E5E5E5);
}

.mbmahim-feedback-photo {
	flex-shrink: 0;
	width: 52px;
	height: 52px;
	border-radius: 50%;
	overflow: hidden;
	background: var(--mbmahim-light, #F5F5F5);
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--mbmahim-text-muted, #64748B);
	font-size: 1.2rem;
}

.mbmahim-feedback-photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.mbmahim-feedback-person-text {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.mbmahim-feedback-name {
	font-family: 'Montserrat', sans-serif;
	font-weight: 600;
	font-size: 0.95rem;
	color: var(--mbmahim-primary, #0F172A);
}

.mbmahim-feedback-designation {
	font-family: 'Poppins', sans-serif;
	font-size: 0.78rem;
	color: var(--mbmahim-accent, #C8A96B);
	text-transform: uppercase;
	letter-spacing: 0.3px;
}

/* =========================================================================
   OWL CAROUSEL — override default theme (nav arrows + dots)
   ========================================================================= */
.mbmahim-feedback-owl .owl-nav {
	position: absolute;
	top: -76px;
	right: 0;
	display: flex;
	gap: 10px;
}

.mbmahim-feedback-owl .owl-nav button.owl-prev,
.mbmahim-feedback-owl .owl-nav button.owl-next {
	width: 42px;
	height: 42px;
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	background: var(--mbmahim-white, #FFFFFF) !important;
	color: var(--mbmahim-primary, #0F172A) !important;
	border-radius: 50%;
	font-size: 0.9rem;
	margin: 0;
	transition: background 0.2s ease, color 0.2s ease;
}

.mbmahim-feedback-owl .owl-nav button.owl-prev:hover,
.mbmahim-feedback-owl .owl-nav button.owl-next:hover {
	background: var(--mbmahim-accent, #C8A96B) !important;
	color: var(--mbmahim-white, #FFFFFF) !important;
}

.mbmahim-feedback-owl .owl-dots {
	display: flex;
	justify-content: center;
	gap: 8px;
	margin-top: 32px;
}

.mbmahim-feedback-owl .owl-dots .owl-dot span {
	width: 8px;
	height: 8px;
	margin: 0;
	background: var(--mbmahim-border, #E5E5E5);
	border-radius: 50%;
	transition: background 0.2s ease, width 0.2s ease;
}

.mbmahim-feedback-owl .owl-dots .owl-dot.active span {
	background: var(--mbmahim-accent, #C8A96B);
	width: 22px;
	border-radius: 4px;
}

/* ---- Responsive ------------------------------------------------------------ */
@media (max-width: 767.98px) {
	.mbmahim-feedback-owl .owl-nav {
		position: static;
		justify-content: center;
		margin-top: 20px;
	}

	.mbmahim-feedback-section {
		padding: 56px 0;
	}
}

/* Respect reduced-motion preference */
@media (prefers-reduced-motion: reduce) {
	.mbmahim-feedback-owl .owl-nav button {
		transition: none;
	}
}

/* =========================================================================
   QUOTE / CONSULTATION MODALS — suggested styles
   #mbmahimQuoteModal (header.php) + #mbmahimConsultationModal (footer.php)
   Uses brand variables: --mbmahim-primary #0F172A | --mbmahim-accent #C8A96B
   --mbmahim-white #FFFFFF | --mbmahim-light #F5F5F5
   ========================================================================= */

.mbmahim-modal .modal-content {
	border: none;
	border-radius: 10px;
	overflow: hidden;
}

.mbmahim-modal .modal-header {
	background: var(--mbmahim-primary, #0F172A);
	border-bottom: none;
	padding: 22px 28px;
}

.mbmahim-modal .modal-title {
	font-family: 'Montserrat', sans-serif;
	font-weight: 700;
	color: var(--mbmahim-white, #FFFFFF);
}

.mbmahim-modal .btn-close {
	filter: brightness(0) invert(1);
	opacity: 0.8;
}

.mbmahim-modal .btn-close:hover {
	opacity: 1;
}

.mbmahim-modal .modal-body {
	padding: 28px;
}

.mbmahim-modal .form-label {
	font-family: 'Poppins', sans-serif;
	font-weight: 500;
	font-size: 0.85rem;
	color: var(--mbmahim-primary, #0F172A);
	margin-bottom: 6px;
}

.mbmahim-modal .form-control {
	font-family: 'Poppins', sans-serif;
	font-size: 0.9rem;
	border: 1px solid var(--mbmahim-border, #E5E5E5);
	border-radius: 6px;
	padding: 10px 14px;
}

.mbmahim-modal .form-control:focus {
	border-color: var(--mbmahim-accent, #C8A96B);
	box-shadow: 0 0 0 3px rgba(200, 169, 107, 0.15);
}

.mbmahim-modal-submit-btn {
	display: block;
	width: 100%;
	background: var(--mbmahim-accent, #C8A96B);
	color: var(--mbmahim-primary, #0F172A);
	font-family: 'Poppins', sans-serif;
	font-weight: 600;
	font-size: 0.9rem;
	letter-spacing: 0.4px;
	text-transform: uppercase;
	border: none;
	border-radius: 6px;
	padding: 14px;
	margin-top: 6px;
	cursor: pointer;
	transition: background 0.2s ease, opacity 0.2s ease;
}

.mbmahim-modal-submit-btn:hover:not(:disabled) {
	background: #b6944f;
}

.mbmahim-modal-submit-btn:disabled {
	opacity: 0.6;
	cursor: not-allowed;
}

.mbmahim-modal-form-response {
	font-family: 'Poppins', sans-serif;
	font-size: 0.85rem;
	margin-top: 12px;
	min-height: 1.2em;
}

.mbmahim-modal-form-response.is-success {
	color: #2f7d4f;
}

.mbmahim-modal-form-response.is-error {
	color: #c0392b;
}

/* =========================================================================
   Trigger buttons
   ========================================================================= */

/* Footer "Get Free Consultation" button — Column 1, below social icons */
.mbmahim-footer-consultation-btn {
	display: inline-block;
	margin-top: 20px;
	background: var(--mbmahim-accent, #C8A96B);
	color: var(--mbmahim-primary, #0F172A);
	font-family: 'Poppins', sans-serif;
	font-weight: 600;
	font-size: 0.8rem;
	letter-spacing: 0.5px;
	text-transform: uppercase;
	border: none;
	border-radius: 4px;
	padding: 12px 24px;
	cursor: pointer;
	transition: background 0.2s ease, transform 0.2s ease;
}

.mbmahim-footer-consultation-btn:hover {
	background: #b6944f;
	transform: translateY(-2px);
}

/* Header "Get a Quote" button is already styled as .mbmahim-cta-btn —
   changing it from <a> to <button type="button"> doesn't require new CSS,
   the existing .mbmahim-cta-btn rules apply the same either way. */
   


/* =========================================================================
   CONTACT PAGE — suggested styles (page-contact.php)
   Uses brand variables: --mbmahim-primary #0F172A | --mbmahim-accent #C8A96B
   --mbmahim-white #FFFFFF | --mbmahim-light #F5F5F5
   ========================================================================= */

/* ---- Hero banner (no breadcrumb trail on this page) --------------------- */
.mbmahim-contact-hero {
	position: relative;
	min-height: 220px;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	display: flex;
	align-items: center;
}

.mbmahim-contact-hero.mbmahim-contact-hero-noimage {
	background: var(--mbmahim-light, #F5F5F5);
}

.mbmahim-contact-hero-overlay {
	width: 100%;
	min-height: 220px;
	display: flex;
	align-items: center;
	background: linear-gradient(
		90deg,
		rgba(255, 255, 255, 0.96) 0%,
		rgba(255, 255, 255, 0.85) 45%,
		rgba(255, 255, 255, 0.1) 80%
	);
}

.mbmahim-contact-hero .container-fluid {
	padding-left: clamp(16px, 4vw, 48px);
	padding-right: clamp(16px, 4vw, 48px);
	padding-top: 32px;
	padding-bottom: 32px;
}

.mbmahim-contact-hero-title {
	font-family: 'Montserrat', sans-serif;
	font-weight: 800;
	font-size: clamp(2rem, 4vw, 2.75rem);
	letter-spacing: 1px;
	color: var(--mbmahim-primary, #0F172A);
	margin-bottom: 12px;
	position: relative;
	padding-bottom: 16px;
	max-width: 640px;
}

.mbmahim-contact-hero-title::after {
	content: '';
	position: absolute;
	left: 0;
	bottom: 0;
	width: 56px;
	height: 3px;
	background: var(--mbmahim-accent, #C8A96B);
}

.mbmahim-contact-hero-subtitle {
	font-family: 'Poppins', sans-serif;
	font-size: 0.98rem;
	line-height: 1.6;
	color: var(--mbmahim-text-muted, #64748B);
	max-width: 500px;
	margin: 0;
}

/* ---- Main 3-column section ------------------------------------------------ */
.mbmahim-contact-main {
	padding: 64px 0;
	background: var(--mbmahim-white, #FFFFFF);
}

.mbmahim-contact-main .container-fluid {
	padding-left: clamp(16px, 4vw, 48px);
	padding-right: clamp(16px, 4vw, 48px);
}

.mbmahim-contact-col {
	padding: 0 28px;
}

.mbmahim-contact-col:first-child {
	padding-left: 0;
}

.mbmahim-contact-col:last-child {
	border-right: none;
}

.mbmahim-contact-col-heading {
	font-family: 'Montserrat', sans-serif;
	font-weight: 700;
	font-size: 1.1rem;
	letter-spacing: 0.5px;
	text-transform: uppercase;
	color: var(--mbmahim-primary, #0F172A);
	margin-bottom: 24px;
	position: relative;
	padding-bottom: 14px;
}

.mbmahim-contact-col-heading::after {
	content: '';
	position: absolute;
	left: 0;
	bottom: 0;
	width: 40px;
	height: 3px;
	background: var(--mbmahim-accent, #C8A96B);
}

/* =========================================================================
   COLUMN 1 — Get In Touch
   ========================================================================= */
.mbmahim-contact-info-list {
	position: relative;
	margin: 0;
	padding: 0;
}

.mbmahim-contact-info-item {
	display: flex;
	align-items: flex-start;
	gap: 16px;
	position: relative;
	padding-bottom: 28px;
}

/* Connecting vertical line through the icons, like the reference image */
.mbmahim-contact-info-item:not(:last-child)::before {
	content: '';
	position: absolute;
	left: 22px;
	top: 46px;
	bottom: 0;
	width: 1px;
	background: var(--mbmahim-border, #E5E5E5);
}

.mbmahim-contact-info-icon {
	flex-shrink: 0;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: var(--mbmahim-primary, #0F172A);
	color: var(--mbmahim-white, #FFFFFF);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1rem;
	position: relative;
	z-index: 1;
}

.mbmahim-contact-info-item h4 {
	font-family: 'Montserrat', sans-serif;
	font-weight: 700;
	font-size: 0.85rem;
	letter-spacing: 0.4px;
	text-transform: uppercase;
	color: var(--mbmahim-primary, #0F172A);
	margin-bottom: 6px;
}

.mbmahim-contact-info-item p {
	font-family: 'Poppins', sans-serif;
	font-size: 0.9rem;
	line-height: 1.6;
	color: var(--mbmahim-text-muted, #64748B);
	margin: 0;
}

.mbmahim-contact-info-item p a {
	color: var(--mbmahim-text-muted, #64748B);
	text-decoration: none;
	transition: color 0.2s ease;
}

.mbmahim-contact-info-item p a:hover {
	color: var(--mbmahim-accent, #C8A96B);
}

.mbmahim-contact-social {
	display: flex;
	gap: 10px;
	margin-top: 6px;
}

.mbmahim-contact-social a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: var(--mbmahim-primary, #0F172A);
	color: var(--mbmahim-white, #FFFFFF);
	font-size: 0.8rem;
	transition: background 0.2s ease, transform 0.2s ease;
	text-decoration: none;
}

.mbmahim-contact-social a:hover {
	background: var(--mbmahim-accent, #C8A96B);
	transform: translateY(-2px);
}

/* =========================================================================
   COLUMN 2 — Send Us a Message
   ========================================================================= */
.mbmahim-contact-form .mbmahim-contact-input-wrap {
	position: relative;
	margin-bottom: 16px;
}

.mbmahim-contact-form .form-control {
	font-family: 'Poppins', sans-serif;
	font-size: 0.9rem;
	border: 1px solid var(--mbmahim-border, #E5E5E5);
	border-radius: 6px;
	padding: 13px 40px 13px 16px;
	width: 100%;
}

.mbmahim-contact-form .form-control:focus {
	outline: none;
	border-color: var(--mbmahim-accent, #C8A96B);
	box-shadow: 0 0 0 3px rgba(200, 169, 107, 0.15);
}

.mbmahim-contact-input-wrap > i {
	position: absolute;
	right: 16px;
	top: 16px;
	color: var(--mbmahim-text-muted, #64748B);
	font-size: 0.9rem;
	pointer-events: none;
}

.mbmahim-contact-textarea-wrap textarea {
	resize: vertical;
	min-height: 120px;
}

.mbmahim-contact-textarea-wrap > i {
	top: 16px;
}

.mbmahim-contact-submit-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	width: auto;
	padding: 14px 32px;
}

/* =========================================================================
   COLUMN 3 — Our Location
   ========================================================================= */
.mbmahim-contact-map {
	border-radius: 8px;
	overflow: hidden;
	margin-bottom: 24px;
	border: 1px solid var(--mbmahim-border, #E5E5E5);
}

.mbmahim-contact-map iframe {
	display: block;
}

.mbmahim-contact-map-placeholder {
	height: 220px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 12px;
	background: var(--mbmahim-light, #F5F5F5);
	color: var(--mbmahim-text-muted, #64748B);
	text-align: center;
	padding: 24px;
}

.mbmahim-contact-map-placeholder i {
	font-size: 2rem;
}

.mbmahim-contact-map-placeholder p {
	font-size: 0.8rem;
	margin: 0;
}

.mbmahim-contact-why {
	border: 1px solid var(--mbmahim-border, #E5E5E5);
	border-radius: 8px;
	padding: 20px 24px;
}

.mbmahim-contact-why h3 {
	display: flex;
	align-items: center;
	gap: 10px;
	font-family: 'Montserrat', sans-serif;
	font-weight: 700;
	font-size: 0.95rem;
	text-transform: uppercase;
	letter-spacing: 0.4px;
	color: var(--mbmahim-primary, #0F172A);
	margin-bottom: 16px;
}

.mbmahim-contact-why h3 i {
	color: var(--mbmahim-primary, #0F172A);
	font-size: 1.1rem;
}

.mbmahim-contact-why-list {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 10px 16px;
	margin: 0;
	padding: 0;
}

.mbmahim-contact-why-list li {
	font-family: 'Poppins', sans-serif;
	font-size: 0.85rem;
	color: var(--mbmahim-text-muted, #64748B);
	display: flex;
	align-items: flex-start;
	gap: 8px;
}

.mbmahim-contact-why-list li i {
	color: var(--mbmahim-accent, #C8A96B);
	margin-top: 2px;
	flex-shrink: 0;
}

/* ---- Responsive ------------------------------------------------------------ */
@media (max-width: 991.98px) {
	.mbmahim-contact-col {
		padding: 0;
		border-right: none;
		border-bottom: 1px solid var(--mbmahim-border, #E5E5E5);
		padding-bottom: 40px;
		margin-bottom: 40px;
	}

	.mbmahim-contact-col:last-child {
		border-bottom: none;
		padding-bottom: 0;
		margin-bottom: 0;
	}

	.mbmahim-contact-hero,
	.mbmahim-contact-hero-overlay {
		min-height: auto;
	}

	.mbmahim-contact-hero-overlay {
		background: rgba(255, 255, 255, 0.94);
	}
}

@media (max-width: 575.98px) {
	.mbmahim-contact-why-list {
		grid-template-columns: 1fr;
	}
}

/* Respect reduced-motion preference */
@media (prefers-reduced-motion: reduce) {
	.mbmahim-contact-social a {
		transition: none;
	}
}


/* =========================================================================
   FLOATING WHATSAPP BUTTON — suggested styles
   footer.php — .mbmahim-whatsapp-float
   Uses WhatsApp's own brand green for instant recognizability, not the
   theme's navy/gold — this is a deliberate exception since users expect
   WhatsApp's familiar visual language, not a rebranded chat icon.
   ========================================================================= */
 
.mbmahim-whatsapp-float {
	position: fixed;
	bottom: 24px;
	right: 24px;
	z-index: 1100;
	width: 58px;
	height: 58px;
	border-radius: 50%;
	background: #25D366;
	color: #FFFFFF;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1.7rem;
	box-shadow: 0 8px 20px rgba(37, 211, 102, 0.4);
	text-decoration: none;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}
 
.mbmahim-whatsapp-float:hover {
	color: #FFFFFF;
	transform: scale(1.08);
	box-shadow: 0 10px 26px rgba(37, 211, 102, 0.55);
}
 
.mbmahim-whatsapp-float i {
	position: relative;
	z-index: 2;
}
 
/* Pulsing ring behind the icon, drawing the eye without being obnoxious */
.mbmahim-whatsapp-pulse {
	position: absolute;
	inset: 0;
	border-radius: 50%;
	background: #25D366;
	opacity: 0.6;
	animation: mbmahimWhatsappPulse 2.2s ease-out infinite;
	z-index: 1;
}
 
@keyframes mbmahimWhatsappPulse {
	0% {
		transform: scale(1);
		opacity: 0.6;
	}
	100% {
		transform: scale(1.6);
		opacity: 0;
	}
}
 
/* ---- Responsive ------------------------------------------------------------ */
@media (max-width: 575.98px) {
	.mbmahim-whatsapp-float {
		width: 52px;
		height: 52px;
		font-size: 1.5rem;
		bottom: 16px;
		right: 16px;
	}
}
 
/* Respect reduced-motion preference */
@media (prefers-reduced-motion: reduce) {
	.mbmahim-whatsapp-float {
		transition: none;
	}
 
	.mbmahim-whatsapp-pulse {
		animation: none;
		display: none;
	}
}