/* =========================
   CUSTOM PROPERTIES
========================= */

.qb-tabs-showcase {
	--qb-primary:       #005aa9;
	--qb-primary-dark:  #004a8d;
	--qb-text:          #16352f;
	--qb-text-soft:     #6f7479;
	--qb-bg:            #F9FBFD;
	--qb-white:         #ffffff;
	--qb-radius-xl:     22px;
	--qb-radius-lg:     18px;
	--qb-radius-md:     14px;
	--qb-shadow:        0 18px 45px rgba(10, 38, 64, 0.08);
	--qb-shadow-hover:  0 24px 56px rgba(10, 38, 64, 0.12);
	--qb-transition:    all .35s cubic-bezier(.22, .61, .36, 1);
	--qb-tab-gap:       14px;
	--qb-tabs-columns:  5;           /* overwritten by JS per breakpoint */
	position: relative;
	width: 100%;
}

.qb-tabs-showcase *,
.qb-tabs-showcase *::before,
.qb-tabs-showcase *::after {
	box-sizing: border-box;
}

.qb-tabs-showcase img { max-width: 100%; display: block; }
.qb-tabs-showcase a   { text-decoration: none; }

/* =========================
   TABS NAV WRAPPER
   (holds the nav + its own
    arrows/pagination when
    the tabs become a slider)
========================= */

.qb-tabs-showcase .qb-tabs-nav-wrapper {
	position:  relative;
	width:     100%;
	margin-bottom: 28px;
}

/* Give the wrapper extra side padding on mobile so
   the arrows don't overlap the tabs */
@media (max-width: 767px) {
	.qb-tabs-showcase .qb-tabs-nav-wrapper {
		padding: 0 44px;
	}
}

/* =========================
   TABS NAV
========================= */

.qb-tabs-showcase .qb-tabs-nav {
	display:                grid;
	grid-template-columns:  repeat(var(--qb-tabs-columns), minmax(0, 1fr));
	gap:                    var(--qb-tab-gap);
	position:               relative;
	z-index:                3;
}

/* When the nav becomes a Swiper the grid is replaced */
.qb-tabs-showcase .qb-tabs-nav.qb-tabs-nav-is-slider {
	display:                block;
	overflow:               hidden;
	grid-template-columns:  none !important;
}

.qb-tabs-showcase .qb-tabs-nav.swiper { overflow: hidden; }

.qb-tabs-showcase .qb-tabs-nav.qb-tabs-nav-is-slider .swiper-wrapper {
	display:      flex;
	align-items:  stretch;
}

.qb-tabs-showcase .qb-tabs-nav.qb-tabs-nav-is-slider .swiper-slide {
	width:  auto;
	height: auto;
}

.qb-tabs-showcase .qb-tabs-nav.qb-tabs-nav-is-slider .qb-tab-item {
	height: 100%;
}

/* =========================
   TAB ITEM
========================= */

.qb-tabs-showcase .qb-tab-item {
	position:        relative;
	display:         flex;
	align-items:     center;
	justify-content: flex-start;
	gap:             14px;
	min-height:      92px;
	padding:         18px 22px;
	background:      #f3f4f5;
	border-radius:   18px;
	cursor:          pointer;
	transition:      var(--qb-transition);
	border:          1px solid rgba(0, 90, 169, 0.08);
	overflow:        visible;
	will-change:     transform, box-shadow, background-color;
}

/* Arrow indicator pointing down to content */
.qb-tabs-showcase .qb-tab-item::before {
	content:       "";
	position:      absolute;
	left:          50%;
	transform:     translateX(-50%) scale(.85);
	bottom:        -13px;
	width:         70px;
	height:        30px;
	background:    inherit;
	border-radius: 0 0 10px 0;
	clip-path:     polygon(50% 100%, 0 0, 100% 0);
	opacity:       0;
	transition:    var(--qb-transition);
	pointer-events: none;
}

.qb-tabs-showcase .qb-tab-item:hover {
	transform:  translateY(-4px);
	box-shadow: 0 14px 30px rgba(0, 90, 169, 0.10);
}

.qb-tabs-showcase .qb-tab-item.active {
	background:   var(--qb-primary);
	box-shadow:   0 20px 40px rgba(0, 90, 169, 0.18);
	border-color: transparent;
}

.qb-tabs-showcase .qb-tab-item.active::before {
	opacity:   1;
	transform: translateX(-50%) scale(1);
}

.qb-tabs-showcase .qb-tab-item img {
	width:       35px;
	height:      35px;
	object-fit:  contain;
	flex:        0 0 35px;
	transition:  var(--qb-transition);
}

