html{color:#000;background:#FFF;}body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,button,textarea,p,blockquote,th,td{margin:0;padding:0;}table{border-collapse:collapse;border-spacing:0;}fieldset,img{border:0;}address,caption,cite,code,dfn,em,strong,th,var,optgroup{font-style:inherit;font-weight:inherit;}del,ins{text-decoration:none;}li{list-style:none;}caption,th{text-align:left;}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}q:before,q:after{content:'';}abbr,acronym{border:0;font-variant:normal;}sup{vertical-align:baseline;}sub{vertical-align:baseline;}legend{color:#000;}input,button,textarea,select,optgroup,option{font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit;}input,button,textarea,select{*font-size:100%;}


@import url('https://fonts.googleapis.com/css2?family=Barlow+Semi+Condensed:ital,wght@0,300;0,500;0,700;0,800;1,700&display=swap');


*{
	box-sizing: border-box;
}
html{
	background: 
		radial-gradient(circle at 0% 10%, rgba(8, 0, 255, 0.4) 0%, transparent 20%),
		radial-gradient(circle at 70% 75%, rgba(8, 0, 255, 0.6) 0%, transparent 40%),
		black;
	color:white;
	font-family: "Open Sans";
	
}

body{
	
	position: relative;
	overflow-x: hidden;
}

.mobile-nav-menu{
	display: none;
}

.mobile-menu-toggle{
	display: none;
}

.mobile-video-container{
	display: none;
}





a.tile{
	text-decoration: none;
}

#maincontainer{
	position: relative;	
	z-index:1;
	width: 1120px;
	margin:0 auto;

}

.mainexpertise{
	width:100%;
}

#videobg_intro_parent{
	position: absolute;
	top:-40px;
	right:50%;
	margin-right: -800px;
	width:1100px;
	height:auto;
	z-index:0;
	overflow:hidden;
}	

#videobg_intro{
	width:100%;
	height:100%;

}

#videobg_intro_parent_overlay{
	position: absolute;
	top: 0;
	right: 0;
	width:100%;
	height:100%;
	background: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 100%),
				linear-gradient(to right, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 15%),
				linear-gradient(to left, rgba(0,0,0,1) 20%, rgba(0,0,0,0) 30%);
}



#languagebar{
	display: flex;
	justify-content: flex-end;

}
	#languagebar a{
		font-weight:bold;
		font-size:20px;
		color:white;
		margin:10px;
		text-decoration: none;
	}

	#languagebar a.selected{
		text-decoration: underline;
	}

#logo_main img{
	width:200px;
}

#top_nav{
	display: flex;
	flex-direction: row;
	justify-content: flex-end;
	align-items: center;
	padding: 20px 100px 0 0;
	z-index:1;
}


#nav_main_parent{
	display:flex;
	justify-content: flex-end;
}

	.nav_main{
		display:block;
		color:white;
		font-weight:bold;
		text-decoration: none;
		margin: 0 25px 0 25px;
	}

	.nav_main:hover, .nav_main.selected{
		border-bottom: 4px solid #8601ff;
	}

	.nav_spacer{
		width:50px;
	}




.button{
	background: #8601ff;
	color:white;
	padding: 3px 30px;
	border-radius: 25px;
}

.button:hover{
	background: white;
	color: #8601ff;
	border-bottom:0px solid white;
}



#top_info{
	display: flex;
	flex-wrap: wrap;
	
	margin:25px 0;
}


.texttile{
	width:220px;
	height:220px;
	min-width:220px;
	min-height:220px;	

	display:flex;
	flex-direction: column;
	justify-content: flex-start;
	align-items: flex-start;

	border-radius:40px;
	border:1px solid rgba(0,0,0,0);

	margin:2px;
	padding:15px;
	text-align: left;
	text-decoration: none;
}

.texttile.fit {
	
}

.taginfotext{
	font-size:20px;
	width:100%;
	text-align: center;
	padding:50px 0 50px 0;
}






.tile{
	
	width:220px;
	height:220px;
	min-width:220px;
	min-height:220px;


	display:flex;
	justify-content: center;
	align-items: center;

	border-radius:40px;
	border:1px solid rgba(0,0,0,0);

	margin:2px;
	padding:15px;
}

.tile.outline{
	border:1px solid #8601ff;
}

.tile.logo_outline{
	border:1px solid #8601ff;
	background: url("/assets/img/logo-outline.png");
	background-size: 80% 80%;
	background-position: center;
	background-repeat: no-repeat;	
}

.tile.empty_logo_outline{
	
	background: url("/assets/img/logo-outline.png");
	background-size: 80% 80%;
	background-position: center;
	background-repeat: no-repeat;	
}




.tile:hover{


}

#top_info{

}

