.bella-elementor {
	--bella-ink: #16161a;
	--bella-body: #3f4045;
	--bella-muted: #6b6d72;
	--bella-line: #e6eaee;
	--bella-sunken: #f5f7fa;
	--bella-accent: var(--theme-color-text_link, #6f51c7);
	--bella-accent-dark: #0b3d7c;
	--bella-radius: 16px;
	--bella-shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 12px 32px -12px rgba(16, 24, 40, .12);
	--bella-shadow-lift: 0 2px 4px rgba(16, 24, 40, .05), 0 20px 44px -16px rgba(16, 24, 40, .18);

	/* ~68ch. Text holds to this; images and galleries use the full container. */
	--bella-measure: 42rem;
	--bella-gap: clamp(1rem, .6rem + 1.2vw, 1.5rem);
}

/* Dat-hen should follow the same blue accent as the modern homepage/header. */
.page-id-36690.bella-elementor {
	--bella-accent: #0f4f9e;
	--bella-accent-dark: #0b3d7c;
}

/* The bands reach past the container with a 100vw pseudo-element. clip rather
   than hidden: it does not create a scroll container, so any sticky element
   inside the page keeps working. */
.bella-elementor .page_content_wrap {
	overflow-x: clip;
	background-color: #fff;
}

.bella-elementor .content {
	width: 100%;
	max-width: none;
	float: none;
}

/* ------------------------------------------------------------------ bands -- */

.bella-elementor .elementor-section.bella-band {
	position: relative;
}

.bella-elementor .elementor-section.bella-band::before {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: calc(50% - 50vw);
	width: 100vw;
	background-color: var(--bella-sunken);
}

/* Without this the tint would paint over the widgets. */
.bella-elementor .elementor-section.bella-band > .elementor-container {
	position: relative;
	z-index: 1;
}

/* Vertical rhythm. Adjacent bands of the same colour read as one block, which
   is why the heading and the photos under it can sit in separate sections. */
.bella-elementor .elementor-section-boxed {
	padding-top: clamp(2.5rem, 1.5rem + 3vw, 4rem);
	padding-bottom: clamp(2.5rem, 1.5rem + 3vw, 4rem);
}

.bella-elementor .bella-band + .bella-band {
	padding-top: 0;
}

.bella-elementor .elementor-section:not(.bella-band) + .elementor-section:not(.bella-band) {
	padding-top: 0;
}

/* ------------------------------------------------------------------- hero -- */

/* The header is positioned over the page, so the first band has to clear it. */
.bella-elementor .bella-hero {
	padding-top: clamp(7rem, 5rem + 8vw, 10.5rem);
	padding-bottom: clamp(3rem, 2rem + 3vw, 4.5rem);
	text-align: center;
}

.bella-elementor .bella-hero .elementor-widget-heading .elementor-heading-title {
	font-size: clamp(1.9rem, 1.1rem + 2.6vw, 3rem);
	line-height: 1.12;
	letter-spacing: -.015em;
	color: var(--bella-ink);
}

/* A short accent rule marks where the page proper begins. */
.bella-elementor .bella-hero .elementor-widget-heading:first-child .elementor-heading-title::after {
	content: "";
	display: block;
	width: 3.5rem;
	height: 3px;
	margin: 1.25rem auto 0;
	border-radius: 2px;
	background-color: var(--bella-accent);
}

.bella-elementor .bella-hero .elementor-widget-text-editor {
	font-size: clamp(1.0625rem, 1rem + .3vw, 1.1875rem);
	color: var(--bella-muted);
}

.bella-elementor .bella-hero .elementor-widget-text-editor p {
	text-align: center;
}

/* --------------------------------------------------------------- typography -- */

.bella-elementor .elementor-widget-heading,
.bella-elementor .elementor-widget-text-editor {
	max-width: var(--bella-measure);
	margin-left: auto;
	margin-right: auto;
}

.bella-elementor .elementor-widget-heading .elementor-heading-title {
	color: var(--bella-ink);
	font-weight: 700;
	letter-spacing: -.01em;
	text-transform: none;
}

.bella-elementor .bella-prose:not(.bella-hero) .elementor-widget-heading .elementor-heading-title {
	font-size: clamp(1.375rem, 1.15rem + .8vw, 1.75rem);
	line-height: 1.25;
	margin-bottom: .25rem;
}

.bella-elementor .elementor-widget-text-editor {
	color: var(--bella-body);
	font-size: 1.0625rem;
	line-height: 1.75;
}

.bella-elementor .elementor-widget-text-editor p {
	margin: 0 0 1.15em;
}

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

/* The imported HTML centres several long paragraphs — an artefact of the old
   editor, and unreadable at this measure. The alignment is an inline style on
   the <p>, so nothing but !important can pull it back. */
.bella-elementor .bella-prose:not(.bella-hero) .elementor-widget-text-editor p[style*="center"] {
	text-align: left !important;
}

.bella-elementor .bella-hero .elementor-widget-text-editor p:not(:first-child),
.bella-elementor .bella-hero:not(.bella-deck) .elementor-widget-text-editor p {
	text-align: left !important;
}

.bella-elementor .elementor-widget-text-editor p:has(> em:only-child),
.bella-elementor .elementor-widget-text-editor p:has(> i:only-child) {
	margin: 1.75rem 0;
	padding-left: 1.25rem;
	border-left: 3px solid var(--bella-accent);
	color: var(--bella-ink);
	font-size: 1.125rem;
	line-height: 1.65;
	text-align: left !important;
}

.bella-elementor .elementor-widget-text-editor p:has(> em:only-child) em,
.bella-elementor .elementor-widget-text-editor p:has(> i:only-child) i {
	font-style: normal;
}

.bella-elementor .elementor-widget-text-editor a {
	color: var(--bella-accent);
	text-decoration: none;
	box-shadow: inset 0 -1px 0 0 color-mix(in srgb, var(--bella-accent) 35%, transparent);
	transition: box-shadow .18s ease, color .18s ease;
}

.bella-elementor .elementor-widget-text-editor a:hover {
	box-shadow: inset 0 -2px 0 0 var(--bella-accent);
}

/* ----------------------------------------------------------------- images -- */

.bella-elementor .elementor-widget-image img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--bella-radius);
	box-shadow: var(--bella-shadow);
}