.qb-tabs-showcase .qb-tab-item span {
	font-family:    "Quicksand", Sans-serif;
	display:        block;
	font-size:      17px;
	font-weight:    600;
	line-height:    1.35;
	letter-spacing: -0.02em;
	color:          #122F2A;
	transition:     var(--qb-transition);
}

.qb-tabs-showcase .qb-tab-item.active span { color: var(--qb-white); }
.qb-tabs-showcase .qb-tab-item.active img  { filter: brightness(0) invert(1); }

/* =========================
   CONTENT WRAP
========================= */

.qb-tabs-showcase .qb-tabs-content { position: relative; }

.qb-tabs-showcase .qb-tab-content {
	display:    none;
	opacity:    0;
	transform:  translateY(18px);
	transition: opacity .45s ease, transform .45s ease;
}

.qb-tabs-showcase .qb-tab-content.active {
	display:   block;
	opacity:   1;
	transform: translateY(0);
	animation: qbTabsContentReveal .55s cubic-bezier(.22, .61, .36, 1);
}

@keyframes qbTabsContentReveal {
	0%   { opacity: 0; transform: translateY(18px); }
	100% { opacity: 1; transform: translateY(0); }
}

/* =========================
   CONTENT SLIDER WRAPPER
========================= */

.qb-tabs-showcase .qb-tab-slider {
	position: relative;
	width:    100%;
	overflow: hidden;
}

.qb-tabs-showcase .qb-tab-slider .swiper-wrapper { align-items: stretch; }
.qb-tabs-showcase .qb-tab-slider .swiper-slide   { height: auto; }

/* =========================
   CARD
========================= */

.qb-tabs-showcase .qb-card {
	position:              relative;
	display:               grid;
	grid-template-columns: minmax(320px, 56%) minmax(280px, 44%);
	align-items:           center;
	gap:                   46px;
	padding:               42px 52px;
	border-radius:         28px;
	background:            var(--qb-bg);
	box-shadow:            var(--qb-shadow);
	overflow:              hidden;
	transition:            var(--qb-transition);
	min-height:            560px;
}

.qb-tabs-showcase .qb-card:hover {
	transform:  translateY(-4px);
	box-shadow: var(--qb-shadow-hover);
}

.qb-tabs-showcase .qb-card-image {
	position:      relative;
	border-radius: 22px;
	overflow:      hidden;
	height:        100%;
	min-height:    350px;
	background:    #d9dde1;
}

.qb-tabs-showcase .qb-card-image img {
	width:      100%;
	height:     100%;
	object-fit: cover;
	transition: transform .7s cubic-bezier(.22, .61, .36, 1);
}

.qb-tabs-showcase .qb-card:hover .qb-card-image img { transform: scale(1.04); }

.qb-tabs-showcase .qb-card-content {
	position:        relative;
	z-index:         2;
	display:         flex;
	flex-direction:  column;
	align-items:     flex-start;
	justify-content: center;
}

.qb-tabs-showcase .qb-card-content h3 {
	margin:         0 0 20px;
	font-size:      25px !important;
	line-height:    1.28;
	font-weight:    800;
	letter-spacing: -0.03em;
	color:          var(--qb-text);
	max-width:      720px;
}

.qb-tabs-showcase .qb-card-content p {
	margin:      0;
	font-size:   clamp(16px, 1.2vw, 18px);
	line-height: 1.75;
	font-weight: 400;
	color:       var(--qb-text-soft);
	max-width:   680px;
}

/* =========================
   BUTTON
========================= */

.qb-tabs-showcase .qb-btn {
	display:         inline-flex;
	align-items:     center;
	justify-content: center;
	gap:             0;
	margin-top:      32px;
	min-height:      48px;
	padding:         0 0 0 24px;
	background:      var(--qb-primary);
	color:           var(--qb-white);
	border:          2px solid var(--qb-primary);
	border-radius:   0;
	font-size:       16px;
	font-weight:     700;
	line-height:     1;
	overflow:        hidden;
	transition:      var(--qb-transition);
	box-shadow:      none;
}

.qb-tabs-showcase .qb-btn::after {
	content:          "\00BB";
	display:          inline-flex;
	align-items:      center;
	justify-content:  center;
	width:            46px;
	height:           46px;
	margin-left:      18px;
	background:       var(--qb-white);
	color:            var(--qb-primary);
	font-size:        24px;
	font-weight:      700;
	border-left:      2px solid var(--qb-primary);
	transition:       var(--qb-transition);
}

