/* App Me Up — brand color overrides
   Palette (logo only):
   --black:        #000000
   --cyan:         #01C7FD
   --bright-blue:  #1079F8
   --deep-blue:    #1A46CE
   --purple:       #782BFC
   --light-violet: #BC5FFC
*/

/* Arabic font: only applied when body has lang-ar class */
body.lang-ar,
body.lang-ar h1,
body.lang-ar h2,
body.lang-ar h3,
body.lang-ar h4,
body.lang-ar h5,
body.lang-ar h6,
body.lang-ar p,
body.lang-ar a,
body.lang-ar span,
body.lang-ar input,
body.lang-ar textarea,
body.lang-ar button,
body.lang-ar label {
	font-family: 'Cairo', 'Segoe UI', Tahoma, Arial, sans-serif !important;
}

/* Language toggle pill */
#header nav ul li.lang-switch,
.lang-switch {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 2px !important;
	padding: 3px !important;
	border: 1px solid rgba(255, 255, 255, 0.12) !important;
	border-radius: 999px !important;
	background: rgba(0, 0, 0, 0.55) !important;
	line-height: 1 !important;
	vertical-align: middle !important;
	position: relative !important;
	width: -moz-fit-content !important;
	width: fit-content !important;
	min-width: 0 !important;
	max-width: -moz-fit-content !important;
	max-width: fit-content !important;
	height: auto !important;
	flex: 0 0 auto !important;
	box-sizing: border-box !important;
	margin: 0 0 0 0.85rem !important;
	overflow: visible !important;
	transition: border-color 0.2s ease, background 0.2s ease;
}
.lang-switch:hover {
	border-color: rgba(255, 255, 255, 0.22);
}
#nav .lang-switch {
	margin-inline-start: 0.85rem;
}
#header nav ul li.lang-switch button,
.lang-switch button {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	background: transparent !important;
	border: none !important;
	padding: 0 0.7rem !important;
	margin: 0 !important;
	font-size: 0.78rem !important;
	font-weight: 600 !important;
	letter-spacing: 0.02em !important;
	color: rgba(255, 255, 255, 0.85) !important;
	cursor: pointer;
	border-radius: 999px !important;
	box-shadow: none !important;
	width: auto !important;
	min-width: 0 !important;
	max-width: none !important;
	height: 1.6rem !important;
	line-height: 1 !important;
	text-align: center !important;
	transition: background 0.18s ease, color 0.18s ease;
	font-family: inherit !important;
	text-transform: none;
	position: relative !important;
	z-index: 1 !important;
	flex: 0 0 auto !important;
	box-sizing: border-box !important;
}
.lang-switch button:hover:not(.active) {
	color: #ffffff !important;
}
.lang-switch button.active {
	color: #111111 !important;
	background: #ffffff !important;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
}

/* RTL adjustments */
[dir="rtl"] .spotlight .content,
[dir="rtl"] .wrapper .container,
[dir="rtl"] .contact-card {
	text-align: right;
}
[dir="rtl"] .wrapper.style1 header,
[dir="rtl"] .wrapper.style2 header,
[dir="rtl"] #banner header {
	text-align: center;
}
[dir="rtl"] .contact-card label {
	margin: 0 0.15rem 0.5rem 0;
}
[dir="rtl"] .actions,
[dir="rtl"] .actions.special {
	padding-right: 0;
}
[dir="rtl"] .icon.solid.alt.major,
[dir="rtl"] .icon.major {
	display: inline-block;
}
[dir="rtl"] .col-4,
[dir="rtl"] .col-6,
[dir="rtl"] .col-8,
[dir="rtl"] .col-12 {
	text-align: inherit;
}

:root {
	--brand-black:        #000000;
	--brand-cyan:         #01C7FD;
	--brand-bright-blue:  #1079F8;
	--brand-deep-blue:    #1A46CE;
	--brand-purple:       #782BFC;
	--brand-light-violet: #BC5FFC;
	--brand-gradient:     linear-gradient(135deg, #1079F8 0%, #782BFC 100%);
	--brand-gradient-hover: linear-gradient(135deg, #01C7FD 0%, #BC5FFC 100%);
}

/* Page background */
body,
body.is-preload,
body.landing,
#page-wrapper {
	background: var(--brand-black) !important;
}

/* Logo (image in header) — landing page only */
body.landing #header {
	height: 4em !important;
	line-height: 4em !important;
	padding: 0 2em !important;
}
body.landing #header h1#logo {
	height: 4em;
	line-height: 4em;
}
body.landing #logo a,
body.landing #header h1#logo a {
	display: inline-flex;
	align-items: center;
	height: 100%;
	transition: opacity 0.2s ease;
}
body.landing #logo a:hover,
body.landing #header h1#logo a:hover {
	opacity: 0.85;
}
body.landing #logo a img,
body.landing #header h1#logo a img {
	height: 2.6em;
	width: auto;
	display: block;
}

/* Left-side group (logo + FAQ link). The original main.css positions
   #logo absolutely; we wrap it in .header-left so the FAQ link can sit
   right next to the logo while still keeping the absolute layout. */
body.landing #header .header-left {
	position: absolute;
	left: 1.25em;
	top: 0;
	height: 100%;
	display: flex;
	align-items: center;
	gap: 1.25em;
	margin: 0;
}
body.landing #header .header-left h1#logo {
	position: relative;
	left: auto;
	top: auto;
	height: 100%;
}

/* FAQ link sitting immediately after the logo (desktop only — hidden
   on mobile so the slide-out panel + footer link cover it) */
#header .header-faq-link {
	color: rgba(255, 255, 255, 0.78) !important;
	font-size: 0.9rem;
	font-weight: 500;
	letter-spacing: 0.01em;
	padding: 0.55em 1em !important;
	text-decoration: none !important;
	transition: color 0.18s ease;
	border: 0 !important;
	position: relative;
	display: inline-block;
}
#header .header-faq-link:after {
	content: "";
	position: absolute;
	left: 1em;
	right: 1em;
	bottom: 0.35em;
	height: 1px;
	background: var(--brand-cyan);
	transform: scaleX(0);
	transform-origin: center;
	transition: transform 0.22s ease;
}
#header .header-faq-link:hover {
	color: #ffffff !important;
}
#header .header-faq-link:hover:after {
	transform: scaleX(1);
}
#header .header-faq-link.active {
	color: var(--brand-cyan) !important;
}
#header .header-faq-link.active:after {
	transform: scaleX(1);
}

