@font-face {
	font-family: 'CustomFont';
	src: url('fonts/font.woff') format('woff');
	/* Add additional formats if necessary */
}

/* Regular weight (400) */
@font-face {
	font-family: 'Manrope';
	src: url('../fonts/Manrope-Regular.woff') format('woff');
	font-weight: 400;
	font-style: normal;
}

/* Bold weight (700) */
@font-face {
	font-family: 'Manrope';
	src: url('../fonts/Manrope-Bold.woff') format('woff');
	font-weight: 700;
	font-style: normal;
}

/* Light weight (300) */
@font-face {
	font-family: 'Manrope';
	src: url('../fonts/Manrope-Light.woff') format('woff');
	font-weight: 300;
	font-style: normal;
}

/* Medium weight (500) */
@font-face {
	font-family: 'Manrope';
	src: url('../fonts/Manrope-Medium.woff') format('woff');
	font-weight: 500;
	font-style: normal;
}

/* Add Arcadia Display font for headers */
@font-face {
	font-family: 'Arcadia Display';
	src: url('../fonts/Arcadia Display.woff2') format('woff2');
	font-weight: normal;
	font-style: normal;
}

/* Add Arcadia Text font for paragraphs */
@font-face {
	font-family: 'Arcadia Text';
	src: url('../fonts/Arcadia text.woff2') format('woff2');
	font-weight: normal;
	font-style: normal;
}

body {
	background-color: #000000;
	/* background-image: radial-gradient(at center, #131b23 0, #000000 100%); */
	background-image: radial-gradient(at center, #051d2d 0, #000000 100%);
	/* background-image: linear-gradient(0deg, #fff5e6, #fff0eb 25%, #faebf5 50%, #f5f0ff 75%, #fafaff); */
	background-repeat: no-repeat;
	background-size: cover;
	background-attachment: fixed;
	transition: background-color 0.3s;
}

body::before {
	content: '';
	position: fixed;
	top: -10%;
	left: -10%;
	width: 120vw;
	height: 120vh;
	/* background-image: url('../images/background.png'); */
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
	/* opacity: 0.9; */
	z-index: -2;
}

a {
	transition: .3s all ease;
	text-decoration: none;
	cursor: pointer;
}

a:hover,
a:active,
a:focus {
	text-decoration: none;
	outline: none;
}

.pointer,
button,
.block-button-element--small,
.templateux-menu ul li a,
.site-logo a,
.footer-social a,
.project a,
.case-studies a {
	cursor: pointer;
}

.templateux-navbar-container {
	position: fixed;
	top: 0px;
	left: 0px;
	width: 100%;
	z-index: 99999;
	display: flex;
	justify-content: center;
	transition: transform 0.3s ease-in-out;
}

/* Mobile navbar hide/show behavior */
@media (max-width: 768px) {
	.templateux-navbar-container.navbar-hidden {
		transform: translateY(-100%);
	}

	.templateux-navbar-container.navbar-visible {
		transform: translateY(0);
	}
}

.container-fluid-navbar {
	/* padding-left: 0px;
	padding-right: 0px; */
	/* width: 1140px; */
	/* max-width: 1140px; */
	flex: 1;
	margin: 0 -15px;
	/* flex: 0 0 100%; */
}

@media (max-width: 768px) {
	.container-fluid-navbar {
		/* padding-left: 8px;
		padding-right: 8px; */
		max-width: 720px;
		min-width: 353px;
		flex: 1;
		margin: 0 -15px;
	}
}

.templateux-navbar {
	max-width: auto;
	margin: 0 auto;
	margin-top: 0px;
	/* background: linear-gradient(to bottom, rgb(24 38 49), rgb(17 29 38 / 10%)); */
	/* backdrop-filter: blur(16px); */
	-webkit-backdrop-filter: blur(16px);
	padding-top: 16px;
	padding-bottom: 16px;
	padding-left: 24px;
	padding-right: 24px;
	/* border-bottom: 1px solid #ffffff7a; */
	/* border-color: #ffffff29; */
	*/
}

.templateux-navbar .container-fluid {
	max-width: 100%
}

.templateux-navbar .toggle-menu {
	z-index: 9999;
	position: relative;
	top: -2px;
	display: none;
	background-image: url('../images/new-menu.svg');
	/* Update the path to new-menu.svg */
	background-size: contain;
	background-repeat: no-repeat;
	width: 30px;
	/* Adjust width if necessary */
	height: 30px;
	/* Adjust height if necessary */
}

@media (max-width: 767.98px) {
	.templateux-navbar .toggle-menu {
		display: block
	}
}

.templateux-navbar .toggle-menu:active,
.templateux-navbar .toggle-menu:focus {
	outline: none
}

.templateux-navbar .site-logo {
	position: relative;
	z-index: 9999;
	padding-bottom: 0px;
}

.templateux-navbar .site-logo a {
	font-weight: 500;
	font-size: 18px;
	color: #ffffff;
}

.templateux-navbar .templateux-menu {
	position: relative;
}

.templateux-navbar .templateux-menu ul {
	margin-bottom: 0;
	display: flex;
	align-items: center;
	gap: 0px;
	justify-content: flex-end;
	padding: 0;
}

.templateux-navbar .templateux-menu ul li {
	display: inline-block;
	margin: 0;
}

.templateux-navbar .templateux-menu ul li a {
	margin-right: 0;
	font-size: 16px;
	text-transform: capitalize;
	letter-spacing: -0.003em;
	font-weight: 500;
	color: #bebebe;
	position: relative;
	padding-bottom: 5px;
	display: block;
}

.templateux-navbar .templateux-menu ul li a:before {
	content: "";
	position: absolute;
	bottom: 0;
	height: 2px;
	width: 0;
	left: 0;
	background: #ffffff00;
	transition: .15s width ease
}

.templateux-navbar .templateux-menu ul li a:hover:before {
	width: 100%
}

.templateux-navbar .templateux-menu ul li.active>a:before {
	width: 100%
}

.templateux-navbar .templateux-menu ul li:last-child a {
	margin-right: 0
}

@media (max-width: 767.98px) {
	.templateux-navbar .templateux-menu {
		position: fixed;
		left: -100%;
		right: 100px;
		top: 0;
		bottom: 0;
		background: rgb(255, 255, 255);
		-webkit-backdrop-filter: blur(10px);
		backdrop-filter: blur(10px);
		height: 100vh;
		padding: 20px;
		padding-top: 80px;
		z-index: 99999;
		transform: translateX(0);
		transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), visibility 0.4s;
		will-change: transform;
		visibility: hidden;
		opacity: 0;
	}

	.templateux-navbar .templateux-menu.menu-open,
	.menu-open .templateux-menu {
		transform: translateX(100%);
		left: 0;
		visibility: visible;
		opacity: 1;
		box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
	}

	.templateux-navbar .templateux-menu ul {
		display: block;
		padding: 0;
		margin: 0;
	}

	.templateux-navbar .templateux-menu ul li {
		display: block;
		margin-bottom: 16px;
		width: 100%;
		opacity: 0;
		transform: translateX(-10px);
		transition: opacity 0.3s ease, transform 0.3s ease;
	}

	.menu-open .templateux-menu ul li {
		opacity: 1;
		transform: translateX(0);
		transition-delay: calc(0.1s * var(--item-index, 0));
	}

	.templateux-navbar .templateux-menu ul li a {
		font-size: 24px;
		color: #172730;
		padding: 12px 0;
		display: block;
	}

	body.menu-open {
		overflow: hidden;
	}

	body.menu-open .templateux-navbar,
	body.menu-open main,
	body.menu-open footer {
		pointer-events: none;
		user-select: none;
		filter: blur(3px);
	}

	body.menu-open .templateux-menu,
	body.menu-open .templateux-menu * {
		pointer-events: auto;
		user-select: auto;
		filter: none;
	}

	.menu-overlay {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: rgba(0, 0, 0, 0.5);
		opacity: 0;
		visibility: hidden;
		transition: opacity 0.3s ease, visibility 0.3s ease;
		z-index: 99998;
		backdrop-filter: blur(4px);
		-webkit-backdrop-filter: blur(4px);
	}

	.menu-open .menu-overlay {
		opacity: 1;
		visibility: visible;
	}
}

/* Fallback for browsers that don't support backdrop-filter */
@supports not ((backdrop-filter: blur(8px)) or (-webkit-backdrop-filter: blur(8px))) {
	@media (max-width: 767.98px) {
		.templateux-navbar .templateux-menu {
			background: rgba(255, 255, 255, 0.95);
		}
	}
}

.menu-open .templateux-menu {
	opacity: 1 !important;
	visibility: visible !important;
	display: block !important;
}

/* Mobile only items styling */
.mobile-only {
	display: none;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.3s ease, visibility 0.3s ease;
	margin-bottom: 24px;
	text-align: left;
	padding-left: 0;
}

.mobile-only a {
	display: flex;
	align-items: flex-start;
	text-decoration: none;
	color: inherit;
	padding: 12px 0;
	text-align: left;
}

.menu-open .mobile-only {
	opacity: 1;
	visibility: visible;
	display: block !important;
}

/* Ensure menu items are visible in mobile view when menu is open */
@media (max-width: 768px) {
	.menu-open .templateux-menu {
		opacity: 1;
		visibility: visible;
		display: block;
	}

	.menu-open .mobile-only {
		opacity: 1;
		visibility: visible;
		display: block;
	}
}

/* Menu spacer */
.menu-spacer {
	height: 20px;
}

/* Hide mobile items on desktop */
@media (min-width: 769px) {
	.mobile-only {
		display: none;
	}
}

.templateux-navbar.navbar-light .site-logo a {
	color: #000
}

.templateux-navbar.navbar-light .hamburger .hamburger-inner,
.templateux-navbar.navbar-light .hamburger .hamburger-inner::before,
.templateux-navbar.navbar-light .hamburger .hamburger-inner::after {
	background-color: #fff
}

.templateux-navbar.navbar-light .templateux-menu ul li a {
	color: #000
}

.menu-open .templateux-navbar {
	/* position: fixed;
	left: 0;
	top: 0 */
}

@media (max-width: 767.98px) {
	.menu-open .site-logo a {
		color: #162830;
	}
}

.menu-open .navbar-light .hamburger .hamburger-inner,
.menu-open .navbar-light .hamburger .hamburger-inner::before,
.menu-open .navbar-light .hamburger .hamburger-inner::after {
	background-color: #000;
}

.menu-open .templateux-menu li {
	opacity: 0;
	visibility: hidden;
	margin-left: -10px;
	position: relative;
	transition: .3s all ease-in-out
}

.menu-open .templateux-menu li.staggard {
	opacity: 1;
	visibility: visible;
	margin-left: 0px;
}

@media (max-width: 767.98px) {
	.menu-open .templateux-menu li a {
		color: #ffffff;
	}
}


.templateux-hero .lead {
	font-size: 1.2rem;
	font-weight: 100;
	font-family: 'Arcadia Text', 'SF Pro Display Bold', '-apple-system', 'BlinkMacSystemFont', sans-serif;
	line-height: 2.3rem;
}

@media (max-width: 991.98px) {
	.templateux-hero .lead {
		font-size: 18px
	}
}

.templateux-hero .cover {
	position: absolute;
	display: block;
	width: 100%;
	height: 100%;
	z-index: -1
}

.templateux-hero .cover img {
	position: absolute;
	display: block;
	min-width: 100%;
	min-height: 100%;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%)
}

.templateux-hero.overlay:before {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	right: 0
}

.templateux-hero.overlay h1 {
	color: #ffffff;
}

.templateux-hero.overlay .lead {
	color: #b4b4b4;
	opacity: 1
}

.templateux-hero,
.intro {
	/* height: 100vh; */
	min-height: 800px;
	/* padding-top: calc(5% + 20px); */
	margin-top: 0;
	margin-bottom: 0%;
}

@media (max-width: 767px) {

	.templateux-hero,
	.intro {
		padding-top: calc(16% + 40px);
		margin-top: 0;
	}
}

.index-intro {
	padding-top: 40px;
	margin-top: 0;
}

@media (max-width: 991.98px) {
	.index-intro {
		padding-top: 40px;
		margin-top: 0;
		min-height: 450px;
	}
}

@media (max-width: 767px) {

	.templateux-hero-index,
	.index-intro {
		height: auto;
		padding-top: 24px;
		margin-top: 0;
	}
}

.templateux-hero h1,
.intro h1 {
	color: #000;
	font-size: 3rem;
	line-height: 1.2;
	font-weight: 900;
}

@media (max-width: 991.98px) {

	.templateux-hero h1,
	.intro h1 {
		font-size: 2.5rem;
		line-height: 40px
	}
}

.case-studies {
	/* background: radial-gradient(circle, rgb(37 48 59), rgb(12, 18, 25)); */
	background-color: rgb(148 148 148 / 6%);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	margin-top: 3.5%;
	margin-right: 0%;
	margin-left: 0%;
	margin-bottom: 1%;
	height: fit-content;
	min-height: 250px;
	padding: 0px;
	border-radius: 20px;
	/* border: 1px solid rgb(255 255 255 / 10%); */
	overflow: hidden;
	transition: all 0.3s ease;
}

.case-studies {
	border-radius: 20px;
	transition: all 0.3s ease;
}

.case-studies {
	position: relative;
	/* Ensure the pseudo-element is positioned relative to this container */
	border-radius: 20px;
	/* Apply the border radius */
	overflow: hidden;
	/* Clip the pseudo-element to the container's border radius */
}

.case-studies::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	border-radius: 20px;
	/* Match the border radius */
	padding: 2px;
	/* Adjusted border width to 8px for colorful border */
	background: linear-gradient(to right, #0e121d, #f208ff, rgb(21 237 255));
	/* Colorful gradient */
	-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
	mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
	-webkit-mask-composite: destination-out;
	mask-composite: exclude;
	z-index: 0;
	/* Ensure it stays behind the content */
	transition: opacity 0.3s ease;
	/* Smooth transition */
	opacity: 0;
	/* Hidden by default */
}