/* A lone image inside running text keeps the reading measure rather than
   spanning the whole container. */
.bella-elementor .bella-prose .elementor-widget-image {
	max-width: min(100%, 34rem);
	margin-left: auto;
	margin-right: auto;
}

/* An image in the hero is the page's opening picture — the booking page's map —
   and 34rem makes it look like an afterthought under the title. */
.bella-elementor .bella-hero .elementor-widget-image {
	max-width: min(100%, 48rem);
	margin-top: 1.75rem;
}

/* A linked image is a call-to-action button, not a photo: the converter marks
   it so it can keep its own size. Stretched to the column the 320px gif was
   scaled up 1.7x and showed every pixel of it. */
.bella-elementor .elementor-widget-image.bella-cta {
	max-width: 100%;
	margin: 2rem auto 0;
	text-align: center;
}

.bella-elementor .elementor-widget-image.bella-cta img {
	width: auto;
	max-width: 100%;
	border-radius: 0;
	box-shadow: none;
	transition: transform .2s ease;
}

.bella-elementor .elementor-widget-image.bella-cta a:hover img {
	transform: translateY(-2px);
}

/* ----------------------------------------------------------------- tables -- */

/* The pricing page is one long table, sitting in a text-editor widget. It has
   to escape the reading measure the rest of the prose is held to: three columns
   in 42rem wraps every service name over four lines. */
.bella-elementor .bella-table .elementor-widget-text-editor {
	max-width: min(56rem, 100%);
	font-size: 1rem;
}

.bella-elementor .elementor-widget-text-editor :is(.wp-block-table, figure.wp-block-table) {
	margin: 0;
	overflow-x: auto;
	background-color: #fff;
	border: 1px solid var(--bella-line);
	border-radius: var(--bella-radius);
	
	align-items: flex-start;
}

.bella-elementor .elementor-widget-text-editor table {
	width: 100%;
	margin: 0;
	border: 0;
	border-collapse: collapse;
	font-size: .9375rem;
	/* Without `fixed` the browser sizes columns by content and hands the price
	   column more room than the service names. Fixed makes the widths below
	   actually apply. */
	table-layout: fixed;
}

/* No `position: sticky` here — the site header is already sticky, and a sticky
   table head slides underneath it. */
.bella-elementor .elementor-widget-text-editor :is(thead th, tr:first-child th) {
	padding: .9375rem 1.25rem;
	color: #fff;
	font-size: .75rem;
	font-weight: 600;
	letter-spacing: .06em;
	text-align: left;
	text-transform: uppercase;
	background-color: var(--bella-ink);
	border-bottom: 0;
}