/* The mobile-only FAQ <li> inside #nav: hide it on desktop. (It's only
   there so navList() copies it into the slide-out mobile nav panel.) */
#nav .nav-faq-mobile {
	display: none;
}

/* Header / nav — true frosted-glass bar that stays pinned while scrolling.
   Lower alpha + stronger blur so content visibly diffuses through it.
   Override main.css's body.landing #header { position: absolute } so the
   header floats over the page on scroll instead of scrolling away with it. */
#header {
	background: rgba(6, 6, 18, 0.42) !important;
	backdrop-filter: blur(22px) saturate(160%);
	-webkit-backdrop-filter: blur(22px) saturate(160%);
	border-bottom: 1px solid rgba(255, 255, 255, 0.06);
	box-shadow: none;
	transition: background 0.25s ease, border-color 0.25s ease;
}
body.landing #header {
	position: fixed !important;
}
#header.alt {
	background: transparent !important;
	backdrop-filter: none;
	-webkit-backdrop-filter: none;
	border-bottom-color: transparent;
}

/* Nav links — restrained, professional */
#nav > ul {
	display: inline-flex;
	align-items: center;
	gap: 0.15rem;
}
#nav > ul > li {
	margin: 0;
}
#nav > ul > li > a,
#nav > ul > li > span {
	color: rgba(255, 255, 255, 0.78) !important;
	position: relative;
	font-size: 0.9rem;
	font-weight: 500;
	letter-spacing: 0.01em;
	padding: 0.55em 1em !important;
	transition: color 0.18s ease;
}
#nav > ul > li > a:not(.button):after {
	content: "";
	position: absolute;
	left: 1em;
	right: 1em;
	bottom: 0.35em;
	height: 1px;
	background: var(--brand-cyan);
	transform: scaleX(0);
	transform-origin: center;
	transition: transform 0.22s ease;
}
#nav > ul > li > a:not(.button):hover:after,
#nav > ul > li.active > a:not(.button):after {
	transform: scaleX(1);
}
#nav > ul > li > a:hover,
#nav > ul > li.active > a {
	color: #ffffff !important;
}

/* Get a Quote — clean primary CTA */
#nav > ul > li > a.button.primary {
	margin-inline-start: 0.6rem;
	padding: 0.6em 1.4em !important;
	font-size: 0.88rem !important;
	font-weight: 600;
	letter-spacing: 0.02em;
	line-height: 1.1 !important;
	height: auto !important;
	border-radius: 6px !important;
	border: none !important;
	box-shadow: none !important;
	text-decoration: none !important;
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	transition: filter 0.18s ease, box-shadow 0.18s ease;
}
#nav > ul > li > a.button.primary:hover {
	filter: brightness(1.1);
	box-shadow: 0 4px 14px -4px rgba(120, 43, 252, 0.5) !important;
	transform: none;
}
#nav > ul > li > a.button.primary:after {
	display: none !important;
}

#nav > ul > li > ul {
	background: #0a0a14 !important;
	border: 1px solid rgba(120, 43, 252, 0.25);
}

/* Banner */
#banner {
	background: var(--brand-black) !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
}
#banner:before {
	display: none !important;
	content: none !important;
}
#banner .content {
	display: flex !important;
	flex-direction: column !important;
	align-items: center !important;
	justify-content: center !important;
	text-align: center !important;
	margin: 0 auto !important;
	padding: 2em !important;
}
#banner .content header {
	order: 2;
	display: block !important;
	width: 100%;
}
/* Banner wordmark — sits centered above the hero text. Capped via
   max-width so it never goes giant on big screens. */
#banner .content .image {
	order: 1;
	display: block !important;
	width: 100%;
	margin: 0 0 1.5em 0 !important;
	text-align: center;
}
#banner .content .image img {
	width: auto !important;
	max-width: 18em !important;
	height: auto !important;
	margin: 0 auto !important;
	display: block !important;
}
@media screen and (max-width: 736px) {
	#banner .content .image {
		margin: 0 0 1.2em 0 !important;
	}
	#banner .content .image img {
		max-width: 28em !important;
		width: 90vw !important;
	}
}
#banner .content header p {
	text-align: center !important;
}
#banner .content header h2 {
	background: var(--brand-gradient-hover);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	color: transparent !important;
}
#banner .content header p {
	color: #ffffff !important;
	opacity: 0.85;
}
#banner .image {
	background: transparent !important;
	border-radius: 0 !important;
	overflow: visible !important;
	width: auto !important;
	height: auto !important;
}
#banner .image:before {
	display: none !important;
	content: none !important;
	background: none !important;
}
#banner .image img {
	border-radius: 0 !important;
	width: 18em !important;
	max-width: 100%;
	filter: drop-shadow(0 0 30px rgba(1, 199, 253, 0.35));
}

/* Spotlights — section dividers / accent borders */
.spotlight.style1 .content { border-color: var(--brand-bright-blue) !important; }
.spotlight.style2 .content { border-color: var(--brand-purple) !important; }
.spotlight.style3 .content { border-color: var(--brand-cyan) !important; }

/* Kill every HTML5UP noise/stipple overlay (uses images/overlay.png).
   The template applies this dotted texture in three places, all of which
   make photos look hazy and "low quality":
     - .spotlight:before  — over each spotlight section
     - .image:before      — over every .image wrapper (incl. banners)
     - #banner:after      — stipple + dark gradient over the hero */
.spotlight:before,
.image:before,
#banner:after {
	display: none !important;
	content: none !important;
	background-image: none !important;
}

/* Desktop only: render the inline <img> directly instead of as a CSS
   background-image. The legacy background-attachment:fixed + parallax
   pipeline scales and re-paints the image at sub-pixel offsets, which
   softens photos on high-DPI displays. <img> uses the browser's native,
   sharper resampling. Mobile keeps the existing stacked layout below
   980px (handled by main.css and the @media block later in this file). */
@media screen and (min-width: 981px) {
	.spotlight {
		background-image: none !important;
		background-attachment: scroll !important;
	}
	.spotlight .image.main {
		display: block !important;
		position: absolute !important;
		top: 0 !important;
		left: 0 !important;
		right: 0 !important;
		bottom: 0 !important;
		width: 100% !important;
		height: 100% !important;
		margin: 0 !important;
		overflow: hidden !important;
		z-index: 0;
	}
	.spotlight .image.main img {
		width: 100% !important;
		height: 100% !important;
		max-width: 100% !important;
		max-height: 100% !important;
		object-fit: cover !important;
		object-position: center center !important;
		display: block !important;
		position: relative !important;
		image-rendering: auto;
	}
}

