/* 
   Project custom styles
   Use this file for styles not covered by Tailwind or existing CSS.
   Loaded after framework and component styles to allow safe overrides.
*/

/* Example utility overrides (keep minimal and specific) */
/* .example-class {
    color: #333;
} */

/* Slow down the diagonal yellow line animation */
.diagonal-bg-item::after {
	transition: transform 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
}

/* Center preloader on mobile and desktop */
.loading-area .loading-pic {
	left: 50% !important;
	top: 50% !important;
	transform: translate(-50%, -50%);
	width: auto !important;
}

/* Keep testimonial cards equal height inside sliders and preview grids */
.reviewtwo-slider .swiper-wrapper {
	display: flex !important;
	align-items: stretch !important;
}

.reviewtwo-slider .swiper-slide {
	display: flex !important;
	align-items: stretch !important;
	height: auto !important;
}

.reviewtwo-slider .swiper-slide[style*="height"] {
	height: auto !important;
}

.reviewtwo-slider .swiper-slide > div {
	width: 100%;
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
}

.reviewtwo-slider .swiper-slide > div .flex-1 {
	flex: 1 1 auto;
}

/* Keep the diagonal bar a fixed width (remove scaleX effect) */
.diagonal-bg-item::after {
	transform: translateX(var(--diagonal-x, 0px)) skewX(-20deg) !important;
}

/* Prevent clipping of the diagonal bar within the services carousel */
.swiper.services-carousel {
	overflow: visible !important;
}

/* Ensure the diagonal bar does not block clicks and stays behind the image */
.diagonal-bg-item {
	pointer-events: none !important; /* disable events for wrapper and children */
}
.diagonal-bg-item::after {
	pointer-events: none !important;
	z-index: -1 !important;
}

/* Make sure arrows stay on top */
.swiper-button-next,
.swiper-button-prev,
.services-carousel-next,
.services-carousel-prev {
	z-index: 1000 !important;
	position: relative;
	pointer-events: auto !important;
}

/* Ensure What We Do chevrons are always above the cards */
.whatwedo-prev,
.whatwedo-next {
	z-index: 1000 !important;
	position: relative;
	pointer-events: auto !important;
}

/* Clamp About carousel overflow without affecting slide effects */
.about-section-one-wrap {
	overflow: hidden !important;
	max-width: 100%;
	width: 100%;
	box-sizing: border-box;
}

/* Fix mobile expandable hero sections: ensure closed sections reset properly and don't overlap, keep compact */
/* Applies to:
   - Divisions mobile hero (mobile only)
   - What We Do mobile hero (mobile only)
   - All expandable hero layouts on mobile (Contracting, Home Solutions, Projects, Eco Solutions pages)
   NOTE: These rules are MOBILE ONLY (max-width: 575px) and will NOT affect desktop functionality */