/* The theme draws a box around every cell; only the horizontal rules earn their
   keep, and vertical borders on the head row alone made it read as a separate
   table from the body. */
.bella-elementor .elementor-widget-text-editor :is(th, td) {
	padding: .9375rem 1.25rem;
	border: 0;
	border-bottom: 1px solid var(--bella-line);
	vertical-align: middle;
}

/* Column widths: the service name carries the most text and is what people
   read, so it gets the room. */
.bella-elementor .elementor-widget-text-editor table :is(th, td):first-child {
	width: 54%;
}

.bella-elementor .elementor-widget-text-editor table :is(th, td):nth-child(2) {
	width: 14%;
}

.bella-elementor .elementor-widget-text-editor table :is(th, td):nth-child(3) {
	width: 32%;
}

.bella-elementor .elementor-widget-text-editor tbody td:first-child {
	color: var(--bella-ink);
	font-weight: 500;
}

/* Second column ("2 hàm", "1 răng") is a qualifier, not information people look
   for — it recedes. */
.bella-elementor .elementor-widget-text-editor tbody td:nth-child(2) {
	color: var(--bella-muted);
	font-size: .875rem;
	white-space: nowrap;
}

/* Third column: the price. Tabular figures keep the digits in vertical columns
   so the numbers can be compared down the page. */
.bella-elementor .elementor-widget-text-editor tbody td:nth-child(3) {
	color: var(--bella-ink);
	font-weight: 600;
	font-variant-numeric: tabular-nums;
}

/* Section headers ("TRÁM RĂNG", "NHỔ RĂNG") are ordinary rows whose last two
   cells are empty. Left unstyled they look like a service with a missing price;
   as a tinted band they divide the list into readable sections. */
.bella-elementor .elementor-widget-text-editor tbody tr:has(td:nth-child(2):empty) td {
	padding-top: 1.125rem;
	padding-bottom: 1.125rem;
	color: var(--bella-accent);
	font-size: .8125rem;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
	background-color: color-mix(in srgb, var(--bella-accent) 7%, transparent);
	border-bottom-color: color-mix(in srgb, var(--bella-accent) 18%, transparent);
}

@supports not (background: color-mix(in srgb, red 7%, transparent)) {
	.bella-elementor .elementor-widget-text-editor tbody tr:has(td:nth-child(2):empty) td {
		background-color: #f4f1fc;
	}
}

.bella-elementor .elementor-widget-text-editor tbody tr:last-child td {
	border-bottom: 0;
}

/* Row hover only on the data rows — highlighting a section band does nothing
   useful and makes it look clickable. */
.bella-elementor .elementor-widget-text-editor tbody tr:not(:has(td:nth-child(2):empty)):hover td {
	background-color: color-mix(in srgb, var(--bella-accent) 4%, transparent);
}

/* The underlined link treatment above is for running prose; inside a dense
   price list it turns rows into a ladder. Several section headers are links. */
.bella-elementor .elementor-widget-text-editor table a {
	color: inherit;
	box-shadow: none;
}

.bella-elementor .elementor-widget-text-editor table a:hover {
	color: var(--bella-accent);
	box-shadow: inset 0 -1px 0 0 currentColor;
}

/* ------------------------------------------------------------------- form -- */

/* Booking the appointment is the whole job of that page, so the form gets a
   card of its own and the address, phone and opening hours sit beside it rather
   than underneath — build.php pairs them into one 60/40 section. */
.bella-elementor .bella-form > .elementor-container {
	gap: clamp(1.5rem, 1rem + 2vw, 3rem);
	align-items: flex-start;
}

/* Elementor applies the column gap as padding on the inner wrapper, which would
   inset each card's background away from its own edge. */
.bella-elementor .bella-form .elementor-column > .elementor-element-populated {
	padding: 0;
}

.bella-elementor .bella-form :is(.elementor-widget-text-editor, .elementor-widget-heading) {
	max-width: none;
}

.bella-elementor .bella-form form {
	margin: 0;
	padding: clamp(1.5rem, 1rem + 2vw, 2.25rem);
	background-color: #fff;
	border: 1px solid var(--bella-line);
	border-radius: var(--bella-radius);
	box-shadow: var(--bella-shadow);
}

/* The imported markup separates the fields with <br>. Laying the labels and
   controls out as blocks does that better, and the breaks would double the
   gaps on top of it. */
.bella-elementor .bella-form form br {
	display: none;
}

