/**
 * "DB 2 Column Content Block" widget.
 *
 * Colour is driven entirely by three custom properties that Elementor sets
 * per section (and per column) through {{CURRENT_ITEM}} selectors:
 *
 *   --dba-cb-bg        section / column background
 *   --dba-cb-heading   title + subtitle colour
 *   --dba-cb-text      body colour
 *
 * Each falls back to a widget-level default, and that falls back to the site's
 * own colours — so a section with nothing set still looks like the rest of the
 * page, and one with a dark background can flip its text in a single control.
 */

.dba-cb {
	--dba-cb-block-gap: 0px;
	--dba-cb-col-gap: 0px;
	--dba-cb-stack-gap: 16px;
	--dba-cb-pad-top: 48px;
	--dba-cb-pad-right: 48px;
	--dba-cb-pad-bottom: 48px;
	--dba-cb-pad-left: 48px;
	--dba-cb-max-width: 100%;
	--dba-cb-image-min-height: 320px;
	--dba-cb-container-width: 1440px;
	--dba-cb-container-pad: 20px;
	--dba-cb-contact-gap: 14px;
	--dba-cb-contact-icon: 20px;
	--dba-cb-contact-icon-gap: 12px;

	/* Widget-level fallbacks, themselves deferring to the site's palette. */
	--dba-cb-heading-default: var( --e-global-color-primary, currentColor );
	--dba-cb-text-default: var( --e-global-color-text, currentColor );

	display: flex;
	flex-direction: column;
	gap: var( --dba-cb-block-gap );
	width: 100%;
	font-family: inherit;
	box-sizing: border-box;
}

.dba-cb *,
.dba-cb *::before,
.dba-cb *::after {
	box-sizing: border-box;
}

/* --------------------------------------------------------------------------
 * Section
 * ----------------------------------------------------------------------- */

.dba-cb__block {
	position: relative;
	background-color: var( --dba-cb-bg, transparent );
	padding-bottom: 100px;
}

.dba-cb__inner {
	display: grid;
	gap:25px;
	width: 100%;
}

/* Two equal columns for both 50/50 layouts. */
.dba-cb__block--image-content .dba-cb__inner,
.dba-cb__block--content-content .dba-cb__inner {
	grid-template-columns: 1fr 1.3fr;
	align-items: stretch;
}

.dba-cb__block--full-width .dba-cb__inner {
	grid-template-columns: 1fr;
}

/**
 * The per-section container.
 *
 * Contained: the whole section — both columns, image included — is held inside
 * the centred content width. Uncontained: it spans the section edge to edge,
 * which is what puts a photograph or a colour panel hard against the viewport.
 *
 * The background always belongs to the <section>, so a contained section still
 * paints its colour full width; only the content inside is reined in.
 */
.dba-cb__block--contained > .dba-cb__inner {
	max-width:1440px;
	margin-inline: auto;
	padding-inline: var( --dba-cb-container-pad );
}

.dba-cb__block--full-bleed > .dba-cb__inner {
	max-width: none;
	padding-inline: 0;
}

/**
 * Image right: the media element is written first in the DOM so it is also
 * first on mobile by default. On desktop it is moved to column two, which
 * keeps the source order (content first) sensible for screen readers.
 */
.dba-cb__block--img-right .dba-cb__media {
	grid-column: 2;
	grid-row: 1;
}

.dba-cb__block--img-right .dba-cb__content {
	grid-column: 1;
	grid-row: 1;
}

/* --------------------------------------------------------------------------
 * Media column
 * ----------------------------------------------------------------------- */

.dba-cb__media {
	position: relative;
	display: flex;
	min-width: 0;
}

.dba-cb__image {
	display: block;
	width: 100%;
	max-width: 100%;
	height: auto;
}

/* "Fill the column": the image covers its half, matching the content height. */
.dba-cb--image-cover .dba-cb__media {
	min-height: var( --dba-cb-image-min-height );
}