.spotlight .content {
	background: rgba(0, 0, 0, 0.78) !important;
	color: #ffffff;
	z-index: 2;
}
.spotlight .goto-next {
	z-index: 2;
}
.spotlight .content header h2 {
	color: #ffffff !important;
}
.spotlight .content header p,
.spotlight .content p {
	color: rgba(255, 255, 255, 0.85) !important;
}

/* "Goto next" — slim animated down-arrow */
.spotlight .goto-next,
.goto-next {
	background: transparent !important;
	background-color: transparent !important;
	border: 0 !important;
	box-shadow: none !important;
}
.spotlight .goto-next:before,
.goto-next:before {
	background-image: none !important;
	background: transparent !important;
	width: 1.4em !important;
	height: 1.4em !important;
	margin: -0.95em 0 0 -0.7em !important;
	border-top: 0 !important;
	border-left: 0 !important;
	border-right: 2px solid rgba(255, 255, 255, 0.9) !important;
	border-bottom: 2px solid rgba(255, 255, 255, 0.9) !important;
	box-sizing: border-box;
	animation: amu-arrow-bounce 1.8s ease-in-out infinite;
	transition: border-color 0.25s ease;
}
.spotlight .goto-next:hover:before,
.goto-next:hover:before {
	border-right-color: var(--brand-cyan) !important;
	border-bottom-color: var(--brand-cyan) !important;
}

@keyframes amu-arrow-bounce {
	0%, 100% {
		transform: translate(0, 0) rotate(45deg);
		opacity: 0.65;
	}
	50% {
		transform: translate(0, 0.55em) rotate(45deg);
		opacity: 1;
	}
}

@media (prefers-reduced-motion: reduce) {
	.spotlight .goto-next:before,
	.goto-next:before {
		animation: none;
		transform: rotate(45deg);
	}
}

/* Wrapper sections (the icon grid + the CTA section) */
.wrapper.style1 {
	background: linear-gradient(180deg, #000000 0%, #06061a 100%) !important;
	background-color: #000000 !important;
	color: #ffffff;
}
.wrapper.style2 {
	background: url("../../images/background.jpg") center center / cover no-repeat var(--brand-black) !important;
	color: #ffffff;
}
.wrapper.style1 header h2,
.wrapper.style1 h3,
.wrapper.style2 h3 {
	color: #ffffff !important;
}
/* Section #five contact heading — gradient to mirror the hero */
.wrapper.style2 header h2 {
	background: var(--brand-gradient-hover);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	color: transparent !important;
	font-weight: 800;
}
.wrapper.style1 header p,
.wrapper.style2 header p,
.wrapper.style1 p,
.wrapper.style2 p {
	color: rgba(255, 255, 255, 0.85) !important;
}

/* Services-grid icons — match the Why Us reason-icon identity:
   cyan glyph on a blue-to-purple gradient circle with a purple border. */
.icon.major,
.icon.solid.alt.major {
	color: var(--brand-cyan) !important;
}
.wrapper.style1 .box.alt .icon.major,
.wrapper.style1 .box .icon.major,
.wrapper.style1 .box section:nth-child(odd) .icon.major,
.wrapper.style1 .box.alt .icon.solid.alt.major {
	background: linear-gradient(135deg, rgba(16, 121, 248, 0.18) 0%, rgba(120, 43, 252, 0.18) 100%) !important;
	border: 1px solid rgba(120, 43, 252, 0.3) !important;
	color: var(--brand-cyan) !important;
}
/* The HTML5UP template renders the glyph via .icon.major.alt:before with
   a dark fill + white text-shadow halo. Override both so the glyph reads
   as a clean cyan stroke matching the rest of the brand. */
.wrapper.style1 .box.alt .icon.major.alt:before,
.wrapper.style1 .box .icon.major.alt:before {
	color: var(--brand-cyan) !important;
	text-shadow: none !important;
}

/* Services grid — interactive cards.
   Use a flex-column layout on each card so the icon, title, and
   description all sit on the same horizontal center line. */
.wrapper.style1 .box.alt .row > section[class*="col-"] {
	position: relative;
	padding: 2em 1.5em !important;
	border: 1px solid rgba(1, 199, 253, 0.18);
	border-radius: 10px;
	background: linear-gradient(180deg, rgba(10, 10, 22, 0.55) 0%, rgba(10, 10, 22, 0.25) 100%);
	transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
	overflow: hidden;
	text-align: center;
	display: flex !important;
	flex-direction: column;
	align-items: center;
	justify-content: flex-start;
}
.wrapper.style1 .box.alt .row > section[class*="col-"] > * {
	width: 100%;
	max-width: 100%;
}
.wrapper.style1 .box.alt .row > section[class*="col-"] .icon.major {
	transition: transform 0.25s ease, color 0.25s ease;
	display: flex !important;
	align-items: center;
	justify-content: center;
	line-height: 1 !important;
	margin: 0 auto 1.25em auto !important;
	text-align: center;
	flex-shrink: 0;
}
.wrapper.style1 .box.alt .row > section[class*="col-"] .icon.major:before {
	line-height: 1 !important;
	display: block;
	width: 100%;
	text-align: center;
}
.wrapper.style1 .box.alt .row > section[class*="col-"] h3,
.wrapper.style1 .box.alt .row > section[class*="col-"] p {
	text-align: center;
}
.wrapper.style1 .box.alt .row > section[class*="col-"]:hover {
	transform: translateY(-4px);
	border-color: var(--brand-cyan);
	box-shadow: 0 10px 30px -10px rgba(1, 199, 253, 0.35),
	            0 0 0 1px rgba(1, 199, 253, 0.25) inset;
	background: linear-gradient(180deg, rgba(1, 199, 253, 0.08) 0%, rgba(120, 43, 252, 0.06) 100%);
}
.wrapper.style1 .box.alt .row > section[class*="col-"]:hover .icon.major {
	transform: scale(1.08);
	color: var(--brand-cyan) !important;
}

/* Buttons */
input[type="submit"],
input[type="reset"],
input[type="button"],
button,
.button {
	background: rgba(1, 199, 253, 0.08) !important;
	border: 1px solid var(--brand-cyan) !important;
	color: var(--brand-cyan) !important;
	box-shadow: none !important;
	transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease, transform 0.15s ease !important;
}
input[type="submit"]:hover,
input[type="reset"]:hover,
input[type="button"]:hover,
button:hover,
.button:hover {
	background: rgba(1, 199, 253, 0.18) !important;
	color: #ffffff !important;
	border-color: var(--brand-light-violet) !important;
}

input[type="submit"].primary,
input[type="reset"].primary,
input[type="button"].primary,
button.primary,
.button.primary {
	background: var(--brand-gradient) !important;
	border: none !important;
	color: #ffffff !important;
}
input[type="submit"].primary:hover,
input[type="reset"].primary:hover,
input[type="button"].primary:hover,
button.primary:hover,
.button.primary:hover {
	background: var(--brand-gradient-hover) !important;
	color: #ffffff !important;
	transform: translateY(-1px);
}

/* Form input */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="tel"],
select,
textarea {
	background: rgba(255, 255, 255, 0.06) !important;
	border: 1px solid rgba(1, 199, 253, 0.35) !important;
	color: #ffffff !important;
}
input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="tel"]:focus,
select:focus,
textarea:focus {
	border-color: var(--brand-cyan) !important;
	box-shadow: 0 0 0 1px var(--brand-cyan) !important;
}
::-webkit-input-placeholder { color: rgba(255, 255, 255, 0.5) !important; }
::-moz-placeholder { color: rgba(255, 255, 255, 0.5) !important; }
:-ms-input-placeholder { color: rgba(255, 255, 255, 0.5) !important; }
::placeholder { color: rgba(255, 255, 255, 0.5) !important; }