.qb-tabs-showcase .qb-btn:hover {
	background:   var(--qb-primary-dark);
	border-color: var(--qb-primary-dark);
	transform:    translateY(-2px);
}

.qb-tabs-showcase .qb-btn:hover::after {
	color:            var(--qb-primary-dark);
	border-left-color: var(--qb-primary-dark);
}

/* =========================
   ARROWS (shared base)
========================= */

.qb-tabs-showcase .qb-slider-arrow {
	position:        absolute;
	top:             50%;
	transform:       translateY(-50%);
	width:           44px;
	height:          44px;
	border-radius:   50%;
	border:          none;
	background:      var(--qb-primary);
	color:           var(--qb-white);
	display:         flex;
	align-items:     center;
	justify-content: center;
	cursor:          pointer;
	z-index:         6;
	transition:      var(--qb-transition);
	box-shadow:      0 8px 20px rgba(0, 90, 169, 0.22);
	padding:         0;
}

.qb-tabs-showcase .qb-slider-arrow:hover {
	transform:  translateY(-50%) scale(1.08);
	background: var(--qb-primary-dark);
}

.qb-tabs-showcase .qb-slider-arrow svg,
.qb-tabs-showcase .qb-slider-arrow i {
	width:   20px;
	height:  20px;
	display: block;
	flex-shrink: 0;
}

/* -- Content-slider arrows (larger, outside the card) -- */
.qb-tabs-showcase .qb-tab-content > .qb-slider-prev { left: -22px; }
.qb-tabs-showcase .qb-tab-content > .qb-slider-next { right: -22px; }

.qb-tabs-showcase .qb-tab-content > .qb-slider-arrow {
	width:  70px;
	height: 70px;
}

/* -- Tabs-nav arrows (compact, sit inside the wrapper padding) -- */
.qb-tabs-showcase .qb-tabs-nav-wrapper > .qb-tabs-nav-arrow {
	top:    50%;
	/* vertical centre of the nav, not the whole wrapper */
}

.qb-tabs-showcase .qb-tabs-nav-wrapper > .qb-slider-prev { left: 0; }
.qb-tabs-showcase .qb-tabs-nav-wrapper > .qb-slider-next { right: 0; }

/* Hide nav arrows by default; JS shows them only when needed */
.qb-tabs-showcase .qb-tabs-nav-wrapper > .qb-slider-arrow { display: none; }

/* =========================
   PAGINATION (shared)
========================= */

.qb-tabs-showcase .qb-slider-pagination {
	display:         flex;
	align-items:     center;
	justify-content: center;
	gap:             10px;
	margin-top:      20px;
}

.qb-tabs-showcase .qb-slider-pagination .swiper-pagination-bullet {
	width:        14px;
	height:       14px;
	margin:       0 !important;
	background:   transparent;
	border:       2px solid #86ad37;
	opacity:      1;
	transition:   var(--qb-transition);
}

.qb-tabs-showcase .qb-slider-pagination .swiper-pagination-bullet-active {
	background:  #86ad37;
	transform:   scale(1.05);
}

/* Tabs-nav pagination sits below the wrapper */
.qb-tabs-showcase .qb-tabs-nav-wrapper > .qb-tabs-nav-pagination {
	position:   static;
	margin-top: 10px;
}

/* =========================
   ENTRANCE ANIMATIONS
========================= */

.qb-tabs-showcase.qb-is-inview .qb-tab-item { animation: qbTabFadeUp .5s ease both; }
.qb-tabs-showcase.qb-is-inview .qb-tab-item:nth-child(2) { animation-delay: .04s; }
.qb-tabs-showcase.qb-is-inview .qb-tab-item:nth-child(3) { animation-delay: .08s; }
.qb-tabs-showcase.qb-is-inview .qb-tab-item:nth-child(4) { animation-delay: .12s; }
.qb-tabs-showcase.qb-is-inview .qb-tab-item:nth-child(5) { animation-delay: .16s; }
.qb-tabs-showcase.qb-is-inview .qb-tab-item:nth-child(6) { animation-delay: .20s; }
.qb-tabs-showcase.qb-is-inview .qb-tab-item:nth-child(7) { animation-delay: .24s; }
.qb-tabs-showcase.qb-is-inview .qb-tab-item:nth-child(8) { animation-delay: .28s; }

.qb-tabs-showcase.qb-is-inview .qb-tab-content.active .qb-card {
	animation: qbCardFadeUp .65s cubic-bezier(.22, .61, .36, 1) both;
}

