html {
	scroll-behavior: smooth;
}

:root {
	--color-bg: #f5f7fb;
	--color-bg-alt: #ffffff;
	--color-surface: #ffffff;
	--color-surface-alt: #ecf1ff;
	--color-primary: #0066ff;
	--color-primary-soft: rgba(0, 102, 255, 0.08);
	--color-accent: #ff6f61;
	--color-text: #101426;
	--color-muted: #4a5068;
	--color-border: rgba(0, 0, 0, 0.08);
	--shadow-soft: 0 10px 30px rgba(15, 23, 42, 0.12);
	--radius-lg: 18px;
	--radius-md: 12px;
	--radius-pill: 999px;
	--transition-fast: 0.2s ease;
	--header-height: 90px;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
	font-family: 'Montserrat', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	background-color: #ffffff;
	color: var(--color-text);
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
}

main {
	opacity: 1;
	transform: translateY(0);
	transition: opacity 0.35s ease, transform 0.35s ease;
}

body.is-exiting main {
	opacity: 0;
	transform: translateY(-8px);
}

a {
    color: inherit;
    text-decoration: none;
}

a:hover {
    text-decoration: none;
}

img {
    max-width: 100%;
    display: block;
}

.container {
    width: min(1120px, 100% - 3rem);
    margin-inline: auto;
}

.section {
    padding: 4.5rem 0;
}

.section-light {
	background: transparent;
}

.section-title {
    font-size: 2.2rem;
    font-weight: 700;
    margin-bottom: 0.8rem;
}

.section-intro {
    color: var(--color-muted);
    max-width: 560px;
    font-size: 1.3rem;
}

.section-header-row {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 2rem;
    margin-bottom: 2rem;
}

.grid {
    display: grid;
    gap: 1.8rem;
}

.services-grid {
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.portfolio-grid {
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
}

.products-grid {
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: 1.6rem;
}

.product-card {
	display: flex;
	flex-direction: column;
	overflow: visible;
	/* Override generic .card styles for product tiles */
	background: transparent;
	box-shadow: none;
	padding: 0;
	border-radius: 0;
}

.product-media {
	background: transparent;
	border-radius: 0;
	border: none;
	padding: 1rem;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 160px;
}

.product-media img {
	max-width: 100%;
	max-height: 140px;
	display: block;
	margin: 0 auto;
	object-fit: contain;
	image-rendering: -webkit-optimize-contrast;
	image-rendering: crisp-edges;
	transition: transform 0.25s ease;
	border-radius: 24px;
	clip-path: polygon(12% 0, 88% 0, 100% 24%, 100% 76%, 88% 100%, 12% 100%, 0 76%, 0 24%);
	animation: float-product 4s ease-in-out infinite;
}

@keyframes float-product {
	0%, 100% {
		transform: translateY(0px);
	}
	50% {
		transform: translateY(-8px);
	}
}

.product-info {
	padding-top: 0.8rem;
}

.product-info h3 {
	margin-bottom: 0.25rem;
	font-size: 1rem;
}

.product-meta {
	font-size: 0.82rem;
	color: var(--color-muted);
}

.design-info {
	padding-bottom: 1.2rem;
}

.design-meta {
	margin-top: 0.35rem;
	font-size: 0.8rem;
	color: var(--color-muted);
}

.features-grid {
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
}

.team-grid {
	grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
}

.team-card {
	text-align: left;
}

.team-avatar {
	width: 100%;
	height: 150px;
	border-radius: var(--radius-md);
	background: rgba(226, 232, 255, 0.9);
	border: 1px solid rgba(148, 163, 235, 0.8);
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 700;
	font-size: 1.1rem;
	color: #1f2937;
	margin-bottom: 1.1rem;
	overflow: hidden;
}

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

.team-name {
	font-size: 1.02rem;
	font-weight: 600;
	margin-bottom: 0.2rem;
}

.team-role {
	font-size: 0.85rem;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	color: var(--color-muted);
	margin-bottom: 0.45rem;
}

.team-bio {
	font-size: 0.9rem;
	color: var(--color-muted);
}

.testimonials-grid {
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.two-column {
    display: grid;
    grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
    gap: 2.5rem;
    align-items: flex-start;
}

.card {
	background: #ffffff;
	border-radius: var(--radius-lg);
	padding: 1.6rem 1.5rem;
	border: 1px solid var(--color-border);
	box-shadow: var(--shadow-soft);
}

/* Products grid: remove white card background so only the grey image tile shows */
.products .card.product-card {
	background: transparent !important;
	border: none !important;
	box-shadow: none !important;
	padding: 0 !important;
	border-radius: 0 !important;
}

/* Home page services: remove white background box behind circular videos */
.home .service-card {
	background: transparent;
	border: none;
	box-shadow: none;
}

.card,
.portfolio-item,
.testimonial-card,
.logo-pill {
	transition: transform var(--transition-fast), box-shadow var(--transition-fast), border-color var(--transition-fast), background var(--transition-fast);
}

.card:hover,
.portfolio-item:hover,
.testimonial-card:hover,
.logo-pill:hover {
	transform: translateY(-4px) scale(1.01);
	box-shadow: 0 16px 35px rgba(15, 23, 42, 0.18);
	border-color: rgba(0, 102, 255, 0.45);
}

.service-card h3,
.feature-card h3,
.portfolio-item h3 {
    font-size: 1.1rem;
    margin-bottom: 0.5rem;
}

.service-card p,
.feature-card p,
.portfolio-item p {
    font-size: 0.92rem;
    color: var(--color-muted);
}

/* Home services: use white text on dark teal background */
.home .service-card h3 {
	color: #ffffff !important;
}

.home .service-card p {
	color: #ffffff !important;
}

.home .service-card .service-link {
	color: #ffffff !important;
}

.home .service-card .service-link:hover {
	color: #e0f2fe !important;
}

.service-card {
	text-align: center;
}

.feature-card {
	text-align: center;
}

.feature-icon {
	font-size: 1.6rem;
	margin-bottom: 0.7rem;
}

.service-image {
	width: 150px;
	height: 150px;
	overflow: hidden;
	margin: 0 auto 1rem auto;
}

.service-image img,
.service-image video {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	/* Hexagon mask similar to user reference */
	clip-path: polygon(25% 5%, 75% 5%, 100% 50%, 75% 95%, 25% 95%, 0 50%);
}

.service-link {
	display: inline-block;
	margin-top: 0.9rem;
	font-size: 0.88rem;
	color: var(--color-primary);
}

.service-link:hover {
	color: #66e4ff;
}

.site-header {
	position: sticky;
	top: 0;
	z-index: 50;
	background: rgba(255, 255, 255, 0.5); /* 50% transparent white */
	border-bottom: 1px solid var(--color-border);
}

/* Make header container span full width so logo hugs the left and nav hugs the right */
.site-header .container {
	width: 100%;
	margin-inline: 0;
	padding-inline: 1.5rem;
}

.nav-container {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding: 1.2rem 0;
}

.logo {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    text-decoration: none;
}

.logo-box {
	width: 80px;
	height: 80px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: transparent;
	border: none;
	box-shadow: none;
}

.logo-box img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.logo-wordmark {
	font-family: 'Poppins', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	font-size: 1.15rem;
}

.navbar {
    position: relative;
    margin-left: auto;
}

.nav-links {
    list-style: none;
    display: flex;
    align-items: center;
    gap: 0.8rem;
}

.nav-links li a {
	font-size: 0.85rem;
	padding: 0.4rem 0.75rem;
	border-radius: 999px;
	color: #000000;
	font-weight: 600;
	font-family: 'Poppins', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	letter-spacing: 0.06em;
	border: 1px solid transparent;
	transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast), transform 0.2s ease;
	transform: scale(1);
}

.nav-links li:hover a {
    color: var(--color-text);
    background: transparent;
    transform: scale(1.12);
}

.nav-links li.active a {
    color: var(--color-text);
    border-color: transparent;
    background: transparent;
}

.nav-links li.cta a {
    background: linear-gradient(120deg, #00c4ff, #3ae8ff);
    color: #02040a;
    padding-inline: 1rem;
    font-weight: 600;
}

.nav-links li.cta a:hover {
    filter: brightness(1.05);
    transform: scale(1.08);
}

.nav-toggle {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
    width: 34px;
    height: 34px;
    border-radius: 999px;
    background: rgba(7, 10, 24, 0.9);
    border: 1px solid rgba(255, 255, 255, 0.12);
    cursor: pointer;
    padding: 0;
}

.nav-toggle span {
    height: 2px;
    width: 60%;
    margin-inline: auto;
    background: #e4e7ff;
    border-radius: 999px;
    transition: transform 0.2s ease, opacity 0.2s ease;
}

.hero-one-stop {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
}

.hero-one-stop::before {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(to bottom, rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0.35));
	z-index: 0;
}

.hero-inner {
    display: grid;
    grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr);
    gap: 2.8rem;
    	align-items: center;
}