/* Links */
a {
	color: var(--brand-cyan);
	border-bottom-color: rgba(1, 199, 253, 0.4);
}
a:hover {
	color: var(--brand-light-violet) !important;
	border-bottom-color: var(--brand-light-violet);
}

/* Headings */
h1, h2, h3, h4, h5, h6 {
	color: #ffffff;
}

/* Footer */
#footer {
	background: var(--brand-black) !important;
	border-top: 1px solid rgba(120, 43, 252, 0.25);
	color: rgba(255, 255, 255, 0.7);
}
#footer .icons a,
#footer ul.icons li a {
	color: var(--brand-cyan) !important;
	border-color: rgba(1, 199, 253, 0.35) !important;
}
#footer .icons a:hover,
#footer ul.icons li a:hover {
	color: var(--brand-light-violet) !important;
	border-color: var(--brand-light-violet) !important;
}
#footer .copyright,
#footer ul.copyright li {
	color: rgba(255, 255, 255, 0.5) !important;
}
#footer .copyright a {
	color: var(--brand-cyan) !important;
}

/* Section header underlines */
header.major:after,
header > p:after {
	background: var(--brand-gradient) !important;
}

/* Scrollbar — neutral, refined. Same approach as Stripe / Linear / GitHub
   dark: near-invisible track + low-opacity white thumb that brightens on
   hover. Stays out of the way of brand content. */
html {
	scrollbar-width: thin;
	scrollbar-color: rgba(255, 255, 255, 0.18) transparent;
}
::-webkit-scrollbar {
	width: 10px;
	height: 10px;
}
::-webkit-scrollbar-track {
	background: transparent;
}
::-webkit-scrollbar-thumb {
	background: rgba(255, 255, 255, 0.18);
	border-radius: 999px;
	border: 2px solid transparent;
	background-clip: padding-box;
	transition: background 0.18s ease;
}
::-webkit-scrollbar-thumb:hover {
	background: rgba(255, 255, 255, 0.32);
	background-clip: padding-box;
}
::-webkit-scrollbar-corner {
	background: transparent;
}

/* ============================================================================
   MOBILE HEADER UI (≤736px)
   Replaces the legacy HTML5UP titleBar + navPanel with the same standalone-
   pattern used on the subpages: glass hamburger + glass language pill on
   the left, logo on the right, frosted-glass dropdown that slides down
   when the hamburger is tapped.
   ============================================================================ */

/* Desktop: keep the mobile-only elements hidden. !important is needed
   because the global .lang-switch rule already uses !important. */
#header > .hamburger,
#header > .lang-switch.lang-switch-mobile {
	display: none !important;
}

