/* BP Why Choose Us widget styles
 *
 * Cream section with two decorative botanical branches framing
 * a centered heading block, then five feature cards. All rules
 * stay under .bp-why-choose. Logical properties keep LTR/RTL
 * aligned.
 */

.bp-why-choose {
	--bp-wc-bg:            #EDDBC3;
	--bp-wc-fg:            #374F37;
	--bp-wc-muted:         #5C6A5C;
	--bp-wc-olive:         #B8B25A;
	--bp-wc-card-bg:       rgba(255, 255, 255, 0.45);
	--bp-wc-card-border:   #E4DCCB;
	--bp-wc-radius:        12px;
	--bp-wc-inner-max:     1200px;
	--bp-wc-pad-block:     80px;
	--bp-wc-pad-inline:    24px;
	--bp-wc-gap:           20px;
	--bp-wc-icon-bg:       rgba(184, 178, 90, 0.18);
	--bp-wc-icon-color:    #374F37;
	--bp-wc-icon-size:     22px;
	--bp-wc-icon-badge:    56px;
	--bp-wc-shadow:        none;
	--bp-wc-font:          var(--bp-font-body, 'Manrope', system-ui, sans-serif);
	--bp-wc-display:       var(--bp-font-display, 'DM Serif Display', Georgia, serif);

	background-color: var(--bp-wc-bg);
	color: var(--bp-wc-fg);
	font-family: var(--bp-wc-font);
	position: relative;
	overflow-x: clip;
	overflow-y: visible;
	padding-block: var(--bp-wc-pad-block);
	padding-inline: 0;

	/* Break out of any Elementor column padding so the
	   decorative branches can reach the actual screen edge. */
	margin-inline: calc(50% - 50vw);
	max-inline-size: 100vw;
}

.bp-why-choose__inner {
	position: relative;
	z-index: 1;
	max-inline-size: var(--bp-wc-inner-max);
	margin-inline: auto;
	padding-inline: var(--bp-wc-pad-inline);
}

/* ---- Decorative botanical layer ---- */
.bp-why-choose__decor {
	position: absolute;
	inset: 0;
	pointer-events: none;
	user-select: none;
	z-index: 0;
}

.bp-why-choose__decor-img,
.bp-why-choose__decor-leaves {
	position: absolute;
	pointer-events: none;
	user-select: none;
	max-inline-size: none;
}

.bp-why-choose__decor-img--left {
	inset-block-start: 0;
	inset-inline-start: -40px;
	inline-size: clamp(380px, 46vw, 760px);
}

.bp-why-choose__decor-img--right {
	inset-block-start: auto;
	inset-block-end: 0;
	inset-inline-end: -40px;
	inline-size: clamp(380px, 46vw, 760px);
}

.bp-why-choose__decor-leaves--left {
	inset-block-start: 0;
	inset-inline-start: -40px;
	inline-size: clamp(280px, 36vw, 560px);
	opacity: 0.95;
}

.bp-why-choose__decor-leaves--right {
	inset-block-start: auto;
	inset-block-end: 0;
	inset-inline-end: -40px;
	inline-size: clamp(280px, 36vw, 560px);
	opacity: 0.95;
}

/* ---- Heading ---- */
.bp-why-choose__head {
	text-align: center;
	max-inline-size: 880px;
	margin-inline: auto;
	margin-block-end: clamp(36px, 5vw, 56px);
}

.bp-why-choose__eyebrow {
	margin: 0 0 12px;
	font-family: var(--bp-wc-font);
	font-weight: 600;
	font-size: 13px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--bp-wc-fg);
}

.bp-why-choose__title {
	margin: 0 0 16px;
	font-family: var(--bp-wc-display);
	font-weight: 400;
	font-size: clamp(32px, 4.4vw, 52px);
	line-height: 1.1;
	letter-spacing: 0.01em;
	color: var(--bp-wc-fg);
	text-transform: uppercase;
}

.bp-why-choose__divider {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	margin-block: 8px 18px;
}

.bp-why-choose__divider-line {
	display: inline-block;
	inline-size: 56px;
	block-size: 1px;
	background-color: var(--bp-wc-olive);
}