.case-studies:hover::before {
	opacity: 1;
	/* Show the border on hover */
}

.case-studies:not(:hover) {
	border-image-source: none;
	opacity: 1;
}

/* Make all clickable elements in case studies show pointer cursor */
.case-studies a,
.case-studies .intro-image,
.case-studies .block-button-element--small,
.case-studies .secondary-button {
	cursor: pointer;
}

/* Ensure all media within clickable areas shows pointer */
.case-studies a img,
.case-studies a video,
.case-studies .intro-image img,
.case-studies .intro-image video,
.case-studies .intro-image .video {
	cursor: pointer;
}

@media (max-width: 989px) {
	.case-studies {
		padding: 24px;
	}

	.case-studies .row {
		flex-direction: column;
	}

	.case-studies .col-md-8,
	.case-studies .col-md-4 {
		width: 100%;
		max-width: 100%;
		flex: 0 0 100%;
	}

	.case-studies .intro-text-container {
		padding-right: 0;
		margin-top: 24px;
	}

	.intro-image {
		width: 100%;
		transform: none;
		margin: 0;
		padding: 0;
	}
}

@media (max-width: 573px) {
	.case-studies {
		padding: 16px;
		margin-bottom: 0;
	}

	.case-studies .container-case-study {
		padding-left: 0;
		padding-right: 0;
	}

	.case-studies h1 {
		padding-top: 0;
		margin-top: 0;
	}

	.intro-image {
		padding: 0;
	}
}

/* Fallback for browsers that don't support backdrop-filter */
@supports not ((backdrop-filter: blur(20px)) or (-webkit-backdrop-filter: blur(20px))) {
	.case-studies {
		background-color: rgba(0, 0, 0, 0.95);
	}
}

.case-studies .index-intro {
	height: auto;
	min-height: 200px;
	margin-top: 0;
	margin-bottom: 0;
	padding: 0;
}

@media (max-width: 768px) {
	.case-studies .index-intro {
		margin-top: 1.5rem;
		/* Half of 3rem */
		margin-bottom: 1.5rem;
		/* Half of 3rem */
	}
}

@media (max-width: 643px) {
	.case-studies .index-intro {
		margin-top: 0;
		margin-bottom: 0;
	}
}


.case-studies h1,
.case h1 {
	color: #000;
	font-size: 38px;
	line-height: 1.2;
	font-weight: 100;
	margin-top: 8px;
	margin-bottom: 0px;
	font-family: "Manrope";
}

@media (max-width: 991.98px) {

	.case-studies h1,
	.case h1 {
		font-size: 32px;
		line-height: 50px
	}
}

.intro-image {
	width: 110%;
	height: auto;
	transform: scale(1.05);
	margin: 0 -5%;
	overflow: visible;
	margin-right: 24px;
	padding: 0;
}

.intro-image img {
	width: 100% !important;
	height: auto;
	display: block;
	max-width: none !important;
}

@media (max-width: 767px) {
	.intro-image {
		width: 100%;
		transform: none;
		margin: 0;
		margin-bottom: 24px;
	}
}

@media (max-width: 643px) {
	.intro-image {
		margin-bottom: 0;
	}
}

@media (min-width:1000px) {
	.container-case-study {
		max-width: 2000px;
		width: 95%;
		margin: 0 auto;
		padding: 0px;
	}
}

@media (max-width: 999px) {
	.container-case-study {
		width: 100%;
		padding: 0 16px;
		margin: 0 auto;
	}
}

.templateux-section {
	/* background-color: #171717; */
}

.expertise-header {
	display: flex;
	flex-direction: row;
}

.expertise-icon {
	height: 40px;
	width: 40px;
}

.expertise-title {
	line-height: 65px;
	margin-left: 8px;
	letter-spacing: -0.003em;
}

.intro-text-container {
	padding-right: 50px;
}

@media (max-width: 426px) {
	.intro-text-container {
		margin-top: 30px;
		padding-right: 14px;
	}
}

/*Portfolio*/
#portfolio {
	padding-top: 10px;
}

.portfolio-title {
	margin: 0 auto 80px auto;
	/* Adjusted margin */
}

.portfolio-title h2,
.portfolio-title p {
	text-align: center;
	margin-top: 10px;
}

.portfolio-title h2 {
	color: #ffffff;
	font-size: 2.7rem;
	line-height: 1.4;
	font-weight: 100;
	margin-bottom: 0px;
	/* Added space below the title */
	margin-top: 0;
}

/* Specific margin for Selected Work heading on index.html */
.templateux-portfolio-overlap-project .portfolio-title h2 {
	margin-top: 24px;
}

@media screen and (max-width: 767px) {
	.portfolio-title h2 {
		font-size: 2.7rem;
		margin-top: 20px;
	}
}


.portfolio-title p {
	text-align: left;
	/* font-size: 1.2rem; */
	font-weight: 100;
	color: #ffffff4f;
	line-height: 1.8;
	letter-spacing: 0px;
	margin-bottom: 40px;
}

.templateux-portfolio-overlap {
	position: relative;

	margin-top: 0;
	margin-bottom: -50px;
	width: 100%;
}

/* Specific padding for index.html case studies */
.templateux-portfolio-overlap-project {
	padding-top: 80px !important;
}

@media (max-width: 767px) {
	.templateux-portfolio-overlap {
		padding-top: 100px;
	}

	.portfolio-title {
		margin-top: 20px;
	}
}

@media (max-width: 991.98px) {
	.templateux-portfolio-overlap h2 {
		/* font-size: 34px */
	}

	#portfolio {
		margin-top: -50px
	}

	.portfolio-title p {
		line-height: 1.4;
	}
}

@media (max-width: 426px) {
	.templateux-portfolio-overlap-project {
		margin-top: 50px;
	}
}



.templateux-portfolio-overlap .box-title {
	height: 160px;
	position: relative;
	margin: 70px auto;
	text-align: center;
	border-style: solid;
	border-width: 2px;
	border-color: #bdbdbd;
}

.vertical-center {
	margin: 0;
	position: absolute;
	top: 50%;
	-ms-transform: translateY(-50%);
	transform: translateY(-50%)
}

.video-container {
	position: relative;
	overflow: hidden;
}

.video-wrapper {
	/* width: 100%; */
	/* max-width: 100%; */
	/* background-color: #758493; */
}

.controls button {
	border: none;
	cursor: pointer;
	background: transparent;
	background-size: contain;
	background-repeat: no-repeat;
}

.video-container iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border: 0
}

iframe {
	width: 100%;
	height: 500px
}

.container-fluid {
	padding-left: 0px;
	padding-right: 0px;
	max-width: 1050px;
	flex: 0 0 100%;
}

@media (max-width: 768px) {
	.container-fluid {
		padding-left: 0px;
		padding-right: 0px;
		flex: 0 0 100%;
	}

	.container {
		padding-left: 0px;
		padding-right: 0px;
	}

	.row {
		margin-left: 0;
		margin-right: 0;
	}

	[class*="col-"] {
		padding-left: 0;
		padding-right: 0;
	}
}

@media (max-width: 767.98px) {
	.container-fluid-project {
		padding-left: 0px;
		padding-right: 0px
	}
}


.templateux-section {
	padding-top: 0pxm;
	padding-right: 0px;
	padding-bottom: 0px;
	padding-left: 0px;
	margin-bottom: 80px;
}

@media (max-width: 991.98px) {
	.templateux-section {
		padding: 0;
	}
}

.templateux-section h2 {
	line-height: 1.5;
	font-family: "Manrope", "SF Pro Display Bold", "-apple-system", "BlinkMacSystemFont", sans-serif;
}

@media (max-width: 426px) {
	.my-expertise-content {
		margin-top: -45px;
	}
}

.templateux-cta {
	padding: 7em 0;
	display: block;
	background: #f8f9fa;
	position: relative
}

.templateux-cta:before {
	content: "";
	position: absolute;
	height: 0px;
	bottom: 0;
	background: #3580B5;
	width: 100%;
	left: 0;
	transition: .3s all ease-out
}

.templateux-cta .cta-inner {
	display: block;
	text-align: center
}

.templateux-cta span {
	display: block;
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	transition: .3s all ease
}

.templateux-cta .words-1 {
	opacity: 1;
	visibility: visible;
	top: 0
}

.templateux-cta .words-2 {
	opacity: 0;
	visibility: hidden;
	top: 40px
}

.templateux-cta h2 {
	font-weight: normal;
	margin-bottom: 0;
	color: #000;
	position: relative;
	bottom: 0;
	transition: .4s all ease
}

.templateux-cta:hover:before,
.templateux-cta:focus:before {
	height: 100%
}

.templateux-cta:hover .words-1,
.templateux-cta:focus .words-1 {
	opacity: 0;
	visibility: hidden;
	top: -40px
}

.templateux-cta:hover .words-2,
.templateux-cta:focus .words-2 {
	opacity: 1;
	visibility: visible;
	top: 0px;
	color: #fff
}

.section-heading {
	font-size: 14px;
	color: #495057;
	margin-bottom: 30px;
	display: block;
	position: relative
}

.section-heading:after {
	content: "";
	height: 2px;
	width: 30%;
	position: absolute;
	top: 50%;
	right: 0;
	transform: translateX(-50%);
	background: #000
}

.project,
.post {
	position: relative;
	float: left;
	width: 100%;
	margin-bottom: 30px
}

.project figure,
.post figure {
	margin: 0;
	position: relative
}

.project .project-hover,
.project .post-hover,
.post .project-hover,
.post .post-hover {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgb(25 25 25 / 79%);
	-webkit-backdrop-filter: blur(7px);
	backdrop-filter: blur(5px);
	visibility: hidden;
	opacity: 0;
	transition: .7s all ease;
	border-radius: 8px;
	border-width: 2px;
	border-style: solid;
	border-color: #fff;
}

.project .project-hover .project-hover-inner,
.project .project-hover .post-hover-inner,
.project .post-hover .project-hover-inner,
project .post-hover .post-hover-inner,
post .project-hover .project-hover-inner,
post .project-hover .post-hover-inner,
post .post-hover .project-hover-inner,
post .post-hover .post-hover-inner {
	position: absolute;
	z-index: 99;
	left: 50%;
	top: 50%;
	visibility: hidden;
	opacity: 0;
	transition: .3s all ease;
	transform: translate(-50%, -50%);
	transition: .3s all ease;
	text-align: center
}

.project .project-hover .project-hover-inner h2,
.project .project-hover .post-hover-inner h2,
project .post-hover .project-hover-inner h2,
project .post-hover .post-hover-inner h2,
post .project-hover .project-hover-inner h2,
post .project-hover .post-hover-inner h2,
post .post-hover .project-hover-inner h2,
post .post-hover .post-hover-inner h2 {
	color: #fff;
	font-size: 26px;
	line-height: 1.2;
	transition: .3s all ease;
	opacity: 0;
	visibility: hidden;
	position: relative;
	bottom: -30px
}

.project .project-hover .project-hover-inner span,
.project .project-hover .post-hover-inner span,
project .post-hover .project-hover-inner span,
project .post-hover .post-hover-inner span,
post .project-hover .project-hover-inner span,
post .project-hover .post-hover-inner span,
post .post-hover .project-hover-inner span,
post .post-hover .post-hover-inner span {
	color: rgba(255, 255, 255, 0.8);
	opacity: 0;
	visibility: hidden;
	position: relative;
	bottom: -30px;
	transition: .5s all ease
}

.project:hover .project-hover,
.project:hover .post-hover,
project:focus .project-hover,
project:focus .post-hover,
post:hover .project-hover,
post:hover .post-hover,
post:focus .project-hover,
post:focus .post-hover {
	visibility: visible;
	opacity: 1
}

.project:hover .project-hover .project-hover-inner,
.project:hover .project-hover .post-hover-inner,
project:hover .post-hover .project-hover-inner,
project:hover .post-hover .post-hover-inner,
project:focus .project-hover .project-hover-inner,
project:focus .project-hover .post-hover-inner,
project:focus .post-hover .project-hover-inner,
project:focus .post-hover .post-hover-inner,
post:hover .project-hover .project-hover-inner,
post:hover .project-hover .post-hover-inner,
post:hover .post-hover .project-hover-inner,
post:hover .post-hover .post-hover-inner,
post:focus .project-hover .project-hover-inner,
post:focus .project-hover .post-hover-inner,
post:focus .post-hover .project-hover-inner,
post:focus .post-hover .post-hover-inner {
	visibility: visible;
	opacity: 1;
	animation-delay: 10s
}

.project:hover .project-hover .project-hover-inner h2,
.project:hover .project-hover .post-hover-inner h2,
project:hover .post-hover .project-hover-inner h2,
project:hover .post-hover .post-hover-inner h2,
project:focus .project-hover .project-hover-inner h2,
project:focus .project-hover .post-hover-inner h2,
project:focus .post-hover .project-hover-inner h2,
project:focus .post-hover .post-hover-inner h2,
post:hover .project-hover .project-hover-inner h2,
post:hover .project-hover .post-hover-inner h2,
post:hover .post-hover .project-hover-inner h2,
post:hover .post-hover .post-hover-inner h2,
post:focus .project-hover .project-hover-inner h2,
post:focus .project-hover .post-hover-inner h2,
post:focus .post-hover .project-hover-inner h2,
post:focus .post-hover .post-hover-inner h2 {
	opacity: 1;
	visibility: visible;
	bottom: 0px
}

.project:hover .project-hover .project-hover-inner span,
.project:hover .project-hover .post-hover-inner span,
project:hover .post-hover .project-hover-inner span,
project:hover .post-hover .post-hover-inner span,
project:focus .project-hover .project-hover-inner span,
project:focus .project-hover .post-hover-inner span,
project:focus .post-hover .project-hover-inner span,
project:focus .post-hover .post-hover-inner span,
post:hover .project-hover .project-hover-inner span,
post:hover .project-hover .post-hover-inner span,
post:hover .post-hover .project-hover-inner span,
post:hover .post-hover .post-hover-inner span,
post:focus .project-hover .project-hover-inner span,
post:focus .project-hover .post-hover-inner span,
post:focus .post-hover .project-hover-inner span,
post:focus .post-hover .post-hover-inner span {
	bottom: 0;
	visibility: visible;
	opacity: 1
}