#home_quote{
	display:flex;
	align-items: center;
}

	#home_quote .content{
		font-size: 25px;
		font-weight:bold;
		width:440px;
		padding: 0 0 0 40px;
	}

	#home_quote .content .maincolor {
		animation: heart-pulse 2s ease-in-out infinite;
		display: inline-block;
	}

	@keyframes heart-pulse {
		0% { transform: scale(1); }
		50% { transform: scale(1.1); }
		100% { transform: scale(1); }
	}

	#home_quote .content ol{
		display: inline-block;
		list-style: none;
		height: 32px;
		line-height: 32px;
		overflow: hidden;
		color: #d8ff00;
		margin:0px 0 -6px 0 ;
	}

		#home_quote .content ol li{

			animation: slide-up 12s infinite;
			animation-direction: normal;
			white-space: nowrap;
		}
		
			@keyframes slide-up {
				0%,10%{
					transform: translateY(0%);
				}
				15%,25%{
					transform: translateY(-100%);
				}
				30%,40%{
					transform: translateY(-200%);
				}
				45%,55%{
					transform: translateY(-300%);
				}
				60%,70%{
					transform: translateY(-400%);
				}
				75%,85%{
					transform: translateY(-500%);
					opacity:1;
				}
				85.1%
				{
					opacity:0;
				}
				85.2%
				{
					transform: translateY(0%);
				}

			}


	.maincolor{
		color:#8601ff;
	}



	.tile.maincolor{
		background: #8601ff;
		color:white;
	}

	.tile.cyan{
		background: #00e0ff;
		color: #fb5afc;
	}
		.tile.cyan:hover{
			background:  #fb5afc;
			color:#00e0ff;
		}


	.tile.pink{
		background: #fb5afc;
		color: #d8ff00;
	}
		.tile.pink:hover{
			background: #d8ff00;
			color: #fb5afc;
		}

	.tile.yellowgreen{
		background: #d8ff00;
		color: #fb5afc;
	}

		.tile.yellowgreen:hover{
			background: #fb5afc;
			color: #d8ff00;
		}
	.tile.testcolor{
		background: #00ff84;
		color: #00aaff;
	}	

	@keyframes flicker {
		0% { opacity: 1; }
		5% { opacity: 0.9; }
		10% { opacity: 1; }
		15% { opacity: 0.9; }
		20% { opacity: 1; }
		25% { opacity: 0.9; }
		30% { opacity: 1; }
		35% { opacity: 0.9; }
		40% { opacity: 1; }
		45% { opacity: 0.9; }
		50% { opacity: 1; }
		55% { opacity: 0.9; }
		60% { opacity: 1; }
		65% { opacity: 0.9; }
		70% { opacity: 1; }
		75% { opacity: 0.9; }
		80% { opacity: 1; }
		85% { opacity: 0.9; }
		90% { opacity: 1; }
		95% { opacity: 0.9; }
		100% { opacity: 1; }
	}

	.tile.flicker {
		animation: flicker 0.12s infinite;
	}

	.bigtitle{
		font-size:55px;
		font-weight:bold;
		text-transform: uppercase;
		word-break: break-all;
		padding:30px 15px 0 15px ;
		line-height: 1;
		justify-content: flex-start;
		align-items: flex-start;
	}

	.bigtitle.superbig{
		font-size:80px;
	}

	.bigtitle.large{
		font-size:50px;
	}
		
	.bigtitle.medium{
		font-size:45px;
	}

	.bigtitle.s40{
		font-size:40px;
	}

	.tile.title{
		font-size:30px;
		font-weight:bold;
		text-align: center;
	}

	.maintags{
		display:flex;
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: center;
		align-items: center;
	}


	.contactpanel{
		width:100%;
		padding:50px 0 200px 0;
	}

		.contactpanel .button{
			background: #8601ff;
			color:white;
			padding: 3px 30px;
			border-radius: 25px;
			font-size:20px;
			font-weight:bold;
			text-decoration: none;
			
		}

		.contactpanel .button:hover{
			background: white;
			color: #8601ff;
			
		}



	
	.tile.casetoptitle
	{
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: flex-start;
		font-size: 32px;
		background: rgba(0,0,0,0.9);
	}
		.tile.casetoptitle h1{
			font-size:32px;
			font-weight:bold;
			line-height:1;
			padding:0 0 0 10xpx;
			}

		.tile.casetoptitle h2{
			font-size:18px;
			font-weight:bold;
			text-transform: uppercase;
			margin-top:5px;
			padding:0 0 0 10px;
		}

.whoweworkfor{
	padding:00px 0px 0px 0px;
	
}

.whoweworkfor .textwrapper{
	text-align: center;
}

.textblock{
	width:100%;
}

.textblock p{
	line-height: 1.8;
}

.center{
	text-align: center;
}

.center h2{
	text-align: center;
}

.textblock.center h2{
	text-align: center !important;
}

div.textblock.center h2{
	text-align: center !important;
}

.text.cyan{
	color: #00e0ff;
}
.text.pink{
	color: #fb5afc;
}
.text.purple{
	color: #8601ff;
}
.text.yellowgreen{
	color: #d8ff00;
}


.title{
	font-size:20px;
	font-weight:bold;
	text-transform: uppercase;
	
}

.checkmark-title {
	padding: 50px 0 0 0;
}

h2{
	font-size:50px;
	font-weight:bold;
	text-transform: uppercase;
	-webkit-text-stroke: 2px #8601ff;
	color:transparent;
	padding-bottom: 20px;

}

p{
	font-size:20px;
	font-weight:bold;
}

.ptb_M{
	padding-top:50px;
	padding-bottom:50px;
}

.tileflexparent{
	display:flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
}

.tile.case{

		position:relative;
		justify-content: flex-start;
		align-items: flex-start;

		font-size:30px;
		font-weight:bold;
		padding:30px 15px 0 15px ;

		cursor:pointer;
		overflow: hidden;
	}

	.tile.case .tilebg{
		position:absolute;
		top:0;
		left:0;
		width:100%;
		height:100%;
		border-radius:40px;
		z-index:0;
		transition: transform 0.3s ease-out;
	}

	.tile.case:hover .tilebg{
		transform: scale(1.10);
	}

	.tile.case .bg_wrap.hidden{

	}

	.tile.case .case_coloroverlay {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		border-radius: 40px;

		z-index: 0;

	}

		.gradient_green{
			background: rgb(2,0,36);
			background: linear-gradient(45deg, rgba(2,0,36,1) 0%, rgba(182, 255, 70,1) 0%, rgba(42, 236, 51,1) 2%, rgba(0,212,255,0) 65%);
			mix-blend-mode: overlay;
		}
		.gradient_pink{
			background: rgb(2,0,36);
			background: linear-gradient(45deg, rgba(2,0,36,1) 0%, rgba(215, 3, 255,1) 0%, rgba(125, 0, 167,1) 2%, rgba(0,212,255,0) 65%);
			mix-blend-mode: overlay;
		}

		.gradient_blue{
			background: rgb(2,0,36);
			background: linear-gradient(45deg, rgba(2,0,36,1) 0%, rgba(31, 255, 219,1) 0%, rgba(10, 245, 255,1) 2%, rgba(0,212,255,0) 65%);
			mix-blend-mode: overlay;
		}


		.case_textinfo{
			z-index:2;
		}

			.casetitle{
				display:block;
				color:white;
				text-decoration: none;
				line-height:30px;
				font-size:30px;
			}

			.casetitle:hover{
				color:#d8ff00;
			}



