:root {
	--ink: #12181b;
	--paper: #f5f3ee;
	--accent: #ff5e14;
	--accent-2: #ff5e14;
	--bar-1: #ff5e14;
	--nav-h: 84px;
	--max-w: 1400px;
}

/* Header Light Background Override */
header.header-four .header-main-2,
.header-main-2 {
	background-color: #ffffff !important;
}

header.header-four .header-main-2 .mainmenu > li.main-nav > a,
.header-main-2 .mainmenu > li.main-nav > a {
	color: #0c0a0a !important;
}

header.header-four .header-main-2 .mainmenu > li.main-nav:hover > a,
header.header-four .header-main-2 .mainmenu > li.main-nav.active > a,
.header-main-2 .mainmenu > li.main-nav:hover > a,
.header-main-2 .mainmenu > li.main-nav.active > a {
	color: #ff5e14 !important;
}

/* ---------- NAVBAR ---------- */
/*.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  height: var(--nav-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 48px;
  /* background:transparent; */
/*background-color: url(--paper);
  transition: background .35s ease, backdrop-filter .35s ease, height .35s ease, border-color .35s ease;
  border-bottom: 1px solid transparent;
}*/

/*.nav.scrolled {
  background: rgba(18, 24, 27, 0.82);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  height: 68px;
  border-bottom: 1px solid rgba(245, 243, 238, 0.08);
}

.logo {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
  font-size: 22px;
  letter-spacing: 0.5px;
  color: var(--paper);
  display: flex;
  align-items: center;
  gap: 8px;
}

.logo span {
  color: var(--accent);
}

.nav-links {
  list-style: none;
  display: flex;
  gap: 40px;
}

.nav-links li a {
  color: var(--paper);
  text-decoration: none;
  font-size: 14.5px;
  font-weight: 500;
  letter-spacing: 0.3px;
  position: relative;
  padding: 6px 0;
  opacity: 0.92;
  transition: opacity .2s ease;
}

.nav-links li a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0%;
  height: 2px;
  background: var(--accent);
  transition: width .25s ease;
}

.nav-links li a:hover {
  opacity: 1;
}

.nav-links li a:hover::after {
  width: 100%;
}

.nav-cta {
  display: flex;
  align-items: center;
  gap: 24px;
}

.nav-btn {
  border: 1px solid rgba(245, 243, 238, 0.5);
  color: var(--paper);
  background: transparent;
  padding: 9px 22px;
  border-radius: 2px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all .25s ease;
}

.nav-btn:hover {
  background: var(--paper);
  color: var(--ink);
  border-color: var(--paper);
}

.nav-toggle {
  display: none;
}*/

/* ---------- HERO ---------- */
.hero {
	position: relative;
	/*height: 100vh;*/
	min-height: 640px;
	width: 100%;
	overflow: hidden;
	display: flex;
	align-items: flex-end;
	isolation: isolate;
}

.hero-slide {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center;
	opacity: 0;
	transform-origin: center;
	/* JS overrides this per-slide to the active thumbnail's position */
	will-change: opacity, transform;
	backface-visibility: hidden;
	/* stops the scale animation from sub-pixel "shimmering" */
	-webkit-backface-visibility: hidden;
}

/* CINEMATIC HERO ANIMATION:
   0%   -> invisible, zoomed in to 1.08 (starting point)
   100% -> fully faded in AND settled to scale(1), in 1.8s
   Slower duration + a gentler ease-out curve = a relaxed, unhurried settle
   instead of a snappy/glitchy one. Background stays fully static after this. */
/* CINEMATIC HERO ANIMATION — synced to the thumb's scale-up-right pop:
   same cubic-bezier curve and same scale(0.5 -> 1) direction as .scale-up-right,
   just stretched a bit longer so a full-screen image reads clearly.
   transform-origin is set by JS to the exact screen position of the thumb that
   triggered it, so the background visually "grows out of" that same card. */
@keyframes heroCinematic {
	0% {
		opacity: 0;
		transform: scale(var(--pop-scale, 0.96));
	}

	100% {
		opacity: 1;
		transform: scale(1);
	}
}

