/*
 * Giltech About Us – Elementor widget styles.
 * Everything is scoped under .gwab-section so it cannot leak into the theme or into the
 * other widgets of this plugin. Values reproduce the original HTML exactly (all of its
 * stacked rule layers merged into the final result). Elementor style controls only change the
 * CSS variables below (or plain properties of elements without hover states), so the hover
 * effects always keep working.
 */

.gwab-section,
.gwab-section *,
.gwab-section *::before,
.gwab-section *::after {
	box-sizing: border-box;
}

.gwab-section {
	--gwab-ease: cubic-bezier(.2, .72, .2, 1);

	/* Colour tokens (Elementor controls override these). */
	--gwab-bg-top: #fcfcfb;
	--gwab-bg-bottom: #f3f4f2;
	--gwab-line: #E1E3E5;
	--gwab-head-mid: rgba(49, 95, 168, .28);
	--gwab-accent-a: #E30613;
	--gwab-accent-b: #315FA8;

	--gwab-kicker: #E30613;
	--gwab-title: #17191D;
	--gwab-lead: #74787E;

	--gwab-ov-top: rgba(10, 12, 14, .02);
	--gwab-ov-bottom: rgba(10, 12, 14, .72);
	--gwab-badge-bg: rgba(255, 255, 255, .9);
	--gwab-badge-color: #17191D;
	--gwab-index: rgba(255, 255, 255, .84);
	--gwab-ov-text: #FFFFFF;
	--gwab-ov-desc: rgba(255, 255, 255, .78);

	--gwab-section-title: #17191D;
	--gwab-text: #666a70;

	--gwab-values-bg: rgba(255, 255, 255, .48);
	--gwab-values-border: #e4e6e7;
	--gwab-value-hover: rgba(255, 255, 255, .6);
	--gwab-num: #9a9ea3;
	--gwab-num-h: #315FA8;
	--gwab-vtitle: #17191D;
	--gwab-vtitle-h: #E30613;
	--gwab-vdesc: #74787E;

	--gwab-note-title: #17191D;
	--gwab-note: #74787E;

	--gwab-btn-bg: #17191D;
	--gwab-btn-color: #FFFFFF;
	--gwab-btn-bg-h: #E30613;
	--gwab-btn-color-h: #FFFFFF;
	--gwab-btn-shine: rgba(255, 255, 255, .15);

	position: relative;
	width: 100%;
	margin: 0;
	padding: 54px clamp(16px, 4vw, 64px) 58px;
	overflow: hidden;
	color: #17191D;
	font-family: "DM Sans", Manrope, Arial, sans-serif;
	text-align: start;
	-webkit-font-smoothing: antialiased;
	background:
		radial-gradient(circle at 88% 12%, rgba(49, 95, 168, .055), transparent 23rem),
		radial-gradient(circle at 5% 92%, rgba(227, 6, 19, .032), transparent 21rem),
		linear-gradient(180deg, var(--gwab-bg-top) 0%, var(--gwab-bg-bottom) 100%);
}

/* Edge-to-edge: CSS fallback, the script then sets exact pixel values. */
.gwab-section.gwab-fullwidth {
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(50% - 50vw);
}

/* Decorative glow (bottom-left). */
.gwab-section::after {
	content: "";
	position: absolute;
	width: 420px;
	height: 420px;
	left: -210px;
	bottom: -250px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(227, 6, 19, .035), transparent 68%);
	pointer-events: none;
}

.gwab-section.gwab-no-glow {
	background: linear-gradient(180deg, var(--gwab-bg-top) 0%, var(--gwab-bg-bottom) 100%);
}

.gwab-section.gwab-no-glow::after {
	display: none;
}

.gwab-section .gwab-inner {
	position: relative;
	z-index: 1;
	width: 100%;
	max-width: 1240px;
	margin: 0 auto;
}

/* ---------- Header ---------- */
.gwab-section .gwab-top {
	position: relative;
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	gap: 34px;
	margin: 0;
	padding: 0 0 22px;
	border: 0;
	border-bottom: 1px solid var(--gwab-line);
}

.gwab-section .gwab-top::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 1px;
	background: linear-gradient(90deg, var(--gwab-line), var(--gwab-head-mid), var(--gwab-line));
}