@media (max-width: 575px) {
	/* Override base p-5 padding to make items compact */
	.divisions-mobile-hero .twm-acd-st-1 .acd-bx .section,
	.what-we-do-mobile-hero .twm-acd-st-1 .acd-bx .section,
	.twm-acd-st-1 .acd-bx .section {
		padding-top: 0.5rem !important;
		padding-bottom: 0.5rem !important;
		padding-left: 0.75rem !important;
		padding-right: 0.75rem !important;
	}
	
	/* Increase padding when all items are closed */
	.divisions-mobile-hero .twm-acd-st-1 .acd-bx:not(.enabled) .section,
	.what-we-do-mobile-hero .twm-acd-st-1 .acd-bx:not(.enabled) .section,
	.twm-acd-st-1 .acd-bx:not(.enabled) .section {
		padding-top: 1rem !important; /* Increased from 0.75rem */
		padding-bottom: 1rem !important; /* Increased from 0.75rem */
	}
	
	/* Fix overlap issue: ensure closed sections reset properly - NO TRANSITIONS */
	.divisions-mobile-hero .twm-acd-st-1 .acd-bx:not(.enabled) .section,
	.what-we-do-mobile-hero .twm-acd-st-1 .acd-bx:not(.enabled) .section,
	.twm-acd-st-1 .acd-bx:not(.enabled) .section {
		position: relative !important;
		transform: none !important;
		top: auto !important;
		left: auto !important;
		right: auto !important;
		bottom: auto !important;
		z-index: 1 !important;
		width: 100% !important;
		height: auto !important;
		min-height: auto !important;
		max-height: none !important;
		overflow: visible !important;
		margin: 0 !important;
		/* Disable ALL transitions when closing to prevent expansion */
		transition: none !important;
		transition-property: none !important;
		transition-duration: 0s !important;
		transition-delay: 0s !important;
	}
	
	/* Reset heading positioning when closed */
	.divisions-mobile-hero .twm-acd-st-1 .acd-bx:not(.enabled) .section h2.heading,
	.what-we-do-mobile-hero .twm-acd-st-1 .acd-bx:not(.enabled) .section h2.heading,
	.twm-acd-st-1 .acd-bx:not(.enabled) .section h2.heading {
		position: relative !important;
		transform: none !important;
		top: auto !important;
		left: auto !important;
		right: auto !important;
		bottom: auto !important;
		rotate: none !important;
		width: 100% !important;
		height: auto !important;
		white-space: normal !important;
		margin: 0 !important;
		padding: 0 !important;
	}
	
	/* Keep closed items' text size consistent when another item is open - override Tailwind text-2sm */
	.divisions-mobile-hero .twm-acd-st-1 .acd-bx.enabled .section:not(.open) h2.heading,
	.what-we-do-mobile-hero .twm-acd-st-1 .acd-bx.enabled .section:not(.open) h2.heading,
	.twm-acd-st-1 .acd-bx.enabled .section:not(.open) h2.heading {
		position: relative !important;
		transform: none !important;
		top: auto !important;
		left: auto !important;
		right: auto !important;
		bottom: auto !important;
		rotate: none !important;
		width: 100% !important;
		height: auto !important;
		white-space: normal !important;
		margin: 0 !important;
		padding: 0 !important;
		/* Override Tailwind text-2sm (15px) - use reasonable consistent size */
		font-size: 1rem !important; /* 16px - reasonable size, larger than text-2sm (15px) */
		line-height: 1.3 !important;
		text-align: left !important;
		font-weight: normal !important;
	}
	
	/* Also ensure normal closed state has consistent font size - slightly larger when all closed */
	.divisions-mobile-hero .twm-acd-st-1 .acd-bx:not(.enabled) .section h2.heading,
	.what-we-do-mobile-hero .twm-acd-st-1 .acd-bx:not(.enabled) .section h2.heading,
	.twm-acd-st-1 .acd-bx:not(.enabled) .section h2.heading {
		font-size: 1.125rem !important; /* 18px - slightly larger when all closed */
		line-height: 1.3 !important;
		font-weight: normal !important;
	}
	
	/* Hide content when closed - use max-height and opacity for smooth transitions */
	.divisions-mobile-hero .twm-acd-st-1 .acd-bx:not(.enabled) .section .inside-content,
	.what-we-do-mobile-hero .twm-acd-st-1 .acd-bx:not(.enabled) .section .inside-content,
	.twm-acd-st-1 .acd-bx:not(.enabled) .section .inside-content {
		position: relative !important;
		top: auto !important;
		left: auto !important;
		right: auto !important;
		bottom: auto !important;
		width: 100% !important;
		max-height: 0 !important;
		opacity: 0 !important;
		visibility: hidden !important;
		overflow: hidden !important;
	}
	
	/* Show content when section is open */
	.divisions-mobile-hero .twm-acd-st-1 .acd-bx .section.open .inside-content,
	.what-we-do-mobile-hero .twm-acd-st-1 .acd-bx .section.open .inside-content,
	.twm-acd-st-1 .acd-bx .section.open .inside-content {
		max-height: 2000px !important;
		opacity: 1 !important;
		visibility: visible !important;
	}
	
	/* Ensure sections stack properly when closed - MOBILE ONLY */
	.divisions-mobile-hero .twm-acd-st-1 .acd-bx:not(.enabled),
	.what-we-do-mobile-hero .twm-acd-st-1 .acd-bx:not(.enabled),
	.twm-acd-st-1 .acd-bx:not(.enabled) {
		display: flex !important;
		flex-direction: column !important;
		height: auto !important;
		min-height: auto !important;
	}
	
	.divisions-mobile-hero .twm-acd-st-1 .acd-bx:not(.enabled) .section,
	.what-we-do-mobile-hero .twm-acd-st-1 .acd-bx:not(.enabled) .section,
	.twm-acd-st-1 .acd-bx:not(.enabled) .section {
		display: block !important;
		flex: none !important;
		order: 0 !important;
	}
	
	/* Fix first item hiding above - ensure proper stacking - MOBILE ONLY */
	.divisions-mobile-hero .twm-acd-st-1 .acd-bx:not(.enabled) .section:first-child,
	.what-we-do-mobile-hero .twm-acd-st-1 .acd-bx:not(.enabled) .section:first-child,
	.twm-acd-st-1 .acd-bx:not(.enabled) .section:first-child {
		position: relative !important;
		z-index: 1 !important;
		margin-top: 0 !important;
		top: 0 !important;
		transform: translateY(0) !important;
	}
	
	/* Ensure all closed sections are visible and properly positioned - MOBILE ONLY */
	.divisions-mobile-hero .twm-acd-st-1 .acd-bx:not(.enabled) .section:not(:first-child),
	.what-we-do-mobile-hero .twm-acd-st-1 .acd-bx:not(.enabled) .section:not(:first-child),
	.twm-acd-st-1 .acd-bx:not(.enabled) .section:not(:first-child) {
		position: relative !important;
		z-index: 1 !important;
		margin-top: 0 !important;
		transform: translateY(0) !important;
	}
	
	/* Ensure sections maintain proper stacking during transitions - MOBILE ONLY */
	.divisions-mobile-hero .twm-acd-st-1 .acd-bx .section:not(.open),
	.what-we-do-mobile-hero .twm-acd-st-1 .acd-bx .section:not(.open),
	.twm-acd-st-1 .acd-bx .section:not(.open) {
		position: relative !important;
		z-index: 1 !important;
		width: 100% !important;
		height: auto !important;
	}
	
	/* Keep closed sections the same size when another item is open */
	.divisions-mobile-hero .twm-acd-st-1 .acd-bx.enabled .section:not(.open),
	.what-we-do-mobile-hero .twm-acd-st-1 .acd-bx.enabled .section:not(.open),
	.twm-acd-st-1 .acd-bx.enabled .section:not(.open) {
		width: 100% !important;
		height: auto !important;
		padding-top: 0.75rem !important;
		padding-bottom: 0.75rem !important;
		padding-left: 0.75rem !important;
		padding-right: 0.75rem !important;
		flex: none !important;
	}
	
	/* Override base style that sets closed sections to 4% width when enabled */
	.divisions-mobile-hero .twm-acd-st-1 .acd-bx.enabled article.section:not(.open),
	.what-we-do-mobile-hero .twm-acd-st-1 .acd-bx.enabled article.section:not(.open),
	.twm-acd-st-1 .acd-bx.enabled article.section:not(.open) {
		width: 100% !important;
		flex: none !important;
	}
	
	.divisions-mobile-hero .twm-acd-st-1 .acd-bx .section.open,
	.what-we-do-mobile-hero .twm-acd-st-1 .acd-bx .section.open,
	.twm-acd-st-1 .acd-bx .section.open {
		position: relative !important;
		z-index: 2 !important;
		max-height: none !important;
	}
	
	/* Smooth container transitions - but disable when closing to prevent expansion - MOBILE ONLY */
	.divisions-mobile-hero .twm-acd-st-1 .acd-bx,
	.what-we-do-mobile-hero .twm-acd-st-1 .acd-bx,
	.twm-acd-st-1 .acd-bx {
		transition: height 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94),
		            min-height 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
	}
	
	/* When closing, disable ALL container transitions immediately to prevent expansion - MOBILE ONLY */
	.divisions-mobile-hero .twm-acd-st-1 .acd-bx:not(.enabled),
	.what-we-do-mobile-hero .twm-acd-st-1 .acd-bx:not(.enabled),
	.twm-acd-st-1 .acd-bx:not(.enabled) {
		transition: none !important;
		transition-property: none !important;
		transition-duration: 0s !important;
		transition-delay: 0s !important;
		height: auto !important;
		min-height: auto !important;
	}
	
	/* Smooth section expansion/contraction - only animate padding when OPENING - MOBILE ONLY */
	.divisions-mobile-hero .twm-acd-st-1 .acd-bx.enabled .section,
	.what-we-do-mobile-hero .twm-acd-st-1 .acd-bx.enabled .section,
	.twm-acd-st-1 .acd-bx.enabled .section {
		max-height: none !important;
		height: auto !important;
		transition: padding-top 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94),
		            padding-bottom 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
		will-change: padding-top, padding-bottom;
		backface-visibility: hidden;
		-webkit-backface-visibility: hidden;
		transform: translateZ(0);
		-webkit-transform: translateZ(0);
	}
	
	/* Override base duration-500 from Tailwind - disable ALL transitions when closing - MOBILE ONLY */
	.divisions-mobile-hero .twm-acd-st-1 .acd-bx:not(.enabled) *,
	.what-we-do-mobile-hero .twm-acd-st-1 .acd-bx:not(.enabled) *,
	.twm-acd-st-1 .acd-bx:not(.enabled) * {
		transition: none !important;
		transition-property: none !important;
		transition-duration: 0s !important;
		transition-delay: 0s !important;
		transition-timing-function: none !important;
	}
	
	/* Smooth heading transitions - MOBILE ONLY */
	.divisions-mobile-hero .twm-acd-st-1 .acd-bx .section h2.heading,
	.what-we-do-mobile-hero .twm-acd-st-1 .acd-bx .section h2.heading,
	.twm-acd-st-1 .acd-bx .section h2.heading {
		transition: opacity 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94),
		            color 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94),
		            transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
		will-change: opacity, color;
		backface-visibility: hidden;
		-webkit-backface-visibility: hidden;
		transform: translateZ(0);
		-webkit-transform: translateZ(0);
	}
	
	/* Smooth content show/hide transitions - only when opening - MOBILE ONLY */
	.divisions-mobile-hero .twm-acd-st-1 .acd-bx.enabled .section .inside-content,
	.what-we-do-mobile-hero .twm-acd-st-1 .acd-bx.enabled .section .inside-content,
	.twm-acd-st-1 .acd-bx.enabled .section .inside-content {
		transition: max-height 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94),
		            opacity 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94),
		            visibility 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
		will-change: max-height, opacity;
		backface-visibility: hidden;
		-webkit-backface-visibility: hidden;
		transform: translateZ(0);
		-webkit-transform: translateZ(0);
	}
	
	/* When closing, content should collapse immediately - no transition - MOBILE ONLY */
	.divisions-mobile-hero .twm-acd-st-1 .acd-bx:not(.enabled) .section .inside-content,
	.what-we-do-mobile-hero .twm-acd-st-1 .acd-bx:not(.enabled) .section .inside-content,
	.twm-acd-st-1 .acd-bx:not(.enabled) .section .inside-content {
		transition: none !important;
		transition-property: none !important;
		transition-duration: 0s !important;
		max-height: 0 !important;
		opacity: 0 !important;
		visibility: hidden !important;
	}
}

/* Prevent horizontal overflow on mobile */
html, body {
	max-width: 100% !important;
	width: 100% !important;
	overflow-x: hidden !important;
}

/* Hide yellow zoom/lens icons across galleries */
.plusicon {
	display: none !important;
}

/* Ensure buttons-controls doesn't cause overflow on mobile */
@media (max-width: 1023px) {
	.buttons-controls {
		display: none !important;
		visibility: hidden !important;
		width: 0 !important;
		left: 0 !important;
	}
}

/* Ensure What We Do section borders are visible on desktop */
@media (min-width: 1024px) {
	#what-we-do .container {
		overflow: visible !important;
	}
	
	#what-we-do .grid {
		overflow: visible !important;
	}
	
	#what-we-do .grid > div {
		overflow: visible !important;
	}
	
	/* Ensure borders are fully visible */
	#what-we-do [class*="border"] {
		box-sizing: border-box;
	}
}

/* Place swiper below custom nav buttons in stacking order */
.about-section-one-wrap .swiper.services-carousel {
	position: relative;
	z-index: 0;
}