.dba-cb--image-cover .dba-cb__image {
	width: 100%;
	height: 100%;
	min-height: 446px;
	object-fit: cover;
	object-position: center;
	border-radius: 20px;
}

/* "Keep its own proportions": never crop, centre in the column instead. */
.dba-cb--image-natural .dba-cb__media {
	align-items: center;
	justify-content: center;
}

.dba-cb--image-natural .dba-cb__image {
	height: auto;
	object-fit: contain;
}

/* --------------------------------------------------------------------------
 * Content
 * ----------------------------------------------------------------------- */

.dba-cb__content {
	display: flex;
	flex-direction: column;
	justify-content: center;
	min-width: 0;
	padding: 0px;
	color: var( --dba-cb-text, var( --dba-cb-text-default ) );
}

/* Each column paints its own background in the content + content layout. */
.dba-cb__col {
	background-color: var( --dba-cb-bg, transparent );
}

.dba-cb__content-inner {
	width: 100%;
}

/* The max-width cap is only meaningful on a full-width band; inside a 50/50
   column the column itself is already the constraint. */
.dba-cb__content--full .dba-cb__content-inner {
	max-width: var( --dba-cb-max-width );
	margin-inline: auto;
}

/**
 * A bled section paints its background edge to edge while the text stays
 * within the content width. 50vw either side of the element's own centre is
 * what escapes any container the widget happens to sit in.
 */
.dba-cb__block--bleed {
	margin-inline: calc( 50% - 50vw );
	padding-inline: calc( 50vw - 50% );
}

/**
 * Alignment for a full-width band. Manual mode sets text-align through an
 * Elementor selector; category mode has a stored value, so it becomes a class.
 */
.dba-cb__content--align-left {
	text-align: left;
}

.dba-cb__content--align-center {
	text-align: center;
}

.dba-cb__content--align-right {
	text-align: right;
}

/* --------------------------------------------------------------------------
 * Typography
 * ----------------------------------------------------------------------- */

.dba-cb__subtitle {
	margin: 0 0 8px;
	font-family: inherit;
	color: var( --dba-cb-heading, var( --dba-cb-heading-default ) );
	font-size: 20px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	line-height: 1.4;
	font-family: "TrajanProRegular" !important;
}

.dba-cb__title {
	margin: 0 0 20px;
	font-family: inherit;
	color: var( --dba-cb-heading, var( --dba-cb-heading-default ) );
	overflow-wrap: break-word;
	font-size: 40px;
		font-family: "TrajanProRegular" !important;
}

.dba-cb__text {
	/* font-family: inherit; */
	color: inherit;
	font-family: "Google Sans Flex", sans-serif !important;
	font-size: 20px;
}

.dba-cb__text > * + * {
	margin-top: var( --dba-cb-stack-gap );
}

.dba-cb__text > *:first-child {
	margin-top: 0;
}

/* Headings written inside a description follow the section's title colour. */
.dba-cb__text :is( h1, h2, h3, h4, h5, h6 ) {
	color: var( --dba-cb-heading, var( --dba-cb-heading-default ) );
}

/* --------------------------------------------------------------------------
 * Contact details
 *
 * Email and phone lines, each switched on per section. The icons are inline
 * SVG stroked with `currentColor`, so they follow the section's text colour
 * with no icon font to load.
 * ----------------------------------------------------------------------- */

.dba-cb__contacts {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var( --dba-cb-contact-gap );
	margin-top: 24px;
}

/* A centred section should centre its contact lines too. */
.dba-cb__content--align-center .dba-cb__contacts {
	align-items: center;
}

.dba-cb__content--align-right .dba-cb__contacts {
	align-items: flex-end;
}

.dba-cb__contact {
	display: inline-flex;
	align-items: center;
	gap: var( --dba-cb-contact-icon-gap );
	color: #000;
	font-weight: 600 !important;
	text-decoration: none;
	overflow-wrap: anywhere;
	transition: color 0.25s ease, opacity 0.25s ease;
	font-size: 20px;
}