.hero-slide.active {
	animation: heroCinematic 1.2s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* Overlay: darker on the left (behind the text), fading toward the right so the image stays visible,
   plus a subtle bottom gradient so the progress bar / controls stay readable. */
.hero-slide::after {
	content: "";
	position: absolute;
	inset: 0;
	background:
		linear-gradient(
			90deg,
			rgba(10, 14, 16, 0.55) 0%,
			rgba(10, 14, 16, 0.35) 40%,
			rgba(10, 14, 16, 0.12) 70%,
			rgba(10, 14, 16, 0.03) 100%
		),
		linear-gradient(
			0deg,
			rgba(10, 14, 16, 0.45) 0%,
			rgba(10, 14, 16, 0.1) 32%,
			rgba(10, 14, 16, 0) 55%
		);
}

.hero-content {
	position: relative;
	z-index: 5;
	max-width: var(--max-w);
	width: 100%;
	margin: 0 auto;
	padding: 0 48px 96px;
}

/* Each text element starts invisible + shifted down; JS adds ".in" to the parent
   after the new slide's text is swapped in, which triggers these staggered animations.
   Delays are staggered ~150ms apart so heading -> sub -> button reveal in sequence. */
.hero-eyebrow,
.hero h1,
.hero p.sub,
.hero-btn {
	opacity: 0;
	transform: translateY(30px);
}

.hero-content.in .hero-eyebrow {
	animation: heroTextIn 0.7s cubic-bezier(0.22, 0.61, 0.36, 1) 0.15s forwards;
}

.hero-content.in h1 {
	animation: heroTextIn 0.8s cubic-bezier(0.22, 0.61, 0.36, 1) 0.32s forwards;
}

.hero-content.in p.sub {
	animation: heroTextIn 0.9s cubic-bezier(0.22, 0.61, 0.36, 1) 0.5s forwards;
}

.hero-content.in .hero-btn {
	animation: heroTextIn 0.9s cubic-bezier(0.22, 0.61, 0.36, 1) 0.68s forwards;
}

@keyframes heroTextIn {
	from {
		opacity: 0;
		transform: translateY(30px);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.hero-eyebrow {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 18px;
	font-size: 13px;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	color: var(--accent-2);
	font-weight: 600;
}

.hero-eyebrow .dash {
	width: 32px;
	height: 2px;
	background: var(--accent-2);
}

.hero h1 {
	font-family: "Space Grotesk", sans-serif;
	font-weight: 600;
	font-size: clamp(32px, 4.4vw, 60px);
	line-height: 1.12;
	max-width: 760px;
	margin-bottom: 22px;
}

.hero p.sub {
	font-size: 17px;
	font-weight: 500;
	color: rgba(245, 243, 238, 0.85);
	margin-bottom: 34px;
}

.hero-btn {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	border: 1px solid rgba(245, 243, 238, 0.6);
	color: var(--paper);
	background: rgba(245, 243, 238, 0.06);
	padding: 15px 30px;
	font-size: 14.5px;
	font-weight: 600;
	letter-spacing: 0.3px;
	cursor: pointer;
	transition: all 0.25s ease;
}

.hero-btn:hover {
	background: var(--paper);
	color: var(--ink);
	transform: translateY(-2px);
}

/* ---------- SLIDE CONTROLS ---------- */
.hero-controls {
	position: absolute;
	bottom: 44px;
	right: 48px;
	z-index: 6;
	display: flex;
	align-items: center;
	gap: 18px;
}

.hero-arrow {
	width: 42px;
	height: 42px;
	border-radius: 50%;
	border: 1px solid rgba(245, 243, 238, 0.4);
	background: transparent;
	color: var(--paper);
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: all 0.2s ease;
}

.hero-arrow:hover {
	background: var(--paper);
	color: var(--ink);
	border-color: var(--paper);
	transform: translateY(-1px);
}

.hero-progress {
	position: absolute;
	bottom: 56px;
	left: 870px;
	width: 280px;
	right: 200px;
	height: 2px;
	background: rgba(53, 37, 63, 0.2);
	z-index: 6;
}

.hero-progress-bar {
	height: 100%;
	width: 0%;
	background: var(--bar-1);
	transition: width 0.1s linear;
}

@media (max-width: 900px) {
	.nav {
		padding: 0 20px;
	}

	.nav-links {
		display: none;
	}

	.nav-toggle {
		display: block;
		background: none;
		border: none;
		color: var(--paper);
		font-size: 26px;
		cursor: pointer;
	}

	.hero-content {
		padding: 0 20px 64px;
	}

	.hero-progress {
		right: 20px;
		left: 20px;
		bottom: 96px;
	}

	.hero-controls {
		right: 20px;
		bottom: 36px;
	}

	/* mobile: same synced curve, lighter starting scale (easier on weaker GPUs) */
	.hero-slide.active {
		animation-name: heroCinematicMobile;
		animation-timing-function: cubic-bezier(0.39, 0.575, 0.565, 1);
	}
}

@keyframes heroCinematicMobile {
	0% {
		opacity: 0;
		transform: scale(var(--pop-scale, 0.75));
	}

	100% {
		opacity: 1;
		transform: scale(1);
	}
}

/* Respect the user's OS-level reduced-motion preference: keep the fade, drop the zoom/pan/slide-up */
@media (prefers-reduced-motion: reduce) {
	.hero-slide.active {
		animation: none;
		opacity: 1;
	}

	.hero-eyebrow,
	.hero h1,
	.hero p.sub,
	.hero-btn {
		opacity: 1;
		transform: none;
	}

	.hero-content.in .hero-eyebrow,
	.hero-content.in h1,
	.hero-content.in p.sub,
	.hero-content.in .hero-btn {
		animation: none;
	}
}

.hero-thumbs {
	position: absolute;
	bottom: 20%;
	right: 48px;
	max-width: 500px;
	z-index: 7;
	overflow: hidden;
	opacity: 0;
	transform: translateY(20px);
	pointer-events: none;
	transition:
		opacity 0.5s ease,
		transform 0.35s ease;
}

/* the actual scrolling row — script.js moves this with translateX to bring
   the next banner's card to the front, and duplicates its content enough
   times that it can shift forward forever without ever running out of cards,
   even if there are only 2 banners total */
.hero-thumbs-track {
	display: flex;
	flex-direction: row;
	gap: 14px;
	will-change: transform;
}

/* shown only for the last part of each cycle (controlled from script.js) */
.hero-thumbs.visible {
	opacity: 1;
	transform: translateY(0);
	pointer-events: auto;
}

/* PREVIEW WINDOW: the upcoming card (".next-up") is highlighted while the
   track slides it into the front slot — that's the marquee "shift forward"
   motion, driven by script.js changing the track's transform.
   Every other card just dims here; nothing else moves independently. */
.hero-thumbs.previewing .hero-thumb {
	transition: opacity 0.4s ease;
}

.hero-thumbs.previewing .hero-thumb:not(.next-up) {
	opacity: 0.35;
}

.hero-thumbs.previewing .hero-thumb.next-up {
	opacity: 1;
	z-index: 9;
	box-shadow: 0 14px 32px rgba(0, 0, 0, 0.35);
}

/* ----------------------------------------------
 * Generated by Animista on 2026-8-5 14:27:58
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info.
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */
.scale-up-right {
	-webkit-animation: scale-up-right 0.4s cubic-bezier(0.39, 0.575, 0.565, 1)
		both;
	animation: scale-up-right 0.4s cubic-bezier(0.39, 0.575, 0.565, 1) both;
}

/**
 * ----------------------------------------
 * animation scale-up-right
 * ----------------------------------------
 */
@-webkit-keyframes scale-up-right {
	0% {
		-webkit-transform: scale(0.5);
		transform: scale(0.5);
		-webkit-transform-origin: 100% 50%;
		transform-origin: 100% 50%;
	}
	100% {
		-webkit-transform: scale(1);
		transform: scale(1);
		-webkit-transform-origin: 100% 50%;
		transform-origin: 100% 50%;
	}
}
@keyframes scale-up-right {
	0% {
		-webkit-transform: scale(0.5);
		transform: scale(0.5);
		-webkit-transform-origin: 100% 50%;
		transform-origin: 100% 50%;
	}
	100% {
		-webkit-transform: scale(1);
		transform: scale(1);
		-webkit-transform-origin: 100% 50%;
		transform-origin: 100% 50%;
	}
}

/* LAUNCHING (final moments before the actual slide switch): every card,
   including next-up, simply fades out — the background has already taken
   over visually by this point, so the thumb strip just needs to get out of the way */
.hero-thumbs.launching .hero-thumb {
	transition: opacity 0.25s ease;
	opacity: 0;
}

.hero-thumbs::-webkit-scrollbar {
	display: none;
}

.hero-thumb {
	position: relative;
	width: 117px;
	height: 190px;
	border-radius: 4px;
	overflow: hidden;
	cursor: pointer;
	background-size: cover;
	background-position: center;
	border: 1.5px solid rgba(245, 243, 238, 0.25);
	opacity: 0.6;
	transition:
		opacity 0.4s cubic-bezier(0.22, 0.61, 0.36, 1),
		transform 0.4s cubic-bezier(0.22, 0.61, 0.36, 1);
	flex-shrink: 0;
	will-change: transform, opacity;
	/* <- yeh add karo: card apni width kabhi chhoti na kare, chahe container tight ho */
}

.hero-thumb:hover {
	transform: translateY(-4px) scale(1.02);
	opacity: 0.9;
}

.hero-thumb.active {
	opacity: 1;
	border-color: var(--accent);
	box-shadow: 0 10px 24px rgba(0, 0, 0, 0.24);
}

.hero-thumb.next-up {
	position: relative;
}

.hero-thumb-fill {
	position: absolute;
	left: 0;
	bottom: 0;
	height: 3px;
	width: 0%;
	background: var(--accent);
}

.dropdown {
	position: relative;
}

.arrow {
	font-size: 10px;
	margin-left: 4px;
	transition: transform 0.25s ease;
}

.dropdown-menu {
	position: absolute;
	top: 100%;
	/* parent link ke bilkul neeche */
	left: 0;
	min-width: 200px;
	list-style: none;
	background: rgba(18, 24, 27, 0.95);
	backdrop-filter: blur(14px);
	border: 1px solid rgba(245, 243, 238, 0.1);
	border-radius: 4px;
	padding: 10px 0;
	margin-top: 14px;
	/* thoda gap parent link se */

	opacity: 0;
	visibility: hidden;
	transform: translateY(-8px);
	transition:
		opacity 0.25s ease,
		transform 0.25s ease,
		visibility 0.25s ease;
}

/* ---------- BANNER WRAPPER (HERO BANNER) ---------- */
.banner-wrap {
	position: relative;
	width: 100%;
	height: 85vh;
	min-height: 600px;
	max-height: 850px;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #ffffff;
	background: #181d20;
	isolation: isolate;
}

/* Background Layers */
.banner-bg-container {
	position: absolute;
	inset: 0;
	z-index: 1;
	overflow: hidden;
	pointer-events: none;
}

.bg-layer {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	transform-origin: center;
}

.bg-layer.bg-prev {
	z-index: 1;
	opacity: 1;
}

.bg-layer.bg-active {
	z-index: 2;
	opacity: 0;
}

.banner-bg-overlay {
	position: absolute;
	inset: 0;
	z-index: 3;
	background: rgba(0, 0, 0, 0.1);
}

/* MAIN SLIDER (SWIPER) */
#heroSwiper.swiper {
	position: absolute;
	inset: 0;
	z-index: 4;
	width: 100%;
	height: 100%;
}

#heroSwiper .swiper-slide {
	position: relative;
	display: flex;
	align-items: center;
	padding: 0 5%;
	width: 100%;
	height: 100%;
	box-sizing: border-box;
	background: transparent;
	isolation: isolate;
}

#heroSwiper .swiper-slide::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 2;
	background: transparent;
	pointer-events: none;
}