@keyframes qbTabFadeUp {
	from { opacity: 0; transform: translateY(16px); }
	to   { opacity: 1; transform: translateY(0); }
}

@keyframes qbCardFadeUp {
	from { opacity: 0; transform: translateY(28px); }
	to   { opacity: 1; transform: translateY(0); }
}

/* =========================
   TABLET  (≤ 1199px)
========================= */

@media (max-width: 1199px) {
	.qb-tabs-showcase .qb-tabs-nav {
		gap: 12px;
	}

	.qb-tabs-showcase .qb-tab-item {
		min-height: 84px;
		padding:    16px 18px;
	}

	.qb-tabs-showcase .qb-tab-item span { font-size: 17px; }

	.qb-tabs-showcase .qb-card {
		grid-template-columns: 1fr;
		gap:        30px;
		padding:    34px 34px 38px;
		min-height: auto;
	}

	.qb-tabs-showcase .qb-card-image { min-height: 360px; }

	.qb-tabs-showcase .qb-tab-content > .qb-slider-prev { left:  12px; }
	.qb-tabs-showcase .qb-tab-content > .qb-slider-next { right: 12px; }
}

/* =========================
   MOBILE  (≤ 767px)
========================= */

@media (max-width: 767px) {
	/* The grid is now driven entirely by --qb-tabs-columns (set by JS).
	   We do NOT hardcode a column count here so the Elementor setting is respected. */
	.qb-tabs-showcase .qb-tabs-nav {
		gap:           10px;
	}

	.qb-tabs-showcase .qb-tabs-nav-wrapper {
		margin-bottom: 18px;
	}

	.qb-tabs-showcase .qb-tab-item {
		min-height:    72px;
		padding:       14px;
		gap:           10px;
		border-radius: 14px;
	}

	.qb-tabs-showcase .qb-tab-item::before {
		width:  24px;
		height: 24px;
		bottom: -10px;
	}

	.qb-tabs-showcase .qb-tab-item img {
		width:  30px;
		height: 30px;
		flex:   0 0 30px;
	}

	.qb-tabs-showcase .qb-tab-item span {
		font-size:   14px;
		line-height: 1.3;
	}

	/* Card */
	.qb-tabs-showcase .qb-card {
		padding:       18px 18px 24px;
		border-radius: 18px;
		gap:           18px;
	}

	.qb-tabs-showcase .qb-card-image {
		min-height:    220px;
		border-radius: 16px;
	}

	.qb-tabs-showcase .qb-card-content h3 {
		margin-bottom: 12px;
		font-size:     24px;
		line-height:   1.35;
	}

	.qb-tabs-showcase .qb-card-content p {
		font-size:   15px;
		line-height: 1.75;
	}

	/* Button */
	.qb-tabs-showcase .qb-btn {
		margin-top: 20px;
		min-height: 44px;
		padding-left: 18px;
		font-size:  14px;
	}

	.qb-tabs-showcase .qb-btn::after {
		width:       42px;
		height:      42px;
		margin-left: 14px;
		font-size:   20px;
	}

	/* Content-slider arrows */
	.qb-tabs-showcase .qb-tab-content > .qb-slider-arrow {
		width:  52px;
		height: 52px;
	}

	.qb-tabs-showcase .qb-tab-content > .qb-slider-prev { left:  8px; }
	.qb-tabs-showcase .qb-tab-content > .qb-slider-next { right: 8px; }

	/* Pagination */
	.qb-tabs-showcase .qb-slider-pagination { margin-top: 14px; gap: 8px; }
	.qb-tabs-showcase .qb-slider-pagination .swiper-pagination-bullet { width: 12px; height: 12px; }

	/* Tabs-nav arrows — align vertically with the nav row */
	.qb-tabs-showcase .qb-tabs-nav-wrapper > .qb-slider-arrow {
		/* The wrapper has 44px padding each side; arrows sit centred in that padding */
		top:    50%;
		width:  36px;
		height: 36px;
	}

	.qb-tabs-showcase .qb-tabs-nav-wrapper > .qb-slider-arrow svg,
	.qb-tabs-showcase .qb-tabs-nav-wrapper > .qb-slider-arrow i {
		width:  16px;
		height: 16px;
	}
}

/* =========================
   SMALL MOBILE  (≤ 479px)
========================= */

@media (max-width: 479px) {
	.qb-tabs-showcase .qb-card-image   { min-height: 190px; }
	.qb-tabs-showcase .qb-card-content h3 { font-size: 21px; }
}