.dba-cb__contact:hover,
.dba-cb__contact:focus-visible {
	opacity: 0.75;
}

.dba-cb__contact-icon {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var( --dba-cb-contact-icon );
	height: var( --dba-cb-contact-icon );
}

.dba-cb__contact-svg {
	width: 100%;
	height: 100%;
	display: block;
}

/* --------------------------------------------------------------------------
 * Button
 * ----------------------------------------------------------------------- */

.dba-cb__actions {
	margin-top: 24px;
}

.dba-cb__button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 1px solid currentColor;
	background: none;
	color: inherit;
	font: inherit;
	line-height: 1.2;
	text-decoration: none;
	cursor: pointer;
	transition: color 0.25s ease, background-color 0.25s ease, border-color 0.25s ease;
}

.dba-cb__button--static {
	cursor: default;
}

/* --------------------------------------------------------------------------
 * Responsive
 *
 * The stacking breakpoint is chosen per widget; the classes below are what the
 * "Stack columns at" control selects between. Elementor's own breakpoints are
 * 1024px (tablet) and 767px (mobile).
 * ----------------------------------------------------------------------- */

@media ( max-width: 1024px ) {
	.dba-cb--stack-tablet .dba-cb__block--image-content .dba-cb__inner,
	.dba-cb--stack-tablet .dba-cb__block--content-content .dba-cb__inner {
		grid-template-columns: 1fr;
	}

	/* Once stacked there is only one column, so the desktop placement that put
	   the image on the right has to be released or it leaves an empty track. */
	.dba-cb--stack-tablet .dba-cb__block--img-right .dba-cb__media,
	.dba-cb--stack-tablet .dba-cb__block--img-right .dba-cb__content {
		grid-column: 1;
		grid-row: auto;
	}

	/* "On mobile, show: content first" — the image is first in the DOM, so it
	   is the one that moves. */
	.dba-cb--stack-tablet .dba-cb__block--mobile-content .dba-cb__media {
		order: 2;
	}

	.dba-cb--stack-tablet .dba-cb__block--mobile-content .dba-cb__content {
		order: 1;
	}

	.dba-cb--stack-tablet .dba-cb__block--image-content .dba-cb__inner,
	.dba-cb--stack-tablet .dba-cb__block--content-content .dba-cb__inner {
		display: flex;
		flex-direction: column;
	}

	.dba-cb--stack-tablet .dba-cb--image-cover .dba-cb__media,
	.dba-cb--stack-tablet.dba-cb--image-cover .dba-cb__media {
		min-height: 0;
	}

	.dba-cb--stack-tablet.dba-cb--image-cover .dba-cb__image {
		min-height: 0;
		height: auto;
	}
}

@media ( max-width: 767px ) {
	.dba-cb--stack-mobile .dba-cb__block--image-content .dba-cb__inner,
	.dba-cb--stack-mobile .dba-cb__block--content-content .dba-cb__inner {
		display: flex;
		flex-direction: column;
	}

	.dba-cb--stack-mobile .dba-cb__block--img-right .dba-cb__media,
	.dba-cb--stack-mobile .dba-cb__block--img-right .dba-cb__content {
		grid-column: 1;
		grid-row: auto;
	}

	.dba-cb--stack-mobile .dba-cb__block--mobile-content .dba-cb__media {
		order: 2;
	}

	.dba-cb--stack-mobile .dba-cb__block--mobile-content .dba-cb__content {
		order: 1;
	}

	.dba-cb--stack-mobile.dba-cb--image-cover .dba-cb__media,
	.dba-cb--stack-mobile.dba-cb--image-cover .dba-cb__image {
		min-height: 0;
		height: auto;
	}

	/* Full-bleed padding would be enormous on a phone; fall back to the
	   section's own horizontal padding. */
	.dba-cb__block--bleed {
		padding-inline: 0;
	}
}