.bella-elementor .bella-form form label {
	display: block;
	margin-bottom: .375rem;
	color: var(--bella-ink);
	font-size: .875rem;
	font-weight: 600;
	letter-spacing: -.005em;
}

/* :not([type="hidden"]) is load-bearing: an author `display: block` overrides
   the UA rule that hides those, and the two hidden fields would show up as
   empty boxes. */
.bella-elementor .bella-form form :is(input:not([type="hidden"]), select) {
	display: block;
	width: 100%;
	height: auto;
	margin: 0 0 1.125rem;
	padding: .75rem .875rem;
	color: var(--bella-ink);
	font-size: 1rem;
	line-height: 1.4;
	background-color: #fff;
	border: 1px solid var(--bella-line);
	border-radius: 10px;
	transition: border-color .18s ease, box-shadow .18s ease;
}

.bella-elementor .bella-form form :is(input, select):focus {
	outline: none;
	border-color: var(--bella-accent);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--bella-accent) 18%, transparent);
}

.bella-elementor .bella-form form ::placeholder {
	color: var(--bella-muted);
	opacity: 1;
}

.bella-elementor .bella-form form button {
	display: block;
	width: 100%;
	margin: 1.5rem 0 0;
	padding: .9375rem 1.5rem;
	color: #fff;
	font-size: .9375rem;
	font-weight: 600;
	letter-spacing: .02em;
	background-color: var(--bella-accent);
	border: 0;
	border-radius: 999px;
	cursor: pointer;
	transition: transform .18s ease, box-shadow .18s ease;
}

.bella-elementor .bella-form form button:hover {
	background-color: var(--bella-accent-dark);
	transform: translateY(-1px);
	box-shadow: var(--bella-shadow-lift);
}

/* ---------------------------------------------------------------- aside -- */

.bella-elementor .bella-form .bella-aside > .elementor-element-populated {
	padding: clamp(1.5rem, 1rem + 2vw, 2.25rem);
	background-color: var(--bella-sunken);
	border-radius: var(--bella-radius);
}

.bella-elementor .bella-form .bella-aside .elementor-widget-text-editor {
	color: var(--bella-body);
	font-size: 1rem;
}

.bella-elementor .bella-form .bella-aside .elementor-widget-heading .elementor-heading-title {
	font-size: clamp(1.375rem, 1.2rem + .6vw, 1.625rem);
	color: var(--bella-accent);
	letter-spacing: -.01em;
}

/* Opening hours: the day is the label and the time is the value, so they read
   as a pair rather than as a bulleted sentence. */
.bella-elementor .bella-form .bella-aside ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.bella-elementor .bella-form .bella-aside li {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: .25rem 1rem;
	padding: .625rem 0;
	border-bottom: 1px solid var(--bella-line);
}

.bella-elementor .bella-form .bella-aside li:last-child {
	border-bottom: 0;
	padding-bottom: 0;
}

.bella-elementor .bella-form .bella-aside li strong {
	color: var(--bella-ink);
	font-size: .8125rem;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
}

.bella-elementor .bella-form .bella-aside li em {
	color: var(--bella-body);
	font-style: normal;
	font-variant-numeric: tabular-nums;
}

/* --------------------------------------------------------------- galleries -- */

.bella-elementor .gallery {
	display: grid;
	grid-template-columns: repeat(var(--bella-cols, 3), minmax(0, 1fr));
	gap: var(--bella-gap);
	margin: 0;
}

.bella-elementor .gallery.gallery-columns-1 { --bella-cols: 1; }
.bella-elementor .gallery.gallery-columns-2 { --bella-cols: 2; }
.bella-elementor .gallery.gallery-columns-3 { --bella-cols: 3; }
.bella-elementor .gallery.gallery-columns-4 { --bella-cols: 4; }
.bella-elementor .gallery.gallery-columns-5 { --bella-cols: 5; }
.bella-elementor .gallery.gallery-columns-6 { --bella-cols: 6; }

.bella-elementor .gallery .gallery-item {
	width: auto !important;
	max-width: none !important;
	margin: 0 !important;
	float: none !important;
	padding: 0;
}

.bella-elementor .gallery .gallery-icon {
	overflow: hidden;
	border-radius: var(--bella-radius);
	box-shadow: var(--bella-shadow);
}

.bella-elementor .gallery .gallery-icon a {
	display: block;
}

.bella-elementor .gallery .gallery-icon img {
	display: block;
	width: 100%;
	height: auto;
	/* The photos are a mix of portrait and landscape; a fixed ratio is what
	   keeps the grid from turning into a staircase. */
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border: 0;
	max-width: none;
	transition: transform .35s ease;
}