.colorscheme_10{
	background: #8601ff;
	color:#00e0ff;
}	
	.colorscheme_10:hover{
		background: #00e0ff;
		color:#8601ff;
	}

.colorscheme_11{
	background: #8601ff;
	color:#fb5afc;
}	
	.colorscheme_11:hover{
		background: #fb5afc;
		color:#8601ff;
	}


.colorscheme_12{
	background: #8601ff;
	color:#d8ff00;
}	
	.colorscheme_12:hover{
		background: #d8ff00;
		color:#8601ff;
	}

.colorscheme_20{
	background: #00e0ff;
	color:#d8ff00;
}	
	.colorscheme_20:hover{
		background: #d8ff00;
		color:#00e0ff;
	}

.colorscheme_21{
	background: #00e0ff;
	color:#fb5afc;
}	
	.colorscheme_21:hover{
		background: #fb5afc;
		color:#00e0ff;
	}

.colorscheme_30{
	background: #d8ff00;
	color:#fb5afc;
}	
	.colorscheme_30:hover{
		background: #fb5afc;
		color:#d8ff00;
	}

.colorscheme_40{
	background: #79ff01;
	color:#fb5afc;
}	
	.colorscheme_40:hover{
		background: #fb5afc;
		color:#79ff01;
	}

.colorscheme_50{
	background: #fb5afc;
	color:#d8ff00;
}	
	.colorscheme_50:hover{
		background: #d8ff00;
		color:#2900d5;
	}

/* Three Additional Color Scheme Variations */
.colorscheme_60{
	background: #8601ff;
	color:#79ff01;
}	
	.colorscheme_60:hover{
		background: #79ff01;
		color:#8601ff;
	}

.colorscheme_70{
	background: #fb5afc;
	color:#00e0ff;
}	
	.colorscheme_70:hover{
		background: #00e0ff;
		color:#fb5afc;
	}

.colorscheme_80{
	background: #00e0ff;
	color:#8601ff;
}	
	.colorscheme_80:hover{
		background: #8601ff;
		color:#00e0ff;
	}

.colorscheme_90{
	background: #ff9e00;
	color:#ff006e;
}	
	.colorscheme_90:hover{
		background: #ff006e;
		color:#ff9e00;
	}

.colorscheme_100{
	background: #8338ec;
	color:#3a86ff;
}	
	.colorscheme_100:hover{
		background: #3a86ff;
		color:#8338ec;
	}

.colorscheme_110{
	background: #ffbe0b;
	color:#fb5607;
}	
	.colorscheme_110:hover{
		background: #fb5607;
		color:#ffbe0b;
	}

.colorscheme_120{
	background: #ff006e;
	color:#8338ec;
}	
	.colorscheme_120:hover{
		background: #8338ec;
		color:#ff006e;
	}

.colorscheme_130{
	background: #06ffa5;
	color:#8338ec;
}	
	.colorscheme_130:hover{
		background: #8338ec;
		color:#06ffa5;
	}

.colorscheme_140{
	background: #ff9e00;
	color:#06ffa5;
}	
	.colorscheme_140:hover{
		background: #06ffa5;
		color:#ff9e00;
	}

.colorscheme_150{
	background: #3a86ff;
	color:#ff006e;
}	
	.colorscheme_150:hover{
		background: #ff006e;
		color:#3a86ff;
	}

.text_large{
	font-size:80px;
}

.text_medium{
	font-size:50px;
}

.text_small{
	font-size:30px;
}