/* Raise the arrow wrapper containers above any slide layers */
.about-section-one-wrap > .container > .absolute {
	z-index: 1001 !important;
}


/* Navigation tooltips (framework-agnostic) */
.nav-tooltip-trigger { position: relative; cursor: not-allowed; }
.nav-tooltip {
	position: absolute;
	top: 100%;
	left: 50%;
	transform: translateX(-50%) translateY(-2px);
	margin-top: 8px;
	background: rgba(0,0,0,.9);
	color: #fff;
	font-size: 10px;
	font-weight: 600;
	line-height: 1;
	padding: 6px 8px;
	border-radius: 4px;
	white-space: nowrap;
	z-index: 100000;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity .2s ease, transform .2s ease, visibility .2s ease;
}
/* Desktop/tablet hover */
@media (min-width: 768px) {
	.nav-tooltip-trigger:hover .nav-tooltip,
	.nav-tooltip-trigger:focus .nav-tooltip {
		opacity: 1;
		visibility: visible;
		transform: translateX(-50%) translateY(0);
	}
}
/* Mobile singleton tooltip appended to body */
.nav-tooltip-mobile {
	position: fixed;
	left: 50%;
	top: 0;
	transform: translateX(-50%) translateY(-2px);
	margin-top: 8px;
	background: rgba(0,0,0,.9);
	color: #fff;
	font-size: 10px;
	font-weight: 600;
	line-height: 1;
	padding: 6px 8px;
	border-radius: 4px;
	white-space: nowrap;
	z-index: 100000;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity .2s ease, transform .2s ease, visibility .2s ease;
}
.nav-tooltip-mobile.is-visible {
	opacity: 1;
	visibility: visible;
	transform: translateX(-50%) translateY(0);
}

/* Subtle separation between header and page content */
.site-header .main-bar {
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}


/* Team gallery nav alignment (override theme placing at bottom corners) */
.site-filters .team-gallery-button-prev,
.site-filters .team-gallery-button-next {
	position: absolute !important;
	top: 50% !important;
	bottom: auto !important;
	transform: translateY(-50%) !important;
	z-index: 1002 !important;
	pointer-events: auto !important;
}
.site-filters .team-gallery-button-prev { left: 0 !important; right: auto !important; }
.site-filters .team-gallery-button-next { right: 0 !important; left: auto !important; }

/* Ensure LightGallery overlays sit above sticky header */
.lg-container,
.lg-backdrop,
.lg-outer {
	z-index: 1000005 !important; /* header uses 1000000 */
}

/* Freeze page scroll when lightbox is open (LightGallery adds lg-on to <html>/<body>) */
html.lg-on,
body.lg-on {
	overflow: hidden !important;
	touch-action: none;
}

/* Force darkest backdrop across all LG states (prevents fade to lighter tone) */
.lg-backdrop,
.lg-backdrop.in,
.lg-show .lg-backdrop,
.lg-container .lg-backdrop,
html.lg-on .lg-backdrop {
	opacity: 0.8 !important;
}

/* (LightGallery layout is left at its default; we only tweak z-index/backdrop above) */

/* Custom project viewer overlay: ensure it sits above everything */
#project-viewer {
	z-index: 10000020 !important;
	background: rgba(0, 0, 0, 0.87); /* less dark overlay */
	overflow: hidden; /* keep the page intact; internal areas scroll if needed */
	-webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
}

/* Project viewer container - margin left only on desktop */
#project-viewer .pv-container {
	margin-left: 0;
	height: 100dvh; /* stable height even with mobile browser bars */
	max-height: 100dvh;
	display: flex;
	flex-direction: column;
}

/* Main viewer area takes remaining space above thumbs/categories */
#project-viewer .pv-main {
	flex: 1 1 auto;
	min-height: 0; /* critical for stable flex sizing */
	overflow: hidden;
	padding-top: 10px; /* top spacing */
}

/* On mobile, allow main area (image + info) to scroll vertically if needed */
@media (max-width: 1023px) {
	#project-viewer .pv-main {
		overflow-y: auto;
		overscroll-behavior: contain;
	}
}

@media (min-width: 1024px) {
	#project-viewer .pv-container {
		margin-left: 40px !important;
	}
}

/* Thumbnails strip: pinned + scrollable horizontally only */
#project-viewer .pv-thumbs-container {
	height: 90px;
}

#project-viewer .pv-thumbs {
	height: 100% !important;
	overflow-x: auto !important;
	overflow-y: hidden !important;
	overscroll-behavior: contain;
	scroll-behavior: smooth;
}

/* Categories pinned at bottom with slight spacing below text */
#project-viewer .pv-cats-container {
	min-height: 60px;
	padding-bottom: 10px;
}

/* Video dialog: ensure it sits above header and has proper backdrop */
#videoDialog {
	z-index: 1000001 !important;
	background: rgba(0, 0, 0, 0.8) !important;
}

#videoDialog .dialog-content {
	z-index: 1000002 !important;
	position: relative;
	overflow: visible !important;
	padding: 1rem;
}

#videoDialog .close {
	z-index: 1000003 !important;
	position: absolute !important;
	top: -0.5rem !important;
	right: -0.5rem !important;
	left: auto !important;
}

/* Ensure video container allows controls to be visible */
#videoContainer {
	overflow: visible !important;
	width: 100%;
	height: auto;
	min-height: 0;
}

#videoContainer iframe,
#videoContainer video {
	max-width: 100%;
	max-height: 90vh;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
	object-fit: contain;
	display: block;
}

/* Constrain main project image and thumbnails to consistent sizes */
#project-viewer .pv-image {
	max-height: 100%;
	max-width: 100%;
	width: auto;
	height: auto;
	object-fit: contain;
	pointer-events: none; /* prevent image from blocking navigation controls */
}

/* Ensure videos and iframes display with controls visible - no cropping */
#project-viewer .pv-video,
#project-viewer .pv-embed {
	max-width: 100%;
	max-height: calc(100% - 2rem); /* Account for padding */
	width: auto;
	height: auto;
	object-fit: contain;
	display: block;
}

/* Respect Tailwind hidden class within the project viewer */
#project-viewer .pv-image.hidden,
#project-viewer .pv-video.hidden,
#project-viewer .pv-embed.hidden {
	display: none !important;
}

/* Ensure video container allows controls to be visible */
#project-viewer .pv-media {
	overflow: visible !important;
	padding: 1rem;
	box-sizing: border-box;
	width: 100%;
	height: 100%;
	max-height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
}

/* Ensure parent container allows overflow for video controls */
#project-viewer .col-span-12.lg\:col-span-8 > div.bg-black\/60 {
	overflow: visible !important;
}

/* On mobile, ensure videos fit within viewport with padding for controls */
@media (max-width: 1023px) {
	#project-viewer .pv-media {
		padding: 0.75rem;
	}
	
	#project-viewer .pv-video,
	#project-viewer .pv-embed {
		max-width: calc(100% - 1.5rem);
		max-height: calc(100% - 1.5rem);
	}
}

#project-viewer .pv-thumbs button {
	width: 100px;
	height: 80px;
	flex: 0 0 auto;
}

#project-viewer .pv-thumbs img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Selected thumbnail indicator (yellow border) */
#project-viewer .pv-thumb {
	border: 2px solid rgba(255, 255, 255, 0.15);
	border-radius: 0.5rem;
	overflow: hidden;
	transition: border-color 200ms ease, transform 200ms ease;
}

#project-viewer .pv-thumb:hover {
	border-color: rgba(255, 255, 255, 0.35);
}

#project-viewer .pv-thumb.is-active {
	border-color: #f6c200; /* yellow */
}

#project-viewer .pv-thumb.is-active img {
	transform: scale(1.02);
}

