/**
 * QB - Branches | QB Studio
 * Frontend styles. All theming flows through CSS custom properties
 * so Elementor controls can override without touching selectors.
 */
.qb-branches[data-anim]:not([data-anim="none"]).qb-is-ready .qb-branch {
    opacity: 1 !important;
}
.qb-branches {
	--qb-primary: #322783;
	--qb-accent: #e30714;
	--qb-text: #333333;
	--qb-card-bg: #ffffff;
	--qb-feat-a: #f4f2ff;
	--qb-feat-b: #ffffff;
	--qb-radius: 12px;
	--qb-radius-feat: 55px;
	--qb-accent-top: 4px;
	--qb-border-w: 3px;
	--qb-lift: -8px;
	--qb-scale: 1.03;
	--qb-hover-border: #e30714;
	--qb-hover-shadow: rgba(50, 39, 131, 0.28);
	--qb-hover-link: #e30714;
	--qb-hover-dur: 420ms;
	--qb-anim-dur: 750ms;
	--qb-stagger: 70ms;
	--qb-anim-dist: 40px;
	--qb-ease: cubic-bezier(0.22, 1, 0.36, 1);

	padding: 60px 20px;
	box-sizing: border-box;
}

.qb-branches *,
.qb-branches *::before,
.qb-branches *::after {
	box-sizing: inherit;
}

.qb-branches__title {
	text-align: center;
	margin: 0 0 50px;
	font-size: 38px;
	color: var(--qb-primary);
}

.qb-branches__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
	gap: 25px;
	perspective: 1400px;
}

/* ------------------------------------------------------------------ */
/* Card                                                                */
/* ------------------------------------------------------------------ */

.qb-branch {
	position: relative;
	padding: 25px;
	background: var(--qb-card-bg);
	border-radius: var(--qb-radius);
	border-top: var(--qb-accent-top) solid var(--qb-primary);
	box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
	transform-style: preserve-3d;
	will-change: transform;
	transition:
		transform var(--qb-hover-dur) var(--qb-ease),
		box-shadow var(--qb-hover-dur) var(--qb-ease),
		border-color var(--qb-hover-dur) var(--qb-ease);
}

.qb-branch--main {
	border: var(--qb-border-w) solid var(--qb-primary);
	border-radius: var(--qb-radius-feat);
	background: linear-gradient(135deg, var(--qb-feat-a), var(--qb-feat-b));
}

/* sheen overlay */
.qb-branch__sheen {
	position: absolute;
	inset: 0;
	border-radius: inherit;
	pointer-events: none;
	overflow: hidden;
	opacity: 0;
	transition: opacity var(--qb-hover-dur) var(--qb-ease);
}

.qb-branch__sheen::before {
	content: "";
	position: absolute;
	top: -60%;
	left: -75%;
	width: 50%;
	height: 220%;
	background: linear-gradient(
		100deg,
		rgba(255, 255, 255, 0) 0%,
		rgba(255, 255, 255, 0.55) 50%,
		rgba(255, 255, 255, 0) 100%
	);
	transform: rotate(18deg);
	transition: left 900ms var(--qb-ease);
}

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

.qb-branch__name {
	margin: 0 0 6px;
	color: var(--qb-primary);
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
	transition: color var(--qb-hover-dur) var(--qb-ease);
}

.qb-branch__pin {
	display: inline-flex;
	line-height: 1;
	text-decoration: none;
	transition: transform var(--qb-hover-dur) var(--qb-ease);
}

.qb-branch__pin i {
	font-size: 40px;
	color: var(--qb-accent);
}

.qb-branch__row {
	margin: 10px 0;
	font-size: 14px;
	color: var(--qb-text);
	line-height: 1.5;
}

.qb-branch__row a {
	text-decoration: none;
	color: inherit;
	display: inline-block;
	transition: color 0.2s ease;
}

.qb-branch__row a:hover {
	color: var(--qb-hover-link);
}

.qb-branch__row i {
	margin-inline-end: 8px;
	color: var(--qb-primary);
	font-size: 14px;
	width: 18px;
	text-align: center;
	transition: transform 350ms var(--qb-ease), color 350ms var(--qb-ease);
}

.qb-branch__label {
	color: var(--qb-accent);
	font-weight: 700;
}

.qb-branch__value {
	color: inherit;
}

/* keep phone numbers from flipping in RTL */
.qb-branch__ltr {
	direction: ltr;
	display: inline-block;
	unicode-bidi: embed;
}

/* ------------------------------------------------------------------ */
/* Badge                                                               */
/* ------------------------------------------------------------------ */

.qb-branch__badge {
	position: absolute;
	top: -32px;
	inset-inline-end: 10px;
	line-height: 0;
	pointer-events: none;
	z-index: 2;
	transition: transform var(--qb-hover-dur) var(--qb-ease);
}

.qb-branch__badge img {
	width: 100px;
	height: auto;
	max-width: none;
	display: block;
}

.qb-branches--badge-right .qb-branch__badge {
	inset-inline-end: auto;
	inset-inline-start: auto;
	right: 10px;
	left: auto;
}

.qb-branches--badge-left .qb-branch__badge {
	inset-inline-end: auto;
	inset-inline-start: auto;
	left: 10px;
	right: auto;
}

/* ------------------------------------------------------------------ */
/* Hover effects                                                       */
/* ------------------------------------------------------------------ */