.project-video {
	height: 91.35%;
}

.templateux-footer .container-fluid {
	max-width: 100%
}

.templateux-footer small {
	font-size: 16px
}

.templateux-footer p:last-child {
	margin-bottom: 0
}

.templateux-footer .footer-social {
	position: relative
}

.templateux-footer .footer-social a {
	color: #9f9f9f;
	position: relative;
	transition: .3s all ease;
	font-size: 2rem;
}

.templateux-footer .footer-social a:hover,
.templateux-footer .footer-social a:focus {
	color: #ffffff;
	font-size: 35px;
}

.footer-social {
	display: flex;
	/* Use flexbox */
	justify-content: center;
	/* Center the items horizontally */
	gap: 20px;
}

.footer-social a {
	margin: 0px;
	margin-bottom: 0px;
	/* Add some spacing between the links */
}

.btn:hover,
.btn:focus,
.btn:active {
	outline: none;
	box-shadow: none !important
}

.form-control {
	height: 50px;
	background: #f6f6f6;
	border: none
}

.form-control:active,
.form-control:focus {
	background: #f6f6f6;
	outline: none;
	box-shadow: none !important
}

textarea.form-control {
	height: inherit
}

.button {
	padding: 15px 40px;
	display: inline-block;
	font-size: 13px;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: #fff;
	border-radius: 30px;
	border: none;
	transition: .3s all ease
}

.button:hover,
.button:active,
.button:focus {
	outline: none
}

.button.button--red {
	background: #3580B5
}

.button.button--red:hover {
	text-decoration: none;
	color: #fff;
	box-shadow: 0 20px 40px -5px rgba(0, 0, 0, 0.4);
	background: #2f72a1
}

.go-down {
	position: relative;
	width: 40px;
	height: 40px;
	display: block;
	margin-left: -15px;
	position: absolute;
	margin-top: 70px
}

.go-down:before {
	width: 2px;
	height: 40px;
	right: 27px;
	content: "";
	display: block;
	position: absolute;
	background: #3580B5;
	left: 50%;
	transform: translateX(-50%);
	pointer-events: none;
	top: 0;
	transition: .3s all ease
}

.go-down:after {
	content: "";
	position: absolute;
	left: 50%;
	bottom: -12px;
	border: solid transparent;
	content: " ";
	height: 0;
	width: 0;
	margin-left: -1px;
	position: absolute;
	border-top-color: #3580B5;
	border-width: 7px;
	margin-left: -7px
}

.go-down:hover {
	height: 70px
}

.go-down:hover:before {
	height: 70px
}

.templateux-media h3 {
	font-family: 'CustomFont', sans-serif;
	font-size: 1.5rem;
	color: #ffffff;
}

.templateux-media .icon span {
	font-size: 40px;
	color: #ccc
}


#map {
	height: 700px;
	width: 100%
}

.testimony {
	padding-top: 4em 0;
	/* background: #F8F9FA; */
}


@media (min-width: 768px) {
	.testimony {
		padding-top: 4em 0;
		/* background: #F8F9FA; */
	}
}

@media (max-width: 426px) {
	.testimony {
		padding: 1em 20px 1em;
	}
}


.testimony .author {
	color: #ffffff;
	text-transform: uppercase;
	letter-spacing: .1em;
}

/* #work-together {
	background: #030a10;
} */

@media (max-width: 426px) {
	#work-together h2 {
		font-size: 2.2rem;
	}
}

#work-together p {
	font-size: 20px;
	width: 80%;
	margin: 0 auto;
}

#work-together p span {
	color: #3327ec;
}

.work-detail {
	margin-bottom: 50px;
	display: flex;
	justify-content: space-between;
}

.work-detail .caption {
	display: block;
	text-transform: uppercase;
	font-size: 15px;
	font-weight: 700;
	color: #1a222a;
}

.work-detail strong {
	font-weight: 300;
	color: #1a222a;
}



.left-panel {
	height: 100vh;
}

@media (max-width: 991.98px) {
	.left-panel {
		display: none;
	}
}

.right-content {
	padding-left: 50px;
}

@media (max-width: 991.98px) {
	.right-content {
		padding-left: 16px;
		padding-right: 16px;
		margin-left: 0;
		margin-right: 0;
	}
}

.text-component {
	max-width: 1100px;
	margin-bottom: 6rem;
}

.text-detail {
	margin-top: 10px;
	margin-bottom: 0px;
}

.side-image {
	padding-top: 30px;
}

.side-description {
	padding-top: 60px;
}

.custom-pagination {
	width: 100%;
	text-align: center;
	display: inline-block
}

.custom-pagination li {
	display: inline-block
}

.custom-pagination .prev a,
.custom-pagination .next a {
	font-size: 20px !important;
	line-height: 38px !important
}

.custom-pagination li a,
.custom-pagination .prev a,
.custom-pagination .next a {
	width: 40px;
	height: 40px;
	line-height: 40px;
	padding: 0;
	margin: 0;
	border-radius: 50% !important;
	font-size: 16px
}

.custom-pagination li.active a,
.custom-pagination .prev.active a,
.custom-pagination .next.active a {
	display: block;
	width: 40px;
	height: 40px;
	line-height: 40px;
	padding: 0;
	margin: 0;
	border-radius: 50% !important;
	font-size: 16px;
	background: #3580B5;
	color: #fff;
}

.custom-pagination li.active a:hover,
.custom-pagination li.active a:focus,
.custom-pagination .prev.active a:hover,
.custom-pagination .prev.active a:focus,
.custom-pagination .next.active a:hover,
custom-pagination .next.active a:focus {
	color: #fff;
}

.custom-pagination .prev {
	float: left
}

.custom-pagination .next {
	float: right
}

.post-info {
	font-size: 12px;
	text-transform: uppercase;
	font-weight: bold;
	color: #fff;
	letter-spacing: .1em
}

.post-info>div {
	display: inline-block
}

.post-info>div .seperator {
	display: inline-block;
	margin: 0 10px;
	opacity: .5
}

.tagcloud a {
	text-transform: uppercase;
	display: inline-block;
	padding: 4px 10px;
	margin-bottom: 7px;
	margin-right: 4px;
	border-radius: 4px;
	color: #000;
	border: 1px solid #ccc;
	font-size: 11px
}

.tagcloud a:hover {
	border: 1px solid #000
}

.comment-form-wrap {
	clear: both
}

.comment-list {
	padding: 0;
	margin: 0
}

.comment-list .children {
	padding: 50px 0 0 40px;
	margin: 0;
	float: left;
	width: 100%
}

.comment-list li {
	padding: 0;
	margin: 0 0 30px 0;
	float: left;
	width: 100%;
	clear: both;
	list-style: none
}

.comment-list li .vcard {
	width: 80px;
	float: left
}

.comment-list li .vcard img {
	width: 50px;
	border-radius: 50%
}

.comment-list li .comment-body {
	float: right;
	width: calc(100% - 80px)
}

.comment-list li .comment-body h3 {
	font-size: 20px
}

.comment-list li .comment-body .meta {
	text-transform: uppercase;
	font-size: 13px;
	letter-spacing: .1em;
	color: #ccc
}

.comment-list li .comment-body .reply {
	padding: 5px 10px;
	background: #e6e6e6;
	color: #000;
	text-transform: uppercase;
	font-size: 11px;
	letter-spacing: .1em;
	font-weight: 400;
	border-radius: 4px
}

.comment-list li .comment-body .reply:hover {
	color: #fff;
	background: #000
}

.search-form .form-group {
	position: relative
}

.search-form .form-group input {
	padding-right: 50px
}

.search-form .icon {
	position: absolute;
	top: 50%;
	right: 20px;
	transform: translateY(-50%)
}

.sidebar-box {
	margin-bottom: 70px;
	font-size: 15px;
	width: 100%;
	float: left;
	background: #fff
}

.sidebar-box *:last-child {
	margin-bottom: 0
}

.sidebar-box h3 {
	font-size: 18px;
	margin-bottom: 15px
}

.categories li,
.sidelink li {
	position: relative;
	margin-bottom: 10px;
	padding-bottom: 10px;
	border-bottom: 1px dotted #dee2e6;
	list-style: none
}

.categories li:last-child,
.sidelink li:last-child {
	margin-bottom: 0;
	border-bottom: none;
	padding-bottom: 0
}

.categories li a,
.sidelink li a {
	display: block
}

.categories li a span,
.sidelink li a span {
	position: absolute;
	right: 0;
	top: 0;
	color: #ccc
}

.categories li.active a,
.sidelink li.active a {
	color: #000;
	font-style: italic
}

.post-meta {
	text-transform: uppercase;
	font-size: 15px;
	letter-spacing: .1em;
	color: #ccc;
	margin-bottom: 20px
}

.post-meta .sep {
	margin-left: 10px;
	margin-right: 10px
}

.block-38 .block-38-header .block-38-heading {
	font-size: 18px;
	color: #000;
	margin: 0;
	font-weight: 300
}

.block-38 .block-38-header .block-38-subheading {
	color: #b3b3b3;
	margin: 0 0 20px 0;
	text-transform: uppercase;
	font-size: 15px
}

.block-38 .block-38-header img {
	width: 90px;
	border-radius: 50%;
	margin-bottom: 20px
}

/*.block-button-element--small {
	padding: 13px 26px;
	font-family: "Helvetica Neue", Helvetica, Inter, sans-serif, Inter;
	font-weight: 600;
	font-family: Inter;
	font-size: 12px;
	font-weight: 400;
	font-style: normal;
	text-transform: uppercase;
	letter-spacing: 1px;
	color: #fff;
	background-color: #212121;
	border-color: #212121
}

.block-button-element--small {
	-webkit-transition: .1s opacity linear;
	-moz-transition: .1s opacity linear;
	-o-transition: .1s opacity linear;
	transition: .1s opacity linear;
	-webkit-backface-visibility: hidden
}


.block-button-element--small {
	border-width: 2px;
	border-style: solid;
	background-color: transparent;
	-webkit-transition: 0.1s background-color linear, 0.1s color linear;
	-moz-transition: 0.1s background-color linear, 0.1s color linear;
	-o-transition: 0.1s background-color linear, 0.1s color linear;
	transition: 0.1s background-color linear, 0.1s color linear
}


.block-button-element--small {
	color: #fff;
	background-color: #212121;
}


.block-button-element--small:hover {
	background-color: #fff;
	color: #212121;
}

.block-button-element--small {
	position: relative;
	-webkit-transition: .1s background-color linear;
	-moz-transition: .1s background-color linear;
	-o-transition: .1s background-color linear;
	transition: .1s background-color linear
}*/

/*Button*/
.block-button-element--small {
	min-width: 180px;
	height: 50px;
	font-weight: 200;
	font-size: 1rem;
	color: #000000;
	padding: 10px 24px;
	letter-spacing: 0px;
	line-height: 1.6;
	text-align: center;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	border-radius: 8px;
	margin-bottom: 0;
	margin-right: 16px;
	border-color: #3b3b3b;
	border-width: 0px;
	border-style: solid;
	transition: .30s ease;
	font-family: 'Manrope', -apple-system, BlinkMacSystemFont, sans-serif;
	animation-duration: 2s;
	animation-name: fadeInUp;
	will-change: opacity, transform;
	animation-delay: .3s;
	animation-timing-function: cubic-bezier(0.2, 0.8, 0.2, 1);
	animation-fill-mode: both;
}

.block-button-element--small:hover {
	background-color: #000000;
	border-width: 0px;
	/* box-shadow: 0 0 16px rgb(7 238 255 / 39%); */
}

@media screen and (min-width: 1000px) {
	.block-button-element--small {
		/* margin-bottom: 60px; */
	}

	.block-button-element--small:hover {
		/* box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .1), 
		0 2px 6px rgba(0, 0, 0, .05),
		0 7px 14px rgba(28, 35, 139, .15); */
		/* transform: translateY(-1px); */
	}
}

@media screen and (max-width: 991px) {
	.block-button-element--small {
		min-width: 0;
	}
}

@media screen and (max-width: 426px) {
	.block-button-element--small {
		min-width: 100%;
		margin-bottom: 15px;
	}
}

@media screen and (min-width: 395px) {
	.block-button-element--small {
		padding: 10px 24px;
	}
}

.secondary-button {
	background-color: #ffffff00;
	color: #ffffff;
	border-radius: 8px;
	border-style: solid;
	border-color: #94949477;
	border-width: 1px;
	/* box-shadow: inset 2px 2px 2px 0px #ffffff, inset -2px -2px 2px 0 #a6becf; */
	transition: all 0.2s ease;
	transform: translateY(0);
	cursor: pointer;
}

.secondary-button:hover {
	background-color: #ffffff12;
	color: #ffffff;
	border-radius: 8px;
	border-style: solid;
	/* border-color: #c8c8c8; */
	border-width: 1px;
	/* box-shadow: inset 2px 2px 2px 0px #ffffff, inset -2px -2px 2px 0 #a6becf; */
}

.secondary-button:active {
	transform: translateY(2px);
	box-shadow: inset 1px 1px 2px 0px #a6becf, inset -1px -1px 2px 0 #a6becf;
	transition: all 0.1s ease;
}

@media screen and (max-width: 426px) {
	.secondary-button {
		margin-top: 0;
	}
}

.index-page-title {
	font-weight: 600;
	letter-spacing: -0.003em;
	line-height: 72px;
}

@media screen and (max-width: 767.98px) {
	.index-page-title {
		padding-top: 0px;
	}
}

.index-page-title-link {
	text-decoration: none;
	font-weight: 400;
	color: #3327ec;
	cursor: pointer;
}

.index-page-title-link:hover {
	text-decoration: underline;
}

