@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@400;600;700;800;900&display=swap');
:root {
  --ink:#111820;
  --navy:#0B2545;
  --blue:#173A63;
  --sky:#E9EEF4;
  --gold:#565656;
  --sand:#F5F5F5;
  --white:#fff;
  --muted:#626A72;
  --line:#D9DEE3;
  --dark:#0A1624
}

* {
  box-sizing:border-box
}

html {
  scroll-behavior:smooth
}

body {
  margin:0;
  font-family:'Cairo',Arial,sans-serif;
  color:var(--ink);
  background:#fff;
  direction:rtl
}

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

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

.container {
  width:min(1180px,92%);
  margin:auto
}

.topbar {
  background:var(--navy);
  color:#fff;
  font-size:14px
}

.topbar .container {
  display:flex;
  justify-content:space-between;
  align-items:center;
  min-height:42px
}

.topbar a {
  color:#fff;
  font-weight:800
}

.header {
  position:sticky;
  top:0;
  z-index:50;
  background:rgba(255,255,255,.97);
  border-bottom:1px solid rgba(16,35,49,.08);
  backdrop-filter:blur(12px)
}

.nav {
  height:88px;
  display:grid;
  grid-template-columns:190px 1fr 180px;
  align-items:center;
  gap:20px;
  direction:ltr
}

.logo {
  justify-self:start
}

.logo img {
  width:190px;
  height:64px;
  object-fit:contain
}

.menu {
  display:flex;
  justify-content:center;
  gap:28px;
  direction:rtl;
  font-weight:800
}

.menu a {
  position:relative;
  padding:10px 0
}

.menu a:after {
  content:'';
  position:absolute;
  bottom:2px;
  right:0;
  width:0;
  height:3px;
  background:var(--gold);
  transition:.25s
}

.menu a:hover:after {
  width:100%
}

.quote-nav {
  justify-self:end;
  background:var(--navy);
  color:#fff;
  padding:12px 18px;
  border-radius:10px;
  font-weight:900;
  direction:rtl
}

.menu-toggle {
  display:none
}

.hero {
  min-height:640px;
  display:flex;
  align-items:center;
  background:linear-gradient(90deg,rgba(6,20,28,.35),rgba(6,20,28,.84)),url('../images/hero.jpg') center/cover no-repeat;
  color:#fff
}

.hero .container {
  display:flex;
  justify-content:flex-start
}

.hero-content {
  max-width:680px;
  background:rgba(8,24,33,.44);
  border:1px solid rgba(255,255,255,.12);
  padding:42px;
  border-radius:28px;
  backdrop-filter:blur(5px)
}

.eyebrow,.tag {
  color:var(--blue);
  font-weight:900;
  letter-spacing:.3px
}

.hero h1 {
  font-size:clamp(38px,5vw,66px);
  line-height:1.18;
  margin:12px 0
}

.hero p {
  font-size:19px;
  line-height:1.95;
  color:#eef4f6
}

.actions {
  display:flex;
  gap:12px;
  flex-wrap:wrap
}

.btn {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:48px;
  padding:10px 20px;
  border-radius:10px;
  font-weight:900;
  border:1px solid transparent
}

.btn-primary {
  background:var(--navy);
  color:#fff
}

.btn-dark {
  background:var(--navy);
  color:#fff
}

.btn-outline {
  border-color:currentColor;
  color:#fff;
  background:transparent
}

.section {
  padding:86px 0
}

.section.alt {
  background:var(--sand)
}

.section-head {
  text-align:center;
  max-width:760px;
  margin:0 auto 36px
}

.section-head h2 {
  font-size:clamp(30px,4vw,46px);
  margin:8px 0
}

.section-head p {
  color:var(--muted);
  line-height:1.9
}

.about-grid {
  display:grid;
  grid-template-columns:1.05fr .95fr;
  gap:54px;
  align-items:center
}

.about-copy h2 {
  font-size:42px;
  margin:8px 0 12px
}

.about-copy p {
  color:var(--muted);
  line-height:2
}