.qb-branches[data-hover="lift"] .qb-branch:hover {
	transform: translateY(var(--qb-lift)) scale(var(--qb-scale));
	box-shadow: 0 18px 38px var(--qb-hover-shadow);
	border-color: var(--qb-hover-border);
}

.qb-branches[data-hover="glow"] .qb-branch:hover {
	transform: translateY(var(--qb-lift));
	box-shadow: 0 0 0 2px var(--qb-hover-border), 0 22px 50px var(--qb-hover-shadow);
	border-color: var(--qb-hover-border);
}

.qb-branches[data-hover="zoom"] .qb-branch:hover {
	transform: scale(var(--qb-scale));
	box-shadow: 0 16px 34px var(--qb-hover-shadow);
	border-color: var(--qb-hover-border);
}

.qb-branches[data-hover="shine"] .qb-branch:hover {
	transform: translateY(var(--qb-lift));
	box-shadow: 0 18px 38px var(--qb-hover-shadow);
	border-color: var(--qb-hover-border);
}

.qb-branches[data-hover="shine"] .qb-branch:hover .qb-branch__sheen,
.qb-branches[data-hover="tilt"] .qb-branch:hover .qb-branch__sheen {
	opacity: 1;
}

.qb-branches[data-hover="shine"] .qb-branch:hover .qb-branch__sheen::before,
.qb-branches[data-hover="tilt"] .qb-branch:hover .qb-branch__sheen::before {
	left: 130%;
}

/* 3D tilt — transform is driven from JS via custom properties */
.qb-branches[data-hover="tilt"] .qb-branch {
	--qb-rx: 0deg;
	--qb-ry: 0deg;
	transition: transform 180ms ease-out, box-shadow var(--qb-hover-dur) var(--qb-ease),
		border-color var(--qb-hover-dur) var(--qb-ease);
}

.qb-branches[data-hover="tilt"] .qb-branch.is-tilting {
	transform: perspective(1000px) rotateX(var(--qb-rx)) rotateY(var(--qb-ry)) translateZ(14px);
	box-shadow: 0 26px 55px var(--qb-hover-shadow);
	border-color: var(--qb-hover-border);
}

/* shared micro-interactions */
.qb-branch:hover .qb-branch__pin {
	transform: translateY(-4px) rotate(-6deg);
}

.qb-branches--pop .qb-branch:hover .qb-branch__row i {
	transform: scale(1.25);
	color: var(--qb-accent);
}

.qb-branch:hover .qb-branch__badge {
	transform: translateY(-4px) scale(1.04);
}

/* ------------------------------------------------------------------ */
/* Entrance animations                                                 */
/* ------------------------------------------------------------------ */

.qb-branches[data-anim]:not([data-anim="none"]).qb-is-ready .qb-branch {
	opacity: 1 !important;
	transition:
		opacity var(--qb-anim-dur) var(--qb-ease),
		transform var(--qb-anim-dur) var(--qb-ease),
		filter var(--qb-anim-dur) var(--qb-ease),
		box-shadow var(--qb-hover-dur) var(--qb-ease),
		border-color var(--qb-hover-dur) var(--qb-ease);
	transition-delay: calc(var(--qb-i, 0) * var(--qb-stagger));
}

.qb-branches[data-anim="fade-up"].qb-is-ready .qb-branch {
	transform: translateY(var(--qb-anim-dist));
}

.qb-branches[data-anim="fade-down"].qb-is-ready .qb-branch {
	transform: translateY(calc(var(--qb-anim-dist) * -1));
}

.qb-branches[data-anim="fade-side"].qb-is-ready .qb-branch {
	transform: translateX(var(--qb-anim-dist));
}

.qb-branches--en[data-anim="fade-side"].qb-is-ready .qb-branch {
	transform: translateX(calc(var(--qb-anim-dist) * -1));
}

.qb-branches[data-anim="zoom-in"].qb-is-ready .qb-branch {
	transform: scale(0.88);
}

.qb-branches[data-anim="flip-up"].qb-is-ready .qb-branch {
	transform: perspective(1200px) rotateX(22deg) translateY(var(--qb-anim-dist));
	transform-origin: center bottom;
}

.qb-branches[data-anim="blur-in"].qb-is-ready .qb-branch {
	transform: translateY(calc(var(--qb-anim-dist) / 2));
	filter: blur(12px);
}

.qb-branches.qb-is-ready .qb-branch.is-in {
	opacity: 1;
	transform: none;
	filter: none;
}

/* ------------------------------------------------------------------ */
/* Accessibility & responsive                                          */
/* ------------------------------------------------------------------ */

@media (max-width: 767px) {
	.qb-branch__pin i {
		font-size: 30px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.qb-branches .qb-branch,
	.qb-branches .qb-branch__row i,
	.qb-branches .qb-branch__pin,
	.qb-branches .qb-branch__badge,
	.qb-branches .qb-branch__sheen,
	.qb-branches .qb-branch__sheen::before {
		transition: none !important;
		animation: none !important;
	}

	.qb-branches.qb-is-ready .qb-branch {
		opacity: 1 !important;
		transform: none !important;
		filter: none !important;
	}

	.qb-branches .qb-branch:hover {
		transform: none !important;
	}
}
.qb-branches[data-anim]:not([data-anim="none"]).qb-is-ready .qb-branch {
    opacity: 1 !important;
}