/* =========================================================================
   City Translation — Modern Design System
   A visual refresh built around the one thing that makes this business what
   it is: the official stamp/seal that turns a translation into a *certified*
   one. That seal becomes the site's signature mark — in the header, the
   hero, and as a recurring "approved" bullet throughout the content.
   ========================================================================= */

@import url('https://fonts.googleapis.com/css2?family=Markazi+Text:wght@500;600;700&family=IBM+Plex+Sans+Arabic:wght@400;500;600;700&family=Newsreader:ital,wght@0,500;0,600;0,700;1,500&family=Inter:wght@400;500;600;700&display=swap');

:root{
  /* ---- palette -------------------------------------------------------- */
  --ink-navy:      #16233F;
  --ink-navy-2:    #1F3157;
  --paper:         #F3EFE4;
  --paper-2:       #EAE3D2;
  --stamp:         #7A1F3D;
  --stamp-dark:    #5E1730;
  --seal-gold:     #A6822E;
  --seal-gold-lt:  #C7A54B;
  --charcoal:      #23262B;
  --white:         #FFFFFF;
  --line:          rgba(22,35,63,0.16);

  /* ---- type ------------------------------------------------------------ */
  --font-ar-head: 'Markazi Text', 'Traditional Arabic', serif;
  --font-ar-body: 'IBM Plex Sans Arabic', Tahoma, sans-serif;
  --font-en-head: 'Newsreader', Georgia, serif;
  --font-en-body: 'Inter', Arial, sans-serif;

  /* ---- rhythm ------------------------------------------------------------ */
  --radius: 6px;
  --shadow: 0 10px 30px -12px rgba(22,35,63,0.35);
  --shadow-sm: 0 4px 14px -6px rgba(22,35,63,0.25);
  --gap: clamp(1.25rem, 3vw, 2.5rem);
}

html[lang="ar"]{ --font-head: var(--font-ar-head); --font-body: var(--font-ar-body); }
html:not([lang="ar"]){ --font-head: var(--font-en-head); --font-body: var(--font-en-body); }

*{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }

body{
  font-family: var(--font-body);
  background: var(--paper);
  color: var(--charcoal);
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
}

h1,h2,h3, .title-center,.title-left,.en-title-left,.fo-title-left,.default-title{
  font-family: var(--font-head);
  color: var(--ink-navy);
  font-weight: 600;
  letter-spacing: 0.2px;
}

a{ color: var(--stamp); text-decoration: none; }
a:hover{ color: var(--stamp-dark); }
a:focus-visible, button:focus-visible, .navbar-toggle:focus-visible{
  outline: 3px solid var(--seal-gold);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  *{ animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}

/* ---- perforated section divider ---------------------------------------
   A dashed "tear line" with small punch-holes at each end, evoking the
   perforated edge of an official certificate or a stamp sheet. Used to
   separate major sections instead of a plain <hr>. */
.doc-divider{
  position: relative;
  height: 1px;
  margin: 3rem auto;
  max-width: 1100px;
  border-top: 2px dashed var(--line);
}
.doc-divider::before, .doc-divider::after{
  content:"";
  position:absolute; top:-6px;
  width:12px; height:12px; border-radius:50%;
  background: var(--paper);
  border: 2px dashed var(--line);
}
.doc-divider::before{ left:-4px; }
.doc-divider::after{ right:-4px; }

hr{ border: none; }
hr + * { margin-top: 0; }
section > .container > hr, section hr{
  border: none;
  height: 1px;
  margin: 3rem auto;
  max-width: 1100px;
  border-top: 2px dashed var(--line);
}

/* =========================================================================
   Topbar
   ========================================================================= */
#topbar{
  background: var(--ink-navy);
  color: var(--paper);
  font-size: 13.5px;
  padding: 8px 0;
}
#topbar a{ color: var(--paper); }
#topbar .topbar-contact-info ul,
#topbar .en-topbar-contact-info ul{
  display:flex; flex-wrap:wrap; gap: 1.25rem; list-style:none; margin:0; padding:0;
}
#topbar .topbar-social-icons ul,
#topbar .en-topbar-social-icons ul{
  display:flex; gap:.85rem; list-style:none; margin:0; padding:0;
}
#topbar .fa{
  display:inline-flex; align-items:center; justify-content:center;
  width: 26px; height: 26px; border-radius:50%;
  border: 1px solid rgba(243,239,228,0.35);
  margin-inline-end:.4rem;
}
#topbar li > .fa{ margin:0; width:auto;height:auto;border:none; }
#topbar .topbar-social-icons a.fa, #topbar .en-topbar-social-icons a.fa{
  width:26px;height:26px;border:1px solid rgba(243,239,228,0.35);
}