.about-img {
  padding:10px;
  background:linear-gradient(135deg,var(--sky),#fff);
  border-radius:26px
}

.about-img img {
  width:100%;
  aspect-ratio:1/1;
  object-fit:contain;
  border-radius:20px
}

.checks {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
  margin:24px 0
}

.checks span {
  background:#eef6f8;
  padding:12px 14px;
  border-radius:10px;
  font-weight:800
}

.service-grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:22px
}

.service-card {
  background:#fff;
  border:1px solid var(--line);
  border-radius:18px;
  overflow:hidden;
  box-shadow:0 12px 30px rgba(20,55,73,.06);
  transition:.25s
}

.service-card:hover {
  transform:translateY(-5px);
  box-shadow:0 18px 40px rgba(20,55,73,.12)
}

.service-image {
  background:#f2f5f6;
  padding:12px
}

.service-image img {
  width:100%;
  aspect-ratio:1/1;
  object-fit:contain;
  border-radius:12px
}

.service-body {
  padding:22px
}

.service-body h3 {
  font-size:24px;
  margin:0 0 8px
}

.service-body p {
  color:var(--muted);
  line-height:1.9;
  min-height:104px
}

.more {
  font-weight:900;
  color:var(--blue)
}

.service-actions {
  margin-top:18px
}

.gallery {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:14px
}

.gallery a {
  background:#f1f4f5;
  border-radius:14px;
  overflow:hidden;
  border:1px solid #e6eaec
}

.gallery img {
  width:100%;
  aspect-ratio:1/1;
  object-fit:contain;
  transition:.25s
}

.gallery a:hover img {
  transform:scale(1.02)
}

.faq {
  display:grid;
  gap:12px;
  max-width:950px;
  margin:auto
}

.faq details {
  border:1px solid var(--line);
  border-radius:12px;
  background:#fff;
  padding:0 18px
}

.faq summary {
  cursor:pointer;
  padding:18px 0;
  font-weight:900
}

.faq p {
  color:var(--muted);
  line-height:1.9;
  padding-bottom:14px
}

.cta {
  background:linear-gradient(120deg,var(--navy),#07192f);
  color:#fff
}

.cta .container {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:28px
}

.cta h2 {
  font-size:38px;
  margin:0 0 8px
}

.footer {
  background:#07192f;
  color:#d7e1e6;
  padding:60px 0 18px
}

.footer-grid {
  display:grid;
  grid-template-columns:1.25fr 1fr 1fr 1fr;
  gap:40px
}

.footer h3 {
  color:#fff
}

.footer-logo {
  width:250px;
  background:#fff;
  border-radius:12px;
  padding:8px;
  margin-bottom:16px
}

.footer p {
  line-height:1.9;
  color:#aec0ca
}

.footer-links {
  display:grid;
  gap:10px
}

.footer-links a:hover {
  color:#fff
}

.copyright {
  border-top:1px solid rgba(255,255,255,.12);
  margin-top:38px;
  padding-top:18px;
  text-align:center;
  color:#91a3ad
}

.floating {
  position:fixed;
  left:18px;
  bottom:18px;
  z-index:70;
  display:grid;
  gap:10px
}

.float-btn {
  width:48px;
  height:48px;
  border-radius:50%;
  display:grid;
  place-items:center;
  box-shadow:0 10px 20px rgba(0,0,0,.2)
}

.float-btn svg {
  width:24px;
  height:24px;
  fill:#fff
}

.call {
  background:var(--navy)
}

.wa {
  background:#1fa463
}

.page-hero {
  padding:78px 0;
  background:linear-gradient(120deg,#07192f,#0B2545);
  color:#fff;
  border-bottom:4px solid var(--gold);
  text-align:center
}

.page-hero h1 {
  font-size:48px;
  margin:8px 0
}

.page-hero .crumb {
  color:#d7e1e6
}

.content-card {
  background:#fff;
  border:1px solid var(--line);
  border-radius:18px;
  padding:30px
}

.rich-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:22px
}

.feature-list {
  display:grid;
  gap:12px
}

.feature-list div {
  padding:16px;
  border-radius:12px;
  background:#eef6f8;
  font-weight:800
}

.quote-wrap {
  max-width:850px;
  margin:auto
}

.quote-form {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px
}

.quote-form input,.quote-form select,.quote-form textarea {
  width:100%;
  padding:14px;
  border:1px solid #d9e0e4;
  border-radius:10px;
  font-family:inherit;
  font-size:15px
}

.quote-form textarea {
  grid-column:1/-1;
  min-height:120px
}

.quote-form .wide {
  grid-column:1/-1
}

.wa-row {
  grid-column:1/-1;
  display:flex;
  gap:12px;
  justify-content:center
}

.lightbox {
  display:none;
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.92);
  z-index:99;
  align-items:center;
  justify-content:center
}