/* project navigation button */
.project-navigation-section {
	width: 100%;
	margin: 0 auto;
	padding-left: 16px;
	padding-right: 16px;
}

.project-navigation-section {
	text-align: center;
	margin-bottom: 50px;
}

.project-navigation-section h2 {
	margin: 20px auto;
}

.project-navigation-section>.row,
.container-fluid-project>.row {
	margin-left: 0;
	margin-right: 0;
}

.previous-project {
	margin-left: 120px;
}

.next-project {
	margin-right: 120px;
}


.project-navigation-button {

	/*height: 100%;
		display: inline-block;*/

}

.project-navigation-button-image {
	width: 94px;
	height: 94px;
	margin-top: 60%;
	display: inline-block;
	vertical-align: middle;
}

.tag {
	display: inline-block;
	padding: 8px 16px;
	-webkit-box-flex: 0;
	-webkit-flex: 0 auto;
	-ms-flex: 0 auto;
	flex: 0 auto;
	border-radius: 20px;
	border-style: solid;
	border-width: 1px;
	border-color: #ffffff1a;
	background-color: #ffffff0f;
	margin-bottom: 16px;
}

.responsibilities-tags {
	line-height: 10px;
	font-size: 0.8rem;
	margin: 4px 0;
	color: #b2b2b2b5;
}

#responsibilities-w-richtext {
	margin-top: 14px;
}

.templateux-hero .project-header-title {
	/* font-size: 50px; */
	margin-bottom: 16px;
}

.other-project-title {
	font-size: 30px;
	padding-left: 20px;
	padding-right: 20px;
}

.full-screen-width-content-section {
	padding: 20px 20px;
}

.center {
	height: 100vh;
	display: flex;
	justify-content: center;
	align-items: center;
	background: #000;

}

.media-body {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
}


.logo-carousel {
	display: flex;
	width: 100%;
	height: 100%;
	max-width: 100%;
	max-height: 100%;
	place-items: center;
	margin: 0;
	padding: 40px;
	overflow: hidden;
}

.logo-list {
	display: flex;
	width: 100%;
	height: 100%;
	max-width: 100%;
	max-height: 100%;
	place-items: center;
	margin: 0;
	padding: 0;
	list-style-type: none;
	text-indent: none;
	gap: 64px;
	position: relative;
	flex-direction: row;
	will-change: transform;
	transform: translateX(0);
	/* Start position */
}

.logo-list li {
	flex-shrink: 0;
}

.logo-list img {
	width: auto;
	/* Adjust image size as needed */
	height: 100px;
	/* Adjust image height as needed */
}

.logo-carousel {
	display: flex;
	width: 100%;
	overflow: hidden;
}

.logo-list {
	display: flex;
	list-style-type: none;
	padding: 0;
	margin: 0;
	animation: scroll 10s linear infinite;
	/* Adjust animation duration as needed */
}

.logo-list li {
	margin-right: 64px;
	/* Adjust spacing between logos */
}

.logo-list li:last-child {
	margin-right: 0;
}

@keyframes scroll {
	0% {
		transform: translateX(0);
	}

	100% {
		transform: translateX(-100%);
	}
}

.logo-carousel::before {
	left: 0;
	background: linear-gradient(to left, rgba(0, 0, 0, 0), black);
}

.logo-carousel::after {
	right: 0;
	background: linear-gradient(to right, rgba(0, 0, 0, 0), black);
}

.logo-container-slide {
	display: flex;
	justify-content: center;
}

.logo-container {
	overflow: hidden;
}

.logo-container-slide {
	display: flex;
	animation: scroll 20s linear infinite;
}

@keyframes scroll {
	0% {
		transform: translateX(0);
	}

	100% {
		transform: translateX(-40%);
	}
}

/* Scale down logos for mobile */
@media (max-width: 768px) {
	.logo-container-slide img {
		transform: scale(0.75);
	}
}



/* .informational-container {
	background-color: #1b232ba3;
    border: 1px solid #dddddd1c;
    padding-top: 16px;
    padding-bottom: 16px;
    padding-left: 16px;
    padding-right: 16px;
    border-radius: 10px;
    Margin: 24px;
} */

.informational-container {
	background-color: #ffffff09;
	border: 0px solid #ffffff40;
	padding-top: 16px;
	padding-bottom: 0px;
	padding-left: 8px;
	padding-right: 8px;
	border-radius: 10px;
	Margin: 24px;
	/* box-shadow: 0px 2px 18px rgb(68 68 68); */
}


.warning-container {
	background-color: #ff2a000d;
	/* Background color */
	border: 1px solid #ff1406cf;
	/* Border color and width */
	padding-top: 16px;
	padding-bottom: 16px;
	padding-left: 16px;
	padding-right: 16px;
	/* Space between content and border */
	border-radius: 30px;
	Margin: 24px;
}

.quote-container {
	background: #ffffff05;
	border: 1px solid #00fffb;
	padding-top: 16px;
	padding-bottom: 16px;
	padding-left: 16px;
	padding-right: 16px;
	border-radius: 10px;
	margin-top: 100px;
	margin-bottom: 100px;
	border-width: 1px;
}


.sucess-container {
	background-color: #00ff090d;
	/* Background color */
	border: 1px solid #4cff0057;
	/* Border color and width */
	padding-top: 16px;
	padding-bottom: 16px;
	padding-left: 16px;
	padding-right: 16px;
	/* Space between content and border */
	border-radius: 30px;
	Margin: 24px;
}

.confidential-container {
	position: relative;
	border: 4px solid;
	border-radius: 8px;
	border-image: repeating-linear-gradient(to right, #a2682a 0%, #be8c3c 8%, #be8c3c 18%, #d3b15f 27%, #faf0a0 35%, #ffffc2 40%, #faf0a0 50%, #d3b15f 58%, #be8c3c 67%, #b17b32 77%, #bb8332 83%, #d4a245 88%, #e1b453 93%, #a4692a 100%) 1;
	border-radius: 8px;
	padding-top: 110px;
	padding-left: 32px;
	padding-right: 32px;
	padding-bottom: 16px;
	text-align: center;
	margin-top: 40px;
	margin-bottom: 80px;
	background-color: rgb(4 11 26 / 45%);
	backdrop-filter: blur(10px);
	box-shadow: 0px 4px 30px rgb(0, 0, 0);
}

.confidential-logo {
	position: absolute;
	top: -25px;
	/* Adjust based on the height of the logo */
	left: 50%;
	transform: translateX(-50%);
	/* background-color: #edf5f9; */
	/* Match the background color of the container */
}

.confidential-content {
	margin-top: 40px;
	/* Adjust spacing between the top border and the text */
}

.confidential-content p {
	margin: 0;
	/* Remove default paragraph margins */
}


.about-page-toggle {
	position: relative;
	/* border: 1px solid #ffffff2a; */
	border-radius: 10px;
	padding-top: 8px;
	padding-left: 16px;
	padding-right: 24px;
	padding-bottom: 0px;
	text-align: left;
	margin-top: 8px;
	margin-bottom: -1px;
	background-color: rgb(148 148 148 / 9%);
	backdrop-filter: blur(10px);
	border-radius: 100px;
	width: fit-content;
}

@media (max-width: 768px) {
	.about-page-toggle {
		display: none;
	}
}

.text-fill {
	background: linear-gradient(to right bottom, rgb(255, 255, 255) 30%, rgba(255, 255, 255, .5));
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
	color: unset;
}


/* START OF HIGHLIGHTING TEXT */

::selection {
	background: #b6b6f70f !important;
	color: #90ffb0 !important;
}

::-moz-selection {
	background: #b6b6f70f !important;
	color: #90ffb0 !important;
}

.highlight {
	background-color: #b6b6f70f !important;
	/* Light green background */
	color: #90ffb0 !important;
	/* Green text */
}

/* END OF HIGHLIGHTING TEXT */


.layout_overlay {
	z-index: 2;
	height: 16rem;
	/* background-image: linear-gradient(to top, #ffeef2 10%, rgba(8, 12, 17, 0) 100%); */
	position: absolute;
	top: auto;
	bottom: 3%;
	left: 0%;
	right: 0%;
}


.testimony-layout {
	display: flex;
	align-items: center;
	margin-bottom: 32px;
	/* Align items vertically */
}

.testimony-layout img {
	width: 50px;
	height: auto;
	margin-right: 20px;
	border-radius: 60px;
}

.testimony-texts-person-job {
	color: #9f9f9f;
	/* Set default text color */
	margin: 0px 0;
	font-size: 1rem;
	/* Set vertical spacing between person and job */
}

.testimony-texts-person-job p {
	margin: 2px 0;
	/* Set vertical spacing between person and job */
	font-weight: 200;
	/* Set default font weight */
	line-height: 20px;
}

.testimony-texts-person-job .person-name {
	color: #ffffff;
	/* Set color of person name */
	font-weight: 600;
	/* Set font weight of person name */
	font-size: 1.2rem;
	line-height: 24px;
}

.testimony-texts-person-job .job-position {
	/* Default styles applied */
}




/* Start logo container masking the ends CSS */




.logo-container {
	--blur-seed: 15px;
	mask-image: linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgb(0, 0, 0) 12.5%, rgb(0, 0, 0) 87.5%, rgba(0, 0, 0, 0) 100%);
	overflow: hidden;
	position: relative;
	height: 100px;
	margin-bottom: 0px;
	opacity: 60%;
}

.logo-container-slide {
	display: flex;
	animation: scroll 20s linear infinite;
	/* Default animation for desktop */
}

.logo-container-slide img {
	user-select: none;
	pointer-events: none;
}

@keyframes scroll {
	from {
		transform: translateX(0);
	}

	to {
		transform: translateX(-40%);
	}
}

@media (max-width: 768px) {
	.logo-container {
		height: 80px;
		/* Adjust as needed for mobile */
	}

	.logo-container-slide {
		animation: scroll-mobile 20s linear infinite;
		/* Faster animation for mobile */
	}

	@keyframes scroll-mobile {
		from {
			transform: translateX(0);
		}

		to {
			transform: translateX(-100%);
		}
	}
}






/* End the logo container masking the ends CSS */


/* Start mouse clicker ripple effect */
.clicker {
	width: 100px;
	height: 100px;
	margin-left: -30px;
	margin-top: -30px;
	background: #ffffff50;
	border-radius: 100%;
	position: absolute;
	transform: scale(0);
	opacity: .5;
	-ms-filter: none;
	filter: none;
	z-index: 9999;
	pointer-events: none
}

.darkMode .clicker {
	background: #6DEAFC;
}

.clicker.is-active {
	opacity: 0;
	-ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=0)';
	filter: alpha(opacity=0);
	transition: opacity 900ms ease, transform 900ms ease;
	transform: scale(1)
}

@media (max-width: 767px) {

	.clicker,
	.clicker.is-active {
		display: none;
	}
}

/* End mouse clicker ripple effect */


/* START scroll to top */


.blok:nth-of-type(odd) {
	background-color: blue;
}

.blok:nth-of-type(even) {
	background-color: blue;
}

@-webkit-keyframes border-transform {

	0%,
	100% {
		border-radius: 63% 37% 54% 46% / 55% 48% 52% 45%;
	}

	14% {
		border-radius: 40% 60% 54% 46% / 49% 60% 40% 51%;
	}

	28% {
		border-radius: 54% 46% 38% 62% / 49% 70% 30% 51%;
	}

	42% {
		border-radius: 61% 39% 55% 45% / 61% 38% 62% 39%;
	}

	56% {
		border-radius: 61% 39% 67% 33% / 70% 50% 50% 30%;
	}

	70% {
		border-radius: 50% 50% 34% 66% / 56% 68% 32% 44%;
	}

	84% {
		border-radius: 46% 54% 50% 50% / 35% 61% 39% 65%;
	}
}

body {
	height: 3000px;
	/* Set the height of the body to simulate scrolling */
}

@-webkit-keyframes border-transform {
	0% {
		stroke: rgba(255, 255, 255, 0);
	}

	100% {
		stroke: #00ddff;
	}
}

body {
	height: auto;
	/* Set the height of the body to simulate scrolling */
}

.progress-wrap {
	position: fixed;
	right: 30px;
	bottom: 30px;
	height: 46px;
	width: 46px;
	cursor: pointer;
	display: block;
	border-radius: 50px;
	box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.1);
	z-index: 10000;
	opacity: 0;
	visibility: hidden;
	transform: translateY(15px);
	transition: all 200ms linear;
}