/* =========================================================================
   Navigation — with the seal mark as brand
   ========================================================================= */
.navbar.navbar-default{
  background: var(--paper);
  border: none;
  border-bottom: 1px solid var(--line);
  margin-bottom: 0;
  padding: .5rem 0;
}
.navbar-brand.seal-brand{
  display:flex; align-items:center; gap:.6rem;
  height:auto; padding: 6px 0;
  font-family: var(--font-head);
  font-weight:700; font-size:1.05rem; color: var(--ink-navy) !important;
}
.navbar-brand.seal-brand .seal-mark{ width:44px; height:44px; flex:none; }
.navbar-brand.seal-brand small{
  display:block; font-family: var(--font-body); font-weight:500;
  font-size:.62rem; letter-spacing:.12em; text-transform:uppercase; color: var(--stamp);
}

.nav.navbar-nav > li > a{
  color: var(--ink-navy);
  font-weight:600;
  font-size: .95rem;
  padding: 10px 14px;
  border-radius: var(--radius);
  transition: background .15s ease, color .15s ease;
}
.nav.navbar-nav > li > a:hover{ background: var(--paper-2); color: var(--stamp); }
.nav.navbar-nav > li.active > a{
  background: var(--ink-navy); color: var(--white) !important;
}

.navbar-toggle{
  border: 2px solid var(--ink-navy); border-radius: var(--radius);
}
.navbar-toggle .icon-bar{ background: var(--ink-navy); }
.navbar-toggle:hover{ background: var(--paper-2); }

@media (max-width: 767px){
  .navbar-collapse{ border-top: 1px solid var(--line); }
  .nav.navbar-nav{ margin: .5rem 0; }
  .nav.navbar-nav > li > a{ display:block; }
  .navbar-collapse.collapse:not(.is-open){ display:none; }
  .navbar-collapse.is-open{ display:block; }
}

/* =========================================================================
   Hero / slider — seal signature front and center
   ========================================================================= */
.hero-band{
  position: relative;
  background: linear-gradient(180deg, var(--ink-navy) 0%, var(--ink-navy-2) 100%);
  color: var(--paper);
  overflow:hidden;
  padding: clamp(2.5rem,6vw,4.5rem) 0;
}
.hero-band::after{
  content:""; position:absolute; inset:0;
  background-image: radial-gradient(rgba(243,239,228,0.06) 1px, transparent 1px);
  background-size: 16px 16px;
  pointer-events:none;
}
.hero-inner{
  position:relative; z-index:1;
  max-width: 1100px; margin: 0 auto; padding: 0 20px;
  display:flex; align-items:center; gap: clamp(1.5rem,4vw,3.5rem);
  flex-wrap: wrap;
}
.hero-text{ flex: 1 1 380px; }
.hero-text h1{
  color: var(--white); font-size: clamp(1.75rem, 3.4vw, 2.75rem);
  margin: 0 0 .75rem;
}
.hero-text p{ color: rgba(243,239,228,0.88); font-size: 1.05rem; max-width: 46em; }
.hero-seal-wrap{ flex: 0 0 auto; margin-inline-start:auto; }
.seal-mark{ display:block; }
.seal-mark .ring-text{ font-family: var(--font-head); }

@keyframes seal-rotate{ from{ transform: rotate(0deg);} to{ transform: rotate(360deg);} }
.seal-mark .ring{ animation: seal-rotate 34s linear infinite; transform-origin: 50% 50%; }
@media (prefers-reduced-motion: reduce){ .seal-mark .ring{ animation: none; } }