@media screen and (max-width: 736px) {
	/* Force-show the regular #header on mobile (override main.css's hide) */
	body.landing #header,
	#header {
		display: flex !important;
		flex-direction: row !important;
		align-items: center !important;
		justify-content: flex-start !important;
		position: fixed !important;
		top: 0; left: 0; right: 0;
		height: 4em !important;
		padding: 0 0.85em !important;
		gap: 0.5em;
		z-index: 100 !important;
	}

	/* Retire the legacy HTML5UP mobile UI — we don't need it anymore */
	#titleBar { display: none !important; }
	#navPanel { display: none !important; }
	body.navPanel-visible #page-wrapper,
	body.navPanel-visible #titleBar { transform: none !important; }

	/* HAMBURGER — glass-style square button on the left */
	#header > .hamburger {
		display: inline-flex !important;
		align-items: center;
		justify-content: center;
		background: rgba(255, 255, 255, 0.05) !important;
		border: 1px solid rgba(255, 255, 255, 0.15) !important;
		backdrop-filter: blur(14px);
		-webkit-backdrop-filter: blur(14px);
		color: #ffffff !important;
		cursor: pointer;
		width: 2.5em;
		height: 2.5em;
		padding: 0;
		margin: 0;
		border-radius: 12px;
		transition: background 0.18s ease, border-color 0.18s ease;
		flex-shrink: 0;
		order: 1;
	}
	#header > .hamburger:hover,
	#header > .hamburger:active {
		background: rgba(255, 255, 255, 0.1) !important;
		border-color: rgba(255, 255, 255, 0.25) !important;
	}
	#header > .hamburger svg {
		width: 22px; height: 22px;
	}
	/* Toggle hamburger ↔ X icon based on .nav-open */
	#header > .hamburger .ham-close { display: none; }
	#header.nav-open > .hamburger .ham-open { display: none; }
	#header.nav-open > .hamburger .ham-close { display: block; }

	/* MOBILE LANGUAGE PILL — glass-style, sits next to hamburger */
	#header > .lang-switch.lang-switch-mobile {
		display: inline-flex !important;
		background: rgba(255, 255, 255, 0.05) !important;
		border: 1px solid rgba(255, 255, 255, 0.15) !important;
		backdrop-filter: blur(14px);
		-webkit-backdrop-filter: blur(14px);
		border-radius: 12px !important;
		height: 2.5em;
		padding: 0.25em !important;
		margin: 0 !important;
		flex-shrink: 0;
		order: 2;
	}
	#header > .lang-switch.lang-switch-mobile button {
		height: 1.7rem !important;
		padding: 0 0.7rem !important;
		border-radius: 8px !important;
		font-size: 0.78rem !important;
	}

	/* LOGO on the right */
	body.landing #header .header-left {
		position: static !important;
		margin-left: auto !important;
		left: auto !important;
		top: auto !important;
		gap: 0 !important;
		order: 3;
	}
	[dir="rtl"] body.landing #header .header-left {
		margin-left: 0 !important;
		margin-right: auto !important;
	}
	body.landing #header .header-left h1#logo,
	body.landing #header .header-left h1#logo a {
		height: auto !important;
		line-height: 1 !important;
	}
	body.landing #header .header-left h1#logo a img {
		height: 2.4em !important;
	}
	/* Hide the desktop FAQ link next to logo (it's in the dropdown menu) */
	#header .header-faq-link {
		display: none !important;
	}

	/* DROPDOWN MENU — frosted glass panel that slides down on tap */
	#header #nav {
		position: fixed !important;
		top: 4.4em;
		left: 0.5em;
		right: 0.5em;
		background: rgba(20, 20, 30, 0.55) !important;
		backdrop-filter: blur(28px) saturate(180%);
		-webkit-backdrop-filter: blur(28px) saturate(180%);
		border: 1px solid rgba(255, 255, 255, 0.1);
		border-radius: 16px;
		padding: 0.4em 0.75em;
		height: auto;
		max-height: 0;
		opacity: 0;
		overflow: hidden;
		pointer-events: none;
		transition: max-height 0.3s ease, opacity 0.2s ease;
		box-shadow: 0 12px 40px -8px rgba(0, 0, 0, 0.5);
		z-index: 99;
	}
	#header.nav-open #nav {
		max-height: 80vh;
		opacity: 1;
		pointer-events: auto;
	}
	#header #nav > ul {
		display: flex !important;
		flex-direction: column !important;
		align-items: stretch !important;
		gap: 0 !important;
		width: 100% !important;
		padding: 0.2em 0 !important;
		height: auto !important;
		line-height: 1.4 !important;
	}
	#header #nav > ul > li {
		width: 100% !important;
		margin: 0 !important;
		height: auto !important;
		line-height: 1.4 !important;
		display: block !important;
	}
	#header #nav > ul > li > a {
		display: block !important;
		width: 100% !important;
		padding: 0.7em 0.85em !important;
		border-top: 1px solid rgba(255, 255, 255, 0.06);
		font-size: 0.95rem !important;
		height: auto !important;
		line-height: 1.4 !important;
	}
	#header #nav > ul > li:first-child > a { border-top: 0 !important; }
	#header #nav > ul > li > a.button.primary {
		margin: 0.6em 0 0.4em !important;
		text-align: center !important;
		justify-content: center !important;
		border-radius: 8px !important;
	}
	/* Hide the in-nav lang switch on mobile — the glass pill in the header
	   is the only one shown */
	#header #nav .lang-switch:not(.lang-switch-mobile) {
		display: none !important;
	}
	/* The .nav-faq-mobile <li> is hidden on desktop (FAQ sits next to the
	   logo there). On mobile it becomes the FAQ entry in the dropdown. */
	#header #nav .nav-faq-mobile {
		display: list-item !important;
	}
}

/* ====== Mobile (≤980px): brand the slide-out title bar + nav panel ====== */
@media screen and (max-width: 980px) {
	/* Block any element from forcing the page wider than the viewport */
	html, body, #page-wrapper {
		overflow-x: hidden !important;
		max-width: 100vw;
	}
	img {
		max-width: 100%;
		height: auto;
	}

	#titleBar {
		background: rgba(0, 0, 0, 0.92) !important;
		border-bottom: 1px solid rgba(1, 199, 253, 0.18) !important;
		backdrop-filter: blur(8px);
		-webkit-backdrop-filter: blur(8px);
	}
	#titleBar .title {
		color: #ffffff !important;
		font-weight: 700 !important;
		letter-spacing: 0.04em;
	}
	#titleBar .title a {
		background: linear-gradient(135deg, var(--brand-cyan) 0%, var(--brand-light-violet) 100%);
		-webkit-background-clip: text;
		background-clip: text;
		-webkit-text-fill-color: transparent;
		color: transparent !important;
	}
	#titleBar .toggle:before {
		background: linear-gradient(135deg, var(--brand-bright-blue) 0%, var(--brand-purple) 100%) !important;
		color: #ffffff !important;
	}

	#navPanel {
		background: #000000 !important;
		border-right: 1px solid rgba(120, 43, 252, 0.3) !important;
		padding: 1em 1.25em !important;
	}
	#navPanel .link {
		color: rgba(255, 255, 255, 0.85) !important;
		border-top: 1px solid rgba(1, 199, 253, 0.12) !important;
		font-weight: 500;
		letter-spacing: 0.02em;
	}
	#navPanel .link:hover,
	#navPanel .link:active {
		color: var(--brand-cyan) !important;
	}
	#navPanel .link:first-child {
		border-top: 0 !important;
	}

	/* Language switch in mobile panel — show as a centered pill on its own row */
	#navPanel .lang-switch {
		display: flex !important;
		justify-content: center;
		margin: 1em auto;
		width: fit-content;
	}

	/* Banner: keep logo nicely sized on phones, force-contained */
	#banner .image,
	#banner .content .image {
		width: auto !important;
		height: auto !important;
		max-width: 70vw !important;
		margin: 1em auto !important;
		overflow: visible !important;
	}
	#banner .image img,
	#banner .content .image img {
		width: 12em !important;
		max-width: 60vw !important;
		height: auto !important;
		display: block !important;
		margin: 0 auto !important;
	}
	#banner .content header h2 {
		font-size: 1.8em !important;
	}
	#banner .content header p {
		max-width: 92vw;
		margin-left: auto;
		margin-right: auto;
		word-wrap: break-word;
	}

	/* Spotlight: kill the JS-set cover background that bleeds through on mobile */
	.spotlight {
		background-image: none !important;
		background-color: var(--brand-black) !important;
		background-attachment: scroll !important;
	}
	.spotlight .content {
		background: rgba(0, 0, 0, 0.6) !important;
	}
	/* Spotlight inline image: stay inside the viewport, contain the natural aspect */
	.spotlight .image.main {
		display: block !important;
		width: 100% !important;
		max-width: 100vw !important;
		max-height: 40vh !important;
		overflow: hidden !important;
		margin: 0 !important;
	}
	.spotlight .image.main img {
		width: 100% !important;
		max-width: 100% !important;
		height: auto !important;
		display: block !important;
		position: relative !important;
		object-fit: cover;
	}
}