.gwab-section .gwab-kicker {
	margin: 0 0 10px;
	color: var(--gwab-kicker);
	font-family: inherit;
	font-size: 11px;
	font-weight: 500;
	line-height: normal;
	letter-spacing: .18em;
	text-transform: uppercase;
}

.gwab-section .gwab-title {
	margin: 0;
	padding: 0;
	color: var(--gwab-title);
	font-family: inherit;
	font-size: clamp(38px, 4.6vw, 56px);
	font-weight: 400;
	line-height: .96;
	letter-spacing: -.055em;
	text-transform: none;
}

.gwab-section .gwab-lead {
	max-width: 520px;
	margin: 0;
	color: var(--gwab-lead);
	font-family: inherit;
	font-size: 14px;
	font-weight: 400;
	line-height: 1.75;
}

/* ---------- Grid ---------- */
.gwab-section .gwab-grid {
	display: grid;
	grid-template-columns: minmax(0, .88fr) minmax(0, 1.12fr);
	gap: 24px;
	align-items: stretch;
	padding-top: 22px;
}

/* ---------- Image card ---------- */
.gwab-section .gwab-visual {
	position: relative;
	min-height: 450px;
	height: 100%;
	border: 1px solid rgba(255, 255, 255, .8);
	border-radius: 20px;
	overflow: hidden;
	background: #ddd;
	box-shadow: 0 24px 55px rgba(18, 20, 23, .09);
}

.gwab-section .gwab-visual img {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	object-fit: cover;
	object-position: center center;
	transition: transform .9s var(--gwab-ease), filter .9s var(--gwab-ease);
}

.gwab-section .gwab-visual:hover img {
	transform: scale(1.045);
	filter: saturate(1.06) contrast(1.02);
}

.gwab-section .gwab-visual::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, var(--gwab-ov-top) 30%, var(--gwab-ov-bottom) 100%);
	pointer-events: none;
}

.gwab-section .gwab-visual::before {
	content: "";
	position: absolute;
	inset: 10px;
	z-index: 2;
	border: 1px solid rgba(255, 255, 255, .18);
	border-radius: 14px;
	pointer-events: none;
}

.gwab-section .gwab-visual-top {
	position: absolute;
	top: 16px;
	left: 16px;
	right: 16px;
	z-index: 2;
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.gwab-section .gwab-badge {
	padding: 7px 11px;
	border-radius: 999px;
	background: var(--gwab-badge-bg);
	box-shadow: 0 5px 14px rgba(0, 0, 0, .08);
	color: var(--gwab-badge-color);
	font-family: inherit;
	font-size: 8px;
	line-height: normal;
	letter-spacing: .1em;
	text-transform: uppercase;
}

.gwab-section .gwab-index {
	color: var(--gwab-index);
	font-family: inherit;
	font-size: 9px;
	line-height: normal;
	letter-spacing: .12em;
}

.gwab-section .gwab-visual-copy {
	position: absolute;
	left: 20px;
	right: 20px;
	bottom: 20px;
	z-index: 2;
	color: var(--gwab-ov-text);
}

.gwab-section .gwab-vline {
	width: 34px;
	height: 2px;
	margin-bottom: 8px;
	background: linear-gradient(90deg, var(--gwab-accent-a), var(--gwab-accent-b));
}

.gwab-section .gwab-vsmall {
	display: block;
	margin-bottom: 5px;
	color: var(--gwab-ov-text);
	font-family: inherit;
	font-size: 7px;
	line-height: normal;
	letter-spacing: .15em;
	text-transform: uppercase;
	opacity: .72;
}

.gwab-section .gwab-vtitle {
	margin: 0 0 5px;
	padding: 0;
	color: var(--gwab-ov-text);
	font-family: inherit;
	font-size: 25px;
	font-weight: 400;
	line-height: 1.05;
	letter-spacing: -.04em;
	text-transform: none;
}

.gwab-section .gwab-vdesc {
	max-width: 370px;
	margin: 0;
	color: var(--gwab-ov-desc);
	font-family: inherit;
	font-size: 10.5px;
	line-height: 1.65;
}

/* ---------- Copy column ---------- */
.gwab-section .gwab-copy {
	padding: 8px 0 0;
}

/* Thin accent line (kept exactly as in the original design). */
.gwab-section.gwab-accent .gwab-copy::before {
	content: "";
	position: absolute;
	left: -12px;
	top: 8px;
	width: 2px;
	height: 70px;
	background: linear-gradient(180deg, var(--gwab-accent-a), var(--gwab-accent-b), transparent);
	opacity: .6;
	pointer-events: none;
}

.gwab-section .gwab-section-title {
	margin: 0 0 13px;
	padding: 0;
	color: var(--gwab-section-title);
	font-family: inherit;
	font-size: clamp(29px, 3vw, 41px);
	font-weight: 400;
	line-height: 1;
	letter-spacing: -.045em;
	text-transform: none;
}

.gwab-section .gwab-copy > .gwab-para {
	max-width: 620px;
	margin: 0 0 10px;
	color: var(--gwab-text);
	font-family: inherit;
	font-size: 14px;
	font-weight: 400;
	line-height: 1.8;
}

/* ---------- Values ---------- */
.gwab-section .gwab-values {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0;
	margin: 17px 0 0;
	padding: 0 12px;
	border: 1px solid var(--gwab-values-border);
	border-radius: 15px;
	background: var(--gwab-values-bg);
	box-shadow: 0 12px 30px rgba(20, 22, 25, .035);
}

.gwab-section .gwab-value {
	position: relative;
	min-height: 94px;
	margin: 0;
	padding: 13px 14px 12px 0;
	border-bottom: 1px solid var(--gwab-line);
	transition: background .25s var(--gwab-ease), transform .25s var(--gwab-ease);
}

.gwab-section .gwab-value:nth-child(even) {
	padding-left: 14px;
	border-left: 1px solid var(--gwab-line);
}

.gwab-section .gwab-value:hover {
	background: var(--gwab-value-hover);
}

.gwab-section .gwab-value::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: -1px;
	width: 34px;
	height: 2px;
	background: linear-gradient(90deg, var(--gwab-accent-a), var(--gwab-accent-b));
	transform: scaleX(0);
	transform-origin: left;
	transition: transform .3s var(--gwab-ease);
}

