:root {
		--dark-navy: #0E2A47;
		--ocean-blue: #1B75BC;
		--cerulean-blue: #00A0E3;
		--light-gray: #F4F6F8;
		--white: #ffffff;
		--shadow: 0 8px 24px rgba(0,0,0,0.08);
	}

	/* --- FONT AWESOME ICONS (Embedded with font-display: swap) --- */
	@font-face {
		font-family: 'Font Awesome 6 Free';
		font-style: normal;
		font-weight: 900;
		font-display: swap;
		src: url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/webfonts/fa-solid-900.woff2") format("woff2");
	}

	@font-face {
		font-family: 'Font Awesome 6 Free';
		font-style: normal;
		font-weight: 400;
		font-display: swap;
		src: url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/webfonts/fa-regular-400.woff2") format("woff2");
	}

	@font-face {
		font-family: 'Font Awesome 6 Brands';
		font-style: normal;
		font-weight: 400;
		font-display: swap;
		src: url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/webfonts/fa-brands-400.woff2") format("woff2");
	}

	.fas, .fa-solid {
		font-family: 'Font Awesome 6 Free';
		font-weight: 900;
		-moz-osx-font-smoothing: grayscale;
		-webkit-font-smoothing: antialiased;
		display: inline-block;
		font-style: normal;
		font-variant: normal;
		line-height: 1;
		text-rendering: auto;
	}

	.fab, .fa-brands {
		font-family: 'Font Awesome 6 Brands';
		font-weight: 400;
		-moz-osx-font-smoothing: grayscale;
		-webkit-font-smoothing: antialiased;
		display: inline-block;
		font-style: normal;
		font-variant: normal;
		line-height: 1;
		text-rendering: auto;
	}

	.fa-bars:before { content: "\f0c9"; }
	.fa-times:before, .fa-xmark:before { content: "\f00d"; }
	.fa-bulltarget:before, .fa-bullseye:before { content: "\f140"; }
	.fa-rocket:before { content: "\f135"; }
	.fa-award:before { content: "\f559"; }
	.fa-user-tie:before { content: "\f508"; }
	.fa-clock:before { content: "\f017"; }
	.fa-hand-holding-usd:before, .fa-hand-holding-dollar:before { content: "\f4c0"; }
	.fa-headset:before { content: "\f590"; }
	.fa-lightbulb:before { content: "\f0eb"; }
	.fa-map-marker-alt:before, .fa-location-dot:before { content: "\f3c5"; }
	.fa-phone-alt:before, .fa-phone-flip:before { content: "\f879"; }
	.fa-whatsapp:before { content: "\f232"; }
	.fa-envelope:before { content: "\f0e0"; }

	html {
		scroll-behavior: smooth;
	}

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

	body, button, input, select, textarea {
		font-family: 'Cairo', sans-serif;
	}

	body {
		background-color: var(--light-gray);
		color: #333;
		overflow-x: hidden;
	}

	/* --- STICKY NAV BAR --- */
	.navbar-container {
		position: fixed;
		top: 20px;
		left: 50%;
		transform: translateX(-50%);
		width: 90%;
		max-width: 1200px;
		z-index: 1000;
	}

	.navbar {
		background: #0E2A47;
		border-radius: 50px;
		padding: 12px 30px;
		display: flex;
		justify-content: space-between;
		align-items: center;
		box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.3);
		border: 1px solid rgba(255, 255, 255, 0.1);
		position: relative;
	}

	.nav-logo {
		display: flex;
		align-items: center;
		gap: 10px;
		color: var(--white);
		font-weight: 700;
		font-size: 1.2rem;
		text-decoration: none;
	}

	.nav-logo img {
		height: 40px;
		width: 40px;
		border-radius: 50%;
		object-fit: cover;
		border: 2px solid var(--cerulean-blue);
	}

	.nav-links {
		display: flex;
		gap: 15px;
		list-style: none;
		transition: all 0.4s ease-in-out;
	}

	.nav-links a {
		color: var(--white);
		text-decoration: none;
		font-size: 0.9rem;
		font-weight: 600;
		transition: all 0.3s ease;
		padding: 6px 12px;
		border-radius: 20px;
	}

	.nav-links a:hover {
		color: var(--cerulean-blue);
		background: rgba(255, 255, 255, 0.05);
	}

	/* Burger Menu Icon */
	.burger-menu {
		display: none;
		color: var(--white);
		font-size: 1.6rem;
		cursor: pointer;
		z-index: 1001;
		transition: transform 0.3s ease;
	}

	/* Overlay background when mobile menu is active */
	.nav-overlay {
		display: none;
		position: fixed;
		top: 0;
		left: 0;
		width: 100vw;
		height: 100vh;
		background: rgba(0,0,0,0.5);
		z-index: 999;
		opacity: 0;
		transition: opacity 0.3s ease;
	}

	.nav-overlay.active {
		display: block;
		opacity: 1;
	}

	/* Content Visibility optimization to drastically reduce Main Thread Style & Layout work */
	#services, #projects, #about, .partners-section, #location, #book, #contact {
		content-visibility: auto;
		contain-intrinsic-size: auto 500px;
	}

	.service-card, .project-card, .about-card, .adv-card, .contact-box {
		contain: layout style;
	}

	/* --- HERO SECTION --- */
	.hero {
		min-height: 100vh;
		background: url('images/hero-bg.jpg') no-repeat center center/cover;
		position: relative;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		text-align: center;
		color: var(--white);
		padding: 120px 20px 100px;
	}

	.hero-overlay {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: rgba(14, 42, 71, 0.75);
	}

	.hero-content {
		position: relative;
		z-index: 1;
		margin-bottom: 40px;
	}

	.hero-logo-img {
		width: 100px;
		height: 100px;
		border-radius: 50%;
		border: 4px solid var(--cerulean-blue);
		margin-bottom: 15px;
		animation: pulse 2s infinite;
	}

	.hero h1 {
		font-size: clamp(2rem, 5vw, 3.5rem);
		font-weight: 800;
		margin-bottom: 10px;
	}

	.hero p {
		font-size: clamp(1.1rem, 3vw, 1.5rem);
		color: var(--cerulean-blue);
		font-weight: 600;
	}

	/* Hero Stats Float Box */
	.stats-container {
		position: absolute;
		bottom: -40px;
		z-index: 2;
		background: var(--white);
		border-radius: 20px;
		display: flex;
		justify-content: space-around;
		width: 85%;
		max-width: 900px;
		padding: 25px 15px;
		box-shadow: var(--shadow);
		color: var(--dark-navy);
		gap: 15px;
	}

	.stat-item {
		text-align: center;
	}

	.stat-item h3 {
		font-size: clamp(1.6rem, 4vw, 2.4rem);
		color: var(--ocean-blue);
		font-weight: 800;
	}

	.stat-item p {
		font-size: clamp(0.75rem, 2vw, 0.95rem);
		color: #666;
		font-weight: 600;
	}

	/* --- SECTION COMMON STYLES --- */
	section {
		padding: 100px 5% 60px;
	}

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

	.section-title h2 {
		font-size: clamp(1.8rem, 4vw, 2.5rem);
		color: var(--dark-navy);
		position: relative;
		display: inline-block;
	}

	.section-title h2::after {
		content: '';
		width: 60%;
		height: 4px;
		background: linear-gradient(to right, var(--ocean-blue), var(--cerulean-blue));
		position: absolute;
		bottom: -8px;
		left: 20%;
		border-radius: 2px;
	}

	/* --- SERVICES SECTION --- */
	.services-grid {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
		gap: 25px;
	}

	.service-card {
		background: var(--white);
		border-radius: 15px;
		overflow: hidden;
		box-shadow: 0 5px 15px rgba(0,0,0,0.05);
		transition: transform 0.3s ease, box-shadow 0.3s ease;
		display: flex;
		flex-direction: column;
	}

	.service-card:hover {
		transform: translateY(-8px);
		box-shadow: var(--shadow);
	}

	.service-card img {
		width: 100%;
		height: 180px;
		object-fit: cover;
	}

	.service-card-body {
		padding: 20px;
		display: flex;
		flex-direction: column;
		flex-grow: 1;
	}

	.service-card h3 {
		color: var(--dark-navy);
		font-size: 1.2rem;
		margin-bottom: 10px;
	}

	.service-card p {
		color: #666;
		font-size: 0.88rem;
		line-height: 1.5;
		margin-bottom: 20px;
		flex-grow: 1;
	}

	.btn-request {
		background: linear-gradient(45deg, var(--ocean-blue), var(--cerulean-blue));
		color: var(--white);
		border: none;
		padding: 10px 15px;
		border-radius: 8px;
		cursor: pointer;
		font-weight: 700;
		transition: opacity 0.3s ease;
		text-decoration: none;
		text-align: center;
	}

	.btn-request:hover {
		opacity: 0.9;
	}

	/* --- PROJECTS SECTION --- */
	.projects-grid {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
		gap: 30px;
	}

	.project-card {
		background: var(--white);
		border-radius: 15px;
		overflow: hidden;
		box-shadow: var(--shadow);
	}

	.slideshow-container {
		position: relative;
		height: 220px;
		overflow: hidden;
	}

	.slide-img {
		width: 100%;
		height: 100%;
		object-fit: cover;
		position: absolute;
		opacity: 0;
		transition: opacity 1s ease-in-out;
	}

	.slide-img.active {
		opacity: 1;
	}

	.project-details {
		padding: 20px;
	}

	.project-details h3 {
		color: var(--dark-navy);
		margin-bottom: 8px;
	}

	.project-details p {
		color: #666;
		font-size: 0.9rem;
		margin-bottom: 15px;
	}

	.project-year {
		display: inline-block;
		background: var(--light-gray);
		color: var(--ocean-blue);
		font-weight: 700;
		padding: 4px 12px;
		border-radius: 15px;
		font-size: 0.8rem;
	}

	/* --- ABOUT SECTION --- */
	.about-container {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 40px;
	}

	.about-logo {
		width: 140px;
		height: 140px;
		border-radius: 50%;
		object-fit: cover;
		border: 4px solid var(--ocean-blue);
		box-shadow: var(--shadow);
	}

	.cards-wrapper {
		display: flex;
		gap: 20px;
		width: 100%;
		max-width: 900px;
		flex-wrap: wrap;
	}

	.about-card {
		flex: 1;
		min-width: 250px;
		background: var(--white);
		padding: 30px;
		border-radius: 15px;
		border-top: 5px solid var(--ocean-blue);
		box-shadow: var(--shadow);
	}

	.about-card i {
		font-size: 2.5rem;
		color: var(--cerulean-blue);
		margin-bottom: 15px;
	}

	.about-card h3 {
		color: var(--dark-navy);
		margin-bottom: 10px;
	}

	.about-card p {
		color: #555;
		line-height: 1.6;
	}

	/* Why Choose Us Styles */
	.why-us-wrapper {
		width: 100%;
		max-width: 900px;
		margin-top: 10px;
		text-align: center;
	}

	.why-us-title {
		color: var(--dark-navy);
		font-size: 1.6rem;
		margin-bottom: 25px;
		font-weight: 700;
	}

	.advantages-grid {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
		gap: 15px;
	}

	.adv-card {
		background: var(--white);
		padding: 20px 10px;
		border-radius: 12px;
		box-shadow: 0 4px 12px rgba(0,0,0,0.05);
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 10px;
		border: 1px solid rgba(0, 160, 227, 0.15);
		transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
	}

	.adv-card:hover {
		transform: translateY(-5px);
		box-shadow: var(--shadow);
		border-color: var(--cerulean-blue);
	}

	.adv-card i {
		font-size: 1.6rem;
		color: var(--cerulean-blue);
	}

	.adv-card span {
		font-weight: 700;
		color: var(--dark-navy);
		font-size: 0.95rem;
	}

	/* --- PARTNERS MARQUEE --- */
	.partners-section {
		overflow: hidden;
		background: var(--white);
		padding: 40px 0;
	}

	.marquee-container {
		display: flex;
		width: 200%;
		animation: marquee 20s linear infinite;
		will-change: transform;
		transform: translateZ(0);
	}

	.marquee-content {
		display: flex;
		flex-wrap:wrap;
		justify-content: space-around;
		width: 50%;
	}

	.marquee-content img {
		height: 100px;
		filter: grayscale(100%);
		opacity: 0.6;
		transition: all 0.3s ease;
		margin: 0 15px;
	}

	.marquee-content img:hover {
		filter: grayscale(0%);
		opacity: 1;
	}

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

	/* --- LOCATION SECTION --- */
	.location-card {
		background: var(--white);
		border-radius: 15px;
		overflow: hidden;
		box-shadow: var(--shadow);
		max-width: 900px;
		margin: 0 auto;
	}

	.map-container iframe {
		width: 100%;
		height: 350px;
		border: 0;
	}

	.address-info {
		padding: 20px;
		text-align: center;
		font-weight: 700;
		color: var(--dark-navy);
		font-size: 1rem;
	}

	.address-info i {
		color: var(--cerulean-blue);
		margin-left: 8px;
	}

	/* --- BOOK A SESSION SECTION --- */
	.booking-section {
		background: linear-gradient(135deg, var(--dark-navy), #081a2d);
		color: var(--white);
		border-radius: 30px;
		margin: 40px 0;
		padding: 50px 20px;
	}

	.booking-section .section-title h2 {
		color: var(--white);
	}

	.booking-form {
		max-width: 600px;
		margin: 0 auto;
		display: flex;
		flex-direction: column;
		gap: 20px;
	}

	.form-group input, .form-group select {
		width: 100%;
		padding: 15px;
		border-radius: 10px;
		border: 1px solid rgba(255,255,255,0.2);
		background: rgba(255,255,255,0.05);
		color: var(--white);
		font-size: 1rem;
		outline: none;
	}

	.form-group input::placeholder {
		color: #aaa;
	}

	.form-group select option {
		background: var(--dark-navy);
		color: var(--white);
	}

	.btn-submit {
		background: linear-gradient(45deg, var(--ocean-blue), var(--cerulean-blue));
		color: var(--white);
		border: none;
		padding: 15px;
		border-radius: 10px;
		font-size: 1.1rem;
		font-weight: 700;
		cursor: pointer;
		transition: transform 0.2s;
	}

	.btn-submit:hover {
		transform: scale(1.02);
	}

	/* --- CONTACT SECTION --- */
	.contact-grid {
		display: flex;
		justify-content: center;
		gap: 20px;
		flex-wrap: wrap;
	}

	.contact-box {
		background: var(--white);
		padding: 25px 30px;
		border-radius: 15px;
		box-shadow: var(--shadow);
		display: flex;
		align-items: center;
		gap: 15px;
		flex: 1;
		min-width: 240px;
		max-width: 380px;
	}

	.contact-box i {
		font-size: 2rem;
		color: var(--ocean-blue);
	}

	.contact-box:hover{
		background-image: linear-gradient(-45deg, var(--cerulean-blue) ,var(--dark-navy));
		color:white;
	}

	.contact-box:hover i{
		color:white;
	}

	/* --- NATIVE HIGH-PERFORMANCE SCROLL REVEALS --- */
	[data-aos] {
		opacity: 0;
		transition-property: opacity, transform;
		transition-duration: 0.7s;
		transition-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
		will-change: opacity, transform;
	}
	[data-aos="fade-up"] {
		transform: translate3d(0, 30px, 0);
	}
	[data-aos="fade-right"] {
		transform: translate3d(30px, 0, 0);
	}
	[data-aos="fade-left"] {
		transform: translate3d(-30px, 0, 0);
	}
	[data-aos="zoom-in"] {
		transform: scale3d(0.92, 0.92, 1);
	}
	[data-aos].aos-animate {
		opacity: 1;
		transform: translate3d(0, 0, 0) scale3d(1, 1, 1);
	}
	[data-aos-delay="200"] {
		transition-delay: 0.2s;
	}

	/* --- FLOATING BUTTONS WITH GPU-ACCELERATED WAVES --- */
	.float-btn {
		position: fixed;
		bottom: 30px;
		width: 55px;
		height: 55px;
		border-radius: 50%;
		display: flex;
		justify-content: center;
		align-items: center;
		color: white;
		font-size: 1.6rem;
		box-shadow: 0 4px 10px rgba(0,0,0,0.3);
		z-index: 1000;
		text-decoration: none;
		transform: translateZ(0);
	}

	.float-btn::before {
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		border-radius: 50%;
		z-index: -1;
		will-change: transform, opacity;
		animation: pulse-wave-gpu 2s cubic-bezier(0.25, 0.46, 0.45, 0.94) infinite;
	}

	.float-whatsapp {
		right: 25px;
		background-color: #25d366;
	}

	.float-whatsapp::before {
		background-color: #25d366;
	}

	.float-email {
		right: 90px;
		background-color: var(--cerulean-blue);
	}

	.float-email::before {
		background-color: var(--cerulean-blue);
	}

	.whatsapp-card{
		text-decoration:none;
		color:black;
	}

	.whatsapp:visited{
		color:black;
	}

	.ad{
		text-decoration: none;
		color: gray;
	}

	.ad:hover{
		color: var(--ocean-blue);
	}

	@keyframes pulse-wave-gpu {
		0% {
			transform: scale(1);
			opacity: 0.7;
		}
		70% {
			transform: scale(1.45);
			opacity: 0;
		}
		100% {
			transform: scale(1.45);
			opacity: 0;
		}
	}

	/* --- FOOTER --- */
	footer {
		background: var(--dark-navy);
		color: var(--white);
		text-align: center;
		padding: 20px;
		border-top: 1px solid rgba(255,255,255,0.1);
	}

	/* --- RESPONSIVE BREAKPOINTS & BURGER MENU LOGIC --- */
	@media (max-width: 992px) {
		.burger-menu {
			display: block;
		}

		.nav-links {
			position: fixed;
			top: 0;
			right: -100%;
			width: 270px;
			height: 100vh;
			background: var(--dark-navy);
			flex-direction: column;
			justify-content: center;
			align-items: center;
			gap: 20px;
			box-shadow: -5px 0 25px rgba(0,0,0,0.4);
			padding: 40px 20px;
			z-index: 1000;
		}

		.nav-links.active {
			right: 0;
		}

		.nav-links a {
			font-size: 1.1rem;
			width: 100%;
			text-align: center;
		}
	}

	@media (max-width: 600px) {
		.navbar-container {
			width: 95%;
			top: 15px;
		}

		.navbar {
			padding: 10px 20px;
		}

		.stats-container {
			position: relative;
			bottom: 0;
			width: 100%;
			margin-top: 20px;
		}

		.hero {
			padding-bottom: 60px;
		}

		.float-btn {
			width: 48px;
			height: 48px;
			font-size: 1.4rem;
			bottom: 20px;
		}

		.float-whatsapp { right: 15px; }
		.float-email { right: 75px; }

		.advantages-grid {
			grid-template-columns: repeat(2, 1fr);
		}
	}