@media screen and (max-width: 736px) {
	#banner .image img,
	#banner .content .image img {
		width: 10em !important;
		max-width: 55vw !important;
	}
	#banner .content header h2 {
		font-size: 1.6em !important;
	}
	.wrapper.style2 header h2 {
		font-size: 1.5em;
	}
}

@media screen and (max-width: 480px) {
	#banner .image img,
	#banner .content .image img {
		width: 8em !important;
		max-width: 50vw !important;
	}
	#banner .content header h2 {
		font-size: 1.4em !important;
	}
	#banner .content header p,
	.spotlight .content p,
	.wrapper p {
		font-size: 0.95rem;
	}

	/* Tighter section padding on tiny screens */
	.wrapper {
		padding: 3em 1.25em !important;
	}
}

/* Contact card — fully branded */
.contact-card {
	max-width: 720px;
	margin: 0 auto;
	padding: 2.75rem 2.5rem 2.5rem 2.5rem;
	background:
		radial-gradient(circle at 0% 0%, rgba(1, 199, 253, 0.12), transparent 60%),
		radial-gradient(circle at 100% 100%, rgba(188, 95, 252, 0.14), transparent 60%),
		linear-gradient(180deg, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0.55) 100%);
	border: 1px solid rgba(1, 199, 253, 0.3);
	border-radius: 18px;
	box-shadow:
		0 20px 60px rgba(0, 0, 0, 0.55),
		0 0 0 1px rgba(120, 43, 252, 0.12),
		inset 0 1px 0 rgba(255, 255, 255, 0.06);
	backdrop-filter: blur(14px);
	-webkit-backdrop-filter: blur(14px);
	text-align: left;
	position: relative;
	overflow: hidden;
}
.contact-card::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 3px;
	background: linear-gradient(
		90deg,
		var(--brand-cyan) 0%,
		var(--brand-bright-blue) 33%,
		var(--brand-purple) 66%,
		var(--brand-light-violet) 100%
	);
	opacity: 0.95;
}
.contact-card label {
	display: block;
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--brand-cyan) !important;
	margin: 0 0 0.55rem 0.15rem;
}
.contact-card .row > [class*="col-"] {
	margin-bottom: 1.25rem;
}
.contact-card input[type="text"],
.contact-card input[type="email"],
.contact-card input[type="tel"],
.contact-card textarea {
	width: 100%;
	background: rgba(0, 0, 0, 0.4) !important;
	border: 1px solid rgba(1, 199, 253, 0.28) !important;
	border-radius: 10px !important;
	color: #ffffff !important;
	padding: 0.85rem 1rem !important;
	font-size: 0.95rem;
	transition: border-color 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
}
.contact-card input[type="text"]:hover,
.contact-card input[type="email"]:hover,
.contact-card input[type="tel"]:hover,
.contact-card textarea:hover {
	border-color: rgba(1, 199, 253, 0.5) !important;
}
.contact-card input[type="text"]:focus,
.contact-card input[type="email"]:focus,
.contact-card input[type="tel"]:focus,
.contact-card textarea:focus {
	border-color: var(--brand-cyan) !important;
	background: rgba(0, 0, 0, 0.55) !important;
	box-shadow:
		0 0 0 3px rgba(1, 199, 253, 0.18),
		0 0 18px rgba(120, 43, 252, 0.18) !important;
	outline: none;
}
.contact-card textarea {
	min-height: 150px;
	resize: vertical;
	font-family: inherit;
	line-height: 1.55;
}
.contact-card .actions.special {
	margin: 0.5rem 0 0 0;
	display: flex;
	justify-content: center;
	padding: 0;
}
.contact-card .actions.special > li {
	padding: 0;
}
/* Three-column footer: email | brand | marks */
#footer {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	gap: 1.5rem;
	padding: 0.6em 2.5em !important;
	border-top: 1px solid rgba(255, 255, 255, 0.06);
	text-align: left;
	position: relative;
}
#footer .footer-left {
	justify-self: start;
}
#footer .footer-right {
	justify-self: end;
}
#five.wrapper {
	padding-bottom: 2em !important;
}

/* Left column: contact email */
#footer .footer-left {
	display: flex;
	align-items: center;
	min-width: 0;
}
#footer .footer-email {
	color: rgba(255, 255, 255, 0.75) !important;
	font-size: 0.95rem;
	letter-spacing: 0.01em;
	text-decoration: none;
	border-bottom: none !important;
	transition: color 0.2s ease;
	white-space: nowrap;
}
#footer .footer-email:hover {
	color: var(--brand-cyan) !important;
}

/* Center column: brand logo + copyright */
#footer .footer-center {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0;
	min-width: 0;
	overflow: hidden;
}
#footer .footer-brand-logo {
	height: 200px;
	width: auto;
	max-width: 520px;
	object-fit: cover;
	object-position: center;
	display: block;
	margin: -55px 0 -50px;
}
#footer .footer-rights {
	font-size: 0.85rem;
	color: rgba(255, 255, 255, 0.6);
	letter-spacing: 0.01em;
	text-align: center;
}
#footer .footer-policy-links {
	margin-top: 0.35em;
	font-size: 0.78rem;
	letter-spacing: 0.02em;
	display: flex;
	gap: 0.55em;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
}
#footer .footer-policy-links a {
	color: rgba(255, 255, 255, 0.55) !important;
	text-decoration: none;
	border: 0;
	transition: color 0.18s ease;
}
#footer .footer-policy-links a:hover {
	color: var(--brand-cyan) !important;
}
#footer .footer-policy-links span.sep {
	color: rgba(255, 255, 255, 0.2);
}

/* Right column: marks row */
#footer .footer-right {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 0.5rem;
	min-width: 0;
}