.lightbox.active {
  display:flex
}

.lightbox img {
  max-width:88vw;
  max-height:86vh
}

.lightbox button {
  position:absolute;
  background:#fff;
  border:0;
  width:46px;
  height:46px;
  border-radius:50%;
  font-size:24px
}

.lb-close {
  top:20px;
  right:20px
}

.lb-prev {
  right:20px
}

.lb-next {
  left:20px
}

@media(max-width:900px) {
  .topbar .container {
    justify-content:center;
    gap:16px;
    flex-wrap:wrap;
    padding:7px 0
  }
  .nav {
    height:72px;
    grid-template-columns:1fr 1fr;
    direction:ltr
  }
  .logo img {
    width:130px;
    height:52px
  }
  .menu-toggle {
    display:block;
    justify-self:end;
    background:var(--navy);
    color:#fff;
    border:0;
    border-radius:9px;
    width:44px;
    height:44px;
    font-size:24px
  }
  .quote-nav {
    display:none
  }
  .menu {
    display:none;
    position:absolute;
    top:72px;
    right:0;
    left:0;
    background:#fff;
    padding:22px 7%;
    box-shadow:0 14px 30px rgba(0,0,0,.12);
    direction:rtl;
    text-align:right
  }
  .menu.open {
    display:grid;
    gap:8px
  }
  .menu a {
    padding:12px
  }
  .hero {
    min-height:590px
  }
  .hero-content {
    padding:28px
  }
  .hero h1 {
    font-size:42px
  }
  .section {
    padding:64px 0
  }
  .about-grid,.rich-grid {
    grid-template-columns:1fr
  }
  .about-copy,.section-head,.content-card {
    text-align:center
  }
  .about-copy h2 {
    font-size:34px
  }
  .checks {
    grid-template-columns:1fr
  }
  .service-grid {
    grid-template-columns:1fr 1fr
  }
  .service-body {
    text-align:center
  }
  .service-body p {
    min-height:auto
  }
  .gallery {
    grid-template-columns:1fr 1fr
  }
  .cta .container {
    display:block;
    text-align:center
  }
  .cta .actions {
    justify-content:center;
    margin-top:20px;
    display:grid;
    grid-template-columns:1fr 1fr
  }
  .footer-grid {
    grid-template-columns:1fr;
    text-align:center
  }
  .footer-logo {
    margin:0 auto 16px
  }
  .quote-form {
    grid-template-columns:1fr
  }
  .quote-form textarea,.quote-form .wide,.wa-row {
    grid-column:auto
  }
  .wa-row {
    display:grid;
    grid-template-columns:1fr 1fr
  }
  .page-hero h1 {
    font-size:38px
  }
}

@media(max-width:560px) {
  .service-grid {
    grid-template-columns:1fr
  }
  .hero-content {
    text-align:center
  }
  .hero .actions {
    justify-content:center
  }
  .gallery {
    grid-template-columns:1fr 1fr
  }
  .gallery img {
    aspect-ratio:1/1
  }
  .topbar span {
    display:none
  }
  .section-head h2 {
    font-size:32px
  }
  .cta h2 {
    font-size:30px
  }
}

@media print {
  body {
    display:none!important
  }
}

.hero .eyebrow {
  color:#fff
}

.cta .btn-primary {
  background:#565656;
  border-color:#565656;
  color:#fff
}

.cta .btn-primary:hover {
  background:#444;
  border-color:#444
}

.float-btn.wa {
  background:#25D366
}

.float-btn.wa svg {
  width:28px;
  height:28px;
  fill:#fff
}

.content-card h3 {
  margin-top:0;
  font-size:24px
}