.slide-content {
	position: relative;
	z-index: 5;
	max-width: 1200px;
	width: 100%;
	margin: 0 auto;
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.slide-left {
	max-width: 650px;
	text-align: left;
	z-index: 5;
}

.slide-left .tag {
	display: inline-block;
	padding: 6px 16px;
	background: rgba(255, 94, 20, 0.15);
	border: 1px solid #ff5e14;
	color: #ff5e14;
	border-radius: 4px;
	font-size: 13px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 1.2px;
	margin-bottom: 18px;
}

.slide-left .headline {
	font-family: "Space Grotesk", sans-serif;
	font-size: clamp(30px, 4vw, 54px);
	font-weight: 700;
	line-height: 1.15;
	color: #ffffff;
	margin-bottom: 18px;
	text-shadow: none;
}

.slide-left .sub-company {
	font-size: 16px;
	line-height: 1.6;
	color: rgba(245, 243, 238, 0.9);
	margin-bottom: 28px;
	max-width: 560px;
	text-shadow: none;
}

.slide-left .cta-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 14px 32px;
	background: #ff5e14;
	color: #ffffff;
	font-weight: 600;
	font-size: 15px;
	border-radius: 4px;
	text-decoration: none;
	transition: all 0.3s ease;
	box-shadow: 0 4px 15px rgba(255, 94, 20, 0.3);
}