.progress-wrap.active-progress {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.progress-wrap::after,
.progress-wrap::before {
	position: absolute;
	content: '';
	background: url('images/scroll-arrow-up.svg') no-repeat;
	background-size: cover;
	width: 24px;
	height: 24px;
	top: 11px;
	left: 11px;
	z-index: 1;
	transition: all 200ms linear;
}

.progress-wrap:hover::after {
	opacity: 0;
}

.progress-wrap::before {
	z-index: 2;
	opacity: 0;
}

.progress-wrap:hover::before {
	opacity: 1;
}

.progress-wrap svg path {
	fill: none;
}

.progress-wrap svg.progress-circle path {
	stroke-width: 4;
	box-sizing: border-box;
	animation: border-transform 6s linear forwards;
	/* Adjust duration as needed */
}

.progress-circle {
	stroke-dasharray: 308;
	/* 308 is the circumference of a circle with radius 49 */
	stroke-dashoffset: 308;
	/* Offset to show empty circle initially */
	transition: stroke-dashoffset 0.3s linear;
	/* Smooth transition */
}

.progress-circle.fill {
	stroke-dashoffset: 0;
	/* Fill up the circle */
}

@media (max-width: 768px) {
	.progress-wrap {
		display: none;
	}
}



/* END scroll to top */



/* START custom counter */

.custom-counter {
	margin: 0;
	padding: 0;
	list-style-type: none;
}

.custom-counter li {
	counter-increment: step-counter;
	margin-bottom: 10px;
	color: #bebebe;
}

.custom-counter li::before {
	content: counter(step-counter);
	margin-right: 16px;
	font-size: 100%;
	background-color: #ffffff21;
	color: #ffffff;
	font-weight: 400;
	padding: 3px 6px;
	border-radius: 8px;
	border-width: 1px;
	border-color: #ffffff36;
	border-style: solid;
}

/* END custom counter */



.span-line {
	background-image: url(../images/line.svg);
	background-position: 50% 100%;
	background-repeat: no-repeat;
	background-size: contain;
	margin-bottom: -1rem;
	padding-bottom: 1rem;
	display: inline-block;
}

/* START context of the case study */

.context-container {
	display: flex;
	justify-content: flex-start;
	align-items: flex-start;
	gap: 24px;
}

.context-container .left,
.context-container .middle,
context-container .right {
	flex: 1;
	text-align: left;
}

@media (max-width: 600px) {
	.context-container {
		flex-direction: column;
		align-items: flex-start;
	}

	.context-container .left,
	.context-container .middle,
	.context-container .right {
		width: 100%;
		margin-bottom: 16px;
	}
}

/* END context of the case study */

/* START bouncy scroll down on about page */


:after,
:before {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}


.scroll-down {
	opacity: 1;
	-webkit-transition: all .5s ease-in 3s;
	transition: all .5s ease-in 3s;
}

.scroll-down {
	position: absolute;
	bottom: 30px;
	left: 50%;
	margin-left: -16px;
	display: block;
	width: 40px;
	height: 40px;
	border: 1px solid #ffffff1d;
	background-color: rgb(148 148 148 / 6%);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	background-size: 14px auto;
	border-radius: 50%;
	z-index: 2;
	-webkit-animation: bounce 2s infinite 2s;
	animation: bounce 2s infinite 2s;
	-webkit-transition: all .2s ease-in;
	transition: all .2s ease-in;
	transform: scale(1)
}

.scroll-down:before {
	position: absolute;
	top: calc(50% - 4px);
	left: calc(50% - 4px);
	transform: rotate(-45deg);
	display: block;
	width: 8px;
	height: 8px;
	content: "";
	border: 2px solid rgba(255, 255, 255, 0.477);
	border-width: 0px 0 2px 2px;
}

@keyframes bounce {

	0%,
	100%,
	20%,
	50%,
	80% {
		-webkit-transform: translateY(0);
		-ms-transform: translateY(0);
		transform: translateY(0);
	}

	40% {
		-webkit-transform: translateY(-10px);
		-ms-transform: translateY(-10px);
		transform: translateY(-10px);
	}

	60% {
		-webkit-transform: translateY(-5px);
		-ms-transform: translateY(-5px);
		transform: translateY(-5px);
	}
}


/* END bouncy scroll down */

.description {
	white-space: wrap;
}

.work-detail .col-md-4 {
	flex-grow: 1;
	flex-shrink: 1;
	min-width: 0;
}


.mobile-friendly {
	margin-top: 3rem;
}

/* START this solved the stupid hambuger issue where it did not go to the edge */
@media (max-width: 575px) {
	.text-right {
		/* flex: 0 0 41%; */
		max-width: 100%;
	}

	/* END this solved the stupid hambuger issue where it did not go to the edge */




	#skillset .media.templateux-media {
		display: flex;
		flex-direction: column;
	}




	/* START this is for the hidden menu options */

	/* Divider styling */
	.divider {
		border-top: 1px solid rgba(255, 255, 255, 0);
		margin: 10px 0;
		/* Adjust margin to add space above and below the divider */
		padding-top: 5px;
		padding-bottom: 5px;
		margin-right: 50px;
	}

	/* Mobile only items styling */
	.mobile-only {
		display: none;
		padding: 10px 0;
		/* Adjust padding for mobile-only items */
	}

	.mobile-only a {
		display: flex;
		align-items: center;
		text-decoration: none;
		color: inherit;
		/* Inherit text color */
	}


	.mobile-only img {
		margin-right: 10px;
		/* Space between icon and text */
		width: 70px;
		height: 70px;
	}

	.menu-description {
		font-size: 0.875em;
		/* Smaller font for descriptions */
		color: #757575;
		/* Light grey color for descriptions */
		padding-left: 0px;
		/* Align descriptions with text and icon */
		margin-top: -10px;
		/* Adjust to align description with the text above */
	}

	@media (max-width: 768px) {
		.mobile-only {
			display: block;
		}
	}

	.templateux-menu {
		overflow-y: auto;
		/* Enable vertical scrolling */
		max-height: 100vh;
		/* Ensure the menu doesn't exceed the viewport height */
	}


	body.menu-open {
		overflow: hidden;
	}

	.menu-spacer {
		height: 20px;
		/* Adjust as needed */
	}

	@media (min-width: 769px) {
		.mobile-only {
			display: none;
			/* Hide mobile-only items on desktop */
		}
	}

	/* END this is for the hidden menu options */


	/* START don't allow users to drag images to their desktop */

	img {
		pointer-events: none;
		user-drag: none;
		-webkit-user-drag: none;
	}

	/* END don't allow users to drag images to their desktop */

}

/* START tooltip */

.tooltip {
	position: relative;
	display: inline-block;
	border-bottom: 1px dotted rgba(255, 255, 255, 0);
	opacity: 100%;
}

.tooltip .tooltiptext {
	visibility: visible;
	width: auto;
	background-color: #ffffff6e;
	color: #000;
	text-align: center;
	border-radius: 6px;
	padding: 10px 10px;
	position: absolute;
	z-index: 1;
	bottom: 100%;
	left: 50%;
	margin-left: -270px;
	margin-bottom: 12px;
	border-radius: 4px;
	border-width: 1px;
	border-style: solid;
	border-color: #ffffff;
	opacity: 0;
	transition: opacity 1s;
}

.tooltip:hover .tooltiptext {
	opacity: 1;
}

/* END tooltip */
/* END tooltip */

/* Add spacing for the text column */
.col-md-4.order-sm-12 {
	padding-left: 24px;
	/* Add padding to create space between image and text */
}

@media (max-width: 767px) {
	.col-md-4.order-sm-12 {
		padding-left: 16px;
		padding-right: 16px;
		margin-top: 24px;
		/* Add top margin for mobile */
	}
}

/* Adjust the case studies container */
.case-studies {
	overflow: hidden;
	/* Prevent horizontal scrolling */
	padding: 0px;
}

/* Ensure proper row spacing */
.row.align-items-center {
	margin: 0 -12px;
	/* Negative margin to counter padding */
}

.row.align-items-center>[class*='col-'] {
	padding: 0 24px;
	/* Add padding to columns */
}

/* Bottom blur effect */
.bottom-blur {
	position: relative;
	overflow: visible;
}

.bottom-blur::after {
	display: none;
}

@media (max-width: 767px) {
	.bottom-blur::after {
		height: 150px;
		background: linear-gradient(to bottom,
				rgba(244, 250, 255, 0) 0%,
				rgba(244, 250, 255, 0) 30%,
				rgba(244, 250, 255, 0.1) 50%,
				rgba(244, 250, 255, 0.3) 65%,
				rgba(244, 250, 255, 0.7) 80%,
				rgba(244, 250, 255, 0.95) 100%);
	}
}

.scroll-to-top {
	position: fixed;
	bottom: 20px;
	right: 20px;
	width: 50px;
	height: 50px;
	border-radius: 50%;
	background: rgb(255 255 255 / 2%);
	backdrop-filter: blur(5px);
	-webkit-backdrop-filter: blur(5px);
	border: 1px solid rgba(131, 131, 131, 0);
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	opacity: 0;
	visibility: hidden;
	transition: all 0.3s ease;
	z-index: 1000;
}

.scroll-to-top.visible {
	opacity: 1;
	visibility: visible;
}

.scroll-to-top svg {
	color: #ffffffc0;
	transition: transform 0.3s ease;
}

.scroll-to-top:hover {
	background: rgb(75 75 75 / 22%);
}

.scroll-to-top:hover svg {
	transform: translateY(-2px);
}

@media (max-width: 768px) {
	.scroll-to-top {
		width: 50px;
		height: 50px;
		bottom: 15px;
		right: 15px;
	}
}

.project-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 16px 0;
	align-items: flex-start;
}

.project-tag {
	display: inline-flex;
	align-items: center;
	font-size: 12px;
	padding: 4px 12px;
	/* border: 1px solid #67676775; */
	border-radius: 4px;
	color: #bebebe;
	background: #ffffff0f;
	white-space: nowrap;
	margin: 0;
}



.intro-image img,
.intro-image video,
.intro-image .video {
	border-radius: 0px !important;
	overflow: hidden;
	padding-left: 0 !important;
}

/* Also apply to other case study videos and images */
.text-center video,
.text-center .video,
.text-center img.img-fluid {
	border-radius: 20px !important;
	overflow: hidden;
	padding-left: 0 !important;
}

/* Ensure the container doesn't clip the border radius */
.text-center.mb-5,
.intro-image {
	overflow: hidden;
	border-radius: 20px !important;
	padding-left: 0 !important;
}

/* Remove left padding from case study containers */
.case-studies .intro-image {
	padding-left: 0 !important;
}

.case-studies .col-md-8 {
	padding-left: 0 !important;
}

@media (max-width: 643px) {
	.case-studies h1 {
		padding-top: 0;
		margin-top: 0;
	}
}

@media (max-width: 989px) {
	.case-studies .row {
		flex-direction: column;
	}

	.case-studies .col-md-8,
	.case-studies .col-md-4 {
		width: 100%;
		max-width: 100%;
		flex: 0 0 100%;
	}

	.case-studies .intro-text-container {
		padding-right: 0;
		margin-top: 24px;
	}

	.intro-image {
		width: 100%;
		transform: none;
		margin: 0;
		padding: 0;
	}
}

.mobile-menu {
	position: fixed;
	top: 0;
	left: -85%;
	width: 85%;
	height: 100vh;
	/* background-color: #262c35b3; */
	backdrop-filter: blur(16px);
	-webkit-backdrop-filter: blur(10px);
	z-index: 99999;
	transform: translateX(0);
	transition: transform 0.3s cubic-bezier(0.2, 0, 0, 1), visibility 0.3s;
	visibility: hidden;
	padding: 0;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	box-shadow: 2px 0 8px rgba(0, 0, 0, 0.1);
	border-top-right-radius: 10px;
	border-bottom-right-radius: 10px;
}

.mobile-menu.is-active {
	transform: translateX(100%);
	/* Changed to positive value to slide from left */
	visibility: visible;
}

body.mobile-menu-open {
	position: fixed;
	width: 100%;
	overflow: hidden;
	padding-right: 15px;
}

body.mobile-menu-open .templateux-navbar,
body.mobile-menu-open main,
body.mobile-menu-open footer {
	pointer-events: none;
	user-select: none;
	filter: blur(3px);
	transition: filter 0.3s ease;
	transform: translateX(0);
}

.mobile-menu__header {
	position: sticky;
	top: 0;
	padding: 16px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	border-bottom: 1px solid rgba(0, 0, 0, 0.08);
	z-index: 1;
	transition: background-color 0.2s ease;
}

.mobile-menu__header .site-logo a {
	color: #ffffff;
	font-weight: 500;
}

/* Ensure the text stays black even when menu is open */
.menu-open .mobile-menu__header .site-logo a {
	color: #172730;
}

.mobile-menu__content {
	padding: 8px 0;
}

.mobile-menu__nav {
	margin: 0;
	padding: 0;
	list-style: none;
}

.mobile-menu__link {
	display: flex;
	align-items: center;
	font-size: 16px;
	color: #ffffff;
	padding: 12px 16px;
	text-decoration: none;
	transition: all 0.2s ease;
	position: relative;
	overflow: hidden;
}

.mobile-menu__link:hover,
.mobile-menu__link:focus {
	background-color: rgb(255 255 255 / 9%);
	color: #ffffff;
	text-decoration: none;
}

/* Add hover effect for project items */
.mobile-menu__project {
	display: flex;
	align-items: center;
	padding: 12px 16px;
	transition: all 0.2s ease;
	cursor: pointer;
	text-decoration: none;
}

.mobile-menu__project:hover {
	background-color: rgb(255 255 255 / 9%);
}

.mobile-menu__project:hover .mobile-menu__project-title {
	color: #ffffff;
	/* Slack's link hover color */
}

/* Smooth transition for text color change */
.mobile-menu__project-title {
	font-weight: 500;
	font-size: 15px;
	color: #1d1c1d;
	margin-bottom: 2px;
	transition: color 0.2s ease;
}

/* Add subtle scale effect on project icons on hover */
.mobile-menu__project:hover .mobile-menu__project-icon {
	transform: scale(1.02);
}

.mobile-menu__project-icon {
	width: 55px;
	height: 55px;
	margin-right: 12px;
	border-radius: 4px;
	transition: transform 0.2s ease;
}

.mobile-menu__divider {
	height: 1px;
	background-color: rgba(0, 0, 0, 0.08);
	margin: 8px 0;
}

.mobile-menu__project {
	display: flex;
	align-items: center;
	padding: 12px 16px;
}

.mobile-menu__project-icon {
	width: 55px;
	/* Changed from 40px to 55px */
	height: 55px;
	/* Changed from 40px to 55px */
	margin-right: 12px;
	border-radius: 4px;
}

.mobile-menu__project-info {
	flex: 1;
}

.mobile-menu__project-title {
	font-weight: 600;
	font-size: 15px;
	color: #ffffff;
	margin-bottom: 2px;
	/* Changed from default to 2px */
}

.mobile-menu__project-desc {
	font-size: 14px;
	color: #bebebe;
	margin-top: 0;
	/* Ensure no extra space from top */
	line-height: 1.3;
	/* Add this to keep text compact */
}

.mobile-menu__overlay {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgb(0 0 0 / 70%);
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.3s ease, visibility 0.3s ease;
	z-index: 99998;
	backdrop-filter: blur(4px);
	-webkit-backdrop-filter: blur(4px);
}