.content-card p {
  color:var(--muted);
  line-height:2
}

.cta p {
  color:#d7e1e6;
  line-height:1.9;
  max-width:720px
}

.service-body p {
  min-height:0
}

.service-body h3 {
  line-height:1.45
}

/* ===== Motion & interaction effects ===== */ @keyframes heroDrift {
  0% {
    background-size:105% auto
  }
  50% {
    background-size:112% auto
  }
  100% {
    background-size:105% auto
  }
}

@keyframes floatPulse {
  0%,100% {
    transform:translateY(0);
    box-shadow:0 10px 20px rgba(0,0,0,.20)
  }
  50% {
    transform:translateY(-4px);
    box-shadow:0 16px 28px rgba(0,0,0,.24)
  }
}

@keyframes softGlow {
  0%,100% {
    box-shadow:0 0 0 0 rgba(23,58,99,.00)
  }
  50% {
    box-shadow:0 0 0 10px rgba(23,58,99,.06)
  }
}

.hero {
  animation:heroDrift 18s ease-in-out infinite;
  background-position:center;
  overflow:hidden;
  position:relative
}

.hero:before {
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(115deg,transparent 15%,rgba(255,255,255,.05) 45%,transparent 70%);
  transform:translateY(120%);
  transition:transform 1.2s ease;
  pointer-events:none
}

.hero:hover:before {
  transform:translateY(-120%)
}

.hero-content {
  position:relative;
  transition:transform .45s ease,box-shadow .45s ease;
  background:rgba(8,24,33,.50)
}

.hero-content:hover {
  transform:translateY(-4px);
  box-shadow:0 24px 70px rgba(0,0,0,.22)
}

.header {
  transition:box-shadow .3s ease,background .3s ease,transform .3s ease
}

.header.scrolled {
  box-shadow:0 12px 32px rgba(11,37,69,.10);
  background:rgba(255,255,255,.985)
}

.logo img {
  transition:transform .3s ease
}

.logo:hover img {
  transform:scale(1.035)
}

.btn,.quote-nav {
  position:relative;
  overflow:hidden;
  transition:transform .25s ease,box-shadow .25s ease,background .25s ease,border-color .25s ease
}

.btn:before,.quote-nav:before {
  content:"";
  position:absolute;
  top:0;
  right:0;
  bottom:-130%;
  width:100%;
  height:55%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.24),transparent);
  transform:skewX(-18deg);
  transition:bottom .55s ease
}

.btn:hover:before,.quote-nav:hover:before {
  bottom:135%
}

.btn:hover,.quote-nav:hover {
  transform:translateY(-2px);
  box-shadow:0 10px 22px rgba(11,37,69,.15)
}

.about-img,.content-card,.service-card,.gallery a,.faq details,.feature-list div {
  transition:transform .35s ease,box-shadow .35s ease,border-color .35s ease
}

.about-img:hover,.content-card:hover {
  transform:translateY(-5px);
  box-shadow:0 22px 50px rgba(11,37,69,.10)
}

.service-card:hover {
  transform:translateY(-9px);
  box-shadow:0 22px 48px rgba(11,37,69,.15);
  border-color:rgba(23,58,99,.20)
}

.service-card .service-image img {
  transition:transform .5s ease,filter .5s ease
}

.service-card:hover .service-image img {
  transform:scale(1.035);
  filter:saturate(1.04) contrast(1.02)
}

.gallery a:hover {
  transform:translateY(-5px);
  box-shadow:0 14px 30px rgba(11,37,69,.13)
}

.gallery a:hover img {
  transform:scale(1.045)
}

.faq details:hover {
  transform:translateY(-2px);
  border-color:rgba(23,58,99,.22);
  box-shadow:0 10px 24px rgba(11,37,69,.06)
}

.faq details[open] {
  border-color:rgba(23,58,99,.28);
  box-shadow:0 12px 28px rgba(11,37,69,.07)
}

.faq summary {
  transition:color .25s ease
}

.faq details[open] summary {
  color:var(--blue)
}

.feature-list div:hover {
  transform:translateY(-4px);
  box-shadow:0 10px 24px rgba(11,37,69,.07)
}

.tag,.eyebrow {
  display:inline-block;
  position:relative
}