.slide-left .cta-btn:hover {
	background: #e04d0b;
	transform: translateY(-2px);
	color: #ffffff;
	box-shadow: 0 6px 20px rgba(255, 94, 20, 0.4);
}

/* PREVIEW CARD TRACK */
.card-slider-wrapper {
	display: none !important;
	position: absolute;
	bottom: 80px;
	right: 5%;
	z-index: 6;
	width: 440px;
	overflow: hidden;
	opacity: 1;
	pointer-events: auto;
	transition: opacity 0.5s ease;
}

.card-track {
	display: flex;
	gap: 16px;
	will-change: transform;
}

.card-slide {
	flex: 0 0 130px;
	width: 130px;
	height: 180px;
	border-radius: 8px;
	overflow: hidden;
	cursor: pointer;
	position: relative;
	border: 2px solid rgba(255, 255, 255, 0.25);
	box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
	transition:
		transform 0.3s ease,
		border-color 0.3s ease;
}

.card-slide:hover {
	transform: translateY(-4px);
	border-color: #ff5e14;
}

.img-card {
	width: 100%;
	height: 100%;
	position: relative;
	overflow: hidden;
}

.img-card img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.card-label {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	padding: 10px 8px 8px;
	background: linear-gradient(
		0deg,
		rgba(0, 0, 0, 0.9) 0%,
		rgba(0, 0, 0, 0) 100%
	);
	color: #ffffff;
	font-size: 11px;
	font-weight: 600;
	text-align: center;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* Bottom Navigation */
.bottom-nav-container {
	position: absolute;
	bottom: 30px;
	left: 5%;
	right: 5%;
	z-index: 7;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	max-width: 1200px;
	margin: 0 auto;
	pointer-events: none;
}

.autoplay-progress-bar {
	flex: 1;
	max-width: 280px;
	height: 3px;
	background: rgba(255, 255, 255, 0.2);
	border-radius: 2px;
	overflow: hidden;
}

.progress-fill {
	height: 100%;
	width: 0%;
	background: #ff5e14;
	/* No CSS transition here on purpose: GSAP animates width directly every
	   frame in banner.js, and a competing CSS transition on the same property
	   was making the fill lag ~100ms behind each tick, looking stepped instead
	   of smooth. */
}

.nav-buttons {
	display: flex;
	gap: 12px;
	pointer-events: auto;
}

.nav-btn {
	width: 44px;
	height: 44px;
	border-radius: 50%;
	border: 1px solid rgba(255, 255, 255, 0.4);
	background: rgba(0, 0, 0, 0.3);
	color: #ffffff;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: all 0.25s ease;
	backdrop-filter: blur(4px);
}

.nav-btn:hover {
	background: #ff5e14;
	border-color: #ff5e14;
	transform: scale(1.05);
}

@media (max-width: 991px) {
	.banner-wrap {
		height: 70vh;
		min-height: 500px;
	}
	.card-slider-wrapper {
		display: none !important;
	}
	.slide-left {
		max-width: 100%;
	}
}

@media (max-width: 576px) {
	.banner-wrap {
		height: 65vh;
		min-height: 440px;
	}
	.slide-left .headline {
		font-size: 26px;
	}
	.slide-left .sub-company {
		font-size: 14px;
	}
	.autoplay-progress-bar {
		display: none;
	}
}