.gwab-section .gwab-value:hover::after {
	transform: scaleX(1);
}

.gwab-section .gwab-value-number {
	margin-bottom: 7px;
	color: var(--gwab-num);
	font-family: inherit;
	font-size: 8px;
	line-height: normal;
	letter-spacing: .13em;
	transition: color .2s ease;
}

.gwab-section .gwab-value:hover .gwab-value-number {
	color: var(--gwab-num-h);
}

.gwab-section .gwab-value-title {
	margin: 0 0 5px;
	padding: 0;
	color: var(--gwab-vtitle);
	font-family: inherit;
	font-size: 13px;
	font-weight: 400;
	line-height: normal;
	letter-spacing: -.01em;
	text-transform: none;
	transition: color .2s ease, transform .2s var(--gwab-ease);
}

.gwab-section .gwab-value:hover .gwab-value-title {
	color: var(--gwab-vtitle-h);
	transform: translateX(2px);
}

.gwab-section .gwab-value-text {
	margin: 0;
	color: var(--gwab-vdesc);
	font-family: inherit;
	font-size: 10.5px;
	line-height: 1.55;
}

/* ---------- Bottom bar ---------- */
.gwab-section .gwab-bottom {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 18px;
	margin-top: 14px;
}

.gwab-section .gwab-note {
	color: var(--gwab-note);
	font-family: inherit;
	font-size: 10.5px;
	line-height: 1.6;
}

.gwab-section .gwab-note-title {
	display: block;
	margin-bottom: 2px;
	color: var(--gwab-note-title);
	font-size: 12px;
}

.gwab-section .gwab-button,
.gwab-section .gwab-button:visited {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-width: 142px;
	height: 39px;
	padding: 0 17px;
	overflow: hidden;
	border: 0;
	border-radius: 9px;
	background: var(--gwab-btn-bg);
	box-shadow: 0 8px 18px rgba(23, 25, 29, .10);
	color: var(--gwab-btn-color);
	font-family: inherit;
	font-size: 8px;
	font-weight: 400;
	line-height: normal;
	letter-spacing: .09em;
	text-decoration: none;
	text-transform: uppercase;
	cursor: pointer;
	transition: transform .25s var(--gwab-ease), background .25s var(--gwab-ease), color .25s var(--gwab-ease);
}