.pagecontent
{
	display:flex;
	flex-direction: row;
	flex-wrap: wrap;
	
}

	.casepic{
		width:100%;
	}

	.casetitle{
		text-transform: uppercase;
		font-size:25px;
	}

	.casesubtitle{
		font-size:18px;
	}





	.yellowgreen{
		color: #d8ff00;
	}

	.purple{
		color: #8601ff;
	}

	.pink{
		color: #fb5afc;
	}

	.cyan{
		color: #00e0ff;
	}
	.black{
		color:black;
	}
	.white{
		color:white;
	}

	/* New Individual Color Classes */
	.orange{
		color: #ff6b35;
	}

	.teal{
		color: #2ec4b6;
	}

	.magenta{
		color: #f72585;
	}

	.neongreen{
		color: #06ffa5;
	}

	.hotpink{
		color: #ff006e;
	}

	.deepblue{
		color: #3a86ff;
	}

	.yellow{
		color: #ffbe0b;
	}

	.coral{
		color: #fb5607;
	}

	.lime{
		color: #79ff01;
	}


		#page_home{
			
		}


		#page_case{
			
		}

			#page_case .topinfo_wrap
			{
				z-index:10;
			}


			#page_case .casebg_wrap{
				position:absolute;
				top:200px;
				width:100%;
				height:750px;
				z-index:-1;
				
			}

				#page_case .picturebg{
					position:absolute;
					
					width:100%;
					height:100%;
					
				}

				#page_case .videobg{
					position:absolute;
					

					width:100%;
					height:100%;

					z-index:-2;
				}

				#page_case .no-video-message {
					display: flex;
					justify-content: center;
					align-items: center;
					width: 100%;
					height: 100%;
					color: #6c757d;
					font-size: 18px;
					font-weight: bold;
				}

			#casevideo{
				width:100%;
				height:100%;
			}


			#page_case .overlay{
				position:absolute;
				top:150px;
				left:0;
				z-index:6;
				background: url("/assets/img/bg-tile-transparent.png");
				background-size:220px 220px;
				background-position: 15px 122px ;
				width:100%;
				height:100%;

				mask-image: radial-gradient(transparent 35%, black 75%);
				display:none;

			}

			#page_case .overlay_blackfade{
				position:absolute;
				top:150px;
				left:0;
				z-index:7;
				background:  linear-gradient(0deg, rgba(0,0,0,1) 10%, rgba(0,0,0,0) 60%, rgba(0,0,0,0) 65%, rgba(0,0,0,1) 98%);

				width:100%;
				height:100%;


			}

			#page_case .casecontent{
				position:relative;
				
				width:100%;
				height:650px;
			}

				#page_case .caseinfo{
					
					width:550px;
					font-size:20px;
					font-weight:bold;
					margin:30px 0 0 230px ;
					text-shadow: 0 0 20px #000;

				}

					#page_case .caseinfo .title{
						font-size:30px;
					}

					#page_case .caseinfo .case-intro-title{
						font-size:30px;
						color: #8601ff;
						text-shadow: 
							-1px -1px 0 #000,
							1px -1px 0 #000,
							-1px 1px 0 #000,
							1px 1px 0 #000;
						font-weight: bold;
					}



				#page_case .tile.playwrap{
					position:absolute;
					top:250px;
					left:350px;
					background:black
				}

						#page_case .playbutton{

							width:100px;
							height:100px;
							border-radius:50px;
							background:#8601ff;
							color:white;
							display:flex;
							justify-content: center;
							align-items: center;
							font-size:40px;
							font-weight:bold;
							padding-left:5px;
							padding-bottom: 5px;
							cursor:pointer;

						}


				#page_case .tile.loner_1{
					position:absolute;
					top:220px;
					right:-60px;
					
					background: rgba(134, 1, 255, 0.2);
				}

				

				#page_case .loner_2{
					position:absolute;
					bottom:-30px;
					left:-90px;
				}
				#page_case .loner_3{
					position:absolute;
					top:444px;
					left:0px;
					background:black;
					display:none;
				}

				#page_case .tile.tag{
					position:absolute;
					bottom:-80px;
					right:222px;
				}

				#page_case .case-tags{
					
					display: flex;
					flex-direction: row;
					justify-content: flex-end;
					flex-wrap: wrap;
					gap: 8px;
				
					width:100%;
					padding:20px;
				}

				#page_case .case-tags .tag{
					padding: 4px 12px;
					border-radius: 20px;
					font-size: 14px;
					font-weight: bold;
					text-decoration: none;
				}


				#page_case .casetext{
					
					padding:100px 50px 50px 50px ;
				}

				
				

				#page_case .casetext p{
					font-size:18px;
					font-family: "Open Sans";
					font-weight: normal;

				}
					#page_case .casetext p.clientname{
						font-size:25px;
						font-family: "Open Sans";
						font-weight: bold;
						padding-bottom: 15px;
					}

					.custom-video-controls-mobile{
						display:none;
					}
				/* --- Custom Video Controls --- */
				#page_case .custom-video-controls {
					position: absolute;
					bottom: 15px;
					left: 50%;
					transform: translateX(-50%);
					width: 90%;
					max-width: 500px;
					background: rgba(30, 30, 30, 0.7);
					backdrop-filter: blur(5px);
					border-radius: 10px;
					padding: 8px 15px;
					display: flex;
					align-items: center;
					gap: 15px;
					z-index: 15; /* High enough to be over video overlays */
					opacity: 0;
					visibility: hidden;
					transition: opacity 0.3s ease, visibility 0.3s ease;
				}

				#page_case .custom-video-controls.visible {
					opacity: 1;
					visibility: visible;
				}

				#page_case .custom-video-controls .control-btn {
					background: transparent;
					border: none;
					color: white;
					cursor: pointer;
					padding: 0;
					font-size: 24px;
					width: 30px;
					height: 30px;
					display: flex;
					align-items: center;
					justify-content: center;
				}

				 #SeekBar {
					flex-grow: 1;
					-webkit-appearance: none;
					width: 100%;
					height: 5px;
					background: rgba(255, 255, 255, 0.3);
					border-radius: 5px;
					outline: none;
					cursor: pointer;
				}

				
				 #SeekBar::-webkit-slider-thumb {
					-webkit-appearance: none;
					appearance: none;
					width: 15px;
					height: 15px;
					background: #8601ff;
					border-radius: 50%;
					cursor: pointer;
				}

				#SeekBar::-moz-range-thumb {
					width: 15px;
					height: 15px;
					background: #8601ff;
					border-radius: 50%;
					cursor: pointer;
					border: none;
				}

				.icon-play::before { content: "►"; }
				.icon-pause::before { content: "❚❚"; line-height: 1; vertical-align: middle; }

				/* Error message styles */
				.error-container {
					display: flex;
					justify-content: center;
					align-items: center;
					min-height: 50vh;
					font-family: Arial, sans-serif;
				}

				.error-message {
					text-align: center;
					padding: 20px;
					background: #444444;
					border: 1px solid #4f4f4f;
					border-radius: 3px;
					box-shadow: 0 2px 4px rgba(0,0,0,0.1);
				}

				.error-message p {
					color: #6c757d;
					margin: 0;
					font-size:14px;
				}

				/* Case Footer Styles */

				.taglink {
					background: #6acad1;
					border-radius: 3px;
					text-decoration: none;
					color:white;
					padding: 1px 10px;
					font-size:12px;
					font-weight:normal;
					margin-left:5px;
				}
				.taglink:hover {
					background: #2b7378;
				}	

				.case-footer {
					margin-top: 80px;
					margin-left: -50px;
					margin-right: -50px;
					padding: 60px 50px 40px 50px;
					background: #000;
					border-top: 1px solid #333;
					width: calc(100% + 100px);
				}

				.footer-content {
					display: flex;
					justify-content: space-between;
					flex-wrap: wrap;
					gap: 40px;
					max-width: 1200px;
					margin: 0 auto;
				}

				.footer-section h3 {
					font-size: 16px;
					font-weight: bold;
					margin-bottom: 20px;
					color: #8601ff;
					text-transform: uppercase;
					letter-spacing: 1px;
				}

				.footer-section p {
					margin: 8px 0;
					color: #fff;
					font-size: 14px;
					font-family: "Open Sans", sans-serif;
				}

				.social-links {
					display: flex;
					flex-direction: column;
					gap: 12px;
				}

				.social-link {
					color: #fff;
					text-decoration: none;
					font-size: 14px;
					font-family: "Open Sans", sans-serif;
					transition: color 0.3s ease;
					position: relative;
				}

				.social-link:hover {
					color: #8601ff;
				}

				.social-link::after {
					content: '';
					position: absolute;
					width: 0;
					height: 1px;
					bottom: -2px;
					left: 0;
					background-color: #8601ff;
					transition: width 0.3s ease;
				}

				.social-link:hover::after {
					width: 100%;
				}

				.footer-links {
					display: flex;
					flex-direction: column;
					gap: 12px;
				}

				.footer-link {
					color: #fff;
					text-decoration: none;
					font-size: 14px;
					font-family: "Open Sans", sans-serif;
					transition: color 0.3s ease;
					position: relative;
				}

				.footer-link:hover {
					color: #8601ff;
				}

				.footer-link::after {
					content: '';
					position: absolute;
					width: 0;
					height: 1px;
					bottom: -2px;
					left: 0;
					background-color: #8601ff;
					transition: width 0.3s ease;
				}

				.footer-link:hover::after {
					width: 100%;
				}

				.footer-bottom {
					margin-top: 40px;
					padding-top: 20px;
					border-top: 1px solid #333;
					text-align: center;
				}

				.footer-bottom p {
					color: #666;
					font-size: 12px;
					margin: 0;
					font-family: "Open Sans", sans-serif;
				}

				/* Proud member image styling */
				.proud-member-image {
					width: calc(100% - 200px);
					height: auto;
					margin: 20px 100px 0 100px;
					display: block;
					max-width: calc(100% - 200px);
				}

				/* Mobile responsive styling for proud member image */
				@media (max-width: 768px) {
					.proud-member-image {
						width: calc(100% - 20px) !important;
						margin: 20px 10px 0 10px !important;
						max-width: calc(100% - 20px) !important;
					}
				}

				/* Responsive footer */
				@media (max-width: 768px) {
					.footer-content {
						flex-direction: column;
						gap: 30px;
					}
					
					.case-footer {
						padding: 40px 30px 30px 30px;
					}
				}
				
				/* Checkmark list styles */
				.checkmark-list {
					list-style: none;
					padding: 0;
					margin: 30px 0;
				}

				/* Restore to a simple, non-animated state */
				#page_case .checkmark-item {
					font-size: 24px;
					line-height: 1.4;
					margin-bottom: 20px;
					padding-left: 0;
					color: #fff;
					font-family: "Open Sans", sans-serif;
					font-weight: 500;
					opacity: 0; /* Start hidden, JS will make it visible */
				}

				#page_case .checkmark-item:before {
					content: "✓";
					color: #8601ff;
					font-weight: bold;
					font-size: 32px;
					margin-right: 20px;
					display: inline-block;
					width: 40px;
					vertical-align: middle;
				}

				@keyframes blink-caret {
					0%, 50% { border-color: transparent; }
					51%, 100% { border-color: #8601ff; }
				}

				/* Nothing Found Message Styles */
				.nothing-found-container {
					display: flex;
					justify-content: center;
					align-items: center;
					min-height: 400px;
					width: 100%;
					padding: 50px 20px;
				}

				.nothing-found-message {
					text-align: center;
					max-width: 600px;
				}

				.nothing-found-message h2 {
					font-size: 48px;
					font-weight: 700;
					margin-bottom: 20px;
					-webkit-text-stroke: 2px #8601ff;
					color: transparent;
				}

				.nothing-found-message p {
					font-size: 18px;
					color: #888;
					margin-top: 10px;
				}

				/* Infinite Scroller Styles */
				.case-pictures-scroller {
					width: 100%;
					overflow: hidden;
					margin: 40px 0;
					position: relative;
				}

				.scroller-container {
					width: 100%;
					overflow: hidden;
				}

				.scroller-track {
					display: flex;
					animation: scroll 120s linear infinite;
					width: max-content;
				}

				/* Class to disable animation for single items */
				.scroller-track.single-item {
					animation: none;
				}

				.scroller-item {
					flex-shrink: 0;
					margin-right: 20px;
					border-radius: 20px;
					overflow: hidden;
					box-shadow: 0 4px 20px rgba(134, 1, 255, 0.2);
					transition: transform 0.3s ease;
				}

				.scroller-item:hover {
					transform: scale(1.05);
				}

				.scroller-item img {
					width: 300px;
					height: 200px;
					object-fit: cover;
					display: block;
				}

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

				/* Pause animation on hover */
				.case-pictures-scroller:hover .scroller-track {
					animation-play-state: paused;
				}

				/* Contact Page Styles */
				#page_contact {
					padding: 50px 0;
					min-height: 80vh;
				}
				
				.contact-container {
					display: grid;
					grid-template-columns: 1fr 1fr;
					gap: 80px;
					max-width: 1200px;
					margin: 0 auto;
					padding: 0 40px;
				}
				
				.contact-info h2,
				.map-section h2 {
					font-size: 2.5em;
					font-weight: 700;
					margin-bottom: 30px;
					color: #8601ff;
					text-transform: uppercase;
					-webkit-text-stroke: 2px #8601ff;
					color: transparent;
				}
				
				.contact-info p {
					font-size: 1.2em;
					line-height: 1.6;
					margin-bottom: 40px;
					color: #ffffff;
					font-weight: 500;
				}
				
				.contact-details {
					margin: 50px 0;
				}
				
				.contact-item {
					display: flex;
					align-items: center;
					margin-bottom: 30px;
					padding: 25px;
					background: rgba(134, 1, 255, 0.1);
					border-radius: 20px;
					border: 1px solid rgba(134, 1, 255, 0.3);
					transition: all 0.3s ease;
					backdrop-filter: blur(10px);
				}
				
				.contact-item:hover {
					background: rgba(134, 1, 255, 0.2);
					transform: translateY(-3px);
					box-shadow: 0 15px 40px rgba(134, 1, 255, 0.3);
					border-color: rgba(134, 1, 255, 0.6);
				}
				
				.contact-icon {
					font-size: 2.5em;
					margin-right: 25px;
					min-width: 60px;
					text-align: center;
					filter: drop-shadow(0 0 10px rgba(134, 1, 255, 0.5));
				}
				
				.contact-text h3 {
					font-size: 1.4em;
					font-weight: 600;
					margin-bottom: 8px;
					color: #8601ff;
					text-transform: uppercase;
				}
				
				.contact-text p {
					margin: 0;
					font-size: 1.1em;
					font-weight: 500;
				}
				
				.contact-text a {
					color: #ffffff;
					text-decoration: none;
					transition: all 0.3s ease;
					position: relative;
				}
				
				.contact-text a:hover {
					color: #8601ff;
					text-shadow: 0 0 10px rgba(134, 1, 255, 0.5);
				}
				
				.contact-text a::after {
					content: "";
					position: absolute;
					width: 0;
					height: 2px;
					bottom: -2px;
					left: 0;
					background: linear-gradient(90deg, #8601ff, #1e1ece);
					transition: width 0.3s ease;
				}
				
				.contact-text a:hover::after {
					width: 100%;
				}
				
				.contact-cta {
					text-align: center;
					margin-top: 50px;
					padding: 40px;
					background: linear-gradient(135deg, rgba(134, 1, 255, 0.1) 0%, rgba(30, 30, 206, 0.1) 100%);
					border-radius: 25px;
					border: 1px solid rgba(134, 1, 255, 0.3);
					backdrop-filter: blur(10px);
				}
				
				.contact-cta p {
					margin-bottom: 25px;
					font-size: 1.1em;
				}
				
				.contact-button {
					display: inline-block;
					background: linear-gradient(135deg, #8601ff 0%, #1e1ece 100%);
					color: white;
					padding: 18px 35px;
					border-radius: 35px;
					text-decoration: none;
					font-weight: 600;
					font-size: 1.1em;
					transition: all 0.3s ease;
					border: none;
					cursor: pointer;
					text-transform: uppercase;
					letter-spacing: 1px;
					box-shadow: 0 5px 20px rgba(134, 1, 255, 0.3);
				}
				
				.contact-button:hover {
					background: linear-gradient(135deg, #1e1ece 0%, #8601ff 100%);
					transform: translateY(-3px);
					box-shadow: 0 15px 40px rgba(134, 1, 255, 0.5);
				}
				
				.map-section {
					display: flex;
					flex-direction: column;
				}
				
				.map-container {
					border-radius: 25px;
					overflow: hidden;
					box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
					border: 2px solid rgba(134, 1, 255, 0.3);
					background: rgba(134, 1, 255, 0.05);
					backdrop-filter: blur(10px);
				}
				
				.map-container iframe {
					border-radius: 25px;
					transition: all 0.3s ease;
				}
				
				.map-container:hover iframe {
					transform: scale(1.02);
				}
				
				/* Contact Page Mobile Responsive */
				@media (max-width: 768px) {
					#page_contact {
						padding: 30px 0;
					}
					
					.contact-container {
						grid-template-columns: 1fr;
						gap: 50px;
						padding: 0 20px;
					}
					
					.contact-info h2,
					.map-section h2 {
						font-size: 2em;
						margin-bottom: 20px;
					}
					
					.contact-info p {
						font-size: 1em;
						margin-bottom: 30px;
					}
					
					.contact-item {
						padding: 20px;
						margin-bottom: 20px;
					}
					
					.contact-icon {
						font-size: 2em;
						margin-right: 20px;
						min-width: 50px;
					}
					
					.contact-text h3 {
						font-size: 1.2em;
					}
					
					.contact-text p {
						font-size: 1em;
					}
					
					.contact-cta {
						padding: 30px 20px;
						margin-top: 40px;
					}
					
					.contact-button {
						padding: 15px 25px;
						font-size: 1em;
					}
					
					.map-container {
						border-radius: 20px;
					}
					
					.map-container iframe {
						border-radius: 20px;
						height: 300px;
					}
				}
				
				/* Contact Page Tablet Responsive */
				@media (min-width: 769px) and (max-width: 1024px) {
					.contact-container {
						gap: 60px;
						padding: 0 30px;
					}
					
					.contact-info h2,
					.map-section h2 {
						font-size: 2.2em;
					}
				}
				
				/* Jobs Page Styles */
				#page_jobs {
					padding: 50px 0;
					min-height: 80vh;
				}
				
				.jobs-container {
					max-width: 1200px;
					margin: 0 auto;
					padding: 0 40px;
				}
				
				.jobs-header {
					text-align: center;
					margin-bottom: 80px;
				}
				
				.jobs-header h2 {
					font-size: 3em;
					font-weight: 700;
					margin-bottom: 30px;
					color: #8601ff;
					text-transform: uppercase;
					-webkit-text-stroke: 2px #8601ff;
					color: transparent;
				}
				
				.jobs-header p {
					font-size: 1.3em;
					line-height: 1.6;
					color: #ffffff;
					font-weight: 500;
					max-width: 800px;
					margin: 0 auto;
				}
				
				.jobs-list {
					display: flex;
					flex-direction: column;
					gap: 40px;
					margin-bottom: 80px;
				}
				
				.job-item {
					background: rgba(134, 1, 255, 0.05);
					border: 1px solid rgba(134, 1, 255, 0.2);
					border-radius: 25px;
					padding: 40px;
					transition: all 0.3s ease;
					backdrop-filter: blur(10px);
					position: relative;
					overflow: hidden;
				}
				
				.job-item::before {
					content: '';
					position: absolute;
					top: 0;
					left: 0;
					right: 0;
					height: 3px;
					background: linear-gradient(90deg, #8601ff, #1e1ece);
					transform: scaleX(0);
					transition: transform 0.3s ease;
				}
				
				.job-item:hover {
					background: rgba(134, 1, 255, 0.1);
					border-color: rgba(134, 1, 255, 0.4);
					transform: translateY(-5px);
					box-shadow: 0 20px 60px rgba(134, 1, 255, 0.2);
				}
				
				.job-item:hover::before {
					transform: scaleX(1);
				}
				
				.job-header {
					display: flex;
					justify-content: space-between;
					align-items: flex-start;
					margin-bottom: 30px;
					flex-wrap: wrap;
					gap: 20px;
				}
				
				.job-title-section h3 {
					font-size: 1.8em;
					font-weight: 600;
					margin-bottom: 15px;
					color: #ffffff;
					text-transform: uppercase;
				}
				
				.job-tags {
					display: flex;
					gap: 10px;
					flex-wrap: wrap;
				}
				
				.job-tag {
					background: linear-gradient(135deg, #8601ff, #1e1ece);
					color: white;
					padding: 6px 15px;
					border-radius: 20px;
					font-size: 0.85em;
					font-weight: 500;
					text-transform: uppercase;
					letter-spacing: 0.5px;
				}
				
				.job-apply-btn {
					flex-shrink: 0;
				}
				
				.job-button {
					background: linear-gradient(135deg, #8601ff 0%, #1e1ece 100%);
					color: white;
					padding: 12px 25px;
					border-radius: 25px;
					text-decoration: none;
					font-weight: 600;
					font-size: 0.9em;
					transition: all 0.3s ease;
					border: none;
					cursor: pointer;
					text-transform: uppercase;
					letter-spacing: 1px;
					box-shadow: 0 5px 20px rgba(134, 1, 255, 0.3);
				}
				
				.job-button:hover {
					background: linear-gradient(135deg, #1e1ece 0%, #8601ff 100%);
					transform: translateY(-2px);
					box-shadow: 0 10px 30px rgba(134, 1, 255, 0.5);
				}
				
				.job-content {
					display: grid;
					grid-template-columns: 1fr 1fr 1fr;
					gap: 40px;
				}
				
				.job-description p {
					font-size: 1.1em;
					line-height: 1.6;
					color: #ffffff;
					margin-bottom: 0;
				}
				
				.job-requirements h4,
				.job-benefits h4 {
					font-size: 1.2em;
					font-weight: 600;
					margin-bottom: 15px;
					color: #8601ff;
					text-transform: uppercase;
				}
				
				.job-requirements ul,
				.job-benefits ul {
					list-style: none;
					padding: 0;
					margin: 0;
				}
				
				.job-requirements li,
				.job-benefits li {
					font-size: 1em;
					line-height: 1.5;
					color: #ffffff;
					margin-bottom: 8px;
					padding-left: 20px;
					position: relative;
				}
				
				.job-requirements li::before,
				.job-benefits li::before {
					content: "→";
					position: absolute;
					left: 0;
					color: #8601ff;
					font-weight: bold;
				}
				
				.general-application {
					text-align: center;
					padding: 60px 40px;
					background: linear-gradient(135deg, rgba(134, 1, 255, 0.1) 0%, rgba(30, 30, 206, 0.1) 100%);
					border-radius: 30px;
					border: 1px solid rgba(134, 1, 255, 0.3);
					backdrop-filter: blur(10px);
				}
				
				.general-application h3 {
					font-size: 2em;
					font-weight: 600;
					margin-bottom: 20px;
					color: #8601ff;
					text-transform: uppercase;
				}
				
				.general-application p {
					font-size: 1.1em;
					line-height: 1.6;
					color: #ffffff;
					margin-bottom: 30px;
					max-width: 600px;
					margin-left: auto;
					margin-right: auto;
				}
				
				.general-apply-button {
					display: inline-block;
					background: linear-gradient(135deg, #8601ff 0%, #1e1ece 100%);
					color: white;
					padding: 18px 35px;
					border-radius: 35px;
					text-decoration: none;
					font-weight: 600;
					font-size: 1.1em;
					transition: all 0.3s ease;
					border: none;
					cursor: pointer;
					text-transform: uppercase;
					letter-spacing: 1px;
					box-shadow: 0 5px 20px rgba(134, 1, 255, 0.3);
				}
				
				.general-apply-button:hover {
					background: linear-gradient(135deg, #1e1ece 0%, #8601ff 100%);
					transform: translateY(-3px);
					box-shadow: 0 15px 40px rgba(134, 1, 255, 0.5);
				}
				
				/* Jobs Page Mobile Responsive */
				@media (max-width: 768px) {
					#page_jobs {
						padding: 30px 0;
					}
					
					.jobs-container {
						padding: 0 20px;
					}
					
					.jobs-header {
						margin-bottom: 50px;
					}
					
					.jobs-header h2 {
						font-size: 2.2em;
						margin-bottom: 20px;
					}
					
					.jobs-header p {
						font-size: 1.1em;
					}
					
					.jobs-list {
						gap: 30px;
						margin-bottom: 50px;
					}
					
					.job-item {
						padding: 25px;
					}
					
					.job-header {
						flex-direction: column;
						align-items: flex-start;
						gap: 15px;
					}
					
					.job-title-section h3 {
						font-size: 1.5em;
					}
					
					.job-content {
						grid-template-columns: 1fr;
						gap: 25px;
					}
					
					.general-application {
						padding: 40px 25px;
					}
					
					.general-application h3 {
						font-size: 1.6em;
					}
					
					.general-apply-button {
						padding: 15px 25px;
						font-size: 1em;
					}
				}
				
				/* Jobs Page Tablet Responsive */
				@media (min-width: 769px) and (max-width: 1024px) {
					.jobs-container {
						padding: 0 30px;
					}
					
					.jobs-header h2 {
						font-size: 2.5em;
					}
					
					.job-content {
						grid-template-columns: 1fr 1fr;
						gap: 30px;
					}
					
					.job-description {
						grid-column: 1 / -1;
					}
				}
				
				/* Portfolio Search Styles */
				.parent-search {
					width: 100% !important;
					max-width: 100% !important;
				}
				
				.search-container {
					position: relative;
					max-width: 600px;
					margin: 0 auto 40px;
				}
				
				.search-input {
					width: 100%;
					padding: 15px 50px 15px 20px;
					border: 2px solid rgba(134, 1, 255, 0.3);
					border-radius: 30px;
					background: rgba(0, 0, 0, 0.8);
					color: white;
					font-size: 16px;
					font-family: inherit;
					backdrop-filter: blur(10px);
					transition: all 0.3s ease;
				}
				
				.search-input:focus {
					outline: none;
					border-color: #8601ff;
					box-shadow: 0 0 20px rgba(134, 1, 255, 0.3);
					background: rgba(0, 0, 0, 0.9);
				}
				
				.search-input::placeholder {
					color: rgba(255, 255, 255, 0.6);
				}
				
				.search-icon {
					position: absolute;
					right: 20px;
					top: 50%;
					transform: translateY(-50%);
					color: rgba(255, 255, 255, 0.6);
					font-size: 18px;
					pointer-events: none;
				}
				
				.search-results {
					min-height: 100px;
					transition: all 0.3s ease;
				}
				
				.search-results-grid {
					display: flex;
					flex-wrap: wrap;
					gap: 4px;
					margin-top: 20px;
					justify-content: center;
				}
				
				.search-result-tile {
					animation: fadeInUp 0.5s ease forwards;
					opacity: 0;
					transform: translateY(20px);
					width: 220px;
					height: 220px;
					min-width: 220px;
					min-height: 220px;
					margin: 2px;
				}
				
				.search-result-tile:nth-child(1) { animation-delay: 0.1s; }
				.search-result-tile:nth-child(2) { animation-delay: 0.2s; }
				.search-result-tile:nth-child(3) { animation-delay: 0.3s; }
				.search-result-tile:nth-child(4) { animation-delay: 0.4s; }
				.search-result-tile:nth-child(5) { animation-delay: 0.5s; }
				.search-result-tile:nth-child(6) { animation-delay: 0.6s; }
				
				@keyframes fadeInUp {
					to {
						opacity: 1;
						transform: translateY(0);
					}
				}
				
				/* Mobile responsive for search */
				@media (max-width: 768px) {
					.search-container {
						max-width: 100%;
						margin: 0 auto 30px;
					}
					
					.search-input {
						padding: 12px 45px 12px 15px;
						font-size: 14px;
					}
					
					.search-results-grid {
						justify-content: center;
						gap: 2px;
					}
					
					.search-result-tile {
						width: 180px;
						height: 180px;
						min-width: 180px;
						min-height: 180px;
						margin: 1px;
					}
				}
				
				/* Loading and error states */
				.loading {
					text-align: center;
					padding: 40px 20px;
					color: rgba(255, 255, 255, 0.8);
					font-size: 16px;
				}
				
				.error {
					text-align: center;
					padding: 40px 20px;
					color: #ff6b6b;
					font-size: 16px;
					background: rgba(255, 107, 107, 0.1);
					border-radius: 10px;
					border: 1px solid rgba(255, 107, 107, 0.3);
				}
				
				/* ASCII Footer Styles */
				.ascii-footer {
					margin-top: 80px;
					margin-left: -50px;
					margin-right: -50px;
					padding: 40px 50px 40px 50px;
					background: #000;
					border-top: 1px solid #333;
					width: calc(100% + 100px);
					text-align: center;
				}

				.ascii-art {
					display: flex;
					justify-content: center;
					align-items: center;
				}

				.ascii-art pre {
					font-family: 'Courier New', monospace;
					font-size: 16px;
					line-height: 1.2;
					color: #00ff00;
					text-shadow: 0 0 5px #00ff00;
					margin: 0;
					white-space: pre;
					overflow-x: auto;
					background: transparent;
					border: none;
					padding: 0;
				}

				.ascii-art a {
					color: #00ffff;
					text-decoration: none;
					text-shadow: 0 0 3px #00ffff;
					transition: all 0.3s ease;
				}

				.ascii-art a:hover {
					color: #ffffff;
					text-shadow: 0 0 8px #ffffff, 0 0 12px #00ffff;
				}

				/* Responsive ASCII footer */
				@media (max-width: 768px) {
					.ascii-art pre {
						font-size: 8px;
						line-height: 1.1;
					}
					
					.ascii-footer {
						padding: 30px 20px 30px 20px;
					}
				}

				@media (max-width: 480px) {
					.ascii-art pre {
						font-size: 6px;
						line-height: 1.0;
					}
				}