@media ( prefers-reduced-motion: reduce ) {
	.dba-cb * {
		transition-duration: 0.01ms !important;
	}
}


.dba-cb__block.dba-cb__block--full-width.dba-cb__block--contained {
	background-color: transparent;
}
.dba-cb__block.dba-cb__block--full-width.dba-cb__block--contained .dba-cb__inner {
	background-color: #FAF8F9;
	padding: 60px;
	border-radius: 20px;
}
.dba-cb__block.dba-cb__block--content-content.dba-cb__block--contained .dba-cb__inner {
	max-width: 100%;
	padding: 0px;
	gap: 0px;
	display: flex;
}
.dba-cb__content.dba-cb__col.dba-cb__col--left {
	background-color: #FAF8F9 !important;
	padding-left: 12%;
	max-width: 50%;
	padding-right: 10%;
	padding-top: 5%;
	padding-bottom: 5%;
}
.dba-cb__content.dba-cb__col.dba-cb__col--right {
	background-color: #182649 !important;
	padding-right: 12%;
	color: #fff;
	padding-left: 8%;
	padding-top: 5%;
	padding-bottom: 5%;
}
.dba-cb__content.dba-cb__col.dba-cb__col--left h2 {
	text-transform: uppercase;
}
.dba-cb__block.dba-cb__block--image-content.dba-cb__block--img-right.dba-cb__block--mobile-image.dba-cb__block--contained .dba-cb__inner {
	grid-template-columns: 1fr 1fr;
}

.dba-cb__text.dba-rte .elementor-icon-list-item {
	position: relative;
	padding: 28px 0px;
	font-size: 20px;
	font-weight: 500;
	border-bottom: 1px solid #00000012;

}
.dba-cb__text.dba-rte .elementor-icon-list-item::before {
    content: "✓";
    display: inline-block;
    margin-right: 10px;
    font-size: 16px;
    font-weight: 600;
}
.dba-cc__toggle {
	background-color: transparent !important;
}
.dba-cb__content.dba-cb__col.dba-cb__col--right .dba-cb__title {
	color: #fff;
	text-transform: uppercase;
}
.custom-image-with-text .dba-cb__inner {
	grid-template-columns: 1fr 1fr;
}
.custom-image-with-text .dba-cb__media img {
	height: 394px;
	object-fit: cover;
}


@media ( max-width: 1400px ) {
.dba-cb__block--contained > .dba-cb__inner {
	max-width: 1140px;
}
.dba-cb__content.dba-cb__col.dba-cb__col--left {
	background-color: #FAF8F9 !important;
	padding-left: 30px;
	padding-right: 30px;
	padding-top: 30px;
	padding-bottom: 30px;
}
.dba-cb__content.dba-cb__col.dba-cb__col--right {
	background-color: #182649 !important;
	padding-right: 30px;
	color: #fff;
	padding-left: 30px;
	padding-top: 30px;
	padding-bottom: 30px;
}
}

@media (min-width: 768px) and (max-width: 1024px) {
  
.dba-cb__block {
	padding-bottom: 30px;
}
.dba-cb__content.dba-cb__col.dba-cb__col--left {
	max-width: 100%;
}
}

@media ( max-width: 767px ) {

	.dba-cb__content {
	text-align: center;
}
.dba-cb__block.dba-cb__block--full-width.dba-cb__block--contained .dba-cb__inner {
	background-color: #FAF8F9;
	padding: 30px;
	border-radius: 20px;
}
.dba-cb__title {
	font-size: 25px;
	font-family: "TrajanProRegular" !important;
}
.dba-cb__contact {
	color: #000;
	font-weight: 600 !important;
	overflow-wrap: anywhere;
	font-size: 16px;
}
.dba-cb__content.dba-cb__col.dba-cb__col--left {
	max-width: 100%;

}
.dba-cb__block {
	padding-bottom: 40px;
}
}