/* Desktop-only: show LightGallery image and info panel side by side using flexbox */
@media (min-width: 1400px) {
	/* Make main content area a row: image on the left, components (caption+thumbs) on the right */
	.lg-outer .lg-content {
		display: flex;
		align-items: stretch;
	}

	/* Image area grows to fill remaining space */
	.lg-outer .lg-content .lg-inner {
		flex: 1 1 auto;
		min-width: 0; /* allow shrink instead of overflowing */
	}

	/* Right-hand column for caption + thumbnails */
	.lg-outer .lg-content .lg-components {
		flex: 0 0 360px;
		max-width: 360px;
		background: rgba(18,18,18,0.9);
		display: flex;
		flex-direction: column;
		border-left: 1px solid rgba(255,255,255,0.08);
	}

	/* Caption block at top of the right column */
	.lg-outer .lg-content .lg-components .lg-sub-html {
		padding: 20px 22px;
		overflow-y: auto;
		text-align: left;
		flex: 1 1 auto;
	}

	.lg-outer .lg-content .lg-components .lg-cap-title {
		font-weight: 700;
		margin-bottom: 8px;
		font-size: 20px;
	}
	.lg-outer .lg-content .lg-components .lg-cap-sub {
		opacity: .9;
		font-size: 12px;
		letter-spacing: .06em;
		text-transform: uppercase;
		margin-bottom: 10px;
		display: block;
	}
	.lg-outer .lg-content .lg-components .lg-info-desc {
		font-size: 14px;
		line-height: 1.6;
		opacity: .95;
	}
	.lg-outer .lg-content .lg-components .lg-info-features {
		list-style: none;
		padding: 0;
		margin: 10px 0 0;
		display: flex;
		flex-wrap: wrap;
		gap: 6px 12px;
		font-size: 12px;
	}

	/* Thumbnails strip pinned to bottom of right column */
	.lg-outer .lg-content .lg-components .lg-thumb-outer {
		margin-top: auto;
		padding: 10px 16px 14px;
		background: transparent;
	}
}

/* Custom Project Viewer - Image zoom support */
#project-viewer .col-span-12.lg\:col-span-8 {
	overflow: hidden;
	position: relative;
}

#project-viewer .pv-image {
	transition: transform 0.3s ease;
	cursor: zoom-in;
}

#project-viewer .pv-image:hover {
	cursor: zoom-in;
}

#project-viewer .pv-image[style*="scale(2)"] {
	cursor: grab;
}

#project-viewer .pv-image[style*="scale(2)"]:active {
	cursor: grabbing;
}

/* Custom Project Viewer - Category bar styling */
#project-viewer .pv-cats {
	gap: 2rem !important; /* Increased spacing between items */
	margin-bottom: 10px;
}

#project-viewer .pv-cats li {
	font-size: 1rem !important; /* 16px base */
	margin-left: 0.5rem !important;
	margin-right: 0.5rem !important;
	padding: 0.25rem 0.5rem !important;
}

@media (min-width: 1024px) {
	#project-viewer .pv-cats li {
		font-size: 1.125rem !important; /* 18px on desktop */
		margin-left: 1rem !important;
		margin-right: 1rem !important;
	}
}

/* Add separators between category items if needed (optional) */
#project-viewer .pv-cats li:not(:last-child)::after {
	content: "-";
	margin-left: 1rem;
	opacity: 0.5;
}

/* Keep thumbnails container space even when empty */
#project-viewer .pv-thumbs {
	min-height: 0 !important;
	display: flex !important; /* Always display as flex to maintain layout */
}


#project-viewer .pv-image {
	transition: transform 0.3s ease, opacity 0.3s ease, visibility 0.3s ease;
	cursor: zoom-in;
}

/* Fade animation when switching images */
#project-viewer .pv-image.is-fading {
	opacity: 0;
}

/* Top bar above image - matches image width via grid */
#project-viewer .pv-topbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 1rem 1.5rem;
	background: rgba(0, 0, 0, 0.6);
	backdrop-filter: blur(4px);
	color: white;
	text-transform: uppercase;
	letter-spacing: 0.18em;
	font-size: 0.75rem;
	border-radius: 0.5rem 0.5rem 0 0; /* Rounded top corners */
	margin-bottom: 0 !important; /* No gap below */
}

/* Image container - connects to top bar with no gap */
#project-viewer .col-span-12.lg\:col-span-8 > div.bg-black\/60,
#project-viewer .col-span-12.lg\:col-span-8 > div:has(.pv-image) {
	border-radius: 0 0 0.5rem 0.5rem !important; /* Rounded bottom corners */
	margin-top: 0 !important; /* No gap above */
}

/* Ensure flex column has no gap */
#project-viewer .col-span-12.lg\:col-span-8.flex-col {
	gap: 0 !important;
}

/* Add top spacing to photo viewer main grid area */
#project-viewer .pv-container > .flex-1.grid {
	padding-top: 10px !important;
}

#project-viewer .pv-topbar .pv-close {
	font-weight: 700;
	font-size: 1rem;
	line-height: 1.5rem;
	color: white;
	background: transparent;
	border: none;
	cursor: pointer;
	padding: 0.25rem 0.5rem;
	transition: opacity 0.2s ease;
}

#project-viewer .pv-topbar .pv-close:hover {
	opacity: 0.8;
}

#project-viewer .pv-topbar .pv-counter {
	font-weight: 600;
	font-size: 1rem;
	line-height: 1.5rem;
}

#project-viewer .pv-topbar .pv-actions {
	display: flex;
	align-items: center;
	gap: 1rem;
	opacity: 0.8;
}

#project-viewer .pv-topbar .pv-actions button {
	background: transparent;
	border: none;
	color: white;
	cursor: pointer;
	padding: 0.5rem;
	transition: opacity 0.2s ease;
	display: flex;
	align-items: center;
	justify-content: center;
}

#project-viewer .pv-topbar .pv-actions button:hover {
	opacity: 1;
}

/* Make icons way bigger */
#project-viewer .pv-topbar .pv-actions i {
	font-size: 2rem !important;
	line-height: 1;
	width: 2rem;
	height: 2rem;
	display: flex;
	align-items: center;
	justify-content: center;
}

@media (min-width: 1024px) {
	#project-viewer .pv-topbar {
		font-size: 0.875rem;
		padding: 1.25rem 2rem;
	}
	
	#project-viewer .pv-topbar .pv-close {
		font-size: 1.125rem;
	}
	
	#project-viewer .pv-topbar .pv-counter {
		font-size: 1.125rem;
	}
	
	#project-viewer .pv-topbar .pv-actions i {
		font-size: 2.5rem !important;
		width: 2.5rem;
		height: 2.5rem;
	}
}

/* Project viewer info panel - logo and title */
#project-viewer .nextep-logo-icon {
	max-width: 150px;
	height: auto;
	display: block;
	margin-bottom: 1rem;
}

#project-viewer .pv-title {
	color: white !important;
}

/* Fullscreen mode - hide sidebars and make image fullscreen */
#project-viewer:fullscreen .pv-container,
#project-viewer.fullscreen-mode .pv-container {
	max-width: 100% !important;
	width: 100vw !important;
	margin: 0 !important; /* must beat desktop margin-left:40px !important */
	padding: 0 !important;
	left: 0;
	right: 0;
}

#project-viewer:fullscreen .pv-info-panel,
#project-viewer.fullscreen-mode .pv-info-panel {
	display: none !important;
}

#project-viewer:fullscreen .pv-thumbs-container,
#project-viewer.fullscreen-mode .pv-thumbs-container {
	display: none !important;
}

#project-viewer:fullscreen .pv-cats-container,
#project-viewer.fullscreen-mode .pv-cats-container {
	display: none !important;
}

#project-viewer:fullscreen .col-span-12.lg\:col-span-8,
#project-viewer.fullscreen-mode .col-span-12.lg\:col-span-8 {
	grid-column: span 12 !important;
	width: 100%;
}

#project-viewer:fullscreen .flex-1.grid,
#project-viewer.fullscreen-mode .flex-1.grid {
	padding: 1rem !important;
	gap: 0 !important;
}

/* Keep controls clickable even when the image is zoomed (image can overlap in DOM order) */
#project-viewer .col-span-12.lg\:col-span-8 > div.bg-black\/60 {
	position: relative;
	isolation: isolate; /* creates a clean stacking context so nav stays above zoomed image */
}

/* Keep viewer height consistent so chevrons don't jump */
#project-viewer .col-span-12.lg\:col-span-8 > div.bg-black\/60 {
	height: clamp(320px, 60vh, 620px);
}

#project-viewer .pv-image {
	position: relative;
	z-index: 1 !important;
}