/* =========================================================================
   Sliderbar strip (three quick trust points)
   ========================================================================= */
#sliderbar{
  background: var(--white);
  border-bottom: 1px solid var(--line);
}
#sliderbar h2{
  font-family: var(--font-body); font-weight:600; font-size: .95rem;
  color: var(--ink-navy); margin: 1.1rem 0; letter-spacing:.02em;
}
#sliderbar h2 .fa{ color: var(--stamp); margin-inline-end:.5rem; }
#sliderbar .col-md-4.border{ border-inline: 1px dashed var(--line); }

/* =========================================================================
   Content sections / cards
   ========================================================================= */
#work, #testimonials{ background: var(--paper); padding: clamp(2rem,4vw,3.5rem) 0; }
#work .heading h1, #work .heading h2{ margin-bottom:1rem; }
#work p, #testimonials p{ color:#3a3d44; }

.project, .col-md-6 > .heading{
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.6rem 1.5rem;
  box-shadow: var(--shadow-sm);
  height: 100%;
  position: relative;
}
.project::before{
  content:"";
  position:absolute; top:10px; inset-inline-end:10px;
  width:10px; height:10px; border-radius:50%;
  border: 2px solid var(--seal-gold-lt);
}
.project img.img-responsive{ border-radius: calc(var(--radius) - 2px); margin-bottom: 1rem; }
.project ul, .project ol{ padding-inline-start: 1.2rem; }

/* stamp-ring bullets standing in for plain discs */
#work li, #testimonials li{
  list-style: none;
  position: relative;
  padding-inline-start: 1.6rem;
  margin-bottom: .5rem;
}
#work li::before, #testimonials li::before{
  content:"";
  position:absolute; inset-inline-start:0; top:.45em;
  width:9px; height:9px; border-radius:50%;
  border: 2px solid var(--stamp);
}
#work ol{ list-style: none; padding:0; margin: 0 0 .5rem; }
#work ol > li{ padding-inline-start:0; font-weight:600; color:var(--ink-navy); }
#work ol > li::before{ display:none; }

.default-title{ font-size: 1.2rem; margin-top: 0; }

/* payment method cards on price pages */
#welcome{ padding: 1.5rem 0; }
#welcome .heading{ max-width: 760px; margin: 0 auto; text-align:center; }

/* map */
#map_canvas{ border-radius: var(--radius); overflow:hidden; border: 1px solid var(--line); }

/* =========================================================================
   Footer
   ========================================================================= */
footer{
  background: var(--ink-navy);
  color: rgba(243,239,228,0.85);
  padding: clamp(2rem,4vw,3rem) 0 0;
}
footer h3{ color: var(--paper) !important; font-size: 1.05rem; margin-bottom:1rem; }
footer p{ color: rgba(243,239,228,0.75); font-size:.92rem; }
footer .c-info, footer .credits{ list-style:none; padding:0; margin:0 0 1rem; }
footer .c-info li{ margin-bottom:.5rem; }
footer .c-info a, footer a{ color: var(--seal-gold-lt); }
footer .credits{ display:flex; gap:.75rem; flex-wrap:wrap; align-items:center; }
footer .credits img{ background: var(--white); padding:4px 8px; border-radius:4px; max-height:28px; }
footer .footer-social{ display:flex; gap:.6rem; list-style:none; padding:0; margin:0; }
footer .footer-social a{
  display:flex; align-items:center; justify-content:center;
  width:34px; height:34px; border-radius:50%;
  border: 1px solid rgba(243,239,228,0.3);
}
.footer-bar{
  margin-top: 2rem; border-top: 1px solid rgba(243,239,228,0.15);
  padding: 1rem 0; text-align:center; font-size:.85rem;
  color: rgba(243,239,228,0.6);
}

/* =========================================================================
   Utilities
   ========================================================================= */
.container{ max-width: 1140px; }
img.img-responsive{ max-width:100%; height:auto; }
@media (max-width: 767px){
  .row > [class*="col-"]{ margin-bottom: 1.25rem; }
}