.hero-one-stop-inner {
	position: relative;
	z-index: 1;
	text-align: center;
	max-width: 780px;
	margin: 0 auto;
}

.hero-one-stop-title {
	font-size: clamp(2.2rem, 3vw + 1.4rem, 2.9rem);
	letter-spacing: 0.16em;
	text-transform: uppercase;
	margin-bottom: 0.6rem;
	font-weight: 800;
	color: #ffffff;
	text-shadow:
		0 1px 0 rgba(0, 0, 0, 0.4),
		0 2px 0 rgba(0, 0, 0, 0.45),
		0 3px 0 rgba(0, 0, 0, 0.5),
		0 6px 12px rgba(0, 0, 0, 0.65);
	-webkit-text-stroke: 1.2px rgba(0, 0, 0, 0.5);
}

.hero-one-stop-subtitle {
	max-width: 640px;
	margin: 0 auto;
	color: #000000;
	font-weight: 600;
	margin-bottom: 1.8rem;
}

.hero-one-stop-stats {
	display: flex;
	justify-content: center;
	gap: 3rem;
	flex-wrap: wrap;
}

.hero-one-stop-stat {
	text-align: center;
}

.hero-one-stop-number {
	display: block;
	font-size: 1.4rem;
	font-weight: 700;
}

.hero-one-stop-label {
	display: block;
	margin-top: 0.2rem;
	font-size: 0.9rem;
	color: var(--color-muted);
}