.mobile-menu__overlay.is-active {
	opacity: 1;
	visibility: visible;
}

/* Prevent body scroll when menu is open */
body.mobile-menu-open {
	position: fixed;
	width: 100%;
	overflow: hidden;
}

/* Add stagger animation for menu items */
.mobile-menu__link {
	opacity: 0;
	transform: translateX(-10px);
	/* Keep this the same as items should appear from left */
	transition: opacity 0.3s ease, transform 0.3s ease;
}

.is-active .mobile-menu__link {
	opacity: 1;
	transform: translateX(0);
}

.mobile-menu__link:nth-child(1) {
	transition-delay: 0.05s;
}

.mobile-menu__link:nth-child(2) {
	transition-delay: 0.1s;
}

.mobile-menu__link:nth-child(3) {
	transition-delay: 0.15s;
}

.mobile-menu__link:nth-child(4) {
	transition-delay: 0.2s;
}

.mobile-menu__link:nth-child(5) {
	transition-delay: 0.25s;
}

.mobile-menu__link:nth-child(6) {
	transition-delay: 0.3s;
}

.mobile-menu__link:nth-child(7) {
	transition-delay: 0.35s;
}

.mobile-menu__link:nth-child(8) {
	transition-delay: 0.4s;
}

/* Make background non-interactive when menu is open */
body.mobile-menu-open .templateux-navbar,
body.mobile-menu-open main,
body.mobile-menu-open footer {
	pointer-events: none;
	user-select: none;
	filter: blur(3px);
	transition: filter 0.3s ease;
}

/* Remove old conflicting styles */
@media (max-width: 767.98px) {
	.templateux-navbar .templateux-menu {
		display: none;
	}
}

/* Hide desktop menu on mobile */
@media (max-width: 767.98px) {
	.templateux-menu {
		display: none !important;
	}
}

/* Show desktop menu on larger screens */
@media (min-width: 768px) {

	.mobile-menu,
	.mobile-menu__overlay {
		display: none;
	}
}

html {
	scroll-behavior: smooth;
	overflow-x: hidden;
}

@media (max-width: 573px) {

	/* Base global padding for all main containers */
	.container:not(.portfolio-title),
	.container-fluid,
	.container-fluid-navbar,
	.container-case-study,
	.templateux-section,
	.testimony,
	.templateux-portfolio-overlap,
	.work-detail,
	.text-component,
	.mobile-friendly,
	.full-screen-width-content-section,
	#work-together,
	.templateux-footer,
	.informational-container,
	.warning-container,
	.quote-container,
	.sucess-container,
	.confidential-container {
		padding-left: 16px !important;
		padding-right: 16px !important;
		margin-left: 0 !important;
		margin-right: 0 !important;
		width: 100% !important;
	}

	/* Remove padding from nested containers to prevent double padding */
	.container .container,
	.container-fluid .container,
	.container-case-study .container,
	.templateux-section .container,
	.testimony .container,
	[data-aos="fade-up"].container,
	.container>.container,
	.templateux-portfolio-overlap .container,
	.work-detail .container,
	.text-component .container {
		padding-left: 0 !important;
		padding-right: 0 !important;
		margin-left: 0 !important;
		margin-right: 0 !important;
	}

	/* Portfolio title specific override */
	.portfolio-title {
		padding: 0 !important;
		margin: 0 !important;
		width: 100% !important;
	}

	/* Reset row margins */
	.row {
		margin-left: 0 !important;
		margin-right: 0 !important;
	}

	/* Reset column padding */
	[class*="col-"] {
		padding-left: 0 !important;
		padding-right: 0 !important;
	}

	/* Ensure text components don't add extra padding */
	.text-component {
		padding-left: 0 !important;
		padding-right: 0 !important;
	}

	/* Handle work detail section */
	.work-detail {
		padding-left: 16px !important;
		padding-right: 16px !important;
	}

	/* Ensure navigation has consistent padding */
	.templateux-navbar {
		padding-left: 16px !important;
		padding-right: 16px !important;
	}

	/* Case studies specific adjustments */
	.case-studies {
		padding: 16px !important;
	}

	.case-studies .container-case-study {
		padding-left: 0 !important;
		padding-right: 0 !important;
	}

	/* Footer adjustments */
	.templateux-footer {
		padding-left: 16px !important;
		padding-right: 16px !important;
	}

	/* Special containers adjustments */
	.informational-container,
	.warning-container,
	.quote-container,
	.sucess-container,
	.confidential-container {
		padding-left: 16px !important;
		padding-right: 16px !important;
		margin-left: 0 !important;
		margin-right: 0 !important;
		width: 100% !important;
	}
}

/* Back button styling */
.back-button {
	position: fixed;
	bottom: 20px;
	right: 70px;
	height: 40px;
	padding: 0 20px;
	border-radius: 20px;
	background: rgba(255, 255, 255, 0.2);
	backdrop-filter: blur(5px);
	-webkit-backdrop-filter: blur(5px);
	border: 1px solid rgba(255, 255, 255, 0.8);
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: all 0.3s ease;
	z-index: 1000;
	text-decoration: none;
	color: #000;
}

.back-button svg {
	margin-right: 8px;
	transition: transform 0.3s ease;
}

.back-button:hover {
	background: rgba(255, 255, 255, 0.3);
	color: #000;
}

.back-button:hover svg {
	transform: translateX(-2px);
}

.back-button span {
	font-size: 14px;
	font-weight: 500;
}

@media (max-width: 768px) {
	.back-button {
		height: 35px;
		padding: 0 16px;
		right: 60px;
		bottom: 15px;
	}

	.back-button span {
		font-size: 13px;
	}
}

.video-container {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px;
}

/* Desktop Video Styling */
.desktop-video-container {
	flex: 3;
	padding: 10px;
}

.desktop-video-frame {
	position: relative;
	display: inline-block;
	width: 100%;
	height: 0;
	padding-top: 63.8%;
	border-radius: 36px;
	background: #000;
	border-top: 6px solid #000;
	border-bottom: 6px solid #000;
	border-left: 6px solid #000;
	border-right: 2px solid #000;
	box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.4);
	overflow: visible;
	border-radius: 22px;
}

.desktop-video {
	position: absolute;
	top: 0;
	left: 0;
	width: auto;
	height: 100%;
	border-radius: 20px;
	background-color: #000;
	padding: 0;
	border: none;
	z-index: 2;
}

/* Mobile Video Styling */
.mobile-video-container {
	flex: 1;
	padding: 10px;
}

.mobile-video-frame {
	position: relative;
	display: inline-block;
	width: 251px;
	height: 524px;
	padding-top: 211.2%;
	border-radius: 36px;
	background: #000;
	border: 8px solid #000;
	box-shadow: 2px 10px 10px rgba(0, 0, 0, 0.3);
	padding: 16px;
	overflow: hidden;
}

.mobile-video {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border-radius: 20px;
	background-color: #000;
	padding: 0;
	border: none;
	z-index: 2;
}

/* Responsive Behavior */
@media (max-width: 768px) {

	.desktop-video-container,
	.mobile-video-container {
		flex: 0 0 100%;
		max-width: 100%;
	}
}

@media (max-width: 768px) {
	#mobile-video {
		display: block !important;
		/* Ensure the video is visible on mobile */
	}
}

@media (max-width: 768px) {
	img[media="(max-width: 768px)"] {
		display: block !important;
		/* Ensure the GIF/WebP is visible on mobile */
		width: 100%;
		/* Make it responsive */
		border-radius: 10px;
	}
}

/* start of image carousel */


.splide__slide img {
	width: 100%;
	height: auto;
	object-fit: cover;
}

/* End of image carousel */

/* Ensure the row uses Flexbox and aligns items in the center */
.templateux-navbar .row {
	display: flex;
	align-items: center;
	height: 100%;
	/* Ensure the row takes full height of the navbar */
}

/* Ensure the menu uses Flexbox and aligns items in the center */
.templateux-menu {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	height: 100%;
	/* Ensure the menu takes full height of the navbar */
}