.bella-elementor .gallery .gallery-icon:hover img {
	transform: scale(1.04);
}

.bella-elementor .gallery .gallery-caption {
	display: none;
}

/* ------------------------------------------------------------------- team -- */

.bella-elementor .bella-team > .elementor-container {
	gap: var(--bella-gap);
}

.bella-elementor .bella-team .elementor-column {
	background-color: #fff;
	border: 1px solid var(--bella-line);
	border-radius: var(--bella-radius);
	overflow: hidden;
	transition: transform .25s ease, box-shadow .25s ease;
}

.bella-elementor .bella-team .elementor-column:hover {
	transform: translateY(-3px);
	box-shadow: var(--bella-shadow-lift);
}

.bella-elementor .bella-team .elementor-widget-image {
	margin: 0;
	max-width: none;
}

.bella-elementor .bella-team .elementor-widget-image img {
	aspect-ratio: 1 / 1;
	object-fit: cover;
	border-radius: 0;
	box-shadow: none;
}

.bella-elementor .bella-team .elementor-widget-heading,
.bella-elementor .bella-team .elementor-widget-text-editor {
	max-width: none;
	padding-inline: 1.125rem;
	text-align: center;
}

.bella-elementor .bella-team .elementor-widget-heading {
	padding-top: 1.125rem;
}

.bella-elementor .bella-team .elementor-widget-heading .elementor-heading-title {
	font-size: 1.0625rem;
	line-height: 1.35;
	letter-spacing: -.005em;
}

.bella-elementor .bella-team .elementor-widget-text-editor {
	padding-bottom: 1.25rem;
	color: var(--bella-muted);
	font-size: .9375rem;
	line-height: 1.5;
}

/* Elementor's column gap is applied as padding on the inner wrapper, which
   would inset the card's own background away from its border. */
.bella-elementor .bella-team .elementor-column > .elementor-element-populated {
	padding: 0;
}

/* ------------------------------------------------------------------ small -- */

@media (max-width: 1023px) {
	.bella-elementor .gallery.gallery-columns-4,
	.bella-elementor .gallery.gallery-columns-5,
	.bella-elementor .gallery.gallery-columns-6 { --bella-cols: 3; }
}

@media (max-width: 767px) {
	.bella-elementor .gallery { --bella-cols: 2 !important; }

	/* Elementor stacks the team columns below this width; the gap has to come
	   back as margin because the flex gap no longer separates rows visibly. */
	.bella-elementor .bella-team .elementor-column + .elementor-column,
	.bella-elementor .bella-form .elementor-column + .elementor-column {
		margin-top: var(--bella-gap);
	}

	.bella-elementor .bella-hero {
		padding-top: clamp(5.5rem, 4rem + 8vw, 7rem);
	}

	/* Fit all three columns on a phone rather than forcing a sideways scroll to
	   reach the price — that is the column people came for. Tighter padding and
	   type buy the room; the price wraps to two lines where it must. */
	.bella-elementor .elementor-widget-text-editor table {
		font-size: .8125rem;
	}

	/* The head rule above is the more specific of the two, so it has to be
	   named here or the head keeps its desktop padding and breaks "ĐƠN VỊ"
	   mid-word. */
	.bella-elementor .elementor-widget-text-editor :is(th, td),
	.bella-elementor .elementor-widget-text-editor :is(thead th, tr:first-child th) {
		padding: .75rem .625rem;
	}

	.bella-elementor .elementor-widget-text-editor table :is(th, td):first-child {
		width: 50%;
	}

	.bella-elementor .elementor-widget-text-editor table :is(th, td):nth-child(2) {
		width: 18%;
	}

	.bella-elementor .elementor-widget-text-editor table :is(th, td):nth-child(3) {
		width: 32%;
	}
}

/* ------------------------------------------------------------- dat-hen -- */

/* The booking page's hero used to be a centred H1 sitting over a raw
   screenshot of Google Maps. Split it into copy + a live embed instead —
   scoped to this page only, since bella-hero/bella-band are shared by
   every other page on the site. */
.page-id-36690.bella-elementor .bella-hero--split {
	text-align: left;
}

.page-id-36690.bella-elementor .bella-hero--split > .elementor-container {
	align-items: center;
	gap: clamp(2rem, 1rem + 3vw, 3.5rem);
}

.page-id-36690.bella-elementor .bella-hero--split .elementor-column {
	min-width: 0;
}

