:root{
--primary:#0b3c5d;
--accent:#c9a227;
--light:#f4f6f8;
--text:#1a1a1a;
}

*{box-sizing:border-box}

body{
margin:0;
font-family:'Cairo','Inter',sans-serif;
color:var(--text);
background:#fff;
line-height:1.8;
}
.phone-number {
display: inline-block;
direction: ltr;
unicode-bidi: embed;
}

.hero{
background:linear-gradient(135deg,var(--primary),#0a2233);
color:#fff;
padding:4rem 1rem;
position:relative;
text-align:center;
}

.hero-content{
max-width:900px;
margin:auto;
}

.logo{
  width:110px;
  height:110px;
  background:#ffffff;
  border-radius:50%;
  padding:14px;

  display:inline-flex;
  align-items:center;
  justify-content:center;

  /* Official gold accent ring */
  border:3px solid var(--accent);

  /* Institutional depth */
  box-shadow:
    0 8px 22px rgba(0,0,0,0.18),
    inset 0 0 0 2px rgba(255,255,255,0.6);

  /* Subtle entrance animation */
  animation: logoFadeIn 900ms ease-out both;
}



.lang-switch{
position:absolute;
top:20px;
inset-inline-end:30px;
font-weight:600;
}

.lang-switch a{
color:#fff;
text-decoration:none;
margin:0 6px;
opacity:.85;
}

.lang-switch a.active{
opacity:1;
text-decoration:underline;
}

.section{
padding:4rem 10%;
}

.section.light{
background:var(--light);
}

h1,h2{
font-family:'Amiri','Playfair Display',serif;
}

ul{
padding-inline-start:1.2rem;
}

iframe{
width:100%;
height:320px;
border:0;
margin-top:1rem;
}

footer{
background:var(--primary);
color:#fff;
text-align:center;
padding:1rem;
font-size:.9rem;
}

/* =========================
   Responsive – Mobile First
   ========================= */

@media (max-width: 1024px){
  .section{
    padding:3rem 6%;
  }
}

@media (max-width: 768px){
  .hero{
    padding:3rem 1rem;
  }

  .logo{
    width:90px;
  }

  h1{
    font-size:1.6rem;
  }

  h2{
    font-size:1.3rem;
  }

  .lang-switch{
    top:12px;
    inset-inline-end:16px;
    font-size:0.9rem;
  }
}

@media (max-width: 480px){
  body{
    font-size:0.95rem;
  }

  .section{
    padding:2.5rem 1.2rem;
  }

  iframe{
    height:260px;
  }

  footer{
    font-size:0.85rem;
  }
}


@keyframes logoFadeIn{
  from{
    opacity:0;
    transform:translateY(6px);
  }
  to{
    opacity:1;
    transform:translateY(0);
  }
}

@media (max-width: 768px){
  .logo{
    width:90px;
    height:90px;
    padding:12px;
    border-width:2.5px;
  }
}

@media (max-width: 480px){
  .logo{
    width:80px;
    height:80px;
    padding:10px;
    border-width:2px;
  }
}
@media print{
  .logo{
    box-shadow:none;
    border:2px solid #999;
  }
}