/* Ensure the list items are aligned in the center */
.templateux-menu ul {
	display: flex;
	align-items: center;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Add some margin between the list items */
.templateux-menu li {
	margin-left: 20px;
}

.splide__arrow {
	background: none;
	border: none;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	transition: background-color 0.3s;
}

.splide__arrow:hover {
	background-color: rgb(255 255 255);
}

.splide__arrow svg {
	width: 20px;
	height: 20px;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.splide__arrow--prev {
	left: 10px;
}

.splide__arrow--next {
	right: 10px;
}

/* Add hover effect for navigation buttons */
.templateux-navbar .templateux-menu ul li a {
	position: relative;
	padding: 8px 20px;
	/* Add padding for better spacing */
	border-radius: 30px;
	/* Rounded corners */
	transition: background-color 0.3s ease;
	/* Smooth transition for background only */
	*/
}

.templateux-navbar .templateux-menu ul li a:hover {
	background: rgba(255, 255, 255, 0.1);


}

p {
	font-family: 'Arcadia Text', sans-serif;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	font-family: 'Arcadia Display', sans-serif;
	font-weight: 100;
}

/* Updated Image Carousel */
<section id="image-carousel" class="splide" aria-label="Beautiful Images"><div class="splide__track"><ul class="splide__list"><li class="splide__slide"><img src="./images/single-choice.png" class="img-fluid" loading="lazy" id="img-1"
style="pointer-events: none; -webkit-user-drag: none;"></li><li class="splide__slide"><img src="./images/single-choice-grid.png" class="img-fluid" loading="lazy" id="img-1"
style="pointer-events: none; -webkit-user-drag: none;"></li><li class="splide__slide"><img src="./images/allocation.png" class="img-fluid" loading="lazy" id="img-1"
style="pointer-events: none; -webkit-user-drag: none;"></li><li class="splide__slide"><img src="./images/nps.png" class="img-fluid" loading="lazy" id="img-1"
style="pointer-events: none; -webkit-user-drag: none;"></li><li class="splide__slide"><img src="./images/rank.png" class="img-fluid" loading="lazy" id="img-1"
style="pointer-events: none; -webkit-user-drag: none;"></li><li class="splide__slide"><img src="./images/diff.png" class="img-fluid" loading="lazy" id="img-1"

style="pointer-events: none; -webkit-user-drag: none;"></li></ul></div></section></section><script>document.addEventListener('DOMContentLoaded', function () {
		new Splide('#image-carousel', {
			type: 'loop', // Enable looping for smooth transitions
			pagination: true, // Enable pagination
			arrows: true, // Enable navigation arrows
			autoplay: true, // Enable autoplay
			interval: 3000, // Set autoplay interval to 3 seconds
			speed: 100, // Set transition speed to 100ms
			height: 'auto', // Set height to auto
		}).mount();
});

</script>a,
button,
.clickable,
.mobile-menu__link,
.templateux-menu ul li a {
	cursor: pointer;
}


@media (max-width: 985px) {
	.case-studies {
		padding: 16px;
		/* Match mobile padding */
	}

	.container-case-study {
		padding-left: 15px;
		padding-right: 15px;
	}

	.index-intro {
		padding-top: 20px;
		padding-bottom: 20px;
	}

	.intro-image {
		margin-bottom: 20px;
	}
}

.video-container {
	position: relative;
	width: 100%;
	overflow: hidden;
}

.video {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 10px;
}

.video-overlay {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(0, 0, 0, 0.3);
	opacity: 0;
	transition: opacity 0.3s ease;
	z-index: 2;
}

.video-container:hover .video-overlay {
	opacity: 1;
}

.play-button {
	width: 50px;
	height: 50px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.2);
	backdrop-filter: blur(5px);
	-webkit-backdrop-filter: blur(5px);
	border: 1px solid rgba(255, 255, 255, 0.8);
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: all 0.3s ease;
}

.play-button:hover {
	background: rgba(255, 255, 255, 0.3);
}

.play-button svg {
	color: #ffffffc0;
	transition: transform 0.3s ease;
}

.play-button:hover svg {
	transform: scale(1.1);
}

/* Ensure the container doesn't clip the border radius */
.project-navigation-section .container-fluid-project {
	overflow: hidden;
	/* Prevent blur from glowing outside the container */
	position: relative;
}

/* Style for the project hover effect */
.project-navigation-section .project {
	position: relative;
	overflow: hidden;
	/* Ensure everything stays within the container */
}

.project-navigation-section .project figure {
	margin: 0;
	position: relative;
	overflow: hidden;
	border-radius: 32px;
}

.project-navigation-section .project figure img {
	transition: transform 0.3s ease, filter 0.3s ease;
}

.project-navigation-section .project:hover figure img {
	transform: scale(1.1);
	/* Scale the image */
	filter: blur(12px);
	/* Apply blur effect */
	transition: 1.0s ease;
	/* Smooth transition */
}

/* Remove blur and white border from overlay */
.project-navigation-section .project-hover {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgb(0 0 0 / 81%);
	display: flex;
	align-items: center;
	justify-content: center;
	color: white;
	text-align: center;
	transition: opacity 0.3s ease;
	border: white;
	border-width: 10px;
	border-radius: 32px;
	transition: 1.5s ease;
	/* Smooth transition */
}

.project-navigation-section .project:hover .project-hover {
	opacity: 1;
	/* Ensure the overlay is visible on hover */
}

/* Updated overlay styling with a 1px white border */
.project-navigation-section .project-hover {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgb(22 31 38 / 94%);
	display: flex;
	align-items: center;
	justify-content: center;
	color: white;
	text-align: center;
	transition: opacity 0.3s ease;
	border: 1px solid rgb(255 255 255 / 40%);
	/* Add 1px white border */
	border-radius: 32px;
	/* Keep the rounded corners */
	transition: 1.5s ease;
	/* Smooth transition */
}

.project-navigation-section .project:hover .project-hover {
	opacity: 1;
	/* Ensure the overlay is visible on hover */
}

[data-header] {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	z-index: 9999;
	transition: transform 0.3s ease, opacity 0.3s ease;
}

[data-header].hidden {
	transform: translateY(-100%);
	opacity: 0;
}

header[data-header] {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	z-index: 1000;
	transition: transform 1s ease-in-out, opacity 1s ease-in-out;
	/* Slower transition */
}

header[data-header].hidden {
	transform: translateY(-100%);
	opacity: 0;
}


.tilt-wrapper {
	perspective: 1000px;
	display: inline-block;
}

.tilt {
	display: block;
	transform-style: preserve-3d;
	transform: rotateX(0deg) rotateY(0deg);
	transition: transform 0.2s ease;
	user-select: none;
	-webkit-user-drag: none;
	will-change: transform;
}

.scroll-to-top {
	position: fixed;
	bottom: 20px;
	right: -100px;
	/* Start off-screen */
	width: 50px;
	/* Fixed width for a circular button */
	height: 50px;
	/* Fixed height for a circular button */
	border-radius: 50%;
	/* Make it a circle */
	background: rgba(255, 255, 255, 0.114);
	backdrop-filter: blur(5px);
	-webkit-backdrop-filter: blur(5px);
	/* border: 1px solid rgba(131, 131, 131, 0.33); */
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	opacity: 0;
	visibility: hidden;
	transition: all 0.5s ease;
	/* Smooth transition */
	z-index: 1000;
	box-sizing: content-box;
	/* Prevents the button from expanding due to padding or borders */
}

.scroll-to-top.visible {
	right: 20px;
	/* Slide into view */
	opacity: 1;
	visibility: visible;
}

.scroll-to-top:hover {
	background: rgba(75, 75, 75, 0.22);
}

.scroll-to-top svg {
	color: #ffffffc0;
	transition: transform 0.3s ease;
}

.scroll-to-top:hover svg {
	transform: translateY(-2px);
}

@media (max-width: 768px) {
	.scroll-to-top {
		width: 50px;
		height: 50px;
		bottom: 15px;
		right: 15px;
	}
}

/* Add the new styles for go-back and scroll-to-top buttons */
.go-back,
.scroll-to-top {
	position: fixed;
	bottom: 20px;
	width: 40px;
	/* Fixed width for a circular button */
	height: 40px;
	/* Fixed height for a circular button */
	border-radius: 50%;
	/* Make it a circle */
	background: rgb(4 5 7 / 60%);
	/* Same background color */
	backdrop-filter: blur(5px);
	-webkit-backdrop-filter: blur(5px);
	border: 1px solid rgba(112, 112, 112, 0.427);
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	opacity: 0;
	visibility: hidden;
	transition: all 0.5s ease, left 0.5s ease;
	/* Ensure left is included for smooth transition */
	z-index: 1000;
}

.go-back {
	left: -100px;
	/* Start off-screen on the left */
}

.scroll-to-top {
	right: -100px;
	/* Start off-screen on the right */
}

.go-back.visible {
	left: 20px;
	/* Slide into view */
	opacity: 1;
	visibility: visible;
	border-radius: 100px;
	font-size: 14px;
	height: 45px;
}

.scroll-to-top.visible {
	right: 20px;
	/* Slide into view */
	opacity: 1;
	visibility: visible;
}

.go-back:hover,
.scroll-to-top:hover {
	/* background: rgba(255, 255, 255, 0.3); */
	/* Same hover color */
}

.go-back svg,
.scroll-to-top svg {
	color: #ffffffa6;
	transition: transform 0.3s ease;
	height: 16px;
	width: 16px;
}

.go-back:hover svg,
.scroll-to-top:hover svg {
	transform: translateY(-2px);
}

@media (max-width: 768px) {

	.go-back,
	.scroll-to-top {
		bottom: 15px;
		width: 50px;
		height: 50px;
	}

	.go-back.visible {
		left: 15px;
		/* Adjust for smaller screens */
	}

	.scroll-to-top.visible {
		right: 15px;
		/* Adjust for smaller screens */
	}
}

/* Initial state for the reveal animation */
.reveal {
	opacity: 0;
	transform: translateY(50px);
	filter: blur(10px);
	/* Add blur */
	transition:
		opacity 0.8s ease-out,
		transform 0.8s ease-out,
		filter 0.9s ease-out;
	/* Animate blur */
}

/* Active state when the element is in view */
.reveal.active {
	opacity: 1;
	transform: translateY(0);
	/* Move to original position */
	filter: blur(0);
	/* Remove blur */
}

/* Disable reveal blur effect for mobile devices */
@media (max-width: 768px) {
	.reveal {
		opacity: 1;
		transform: translateY(0);
		/* Ensure no animation */
		filter: none;
		/* Remove blur */
		transition: none;
		/* Disable animation */
	}
}

.go-back {
	backdrop-filter: blur(5px);
	-webkit-backdrop-filter: blur(5px);
	background: rgb(3 4 5 / 51%);
	/* Fallback */
}

@media (max-width: 768px) {
	.templateux-navbar {
		position: relative;
		/* Change from fixed to relative */
		top: auto;
		left: auto;
		width: 100%;
		z-index: auto;
		/* Remove high stacking context */
		background: none;
		/* Optional: Remove background if not needed */
		-webkit-backdrop-filter: none;
		/* Remove blur effect */
		transition: none;
		/* Disable transitions */
	}

	/* Remove padding from the body */
	body {
		padding-top: 0;
	}
}

/* Add hover effect for the parent container of case studies and glow */
.outer-div:hover {
	transform: scale(1.01);
	/* Scale the entire container, including the glow */
	transition: transform 0.5s ease;
	/* Smooth scaling over 0.5 seconds */
}

.outer-div {
	transition: transform 0.5s ease;
	/* Ensure smooth transition back to original size */
	will-change: transform;
	/* Optimize for performance */
}

/* Responsive styles for mobile */
@media (max-width: 768px) {

	/* Center the intro image on mobile */
	.templateux-hero .reveal {
		text-align: center;
	}

	/* Stack fun components vertically on very small screens */
	.fun-components-container {
		flex-direction: column !important;
		gap: 8px !important;
		align-items: center !important;
	}

	/* Adjust image size for better mobile experience */
	.templateux-hero .reveal img {
		max-width: 280px;
		width: 100%;
		height: auto;
	}
}

#img-1 {
	position: relative;
	z-index: 1;
	/* Ensure the image is above the glow */
	border-radius: 8px;
	/* Match the existing border-radius */
	overflow: hidden;
	/* Ensure the glow stays within the image bounds */
}

#img-1::before {
	content: '';
	position: absolute;
	width: 10%;
	/* Make the glow larger than the image */
	height: 10%;
	top: var(--mouse-y, 50%);
	left: var(--mouse-x, 50%);
	transform: translate(-50%, -50%);
	background: radial-gradient(circle, rgba(255, 255, 255, 0.3), transparent);
	z-index: -1;
	/* Place the glow behind the image */
	border-radius: 50%;
	/* Create a circular glow */
	filter: blur(20px);
	/* Add a blur effect for the glow */
	pointer-events: none;
	/* Prevent interaction with the pseudo-element */
	transition: transform 0.1s ease-out;
	/* Smooth movement */
}

h1 {
	margin-bottom: 16px;
}

p {
	font-size: 1.25rem;
	font-weight: 100;
	color: #a8afba;
}

/* Testimonials cannot be grabbed or selected */
.testimonials-section {
	user-select: none;
	-webkit-user-drag: none;
}


/* Testimonials grid layout */
.testimonials-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	/* Default: 3 cards per row */
	gap: 16px;
	overflow: hidden;
	margin-top: 50px;
	transition: transform 0.3s ease-in-out;
}

@media (max-width: 992px) {
	.testimonials-grid {
		grid-template-columns: repeat(2, 1fr);
		/* 2 cards per row for tablets */
	}
}

@media (max-width: 768px) {
	.testimonials-grid {
		grid-template-columns: repeat(1, 1fr);
		/* 1 card per row for mobile */
	}
}

/* Testimonial card styling */
.testimonial-card {
	/* background: linear-gradient(#101c23e0, #0e1721) padding-box, linear-gradient(to right, #ff6ec4, #7873f5, #E29A6A) border-box; */
	border: 1px solid transparent;
	padding: 24px;
	border-radius: 16px;
	/* box-shadow: -1px 1px 8px 2px rgba(0, 0, 0, 0.414); */
	height: auto;
	overflow: hidden;
	text-align: left;

}

/* Carousel controls */
.carousel-controls {
	display: flex;
	justify-content: center;
	gap: 16px;
	margin-top: 16px;
}

.carousel-button {
	background: rgba(255, 255, 255, 0.2);
	border: 1px solid rgba(255, 255, 255, 0.8);
	border-radius: 50%;
	width: 40px;
	height: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: all 0.3s ease;
}

.carousel-button:hover {
	background: rgba(255, 255, 255, 0.3);
}

.carousel-button svg {
	width: 20px;
	height: 20px;
	color: #ffffff;
}

.carousel-controls {
	margin-top: 60px;
	display: flex;
	justify-content: center;
	gap: 32px;
}

.testimonials-section {
	display: flex;
	flex-direction: column;
	align-items: center;
	left: 0;
}

.carousel-control-prev,
.carousel-control-next {
	position: absolute;
	top: 100%;
	/* Move below the carousel */
	left: 50%;
	transform: translateX(-50%);
	margin-top: 32px;
	/* spacing below the testimonial cards */
	display: flex;
	gap: 60px;
}

.carousel-control-prev {
	transform: translateX(-50%) translateX(-32px);
	/* Move left */
}

.carousel-control-next {
	transform: translateX(-50%) translateX(32px);
	/* Move right */
}

/* Style for the carousel controls */
.carousel-control-prev,
.carousel-control-next {
	position: absolute;
	bottom: -60px;
	/* Adjust position below the carousel */
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0);
	backdrop-filter: blur(5px);
	-webkit-backdrop-filter: blur(5px);
	border: 1px solid rgba(131, 131, 131, 0.33);
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: all 0.3s ease;
	z-index: 1000;
}

/* Add horizontal spacing between the controls */
.carousel-control-prev {
	margin-right: 0px;
}

.carousel-control-next {
	margin-left: 0px;
}

.carousel-control-prev:hover,
.carousel-control-next:hover {
	background: rgba(75, 75, 75, 0.22);
}

.carousel-control-prev-icon,
.carousel-control-next-icon {
	width: 20px;
	height: 20px;
	color: #ffffff00;
	transition: transform 0.3s ease;
}

.carousel-control-prev:hover .carousel-control-prev-icon,
.carousel-control-next:hover .carousel-control-next-icon {
	transform: translateY(-2px);
}

.carousel-control-prev-icon,
.carousel-control-next-icon {
	width: 24px;
	/* Adjust size as needed */
	height: 24px;
	transition: transform 0.3s ease;
}

.carousel-control-prev:hover .carousel-control-prev-icon,
.carousel-control-next:hover .carousel-control-next-icon {
	transform: scale(1.1);
	/* Slight zoom on hover */
}

.carousel-control-prev-icon,
.carousel-control-next-icon {
	display: none;
	/* Hide default Bootstrap icons */
}

.carousel-control-prev-icon,
.carousel-control-next-icon {
	display: block;
	/* Ensure the SVGs are displayed */
	width: 24px;
	/* Adjust size as needed */
	height: 24px;
	background: none;
	/* Remove any default background */
	content: none;
	/* Prevent Bootstrap from adding default icons */
}

.carousel-control-prev,
.carousel-control-next {
	/* background: #ffffff12; */
	border: 1px solid rgb(131 131 131 / 82%);
}

/* Add the disappearing effect to the carousel inner container */
.carousel-inner {
	position: relative;
	overflow: hidden;
	/* Ensure content stays within the container */
	/* mask-image: linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 5%, rgba(0, 0, 0, 1) 95%, rgba(0, 0, 0, 0) 100%);
	-webkit-mask-image: linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 5%, rgba(0, 0, 0, 1) 95%, rgba(0, 0, 0, 0) 100%);
	mask-size: 100% 100%;
	-webkit-mask-size: 100% 100%;
	mask-repeat: no-repeat;
	-webkit-mask-repeat: no-repeat;
	mask-position: 0 0;
	-webkit-mask-position: 0 0; */
	background: transparent;
	/* Ensure the background is transparent */
}

/* Optional: Add padding to ensure cards don't touch the edges */
.carousel-inner .testimonial-card {
	margin: 0 8px;
	/* Add spacing between cards */
}

.carousel-item {
	transition: transform 1.5s ease-in-out, opacity 1.5s ease-in-out;
	/* Adjust duration and easing */
}

/* Desktop layout (default) */
.testimonials-section .carousel-inner {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 16px;
}

/* Hide testimonial section and button controls on mobile */
@media (max-width: 768px) {
	.testimonials-section {
		display: none;
	}

	.carousel-control-prev,
	.carousel-control-next {
		display: none;
	}
}

/* Ensure the carousel is responsive on mobile */
@media (max-width: 768px) {
	.testimonials-section {
		display: block;
		/* Ensure the section is visible */
		padding: 20px;
		/* Add some padding for better spacing */
	}

	.carousel-inner {
		display: flex;
		flex-direction: column;
		/* Stack items vertically if needed */
	}

	.carousel-control-prev,
	.carousel-control-next {
		display: flex;
		/* Ensure controls are visible */
		width: 40px;
		/* Adjust size for mobile */
		height: 40px;
	}
}

/* This will add spacing between sections for better readability */

.content-block {
	margin-top: 32px;
}

@media (min-width: 768px) {
	.content-block {
		margin-top: 50px;
	}
}

/* Ensure headers use Manrope font on mobile */
@media (max-width: 768px) {

	h1,
	h2,
	h3,
	h4,
	h5,
	h6 {
		font-family: 'Manrope', -apple-system, BlinkMacSystemFont, sans-serif !important;
	}
}

