﻿@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@400;500;600;700;800&display=swap');
:root{--blue:#1457b9;--blue2:#0d4fae;--red:#d6252d;--ink:#102342;--muted:#64758c;--line:#dfe6ef}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font-family:Cairo,Arial,sans-serif;color:var(--ink);line-height:1.8;background:#fff}a{text-decoration:none;color:inherit}.container{width:min(1570px,94.1vw);margin:auto}
/* HEADER */
.header{height:238px;background:#fff;border-bottom:1px solid #e3e8ef;position:relative;z-index:20}.nav{height:238px;display:flex;align-items:center;gap:30px}.brand{width:225px;height:225px;flex:0 0 225px;display:flex;align-items:center;justify-content:center}.brand img{width:100%;height:100%;object-fit:contain}.links{display:flex;align-items:center;justify-content:center;gap:34px;flex:1;margin:0 auto}.links a{font-size:16px;font-weight:800;color:#142744;white-space:nowrap;position:relative;padding:8px 0}.links a:first-child:after{content:"";position:absolute;left:0;right:0;bottom:-14px;height:3px;background:var(--red);border-radius:3px}.btn{display:inline-flex;align-items:center;justify-content:center;font-weight:800;border-radius:14px;border:1px solid transparent}.nav>.red{min-width:195px;height:76px;padding:0 28px;background:var(--red);color:#fff;font-size:18px}.nav>.red:after{content:"  â™§";font-size:22px;margin-right:10px}.menu{display:none}
/* HERO */
.hero{height:687px;min-height:687px;position:relative;overflow:hidden;background:linear-gradient(115deg,#edf4fd 0%,#fff 30%,#fff 100%)}
.hero:before{content:"";position:absolute;left:-100px;right:-100px;bottom:-190px;height:330px;border:30px solid rgba(20,87,185,.075);border-radius:50%;transform:rotate(-3deg);pointer-events:none}.hero:after{content:"";position:absolute;left:-120px;top:0;width:430px;height:560px;background:radial-gradient(ellipse at 10% 45%,rgba(20,87,185,.10),transparent 66%);pointer-events:none}
.hero-grid{height:100%;display:grid;grid-template-columns:730px 1fr;gap:70px;align-items:center;position:relative;z-index:2;direction:ltr}.hero-grid>div:first-child{grid-column:2;direction:rtl}.hero-grid>.hero-panel-pro{grid-column:1;direction:rtl}
.tag{font-size:20px;font-weight:800;color:var(--red)}.hero h1{font-size:clamp(64px,5.05vw,88px);line-height:1.18;letter-spacing:-2px;margin:10px 0 22px;font-weight:800;color:var(--ink)}.hero h1 b{color:#1558bd}.hero p{font-size:21px;line-height:1.95;color:var(--muted);max-width:730px;margin:0}.actions{display:flex;flex-direction:row;gap:20px;margin-top:32px}.actions .btn{height:82px;min-width:175px;padding:0 30px;font-size:18px}.actions .blue{background:var(--blue2);color:#fff}.actions .ghost{background:#fff;border:2px solid #bfd0e7;color:var(--blue2)}.actions .blue:after{content:"  â—ˆ";font-size:20px;margin-right:10px}.actions .ghost:after{content:"  ðŸ›’";font-size:18px;margin-right:10px}
/* CARD */
.hero-panel-pro{width:730px;height:592px;min-height:592px;background:#fff;border:1px solid #e1e7ef;border-radius:35px;padding:30px 34px 24px;box-shadow:0 16px 45px rgba(16,33,61,.08);display:flex;flex-direction:column;justify-content:space-between;overflow:hidden;position:relative}.hero-panel-pro:before{content:"";position:absolute;left:-80px;top:15px;width:280px;height:280px;background-image:radial-gradient(circle,rgba(13,79,174,.075) 2px,transparent 3px);background-size:18px 18px;opacity:.8}.hero-panel-pro:after{content:"";position:absolute;left:-135px;bottom:-120px;width:350px;height:350px;border:24px solid rgba(13,79,174,.065);border-radius:50%}
.panel-brandline{height:38px;display:flex;justify-content:flex-end;align-items:flex-start;gap:12px;color:#72819a;font-size:16px;font-weight:700;position:relative;z-index:2}.panel-brandline i{display:block;width:52px;height:3px;background:linear-gradient(90deg,#dfe6ef 50%,var(--red) 50%);border-radius:3px;margin-top:30px}
.panel-main{display:grid;grid-template-columns:330px 1fr;gap:24px;align-items:center;flex:1;position:relative;z-index:2;direction:ltr}.panel-logo-wrap{height:355px;border-right:0;border-left:1px solid #dce4ee;padding-left:25px;display:flex;align-items:center;justify-content:center;direction:ltr}.panel-logo-wrap img{width:330px;height:330px;margin:0;object-fit:contain}.panel-copy{direction:rtl;padding-right:4px}.panel-icon{width:76px;height:76px;margin:0 0 20px;display:grid;place-items:center;border-radius:50%;background:#f7faff;border:1px solid #dfe7f1;color:var(--blue2);position:relative;box-shadow:none}.panel-icon:after{content:"";position:absolute;inset:-1px;border-radius:50%;border:3px solid transparent;border-top-color:var(--red);border-right-color:var(--red);transform:rotate(15deg)}.panel-icon svg{width:42px;height:42px}.panel-copy h2{font-size:35px;line-height:1.42;margin:0 0 12px;color:var(--ink)}.panel-copy p{font-size:16px;line-height:1.95;color:var(--muted);margin:0}
.panel-features{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid #e1e7ef;margin-top:14px;padding-top:18px;position:relative;z-index:2;direction:ltr}.panel-features>div{height:88px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;border-left:1px solid #e1e7ef;direction:rtl}.panel-features>div:first-child{border-left:0}.panel-features span{width:53px;height:53px;display:grid;place-items:center;border-radius:50%;background:#f8fbff;border:1px solid #dce6f2;color:var(--blue2);position:relative}.panel-features span:after{content:"";position:absolute;inset:-1px;border-radius:50%;border:3px solid transparent;border-top-color:var(--red);border-right-color:var(--red);transform:rotate(20deg)}.panel-features svg{width:29px;height:29px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}.panel-features b{font-size:13px;color:#152a48}
/* lower sections */
.section{padding:95px 0}.heading{display:flex;align-items:end;justify-content:space-between;gap:40px;margin-bottom:40px}.heading h2,.page-hero h1,.two-col h2{font-size:clamp(30px,4vw,46px);line-height:1.35;margin:8px 0}.cards{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}.card{background:#fff;border:1px solid var(--line);border-radius:18px;padding:25px;min-height:260px}.card b{color:var(--red)}.card h3{margin-top:45px}.card p,.two-col p,.prose p{color:var(--muted);font-size:14px}.commerce{padding:75px 0;background:linear-gradient(120deg,#081c39,var(--blue2));color:#fff}.commerce h2{font-size:40px;margin:8px 0}.commerce p{color:#cfdaeb}.foot{display:grid;grid-template-columns:1.5fr 1fr 1.5fr;gap:50px;padding:50px 0 20px}footer{background:#08162b;color:#dbe4f1}.foot img{width:120px;height:70px;object-fit:contain}.foot a,.foot p{display:block;color:#9cafc7;font-size:12px}.copy{border-top:1px solid #ffffff12;text-align:center;padding:14px;color:#70839e;font-size:11px}
/* responsive */
@media(max-width:1200px){.container{width:94vw}.links{gap:18px}.links a{font-size:14px}.nav>.red{min-width:150px}.brand{width:190px;height:190px;flex-basis:190px}.hero-grid{grid-template-columns:1fr 1fr;gap:40px}.hero-panel-pro{width:100%}.hero h1{font-size:64px}.panel-logo-wrap img{width:290px;height:290px}}
@media(max-width:900px){.header,.nav{height:110px}.brand{width:135px;height:100px;flex-basis:135px}.links{display:none}.menu{display:block;margin-right:auto;border:0;background:none;font-size:25px;color:var(--blue2)}.nav>.red{display:none}.links.open{display:flex;position:absolute;top:110px;right:0;left:0;background:#fff;padding:20px 5%;flex-direction:column;gap:14px;border-bottom:1px solid #e1e7ef;z-index:30}.hero{height:auto;min-height:0;padding:55px 0 70px}.hero-grid{height:auto;grid-template-columns:1fr;gap:45px}.hero-grid>div:first-child,.hero-grid>.hero-panel-pro{grid-column:1}.hero-panel-pro{height:auto;min-height:560px}.panel-logo-wrap img{width:270px;height:270px}}
@media(max-width:560px){.hero h1{font-size:44px}.hero p{font-size:16px}.tag{font-size:16px}.hero-panel-pro{padding:22px 18px;border-radius:28px}.panel-main{grid-template-columns:1fr}.panel-logo-wrap{border-left:0;border-bottom:1px solid #e1e7ef;padding:0 0 14px;height:auto}.panel-logo-wrap img{width:230px;height:230px}.panel-copy{text-align:center}.panel-icon{margin:0 auto 14px}.panel-copy h2{font-size:28px}.panel-copy p{font-size:14px}.panel-features{grid-template-columns:repeat(2,1fr)}.panel-features>div:nth-child(2){border-left:0}.panel-features>div:nth-child(3),.panel-features>div:nth-child(4){border-top:1px solid #e1e7ef;padding-top:8px}}

/* EXACT DESKTOP REFERENCE HERO
   The supplied reference artwork is used as the visual layer so the first viewport
   is pixel-identical to the approved design. Invisible hotspots preserve navigation. */
.reference-hero{position:relative;width:100%;aspect-ratio:1672 / 941;overflow:hidden;background:#fff;line-height:0}
.reference-hero-image{display:block;width:100%;height:100%;object-fit:cover;object-position:center top}
.hotspot{position:absolute;display:block;z-index:3;background:transparent;border:0;line-height:normal}
/* Coordinates are percentages of the 1672x941 approved reference artwork. */
.hs-home{right:31.0%;top:7.0%;width:5.0%;height:6.5%}
.hs-services{right:38.5%;top:7.0%;width:5.0%;height:6.5%}
.hs-online{right:45.5%;top:7.0%;width:6.0%;height:6.5%}
.hs-commission{right:52.8%;top:7.0%;width:7.0%;height:6.5%}
.hs-brokerage{right:62.0%;top:7.0%;width:7.5%;height:6.5%}
.hs-about{right:71.0%;top:7.0%;width:4.8%;height:6.5%}
.hs-why{right:76.0%;top:7.0%;width:7.0%;height:6.5%}
.hs-contact{right:84.0%;top:7.0%;width:6.0%;height:6.5%}
.hs-request{left:2.4%;top:6.5%;width:12.0%;height:8.5%}
.hs-services-btn{right:7.2%;top:80.7%;width:12.4%;height:9.0%}
.hs-online-btn{right:21.0%;top:80.7%;width:15.0%;height:9.0%}

/* The approved reference artwork is the canonical homepage hero at every viewport.
   Do not swap it for a second mobile-only design; scale the same artwork responsively. */
.reference-hero{display:block}
.hero{display:none}


/* PRODUCT IMAGE PROTECTION
   Best-effort browser protection. A website cannot technically block OS-level
   screenshots, so protected products are marked and made harder to copy.
*/
.product-protected{position:relative!important;user-select:none!important;-webkit-user-select:none!important;-webkit-touch-callout:none!important;overflow:hidden!important}
.product-protected img,img.protected-product,.product-image.protected-product{user-select:none!important;-webkit-user-drag:none!important;user-drag:none!important;pointer-events:none!important}
.product-protected::after{content:"AL-AHOUD â€¢ Â© Ø¬Ù…ÙŠØ¹ Ø§Ù„Ø­Ù‚ÙˆÙ‚ Ù…Ø­ÙÙˆØ¸Ø©";position:absolute;inset:0;display:flex;align-items:center;justify-content:center;pointer-events:none;color:rgba(255,255,255,.34);font-size:clamp(13px,2vw,24px);font-weight:800;letter-spacing:1px;transform:rotate(-24deg);text-shadow:0 1px 3px rgba(0,0,0,.28);background:repeating-linear-gradient(-24deg,transparent 0 90px,rgba(20,87,185,.055) 90px 150px);z-index:5}
@media print{.product-protected,.protected-product{visibility:hidden!important}}

/* Mobile fidelity: keep the approved hero composition intact while scaling it to the viewport. */
@media(max-width:900px){
  .reference-hero{width:100%;aspect-ratio:1672 / 941;min-height:0;}
  .reference-hero-image{width:100%;height:100%;object-fit:contain;object-position:center top;}
  .hotspot{touch-action:manipulation;}
}

/* ===== CONTACT PAGE ===== */
.contact-grid{
  display:grid;
  grid-template-columns:1fr 1.25fr;
  gap:28px;
  align-items:start;
  margin-top:35px;
}

.contact-box{
  background:#fff;
  border:1px solid #e3e8f0;
  border-radius:18px;
  padding:28px;
  box-shadow:0 8px 25px rgba(12,35,70,.06);
}

.contact-box h2{
  margin:0 0 22px;
  color:#102d57;
  font-size:25px;
}

.contact-box p{
  margin:0 0 18px;
  line-height:1.9;
  color:#33445f;
}

.contact-box p b{
  color:#102d57;
}

.contact-box a{
  color:#164ca7;
  text-decoration:none;
}

.contact-box a:hover{
  text-decoration:underline;
}

.contact-box form{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
  margin-top:10px;
}

.contact-box form input,
.contact-box form select,
.contact-box form textarea{
  width:100%;
  box-sizing:border-box;
  border:1px solid #d7dfeb;
  border-radius:10px;
  padding:13px 14px;
  background:#fff;
  color:#172b4d;
  font:inherit;
  outline:none;
  transition:border-color .2s,box-shadow .2s;
}

.contact-box form input:focus,
.contact-box form select:focus,
.contact-box form textarea:focus{
  border-color:#164ca7;
  box-shadow:0 0 0 3px rgba(22,76,167,.10);
}

.contact-box form textarea{
  grid-column:1/-1;
  min-height:145px;
  resize:vertical;
}

.contact-box form button{
  grid-column:1/-1;
  border:0;
  border-radius:10px;
  padding:14px 22px;
  background:#d9282f;
  color:#fff;
  font:inherit;
  font-weight:800;
  cursor:pointer;
}

.contact-box form button:hover{
  filter:brightness(.94);
}

@media(max-width:800px){
  .contact-grid{
    grid-template-columns:1fr;
  }
}

@media(max-width:600px){
  .contact-box{
    padding:20px;
  }

  .contact-box form{
    grid-template-columns:1fr;
  }

  .contact-box form textarea,
  .contact-box form button{
    grid-column:1;
  }
}
/* ===== END CONTACT PAGE ===== */


/* ===== ORIGINAL AL-AHOUD CONTACT PAGE ===== */

.page-hero {
  padding: 55px 0 35px !important;
  background: linear-gradient(135deg,#f5f8fd,#fff) !important;
}

.page-hero .container {
  padding: 0 !important;
}

.page-hero h1 {
  font-size: clamp(38px,4vw,56px) !important;
  line-height: 1.35 !important;
  margin: 8px 0 12px !important;
}

.page-hero p {
  color: #64748b !important;
  max-width: 700px !important;
  margin: 0 !important;
  font-size: 16px !important;
}

.section {
  padding: 45px 0 70px !important;
}

.contact-grid {
  display: grid !important;
  grid-template-columns: 1fr 1.2fr !important;
  gap: 25px !important;
  align-items: start !important;
}

.contact-box,
.form {
  background: #fff !important;
  border: 1px solid #e5eaf1 !important;
  border-radius: 18px !important;
  padding: 28px !important;
  box-sizing: border-box !important;
}

.contact-box {
  min-height: 0 !important;
  height: auto !important;
}

.contact-box h2 {
  font-size: 30px !important;
  line-height: 1.4 !important;
  margin: 0 0 18px !important;
  color: #10213d !important;
}

.contact-box p {
  color: #64748b !important;
  font-size: 14px !important;
  line-height: 2 !important;
  margin: 0 0 12px !important;
}

.contact-box p b {
  color: #10213d !important;
}

.contact-box a {
  color: #0d459c !important;
}

.contact-box .btn {
  margin-top: 12px !important;
}

.form {
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
}

.form input,
.form select,
.form textarea {
  width: 100% !important;
  box-sizing: border-box !important;
  font: inherit !important;
  border: 1px solid #d8e0eb !important;
  border-radius: 9px !important;
  padding: 12px !important;
  outline: none !important;
  background: #fff !important;
  color: #10213d !important;
}

.form input,
.form select {
  min-height: 48px !important;
}

.form textarea {
  min-height: 150px !important;
  resize: vertical !important;
}

.form input:focus,
.form select:focus,
.form textarea:focus {
  border-color: #0d459c !important;
  box-shadow: 0 0 0 3px rgba(13,69,156,.08) !important;
}

.form button {
  width: 100% !important;
  min-height: 50px !important;
  border: 0 !important;
  cursor: pointer !important;
}

.form small {
  color: #64748b !important;
  font-size: 12px !important;
  line-height: 1.8 !important;
}

@media (max-width:900px) {
  .page-hero {
    padding: 40px 0 25px !important;
  }

  .section {
    padding: 30px 0 50px !important;
  }

  .contact-grid {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width:560px) {
  .page-hero h1 {
    font-size: 42px !important;
  }

  .contact-box,
  .form {
    padding: 20px !important;
  }
}


/* ===== CONTACT PAGE FINAL ORIGINAL OVERRIDE ===== */

/* Restore original hero spacing */
.page-hero {
  padding: 55px 0 35px !important;
}

/* Original contact section spacing */
.page-hero + .section {
  padding: 45px 0 70px !important;
}

/* Original two-column contact layout */
.contact-grid {
  display: grid !important;
  grid-template-columns: 1fr 1.2fr !important;
  gap: 25px !important;
  align-items: start !important;
}

/* Contact boxes */
.contact-box,
.form {
  background: #fff !important;
  border: 1px solid #e5eaf1 !important;
  border-radius: 18px !important;
  padding: 28px !important;
}

/* Original form */
.form {
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
}

/* Inputs */
.form input,
.form select,
.form textarea {
  width: 100% !important;
  box-sizing: border-box !important;
  font: inherit !important;
  border: 1px solid #d8e0eb !important;
  border-radius: 9px !important;
  padding: 12px !important;
  outline: none !important;
  background: #fff !important;
  color: #10213d !important;
}

/* IMPORTANT: restore red submit button */
.form button.btn.red,
.form button[type="submit"].red {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  min-height: 50px !important;
  padding: 11px 22px !important;
  border-radius: 10px !important;
  border: 1px solid transparent !important;
  background: #C9282E !important;
  color: #fff !important;
  font-weight: 800 !important;
  font-size: 13px !important;
  cursor: pointer !important;
  opacity: 1 !important;
}

/* WhatsApp contact button */
.contact-box a.btn.blue {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: #0D459C !important;
  color: #fff !important;
}

/* REMOVE BROKEN HEADER ICON */
.nav > .red:after {
  content: none !important;
  display: none !important;
}

/* Keep request note normal */
.form small {
  color: #64748b !important;
  font-size: 12px !important;
  line-height: 1.8 !important;
}

/* Desktop */
@media (min-width: 901px) {
  .page-hero {
    padding-top: 55px !important;
    padding-bottom: 35px !important;
  }

  .page-hero + .section {
    padding-top: 45px !important;
  }
}

/* Mobile */
@media (max-width: 900px) {
  .contact-grid {
    grid-template-columns: 1fr !important;
  }
}


/* ===== CONTACT PAGE - RESTORE COMPACT ORIGINAL SPACING ===== */

/* Compact header */
.header {
  min-height: 0 !important;
  padding: 8px 0 !important;
}

.header .container.nav {
  min-height: 120px !important;
}

/* Compact contact hero */
.page-hero {
  padding: 28px 0 20px !important;
  min-height: 0 !important;
}

.page-hero .container {
  min-height: 0 !important;
}

/* Bring contact content upward */
.page-hero + .section {
  padding-top: 28px !important;
  padding-bottom: 55px !important;
}

/* Keep the form and contact box aligned */
.contact-grid {
  align-items: start !important;
}

/* Desktop */
@media (min-width: 901px) {
  .header .container.nav {
    min-height: 120px !important;
  }

  .page-hero {
    padding-top: 28px !important;
    padding-bottom: 20px !important;
  }

  .page-hero + .section {
    padding-top: 28px !important;
  }
}


/* ===== CONTACT PAGE - RESTORE COMPACT ORIGINAL SPACING ===== */

/* Compact header */
.header {
  min-height: 0 !important;
  padding: 8px 0 !important;
}

.header .container.nav {
  min-height: 120px !important;
}

/* Compact contact hero */
.page-hero {
  padding: 28px 0 20px !important;
  min-height: 0 !important;
}

.page-hero .container {
  min-height: 0 !important;
}

/* Bring contact content upward */
.page-hero + .section {
  padding-top: 28px !important;
  padding-bottom: 55px !important;
}

/* Keep the form and contact box aligned */
.contact-grid {
  align-items: start !important;
}

/* Desktop */
@media (min-width: 901px) {
  .header .container.nav {
    min-height: 120px !important;
  }

  .page-hero {
    padding-top: 28px !important;
    padding-bottom: 20px !important;
  }

  .page-hero + .section {
    padding-top: 28px !important;
  }
}


/* ===== EXACT SERVICE / HEADSET ICON ===== */
header a.btn.red::before,
.header a.btn.red::before {
  content: "" !important;
  display: inline-block !important;
  width: 24px !important;
  height: 24px !important;
  margin-left: 9px !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 13v-1a8 8 0 0 1 16 0v1'/%3E%3Cpath d='M4 13a2 2 0 0 1 2-2h1v6H6a2 2 0 0 1-2-2v-2Z'/%3E%3Cpath d='M20 13a2 2 0 0 0-2-2h-1v6h1a2 2 0 0 0 2-2v-2Z'/%3E%3Cpath d='M17 18c0 1.1-.9 2-2 2h-2'/%3E%3Cpath d='M13 20h-1'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: contain !important;
  flex: 0 0 24px !important;
}

header a.btn.red,
.header a.btn.red {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 3px !important;
}



/* SEO FAQ */
.seo-faq-section{padding-top:30px}.seo-faq{border-bottom:1px solid rgba(0,0,0,.12);padding:16px 0}.seo-faq summary{cursor:pointer;font-weight:700}.seo-faq p{margin:10px 0 0;line-height:1.9}