#project-viewer .pv-prev,
#project-viewer .pv-next {
	position: relative;
	z-index: 9999 !important; /* always above image */
	display: flex;
	align-items: center;
	justify-content: center;
	width: 3.75rem; /* 60px */
	height: 5rem; /* 80px */
	background: rgba(0, 0, 0, 0.7);
	color: #fff;
	border: none;
	border-radius: 0.25rem;
}

/* Ensure the whole nav wrapper stays above the image (parent z-index matters) */
#project-viewer .pv-nav {
	position: absolute;
	z-index: 10000 !important;
	pointer-events: auto;
}

#project-viewer:fullscreen .pv-image,
#project-viewer.fullscreen-mode .pv-image {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

/* Hide close button in fullscreen (Esc/back exits fullscreen) */
#project-viewer:fullscreen .pv-topbar .pv-close,
#project-viewer.fullscreen-mode .pv-topbar .pv-close {
	display: none !important;
}

/* Show a back button only in fullscreen */
#project-viewer .pv-topbar .pv-back {
	display: none;
	font-weight: 700;
	font-size: 1rem;
	line-height: 1.5rem;
	color: white;
	background: transparent;
	border: none;
	cursor: pointer;
	padding: 0.25rem 0.5rem;
	transition: opacity 0.2s ease;
}

#project-viewer .pv-topbar .pv-back:hover {
	opacity: 0.8;
}

#project-viewer:fullscreen .pv-topbar .pv-back,
#project-viewer.fullscreen-mode .pv-topbar .pv-back {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
}

#project-viewer:fullscreen .col-span-12.lg\:col-span-8 > div.bg-black\/60,
#project-viewer.fullscreen-mode .col-span-12.lg\:col-span-8 > div.bg-black\/60 {
	height: calc(100vh - 5rem) !important;
	min-height: calc(100vh - 5rem) !important;
}

/* Fixed height background sections - ensures background image always displays at full height */
/* Used in: about-section, team-detail-section, catalogue-layout background sections */
.fixed-height-bg-section {
	min-height: 800px;
}

/* Catalogue layout: center text/CTA and match body width to thumbnail */
.catalogue-section--centered .catalogue-card {
	align-items: center;
}

.catalogue-section--centered .catalogue-card__body {
	width: 100%;
	max-width: 210px;
	text-align: left;
	align-items: flex-start;
}

.catalogue-section--centered .catalogue-card__title {
	text-align: left;
}

.catalogue-section--centered .catalogue-card__description {
	max-width: 100%;
	text-align: left;
}

.catalogue-section--centered .catalogue-card__cta {
	width: 100%;
	display: flex;
	justify-content: flex-start;
}

@media (max-width: 639px) {
	.catalogue-section--centered .catalogue-card__body {
		max-width: 300px;
	}
}

/* === Porcelanosa page only: black bottom section like provided screenshot === */
.porcelanosa-page .expandable-bottom-section {
	background: #000 !important;
}

.porcelanosa-page .expandable-bottom-section,
.porcelanosa-page .expandable-bottom-section h2,
.porcelanosa-page .expandable-bottom-section p,
.porcelanosa-page .expandable-bottom-section .text-gray,
.porcelanosa-page .expandable-bottom-section .wt-title {
	color: #fff !important;
}

/* Button stays yellow, but button text is black */
.porcelanosa-page .expandable-bottom-section .site-button {
	background: #f6c200 !important;
	border-color: #f6c200 !important;
	color: #000 !important;
}

/* Porcelanosa page only: make Catalogues section black with white text (keep download link yellow) */
.porcelanosa-page section[aria-label="Product Catalogues"] {
	background: #000 !important;
}

.porcelanosa-page section[aria-label="Product Catalogues"] .catalogue-card__title,
.porcelanosa-page section[aria-label="Product Catalogues"] .catalogue-card__description,
.porcelanosa-page section[aria-label="Product Catalogues"] .text-charcoal-gray,
.porcelanosa-page section[aria-label="Product Catalogues"] .text-gray {
	color: #fff !important;
}

.porcelanosa-page section[aria-label="Product Catalogues"] .catalogue-card__link,
.porcelanosa-page section[aria-label="Product Catalogues"] .text-primary {
	color: #f6c200 !important; /* keep Download text yellow */
}

/* Shop page: remove tiny seam between stacked white sections */
.shop-page {
	background: #fff;
}

.shop-page .shop-hero-primary {
	/* Prevent margin-collapsing from showing the page background (the beige/brown seam). */
	display: flow-root;
	padding-bottom: 1px !important;
}

.shop-page .shop-coming-soon-secondary {
	margin-top: -2px;
}

@media (min-width: 1024px) {
	.fixed-height-bg-section {
		min-height: 900px;
	}
}

.fixed-height-content-box {
	min-height: 700px;
	display: flex;
	flex-direction: column;
}

@media (min-width: 1024px) {
	.fixed-height-content-box {
		min-height: 800px;
	}
}

.fixed-height-inner {
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
}

.fixed-height-signature {
	margin-top: auto;
}

/* Fix hero content slider positioning on desktop */
/* On desktop: position absolutely on the right side */
@media (min-width: 769px) {
	.twm-slider1-wrap .twm-slider1-content {
		position: absolute !important;
		right: 0 !important;
		top: 0 !important;
		bottom: 0 !important;
		z-index: 10 !important;
	}
}

/* On screens less than 1400px: ensure left side has fixed 380px width to match content calculation */
@media (min-width: 769px) and (max-width: 1400px) {
	.twm-slider1-wrap .twm-slider1 {
		width: 380px !important;
		max-width: 380px !important;
		min-width: 380px !important;
		flex-shrink: 0 !important;
	}
	
	.twm-slider1-wrap .twm-slider1-content {
		width: calc(100vw - 380px) !important;
		max-width: calc(100vw - 380px) !important;
	}
}

/* Hero slider background image fit option (Edit Hero Slider: Fill image (cover)) */
.twm-slider1-wrap {
	/* Preview pages sometimes force overflow visible; keep hero clipped so other slides never peek. */
	overflow: hidden !important;
}

.twm-slider1-wrap .twm-slider1 {
	overflow: hidden !important;
}

.twm-slider1-wrap .twm-slider1 .twm-slider1-slides,
.twm-slider1-wrap .twm-slider1 .swiper-wrapper,
.twm-slider1-wrap .twm-slider1 .swiper-slide {
	/* Ensure the background slider always has a real box to "cover" */
	height: 100% !important;
}

.twm-slider1-wrap .twm-slider1 .swiper-wrapper {
	overflow: hidden !important;
}

/* Remove any spacing between hero slides - make them appear glued together */
.twm-slider1-wrap .twm-slider1 .swiper-wrapper {
	gap: 0 !important;
	margin: 0 !important;
}

.twm-slider1-wrap .twm-slider1 .swiper-slide {
	overflow: hidden;
	margin: 0 !important;
	padding: 0 !important;
	width: 100% !important;
	margin-right: 0 !important;
	margin-left: 0 !important;
}

/* Ensure images within slides have no spacing */
.twm-slider1-wrap .twm-slider1 .swiper-slide img {
	margin: 0 !important;
	padding: 0 !important;
	display: block;
}

.twm-slider1-wrap .twm-slider1 .twm-slider1-slides .swiper-slide.hero-bg-slide--cover {
	padding-inline: 0 !important;
	align-items: stretch !important;
	position: relative;
	overflow: hidden;
	width: 100% !important;
}

.twm-slider1-wrap .twm-slider1 .twm-slider1-slides .swiper-slide.hero-bg-slide--cover img.hero-bg-image--cover,
.twm-slider1-wrap .twm-slider1 .twm-slider1-slides .swiper-slide.hero-bg-slide--cover img.hero-bg-image--cover {
	position: absolute;
	inset: 0;
	width: 100% !important;
	height: 100% !important;
	object-fit: cover !important;
	display: block;
}

/* On mobile, the theme adds padding-block to `.twm-slider1` which can create top/bottom bars for cover slides.
   Instead of toggling outer padding (which can "pop" during autoplay), we neutralize it per cover slide. */