/* Marks row: numbers + small icons + 2030 logo */
#footer .footer-marks {
	display: flex;
	align-items: center;
	gap: 0.85rem;
	flex-wrap: wrap;
	justify-content: flex-end;
}
#footer .footer-cred-pair {
	display: inline-flex;
	gap: 0.3rem;
	align-items: baseline;
	font-size: 0.78rem;
	letter-spacing: 0.02em;
	color: rgba(255, 255, 255, 0.5);
}
#footer .footer-cred-number {
	color: var(--brand-cyan);
	font-weight: 600;
	font-variant-numeric: tabular-nums;
}
#footer .footer-mark-mini {
	height: 26px;
	width: auto;
	max-width: 32px;
	object-fit: contain;
	opacity: 0.9;
	display: block;
}
#footer .footer-mark-mini[src*="ministry-of-commerce"] {
	height: 78px;
	max-width: 96px;
}
#footer .footer-mark-mini[src*="media-authority"] {
	height: 52px;
	max-width: 64px;
}
#footer .footer-mark-2030 {
	height: 60px;
	width: auto;
	max-width: 110px;
	object-fit: contain;
	opacity: 0.95;
	display: block;
	margin-left: 0.25rem;
}

/* Tablet: stack into one column */
@media screen and (max-width: 980px) {
	#footer {
		padding: 1.25em 1.5em !important;
		grid-template-columns: 1fr;
		justify-items: center;
		gap: 1rem;
	}
	#footer .footer-left {
		justify-content: center;
		width: 100%;
	}
	#footer .footer-center {
		width: 100%;
	}
	#footer .footer-right {
		align-items: center;
		width: 100%;
	}
	#footer .footer-rights {
		text-align: center;
	}
	#footer .footer-marks {
		justify-content: center;
	}
}

@media screen and (max-width: 480px) {
	#footer {
		padding: 1.1em 1rem !important;
	}
	#footer .footer-email {
		font-size: 0.9rem;
	}
	#footer .footer-rights {
		font-size: 0.78rem;
	}
	#footer .footer-brand-logo {
		height: 160px;
		max-width: 420px;
		margin: -42px 0 -38px;
	}
	#footer .footer-marks {
		gap: 0.6rem;
	}
	#footer .footer-cred-pair {
		font-size: 0.72rem;
	}
	#footer .footer-mark-mini {
		height: 22px;
		max-width: 28px;
	}
	#footer .footer-mark-mini[src*="ministry-of-commerce"] {
		height: 66px;
		max-width: 84px;
	}
	#footer .footer-mark-mini[src*="media-authority"] {
		height: 44px;
		max-width: 56px;
	}
	#footer .footer-mark-2030 {
		height: 50px;
		max-width: 92px;
	}
}

/* RTL: copyright/marks anchor on the left, email on the right */
[dir="rtl"] #footer .footer-right {
	align-items: flex-start;
}
[dir="rtl"] #footer .footer-marks {
	justify-content: flex-start;
}

/* Send Message button */
.contact-card button.primary.send-btn {
	position: relative;
	overflow: hidden;
	min-width: 260px;
	padding: 1.05rem 2.4rem !important;
	font-weight: 700;
	font-size: 0.82rem;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	border-radius: 999px !important;
	background: linear-gradient(135deg, var(--brand-bright-blue) 0%, var(--brand-purple) 100%) !important;
	color: #ffffff !important;
	border: none !important;
	box-shadow:
		0 6px 18px rgba(16, 121, 248, 0.35),
		0 14px 38px rgba(120, 43, 252, 0.4),
		inset 0 1px 0 rgba(255, 255, 255, 0.22) !important;
	transition: transform 0.25s ease, box-shadow 0.3s ease, background 0.4s ease, padding 0.25s ease !important;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.6rem;
	font-family: inherit !important;
}
/* Animated arrow */
.contact-card button.primary.send-btn::after {
	content: "→";
	font-size: 1.1em;
	font-weight: 600;
	letter-spacing: 0;
	display: inline-block;
	transition: transform 0.3s ease;
}
[dir="rtl"] .contact-card button.primary.send-btn::after {
	content: "←";
}
/* PDPL privacy notice under the contact form's submit button */
.contact-card .form-privacy-notice {
	margin: 1em 0 0;
	font-size: 0.78rem;
	color: rgba(255, 255, 255, 0.5);
	line-height: 1.55;
	letter-spacing: 0.01em;
	text-align: center;
}
.contact-card .form-privacy-notice a {
	color: rgba(255, 255, 255, 0.75);
	text-decoration: none;
	border-bottom: 1px solid rgba(255, 255, 255, 0.18);
	transition: color 0.18s ease, border-color 0.18s ease;
}
.contact-card .form-privacy-notice a:hover {
	color: var(--brand-cyan);
	border-bottom-color: var(--brand-cyan);
}
/* Sweeping shimmer */
.contact-card button.primary.send-btn::before {
	content: "";
	position: absolute;
	top: 0;
	left: -75%;
	width: 60%;
	height: 100%;
	background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.28) 50%, transparent 100%);
	transform: skewX(-20deg);
	transition: left 0.7s ease;
	pointer-events: none;
}
.contact-card button.primary.send-btn:hover {
	background: linear-gradient(135deg, var(--brand-cyan) 0%, var(--brand-light-violet) 100%) !important;
	color: #ffffff !important;
	transform: translateY(-3px);
	box-shadow:
		0 10px 26px rgba(1, 199, 253, 0.45),
		0 20px 48px rgba(188, 95, 252, 0.45),
		inset 0 1px 0 rgba(255, 255, 255, 0.32) !important;
}
.contact-card button.primary.send-btn:hover::after {
	transform: translateX(5px);
}
[dir="rtl"] .contact-card button.primary.send-btn:hover::after {
	transform: translateX(-5px);
}
.contact-card button.primary.send-btn:hover::before {
	left: 130%;
}
.contact-card button.primary.send-btn:active {
	transform: translateY(-1px);
}
.contact-card button.primary.send-btn:focus-visible {
	outline: 2px solid var(--brand-cyan);
	outline-offset: 4px;
}
.contact-card button.primary.send-btn:disabled,
.contact-card button.primary.send-btn[disabled] {
	opacity: 0.7;
	cursor: progress;
	transform: none;
}
.contact-card button.primary.send-btn:disabled::after,
.contact-card button.primary.send-btn[disabled]::after {
	display: none;
}