.tag:after,.eyebrow:after {
  content:"";
  display:block;
  width:34px;
  height:3px;
  border-radius:10px;
  background:currentColor;
  margin-top:7px;
  transition:width .35s ease
}

.section-head:hover .tag:after,.about-copy:hover .tag:after {
  width:58px
}

.float-btn {
  transition:transform .25s ease,filter .25s ease
}

.float-btn:hover {
  transform:translateY(-4px) scale(1.05);
  filter:brightness(1.04)
}

.float-btn.wa {
  animation:floatPulse 2.8s ease-in-out infinite
}

/* Scroll reveal */ .reveal {
  opacity:0;
  transform:translateY(30px);
  transition:opacity .72s cubic-bezier(.2,.7,.2,1),transform .72s cubic-bezier(.2,.7,.2,1)
}

.reveal.reveal-left,
.reveal.reveal-right {
  transform:translateY(30px)
}

.reveal.is-visible {
  opacity:1;
  transform:none
}

.reveal-delay-1 {
  transition-delay:.08s
}

.reveal-delay-2 {
  transition-delay:.16s
}

.reveal-delay-3 {
  transition-delay:.24s
}

.reveal-delay-4 {
  transition-delay:.32s
}

/* Hero entrance */ .hero-content>* {
  opacity:0;
  transform:translateY(18px);
  animation:heroItemIn .65s ease forwards
}

.hero-content>*:nth-child(1) {
  animation-delay:.12s
}

.hero-content>*:nth-child(2) {
  animation-delay:.22s
}

.hero-content>*:nth-child(3) {
  animation-delay:.32s
}

.hero-content>*:nth-child(4) {
  animation-delay:.42s
}

@keyframes heroItemIn {
  to {
    opacity:1;
    transform:none
  }
}

@media(max-width:900px) {
  .hero {
    animation:none;
    background-size:cover
  }
  .about-img:hover,.content-card:hover,.service-card:hover,.gallery a:hover {
    transform:none
  }
  .feature-list div:hover {
    transform:none
  }
}

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

/* ===== Mobile viewport + floating contact controls fixes ===== */
html,
body {
  width:100%;
  max-width:100%;
  overflow-x:hidden;
}

body {
  position:relative;
}

.floating {
  position:fixed;
  left:18px;
  bottom:max(18px, env(safe-area-inset-bottom));
  z-index:9999;
  display:flex;
  flex-direction:column;
  gap:10px;
  transform:none !important;
  animation:none !important;
  will-change:auto;
}

.float-btn,
.float-btn.wa,
.float-btn.call {
  position:relative;
  transform:none;
  animation:none;
}

.float-btn.wa {
  animation:none !important;
}

/* Keep the call button fixed; only the handset performs a subtle ring motion. */
.float-btn.call svg {
  transform-origin:50% 50%;
  animation:phoneRing 3.2s ease-in-out infinite;
}

@keyframes phoneRing {
  0%, 72%, 100% {
    transform:rotate(0deg);
  }
  76% {
    transform:rotate(-12deg);
  }
  80% {
    transform:rotate(12deg);
  }
  84% {
    transform:rotate(-9deg);
  }
  88% {
    transform:rotate(9deg);
  }
  92% {
    transform:rotate(-5deg);
  }
  96% {
    transform:rotate(5deg);
  }
}

@media (hover:hover) and (pointer:fine) {
  .float-btn:hover {
    transform:scale(1.05);
    filter:brightness(1.04);
  }
}

@media (max-width:900px) {
  .hero {
    min-height:calc(100svh - 114px);
    margin:0;
  }

  .hero .container {
    min-height:calc(100svh - 114px);
    display:flex;
    align-items:center;
  }

  .floating {
    left:16px;
    bottom:max(16px, env(safe-area-inset-bottom));
  }

  .float-btn {
    width:48px;
    height:48px;
  }
}

@media (max-width:560px) {
  .hero {
    min-height:calc(100svh - 114px);
  }

  .hero .container {
    min-height:calc(100svh - 114px);
  }
}

@media (prefers-reduced-motion:reduce) {
  .float-btn.call svg {
    animation:none !important;
  }
}