.page-id-36690.bella-elementor .bella-hero--split .elementor-widget-heading:first-child .elementor-heading-title::after {
	margin-left: 0;
	margin-right: 0;
}

.page-id-36690.bella-elementor .bella-hero--split .elementor-widget-heading .elementor-heading-title,
.page-id-36690.bella-elementor .bella-hero--split .elementor-widget-text-editor {
	margin-left: 0;
	margin-right: 0;
	text-align: left !important;
}

.page-id-36690.bella-elementor .bella-hero-facts {
	display: flex;
	flex-wrap: wrap;
	gap: .75rem 1.5rem;
	margin: 1.5rem 0 0;
	padding: 0;
	max-width: 100%;
	list-style: none;
}

.page-id-36690.bella-elementor .bella-hero-facts li {
	display: flex;
	flex-direction: column;
	gap: .125rem;
	min-width: 0;
	flex: 1 1 180px;
}

.page-id-36690.bella-elementor .bella-hero-facts span,
.page-id-36690.bella-elementor .bella-hero-facts a {
	overflow-wrap: anywhere;
}

.page-id-36690.bella-elementor .bella-hero-facts strong {
	color: var(--bella-muted);
	font-size: .75rem;
	font-weight: 600;
	letter-spacing: .04em;
	text-transform: uppercase;
}

.page-id-36690.bella-elementor .bella-hero-facts span,
.page-id-36690.bella-elementor .bella-hero-facts a {
	color: var(--bella-ink);
	font-size: 1rem;
	font-weight: 600;
}

.page-id-36690.bella-elementor .bella-hero-facts a {
	text-decoration: none;
}

.page-id-36690.bella-elementor .bella-hero-facts a:hover {
	color: var(--bella-accent);
}

.page-id-36690.bella-elementor .bella-hero-map {
	align-self: stretch;
}

.page-id-36690.bella-elementor .bella-hero-map .elementor-widget-html {
	height: 100%;
	min-height: 18rem;
	overflow: hidden;
	border-radius: var(--bella-radius);
	box-shadow: var(--bella-shadow);
}

.page-id-36690.bella-elementor .bella-hero-map .elementor-widget-container {
	height: 100%;
}

.page-id-36690.bella-elementor .bella-hero-map iframe {
	display: block;
	width: 100%;
	height: 100%;
}

/* Form fields pair up on wider screens (name+phone, email+date); auto-fit
   collapses them to one column on their own without a manual breakpoint. */
.page-id-36690.bella-elementor .bella-form form .bella-field-row {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: 0 1rem;
}

.page-id-36690.bella-elementor .bella-form form .bella-field-row :is(input, select) {
	margin-bottom: 0;
}

.page-id-36690.bella-elementor .bella-form form .bella-field + .bella-field-row,
.page-id-36690.bella-elementor .bella-form form .bella-field-row + .bella-field-row,
.page-id-36690.bella-elementor .bella-form form .bella-field-row + .bella-field {
	margin-top: 1.125rem;
}

.page-id-36690.bella-elementor .bella-callbtn {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	margin-top: .75rem;
	padding: .625rem 1.125rem;
	color: var(--bella-accent);
	font-size: .875rem;
	font-weight: 600;
	text-decoration: none;
	background-color: #fff;
	border: 1px solid color-mix(in srgb, var(--bella-accent) 35%, transparent);
	border-radius: 999px;
	box-shadow: none;
	transition: background-color .18s ease, border-color .18s ease;
}

.page-id-36690.bella-elementor .bella-callbtn:hover {
	background-color: color-mix(in srgb, var(--bella-accent) 8%, transparent);
	border-color: var(--bella-accent);
	box-shadow: none;
}

@media (max-width: 1023px) {
	.page-id-36690.bella-elementor .bella-hero-map {
		margin-top: 2rem;
	}

	.page-id-36690.bella-elementor .bella-hero-map .elementor-widget-html {
		min-height: 16rem;
	}
}

@media (max-width: 767px) {
	.page-id-36690.bella-elementor .bella-hero--split {
		text-align: center;
	}

	.page-id-36690.bella-elementor .bella-hero--split .elementor-widget-heading .elementor-heading-title,
	.page-id-36690.bella-elementor .bella-hero--split .elementor-widget-text-editor {
		text-align: center !important;
	}

	.page-id-36690.bella-elementor .bella-hero-facts {
		justify-content: center;
	}

	.page-id-36690.bella-elementor .bella-hero-facts li {
		align-items: center;
	}
}