.gwab-section .gwab-button::after {
	content: "";
	position: absolute;
	top: -120%;
	left: -35%;
	width: 22%;
	height: 340%;
	background: var(--gwab-btn-shine);
	transform: rotate(20deg);
	transition: left .55s var(--gwab-ease);
	pointer-events: none;
}

.gwab-section .gwab-button:hover,
.gwab-section .gwab-button:focus {
	background: var(--gwab-btn-bg-h);
	color: var(--gwab-btn-color-h);
	text-decoration: none;
	transform: translateY(-2px);
}

.gwab-section .gwab-button:hover::after,
.gwab-section .gwab-button:focus::after {
	left: 115%;
}

.gwab-section .gwab-button:focus-visible {
	outline: 2px solid var(--gwab-accent-a);
	outline-offset: 3px;
}

.gwab-section .gwab-button-arrow {
	display: inline-block;
	color: inherit;
}

/* ---------- Entrance animation ---------- */
.gwab-section.gwab-animate .gwab-visual,
.gwab-section.gwab-animate .gwab-copy {
	animation: gwabRise .75s var(--gwab-ease) both;
}

.gwab-section.gwab-animate .gwab-visual { animation-delay: .05s; }
.gwab-section.gwab-animate .gwab-copy   { animation-delay: .12s; }

@keyframes gwabRise {
	from {
		opacity: 0;
		transform: translateY(22px);
	}
	to {
		opacity: 1;
		transform: none;
	}
}

/* Image on the right (desktop / tablet landscape only). */
@media (min-width: 901px) {
	.gwab-section .gwab-grid.gwab-img-right {
		grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr);
	}

	.gwab-section .gwab-grid.gwab-img-right .gwab-visual {
		order: 2;
	}
}

/* ---------- Tablet ---------- */
@media (max-width: 900px) {
	.gwab-section {
		padding: 42px 20px 46px;
	}

	.gwab-section .gwab-top {
		display: block;
	}

	.gwab-section .gwab-lead {
		margin-top: 13px;
	}

	.gwab-section .gwab-grid {
		grid-template-columns: 1fr;
		gap: 20px;
	}

	.gwab-section .gwab-visual {
		min-height: 390px;
	}

	.gwab-section.gwab-accent .gwab-copy::before {
		left: -8px;
	}
}

/* ---------- Mobile ---------- */
@media (max-width: 620px) {
	.gwab-section {
		padding: 36px 13px 40px;
	}

	.gwab-section .gwab-top {
		padding-bottom: 18px;
	}

	.gwab-section .gwab-title {
		font-size: 37px;
	}

	.gwab-section .gwab-lead {
		font-size: 12px;
		line-height: 1.75;
	}

	.gwab-section .gwab-visual {
		min-height: 320px;
		border-radius: 16px;
	}

	.gwab-section .gwab-vtitle {
		font-size: 22px;
	}

	.gwab-section .gwab-vdesc {
		font-size: 10px;
	}

	.gwab-section .gwab-copy > .gwab-para {
		font-size: 12px;
		line-height: 1.75;
	}

	.gwab-section .gwab-values {
		padding: 0 9px;
	}

	.gwab-section .gwab-value {
		padding: 12px 9px 12px 0;
	}

	.gwab-section .gwab-value:nth-child(even) {
		padding-left: 9px;
	}

	.gwab-section .gwab-value-title {
		font-size: 11.5px;
	}

	.gwab-section .gwab-value-text {
		font-size: 9.5px;
	}

	.gwab-section .gwab-bottom {
		gap: 12px;
	}

	.gwab-section .gwab-button {
		min-width: 120px;
	}
}

/* ---------- Small phones ---------- */
@media (max-width: 390px) {
	.gwab-section .gwab-values {
		grid-template-columns: 1fr;
	}

	.gwab-section .gwab-value,
	.gwab-section .gwab-value:nth-child(even) {
		padding: 11px 0;
	}

	.gwab-section .gwab-value:nth-child(even) {
		border-left: 0;
	}

	.gwab-section .gwab-bottom {
		display: block;
	}

	.gwab-section .gwab-button {
		width: 100%;
		margin-top: 10px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.gwab-section.gwab-animate .gwab-visual,
	.gwab-section.gwab-animate .gwab-copy {
		animation: none;
	}

	.gwab-section *,
	.gwab-section *::before,
	.gwab-section *::after {
		transition: none !important;
	}
}