/* Ensure the header is always visible on mobile */
@media (max-width: 768px) {
	header[data-header] {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		z-index: 1000;
		transform: translateY(0);
		opacity: 1;
		transition: none;
		/* Disable transitions for consistent visibility */
		background-color: rgb(24 30 38 / 64%);
		/* Optional: Add a background for better visibility */
		backdrop-filter: blur(10px);
		/* Optional: Add blur effect */
	}

	header[data-header].hidden {
		transform: translateY(0);
		/* Ensure it stays in place */
		opacity: 1;
		/* Ensure it remains visible */
	}
}

/* Adding height above the view other projects section */
.project-navigation-section {
	width: 100%;
	margin: 100px auto 50px auto;
	padding-left: 16px;
	padding-right: 16px;
	text-align: center;
}

.testimonial-card {
	/* background: linear-gradient(#101c23e0, #0e1721) padding-box, linear-gradient(to right, #ff6ec4, #7873f5, #E29A6A) border-box; */
	/* border: 1px solid rgba(255, 255, 255, 0.137); */
	padding: 24px;
	border-radius: 16px;
	/* box-shadow: -1px 1px 8px 2px rgba(0, 0, 0, 0.414); */
	height: 250px;
	overflow: hidden;
	text-align: left;
	margin: 8px;
}

.testimonial-card p {
	font-size: 14px;
	line-height: 1.5;
	color: #aaaaaa;
	margin-bottom: 16px;
}

.testimony-layout {
	display: flex;
	align-items: center;
	margin-top: 16px;
}

.testimonial-image {
	width: 50px;
	height: 50px;
	border-radius: 50%;
	margin-right: 16px;
}

.testimony-texts-person-job {
	color: #9f9f9f;
}

.testimony-texts-person-job .person-name {
	color: #ffffff;
	font-weight: 600;
	font-size: 1.0rem;
	margin: 0;
}

.testimony-texts-person-job .job-position {
	font-size: 0.8rem;
	margin: 0;
}


.special-shape-video {
	width: 100%;
	max-width: 510px;
	height: auto;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	border-radius: 50%;
	border: 4px solid #00cfff;
	/* Ensures a perfect circle */
	position: relative;
	margin-left: auto;
	margin-right: auto;
}

/* Responsive video scaling */
@media (max-width: 768px) {
	.special-shape-video {
		max-width: 280px;
		/* Scale with mobile image size */
	}
}

@media (max-width: 480px) {
	.special-shape-video {
		max-width: 240px;
		/* Further scale on very small screens */
	}
}

.special-shape-video video {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	border-radius: 50%;
	/* Ensures the video conforms to the circular shape */
}

/* Mobile-specific video rules to prevent fullscreen and hide controls */
@media (max-width: 768px) {
	.special-shape-video video {
		/* Prevent video controls from appearing on mobile */
		-webkit-media-controls: none;
		-webkit-media-controls-panel: none;
		-webkit-media-controls-play-button: none;
		-webkit-media-controls-start-playback-button: none;
		/* Ensure video stays contained within its parent */
		max-width: 100%;
		max-height: 100%;
		/* Prevent any interaction that might trigger fullscreen */
		pointer-events: none;
		-webkit-user-select: none;
		-moz-user-select: none;
		-ms-user-select: none;
		user-select: none;
		/* Ensure playsinline behavior is enforced */
		-webkit-playsinline: true;
		/* Additional containment */
		contain: layout style;
	}
}

@media (max-width: 768px) {
	#testimonials {
		display: none;
	}

	/* Center the intro image on mobile - only for main hero section, not case studies */
	.templateux-hero:not(.case-studies) .reveal {
		text-align: center;
	}

	/* Center intro-image.png vertically and horizontally - only for the image container */
	.templateux-hero:not(.case-studies) .col-md-6:first-child .reveal {
		display: flex;
		align-items: center;
		justify-content: center;
		min-height: 43vh;
	}

	/* Adjust image size for better mobile experience - only for main hero section */
	.templateux-hero:not(.case-studies) .reveal img {
		max-width: 210px;
		width: 100%;
		height: auto;
	}

	/* Ensure case studies remain left-aligned on mobile */
	.case-studies .reveal {
		text-align: left !important;
	}

	/* Stack fun components vertically on smaller screens */
	.fun-components-container {
		flex-direction: column !important;
		gap: 8px !important;
		align-items: flex-start !important;
		margin-top: 16px !important;
		justify-content: flex-start !important;
		width: 100% !important;
	}

	/* Ensure proper layout on mobile - only for main hero section */
	.templateux-hero:not(.case-studies) .container .row {
		justify-content: center;
	}

	.templateux-hero:not(.case-studies) .col-md-6 {
		max-width: 100%;
		flex: 0 0 100%;
	}

	/* Add vertical gap between image and text on mobile */
	.templateux-hero:not(.case-studies) .col-md-6:first-child {
		margin-bottom: -60px;
	}

	/* Set font size for intro description on mobile */
	.intro-description {
		font-size: 16px !important;
	}

	/* Scale down Vahid Motta title on mobile */
	.index-page-title {
		font-size: 1.5rem !important;
		margin-bottom: 2px !important;
	}

	/* Make special-shape-video responsive and scale with image */
	.special-shape-video {
		max-width: 210px;
		/* Additional mobile containment */
		position: relative;
		overflow: hidden;
		/* Prevent any fullscreen expansion */
		-webkit-transform: translateZ(0);
		transform: translateZ(0);
		/* Force containment */
		contain: layout style size;
	}
}

@media (max-width: 480px) {

	/* Further scale down for very small screens */
	.templateux-hero .reveal img {
		max-width: 170px;
	}

	.special-shape-video {
		max-width: 170px;
		/* Additional mobile containment */
		position: relative;
		overflow: hidden;
		/* Prevent any fullscreen expansion */
		-webkit-transform: translateZ(0);
		transform: translateZ(0);
		/* Force containment */
		contain: layout style size;
	}

	/* Adjust fun components for very small screens */
	.unique-about-page-toggle,
	.unique-audio-player {
		padding: 8px 16px;
		font-size: 0.9rem;
		width: 100% !important;
		justify-content: flex-start !important;
		height: auto;
		min-height: 160px;
		/* Quadruple the typical component height */
	}

	/* Make sure fun components text is readable on mobile - ensure both texts are exactly the same size */
	.unique-about-page-toggle p {
		margin-bottom: 8px;
	}

	.unique-audio-player p {
		margin-bottom: 8px;
	}

	/* Triple the size of audio button and toggle for mobile */
	.play-button {
		width: 150px;
		height: 150px;
	}

	.about-page-toggle {
		transform: scale(3);
		display: block !important;
		/* Override the display: none on mobile */
	}
}

/* @media (max-width: 768px) {
	.outer-div[data-glow] {
		pointer-events: none;
	}

	.outer-div video {
		display: block !important;
		pointer-events: none;
	}
} */

/* Quick Links Styling */
.quick-links {
	position: fixed;
	top: 180px;
	left: 20px;
	background: rgba(0, 0, 0, 0);
	/* Transparent background */
	padding: 8px 8px;
	border-radius: 8px;
	z-index: 1000;
	color: white;
	max-width: 200px;
	transform: none;
	/* Prevent scaling */
	transition: none;
	/* Disable transitions */
}

.quick-links ul {
	list-style: none;
	padding: 10px;
	margin: 0;
}

.quick-links ul li {
	margin-bottom: 10px;
}

.quick-links ul li a {
	color: #ffffff75;
	/* Default color */
	text-decoration: none;
	font-size: 12px;
	/* Inherit font size */
	transform: none;
	/* Prevent scaling */
	transition: none;
	/* Disable transitions */
}

.quick-links ul li a:hover {
	color: #ffffff;
	/* Hover color */
}

/* Hide Quick Links on Smaller Screens */
@media (max-width: 768px) {
	.quick-links {
		display: none;
	}
}

/* Add margin to the main content to account for the quick links */
.main-content {
	margin-left: 220px;
	/* Adjust based on the width of the quick links */
}

/* Two-Column Layout */
.page-layout {
	display: flex;
	flex-direction: row;
	align-items: flex-start;
	gap: 20px;
	/* Space between columns */
}

/* Left Column: Quick Links */
.quick-links-column {
	flex: 1;
	/* 1/3 of the width */
	max-width: 300px;
	/* Optional: Limit the width of the quick links column */
	position: sticky;
	top: 100px;
	/* Keeps the quick links fixed while scrolling */
	height: calc(100vh - 100px);
	/* Adjust height to fit the viewport */
	overflow-y: auto;
	/* Allow scrolling if quick links exceed the height */
}

/* Quick Links Styling */
.quick-links {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.quick-links ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.quick-links a {
	text-decoration: none;
	color: grey;
	font-weight: normal;
	transition: color 0.3s ease, font-weight 0.3s ease;
}

.quick-links a.active {
	color: white;
	font-weight: bold;
}

/* Right Column: Main Content */
.main-content {
	flex: 2;
	/* 2/3 of the width */
	max-width: calc(100% - 300px);
	/* Ensure it doesn't overlap with the quick links */
}

/* Responsive Design: Stack Columns on Smaller Screens */
@media (max-width: 768px) {
	.page-layout {
		flex-direction: column;
	}

	.quick-links-column {
		display: none;
		/* Hide quick links on smaller screens */
	}

	.main-content {
		max-width: 100%;
		/* Take full width on smaller screens */
	}
}

/* Quick Links Styling */
.quick-links {
	position: fixed;
	top: 180px;
	left: 20px;
	background: rgba(0, 0, 0, 0);
	/* Transparent background */
	padding: 8px 8px;
	border-radius: 8px;
	z-index: 1000;
	color: white;
	font-size: 14px;
	max-width: 300px;
	transform: none;
	/* Prevent scaling */
	transition: none;
	/* Disable transitions */
}

.quick-links ul {
	list-style: none;
	padding: 10px;
	margin: 0;
}

.quick-links ul li {
	margin-bottom: 10px;
}

.quick-links ul li a {
	color: #ffffff75;
	/* Default color */
	text-decoration: none;
	font-size: 12px;
	transform: none;
	/* Prevent scaling */
	transition: none;
	/* Disable transitions */
}

.quick-links ul li a:hover {
	color: #ffffff;
	/* Hover color */
}

/* Hide Quick Links on screens smaller than 1370px */
@media (max-width: 1370px) {
	.quick-links {
		display: none;
	}
}


/* START of comparing photos for before and after */

/* Ensure the comparison container spans the full width and maintains aspect ratio */
.comparison-container {
	width: 100%;
	margin: 0 auto;
	display: flex;
	justify-content: center;
	align-items: center;
	user-select: none;
	/* Disable text selection */
	-webkit-user-select: none;
	/* For Safari */
	-ms-user-select: none;
	/* For older versions of Internet Explorer */
	-moz-user-select: none;
	/* For Firefox */
}

.slider-container {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	border: none;
	/* Remove border if not needed */
	border-radius: 0;
	/* Remove border radius for full-width effect */
	box-shadow: none;
	/* Remove shadow for a cleaner look */
	user-select: none;
	/* Disable text selection */
	-webkit-user-select: none;
	-ms-user-select: none;
	-moz-user-select: none;
	cursor: pointer;
	/* Add pointer cursor for the container */
}

.before-image,
.after-image {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	user-select: none;
	/* Disable text selection */
	-webkit-user-select: none;
	-ms-user-select: none;
	-moz-user-select: none;
}

.before-image {
	z-index: 2;
	/* Ensure it's above the after-image */
	clip-path: inset(0 0 0 50%);
	/* Initially show the left half */
}

.after-image {
	z-index: 1;
	/* Ensure it's below the before-image */
	clip-path: inset(0 50% 0 0);
	/* Initially show the right half */
}

.slider {
	position: absolute;
	top: 0;
	left: 50%;
	width: 4px;
	height: 100%;
	background-color: #fff;
	cursor: ew-resize;
	/* Add resize cursor for the slider */
	transform: translateX(-50%);
	z-index: 3;
	user-select: none;
	-webkit-user-select: none;
	-ms-user-select: none;
	-moz-user-select: none;
	box-shadow: 0 0 10px rgba(0, 0, 0, 0.6);
	/* Subtle black shadow */
}

.slider::before {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	width: 20px;
	height: 20px;
	background-color: #fff;
	border-radius: 50%;
	transform: translate(-50%, -50%);
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
	/* Subtle shadow for the circle */
	display: flex;
	align-items: center;
	justify-content: center;
	background-image: url('../images/drag-handle.svg');
	/* Path to the drag handle icon */
	background-repeat: no-repeat;
	background-position: center;
	background-size: 12px 12px;
	/* Adjust size of the icon */
}

/* Style for the labels */
.label {
	position: absolute;
	bottom: 10px;
	padding: 6px 12px;
	background-color: rgba(41, 41, 41, 0.681);
	/* 80% opacity black */
	color: white;
	font-size: 18px;
	font-family: Arial, sans-serif;
	border-radius: 4px;
	z-index: 2;
	/* Ensure labels are above images */
	pointer-events: none;
	/* Prevent interaction with the labels */
	transition: clip-path 0.3s ease;
}

.before-label {
	left: 16px;
}

.after-label {
	right: 16px;
}

/* Ensure the slider is above the labels */
.slider {
	z-index: 3;
}

/* Adjust the slider to mask the labels */
.slider-container {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	border: none;
	border-radius: 0;
	box-shadow: none;
	user-select: none;
	cursor: pointer;
}

.slider {
	position: absolute;
	top: 0;
	left: 50%;
	width: 4px;
	height: 100%;
	background-color: #fff;
	cursor: ew-resize;
	transform: translateX(-50%);
	z-index: 3;
	/* Ensure the slider is above the labels */
	user-select: none;
	box-shadow: 0 0 10px rgba(0, 0, 0, 0.6);
}

.slider::before {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	width: 40px;
	height: 40px;
	background-color: #fff;
	border-radius: 50%;
	transform: translate(-50%, -50%);
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}


/* END of comparing photos for before and after */

video {
	autoplay: true;
	/* Ensure autoplay is enabled */
	muted: true;
	/* Required for autoplay on mobile */
	playsinline: true;
	/* Ensures the video plays inline on mobile */
}