/* Banner logo: smooth fade as the user scrolls past the hero (driven by JS). */
body.landing #banner .image img {
	transition: opacity 0.18s ease-out;
	will-change: opacity;
}

/* === Testimonials section === */
#testimonials .testimonials-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1.2em;
	margin: 2.5em 0 0;
	text-align: left;
}
[dir="rtl"] #testimonials .testimonials-grid { text-align: right; }
.testimonial-card {
	background: rgba(255, 255, 255, 0.025);
	border: 1px solid rgba(255, 255, 255, 0.06);
	border-radius: 14px;
	padding: 1.8em 1.6em;
	display: flex;
	flex-direction: column;
	transition: border-color 0.22s ease, background 0.22s ease, transform 0.22s ease;
	position: relative;
}
.testimonial-card:hover {
	border-color: rgba(1, 199, 253, 0.22);
	background: rgba(255, 255, 255, 0.04);
	transform: translateY(-3px);
}
.testimonial-card .quote-icon {
	width: 26px;
	height: 26px;
	color: var(--brand-cyan);
	opacity: 0.55;
	margin: 0 0 0.85em;
	display: block;
}
.testimonial-card .testimonial-quote {
	font-size: 0.95rem !important;
	color: rgba(255, 255, 255, 0.85) !important;
	line-height: 1.7 !important;
	margin: 0 0 1.4em !important;
	font-style: normal;
	flex: 1 0 auto;
}
.testimonial-card .testimonial-author {
	display: flex;
	align-items: center;
	gap: 0.85em;
	margin-top: auto;
}
.testimonial-card .avatar {
	width: 42px;
	height: 42px;
	border-radius: 50%;
	background: var(--brand-gradient);
	color: #ffffff;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 0.82rem;
	font-weight: 700;
	letter-spacing: 0.05em;
	flex-shrink: 0;
	box-shadow: 0 2px 8px -2px rgba(120, 43, 252, 0.45);
}
.testimonial-card .who {
	display: flex;
	flex-direction: column;
	min-width: 0;
	line-height: 1.35;
}
.testimonial-card .who .name {
	font-size: 0.92rem;
	font-weight: 600;
	color: #ffffff !important;
}
.testimonial-card .who .role {
	font-size: 0.78rem;
	color: rgba(255, 255, 255, 0.55) !important;
	margin-top: 0.15em;
}

@media screen and (max-width: 980px) {
	#testimonials .testimonials-grid {
		grid-template-columns: 1fr;
		gap: 1em;
		margin-top: 2em;
	}
	.testimonial-card { padding: 1.5em 1.4em; }
	.testimonial-card .testimonial-quote { font-size: 0.92rem !important; }
}

/* === Skip-to-content link ===
   Visually hidden until focused (keyboard / screen-reader users). When
   focused it slides into the top-left as a visible button so the user
   can jump past the nav. */
.skip-to-content {
	position: absolute;
	top: 0.5em;
	left: 0.5em;
	background: var(--brand-cyan);
	color: #0a0a14 !important;
	padding: 0.65em 1.1em;
	border-radius: 6px;
	font-size: 0.9rem;
	font-weight: 600;
	letter-spacing: 0.01em;
	text-decoration: none !important;
	border: 0 !important;
	z-index: 10000;
	transform: translateY(-150%);
	transition: transform 0.18s ease;
}
.skip-to-content:focus {
	transform: translateY(0);
	outline: 2px solid #ffffff;
	outline-offset: 2px;
}
[dir="rtl"] .skip-to-content {
	left: auto;
	right: 0.5em;
}

/* === Footer social icons (LinkedIn / WhatsApp) ===
   Brand-tinted: monochrome white at low opacity, brand-cyan on hover.
   Lives next to the footer email in the left column. */
#footer .footer-left {
	display: flex !important;
	align-items: center;
	gap: 1em;
	flex-wrap: wrap;
}
#footer .footer-socials {
	display: inline-flex;
	align-items: center;
	gap: 0.55em;
}
#footer .footer-social {
	color: rgba(255, 255, 255, 0.55) !important;
	text-decoration: none;
	border: 0 !important;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	border-radius: 6px;
	transition: color 0.18s ease, background 0.18s ease;
}
#footer .footer-social svg {
	width: 18px;
	height: 18px;
	display: block;
}
#footer .footer-social:hover {
	color: var(--brand-cyan) !important;
	background: rgba(255, 255, 255, 0.05);
}

/* === Floating WhatsApp button === */
.wa-float {
	position: fixed;
	bottom: 1.4em;
	right: 1.4em;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background: #25D366;
	color: #ffffff !important;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	text-decoration: none !important;
	border: 0 !important;
	box-shadow: 0 6px 20px -4px rgba(37, 211, 102, 0.55), 0 2px 6px rgba(0, 0, 0, 0.25);
	transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;
	z-index: 999;
}
.wa-float:hover {
	transform: translateY(-2px) scale(1.04);
	filter: brightness(1.05);
	box-shadow: 0 10px 28px -4px rgba(37, 211, 102, 0.65), 0 3px 10px rgba(0, 0, 0, 0.3);
}
.wa-float svg { width: 28px; height: 28px; display: block; }
[dir="rtl"] .wa-float { right: auto; left: 1.4em; }
@media screen and (max-width: 480px) {
	.wa-float { width: 50px; height: 50px; bottom: 1em; right: 1em; }
	.wa-float svg { width: 24px; height: 24px; }
	[dir="rtl"] .wa-float { right: auto; left: 1em; }
}

/* Submit status message */
.contact-status {
	margin: 1rem 0 0 0;
	min-height: 1.4em;
	text-align: center;
	font-size: 0.92rem;
	font-weight: 500;
	letter-spacing: 0.01em;
	transition: color 0.25s ease, opacity 0.25s ease;
}
.contact-status.is-sending {
	color: rgba(255, 255, 255, 0.7);
}
.contact-status.is-success {
	color: var(--brand-cyan);
}
.contact-status.is-error {
	color: #ff6b8a;
}

@media screen and (max-width: 736px) {
	.contact-card {
		padding: 2rem 1.5rem;
		border-radius: 14px;
	}
}
@media screen and (max-width: 480px) {
	.contact-card {
		padding: 1.5rem 1.1rem;
		border-radius: 12px;
	}
	.contact-card label {
		font-size: 0.7rem;
	}
	.contact-card button.primary.send-btn {
		min-width: 100%;
		width: 100%;
	}
}