*,::before,::after{box-sizing:border-box;border:0 solid #e5e7eb}html{line-height:1.5;-webkit-text-size-adjust:100%;font-family:Arial,sans-serif;-webkit-tap-highlight-color:transparent}body{margin:0;line-height:inherit;-webkit-font-smoothing:antialiased;letter-spacing:-.011em}h1,h2,h3,h4,h5,h6,p,ul,ol,figure{margin:0}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}img{display:block;vertical-align:middle;max-width:100%;height:auto}button,input{font:inherit}summary{display:list-item}ul,ol{padding:0;list-style:none}
@font-face{font-family:Cairo;src:url('assets/Cairo.ttf');font-weight:200 1000}@font-face{font-family:Amiri;src:url('assets/Amiri.ttf')}
.mt {
  --navy:#0a1226;
  --navy2:#101b38;
  --gold:#c9a24b;
  --gold2:#e8cf8e;
  --ivory:#f4efe3;
  --mute:#a9b0c4;
  direction: rtl;
  background: var(--navy);
  color: var(--ivory);
  font-family:
    Cairo,
    "Noto Sans Arabic",
    sans-serif;
  line-height: 1.8;
  overflow-x: hidden;
}
.mt * {
  box-sizing: border-box;
}
.mt a {
  color: inherit;
  text-decoration: none;
}
.mt img {
  display: block;
  max-width: 100%;
}
.mt .wrap {
  width: min(1180px, 100% - 40px);
  margin-inline: auto;
}
.mt header {
  position: absolute;
  inset: 0 0 auto 0;
  z-index: 5;
  padding: 22px 0;
}
.mt header .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.mt .logo {
  background: #fff;
  border-radius: 10px;
  padding: 6px 12px;
}
.mt .logo img {
  height: 42px;
}
.mt nav {
  display: flex;
  gap: 34px;
  font-size: 15px;
  font-weight: 500;
}
.mt nav a {
  opacity: .85;
}
.mt .btn {
  display: inline-block;
  padding: 12px 28px;
  border: 1px solid var(--gold);
  color: var(--gold2);
  font-weight: 600;
  font-size: 15px;
  letter-spacing: .2px;
}
.mt .btn.solid {
  background:
    linear-gradient(
      135deg,
      #e8cf8e,
      #b8903a);
  color: #1a1405;
  border-color: transparent;
}
.mt .hero {
  position: relative;
  min-height: 100vh;
  min-height: 720px;
  display: flex;
  align-items: flex-end;
  padding: 0 0 90px;
}
.mt .hero > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 60% 50%;
}
.mt .hero:after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      0deg,
      #0a1226 4%,
      rgba(10, 18, 38, .55) 45%,
      rgba(10, 18, 38, .35)),
    linear-gradient(
      270deg,
      rgba(10, 18, 38, .75),
      transparent 70%);
}
.mt .hero .wrap {
  position: relative;
  z-index: 2;
}
.mt .eyebrow {
  color: var(--gold);
  letter-spacing: .5px;
  font-size: 15px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 14px;
}
.mt .eyebrow:before {
  content: "";
  width: 46px;
  height: 1px;
  background: var(--gold);
}
.mt h1 {
  font-family: Amiri, serif;
  font-weight: 400;
  font-size: clamp(46px, 8vw, 104px);
  line-height: 1.25;
  margin: 14px 0 18px;
}
.mt h1 em {
  font-style: normal;
  color: var(--gold2);
}
.mt .hero p {
  max-width: 560px;
  color: #d8d9e0;
  font-size: 18px;
  margin: 0 0 32px;
}
.mt .cta {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}
.mt .stats {
  background: var(--navy2);
  border-block: 1px solid rgba(201, 162, 75, .25);
}
.mt .stats .wrap {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  text-align: center;
}
.mt .stats div {
  padding: 34px 10px;
  border-inline-start: 1px solid rgba(201, 162, 75, .18);
}
.mt .stats div:first-child {
  border: 0;
}
.mt .stats b {
  display: block;
  font-family: Amiri, serif;
  font-size: 44px;
  color: var(--gold2);
  font-weight: 400;
  line-height: 1.2;
}
.mt .stats span {
  color: var(--mute);
  font-size: 14px;
}
.mt section {
  padding: 110px 0;
}
.mt h2 {
  font-family: Amiri, serif;
  font-weight: 400;
  font-size: clamp(34px, 5vw, 58px);
  line-height: 1.35;
  margin: 10px 0 18px;
}
.mt .about .wrap {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 70px;
  align-items: center;
}
.mt .about p {
  color: #cfd2de;
  font-size: 18px;
  margin: 0 0 22px;
}
.mt .about ul {
  list-style: none;
  padding: 0;
  margin: 0 0 30px;
  display: flex;
  gap: 28px;
  flex-wrap: wrap;
}
.mt .about li {
  color: var(--gold2);
  font-weight: 600;
}
.mt .about li:before {
  content: "\25c6  ";
  font-size: 10px;
  color: var(--gold);
}
.mt .frame {
  position: relative;
}
.mt .frame img {
  width: 100%;
  aspect-ratio: 4/5;
  object-fit: cover;
}
.mt .frame:before {
  content: "";
  position: absolute;
  inset: -16px 16px 16px -16px;
  border: 1px solid var(--gold);
  z-index: 0;
  opacity: .6;
}
.mt .frame img {
  position: relative;
  z-index: 1;
}
.mt .head {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 20px;
  margin-bottom: 46px;
  flex-wrap: wrap;
}
.mt .grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px;
}
.mt .card {
  position: relative;
  overflow: hidden;
  aspect-ratio: 3/4;
  background: #000;
}
.mt .card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .8s;
}
.mt .card:hover img {
  transform: scale(1.06);
}
.mt .card:after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      0deg,
      rgba(6, 10, 22, .92),
      transparent 55%);
}
.mt .card div {
  position: absolute;
  z-index: 2;
  inset: auto 24px 24px;
}
.mt .card small {
  color: var(--gold);
  font-weight: 600;
  font-size: 13px;
}
.mt .card h3 {
  margin: 2px 0 8px;
  font-family: Amiri, serif;
  font-weight: 400;
  font-size: 28px;
  line-height: 1.4;
}
.mt .card span {
  font-size: 14px;
  color: var(--gold2);
  border-bottom: 1px solid var(--gold);
}
.mt .services {
  background: var(--navy2);
}
.mt .sv {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: rgba(201, 162, 75, .25);
  border: 1px solid rgba(201, 162, 75, .25);
}
.mt .sv div {
  background: var(--navy2);
  padding: 38px 28px;
  transition: background .3s;
}
.mt .sv div:hover {
  background: #16234a;
}
.mt .sv i {
  font-style: normal;
  font-family: Amiri, serif;
  color: var(--gold);
  font-size: 40px;
  display: block;
  line-height: 1;
  margin-bottom: 18px;
}
.mt .sv h3 {
  margin: 0 0 10px;
  font-size: 22px;
  font-weight: 700;
}
.mt .sv p {
  margin: 0;
  color: var(--mute);
  font-size: 15px;
}
.mt .why .wrap {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
}
.mt .why .img {
  aspect-ratio: 16/11;
  overflow: hidden;
}
.mt .why .img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.mt details {
  border-bottom: 1px solid rgba(201, 162, 75, .25);
  padding: 18px 0;
}
.mt summary {
  cursor: pointer;
  font-weight: 600;
  font-size: 18px;
  list-style: none;
  display: flex;
  justify-content: space-between;
}
.mt summary:after {
  content: "+";
  color: var(--gold);
  font-size: 24px;
}
.mt details p {
  color: var(--mute);
  margin: 10px 0 0;
}
.mt .contact {
  text-align: center;
  background:
    linear-gradient(
      180deg,
      var(--navy),
      #060b18);
}
.mt .contact h2 {
  font-size: clamp(36px, 6vw, 70px);
}
.mt .contact p {
  color: var(--mute);
  font-size: 18px;
  margin: 0 0 34px;
}
.mt .tel {
  display: block;
  font-family: Amiri, serif;
  font-size: clamp(38px, 7vw, 72px);
  color: var(--gold2);
  direction: ltr;
  margin-bottom: 10px;
}
.mt footer {
  border-top: 1px solid rgba(201, 162, 75, .2);
  padding: 28px 0;
  color: var(--mute);
  font-size: 14px;
}
.mt footer .wrap {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
}
@media (max-width: 860px) {
  .mt nav,
  .mt header .btn {
    display: none;
  }
  .mt .hero {
    padding-bottom: 56px;
    min-height: 680px;
  }
  .mt .hero p {
    font-size: 16px;
  }
  .mt .stats .wrap {
    grid-template-columns: repeat(2, 1fr);
  }
  .mt .stats div:nth-child(3) {
    border: 0;
  }
  .mt .stats div {
    border-bottom: 1px solid rgba(201, 162, 75, .15);
  }
  .mt section {
    padding: 68px 0;
  }
  .mt .about .wrap,
  .mt .why .wrap {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .mt .grid {
    grid-template-columns: 1fr;
  }
  .mt .card {
    aspect-ratio: 4/5;
  }
  .mt .sv {
    grid-template-columns: 1fr 1fr;
  }
  .mt .sv div {
    padding: 26px 18px;
  }
}
@media (max-width: 480px) {
  .mt .sv {
    grid-template-columns: 1fr;
  }
  .mt .stats b {
    font-size: 36px;
  }
}
.mt .phero {
  padding: 170px 0 70px;
  background:
    radial-gradient(
      900px 300px at 80% 0,
      #1b2c5c55,
      transparent),
    var(--navy2);
  border-bottom: 1px solid rgba(201, 162, 75, .25);
}
.mt .phero h1 {
  margin: 6px 0 0;
  font-size: clamp(44px, 7vw, 84px);
}
.mt .story p {
  margin: 0 0 18px;
}
.mt .sign {
  border-inline-start: 2px solid var(--gold);
  padding-inline-start: 16px;
  margin-top: 26px;
}
.mt .sign b {
  display: block;
  font-family: Amiri, serif;
  font-size: 28px;
  font-weight: 400;
  color: var(--gold2);
}
.mt .sign span {
  color: var(--mute);
}
.mt .pts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 60px;
}
.mt .pts div {
  border-top: 1px solid rgba(201, 162, 75, .25);
  padding: 26px 0;
}
.mt .pts b {
  font-size: 21px;
  color: var(--gold2);
}
.mt .pts p {
  margin: 6px 0 0;
  color: #cfd2de;
}
@media (max-width: 860px) {
  .mt .pts {
    grid-template-columns: 1fr;
  }
  .mt .phero {
    padding: 130px 0 46px;
  }
}