.bp-why-choose__divider-diamond {
	display: inline-block;
	inline-size: 8px;
	block-size: 8px;
	background-color: var(--bp-wc-olive);
	transform: rotate(45deg);
}

.bp-why-choose__description {
	margin: 0 auto;
	max-inline-size: 640px;
	font-size: 15px;
	line-height: 1.7;
	color: var(--bp-wc-muted);
}

/* ---- Cards ---- */
.bp-why-choose__cards {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	column-gap: var(--bp-wc-gap);
	row-gap: var(--bp-wc-gap);
	align-items: stretch;
}

.bp-why-choose__card {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	background-color: var(--bp-wc-card-bg);
	border: 1px solid var(--bp-wc-card-border);
	border-radius: var(--bp-wc-radius);
	padding-block: 28px;
	padding-inline: 20px;
	box-shadow: var(--bp-wc-shadow);
	min-inline-size: 0;
}

.bp-why-choose__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: var(--bp-wc-icon-badge);
	block-size: var(--bp-wc-icon-badge);
	border-radius: 50%;
	background-color: var(--bp-wc-icon-bg);
	color: var(--bp-wc-icon-color);
	margin-block-end: 18px;
	flex: 0 0 auto;
	line-height: 1;
}

.bp-why-choose__icon i,
.bp-why-choose__icon svg {
	font-size: var(--bp-wc-icon-size);
	width: var(--bp-wc-icon-size);
	height: var(--bp-wc-icon-size);
	fill: currentColor;
}

.bp-why-choose__card-title {
	margin: 0 0 12px;
	font-family: var(--bp-wc-font);
	font-weight: 700;
	font-size: 14px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--bp-wc-fg);
	line-height: 1.25;
}

.bp-why-choose__card-desc {
	margin: 0;
	font-size: 13px;
	line-height: 1.6;
	color: var(--bp-wc-muted);
	max-inline-size: 22ch;
}

/* ---- Tablet ---- */
@media (max-width: 1024px) {
	.bp-why-choose {
		--bp-wc-pad-block: 64px;
		--bp-wc-gap: 14px;
		--bp-wc-icon-badge: 50px;
		--bp-wc-icon-size: 20px;
	}
	.bp-why-choose__cards {
		grid-template-columns: repeat(5, minmax(0, 1fr));
	}
	.bp-why-choose__card {
		padding-block: 22px;
		padding-inline: 14px;
	}
	.bp-why-choose__card-title {
		font-size: 12px;
	}
	.bp-why-choose__card-desc {
		font-size: 12px;
	}
	.bp-why-choose__decor-img--left,
	.bp-why-choose__decor-img--right {
		inline-size: clamp(320px, 40vw, 540px);
	}
	.bp-why-choose__decor-leaves--left,
	.bp-why-choose__decor-leaves--right {
		inline-size: clamp(240px, 32vw, 420px);
	}
}

@media (max-width: 860px) {
	.bp-why-choose__cards {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	.bp-why-choose__decor-img--right,
	.bp-why-choose__decor-leaves--right {
		inset-block-start: 0;
		inset-block-end: auto;
	}
}

/* ---- Mobile ---- */
@media (max-width: 720px) {
	.bp-why-choose {
		--bp-wc-pad-block: 56px;
		--bp-wc-pad-inline: 18px;
		--bp-wc-gap: 14px;
		--bp-wc-icon-badge: 48px;
		--bp-wc-icon-size: 20px;
	}
	.bp-why-choose__cards {
		grid-template-columns: 1fr;
	}
	.bp-why-choose__head {
		margin-block-end: 32px;
	}
	.bp-why-choose__description {
		font-size: 14px;
	}
	.bp-why-choose__decor-img--left,
	.bp-why-choose__decor-img--right {
		inline-size: clamp(220px, 50vw, 340px);
		opacity: 0.7;
	}
	.bp-why-choose__decor-leaves--left,
	.bp-why-choose__decor-leaves--right {
		inline-size: clamp(180px, 42vw, 280px);
		opacity: 0.7;
	}
}

@media (max-width: 420px) {
	.bp-why-choose__title {
		font-size: 30px;
	}
}