@media (max-width: 768px) {
	/* About carousel: show chevrons on mobile (handled by media query below) */

	/* About carousel: layout + image height variable */
	.services-carousel {
		position: relative;
		--about-carousel-image-height: 60vh;
	}

	.about-carousel-image-col {
		order: 1;
	}

	.about-carousel-mobile-eyebrow {
		order: 2;
	}

	.about-carousel-text-col {
		order: 3;
	}

	/* About carousel: make image shorter on mobile */
	.about-carousel-image img {
		height: var(--about-carousel-image-height) !important;
		width: 100% !important;
		object-fit: cover !important;
	}

	/* About carousel: pagination dots on mobile */
	.about-carousel-pagination {
		position: absolute !important;
		left: 0 !important;
		right: 0 !important;
		top: calc(var(--about-carousel-image-height) + 0.75rem) !important;
		bottom: auto !important;
		margin: 0 !important;
		padding: 0 !important;
		width: 100% !important;
		height: auto !important;
		display: flex !important;
		justify-content: center !important;
		gap: 0.5rem !important;
		z-index: 5 !important;
	}

	.about-carousel-pagination.swiper-pagination-bullets {
		display: flex !important;
	}

	.about-carousel-pagination .swiper-pagination-bullet {
		width: 8px !important;
		height: 8px !important;
		border-radius: 999px !important;
		background-color: #cfc7bd !important;
		border: 1px solid rgba(0, 0, 0, 0.45) !important;
		opacity: 1 !important;
	}

	.about-carousel-pagination .swiper-pagination-bullet-active {
		background-color: var(--color-primary, #f2b200) !important;
		border-color: rgba(0, 0, 0, 0.6) !important;
	}
}

@media (min-width: 1024px) {
	.about-section-one-wrap .services-carousel {
		position: relative !important;
		padding-bottom: 0 !important; /* Let grid margin handle spacing */
	}

	/* Remove Tailwind margin-bottom from image container */
	.about-section-one-wrap .about-carousel-image-col > div {
		margin-bottom: 0 !important; /* Remove Tailwind mb-7.5 */
	}

	/* Keep desktop spacing consistent without pagination */
	.about-section-one-wrap .about-carousel-grid {
		margin-bottom: 2.5rem !important; /* Override Tailwind my-10 */
		margin-top: 2.5rem !important; /* Keep top margin from Tailwind my-10 */
		padding-bottom: 0 !important;
	}

	/* Ensure slides have proper spacing */
	.about-section-one-wrap .services-carousel .swiper-slide {
		padding-bottom: 0 !important;
	}

	/* Hide pagination dots on desktop */
	.about-section-one-wrap .about-carousel-pagination {
		display: none !important;
	}
}

@media (max-width: 768px) {
	.hero-decorative-house {
		display: none !important;
	}

	.about-section-one-wrap {
		padding-top: 16px !important;
		padding-bottom: 0 !important;
	}

	/* About carousel: center content on mobile */
	.about-carousel-mobile-eyebrow,
	.about-carousel-mobile-eyebrow h2,
	.about-carousel-mobile-eyebrow .heading-reset {
		text-align: center !important;
	}

	.about-carousel-mobile-eyebrow .nextep-logo-icon {
		margin-left: auto !important;
		margin-right: auto !important;
		display: block !important;
	}

	.about-carousel-text-col,
	.about-carousel-text-col .mb-7\.5,
	.about-carousel-text-col .relative.z-1 {
		text-align: center !important;
	}

	.about-carousel-text-col .nextep-logo-icon {
		margin-left: auto !important;
		margin-right: auto !important;
		display: block !important;
	}

	.about-carousel-text-col .site-button {
		display: inline-flex !important;
		align-items: center !important;
		justify-content: center !important;
	}

	/* Video section: center logo + text on mobile */
	.video-section2-outer-wrap .section-head,
	.video-section2-outer-wrap .section-head .heading-reset,
	.video-section2-outer-wrap .section-head h3,
	.video-section2-outer-wrap .section-head p {
		text-align: center !important;
	}

	.video-section2-outer-wrap .video-section-text {
		text-align: center !important;
	}

	.video-section2-outer-wrap .section-head .nextep-logo-icon {
		margin-left: auto !important;
		margin-right: auto !important;
		display: block !important;
	}

	.video-section2-outer-wrap .site-button {
		display: inline-flex !important;
		align-items: center !important;
		justify-content: center !important;
	}
	/* Ensure the hero wrapper has a fixed height on mobile */
	.twm-slider1-wrap {
		position: relative;
		height: 70vh !important;
		min-height: 70vh !important;
		overflow: hidden !important;
	}
	.twm-slider1-wrap .twm-slider1 .twm-slider1-slides .swiper-slide.hero-bg-slide--cover {
		margin-block: 0 !important;
	}

	/* Keep "fill cover" hero slides visible when mobile styles make the slider auto-height. */
	/* Mobile hero height */
	.twm-slider1-wrap .twm-slider1 {
		min-height: 70vh;
		height: 100%;
		width: 100%;
		padding-block: 0 !important;
		margin-block: 0 !important;
		position: relative;
		max-width: 100% !important;
		display: block !important;
		visibility: visible !important;
		opacity: 1 !important;
		z-index: 1;
	}

	.twm-slider1-wrap .twm-slider1 .twm-slider1-slides {
		min-height: 70vh;
		height: 100%;
	}

	.twm-slider1-wrap .twm-slider1 .swiper-wrapper,
	.twm-slider1-wrap .twm-slider1 .swiper-slide {
		width: 100% !important;
		height: 100% !important;
		opacity: 1 !important;
		visibility: visible !important;
	}

	.twm-slider1-wrap .twm-slider1 .swiper-slide {
		position: relative !important;
		background: transparent !important;
	}

	/* Remove slide padding/gaps so images butt up against each other */
	.twm-slider1-wrap .twm-slider1 .twm-slider1-slides .swiper-slide {
		padding-inline: 0 !important;
	}

	.twm-slider1-wrap .twm-slider1 .swiper-wrapper {
		gap: 0 !important;
		margin: 0 !important;
	}

	/* Remove any space between image slider and content stack */
	.twm-slider1-wrap .twm-slider1-content {
		margin-top: 0 !important;
		position: absolute !important;
		inset: 0 !important;
		width: 100% !important;
		height: 100% !important;
		z-index: 3 !important;
		display: flex !important;
		align-items: center !important;
		background: transparent !important;
	}

	.twm-slider1-wrap .twm-slider1-content .swiper-slide {
		background: transparent !important;
	}

	/* Reduce top padding inside hero text block so it sits closer to the image */
	.twm-slider1-wrap .home-hero {
		padding-top: 0 !important;
		margin-top: 0 !important;
		background: transparent !important;
		max-width: 100% !important;
	}

	/* Add a small breathing gap between the image and the hero text */
	.twm-slider1-wrap .hero-eyebrow.hero-eyebrow--hero {
		margin-top: 0.75rem !important;
	}

	/* Tighten space between title and button on mobile */
	.twm-slider1-wrap .hero-title.hero-title--hero {
		margin-bottom: 2rem !important;
	}

	/* Force hero images to fill the slide on mobile to avoid seams */
	.twm-slider1-wrap .twm-slider1 .swiper-slide img {
		position: absolute !important;
		inset: 0 !important;
		width: 100% !important;
		height: 100% !important;
		object-fit: cover !important;
		display: block !important;
	}

	/* Make hero text white for readability on image */
	.twm-slider1-wrap .hero-eyebrow.hero-eyebrow--hero,
	.twm-slider1-wrap .hero-title.hero-title--hero,
	.twm-slider1-wrap .home-hero p {
		color: #ffffff !important;
	}

	/* Remove the dotted background on mobile overlay */
	.twm-slider1-wrap .home-hero::after,
	.twm-slider1-wrap .home-hero::before {
		background: none !important;
	}

	/* Mobile hero pagination dots (override sr-only and place below image) */
	.twm-slider1-wrap .hero-pagination {
		position: absolute !important;
		left: 0 !important;
		right: 0 !important;
		bottom: 0.75rem !important;
		top: auto !important;
		margin: 0 !important;
		padding: 0 !important;
		width: 100% !important;
		height: auto !important;
		display: flex !important;
		justify-content: center !important;
		gap: 0.5rem !important;
		opacity: 1 !important;
		pointer-events: auto !important;
		white-space: normal !important;
		clip: auto !important;
		clip-path: none !important;
		overflow: visible !important;
		z-index: 5 !important;
	}

	.twm-slider1-wrap .hero-pagination.swiper-pagination-bullets {
		display: flex !important;
	}

	.twm-slider1-wrap .hero-pagination .swiper-pagination-bullet {
		width: 8px !important;
		height: 8px !important;
		border-radius: 999px !important;
		background-color: #cfc7bd !important;
		border: 1px solid rgba(0, 0, 0, 0.45) !important;
		opacity: 1 !important;
	}

	.twm-slider1-wrap .hero-pagination .swiper-pagination-bullet-active {
		background-color: var(--color-primary, #f2b200) !important;
		border-color: rgba(0, 0, 0, 0.6) !important;
	}

}

/* Hide hero pagination on desktop */
@media (min-width: 769px) {
	.twm-slider1-wrap .hero-pagination {
		display: none !important;
	}
}


/* Ensure hero section maintains tall height around 1588px to prevent angles from being clipped */
/* h-157.5 = 630px, h-207.5 = 830px */
@media (min-width: 1400px) and (max-width: 1600px) {
	.twm-slider1-wrap {
		min-height: 830px !important;
		height: 830px !important;
	}
	
	/* Ensure angles stay visible above navigation by adjusting positioning if needed */
	.twm-slider1-wrap .angles {
		z-index: 10001 !important;
	}
}

/* On mobile: keep relative positioning (handled by existing media queries) */
@media (max-width: 768px) {
	/* Remove gap between header and hero section on mobile */
	.twm-slider1-wrap {
		height: 70vh !important;
		min-height: 70vh !important;
		margin-top: 0 !important;
		padding-top: 0 !important;
		overflow: hidden !important;
	}

	/* Dark overlay to improve text contrast on mobile */
	.twm-slider1-wrap::after {
		content: "";
		position: absolute;
		inset: 0;
		background: rgba(0, 0, 0, 0.45);
		display: block;
		z-index: 2;
		pointer-events: none;
	}
	
	/* Ensure body/main doesn't add padding that creates gap */
	body > main,
	body > main > section:first-child {
		margin-top: 0 !important;
		padding-top: 0 !important;
	}

	/* Page wrapper has inline padding-top: 100px; remove it on mobile */
	.page-content {
		padding-top: 100px !important;
	}
}

/* Mobile submenu toggle functionality */
@media (max-width: 1023px) {
	.mobile-parent-menu {
		display: block !important;
		max-height: 0;
		overflow: hidden;
		transition: max-height 0.3s ease-in-out;
	}

	li.group > a i.fas.fa-chevron-right {
		transition: transform 0.3s ease;
	}

	li.group > a i.fas.fa-chevron-right.active {
		transform: rotate(90deg);
	}
	
	.mobile-parent-menu.mobile-parent-menu-open {
		max-height: 2000px; /* Large enough for all items */
	}
	
	.mobile-submenu {
		display: block !important;
		max-height: 0;
		overflow: hidden;
		transition: max-height 0.3s ease-in-out;
	}
	
	.mobile-submenu.mobile-submenu-open {
		max-height: 500px; /* Adjust based on content */
	}
	
	.mobile-submenu-trigger {
		cursor: pointer;
	}
	
	.mobile-submenu-trigger::after {
		transition: transform 0.3s ease;
	}
	
	.mobile-submenu-trigger.active::after {
		transform: rotate(90deg);
	}
	
	/* Remove huge empty space above logo in mobile sidebar */
	/* Target the logo container div inside mobile sidebar - override Tailwind py-6.25 */
	#xMenuNav2.header-nav.xmenu.mo-left > div.flex.items-center.relative.z-9.lg\:hidden,
	#xMenuNav2 > div.flex.items-center.relative.z-9,
	#xMenuNav2 > div:first-child {
		padding-top: 0 !important;
	}

	/* Add slight spacing above the logo in mobile sidebar */
	#xMenuNav2.header-nav.xmenu.mo-left > div.flex.items-center.relative.z-9.lg\:hidden,
	#xMenuNav2 > div.flex.items-center.relative.z-9,
	#xMenuNav2 > div:first-child {
		margin-top: 0.75rem !important;
		margin-bottom: 1rem !important;
	}
}