/* Lapcare-style hero banner for home page */
.hero-main-lapcare {
	position: relative;
	min-height: calc(80vh - var(--header-height));
	background: linear-gradient(135deg, #1e3a5f 0%, #2d5a87 50%, #4a90c2 100%);
	overflow: hidden;
	display: flex;
	align-items: center;
	z-index: 1;
}

.hero-lapcare-bg {
	position: absolute;
	inset: 0;
	background:
		radial-gradient(circle at 20% 80%, rgba(255, 183, 77, 0.3) 0%, transparent 50%),
		radial-gradient(circle at 80% 20%, rgba(100, 181, 246, 0.3) 0%, transparent 50%);
	opacity: 0.8;
	z-index: 0;
}

.hero-lapcare-inner {
	position: relative;
	z-index: 2;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 3rem;
	align-items: center;
	padding: 3rem 0;
}

.hero-lapcare-content {
	max-width: 600px;
}

.hero-lapcare-tagline {
	font-size: 0.85rem;
	letter-spacing: 0.25em;
	text-transform: uppercase;
	color: #22d3ee;
	margin-bottom: 1rem;
	font-weight: 700;
}

.hero-lapcare-title {
	font-size: clamp(2.8rem, 5vw, 4.2rem);
	line-height: 1.15;
	font-weight: 800;
	margin-bottom: 1.5rem;
	color: #ffffff;
}

.hero-lapcare-title .gradient-text {
	background: linear-gradient(120deg, #a855f7 0%, #ec4899 50%, #f43f5e 100%);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

.hero-lapcare-title .highlight-text {
	color: #fbbf24;
	text-shadow: 0 2px 15px rgba(251, 191, 36, 0.5);
}

.hero-lapcare-subtitle {
	font-size: 1.15rem;
	color: rgba(255, 255, 255, 0.9);
	margin-bottom: 2rem;
	line-height: 1.6;
}

.hero-lapcare-features {
	display: flex;
	gap: 0.8rem;
	flex-wrap: wrap;
	margin-bottom: 2.5rem;
}

.lapcare-pill {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	padding: 0.5rem 1rem;
	background: rgba(255, 255, 255, 0.15);
	border: 1px solid rgba(255, 255, 255, 0.3);
	border-radius: 25px;
	font-size: 0.85rem;
	color: #ffffff;
	backdrop-filter: blur(8px);
	transition: all 0.3s ease;
}

.lapcare-pill:hover {
	background: rgba(255, 255, 255, 0.25);
	transform: translateY(-2px);
}

.hero-lapcare-cta {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	padding: 1rem 2rem;
	background: linear-gradient(135deg, #ff9800 0%, #f57c00 100%);
	color: #ffffff;
	font-weight: 600;
	font-size: 1rem;
	border-radius: 30px;
	text-decoration: none;
	box-shadow: 0 10px 30px rgba(255, 152, 0, 0.4);
	transition: all 0.3s ease;
}

.hero-lapcare-cta:hover {
	transform: translateY(-3px);
	box-shadow: 0 15px 40px rgba(255, 152, 0, 0.5);
}

.hero-lapcare-visual {
	display: flex;
	justify-content: center;
	align-items: center;
}

.hero-product-showcase {
	position: relative;
	width: 100%;
	max-width: 450px;
}

.hero-products-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 1rem;
	padding: 1rem;
}

.hero-product-card {
	background: transparent;
	border: none;
	border-radius: 0;
	padding: 0;
	backdrop-filter: none;
	box-shadow: none;
	animation: float-card 4s ease-in-out infinite;
	transition: transform 0.3s ease;
	clip-path: polygon(25% 5%, 75% 5%, 100% 50%, 75% 95%, 25% 95%, 0 50%);
	overflow: hidden;
}

.hero-product-card:hover {
	transform: scale(1.08);
}

.hero-product-card:nth-child(2) {
	animation-delay: 0.5s;
}

.hero-product-card:nth-child(3) {
	animation-delay: 1s;
}

.hero-product-card:nth-child(4) {
	animation-delay: 1.5s;
}

.hero-product-card img {
	width: 100%;
	height: 140px;
	object-fit: cover;
	filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.3));
	display: block;
}

@keyframes float-card {
	0%, 100% {
		transform: translateY(0px);
	}
	50% {
		transform: translateY(-18px);
	}
}

/* Remove old styles */
.hero-products-placeholder,
.product-icon {
	display: none;
}

/* Responsive for Lapcare hero */
@media (max-width: 900px) {
	.hero-lapcare-inner {
		grid-template-columns: 1fr;
		text-align: center;
	}

	.hero-lapcare-content {
		max-width: 100%;
	}

	.hero-lapcare-features {
		justify-content: center;
	}

	.hero-lapcare-visual {
		margin-top: 2rem;
		width: 100%;
		display: flex;
		justify-content: center;
	}

	.hero-product-showcase {
		max-width: 320px;
	}

	.hero-products-grid {
		gap: 0.5rem;
		padding: 0.5rem;
	}

	.hero-product-card img {
		height: 100px;
	}

	.hero-main-lapcare {
		min-height: calc(70vh - var(--header-height));
	}
}

@media (max-width: 480px) {
	.hero-lapcare-title {
		font-size: clamp(2rem, 8vw, 2.8rem);
	}

	.hero-product-showcase {
		max-width: 280px;
	}

	.hero-product-card img {
		height: 80px;
	}
}

.hero-service-slider {
	padding-top: 2rem;
	margin-top: 0;
	position: relative;
	z-index: 2;
}

.service-slider {
	position: relative;
	border-radius: 28px;
	padding: 0;
	background-image: none;
	box-shadow: 0 26px 60px rgba(15, 23, 42, 0.45);
	max-width: 980px;
	margin: 0 auto 3rem auto;
	overflow: hidden;
	transition: transform 0.4s ease, box-shadow 0.4s ease, background-image 0.5s ease;
}

.service-slider::before,
.service-slider::after {
	display: none;
}

.service-slider::before {
	top: 18px;
	bottom: -16px;
}

.service-slider::after {
	top: -16px;
	bottom: 18px;
	opacity: 0.35;
}

.service-slider-inner {
	background: transparent;
	border-radius: 32px;
	padding: 3.4rem 2.1rem;
	min-height: 220px;
	text-align: center;
	color: #ffffff;
	transition: opacity 0.35s ease, transform 0.35s ease, background-image 0.4s ease;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	position: relative;
	overflow: hidden;
	opacity: 1;
	/* Give the slider card a more unique, pill-like hexagon shape instead of a simple rectangle */
	clip-path: polygon(12% 0, 88% 0, 100% 24%, 100% 76%, 88% 100%, 12% 100%, 0 76%, 0 24%);
}

.service-slider-inner::before {
	content: '';
	position: absolute;
	inset: 0;
	border-radius: inherit;
	clip-path: inherit;
	/* Dark overlay to dim logo/background so text stays readable */
	background: linear-gradient(to bottom, rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0.4));
	z-index: 0;
}

.service-slider-inner > * {
	position: relative;
	z-index: 1;
}

.service-slider-icon {
	display: none;
}

.service-slider-logo {
	display: none !important;
}

.service-slider-title {
	font-size: 1.3rem;
	font-weight: 700;
	margin-bottom: 0.4rem;
}

.service-slider-text {
	font-size: 0.96rem;
	color: rgba(241, 245, 255, 0.9);
}


.service-slider.is-changing .service-slider-inner {
	transform: scale(1.02);
}

.service-slider:hover {
	transform: translateY(-6px);
	box-shadow: 0 32px 90px rgba(15, 23, 42, 0.65);
}

