:root {
			--bg: #ffffff;
			--paper: #f8f7f4;
			--surface: #fcfbf8;
			--ink: #232221;
			--muted: #6f6a62;
			--gold: #b08a51;
			--gold-soft: #d4b27c;
			--line: #e7e1d7;
			--wood: #7a5d3b;
			--shadow-soft: 0 12px 30px rgba(34, 31, 27, 0.09);
			--shadow-lg: 0 24px 60px rgba(34, 31, 27, 0.14);
			--radius: 20px;
			--radius-lg: 30px;
		}

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

		html {
			scroll-behavior: smooth;
			scroll-padding-top: 10px;
		}

		body {
			font-family: "Cairo", sans-serif;
			background: var(--bg);
			color: var(--ink);
			line-height: 1.8;
			overflow-x: hidden;
		}

		img {
			max-width: 100%;
			height: auto;
			display: block;
		}

		a {
			text-decoration: none;
			color: inherit;
		}

		.container {
			width: min(1140px, 92vw);
			margin-inline: auto;
		}

		.section {
			padding: 5.5rem 0;
			position: relative;
		}

		.section-title {
			font-family: "El Messiri", serif;
			font-size: clamp(1.9rem, 3.2vw, 2.9rem);
			line-height: 1.25;
			margin-bottom: 1rem;
			color: #1f1d1b;
		}

		.section-text {
			color: var(--muted);
			font-size: 1.05rem;
			max-width: 720px;
		}

		.topbar {
			position: sticky;
			top: 0;
			z-index: 90;
			background: linear-gradient(135deg, rgba(35, 34, 33, 0.95) 0%, rgba(50, 48, 45, 0.95) 100%);
			backdrop-filter: blur(12px);
			border-bottom: 1px solid transparent;
			transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
			/* shadow: none; */
		}
        
		.topbar.scrolled {
            border: 1px solid rgba(212, 178, 124, 0.15);
			box-shadow: 0 12px 40px rgba(34, 31, 27, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.05);
		}

		.nav-wrap {
			min-height: 76px;
			display: flex;
			align-items: center;
			justify-content: space-between;
			gap: 1.2rem;
		}

		.brand {
			display: flex;
			align-items: center;
			gap: 0.8rem;
			font-family: "El Messiri", serif;
			font-size: clamp(1.25rem, 2.4vw, 1.7rem);
			font-weight: 700;
			color: var(--gold-soft);
			text-decoration: none;
			transition: all 0.3s ease;
			padding: 0.5rem 1rem;
			border-radius: 10px;
		}

		.brand:hover {
			color: #fff;
			transform: translateY(-2px);
			text-shadow: 0 8px 20px rgba(212, 178, 124, 0.25);
		}

		.brand-logo {
			width: clamp(80px, 10vw, 130px);
			height: auto;
			border-radius: 8px;
			object-fit: contain;
			background: transparent;
			box-shadow: none;
			padding: 0;
			transition: all 0.3s ease;
			filter: drop-shadow(0 4px 12px rgba(212, 178, 124, 0.1));
		}

		.brand:hover .brand-logo {
			filter: drop-shadow(0 8px 24px rgba(212, 178, 124, 0.25));
		}

		.brand-dot {
			display: none;
		}

		/* Mobile nav toggle */
		.nav-toggle {
			display: none;
			align-items: center;
			justify-content: center;
			width: 44px;
			height: 44px;
			border-radius: 8px;
			background: rgba(255,255,255,0.04);
			border: 1px solid rgba(255,255,255,0.06);
			color: #fff;
			cursor: pointer;
		}

		.nav-links {
			display: flex;
			align-items: center;
			gap: 1.25rem;
			font-weight: 600;
			color: white;
			font-size: 0.95rem;
		}

		.nav-links a {
			transition: all 0.3s ease;
			position: relative;
			padding-bottom: 6px;
			display: inline-flex;
			align-items: center;
			min-height: 44px;
		}

		.nav-links a::after {
			content: '';
			position: absolute;
			bottom: 0;
			left: 0;
			width: 0;
			height: 2px;
			background: linear-gradient(90deg, var(--gold-soft), var(--gold));
			transition: width 0.3s ease;
		}

		.nav-links a:hover {
			color: var(--gold-soft);
			transform: translateY(-2px);
		}

		.nav-links a:hover::after {
			width: 100%;
		}

		.btn {
			display: inline-flex;
			align-items: center;
			justify-content: center;
			min-height: 44px;
			border-radius: 999px;
			padding: 0.85rem 1.5rem;
			border: 1px solid transparent;
			font-weight: 700;
			font-size: 0.95rem;
			transition: transform 0.3s ease, box-shadow 0.3s ease, background 0.3s ease, color 0.3s ease;
			cursor: pointer;
		}

		.btn:focus-visible {
			outline: 3px solid rgba(176, 138, 81, 0.35);
			outline-offset: 2px;
		}

		.btn-gold {
			background: linear-gradient(135deg, var(--gold-soft), var(--gold));
			color: #fff;
			box-shadow: 0 12px 28px rgba(176, 138, 81, 0.32);
			position: relative;
			overflow: hidden;
		}

		.btn-gold::before {
			content: '';
			position: absolute;
			top: 0;
			left: -100%;
			width: 100%;
			height: 100%;
			background: rgba(255, 255, 255, 0.15);
			transition: left 0.4s ease;
			z-index: 0;
		}

		.btn-gold:hover::before {
			left: 100%;
		}

		.btn-gold:hover {
			transform: translateY(-3px);
			box-shadow: 0 16px 36px rgba(176, 138, 81, 0.4);
		}


		.btn-outline {
			background: #fff;
			color: #3b342d;
			border-color: var(--line);
		}

		.btn-outline:hover {
			border-color: var(--gold);
			color: var(--gold);
			transform: translateY(-2px);
		}

		.hero {
			padding: 0;
			margin: 0;
			overflow: hidden;
			position: relative;
			isolation: isolate;
			min-height: calc(100vh - 76px);
			display: flex;
			flex-direction: column;
			background: #2c3139; 
		}

		.hero::before {
			content: "";
			position: absolute;
			inset: 0;
			background: transparent;
			z-index: -2;
		}

		.hero-grid {
			display: grid;
			grid-template-columns: 1.2fr 0.8fr;
			align-items: stretch;
			gap: 0;
			flex: 1;
			min-height: 100%;
			margin: 0;
			padding: 0;
		}

		.hero-panel {
			background-image: url('./media/leftSideHeroSection.png');
			background-size: cover;
			background-position: center;
			border-radius: 0;
			padding: clamp(3rem, 5vw, 4rem);
			color: #fff;
			box-shadow: none;
			position: relative;
			overflow: hidden;
			display: flex;
			flex-direction: column;
			justify-content: center;
		}

		.hero-panel::after {
			content: "";
			position: absolute;
			inset: 0;
			/* background: linear-gradient(270deg, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.3)); */
			background: linear-gradient(270deg, rgba(0,0,0,0.95), rgba(212,175,55,0.1));
			pointer-events: none;
		}

		.hero-panel > * {
			position: relative;
			z-index: 1;
		}

		.hero-badge {
			display: inline-flex;
			align-items: center;
			gap: 0.4rem;
			border: 1px solid rgba(255, 255, 255, 0.35);
			background: rgba(255, 255, 255, 0.08);
			color: #f5ebdb;
			border-radius: 999px;
			padding: 0.35rem 0.8rem;
			font-size: 0.83rem;
			margin-bottom: 1rem;
		}

		.hero-title {
			font-family: "El Messiri", serif;
			font-size: clamp(2rem, 4vw, 3.4rem);
			line-height: 1.3;
			margin-bottom: 0.9rem;
		}

		.hero-subtitle {
			max-width: 40ch;
			color: rgba(255, 255, 255, 0.92);
			margin-bottom: 1.4rem;
		}

		.hero-actions {
			display: flex;
			gap: 0.8rem;
			flex-wrap: wrap;
		}

		.hero-image-wrap {
			border-radius: 0;
			overflow: hidden;
			box-shadow: none;
			position: relative;
			min-height: 100%;
		}

		.hero-image-wrap img {
			width: 100%;
			height: 100%;
			object-fit: cover;
			transform: scale(1);
		}

		.hero-image-wrap::after {
			content: "";
			position: absolute;
			inset: 0;
			background: transparent;
		}

		.about {
			background: linear-gradient(180deg, #1a1917 0%, #0f0e0d 100%);
			/* background-color: white; */
			color: #e9eef0;
			position: relative;
			overflow: hidden;
			padding: 3.5rem 0;
			margin-top: 0;
			border-top: 1px solid rgba(255,255,255,0.03);
			border-bottom: 1px solid rgba(255,255,255,0.03);
		}

		#about {
			scroll-margin-top: 50px;
		}


		.about .section-text {
			color: rgba(255,255,255,0.9);
		}
		.about-grid {
			display: grid;
			grid-template-columns: minmax(0, 1.55fr) minmax(230px, 0.85fr);
			gap: 2.4rem;
			align-items:center;
			max-width: 1200px;
			margin-inline: auto;
		}

		.about-stat {
			display:flex;
			align-items:center;
			justify-content:center;
			padding:1.2rem;
		}

		.stat-box {
			position: relative;
            background: none;
			backdrop-filter: blur(10px);
			-webkit-backdrop-filter: blur(10px);
			padding: 1.35rem 1.7rem;
			border-radius: 0;
			text-align: center;
			min-width: 170px;

            --corner-size: 40px;   
            --corner-thickness: 3px;
            background-image:
                linear-gradient(var(--gold-soft), var(--gold-soft)),
                linear-gradient(var(--gold-soft), var(--gold-soft)),
                linear-gradient(var(--gold-soft), var(--gold-soft)),
                linear-gradient(var(--gold-soft), var(--gold-soft)),
                linear-gradient(var(--gold-soft), var(--gold-soft)),
                linear-gradient(var(--gold-soft), var(--gold-soft)),
                linear-gradient(var(--gold-soft), var(--gold-soft)),
                linear-gradient(var(--gold-soft), var(--gold-soft));

            background-size:
                calc(var(--corner-size) + 1px) var(--corner-thickness),
                var(--corner-thickness) calc(var(--corner-size) + 25px),

                calc(var(--corner-size) + 1px) var(--corner-thickness),
                var(--corner-thickness) calc(var(--corner-size) + 25px),

                calc(var(--corner-size) + 1px) var(--corner-thickness),
                var(--corner-thickness) calc(var(--corner-size) + 25px),

                calc(var(--corner-size) + 1px) var(--corner-thickness),
                var(--corner-thickness) calc(var(--corner-size) + 25px);


            background-position:
                top left, top left,
                top right, top right,
                bottom left, bottom left,
                bottom right, bottom right;

			background-repeat: no-repeat;
		}
        
        .stat-box {
            transition: all 0.35s ease;
        }
        .stat-box:hover {
            --corner-size: 55px;
            transform: translateY(-5px);
        }

		.about .stat-num {
			color: #e5bf79;
			text-shadow: 0 4px 16px rgba(229, 191, 121, 0.28);
		}

		.stat-num {
			font-family: "El Messiri", serif;
			font-size: clamp(2.6rem, 5.6vw, 4.2rem);
			color: var(--gold-soft);
			font-weight: 800;
			line-height: 1;
		}

		.stat-meta {
			color: rgba(255,255,255,0.85);
			font-size: 0.95rem;
			margin-top: 0.35rem;
		}

		.about-head .section-title {
			color: #ffffff;
            padding-top: 5%;
			font-size: clamp(2rem, 5vw, 3.8rem);
			font-weight: 400;
			text-shadow: 0 6px 20px rgba(0,0,0,0.45);
		}

		.about-body {
			color: rgba(255,255,255,0.95);
			font-size: 1.05rem;
			line-height: 1.9;
			max-width: 680px;
			margin-inline-start: auto;
			font-weight: 500;
		}

		.about-eyebrow {
			display: inline-flex;
			align-items: center;
			gap: 0.5rem;
			font-size: 0.95rem;
			letter-spacing: 0.12em;
			font-weight: 800;
			color: var(--gold-soft);
			margin-bottom: 0.75rem;
			text-transform: uppercase;
		}

		.about-cta {
			display: inline-flex;
			margin-top: 1rem;
		}

		.about-highlight::before {
			content: "";
			position: absolute;
			inset: 0;
			background:
				radial-gradient(circle at 95% 8%, rgba(176, 138, 81, 0.16), transparent 35%),
				radial-gradient(circle at 15% 85%, rgba(122, 93, 59, 0.1), transparent 36%);
			pointer-events: none;
		}

		.about-highlight > * {
			position: relative;
			z-index: 1;
		}

		.highlight-text {
			font-family: "El Messiri", serif;
			font-size: clamp(1.8rem, 3.4vw, 2.8rem);
			line-height: 1.35;
			color: #282420;
			max-width: 12ch;
		}

		.exp-badge {
			display: inline-flex;
			margin-top: 1.4rem;
			border-radius: 16px;
			border: 1px solid rgba(176, 138, 81, 0.35);
			background: rgba(176, 138, 81, 0.08);
			color: #3e3326;
			padding: 0.75rem 1rem;
			font-weight: 800;
		}

		#portfolio {
			background: linear-gradient(180deg, #131722 0%, #11151f 100%);
			color: #fff;
			position: relative;
			overflow: hidden;
		}

		#portfolio-canvas {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			pointer-events: none;
			z-index: 0;
			display: block;
		}

		#portfolio::before {
			content: "";
			position: absolute;
			inset: 0;
			background:
				radial-gradient(circle at 10% 18%, rgba(255,255,255,0.04), transparent 28%),
				radial-gradient(circle at 92% 84%, rgba(255,255,255,0.03), transparent 22%);
			pointer-events: none;
		}

		#portfolio > .container {
			position: relative;
			z-index: 1;
		}

		#portfolio .section-title {
			color: #fff;
			text-align: center;
			font-size: clamp(2rem, 4vw, 3.3rem);
			margin-bottom: 0.35rem;
		}

		.portfolio-filters {
			display: flex;
			justify-content: center;
			align-items: center;
			flex-wrap: wrap;
			gap: 0.7rem;
			margin: 0 auto 2.5rem;
		}

		.portfolio-filter {
			min-height: 44px;
			padding: 0.65rem 1.25rem;
			border: 1px solid rgba(212, 178, 124, 0.32);
			border-radius: 999px;
			background: rgba(255,255,255,0.05);
			color: rgba(255,255,255,0.78);
			font: inherit;
			font-weight: 700;
			cursor: pointer;
			transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease, transform 0.3s ease;
		}

		.portfolio-filter:hover,
		.portfolio-filter.is-active {
			background: var(--gold);
			border-color: var(--gold-soft);
			color: #fff;
			transform: translateY(-2px);
		}

		.portfolio-categories {
			display: grid;
			grid-template-columns: repeat(4, 1fr);
			gap: 1.25rem;
			margin-top: 2.5rem;
		}

		.portfolio-category-card {
			position: relative;
			height: 285px;
			padding: 0;
			border: 1px solid rgba(255,255,255,0.1);
			border-radius: 18px;
			overflow: hidden;
			background: #242933;
			color: #fff;
			text-align: right;
			cursor: pointer;
			box-shadow: 0 16px 28px rgba(0,0,0,0.18);
			transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease;
		}

		.portfolio-category-card::after {
			content: "";
			position: absolute;
			inset: 0;
			background: linear-gradient(to top, rgba(17,21,31,0.96), rgba(17,21,31,0.05) 72%);
		}

		.portfolio-category-card:hover {
			transform: translateY(-8px);
			border-color: rgba(212,178,124,0.7);
			box-shadow: 0 24px 42px rgba(0,0,0,0.35);
		}

		.portfolio-category-card img {
			width: 100%;
			height: 100%;
			object-fit: cover;
			transition: transform 0.6s ease;
		}

		.portfolio-category-card:hover img {
			transform: scale(1.08);
		}

		.portfolio-category-content {
			position: absolute;
			bottom: 1.25rem;
			right: 1.25rem;
			left: 1.25rem;
			z-index: 1;
		}

		.portfolio-category-content strong {
			display: block;
			font-family: "El Messiri", serif;
			font-size: 1.35rem;
		}

		.portfolio-category-content span {
			display: block;
			margin-top: 0.25rem;
			color: var(--gold-soft);
			font-size: 0.85rem;
			font-weight: 700;
		}

		.portfolio-gallery-header {
			display: flex;
			align-items: center;
			justify-content: space-between;
			gap: 1rem;
			margin: 2.5rem 0 1rem;
		}

		.portfolio-gallery-header h3 {
			font-family: "El Messiri", serif;
			font-size: clamp(1.45rem, 3vw, 2rem);
			color: #fff;
		}

		.portfolio-back {
			min-height: 42px;
			padding: 0.55rem 1rem;
			border: 1px solid rgba(212,178,124,0.45);
			border-radius: 999px;
			background: transparent;
			color: var(--gold-soft);
			font: inherit;
			font-weight: 700;
			cursor: pointer;
			transition: background 0.3s ease, color 0.3s ease;
		}

		.portfolio-back:hover {
			background: var(--gold);
			color: #fff;
		}

		[hidden] {
			display: none !important;
		}

		#portfolio .section-text {
			color: rgba(255,255,255,0.68);
			text-align: center;
			margin: 0 auto 2rem;
		}



		.portfolio-grid {
			display: grid;
			grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
			gap: 1.5rem;
			margin-top: 2rem;
		}

		.portfolio-item {
			position: relative;
			overflow: hidden;
			border-radius: 16px;
			height: 380px;
			background: #242933;
			box-shadow: 0 16px 28px rgba(0,0,0,0.18);
			cursor: pointer;
			transition: all 0.4s ease;
			border: 1px solid rgba(255,255,255,0.05);
			animation: portfolioCardIn 0.6s both cubic-bezier(0.2, 0.8, 0.2, 1);
		}

		@keyframes portfolioCardIn {
			from { opacity: 0; transform: translateY(18px) scale(0.98); }
			to { opacity: 1; transform: translateY(0) scale(1); }
		}

		.portfolio-item::before {
			content: "";
			position: absolute;
			inset: 0;
			background: linear-gradient(to top, rgba(17,21,31,0.95) 0%, rgba(17,21,31,0.4) 40%, transparent 100%);
			z-index: 1;
			opacity: 0.7;
			transition: opacity 0.4s ease;
		}

		.portfolio-item:hover::before {
			opacity: 0.95;
		}

		.portfolio-item img {
			width: 100%;
			height: 100%;
			object-fit: cover;
			transition: transform 0.65s cubic-bezier(0.2, 0, 0, 1);
		}

		.portfolio-item:hover img {
			transform: scale(1.1) rotate(1deg);
		}

		.portfolio-item:hover {
			transform: translateY(-8px);
			box-shadow: 0 25px 45px rgba(0,0,0,0.4);
			border-color: rgba(176, 138, 81, 0.4);
		}

		.portfolio-label {
			position: absolute;
			bottom: 1.5rem;
			right: 1.5rem;
			z-index: 2;
			color: #fff;
			font-family: "El Messiri", serif;
			font-size: 1.15rem;
			font-weight: 700;
			line-height: 1.25;
			transform: translateY(15px);
			transition: transform 0.4s ease, opacity 0.4s ease;
			display: flex;
			flex-direction: column;
		}

		.portfolio-label small {
			font-family: "Cairo", sans-serif;
			font-size: 0.78rem;
			font-weight: 600;
			color: rgba(255,255,255,0.72);
			margin-top: 0.25rem;
		}

		.portfolio-label span {
			font-family: "Cairo", sans-serif;
			font-size: 0.8rem;
			color: var(--gold-soft);
			font-weight: 700;
			letter-spacing: 1px;
			margin-bottom: 0.2rem;
			opacity: 0;
			transform: translateY(10px);
			transition: all 0.4s ease 0.1s;
		}

		.portfolio-item:hover .portfolio-label {
			transform: translateY(0);
		}

		.portfolio-item:hover .portfolio-label span {
			opacity: 1;
			transform: translateY(0);
		}

		.portfolio-icon {
			position: absolute;
			top: 1.5rem;
			left: 1.5rem;
			z-index: 2;
			width: 44px;
			height: 44px;
			border-radius: 50%;
			background: rgba(176, 138, 81, 0.9);
			color: #fff;
			display: flex;
			align-items: center;
			justify-content: center;
			opacity: 0;
			transform: scale(0.5);
			transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
			backdrop-filter: blur(4px);
			cursor: pointer;
		}

		.portfolio-icon svg {
			width: 20px;
			height: 20px;
			fill: none;
			stroke: currentColor;
			stroke-width: 2;
			stroke-linecap: round;
			stroke-linejoin: round;
		}

		.portfolio-item:hover .portfolio-icon {
			opacity: 1;
			transform: scale(1);
		}

		.portfolio-icon:hover {
			background: rgba(255, 255, 255, 0.9);
			color: var(--gold);
			transform: scale(1.1) !important;
		}

		/* Lightbox Styles */
		.lightbox {
			position: fixed;
			inset: 0;
			background: rgba(15, 17, 24, 0.95);
			backdrop-filter: blur(10px);
			z-index: 9999;
			display: flex;
			align-items: center;
			justify-content: center;
			opacity: 0;
			pointer-events: none;
			transition: opacity 0.4s ease;
		}

		.lightbox.active {
			opacity: 1;
			pointer-events: all;
		}

		.lightbox-content {
			position: relative;
			max-width: 90%;
			max-height: 85vh;
			display: flex;
			flex-direction: column;
			align-items: center;
			transform: scale(0.95);
			transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
		}

		.lightbox.active .lightbox-content {
			transform: scale(1);
		}

		.lightbox img {
			max-width: 100%;
			max-height: 80vh;
			object-fit: contain;
			border-radius: 12px;
			box-shadow: 0 25px 50px rgba(0,0,0,0.5);
			border: 1px solid rgba(255,255,255,0.1);
		}

		.lightbox img.is-changing {
			animation: lightboxImageChange 0.35s ease;
		}

		@keyframes lightboxImageChange {
			0% { opacity: 0; transform: translateX(18px) scale(0.98); }
			100% { opacity: 1; transform: translateX(0) scale(1); }
		}

		.lightbox-nav {
			display: grid;
			place-items: center;
			width: 52px;
			height: 52px;
			padding: 0;
			border: 1px solid rgba(212,178,124,0.75);
			border-radius: 50%;
			background: rgba(176,138,81,0.9);
			box-shadow: 0 8px 24px rgba(0,0,0,0.25), inset 0 1px 0 rgba(255,255,255,0.2);
			backdrop-filter: blur(8px);
			cursor: pointer;
			transition: background 0.25s ease, transform 0.25s ease, border-color 0.25s ease;
		}

		.lightbox-nav:hover {
			background: rgba(212,178,124,0.98);
			border-color: rgba(255,255,255,0.55);
			transform: scale(1.08);
		}

		.lightbox-nav::before {
			content: "";
			width: 0;
			height: 0;
			border-top: 7px solid transparent;
			border-bottom: 7px solid transparent;
		}

		.lightbox-prev::before {
			border-right: 10px solid #1b1a18;
		}

		.lightbox-next::before {
			border-left: 10px solid #1b1a18;
		}

		.lightbox-controls {
			display: flex;
			justify-content: center;
			gap: 0.8rem;
			margin-top: 1rem;
			direction: ltr;
		}

		.lightbox-close {
			position: absolute;
			top: -40px;
			right: -20px;
			color: rgba(255,255,255,0.7);
			font-size: 2.5rem;
			cursor: pointer;
			transition: color 0.3s ease, transform 0.3s ease;
			line-height: 1;
		}

		.lightbox-close:hover {
			color: #fff;
			transform: rotate(90deg);
		}


		.portfolio-link {
			position: absolute;
			bottom: 1rem;
			left: 1rem;
			z-index: 2;
			padding: 0.45rem 0.9rem;
			border-radius: 999px;
			border: 1px solid rgba(255,255,255,0.28);
			background: rgba(255,255,255,0.05);
			color: #fff;
			font-size: 0.82rem;
			font-weight: 700;
		}



		.about > .container:last-child {
			/* background-image: linear-gradient(180deg, rgba(26, 25, 23, 0.83) 0%, rgba(15, 14, 13, 0.6) 100%), url('./media/statsSection.png'); */
			background-image: linear-gradient(180deg, rgba(0, 0, 0, 0.25) 0%, rgba(15, 14, 13, 0.75) 40%, rgba(0, 0, 0, 0.25) 100%), url('./media/statsSection.png');
			background-size: cover;
			background-position: center;
			background-repeat: no-repeat;
			border-radius: 28px;
			padding: 1.5rem 1.2rem;
			margin-top: 1.2rem;
			box-shadow: 0 18px 45px rgba(0, 0, 0, 0.22);
		}

		.stats-grid {
			display: grid;
			grid-template-columns: repeat(3, minmax(0, 1fr));
			gap: 2rem;
			align-items: center;
			justify-items: center;
			max-width: 920px;
			margin: 0 auto;
		}

		.stat-card {
			/* background: rgba(13, 12, 11, 0.32);
			backdrop-filter: blur(4px); */
			background: none;
			border: none;
			border-radius: 18px;
			text-align: center;
			padding: 1rem 0.8rem;
			min-width: 0;
			box-shadow: none;
			transition: transform 320ms cubic-bezier(.2,.9,.2,1), filter 240ms ease;
		}

		.stat-card:hover {
			transform: translateY(-6px) scale(1.02);
			filter: brightness(1.02);
		}

		.stat-num {
			font-family: "El Messiri", serif;
			font-size: clamp(2.2rem, 4.2vw, 3.6rem);
			line-height: 1;
			color: var(--gold-soft);
			margin-bottom: 0.6rem;
			font-weight: 800;
			display: inline-block;
			position: relative;
			transform: translateY(8px);
			opacity: 0;
			transition: transform 420ms cubic-bezier(.2,.9,.2,1), opacity 320ms ease;
		}

		.stat-num::before {
			content: "+";
			margin-inline-end: 0.45rem;
			color: var(--gold-soft);
			font-weight: 800;
		}

		@keyframes pop {
			0% { transform: scale(0.86); opacity: 0.6; }
			60% { transform: scale(1.06); opacity: 1; }
			100% { transform: scale(1); opacity: 1; }
		}

		.count-done .stat-num {
			animation: pop 520ms cubic-bezier(.2,.9,.2,1) both;
			opacity: 1;
			transform: translateY(0);
		}

		/* About stat box appears immediately - no reveal delay */
		.about-stat .stat-num {
			opacity: 1 !important;
			transform: translateY(0) !important;
		}

		/* Confetti canvas */
		.confetti-canvas {
			position: fixed;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			pointer-events: none;
			z-index: 9999;
		}

		.stat-card.visible .stat-num,
		.stat-box.visible .stat-num {
			opacity: 1;
			transform: translateY(0);
		}

		.stat-label {
			color: rgba(255,255,255,0.92);
			font-weight: 600;
			font-size: 1rem;
			line-height: 1.4;
		}

		#marketing {
			background: #f5f5f5;
			padding: 5.5rem 0;
		}

		.marketing-grid {
			display: grid;
			grid-template-columns: 1.05fr 0.95fr;
			gap: 3rem;
			align-items: stretch;
		}

		.marketing-images {
			display: grid;
			grid-template-columns: repeat(2, minmax(0, 1fr));
			gap: 1.5rem;
			width: 100%;
			margin-top: 2rem;
		}

		.marketing-image-item {
			width: 100%;
			height: clamp(160px, 24vw, 250px);
			min-height: 160px;
			border-radius: 14px;
			overflow: hidden;
			border: none;
			box-shadow: none;
		}

		.marketing-image-item img {
			height: 100%;
			width: 100%;
			object-fit: cover;
		}

		.marketing-image {
			border-radius: 20px;
			overflow: hidden;
			border: none;
			box-shadow: none;
			height: 100%;
			min-height: clamp(320px, 52vw, 600px);
			display: block;
			position: relative;
		}

		.marketing-image img {
			position: absolute;
			top: 0;
			left: 0;
			height: 100%;
			width: 100%;
			object-fit: cover;
		}

		.marketing-card {
			background: transparent;
			border: none;
			border-radius: 0;
			padding: 0;
			box-shadow: none;
			display: flex;
			flex-direction: column;
			justify-content: center;
		}

		.marketing-card .section-title {
			color: #2d2d2d;
			font-size: 2.3rem;
			font-family: "Cairo", sans-serif;
			font-weight: 400;
			margin-bottom: 1.5rem;
		}

		.marketing-card > p {
			color: #666666;
			font-size: 1.1rem;
			line-height: 1.9;
			margin-bottom: 1.5rem;
		}

		.marketing-list {
			list-style: none;
			margin: 0;
			padding: 0;
			display: grid;
			gap: 1.1rem;
		}

		.marketing-list li {
			display: flex;
			align-items: center;
			gap: 0.8rem;
			color: #888888;
			font-size: 1.05rem;
		}
		.marketing-list li::before {
			content: "→";
			color: #999999;
			font-weight: 600;
		}

		.testimonials {
			border-top: 1px solid var(--line);
			border-bottom: 1px solid var(--line);
			background: linear-gradient(180deg, #131722 0%, #11151f 100%);
			overflow: hidden;
			position: relative;
			color: #fff;
		}

		#testimonials-canvas {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			pointer-events: none;
			z-index: 0;
			display: block;
		}

		.testimonials-wrap {
			position: relative;
			z-index: 1;
		}

		.testimonials-wrap::before {
			content: "";
			position: absolute;
			inset: 0;
			background:
				radial-gradient(circle at 10% 18%, rgba(255,255,255,0.04), transparent 28%),
				radial-gradient(circle at 92% 84%, rgba(255,255,255,0.03), transparent 22%);
			pointer-events: none;
			z-index: 0;
		}

		.eyebrow {
			display: inline-flex;
			font-size: 0.78rem;
			letter-spacing: 0.18em;
			font-weight: 700;
			color: var(--gold);
			text-transform: uppercase;
			margin-bottom: 0.75rem;
		}

		.testimonials .section-title {
			color: #fff;
		}

		.testimonials .section-text {
			color: rgba(255,255,255,0.68);
		}

		#testimonialsCarousel {
			position: relative;
			margin-top: 2.2rem;
			max-width: 840px;
			margin-inline: auto;
		}

		#testimonialsTrack {
			display: flex;
			transition: transform 1s ease-in-out;
		}

		.testimonial-slide {
			min-width: 100%;
		}

		.testimonial-box {
			margin: 0 0.4rem;
			border-radius: var(--radius-lg);
			border: 1px solid rgba(255,255,255,0.1);
			background: rgba(19, 23, 34, 0.6);
			backdrop-filter: blur(10px);
			padding: 1.8rem;
			box-shadow: 0 18px 40px rgba(0,0,0,0.3);
			transition: transform 0.3s ease, box-shadow 0.3s ease;
			color: rgba(255,255,255,0.9);
        }

		.testimonial-box:hover {
			transform: translateY(-4px);
			box-shadow: 0 22px 50px rgba(212, 178, 124, 0.15);
		}

		.testimonial-head {
			display: flex;
			align-items: flex-start;
			justify-content: space-between;
			gap: 1rem;
		}

		.avatar-group {
			display: flex;
			align-items: center;
			gap: 0.9rem;
		}

		.avatar {
			width: 56px;
			height: 56px;
			border-radius: 50%;
			background: linear-gradient(145deg, #e6cda4, #b08a51);
			color: #fff;
			display: grid;
			place-items: center;
			font-weight: 800;
			border: 2px solid rgba(176, 138, 81, 0.45);
			transition: transform 0.3s ease;
		}

		.testimonial-box:hover .avatar {
			transform: scale(1.06);
		}

		.client-name {
			font-weight: 700;
			color: #fff;
		}

		.quote-icon {
			color: rgba(176, 138, 81, 0.85);
			width: 34px;
			height: 34px;
			flex-shrink: 0;
		}

		.stars {
			margin-top: 1rem;
			color: var(--gold);
			font-size: 1.08rem;
			letter-spacing: 0.08em;
			user-select: none;
		}

		.testimonial-text {
			margin-top: 0.9rem;
			color: rgba(255,255,255,0.8);
			font-size: 1.02rem;
		}

		.testimonial-controls {
			margin-top: 1.2rem;
			display: flex;
			justify-content: space-between;
			align-items: center;
			gap: 0.8rem;
		}

		.nav-btn {
			width: 45px;
			height: 45px;
			border-radius: 50%;
			border: 1px solid rgba(212, 178, 124, 0.3);
			background: rgba(212, 178, 124, 0.1);
			color: var(--gold-soft);
			display: grid;
			place-items: center;
			cursor: pointer;
			transition: all 0.3s ease;
		}

		.nav-btn:hover {
			border-color: var(--gold);
			color: var(--gold);
			transform: translateY(-2px);
		}

		#testimonialDots {
			display: flex;
			gap: 0.45rem;
			align-items: center;
		}

		#testimonialDots button {
			border: 0;
			border-radius: 999px;
			width: 10px;
			height: 10px;
			background: rgba(212, 178, 124, 0.3);
			cursor: pointer;
			transition: all 0.3s ease;
		}

		#testimonialDots button.active {
			width: 34px;
			background: var(--gold);
		}

		.contact-wrap {
			display: grid;
			grid-template-columns: 0.9fr 1.1fr;
			gap: 1.4rem;
			align-items: stretch;
		}

		#portfolio .portfolio-head {
			margin-bottom: clamp(2rem, 4vw, 3.5rem) !important;
		}

		.marketing-card,
		.contact-card,
		.contact-form {
			min-width: 0;
		}

		.contact-card,
		.contact-form {
			border: 1px solid var(--line);
			border-radius: var(--radius);
			background: #fff;
			box-shadow: var(--shadow-soft);
			padding: 1.8rem;
		}

		.contact-list {
			margin-top: 1.2rem;
			display: grid;
			gap: 0.7rem;
		}

		.contact-item {
			background: #fbfaf7;
			border: 1px solid #eee5d8;
			border-radius: 14px;
			padding: 0.85rem;
		}

		.contact-label {
			color: #837768;
			font-size: 0.83rem;
			font-weight: 700;
			margin-bottom: 0.15rem;
		}

		.form-grid {
			display: grid;
			gap: 0.9rem;
		}

		.field {
			display: grid;
			gap: 0.35rem;
		}

		.field label {
			font-size: 0.94rem;
			font-weight: 700;
			color: #4f493f;
		}

		.field input,
		.field textarea {
			border: 1px solid #e8dece;
			border-radius: 13px;
			background: #fff;
			color: #2a2723;
			padding: 0.78rem 0.9rem;
			font-family: inherit;
			font-size: 0.96rem;
			transition: border-color 0.25s ease, box-shadow 0.25s ease;
		}

		.field input:focus,
		.field textarea:focus {
			outline: none;
			border-color: var(--gold);
			box-shadow: 0 0 0 4px rgba(176, 138, 81, 0.13);
		}

		.form-note {
			margin-top: 0.65rem;
			color: #7a7167;
			font-size: 0.9rem;
		}

		.footer {
			background: linear-gradient(180deg, #1a1917 0%, #0f0e0d 100%);
			border-top: 1px solid rgba(212, 178, 124, 0.15);
			padding: 3.5rem 0 1.5rem;
			color: rgba(255, 255, 255, 0.7);

			/* background: linear-gradient(180deg, #0b1a2a 0%, #07121d 100%);
			border-top: 1px solid rgba(212, 178, 124, 0.2);
			padding: 3.5rem 0 1.5rem; 
			color: rgba(255, 255, 255, 0.75);
			box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.3); */
		}  

		.footer .container {
			display: grid;
			grid-template-columns: 1fr 1fr 1fr 1fr;
			gap: 2.5rem;
			padding-bottom: 2rem;
			border-bottom: 1px solid rgba(212, 178, 124, 0.1);
			margin-bottom: 2rem;
		}

		.footer-col h3 {
			font-size: 0.95rem;
			font-weight: 700;
			color: var(--gold-soft);
			margin-bottom: 1.2rem;
			display: flex;
			align-items: center;
			gap: 0.8rem;
		}

		.footer-col ul {
			list-style: none;
			display: flex;
			flex-direction: column;
			gap: 0.85rem;
		}

		.footer-col a {
			color: rgba(255, 255, 255, 0.6);
			text-decoration: none;
			font-size: 0.9rem;
			transition: all 0.3s ease;
			display: flex;
			align-items: center;
			gap: 0.5rem;
		}

		.footer-col a::before {
			content: '›';
			color: var(--gold);
			font-weight: bold;
			margin-left: 0.3rem;
			transition: transform 0.3s ease;
		}

		.footer-col a:hover {
			color: var(--gold-soft);
			transform: translateX(-8px);
		}

		.footer-col a:hover::before {
			transform: translateX(4px);
		}

		.footer-logo {
			width: auto;
			height: auto;
			margin-bottom: 1rem;
			object-fit: contain;
		}

		.footer-about {
			font-size: 0.9rem;
			line-height: 1.8;
			color: rgba(255, 255, 255, 0.65);
			margin-top: 0.5rem;
		}

		.social-links {
			display: flex;
			gap: 0.8rem;
			margin-top: 1.8rem;
			flex-wrap: wrap;
		}

		.social-links .social-icon {
			width: 50px;
			height: 50px;
			border-radius: 50%;
			background: linear-gradient(135deg, rgba(212, 178, 124, 0.15), rgba(176, 138, 81, 0.1));
			display: grid;
			place-items: center;
			color: var(--gold-soft);
			transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
			border: 1.5px solid rgba(212, 178, 124, 0.3);
			position: relative;
			overflow: hidden;
		}

		.social-links .social-icon::before {
			content: '';
			position: absolute;
			top: 50%;
			left: 50%;
			width: 0;
			height: 0;
			background: radial-gradient(circle, rgba(212, 178, 124, 0.4), transparent);
			border-radius: 50%;
			transform: translate(-50%, -50%);
			transition: width 0.6s ease, height 0.6s ease;
		}

		.social-links .social-icon svg {
			width: 24px;
			height: 24px;
			transition: transform 0.3s ease, filter 0.3s ease;
			position: relative;
			z-index: 1;
		}

		.social-links .social-icon:hover {
			background: linear-gradient(135deg, var(--gold-soft), var(--gold));
			color: #fff;
			border-color: var(--gold);
			box-shadow: 0 12px 32px rgba(212, 178, 124, 0.3);
			transform: translateY(-6px);
		}

		.social-links .social-icon:hover::before {
			width: 100px;
			height: 100px;
		}

		.social-links .social-icon:hover svg {
			transform: scale(1.15) rotate(8deg);
			filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.2));
		}

		.footer-bottom {
			display: flex;
			justify-content: space-between;
			align-items: center;
			font-size: 0.85rem;
			color: rgba(255, 255, 255, 0.5);
		}

		@media (max-width: 768px) {
			.footer .container {
				grid-template-columns: 1fr 1fr;
				gap: 2rem;
			}

			.footer-bottom {
				flex-direction: column;
				gap: 1rem;
				text-align: center;
			}
		}

		@media (max-width: 480px) {
			.footer .container {
				grid-template-columns: 1fr;
				gap: 2.5rem;
			}
		}

		.reveal {
			opacity: 0;
			transform: translateY(22px);
			transition: opacity 0.8s ease, transform 0.8s ease;
		}

		.reveal.visible {
			opacity: 1;
			transform: translateY(0);
		}

		.hero-panel.reveal,
		.hero-image-wrap.reveal {
			transform: translateY(26px) scale(0.985);
		}

		.hero-panel.reveal.visible,
		.hero-image-wrap.reveal.visible {
			transform: translateY(0) scale(1);
		}

		@media (max-width: 1024px) {
			.hero-grid {
				grid-template-columns: 1fr;
				min-height: auto;
			}

			.hero {
				min-height: auto;
			}

			.hero-image-wrap {
				min-height: 320px;
			}

			.hero-panel {
				padding: clamp(2.5rem, 4vw, 3rem);
				min-height: 280px;
			}

			.marketing-image {
				min-height: 350px;
			}

			.stats-grid {
				grid-template-columns: repeat(2, minmax(0, 1fr));
				max-width: 760px;
			}



			.portfolio-grid {
				grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
			}

			.portfolio-categories {
				grid-template-columns: repeat(2, minmax(0, 1fr));
			}

			.portfolio-item {
				height: 300px;
			}
		}

		@media (max-width: 760px) {
			.nav-links {
				display: none;
			}

			.nav-toggle {
				display: inline-flex;
			}

			/* when topbar has .nav-open show mobile menu */
			.topbar.nav-open .nav-links {
				display: flex;
				flex-direction: column;
				position: absolute;
				top: 76px;
				right: 1rem;
				background: linear-gradient(180deg, rgba(18,18,18,0.99), rgba(24,24,24,0.98));
				padding: 0.8rem;
				border-radius: 12px;
				box-shadow: 0 12px 32px rgba(0,0,0,0.45);
				z-index: 95;
			}

			.section {
				padding: 4rem 0;
			}

			.hero-actions {
				width: 100%;
			}

			.hero-actions .btn {
				flex: 1 1 220px;
			}

			.portfolio-grid {
				grid-template-columns: 1fr 1fr;
			}

			.portfolio-categories {
				grid-template-columns: 1fr 1fr;
			}

			.portfolio-item {
				height: 250px;
			}

			.portfolio-stat {
				min-height: 110px;
			}

			.stats-grid {
				grid-template-columns: 1fr;
				max-width: 420px;
			}

			.testimonial-controls {
				justify-content: center;
			}
		}

		@media (prefers-reduced-motion: reduce) {
			*,
			*::before,
			*::after {
				animation: none !important;
				transition: none !important;
				scroll-behavior: auto !important;
			}
		}

		/* تحسينات قسم الخدمات للهاتف */
		@media (max-width: 768px) {
			.marketing-grid {
				grid-template-columns: 1fr;
				gap: 2rem;
			}

			.marketing-image {
				min-height: 280px;
				order: -1;
			}

			.marketing-card .section-title {
				font-size: 1.8rem;
			}

			.marketing-card > p {
				font-size: 1rem;
				margin-bottom: 1.2rem;
			}

			.marketing-images {
				margin-top: 1.5rem;
			}

			.marketing-image-item {
				height: 200px;
			}

			.marketing-list li {
				font-size: 0.95rem;
				gap: 0.6rem;
			}
		}

		/* تحسينات قسم الخدمات للهواتف الصغيرة */
		@media (max-width: 480px) {
			.marketing-grid {
				gap: 1.5rem;
			}

			.marketing-image {
				min-height: 220px;
			}

			.marketing-card .section-title {
				font-size: 1.5rem;
				margin-bottom: 1rem;
			}

			.marketing-card > p {
				font-size: 0.95rem;
				margin-bottom: 1rem;
				line-height: 1.6;
			}

			.marketing-images {
				gap: 1rem;
				margin-top: 1rem;
			}

			.marketing-image-item {
				height: 160px;
			}

			.marketing-list li {
				font-size: 0.9rem;
				gap: 0.5rem;
			}

			.marketing-list li::before {
				content: "•";
			}

			.section {
				padding: 3rem 0;
			}
		}

		@media (max-width: 1024px) {
			.section {
				padding: 4.5rem 0;
			}

			.hero-grid {
				grid-template-columns: 1fr;
				min-height: auto;
			}

			.hero {
				min-height: auto;
			}

			.hero-image-wrap {
				min-height: 320px;
			}

			.hero-panel {
				padding: clamp(2.2rem, 4vw, 3rem);
				min-height: 280px;
			}

			.about-grid {
				grid-template-columns: 1fr;
				gap: 1.25rem;
			}

			.about-stat {
				grid-column: 1 / -1;
				justify-content: flex-start;
				padding: 0;
			}

			.about-head .section-title {
				padding-top: 2rem;
			}

			.marketing-grid {
				grid-template-columns: 1fr;
				gap: 2rem;
			}

			.marketing-image {
				min-height: clamp(280px, 48vw, 420px);
				order: -1;
			}

			.marketing-card .section-title {
				font-size: clamp(1.7rem, 3vw, 2.2rem);
			}

			.stats-grid {
				grid-template-columns: repeat(2, 1fr);
				gap: 1.25rem;
			}

			.contact-wrap {
				grid-template-columns: 1fr;
			}

			.footer .container {
				grid-template-columns: repeat(2, minmax(0, 1fr));
			}
		}

		@media (max-width: 760px) {
			html {
				scroll-padding-top: 84px;
			}

			.container {
				width: min(1140px, calc(100vw - 1.5rem));
			}

			.nav-links {
				display: none;
			}

			.nav-toggle {
				display: inline-flex;
			}

			.topbar.nav-open .nav-links {
				display: flex;
				flex-direction: column;
				position: absolute;
				top: calc(100% + 0.75rem);
				inset-inline: 0.75rem;
				background: linear-gradient(180deg, rgba(18,18,18,0.99), rgba(24,24,24,0.98));
				padding: 0.9rem;
				border-radius: 12px;
				box-shadow: 0 12px 32px rgba(0,0,0,0.45);
				z-index: 95;
				min-width: 0;
				width: auto;
				align-items: stretch;
			}

			.topbar.nav-open .nav-links a {
				justify-content: center;
				padding: 0.8rem 1rem;
				width: 100%;
			}

			.section {
				padding: 4rem 0;
			}

			.hero-panel {
				padding: 2.1rem 1.2rem;
				min-height: auto;
			}

			.hero-title {
				font-size: clamp(1.8rem, 8vw, 2.5rem);
			}

			.hero-subtitle {
				max-width: none;
				font-size: 0.98rem;
			}

			.hero-actions {
				width: 100%;
				flex-direction: column;
			}

			.hero-actions .btn {
				flex: 1 1 auto;
				width: 100%;
			}

			.about-grid {
				grid-template-columns: 1fr;
				gap: 1.2rem;
			}

			.about-stat {
				justify-content: center;
			}

			.about-body {
				max-width: none;
				margin-inline-start: 0;
				font-size: 1rem;
			}

			.stats-grid {
				grid-template-columns: 1fr;
				gap: 1rem;
				max-width: 100%;
			}

			.about > .container:last-child {
				padding: 1rem;
				border-radius: 22px;
				margin-top: 1rem;
			}

			.stat-card {
				padding: 0.4rem 0.2rem;
			}

			.portfolio-head {
				margin-bottom: 2rem !important;
			}

			.portfolio-grid {
				grid-template-columns: 1fr;
				gap: 1rem;
			}

			.portfolio-item {
				height: clamp(220px, 70vw, 300px);
			}

			.lightbox-content {
				max-width: 82%;
			}

			.lightbox-nav {
				width: 44px;
				height: 44px;
			}

			.portfolio-label {
				bottom: 1rem;
				right: 1rem;
				font-size: 1rem;
			}

			.portfolio-icon {
				top: 1rem;
				left: 1rem;
				width: 40px;
				height: 40px;
			}

			.marketing-grid {
				gap: 1.5rem;
			}

			.marketing-image {
				min-height: 220px;
			}

			.marketing-card .section-title {
				font-size: 1.5rem;
				margin-bottom: 1rem;
			}

			.marketing-card > p {
				font-size: 0.98rem;
				line-height: 1.7;
			}

			.marketing-images {
				grid-template-columns: 1fr;
				gap: 1rem;
			}

			.marketing-image-item {
				height: 180px;
			}

			.testimonial-box {
				padding: 1.3rem;
				margin: 0;
			}

			.testimonial-head {
				flex-direction: column;
			}

			.testimonial-controls {
				justify-content: center;
				flex-wrap: wrap;
			}

			.contact-card,
			.contact-form {
				padding: 1.3rem;
			}

			.footer .container {
				grid-template-columns: 1fr;
				gap: 2rem;
			}

			.footer-bottom > div {
				flex-direction: column;
				gap: 0.75rem;
			}

			.social-links {
				gap: 0.85rem;
			}

			.social-links .social-icon {
				width: 46px;
				height: 46px;
			}

			.lightbox-content {
				max-width: calc(100% - 1rem);
			}

			.lightbox-close {
				top: -34px;
				right: 0;
			}
		}

		@media (max-width: 480px) {
			.section {
				padding: 3rem 0;
			}

			.about {
				padding-inline: 1rem;
			}

			.about-grid {
				display: contents;
			}

			.about {
				display: grid;
				grid-template-columns: 1fr;
				grid-template-areas:
					"body body"
					"head head"
					"stat stat"
					"stats stats";
				gap: 1rem;
				align-items: center;
			}

			.about-body {
				grid-area: body;
				max-width: none;
				margin-inline-start: 0;
			}
			
			.about-head {
				grid-area: head;
				text-align: center;
				align-self: center;
				margin: 0;
				width: 100%;
			}

			.about-stat {
				grid-area: stat;
				padding: 0;
				justify-content: center;
				justify-self: center;
			}

			.about-stat .stat-box {
				min-width: 0;
				width: 100%;
				padding: 0.9rem 0.8rem;
			}

			.about > .container {
				grid-area: stats;
				width: 100%;
			}

			.nav-wrap {
				min-height: 68px;
			}

			.brand {
				padding: 0.35rem 0.6rem;
			}

			.brand-logo {
				width: clamp(68px, 28vw, 96px);
			}

			.topbar.nav-open .nav-links {
				inset-inline: 0.5rem;
				padding: 0.75rem;
			}

			.hero-panel {
				padding: 1.8rem 1rem;
			}

			.hero-badge {
				font-size: 0.76rem;
			}

			.hero-title {
				font-size: clamp(1.65rem, 9vw, 2.2rem);
			}

			.hero-subtitle {
				font-size: 0.94rem;
			}

			.btn {
				width: 100%;
				padding-inline: 1rem;
			}

			.about-head .section-title,
			.marketing-card .section-title,
			#portfolio .section-title,
			.testimonials .section-title,
			.contact-card .section-title {
				font-size: clamp(1.55rem, 7vw, 2rem);
			}

			.stat-box {
				min-width: 0;
				width: 100%;
				padding: 1rem 1.1rem;
			}

			.stat-num {
				font-size: clamp(2rem, 12vw, 3rem);
			}

			.portfolio-item {
				height: 220px;
			}

			.marketing-image {
				min-height: 200px;
			}

			.marketing-image-item {
				height: 160px;
			}

			.marketing-list li {
				font-size: 0.92rem;
			}

			.testimonial-text {
				font-size: 0.96rem;
			}

			.avatar {
				width: 48px;
				height: 48px;
			}

			.contact-card,
			.contact-form {
				padding: 1.1rem;
				border-radius: 18px;
			}

			.footer-bottom {
				text-align: center;
			}

			.lightbox-close {
				top: -30px;
				font-size: 2rem;
			}
		}