/* Hero slider navigation buttons - same style as about carousel */
/* Buttons are now regular button elements with Font Awesome icons, matching about carousel */
.twm-slider1-wrap > .absolute.left-0,
.twm-slider1-wrap > .absolute.right-0 {
	z-index: 10000 !important;
}

@media (max-width: 768px) {
	/* Hide hero chevron buttons on mobile */
	.twm-slider1-wrap > .absolute.left-0,
	.twm-slider1-wrap > .absolute.right-0 {
		display: none !important;
	}
}

/* === SEO: Hero title semantics without visual change ===
   We render exactly one <h1> on the homepage hero. Other slides use <h2>.
   This class provides a framework-agnostic style fallback so <h1>/<h2> look identical
   even if some Tailwind utility classes are missing in this project.
*/
.hero-title.hero-title--hero {
	font-family: var(--font-marcellus, "Marcellus", ui-serif, Georgia, "Times New Roman", serif);
	color: var(--color-secondary, #443935);
	font-weight: 400;
	text-transform: capitalize;
	margin: 0 0 3.125rem; /* ~ mb-12.5 */
}

/* Hero eyebrow can now be an <h1> (first slide) or <span> (other slides) */
.hero-eyebrow.hero-eyebrow--hero {
	display: block;
	font-family: var(--font-display, "Urbanist", ui-serif, Georgia, "Times New Roman", serif);
	font-size: 1rem; /* text-base */
	font-weight: 500; /* font-medium */
	text-transform: uppercase;
	letter-spacing: 2px; /* tracking-[2px] */
	color: var(--color-gray, #6a6560);
	margin: 0 0 1.25rem; /* ~ mb-5 */
}

/* Accessible "screen reader only" helper (framework-agnostic) */
.visually-hidden {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	padding: 0 !important;
	margin: -1px !important;
	overflow: hidden !important;
	clip: rect(0, 0, 0, 0) !important;
	white-space: nowrap !important;
	border: 0 !important;
}

/* Reset default heading browser styles when using semantic h1/h2 in places that used to be <div> */
.heading-reset {
	margin: 0 !important;
	padding: 0 !important;
	line-height: inherit !important;
	font-family: inherit !important;
	font-size: inherit !important;
	font-weight: inherit !important;
	font-style: inherit !important;
	letter-spacing: inherit !important;
	text-transform: inherit !important;
	color: inherit !important;
}

/* Responsive font sizes to approximate the existing utilities */
.hero-title.hero-title--hero {
	font-size: 1.875rem; /* ~ text-3xl */
	line-height: 2.5rem; /* ~ /7.5 */
}

@media (min-width: 640px) {
	.hero-title.hero-title--hero {
		font-size: 2.375rem; /* ~ sm:text-3.8xl */
		line-height: 3.2rem;
	}
}

@media (min-width: 1024px) {
	.hero-title.hero-title--hero {
		font-size: 3rem; /* ~ lg:text-4.8xl */
		line-height: 3.75rem;
	}
}

@media (min-width: 1280px) {
	.hero-title.hero-title--hero {
		font-size: 3.75rem; /* ~ xl:text-6xl */
		line-height: 4.75rem;
	}
}

@media (min-width: 1536px) {
	.hero-title.hero-title--hero {
		font-size: 4.375rem; /* ~ xxl:text-7xl */
		line-height: 5rem;
	}
}

@media (min-width: 1920px) {
	.hero-title.hero-title--hero {
		font-size: 5rem; /* ~ 3xl:text-8xl */
		line-height: 5rem;
	}
}

/* Show navigation on desktop */
@media (min-width: 1024px) {
	.about-section-one-wrap .about-carousel-nav {
		position: absolute;
		top: 50%;
		left: 50%;
		width: 100vw;
		display: flex !important;
		align-items: center;
		justify-content: space-between;
		transform: translate(-50%, -50%);
		z-index: 20;
		padding-inline: 0;
		pointer-events: none;
	}

	.about-section-one-wrap .about-carousel-nav button {
		pointer-events: auto;
	}
}

/* Hide navigation on mobile (dots are used instead) */
@media (max-width: 1023px) {
	.about-section-one-wrap .about-carousel-nav {
		display: none !important;
	}
}

@media (min-width: 1024px) {
	.about-section-one-wrap .about-carousel-grid {
		grid-template-columns: repeat(12, minmax(0, 1fr));
	}

	.about-section-one-wrap .about-carousel-text-col {
		grid-column: 1 / span 5;
		order: 1;
	}

	.about-section-one-wrap .about-carousel-image-col {
		grid-column: 6 / span 7;
		order: 2;
	}
}

@media (max-width: 1023.98px) {
	.about-section-one-wrap .about-carousel-image {
		padding-left: 0 !important;
	}

	.about-section-one-wrap .about-carousel-image .diagonal-bg-item {
		width: 100vw;
		max-width: 100vw;
		margin-left: calc(50% - 50vw) !important;
		margin-right: calc(50% - 50vw) !important;
	}

	.about-section-one-wrap .about-carousel-image .diagonal-bg-item img {
		display: block;
		width: 100%;
		height: auto;
	}

	.header-style-2 .main-bar .logo-container {
		position: static;
		left: auto;
		transform: none;
	}
}

@media (max-width: 768px) {
	.team-carousel-section .pro-filtr-cate-bx {
		position: relative;
	}

	.team-carousel-section .dlab-gallery-box .relative.mb-7\.5 {
		margin-bottom: 0 !important;
	}

	.team-carousel-section .pro-filtr-cate-bx .swiper-button-next,
	.team-carousel-section .pro-filtr-cate-bx .swiper-button-prev {
		display: none !important;
	}

	.team-carousel-section .team-pagination {
		position: absolute !important;
		left: 0 !important;
		right: 0 !important;
		bottom: 0.75rem !important;
		top: auto !important;
		margin-top: 0 !important;
		display: flex !important;
		justify-content: center !important;
		gap: 0.5rem !important;
		z-index: 6 !important;
	}

	.team-carousel-section .team-pagination .swiper-pagination-bullet {
		width: 8px !important;
		height: 8px !important;
		border-radius: 999px !important;
		background-color: #cfc7bd !important;
		border: 1px solid rgba(0, 0, 0, 0.45) !important;
		opacity: 1 !important;
	}

	.team-carousel-section .team-pagination .swiper-pagination-bullet-active {
		background-color: var(--color-primary, #f2b200) !important;
		border-color: rgba(0, 0, 0, 0.6) !important;
	}

	.slides-carousel-section .pro-filtr-cate-bx {
		position: relative;
		overflow: hidden !important;
	}

	.slides-carousel-section .dlab-gallery-box .relative.mb-7\.5 {
		margin-bottom: 0 !important;
	}

	.slides-carousel-section .pro-filtr-cate-bx .swiper-button-next,
	.slides-carousel-section .pro-filtr-cate-bx .swiper-button-prev {
		display: none !important;
	}

	.slides-carousel-section .slide-pagination {
		position: absolute !important;
		left: 0 !important;
		right: 0 !important;
		bottom: 0.75rem !important;
		top: auto !important;
		margin-top: 0 !important;
		display: flex !important;
		justify-content: center !important;
		gap: 0.5rem !important;
		z-index: 6 !important;
		margin-left: auto !important;
		margin-right: auto !important;
	}

	/* Center dynamic bullets (Swiper sets left/width inline) */
	.slides-carousel-section .slide-pagination.swiper-pagination-bullets-dynamic {
		left: 50% !important;
		right: auto !important;
		transform: translateX(-50%) !important;
		width: auto !important;
		justify-content: center !important;
	}

	.slides-carousel-section .slide-pagination .swiper-pagination-bullet {
		width: 8px !important;
		height: 8px !important;
		border-radius: 999px !important;
		background-color: #cfc7bd !important;
		border: 0 !important;
		box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.45) !important;
		opacity: 1 !important;
		transform: scale(1) !important; /* prevent line-like shrink on dynamic bullets */
		min-width: 8px !important;
		min-height: 8px !important;
	}

	.slides-carousel-section .slide-pagination .swiper-pagination-bullet-active {
		background-color: var(--color-primary, #f2b200) !important;
		box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.6) !important;
	}

	/* Keep dynamic bullets round (override Swiper scaling) */
	.slides-carousel-section .slide-pagination.swiper-pagination-bullets-dynamic .swiper-pagination-bullet,
	.slides-carousel-section .slide-pagination .swiper-pagination-bullet-active-prev,
	.slides-carousel-section .slide-pagination .swiper-pagination-bullet-active-prev-prev,
	.slides-carousel-section .slide-pagination .swiper-pagination-bullet-active-next,
	.slides-carousel-section .slide-pagination .swiper-pagination-bullet-active-next-next {
		transform: scale(1) !important;
		width: 8px !important;
		height: 8px !important;
	}

	.slides-carousel-section .slide-card-image {
		height: 100% !important;
		object-fit: cover !important;
		object-position: center top !important;
	}

	.slides-carousel-section .slides-carousel-spacer {
		padding-top: 130% !important;
	}

	/* Slightly shorter mobile slides on Our Projects / Future Projects */
	.slides-carousel-section--projects .slides-carousel-spacer,
	.slides-carousel-section--future-projects .slides-carousel-spacer {
		padding-top: 120% !important;
	}
}

@media (min-width: 769px) {
	.team-carousel-section .team-pagination {
		display: none !important;
	}

	.slides-carousel-section .slide-pagination {
		display: none !important;
	}
}

/* Team end background: pagination dots inside image */
.team-end-background-slider {
	position: relative;
}

.team-end-background-pagination {
	position: absolute !important;
	left: 0 !important;
	right: 0 !important;
	bottom: 1rem !important;
	top: auto !important;
	display: flex !important;
	justify-content: center !important;
	gap: 0.5rem !important;
	z-index: 6 !important;
}

.team-end-background-pagination .swiper-pagination-bullet {
	width: 8px !important;
	height: 8px !important;
	border-radius: 999px !important;
	background-color: #cfc7bd !important;
	border: 1px solid rgba(0, 0, 0, 0.45) !important;
	opacity: 1 !important;
}

.team-end-background-pagination .swiper-pagination-bullet-active {
	background-color: var(--color-primary, #f2b200) !important;
	border-color: rgba(0, 0, 0, 0.6) !important;
}

/* Footer */
.site-footer {
	background-color: #2a2a2a;
	color: #ffffff;
}

.site-footer__container {
	padding: 72px 0;
}

.site-footer__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 40px;
}

.site-footer__heading {
	font-size: 0.95rem;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	font-weight: 600;
	margin: 0 0 16px 0;
}

.site-footer__text {
	margin: 0 0 12px 0;
	font-size: 1rem;
	color: rgba(255, 255, 255, 0.9);
}

.site-footer__label {
	font-weight: 600;
	color: #ffffff;
}

.site-footer__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 12px;
	font-size: 1rem;
	color: rgba(255, 255, 255, 0.9);
}

.site-footer__list-item {
	display: flex;
	align-items: center;
	gap: 12px;
}

.site-footer__icon {
	margin-top: 0;
	color: #ffffff;
}

.site-footer__list a {
	color: #ffffff;
	text-decoration: none;
}

.site-footer__list a:hover {
	color: #ffffff;
	text-decoration: underline;
}

.site-footer__social {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-bottom: 24px;
}

.site-footer__social-link {
	width: 44px;
	height: 44px;
	border-radius: 50%;
	border: 1px solid rgba(255, 255, 255, 0.5);
	display: flex;
	align-items: center;
	justify-content: center;
	color: #ffffff;
	text-decoration: none;
	transition: background-color 0.2s ease, border-color 0.2s ease;
}

.site-footer__social-link i {
	font-size: 1.125rem;
}

.site-footer__social-link:hover {
	background-color: rgba(255, 255, 255, 0.1);
	border-color: rgba(255, 255, 255, 0.8);
}

.site-footer__logos {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	align-items: center;
}

.site-footer__logo {
	height: 48px;
	width: auto;
	object-fit: contain;
}

@media (max-width: 900px) {
	.site-footer__grid {
		grid-template-columns: 1fr;
		gap: 32px;
	}
}

@media (max-width: 768px) {
	.site-footer__container {
		padding-left: 16px;
		padding-right: 16px;
	}
}

@media (max-width: 768px) {
	.team-end-background-button-prev,
	.team-end-background-button-next {
		display: none !important;
	}
}

@media (min-width: 769px) {
	.team-end-background-pagination {
		display: none !important;
	}
}