.service-slider.is-printing {
	background-image: linear-gradient(120deg, #6848ff, #00e5ff, #00c853);
}

.service-slider.is-merchandising {
	background-image: linear-gradient(120deg, #4b6cff, #ff4fd8, #ffb347);
}

.service-slider.is-gifting {
	background-image: linear-gradient(120deg, #ff4fd8, #ff6f61, #ff9800);
}

.service-slider.is-retail {
	background-image: linear-gradient(120deg, #4b6cff, #7b1eff, #ffb347);
}

.hero-content h1 {
    font-size: clamp(2.1rem, 3vw + 1.3rem, 2.8rem);
    line-height: 1.15;
    margin-bottom: 0.4rem;
    margin-bottom: 1rem;
}

.hero-content p {
    color: var(--color-muted);
    max-width: 520px;
    margin-bottom: 1.6rem;
}

.hero-actions {
    display: flex;
    gap: 0.9rem;
    flex-wrap: wrap;
}

.hero-highlight {
    display: grid;
    gap: 1rem;
}

.stat-card {
    padding: 1.1rem 1.2rem;
    border-radius: var(--radius-lg);
    background: #ffffff;
    border: 1px solid var(--color-border);
    box-shadow: var(--shadow-soft);
}

.stat-number {
    display: block;
    font-size: 1.25rem;
    font-weight: 700;
}

.stat-label {
    font-size: 0.9rem;
    color: var(--color-muted);
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-pill);
    padding: 0.6rem 1.2rem;
    font-size: 0.9rem;
    font-weight: 600;
    border: 1px solid transparent;
    cursor: pointer;
    transition: transform var(--transition-fast), box-shadow var(--transition-fast), background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
}

.btn-primary {
    background: linear-gradient(120deg, #ff4fd8, #9b5bff);
    color: #ffffff;
    box-shadow: 0 14px 35px rgba(155, 91, 255, 0.45);
}

.btn-primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 18px 45px rgba(155, 91, 255, 0.6);
}

.btn-outline {
	background: transparent;
	color: #ffffff;
	border-color: rgba(255, 255, 255, 0.7);
}

.btn-outline:hover {
	background: rgba(255, 255, 255, 0.08);
	color: #ffffff;
}

.link-arrow {
    font-size: 0.88rem;
    color: var(--color-primary);
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
}

.link-arrow::after {
    content: '→';
    font-size: 0.95rem;
}

.clients-strip {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 2rem;
}

.clients-logos {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
}

.clients-logos.large {
    justify-content: flex-start;
}

.logo-pill {
    padding: 0.4rem 0.9rem;
    border-radius: var(--radius-pill);
    border: 1px solid rgba(0, 0, 0, 0.08);
    font-size: 0.8rem;
    color: var(--color-muted);
}

.client-logo {
	min-width: 200px;
	padding: 1.5rem 2rem;
	border-radius: 12px;
	border: 1px solid rgba(255, 255, 255, 0.5);
	background: linear-gradient(135deg, #faf9f6 0%, #f5f5f0 50%, #f0efe9 100%);
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
	margin: 1rem;
}

.client-logo img {
	display: block;
	max-height: 100px;
	max-width: 160px;
	width: auto;
	object-fit: contain;
	filter: none;
	transition: transform 0.25s ease;
}

/* Make Deepalaya logo larger to show complete name */
.client-logo img[alt*="Deepalaya"],
.client-logo img[alt*="deepalaya"] {
	max-height: 120px;
	max-width: 180px;
}
.client-logo:hover img {
	transform: scale(1.08);
}

.brands-section {
	padding-top: 5.5rem;
	padding-bottom: 5rem;
}

/* Refine layout for Brands We Work With grid */
.brands-section .clients-strip {
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 2.2rem;
}

.brands-section .clients-logos {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: 2.5rem 3rem;
	justify-items: center;
	width: 100%;
	padding: 2rem 0;
}

@media (max-width: 900px) {
	.brands-section .clients-logos {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (max-width: 640px) {
	.brands-section .clients-logos {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

.portfolio-item {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
}

.portfolio-thumb {
    border-radius: var(--radius-md);
    overflow: hidden;
    aspect-ratio: 4 / 3;
}

.portfolio-thumb.placeholder {
    background: linear-gradient(135deg, rgba(0, 102, 255, 0.32), rgba(54, 72, 145, 0.9));
}

/* Full portfolio card layout */
.portfolio-full-grid {
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.portfolio-logo {
	width: 220px;
	height: 220px;
	border-radius: 28px;
	border: 1px dashed rgba(148, 163, 235, 0.7);
	background: rgba(226, 232, 255, 0.5);
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 auto 0.7rem auto;
}

.portfolio-logo img {
    max-width: 90%;
    max-height: 80%;
    object-fit: contain;
}

.portfolio-card {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 260px;
}

.portfolio-card-header {
    margin-bottom: 1.1rem;
}

.portfolio-tag {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.25rem 0.7rem;
    border-radius: 999px;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.13em;
    color: #e5f7ff;
    background: rgba(0, 102, 255, 0.14);
    border: 1px solid rgba(0, 102, 255, 0.5);
    margin-bottom: 0.5rem;
}

.portfolio-card-header h3 {
    font-size: 1.05rem;
    margin-bottom: 0.35rem;
}

.portfolio-card-header p {
    font-size: 0.9rem;
    color: var(--color-muted);
}

.portfolio-card-meta {
    display: grid;
    gap: 0.25rem;
    margin: 0.6rem 0 0.9rem;
    font-size: 0.82rem;
}

.portfolio-meta-row {
    display: flex;
    justify-content: space-between;
    gap: 0.6rem;
}

.portfolio-meta-label {
    color: #333;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 0.72rem;
}

.portfolio-meta-value {
    color: #ffffff;
    font-weight: 500;
}

.portfolio-card-footer {
    display: flex;
    justify-content: flex-start;
    margin-top: auto;
}

.portfolio-card-cta {
    font-size: 0.82rem;
    padding-inline: 1.1rem;
    display: none;
}

.portfolio-filter-bar {
    display: flex;
    flex-wrap: wrap;
}

.portfolio-filter-button {
padding: 0.3rem 0.9rem;
border-radius: var(--radius-pill);
border: 1px solid rgba(0, 0, 0, 0.08);
background: #ffffff;
color: var(--color-muted);
font-size: 0.78rem;
cursor: pointer;
}

.portfolio-filter-button.active {
color: #02040a;
background: linear-gradient(120deg, #0066ff, #48eaff);
border-color: rgba(0, 102, 255, 0.9);
}

.page-hero {
	padding: 3.5rem 0 2.2rem;
	background: transparent;
	border-bottom: 1px solid var(--color-border);
}

.page-hero-dark {
	background: transparent;
	border-bottom: none;
	color: #ffffff;
	padding: 6.2rem 0 4.4rem;
}

.page-hero h1 {
	font-size: 2.8rem;
	margin-bottom: 0.8rem;
}

.page-hero-title {
	font-size: 2.2rem;
	font-weight: 800;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.gradient-heading {
	background: linear-gradient(120deg, #00b4ff, #7b1eff, #ff4fd8);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

/* Ensure hero headings on dark gradient background stay highly readable */
.page-hero-dark .gradient-heading {
	background: none;
	-webkit-background-clip: border-box;
	background-clip: border-box;
	color: #ffffff;
	text-shadow: 0 3px 6px rgba(0, 0, 0, 0.8);
}

.page-hero p {
	color: var(--color-muted);
	max-width: 560px;
}

/* On dark hero sections, force bright subtitle color overriding generic .page-hero p */
.page-hero-dark .page-hero-subtitle {
	color: #ffffff;
	text-shadow: 0 3px 6px rgba(0, 0, 0, 0.85);
}

.page-hero-subtitle {
	font-size: 1.12rem;
	margin-top: 0.5rem;
	font-weight: 500;
}

.page-hero-subtitle-light {
	color: #ffffff;
	text-shadow: 0 3px 6px rgba(0, 0, 0, 0.85);
}

/* About page gifting hero banner styling */
.about-hero-gifting {
	position: relative;
	min-height: calc(75vh - var(--header-height));
	background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
	overflow: hidden;
	padding: 4rem 0;
}

.about-hero-gifting::before {
	content: '';
	position: absolute;
	inset: 0;
	background:
		url('../images/gifts-hero.png') no-repeat right center / contain,
		radial-gradient(circle at 30% 50%, rgba(255, 107, 107, 0.15) 0%, transparent 50%),
		radial-gradient(circle at 70% 80%, rgba(78, 205, 196, 0.1) 0%, transparent 40%);
	pointer-events: none;
}

.about-hero-gifting::after {
	content: '';
	position: absolute;
	inset: 0;
	background:
		linear-gradient(90deg, rgba(26, 26, 46, 0.95) 0%, rgba(26, 26, 46, 0.7) 50%, rgba(26, 26, 46, 0.4) 100%);
	pointer-events: none;
}

.about-hero-gifting .container {
	position: relative;
	z-index: 2;
	text-align: left;
}

.hero-gifting-content {
	max-width: 650px;
	padding: 2rem 0;
}

.hero-tagline {
	font-size: 0.9rem;
	letter-spacing: 0.25em;
	text-transform: uppercase;
	color: #ff6b6b;
	margin-bottom: 1rem;
	font-weight: 600;
}

.about-hero-gifting .hero-title {
	font-size: clamp(2.5rem, 5vw, 3.8rem);
	line-height: 1.1;
	font-weight: 700;
	color: #ffffff;
	margin-bottom: 2rem;
	text-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
	background: linear-gradient(120deg, #ffffff 0%, #ffd93d 50%, #ff6b6b 100%);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

.hero-features {
	display: flex;
	gap: 1rem;
	flex-wrap: wrap;
}

.feature-pill {
	display: inline-block;
	padding: 0.6rem 1.2rem;
	background: rgba(255, 255, 255, 0.1);
	border: 1px solid rgba(255, 255, 255, 0.3);
	border-radius: 30px;
	font-size: 0.85rem;
	color: #ffffff;
	backdrop-filter: blur(10px);
	transition: all 0.3s ease;
}

.feature-pill:hover {
	background: rgba(255, 255, 255, 0.2);
	border-color: rgba(255, 255, 255, 0.5);
	transform: translateY(-2px);
}

/* Page-specific hero background images */
/* Full-page background images per section (body level) */
body.home {
	background-image: url('../images/background/home.jpg');
	background-size: cover;
	background-position: center top;
	background-repeat: no-repeat;
	background-attachment: scroll;
}

/* On the home page, let the background image show behind all sections */
.home main {
	background: transparent;
}

.home .section,
.home .section-light,
.home .brands-section,
.home .cta-section {
	background: transparent;
}

body.about {
	background-image: url('../images/background/about.jpg');
	background-size: cover;
	background-position: center top;
	background-repeat: no-repeat;
	background-attachment: scroll;
}

body.services {
	background-image: url('../images/background/services.jpg');
	background-size: cover;
	background-position: center top;
	background-repeat: no-repeat;
	background-attachment: scroll;
}

body.products {
	background-image: url('../images/background/product.jpg');
	background-size: cover;
	background-position: center top;
	background-repeat: no-repeat;
	background-attachment: scroll;
}

body.contact {
	background-image: url('../images/background/contact.jpg');
	background-size: cover;
	background-position: center top;
	background-repeat: no-repeat;
	background-attachment: scroll;
}

/* Slightly dim background images on main pages for better text contrast */
body.home::before,
body.about::before,
body.services::before,
body.products::before,
body.contact::before {
	content: '';
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, 0.2);
	pointer-events: none;
}

/* Soft shining overlay on all main page backgrounds */
body.home::after,
body.about::after,
body.services::after,
body.products::after,
body.contact::after {
	content: '';
	position: fixed;
	inset: 0;
	pointer-events: none;
	background:
		radial-gradient(circle at 0% 0%, rgba(255, 255, 255, 0.56), transparent 55%),
		radial-gradient(circle at 100% 100%, rgba(255, 255, 255, 0.44), transparent 55%),
		radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.24), transparent 55%);
	mix-blend-mode: screen;
	opacity: 0.8;
	background-size: 260% 260%;
	animation: page-background-shimmer 12s ease-in-out infinite;
}

/* Make About page background a bit darker than others */
body.about::before {
	background: rgba(0, 0, 0, 0.45);
}

/* Make Contact page background darker for better readability */
body.contact::before {
	background: rgba(0, 0, 0, 0.55);
}

/* Make general text white on image backgrounds so it's clearly visible */
body.home h1,
body.home h2,
body.home h3,
body.home h4,
body.home p,
body.home li,
body.about h1,
body.about h2,
body.about h3,
body.about h4,
body.about p,
body.about li,
body.services h1,
body.services h2,
body.services h3,
body.services h4,
body.services p,
body.services li,
body.products h1,
body.products h2,
body.products h3,
body.products h4,
body.products p,
body.products li,
body.contact h1,
body.contact h2,
body.contact h3,
body.contact h4,
body.contact p,
body.contact li {
	color: #ffffff;
}

/* Also force common section titles / intros to white on these pages */
body.home .section-title,
body.home .section-intro,
body.about .section-title,
body.about .section-intro,
body.services .section-title,
body.services .section-intro,
body.products .section-title,
body.products .section-intro,
body.contact .section-title,
body.contact .section-intro {
	color: #ffffff;
}

/* On Products page, use dark text on the lighter teal background */
body.products .page-hero h1,
body.products .page-hero p,
body.products .section-title,
body.products .section-intro {
	color: #000000;
}

/* But keep text inside white cards dark for readability */
body.home .card h1,
body.home .card h2,
body.home .card h3,
body.home .card h4,
body.home .card p,
body.home .card li,
body.about .card h1,
body.about .card h2,
body.about .card h3,
body.about .card h4,
body.about .card p,
body.about .card li,
body.services .card h1,
body.services .card h2,
body.services .card h3,
body.services .card h4,
body.services .card p,
body.services .card li,
body.products .card h1,
body.products .card h2,
body.products .card h3,
body.products .card h4,
body.products .card p,
body.products .card li,
body.contact .card h1,
body.contact .card h2,
body.contact .card h3,
body.contact .card h4,
body.contact .card p,
body.contact .card li {
	color: var(--color-text);
}

/* Make hero blocks tall enough to reveal the background clearly */
.home .hero-one-stop {
	min-height: calc(70vh - var(--header-height));
	display: flex;
	align-items: flex-start;
	padding-top: 1.8rem;
}

.about .page-hero,
.services .page-hero,
.products .page-hero,
.contact .page-hero {
	min-height: calc(65vh - var(--header-height));
	display: flex;
	align-items: flex-start;
	padding-top: 2rem;
}

/* On About page, make hero slightly shorter so next section starts higher */
.about .page-hero {
	min-height: calc(70vh - var(--header-height));
}

/* On Products page, use a shorter hero so the next section starts closer */
.products .page-hero {
	min-height: auto;
	padding: 2.5rem 0 1.2rem;
}

/* On Services page, reduce hero height so first section sits much closer */
.services .page-hero {
	min-height: auto;
	padding: 2.5rem 0 1.5rem;
}

/* Reduce top padding on the first content section after the hero on About page */
.about .section:first-of-type {
	padding-top: 0;
}

/* Reduce section padding overall on About page for compact layout */
.about .section {
	padding: 2.5rem 0;
}

/* Also reduce top padding on Services, Products, Contact first sections */
.services .section:first-of-type,
.products .section:first-of-type,
.contact .section:first-of-type {
	padding-top: 0.5rem;
}

/* Center section titles and intros on these pages */
.about .section-title,
.about .section-intro,
.services .section-title,
.services .section-intro,
.products .section-title,
.products .section-intro,
.contact .section-title,
.contact .section-intro {
	text-align: center;
	margin-left: auto;
	margin-right: auto;
}

.about-hero .container,
.services-hero .container,
.products .page-hero .container,
.contact .page-hero .container {
	text-align: center;
}

.about-hero .page-hero-subtitle,
.services-hero .page-hero-subtitle,
.products .page-hero p,
.contact .page-hero p {
	margin-left: auto;
	margin-right: auto;
}

.about-hero .container {
text-align: center;
}

.about-hero p {
margin-left: auto;
margin-right: auto;
}

/* About page specific styling */
.about-section {
	max-width: 900px;
	margin: 0 auto;
	text-align: center;
}

.subsection-title {
	font-size: 1.6rem;
	font-weight: 600;
	color: #ffffff;
	margin: 1.5rem 0 1rem 0;
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

.about-content p {
	font-size: 1.15rem;
	line-height: 1.7;
	margin-bottom: 1.2rem;
	color: #ffffff;
}

.services-list,
.values-list,
.benefits-list {
	list-style: none;
	padding: 0;
	margin: 1.5rem 0;
	text-align: left;
	max-width: 700px;
	margin-left: auto;
	margin-right: auto;
}

.services-list li,
.values-list li,
.benefits-list li {
	font-size: 1.1rem;
	line-height: 1.6;
	margin-bottom: 0.8rem;
	padding-left: 1.8rem;
	position: relative;
	color: #ffffff;
}

.services-list li::before,
.values-list li::before,
.benefits-list li::before {
	content: '▸';
	position: absolute;
	left: 0;
	color: #00d4ff;
	font-weight: bold;
	font-size: 1.2rem;
}

.highlight-text {
	font-size: 1.3rem;
	font-weight: 600;
	color: #00d4ff;
	margin-top: 2rem;
	font-style: italic;
}

.values-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 2rem;
	margin-top: 2rem;
	max-width: 1000px;
	margin-left: auto;
	margin-right: auto;
}

.value-item {
	background: rgba(255, 255, 255, 0.05);
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: 12px;
	padding: 2rem 1.5rem;
	text-align: center;
	transition: transform 0.3s ease, background 0.3s ease;
}

.value-item:hover {
	transform: translateY(-5px);
	background: rgba(255, 255, 255, 0.08);
}

.value-title {
	font-size: 1.3rem;
	font-weight: 600;
	color: #00d4ff;
	margin-bottom: 0.8rem;
}

.value-desc {
	font-size: 1rem;
	color: #ffffff;
	line-height: 1.5;
}

.about-stats {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
gap: 1rem;
}

.about-stat {
padding: 1.1rem 1rem;
border-radius: var(--radius-lg);
background: rgba(255, 255, 255, 0.02);
border: 1px solid var(--color-border);
}

.about-stat-number {
display: block;
font-size: 1.3rem;
font-weight: 700;
}

.about-stat-label {
display: block;
margin-top: 0.2rem;
font-size: 0.85rem;
color: var(--color-muted);
}

.service-section {
display: flex;
flex-direction: column;
gap: 1.8rem;
}

.service-section h2 {
margin-bottom: 0.2rem;
}

.service-section-media {
display: flex;
justify-content: center;
margin-bottom: 1.4rem;
}

.service-section-media video,
.service-section-media img {
	width: 180px;
	height: 180px;
	border-radius: 50%;
	object-fit: cover;
	display: block;
	box-shadow: var(--shadow-soft);
	border: 1px solid var(--color-border);
}

.checklist {
list-style: none;
margin-top: 0.8rem;
}

.checklist li {
position: relative;
padding-left: 1.3rem;
font-size: 0.92rem;
color: var(--color-muted);
margin-bottom: 0.35rem;
}

.checklist li::before {
content: '✔';
position: absolute;
left: 0;
top: 0;
font-size: 0.8rem;
color: var(--color-primary);
}

.testimonial-card p {
font-size: 0.9rem;
}

.testimonial-name {
margin-top: 0.9rem;
font-weight: 600;
}

.testimonial-role {
font-size: 0.85rem;
color: var(--color-muted);
}

.contact-layout {
display: grid;
grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.9fr);
gap: 2.5rem;
}

.contact-form {
display: flex;
flex-direction: column;
gap: 1rem;
}

.form-message {
font-size: 0.86rem;
margin-bottom: 0.8rem;
padding: 0.5rem 0.75rem;
border-radius: 8px;
}

.form-message.success {
background: rgba(0, 200, 83, 0.16);
color: #a5ffcf;
border: 1px solid rgba(0, 200, 83, 0.5);
}

.form-message.error {
background: rgba(244, 67, 54, 0.16);
color: #ffb3b3;
border: 1px solid rgba(244, 67, 54, 0.5);
}

.form-row {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 1rem;
}

.form-field {
display: flex;
flex-direction: column;
gap: 0.2rem;
}

.form-field label {
	font-size: 0.8rem;
	text-transform: uppercase;
	letter-spacing: 0.09em;
	color: var(--color-muted);
}

body.contact .form-field label {
	color: rgba(255, 255, 255, 0.9);
}

body.contact .form-message {
	color: #ffffff;
}

.form-field input,
.form-field select,
.form-field textarea {
background: #ffffff;
border-radius: 12px;
border: 1px solid rgba(0, 0, 0, 0.14);
padding: 0.55rem 0.75rem;
color: var(--color-text);
font-size: 0.9rem;
outline: none;
}

.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
border-color: rgba(0, 102, 255, 0.9);
box-shadow: 0 0 0 1px rgba(0, 102, 255, 0.5);
}

.map-placeholder {
margin-top: 1rem;
border-radius: var(--radius-lg);
overflow: hidden;
border: 1px solid var(--color-border);
background: #ffffff;
}

.map-placeholder iframe {
width: 100%;
height: 260px;
border: 0;
    border: 0;
}

.cta-section {
	background: transparent;
	border-top: 1px solid var(--color-border);
}

.cta-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.8rem;
}

.cta-inner h2 {
    font-size: 1.4rem;
    margin-bottom: 0.4rem;
}

.cta-inner p {
    color: var(--color-muted);
}

.cta-actions {
    display: flex;
    gap: 0.8rem;
    flex-wrap: wrap;
}

.site-footer {
	padding-top: 3rem;
	position: relative;
	overflow: hidden;
	background: linear-gradient(135deg, #c48a00, #ffe066, #fff6cf, #c48a00);
	background-size: 320% 320%;
	animation: footer-gold-shimmer 8s ease-in-out infinite;
	border-top: 1px solid rgba(0, 0, 0, 0.4);
	margin-top: 3rem;
	color: #ffffff;
}

.site-footer::before {
	content: '';
	position: absolute;
	inset: 0;
	background:
		radial-gradient(circle at 0% 0%, rgba(255, 255, 255, 0.65), transparent 55%),
		radial-gradient(circle at 100% 100%, rgba(255, 255, 255, 0.55), transparent 55%);
	mix-blend-mode: screen;
	opacity: 0.7;
	pointer-events: none;
	animation: footer-gold-highlight 7s ease-in-out infinite;
}

/* Footer text styling on gold background */
.footer-logo-box img,
.footer-logo-wordmark,
.footer-brand,
.footer-brand h3,
.footer-brand p,
.footer-brand a,
.footer-contact h3,
.footer-contact p,
.footer-contact a {
	color: #000000 !important;
	text-shadow: none;
}

/* Ensure all footer text is dark and readable on gold */
.site-footer,
.site-footer p,
.site-footer li,
.site-footer a,
.footer-bottom,
.footer-bottom p,
.footer-bottom a {
	color: #000000 !important;
}

.footer-main {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 3rem;
    padding-bottom: 2.2rem;
    width: 100%;
    padding-left: 4rem;
    padding-right: 4rem;
}

.footer-brand {
    flex: 0 0 auto;
    max-width: 400px;
}

.footer-contact {
    flex: 0 0 auto;
    max-width: 400px;
    text-align: right;
}

/* Make logo more visible */
.footer-logo-box {
	width: 150px;
	height: 150px;
	margin-bottom: 1rem;
	border-radius: 8px;
	overflow: hidden;
	background: transparent;
	padding: 0;
}

.footer-logo-box img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter: brightness(1.2) contrast(1.1);
}

.footer-logo-initials {
    font-weight: 700;
    font-size: 1.1rem;
    letter-spacing: 0.08em;
}

.footer-brand h3 {
	font-family: 'Poppins', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	font-size: 1.08rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	margin-bottom: 0.1rem;
	color: #000000;
}

.footer-tagline {
    font-size: 0.86rem;
	color: #1f2933;
    margin-bottom: 0.9rem;
}

.footer-description {
    font-size: 0.86rem;
	color: #1f2933;
    max-width: 360px;
    margin-bottom: 1.2rem;
}

.footer-icon-buttons {
    display: flex;
    gap: 0.75rem;
}

.footer-icon {
    width: 34px;
    height: 34px;
    border-radius: 999px;
    border: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.45);
	color: #ffffff;
}

.footer-icon-svg {
	width: 18px;
	height: 18px;
	fill: #ffffff;
}

.footer-icon-phone {
    background: #00c853;
}

.footer-icon-whatsapp {
    background: #2962ff;
}

.footer-icon-email {
    background: #d50000;
}

.footer-contact {
min-width: 260px;
margin-top: 0.4rem;
}

.footer-contact-title {
font-size: 1.05rem;
margin-bottom: 0.9rem;
background: linear-gradient(120deg, #00c4ff, #ff6f61);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}

.footer-contact-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.footer-contact-item {
    font-size: 0.86rem;
	color: #111827;
}

.footer-contact-label {
	display: block;
	font-size: 0.78rem;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	margin-bottom: 0.15rem;
	color: #000000;
	font-weight: 700;
}

@keyframes footer-gold-shimmer {
	0% {
		background-position: 0% 50%;
	}
	50% {
		background-position: 100% 50%;
	}
	100% {
		background-position: 0% 50%;
	}
}

@keyframes footer-silver-shimmer {
	0% {
		background-position: 0% 50%;
	}
	50% {
		background-position: 100% 50%;
	}
	100% {
		background-position: 0% 50%;
	}
}

/* Slow global background shimmer for all main pages */
@keyframes page-background-shimmer {
	0% {
		background-position: 0% 50%;
	}
	50% {
		background-position: 100% 50%;
	}
	100% {
		background-position: 0% 50%;
	}
}

.footer-contact-value {
	display: block;
	color: #111827;
	white-space: nowrap;
}

.footer-contact-value.highlight {
    color: #00e676;
    font-weight: 600;
}

.footer-contact-value.highlight:hover {
    color: #69f0ae;
}

.footer-contact-value a {
	color: #2563eb;
	text-decoration: underline;
}

.footer-contact-value a:hover {
	color: #7dd3fc;
}

.footer-bottom {
	padding: 0.7rem 0 1rem;
	border-top: 1px solid rgba(0, 0, 0, 0.45);
	font-size: 0.8rem;
	color: #000000;
	background: linear-gradient(135deg, #b67900, #ffd54a, #fff1b2, #b67900);
	background-size: 260% 260%;
	animation: footer-gold-shimmer 10s ease-in-out infinite;
	position: relative;
	overflow: hidden;
}

.footer-bottom::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 4px;
	background: linear-gradient(135deg, #c48a00, #ffe066, #fff6cf, #c48a00);
	background-size: 320% 320%;
	box-shadow: 0 0 12px rgba(255, 221, 130, 0.9);
	animation: footer-gold-shimmer 8s ease-in-out infinite;
}

.footer-bottom-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

.footer-links {
    display: flex;
    gap: 1.2rem;
}

.footer-links a {
	color: #111827;
}

.footer-links a:hover {
	color: #38bdf8;
}

@media (max-width: 900px) {
    .hero-inner {
        grid-template-columns: minmax(0, 1fr);
    }

    .hero-highlight {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .two-column,
    .contact-layout {
        grid-template-columns: minmax(0, 1fr);
    }

    .cta-inner {
        flex-direction: column;
        align-items: flex-start;
    }

    /* Stack footer columns and align them to the left on tablets and down */
    .footer-main {
        flex-direction: column;
        align-items: flex-start;
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }

    .footer-contact {
        text-align: left;
        width: 100%;
    }
}

@media (max-width: 720px) {
    .nav-toggle {
        display: flex;
    }

    .nav-links {
        position: absolute;
        right: 0;
        top: 110%;
        flex-direction: column;
        align-items: flex-start;
        background: rgba(7, 10, 24, 0.98);
        padding: 0.7rem;
        border-radius: 16px;
        border: 1px solid rgba(255, 255, 255, 0.14);
        min-width: 210px;
        opacity: 0;
        pointer-events: none;
        transform: translateY(-6px);
        transition: opacity 0.15s ease, transform 0.15s ease;
    }

    .nav-links li a {
        display: block;
        width: 100%;
        color: #f5f7ff;
    }

    .nav-links li:hover a,
    .nav-links li.active a {
        background: rgba(255, 255, 255, 0.08);
        color: #ffffff;
    }

    .nav-links.open {
        opacity: 1;
        pointer-events: auto;
        transform: translateY(0);
    }

    .nav-links li.cta {
        width: 100%;
    }

    .nav-links li.cta a {
        justify-content: center;
        width: 100%;
    }

    .hero {
        padding-top: 3.4rem;
    }

    .section-header-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
    }

    .portfolio-filter-bar {
        justify-content: flex-start;
    }

    .clients-strip {
        flex-direction: column;
        align-items: flex-start;
    }

    /* Ensure footer content is stacked and left-aligned on small screens */
    .footer-main {
        flex-direction: column;
        align-items: flex-start;
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }

    .footer-contact {
        text-align: left;
        width: 100%;
    }

    .form-row {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 480px) {
    .container {
        width: min(100% - 2.4rem, 480px);
    }

    .hero-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .btn {
        width: 100%;
        justify-content: center;
    }

    .portfolio-full-grid {
        gap: 1.2rem;
    }

    .portfolio-card {
        padding: 1.3rem 1.1rem;
    }
}