.cursor-light {
		position: fixed; top: 0; left: 0; width: 600px; height: 600px;
		border-radius: 50%; pointer-events: none; transform: translate(-50%, -50%);
		transition: width 0.4s, height 0.4s, opacity 0.4s; z-index: 9999;
		background: radial-gradient(circle, rgba(255, 184, 0, 0.1), transparent 70%);
	}
	.dark .cursor-light { background: radial-gradient(circle, rgba(255, 184, 0, 0.08), transparent 70%); }
	#brutalist-shape-container { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; overflow: hidden; }
	.special-shape { position: absolute; opacity: 0.8; transition: all 1s cubic-bezier(0.19, 1, 0.22, 1); will-change: transform, opacity; }
	.shape-fill { background-color: #FFB800; }
	.shape-outline { border: 2px solid #9ca3af; }
	::-webkit-scrollbar { width: 8px; }
	::-webkit-scrollbar-track { background: #e0e0e0; }
	.dark ::-webkit-scrollbar-track { background: #1A1A1A; }
	::-webkit-scrollbar-thumb { background: #FFB800; border-radius: 10px; }
	::-webkit-scrollbar-thumb:hover { background: #e6a600; }
	.clip-trapezoid { clip-path: polygon(20% 0%, 80% 0%, 100% 100%, 0% 100%); }
	#back-to-top { position: fixed; bottom: 2rem; right: 2rem; z-index: 50; transition: opacity 0.3s, transform 0.3s; }
	.service-card { transform-style: preserve-3d; transition: transform 0.5s; }
	.pricing-card { transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease; border-width: 1px; border-color: #e5e7eb; }
	.dark .pricing-card { border-color: #374151; }
	.pricing-card:hover { transform: translateY(-10px); border-color: #FFB800; }
	.pricing-card.featured { border-width: 2px; border-color: #FFB800; transform: scale(1.05); box-shadow: 0 0 30px rgba(255, 184, 0, 0.2); }
	.dark .pricing-card.featured { box-shadow: 0 0 30px rgba(255, 184, 0, 0.3); }
	.pricing-card.featured:hover { transform: scale(1.05) translateY(-10px); }
	.testimonial-wrapper { max-width: 800px; margin: 0 auto; height: 300px; overflow: hidden; position: relative; }
	.testimonial-wrapper::after { content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 100px; background: linear-gradient(to top, #F5F5F5, transparent); pointer-events: none; }
	.dark .testimonial-wrapper::after { background: linear-gradient(to top, #111111, transparent); }
	.testimonial-carousel { animation: vertical-scroll 30s linear infinite; }
	.testimonial-item { padding: 40px 0; }
	.testimonial-item blockquote { font-size: 1.8rem; font-style: italic; font-weight: 300; margin-bottom: 20px; border-left: 3px solid #FFB800; padding-left: 20px; }
	.testimonial-item cite { font-size: 1rem; font-weight: 700; color: #FFB800; }
	@keyframes vertical-scroll { 0% { transform: translateY(0); } 100% { transform: translateY(-50%); } }
	.marquee { width: 100%; overflow: hidden; background-color: #FFB800; color: #1A1A1A; padding: 0.2rem 0; white-space: nowrap; }
	.marquee-content { display: flex; }
	.marquee-group { animation: marquee-scroll 30s linear infinite; }
	@keyframes marquee-scroll { from { transform: translateX(0%); } to { transform: translateX(-50%); } }
	.bento-item .comparison-after-img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; clip-path: polygon(50% 0, 100% 0, 100% 100%, 50% 100%); z-index: 1; }
	.bento-item .slider-handle { position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 4px; height: 100%; background-color: #FFB800; cursor: ew-resize; z-index: 10; opacity: 1; transition: opacity 0.4s ease; }
	.slider-handle::after { content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 40px; height: 40px; border: 3px solid #FFB800; border-radius: 50%; background-color: rgba(16, 16, 16, 0.7); backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); }
	 .slider-handle::before { content: '↔'; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: #FFB800; font-size: 1.2rem; font-weight: bold; z-index: 1; }
	.bento-grid-container { perspective: 2000px; }
	.bento-item { background-size: cover; background-position: center; border-radius: 1.5rem; position: relative; overflow: hidden; transform-style: preserve-3d; transition: box-shadow 0.5s ease; cursor: pointer; will-change: transform, box-shadow; transform: translateZ(0); user-select: none; -webkit-user-select: none; }
	.bento-item:hover { box-shadow: 0 0 20px -5px rgba(255, 184, 0, 0.3), 0 10px 30px -10px rgba(255, 184, 0, 0.5), 0 40px 80px -20px rgba(0, 0, 0, 0.7); }
	.bento-item::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; border-radius: 1.5rem; border: 2px solid transparent; background: conic-gradient(from var(--angle), #ffb800, #ffdd77, #ffb800, #ff8c00, #ffb800) border-box; -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; animation: rotate-angle 5s linear infinite; opacity: 0; transition: opacity 0.5s ease; z-index: 2; }
	.bento-item:hover::before { opacity: 1; }
	@property --angle { syntax: '<angle>'; initial-value: 0deg; inherits: false; }
	@keyframes rotate-angle { to { --angle: 360deg; } }
	.bento-glare { position: absolute; top: 0; left: 0; width: 150%; height: 150%; background: radial-gradient(circle at center, rgba(255, 221, 119, 0.4) 0%, rgba(255, 184, 0, 0) 40%); transform: translate(-50%, -50%); opacity: 0; pointer-events: none; z-index: 3; transition: opacity 0.5s; }
	.bento-item:hover .bento-glare { opacity: 1; }
	.bento-overlay { position: absolute; bottom: 0; left: 0; right: 0; background: rgba(16, 16, 16, 0.5); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); padding: 0.5rem 1.5rem; transform: translateY(100%); transition: transform 0.5s cubic-bezier(0.25, 1, 0.5, 1); z-index: 4; border-top: 1px solid rgba(255, 184, 0, 0.2); }
	.bento-item:hover .bento-overlay { transform: translateY(0); }
	.bento-front-layer { position: absolute; top: 1rem; left: 1rem; right: 1rem; bottom: 40%; background-size: contain; background-repeat: no-repeat; background-position: center; transform: translateZ(60px); pointer-events: none; z-index: 5; opacity: 0.8; transition: transform 0.5s cubic-bezier(0.25, 1, 0.5, 1); }
	.bento-item:hover .bento-front-layer { transform: translateZ(80px) scale(1.05); }
	/* --- FINAL & COMPLETE BENTO GRID LAYOUT --- */

	/* Grid container definition */
	.bento-grid {
		display: grid;
		gap: 2.0rem;
		grid-template-columns: repeat(6, 1fr);
		grid-template-rows: repeat(6, 1fr);
		aspect-ratio: 1 / 1; /* This makes the grid container square */
	}

	/* Reset default item placement */
	.bento-item {
		grid-column: auto / auto;
		grid-row: auto / auto;
	}

	/* --- PLACEMENT RULES (Where items go) --- */
	.bento-item:nth-child(1)  { grid-column: 1 / 3; grid-row: 1 / 3; }
	.bento-item:nth-child(2)  { grid-column: 3 / 5; grid-row: 1 / 2; }
	.bento-item:nth-child(3)  { grid-column: 3 / 5; grid-row: 2 / 3; }
	.bento-item:nth-child(4)  { grid-column: 5 / 6; grid-row: 1 / 3; }
	.bento-item:nth-child(5)  { grid-column: 6 / 7; grid-row: 1 / 3; }
	.bento-item:nth-child(6)  { grid-column: 1 / 3; grid-row: 3 / 4; }
	.bento-item:nth-child(7)  { grid-column: 1 / 3; grid-row: 4 / 5; }
	.bento-item:nth-child(8)  { grid-column: 3 / 5; grid-row: 3 / 4; }
	.bento-item:nth-child(9)  { grid-column: 3 / 5; grid-row: 4 / 5; }
	.bento-item:nth-child(10) { grid-column: 5 / 7; grid-row: 3 / 4; }
	.bento-item:nth-child(11) { grid-column: 5 / 7; grid-row: 4 / 5; }
	.bento-item:nth-child(12) { grid-column: 1 / 2; grid-row: 5 / 7; }
	.bento-item:nth-child(13) { grid-column: 2 / 3; grid-row: 5 / 7; }
	.bento-item:nth-child(14) { grid-column: 3 / 5; grid-row: 5 / 6; }
	.bento-item:nth-child(15) { grid-column: 3 / 5; grid-row: 6 / 7; }
	.bento-item:nth-child(16) { grid-column: 5 / 7; grid-row: 5 / 7;aspect-ratio: 1 / 1; }
	/* --- MOBILE BENTO GRID LAYOUT --- */
	@media (max-width: 768px) {
		.bento-grid {
			grid-template-columns: repeat(2, 1fr); /* 2 columns for mobile */
			grid-template-rows: auto; /* Let rows size automatically */
			aspect-ratio: auto; /* Remove the square aspect ratio */
		}

		/* --- MOBILE PLACEMENT RULES --- */
		.bento-item {
			grid-column: span 1; /* Each item takes one column */
			aspect-ratio: 1 / 1; /* Make all items square */
		}

		.bento-item:nth-child(1) { grid-column: 1 / 3; grid-row: 1; aspect-ratio: 16 / 9; } /* Full width Landscape */
		.bento-item:nth-child(2) { grid-column: 1 / 2; grid-row: 2; }
		.bento-item:nth-child(3) { grid-column: 2 / 3; grid-row: 2; }
		.bento-item:nth-child(4) { grid-column: 1 / 3; grid-row: 3; aspect-ratio: 16 / 9; } /* Full width Landscape */
		.bento-item:nth-child(5) { grid-column: 1 / 2; grid-row: 4; }
		.bento-item:nth-child(6) { grid-column: 2 / 3; grid-row: 4; }
		.bento-item:nth-child(7) { grid-column: 1 / 3; grid-row: 5; aspect-ratio: 16 / 9; } /* Full width Landscape */
		.bento-item:nth-child(8) { grid-column: 1 / 2; grid-row: 6; }
		.bento-item:nth-child(9) { grid-column: 2 / 3; grid-row: 6; }
		.bento-item:nth-child(10) { grid-column: 1 / 3; grid-row: 7; aspect-ratio: 16 / 9; } /* Full width Landscape */
		.bento-item:nth-child(11) { grid-column: 1 / 2; grid-row: 8; }
		.bento-item:nth-child(12) { grid-column: 2 / 3; grid-row: 8; }
		.bento-item:nth-child(13) { grid-column: 1 / 3; grid-row: 9; aspect-ratio: 16 / 9; } /* Full width Landscape */
		.bento-item:nth-child(14) { grid-column: 1 / 2; grid-row: 10; }
		.bento-item:nth-child(15) { grid-column: 2 / 3; grid-row: 10; }
		.bento-item:nth-child(16) { grid-column: 1 / 3; grid-row: 11; aspect-ratio: 16 / 9; } /* Full width Landscape */
	}
	.project-modal { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(16, 16, 16, 0.7); backdrop-filter: blur(15px); -webkit-backdrop-filter: blur(15px); z-index: 110; display: flex; justify-content: center; align-items: center; opacity: 0; pointer-events: none; transition: opacity 0.4s ease; padding: 1rem; }
	.project-modal.open { opacity: 1; pointer-events: auto; }
	.project-modal-content {
		position: relative;
		background-color: #1A1A1A;
		border: 1px solid #FFB800;
		border-radius: 1rem;
		width: 100%;
		display: flex;
		flex-direction: column;
		transform: scale(0.95);
		transition: transform 0.4s ease;
		overflow: hidden;
	}
	.project-modal.open .project-modal-content { transform: scale(1); }
	#modal-close-btn { position: absolute; top: 1rem; right: 1.5rem; font-size: 2.5rem; z-index: 120; color: #aaa; cursor: pointer; transition: color 0.3s, transform 0.3s; }
	#modal-close-btn:hover { color: #FFB800; transform: rotate(90deg); }
	.modal-slider-container { position: relative; width: 100%; height: 100%; user-select: none; -webkit-user-select: none; }
	.modal-slider-container img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; }
	.modal-slider-container .img-after { clip-path: polygon(50% 0, 100% 0, 100% 100%, 50% 100%); }
	.modal-slider-container .slider-handle { position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 4px; height: 100%; background-color: #FFB800; cursor: ew-resize; z-index: 10; }
	.modal-slider-container .slider-handle::after { content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 50px; height: 50px; border: 3px solid #FFB800; border-radius: 50%; background-color: rgba(16, 16, 16, 0.7); backdrop-filter: blur(5px); }
	.modal-slider-container .slider-handle::before { content: '↔'; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: #FFB800; font-size: 1.5rem; }		
	.stats-v2-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem; max-width: 1280px; margin: auto; }
	@media (min-width: 768px) { .stats-v2-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
	.stats-v2-item h3 { font-family: 'Poppins', sans-serif; font-size: 2.25rem; font-weight: 700; color: #FFB800; }
	@media (min-width: 768px) { .stats-v2-item h3 { font-size: 3rem; } }
	.shape-btn:focus, .nav-arrow:focus, #modal-close-btn:focus { outline: 2px solid #FFB800; outline-offset: 2px; box-shadow: 0 0 0 4px rgba(255, 184, 0, 0.4); }
	#quick-quote-btn { position: fixed; bottom: 2rem; left: 2rem; z-index: 50; transition: transform 0.3s ease; }
	#quick-quote-btn:hover { transform: scale(1.1); }
	#quote-modal { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(16, 16, 16, 0.7); backdrop-filter: blur(15px); z-index: 110; display: flex; justify-content: center; align-items: center; opacity: 0; pointer-events: none; transition: opacity 0.4s ease; }
	#quote-modal.open { opacity: 1; pointer-events: auto; }
	/* MODIFIED: Removed background and border, which are now handled by Tailwind classes */
	#quote-modal-content {
		padding: 2rem;
		border-radius: 1rem;
		width: 90%;
		max-width: 500px;
		position: relative;
		transform: scale(0.95);
		transition: transform 0.4s ease;
	}

	/* MODIFIED: Added theme-aware styles for the close button */
	#modal-close-btn,
	#quote-modal-close-btn {
		position: absolute;
		top: 1.5rem;
		right: 1.5rem;
		z-index: 120;
		/* Light theme default */
		color: #6b7280; /* text-gray-500 */
		background-color: rgba(229, 231, 235, 0.8); /* bg-gray-200/80 */
		width: 48px;
		height: 48px;
		border-radius: 50%;
		display: flex;
		justify-content: center;
		align-items: center;
		transition: color 0.3s, transform 0.4s, background-color 0.3s;
	}

	.dark #modal-close-btn,
	.dark #quote-modal-close-btn {
		/* Dark theme override */
		color: #aaa;
		background-color: rgba(34, 34, 34, 0.5);
	}

	#modal-close-btn:hover,
	#quote-modal-close-btn:hover {
		/* Light theme hover */
		color: #111827; /* text-gray-900 */
		background-color: #d1d5db; /* bg-gray-300 */
		transform: rotate(180deg) scale(1.1);
	}

	.dark #modal-close-btn:hover,
	.dark #quote-modal-close-btn:hover {
		/* Dark theme hover override */
		color: #FFFFFF;
		background-color: #FFB800;
	}
	#quote-modal.open #quote-modal-content { transform: scale(1); }
	#quote-modal-close-btn { position: absolute; top: 0.5rem; right: 1rem; font-size: 2rem; color: #aaa; cursor: pointer; }
	
	
	.interactive-shadow { transition: filter 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94); filter: drop-shadow(0 10px 8px rgba(0, 0, 0, 0.1)); }
	.interactive-shadow:hover { filter: drop-shadow(0 20px 25px rgba(255, 184, 0, 0.4)); }		
	.price-unit {
		font-size: 1rem;          /* A smaller, more subtle size */
		font-weight: 400;         /* Normal font weight, not bold */
		vertical-align: 0.25rem; /* Aligns perfectly with the bottom of the price text */
		margin-left: 0.25rem;     /* Adds a touch of space for separation */
		color: #6b7280;          /* A nice, subtle gray for light mode */
	}

	.dark .price-unit {
		color: #9ca3af; /* A lighter gray for dark mode */
	}

	/* --- Enhanced Software Logos Marquee --- */
	.logos-marquee {
		width: 100%;
		overflow: hidden;
		position: relative;
		padding: 2rem 0; /* This adds space above and below the logos */
		-webkit-mask-image: linear-gradient(to right, transparent, black 20%, black 80%, transparent);
		mask-image: linear-gradient(to right, transparent, black 20%, black 80%, transparent);
	}

	.logos-marquee-content {
		display: flex;
		align-items: center;
		width: fit-content;
		/* The animation that makes it scroll */
		animation: marquee-scroll 40s linear infinite;
	}

	.logos-marquee:hover .logos-marquee-content {
		/* Pauses the animation on hover for better UX */
		animation-play-state: paused;
	}

	@keyframes marquee-scroll {
		from { transform: translateX(0%); }
		to { transform: translateX(-50%); }
	}

	.logos-marquee-content img {
		max-height: 100px; /* Sets a MAXIMUM height, preventing cropping */
		height: auto;       /* Allows height to adjust to maintain aspect ratio */
		width: auto;        /* Allows width to adjust automatically */
		margin: 0 9rem; 
		filter: grayscale(1) opacity(50%); 
		transition: all 0.4s ease-in-out;
	}

	.logos-marquee-content img:hover {
		filter: grayscale(0) opacity(100%);
		transform: scale(1.1) translateY(-4px); /* Lift and scale effect */
	}

	/* --- Tooltip Styles --- */
	[data-tooltip] {
		position: relative;
		cursor: pointer;
	}

	[data-tooltip]::after {
		content: attr(data-tooltip);
		position: absolute;
		bottom: 120%; /* Position above the logo */
		left: 50%;
		transform: translateX(-50%);
		
		background-color: #1A1A1A; /* Dark background */
		color: #F5F5F5;
		font-family: 'Inter', sans-serif;
		font-size: 0.875rem;
		font-weight: 500;
		padding: 0.5rem 1rem;
		border-radius: 0.5rem;
		white-space: nowrap;
		box-shadow: 0 4px 15px rgba(0,0,0,0.2);
		
		opacity: 0;
		pointer-events: none;
		transition: opacity 0.3s ease, bottom 0.3s ease;
	}

	/* Dark mode style for the tooltip */
	.dark [data-tooltip]::after {
		background-color: #F5F5F5;
		color: #1A1A1A;
	}

	/* Show the tooltip on hover */
	[data-tooltip]:hover::after {
		opacity: 1;
		bottom: 140%; /* Animate tooltip upwards on hover */
	}
	.logos-marquee {
		position: relative; /* Required for the spotlight pseudo-element */
	}

	.logos-marquee::after {
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		/* The spotlight is a radial gradient positioned by CSS variables */
		background: radial-gradient(
			circle 200px at var(--spotlight-x) var(--spotlight-y),
			rgba(255, 255, 255, 0.15),
			transparent 40%
		);
		pointer-events: none; /* Allows clicks to go through to the logos */
		opacity: 0;
		transition: opacity 0.4s ease-out;
	}

	/* On hover, the spotlight becomes visible */
	.logos-marquee:hover::after {
		opacity: 1;
	}

	/* Dark mode version of the spotlight */
	.dark .logos-marquee::after {
		background: radial-gradient(
			circle 200px at var(--spotlight-x) var(--spotlight-y),
			rgba(255, 184, 0, 0.1),
			transparent 40%
		);
	}
	@media (max-width: 768px) {
		/*
		  On mobile devices, this forces the header to always have a
		  background, ensuring the links are readable.
		*/
		#header {
			background-color: rgba(255, 255, 255, 0.8); /* bg-white/80 for light mode */
			backdrop-filter: blur(12px);
			-webkit-backdrop-filter: blur(12px);
		}

		.dark #header {
			background-color: rgba(0, 0, 0, 0.3); /* dark:bg-black/30 for dark mode */
		}
	}
	.mobile-nav-link {
		position: relative;
		display: flex;
		align-items: center;
		transform: translateY(20px); /* Prepare for animation */
		opacity: 0; /* Prepare for animation */
	}

	.mobile-nav-link .link-number {
		font-size: 1rem;
		font-weight: 700;
		color: #FFB800;
		margin-right: 1.5rem;
		transition: transform 0.3s ease;
	}

	/* Animated underline effect */
	.mobile-nav-link::after {
		content: '';
		position: absolute;
		bottom: -5px;
		left: 0;
		width: 100%;
		height: 2px;
		background-color: #FFB800;
		transform: scaleX(0);
		transform-origin: left;
		transition: transform 0.4s cubic-bezier(0.23, 1, 0.32, 1);
	}

	.mobile-nav-link:hover {
		color: #FFB800;
	}

	.mobile-nav-link:hover::after {
		transform: scaleX(1);
	}
	/* --- Add a soft shadow behind the hero text for readability --- */

	/* This makes the text container a positioning reference for the shadow */
	.hero-text-container {
		position: relative;
		z-index: 10; /* Ensures it stays on top of the 3D object */
	}

	/* This creates the actual shadow gradient pseudo-element */
	.hero-text-container::before {
		content: '';
		position: absolute;
		top: 50%;
		left: 50%;
		/* This makes the shadow oval-shaped, matching the text block */
		width: 	1000px; 
		height: 400px;
		transform: translate(-50%, -50%);
		
		/* The radial gradient is the core of the effect */
		background: radial-gradient(
			ellipse at center, 
			rgba(0, 0, 0, 0.3) 0%,    /* Darker in the middle */
			rgba(0, 0, 0, 0) 70%     /* Fades to transparent at the edges */
		);
		
		/* This ensures the shadow is behind the text */
		z-index: -1;
	}

	/* Make the shadow a bit stronger in dark mode */
	.dark .hero-text-container::before {
		background: radial-gradient(
			ellipse at center, 
			rgba(0, 0, 0, 0.6) 0%,
			rgba(0, 0, 0, 0) 70%
		);
	}	

	/* --- Styles for Horizontal Scrolling Section --- */
	.projects-horizontal { padding: 0; overflow: hidden; }
	.projects-horizontal-container { width: 500vw; height: 100vh; display: flex; flex-wrap: nowrap; }

	.projects-intro {
		width: 100vw;
		height: 100vh;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.intro-text-content {
		padding: 0 1rem;
		text-align: center;
	}

	.project-panel {
		width: 100vw;
		height: 100vh;
		display: flex;
		justify-content: center;
		align-items: center;
		padding: 0;
	}
	.project-card {
		width: 80vw;
		max-width: 1280px;
		height: 80vh;
		background-color: #FFFFFF;
		overflow: hidden;
		position: relative;
		text-decoration: none;
		border-radius: 3.0rem;
		transform: translateZ(0) scale(1);
		transition: transform 0.6s cubic-bezier(0.2, 0.9, 0.3, 1), box-shadow 0.6s cubic-bezier(0.2, 0.9, 0.3, 1);
	}
	/* Minimalist and elegant hover state for the card */
	.project-card:hover {
		transform: scale(1.02);
		box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15), 0 0 20px rgba(255, 184, 0, 0.3); /* Soft, dual-color shadow for depth and glow */
	}

	.card-aspect-landscape {
		aspect-ratio: 3508 / 2480;
	}
	.card-aspect-portrait {
		aspect-ratio: 2480 / 3508;
	}
	.project-image-wrapper {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		overflow: hidden;
	}
	.project-image {
		width: 100%;
		height: 100%;
		background-size: contain;
		background-position: center;
		background-repeat: no-repeat;
		transition: transform 0.6s cubic-bezier(0.2, 0.9, 0.3, 1);
		transform-origin: center center;
		will-change: transform;
	}
	/* Minimalist image animation on hover */
	.project-card:hover .project-image {
		transform: scale(1.05); /* Gentle zoom in */
	}

	@media (max-width: 768px) and (orientation: portrait) {
		.project-card {
			border-radius: 1.5rem;
			width: 90vw;
			height: auto;
			aspect-ratio: 9 / 16;
		}
		.project-card:hover {
			transform: scale(1);
		}
		.projects-intro h2 {
			font-size: 3.75rem;
		}
		.projects-intro p {
			font-size: 1rem;
		}
	}

	@media (max-width: 1024px) {
	  .projects-horizontal {
		overflow-x: scroll; /* Enables horizontal scrolling */
		-webkit-overflow-scrolling: touch; /* Adds smooth momentum on iOS */
		scrollbar-width: none; /* Hides scrollbar for Firefox */
		-ms-overflow-style: none;  /* Hides scrollbar for IE/Edge */
	  }

	  /* Hides scrollbar for Chrome, Safari, and newer browsers */
	  .projects-horizontal::-webkit-scrollbar {
		display: none;
	  }

	  /* The container now needs a specific width to hold all panels */
	  .projects-horizontal-container {
		  width: 500vw;
	  }
	}	
	
	/* --- Styles for the new fullscreen image modal --- */
	#selected-work-modal .fullscreen-image-container {
		width: 100%;
		height: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		padding: 2rem;
	}

	#selected-work-modal-image {
		display: block;
		max-width: 100%;
		max-height: 100%;
		width: auto;
		height: auto;
		object-fit: contain;
		border-radius: 0.5rem;
		box-shadow: 0 10px 30px rgba(0,0,0,0.5);
	}

	#selected-work-modal-close-btn {
		position: absolute;
		top: 1.5rem;
		right: 1.5rem;
		z-index: 120;
		color: #aaa;
		background-color: rgba(34, 34, 34, 0.5); /* Dark background for visibility */
		width: 48px;
		height: 48px;
		border-radius: 50%;
		display: flex;
		justify-content: center;
		align-items: center;
		transition: color 0.3s, transform 0.4s, background-color 0.3s;
		cursor: pointer;
	}

	#selected-work-modal-close-btn:hover {
		color: #FFFFFF;
		background-color: #FFB800;
		transform: rotate(180deg) scale(1.1);
	}
	
	/* --- START: ADD THIS CODE FOR SELECTED WORKS INFO BAR --- */
	.project-card .project-card-overlay {
		position: absolute;
		bottom: 0;
		left: 0;
		right: 0;
		background: rgba(16, 16, 16, 0.5);
		backdrop-filter: blur(10px);
		-webkit-backdrop-filter: blur(10px);
		padding: 20px 30px 20px;
		z-index: 4;
		border-top: 1px solid rgba(255, 184, 0, 0.2);
		transform: translateY(100%);
		transition: transform 0.5s cubic-bezier(0.25, 1, 0.5, 1);
	}
	.project-card:hover .project-card-overlay {
		transform: translateY(0);
	}
	.project-card-overlay h3 {
		color: white;
		font-family: 'Poppins', sans-serif;
		font-weight: bold;
		font-size: 1.5rem;
	}
	.project-card-overlay p {
		color: #FFB800;
		font-family: 'Inter', sans-serif;
		font-size: 1.2rem;
	}
	/* --- END: ADD THIS CODE --- */
	
	/* --- START: CURSOR STYLE --- */
	* {
		cursor: none !important;
	}
	.cursor-dot {
		position: fixed;
		top: 0;
		left: 0;
		width: 6px;
		height: 6px;
		background-color: white;
		border-radius: 50%;
		transform: translate(-50%, -50%);
		pointer-events: none;
		z-index: 10000;
		mix-blend-mode: difference;
	}
	.cursor-follower {
		position: fixed;
		top: 0;
		left: 0;
		width: 30px;
		height: 30px;
		background-color: rgba(255, 255, 255, 0.2);
		border: 1px solid #FFB800;
		border-radius: 50%;
		transform: translate(-50%, -50%);
		pointer-events: none;
		z-index: 9999;
		transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1),
					width 0.4s cubic-bezier(0.16, 1, 0.3, 1),
					height 0.4s cubic-bezier(0.16, 1, 0.3, 1),
					border-radius 0.4s cubic-bezier(0.16, 1, 0.3, 1),
					background-color 0.4s ease;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.dark .cursor-follower {
		border-color: #FFB800;
	}
	.cursor-follower.--clicked {
		transform: translate(-50%, -50%) scale(0.9);
	}
	#cursor-text-element {
		/* Positioning styles to make the text follow the cursor */
		position: fixed;
		top: 0;
		left: 0;
		pointer-events: none;
		z-index: 10000;
		transform: translate(-50%, -50%);

		/* Text styling */
		font-family: 'Poppins', sans-serif;
		font-size: 1rem;
		font-weight: 700;
		color: #FFB800; /* Base color for the text */
		opacity: 0;
		transition: opacity 0.4s ease;
	}

	#cursor-text-element.visible {
		opacity: 1;
	}
	body.cursor--link .cursor-follower {
		transform: translate(-50%, -50%) scale(1.5);
		background-color: rgba(255, 255, 255, 0.3);
	}
	body.cursor--text .cursor-follower {
		width: 6px;
		height: 40px;
		border-radius: 4px;
		transform: translate(-50%, -50%) scaleY(1.2);
	}
	body.cursor--media .cursor-follower,
		body.cursor--media-drag .cursor-follower {
		width: 90px;
		height: 90px;
		background-color: solid #FFB800;
		border-color: #FFB800;
		mix-blend-mode: normal;
	}
	@media (pointer: coarse) {
		.cursor-dot, .cursor-follower { display: none; }
		body { cursor: auto; }
	}
	#text-shape {
		float: right;
		width: 30%;
		height: 100%;
		shape-outside: polygon(100% 0, 100% 100%, 0% 100%, 0% 75%, 100% 50%, 0% 25%, 0% 0%);
	}
	/* Add this new class */
	body.cursor-default * {
		cursor: auto !important;
	}
	/* --- START: CSS for Typing Effect --- */
	#designer-bio::after {
		content: '▋'; /* This is the cursor character */
		display: inline-block;
		margin-left: 0.15rem;
		animation: blink-caret 0.75s step-end infinite;
	}

	@keyframes blink-caret {
		from, to { color: transparent; }
		50% { color: #FFB800; } /* Blinking cursor color */
	}

	/* Hide the cursor when the animation is complete */
	#designer-bio.finished::after {
		display: none;
	}

	#about .about-text p {
		opacity: 0;
	}

	/* --- END: CSS for Typing Effect --- */
	
	/* --- START: Styles for Signature PNG Reveal --- */
	#signature-container {
		/* Hides the signature initially before the animation starts */
		opacity: 0;
		clip-path: inset(0 100% 0 0);
	}
	/* --- END: Styles for Signature PNG Reveal --- */
	
	/* --- START: Reveal Effect --- */
	.reveal {
		opacity: 0;
		transform: translateY(50px);
		transition: opacity 0.8s ease-out, transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
	}
	.reveal.visible { opacity: 1; transform: translateY(0); }
	/* --- END: Reveal Effect --- */
				
	/* Style the select element to look like text */
	#quote-service {
		appearance: none; /* remove default arrow */
		-webkit-appearance: none;
		-moz-appearance: none;
		text-align: center; /* center the text */
		background-image: none !important; /* remove custom arrow if any */
		cursor: default !important; /* Remove the pointer cursor */
	}

	/* Make arrow buttons easy to click */
	#quote-service-prev, #quote-service-next {
		z-index: 10;
	}
	
	/* Style the select element to look like text */
	#quote-service {
		appearance: none;
		-webkit-appearance: none;
		-moz-appearance: none;
		text-align: center;
		background-image: none !important;
		pointer-events: none; /* Add this line */
	}
	/* --- START: Quick Quote Modal Autofill Styles --- */

	/* (1) This rule targets the modal inputs in LIGHT mode */
	#quote-modal input:-webkit-autofill,
	#quote-modal input:-webkit-autofill:hover,
	#quote-modal input:-webkit-autofill:focus,
	#quote-modal input:-webkit-autofill:active {
		-webkit-text-fill-color: #1A1A1A !important;
		box-shadow: 0 0 0 1000px #FFFFFF inset !important; 
		border-color: #FFB800 !important;
		transition: background-color 5000s ease-in-out 0s;
	}

	/* (2) This rule targets the modal inputs in DARK mode */
	.dark #quote-modal input:-webkit-autofill,
	.dark #quote-modal input:-webkit-autofill:hover,
	.dark #quote-modal input:-webkit-autofill:focus,
	.dark #quote-modal input:-webkit-autofill:active {
		-webkit-text-fill-color: #FFFFFF !important;
		box-shadow: 0 0 0 1000px #222222 inset !important;
		border-color: #FFB800 !important;
		transition: background-color 5000s ease-in-out 0s;
	}

	/* --- END: Quick Quote Modal Autofill Styles --- */
	
	/* --- Input Container --- */
	.input-container, .textarea-container {
		position: relative;
		max-width: 100%;
		margin: 0 auto;
	}

	/* --- Base (Dark Mode) Styles --- */
	.animated-input, .animated-textarea {
		width: 100%;
		padding: 16px 45px;
		background-color: #1A1A1A;
		color: #ffffff;
		font-size: 16px;
		font-weight: 400;
		outline: none;
		position: relative;
		z-index: 1;
		border: 2px solid rgba(255, 255, 255, 0.3);
		border-radius: 10px;
		transition: border-color 0.3s ease, background-color 0.3s ease;
	}
	.animated-textarea {
		resize: none;
		min-height: 120px;
		padding-top: 16px;
	}

	/* --- Light Mode Styles --- */
	html:not(.dark) .animated-input,
	html:not(.dark) .animated-textarea {
		background-color: #f3f4f6; /* Light gray */
		color: #1A1A1A;           /* Dark text */
		border-color: #d1d5db;     /* Medium gray border */
	}

	/* --- Labels --- */
	.animated-label {
		position: absolute; left: 45px; top: 18px;
		color: #ffffff;
		font-size: 16px; font-weight: 400;
		pointer-events: none;
		transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
		padding: 0 5px; z-index: 2;
	}
	html:not(.dark) .animated-label { color: #4b5563; }

	/* --- Icons --- */
	.input-icon {
		position: absolute; left: 15px; top: 50%;
		transform: translateY(-50%);
		width: 20px; height: 20px;
		stroke: rgba(255, 255, 255, 0.7);
		transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
		z-index: 2;
	}
	.textarea-container .input-icon { top: 24px; transform: translateY(0); }
	html:not(.dark) .input-icon { stroke: #6b7280; }

	/* --- Fake Placeholder Styles --- */
	.fake-placeholder {
		position: absolute;
		top: 18px;
		left: 45px;
		color: #888888; /* Visible gray for dark mode */
		font-size: 16px;
		font-weight: 400;
		pointer-events: none;
		transition: opacity 0.3s ease;
		z-index: 1;
		opacity: 0; /* The placeholder is now hidden by default */
	}

	/* Sets a different gray for light mode */
	html:not(.dark) .fake-placeholder {
		color: #a0a0a0;
	}

	/* Shows the placeholder ONLY when the box is clicked AND empty */
	.animated-input:focus:placeholder-shown ~ .fake-placeholder,
	.animated-textarea:focus:placeholder-shown ~ .fake-placeholder {
		opacity: 1;
	}

	/* --- Locked Field State --- */
	#selected-service[readonly] {
		pointer-events: none;
		opacity: 0.6;
	}
	html:not(.dark) #selected-service[readonly] {
		background-color: #e5e7eb; /* Disabled gray for light mode */
		opacity: 1; /* Reset opacity for light mode */
	}

	/* --- ANIMATION STATES (Focus, Autofill, etc.) --- */
	.animated-input::placeholder, .animated-textarea::placeholder { color: transparent; }

	/* Floated Label Style */
	.animated-input:focus + .animated-label,
	.animated-input:not(:placeholder-shown) + .animated-label,
	.animated-input:-webkit-autofill + .animated-label,
	.animated-textarea:focus + .animated-label,
	.animated-textarea:not(:placeholder-shown) + .animated-label {
		top: -12px; left: 15px; font-size: 12px;
		color: #111111; font-weight: 700; text-transform: uppercase;
		background-color: #FFB800;
		border-radius: 5px; padding: 2px 8px;
	}

	/* Focus or Filled Style for DARK mode (and as a base) */
	.animated-input:focus,
	.animated-textarea:focus,
	.animated-input:not(:placeholder-shown),
	.animated-textarea:not(:placeholder-shown) {
		border-color: #FFB800;
	}

	/* CORRECTED: Focus or Filled Style specifically for LIGHT mode */
	html:not(.dark) .animated-input:focus,
	html:not(.dark) .animated-textarea:focus,
	html:not(.dark) .animated-input:not(:placeholder-shown),
	html:not(.dark) .animated-textarea:not(:placeholder-shown) {
		background-color: #f5f5f5; /* A clean white background on focus/fill */
		border-color: #FFB800;   /* The persistent yellow border */
	}

	/* Icon Animation */
	.animated-input:focus ~ .input-icon,
	.animated-input:not(:placeholder-shown) ~ .input-icon,
	.animated-input:-webkit-autofill ~ .input-icon,
	.animated-textarea:focus ~ .input-icon,
	.animated-textarea:not(:placeholder-shown) ~ .input-icon { stroke: #FFB800; }
	.animated-input:focus ~ .input-icon,
	.animated-input:not(:placeholder-shown) ~ .input-icon,
	.animated-input:-webkit-autofill ~ .input-icon { transform: translateY(-50%) scale(1.1); }
	.textarea-container .animated-textarea:focus ~ .input-icon,
	.textarea-container .animated-textarea:not(:placeholder-shown) ~ .input-icon { transform: scale(1.1); }

	/* Autofill Styles */
	.animated-input:-webkit-autofill,
	.animated-input:-webkit-autofill:hover,
	.animated-input:-webkit-autofill:focus,
	.animated-input:-webkit-autofill:active {
		box-shadow: 0 0 0 40px #332a00 inset !important;
		-webkit-text-fill-color: #fff !important;
		border-color: #FFB800 !important;
		transition: background-color 5000s ease-in-out 0s;
	}
	html:not(.dark) .animated-input:-webkit-autofill,
	html:not(.dark) .animated-input:-webkit-autofill:hover,
	html:not(.dark) .animated-input:-webkit-autofill:focus,
	html:not(.dark) .animated-input:-webkit-autofill:active {
		box-shadow: 0 0 0 40px #fef3c7 inset !important; /* Light amber */
		-webkit-text-fill-color: #1A1A1A !important;
		border-color: #FFB800 !important;
	}
	/* Hide the placeholder ONLY when the input has text */
	.animated-input:not(:placeholder-shown) ~ .fake-placeholder {
		opacity: 0;
	}
	
	.label-description {
		/* Sets the light gray color for dark mode */
		color: #888888;
		/* Makes the font regular weight instead of bold */
		font-weight: 400;
	}

	/* Sets a slightly different gray for light mode */
	html:not(.dark) .label-description {
		color: #9ca3af;
	}
	
	#success-modal {
		transition: opacity 0.3s ease;
	}

	#success-modal.hidden {
		display: none;
	}
	.lang-btn {
		padding: 0.25rem 0.75rem;
		border-radius: 9999px;
		font-weight: 600;
		transition: all 0.2s ease-in-out;
		background-color: transparent;
		border: 2px solid #FFB800;
		color: #FFB800;
	}
	.lang-btn.active, .lang-btn:hover {
		background-color: #FFB800;
		color: #1A1A1A;
	}
	
	/* ================================================== */
	/* --- MASTER RTL FIXES FOR ARABIC LAYOUT (Final) --- */
	/* ================================================== */
	
	@font-face {
	  font-family: 'Cairo';
	  src: url('fonts/Cairo/Cairo-ExtraLight.woff2') format('woff2');
	  font-weight: 200;
	  font-style: normal;
	}
	
	@font-face {
	  font-family: 'Kufam';
	  src: url('fonts/Kufam/Kufam-ExtraBold.woff2') format('woff2');
	  font-weight: 700;
	  font-style: normal;
	}
	
	/* --- STYLES FOR BODY TEXT --- */
	html[dir="rtl"] body {
		font-family: 'Cairo', sans-serif;
		font-weight: 200;
	}
	
	html[dir="rtl"] p,
	html[dir="rtl"] li {
		font-size: 1.2rem; /* Adjust this value as needed */
		line-height: 1.9;
	}

	/* --- STYLES FOR ALL HEADLINES --- */
	/* This rule sets the font for all headlines */
	html[dir="rtl"] h1,
	html[dir="rtl"] h2,
	html[dir="rtl"] h3,
	html[dir="rtl"] .font-title {
		font-family: 'Kufam', sans-serif; /* Or '29LT Azel' if you prefer */
	}

	/* --- INDIVIDUAL SIZES FOR HEADLINES --- */
	/* This allows you to fine-tune the size of each headline level */
	html[dir="rtl"] h1 {
		font-size: 4.5rem;
	}
	html[dir="rtl"] h2 {
		font-size: 4.0rem;
	}
	html[dir="rtl"] h3 {
		font-size: 1.5rem;
	}
	
	html[dir="rtl"] .project-card-overlay p {
		font-family: 'Cairo', sans-serif;
		/* You can also adjust font-size or line-height here if needed */
		/* font-size: 1.2rem; */
	}
	
	/* --- Bento Grid Font Size Fixes --- */
	
	html[dir="rtl"] .bento-overlay h3 {
		font-size: 1.1rem; /* The original size was 1rem (text-base). Adjust as you like. */
	}
	
	html[dir="rtl"] .bento-overlay p {
		font-size: 0.9rem; /* The original size was 0.75rem (text-xs). Adjust as you like. */
	}
	
	html[dir="rtl"] #pricing .pricing-card .text-5xl {
		font-size: 2.5rem; /* This is equivalent to text-7xl. Adjust as needed. */
	}
	
	html[dir="rtl"] .marquee-content span {
		font-family: 'Poppins', sans-serif;
	}
	html[dir="rtl"] #header a.font-title {
		font-family: 'Poppins', sans-serif !important;
	}

	/* ================================================== */

	/* 2. Fix Header Layout & Spacing */
	html[dir="rtl"] header nav {
		flex-direction: row-reverse;
	}
	html[dir="rtl"] header nav > div {
		flex-direction: row-reverse;
	}
	html[dir="rtl"] header .space-x-2 > :not([hidden]) ~ :not([hidden]) {
		margin: 0 0.5rem 0 0 !important;
	}

	/* 3. Fix "About Me" Section Layout */
	html[dir="rtl"] #about .container {
		direction: rtl;
	}
	html[dir="rtl"] .about-text {
		margin-left: auto !important;
		margin-right: auto !important;
	}
	html[dir="rtl"] .about-image-container {
		margin-right: auto !important;
		margin-left: auto !important;
	}
	html[dir="rtl"] .about-text .justify-start {
		justify-content: flex-end;
	}
	html[dir="rtl"] #about .section-title {
		text-align: right;
	}

	/* 4. Fix Section Title Rendering */
	html[dir="rtl"] .section-title span {
		display: inline-block;
	}

	/* 5. Fix Process Timeline Layout */
	html[dir="rtl"] .process-content-left {
		text-align: left;
		padding-right: 0;
		padding-left: 3rem;
	}
	html[dir="rtl"] .process-content-right {
		text-align: right;
		padding-left: 0;
		padding-right: 3rem;
	}

	/* 6. Fix Pricing Cards Order */
	html[dir="rtl"] #pricing .grid {
		direction: rtl;
	}

	/* 7. Fix Contact Form Input Fields */
	html[dir="rtl"] .animated-input,
	html[dir="rtl"] .animated-textarea {
		text-align: right;
		direction: rtl; 
	}
	html[dir="rtl"] .input-icon {
		left: auto;
		right: 15px;
	}
	html[dir="rtl"] .animated-label {
		left: auto;
		right: 45px;
	}
	html[dir="rtl"] .animated-input:focus + .animated-label,
	html[dir="rtl"] .animated-input:not(:placeholder-shown) + .animated-label,
	html[dir="rtl"] .animated-input:-webkit-autofill + .animated-label,
	html[dir="rtl"] .animated-textarea:focus + .animated-label,
	html[dir="rtl"] .animated-textarea:not(:placeholder-shown) + .animated-label {
		left: auto;
		right: 15px;
	}
	html[dir="rtl"] .fake-placeholder {
		left: auto;
		right: 45px;
	}

	/* 8. Fix ALL Marquee Animations for RTL */
	html[dir="rtl"] .marquee,
	html[dir="rtl"] .logos-marquee {
		direction: ltr; 
	}
	html[dir="rtl"] .marquee-group span {
		direction: rtl; 
		display: inline-block;
	}

	/* 9. Fix Horizontal Scroll Animation for RTL */
	html[dir="rtl"] #projects {
		direction: ltr;
	}
	html[dir="rtl"] #projects .intro-text-content,
	html[dir="rtl"] #projects .project-card-overlay {
		direction: rtl;
	}

	/* 10. Fix Modal Close Button Position for RTL */
	html[dir="rtl"] #modal-close-btn,
	html[dir="rtl"] #quote-modal-close-btn,
	html[dir="rtl"] #selected-work-modal-close-btn {
		right: auto;
		left: 1.5rem;
	}

	/* 11. Fix Testimonial Border for RTL */
	html[dir="rtl"] .testimonial-item blockquote {
		border-left: none;
		padding-left: 0;
		border-right: 3px solid #FFB800;
		padding-right: 20px;
	}

	/* 12. Fix Footer Layout for RTL */
	html[dir="rtl"] footer .space-x-6 > :not([hidden]) ~ :not([hidden]) {
		--tw-space-x-reverse: 1;
		margin: 0 calc(1.5rem * var(--tw-space-x-reverse)) 0 calc(1.5rem * calc(1 - var(--tw-space-x-reverse)));
	}
	html[dir="rtl"] [data-lang="footerRights"] {
		direction: rtl;
	}
	/* --- MASTER FIX for Mobile Process Timeline (RTL) --- */
	html[dir="rtl"] .md\:hidden.relative.mt-12 > .absolute {
		left: auto;
		right: 2rem; /* Moves the vertical line to the right */
	}

	html[dir="rtl"] .mobile-process-step {
		padding-left: 0;
		padding-right: 5rem; /* Swaps the text padding */
		text-align: right;   /* Aligns the text correctly */
	}

	html[dir="rtl"] .mobile-process-step .process-icon {
		left: auto;
		right: 2rem;
		transform: translateX(50%); /* This new line centers the icon */
	}
	html[dir="rtl"] #shape-controls-desktop {
		direction: ltr;
	}
	/* --- CORRECTED Rule for Stats Numerals in RTL (Font & Size) --- */
	html[dir="rtl"] #stats-v2 .stats-v2-item h3 {
		font-family: 'Poppins', sans-serif;
		font-size: 2.25rem; /* Restores the base English size */
	}

	@media (min-width: 768px) {
		html[dir="rtl"] #stats-v2 .stats-v2-item h3 {
			font-size: 3rem; /* Restores the larger English size */
		}
	}