@import url("https://fonts.googleapis.com/css2?family=Tajawal:wght@400;500;600;700;800;900&display=swap");

:root { --navy:#071b36; --blue:#0c4c91; --blue-light:#eaf3fb; --gold:#d7a23f; --gold-dark:#b57d1f; --sand:#f6f1e8; --ink:#152337; --muted:#647184; --line:#dfe6ed; --green:#17805e; --shadow:0 18px 50px rgba(7,27,54,.11); }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:#fff; color:var(--ink); font-family:"Tajawal",Arial,sans-serif; }
a { color:inherit; text-decoration:none; }
button,input,textarea,select { font:inherit; }
.container { width:min(1180px,calc(100% - 36px)); margin-inline:auto; }
.section { padding:92px 0; }
.section--sand { background:var(--sand); }
.eyebrow { display:inline-flex; align-items:center; gap:8px; color:var(--gold-dark); font-size:.82rem; font-weight:800; letter-spacing:.08em; margin-bottom:12px; }
.eyebrow::before { content:""; width:28px; height:2px; background:currentColor; }
.eyebrow--light { color:#f8d99d; }
.button { border:0; border-radius:999px; display:inline-flex; align-items:center; justify-content:center; padding:14px 25px; font-weight:800; cursor:pointer; transition:.2s ease; }
.button:hover { transform:translateY(-2px); }
.button--gold { background:var(--gold); color:#152033; box-shadow:0 10px 30px rgba(215,162,63,.28); }
.button--gold:hover { background:#e7b95d; }
.button--primary { background:var(--blue); color:white; }
.button--ghost { color:white; border:1px solid rgba(255,255,255,.55); background:rgba(255,255,255,.07); backdrop-filter:blur(10px); }
.button--small { padding:10px 18px; }
.text-link { color:var(--blue); font-weight:800; }
.site-header { position:sticky; top:0; z-index:50; background:rgba(255,255,255,.96); border-bottom:1px solid rgba(223,230,237,.8); backdrop-filter:blur(14px); }
.header-inner { min-height:78px; display:flex; align-items:center; justify-content:space-between; gap:25px; }
.brand { display:flex; align-items:center; gap:11px; min-width:max-content; }
.brand-mark { width:48px; height:48px; border-radius:17px 6px 17px 6px; display:grid; place-items:center; background:linear-gradient(145deg,var(--blue),var(--navy)); color:white; font-size:1.5rem; font-weight:900; box-shadow:0 8px 20px rgba(7,27,54,.18); }
.brand-mark--light { background:rgba(255,255,255,.12); box-shadow:none; }
.brand strong,.brand small { display:block; }
.brand strong { color:var(--navy); font-size:1.25rem; line-height:1.1; }
.brand small { color:var(--muted); font-size:.76rem; margin-top:4px; }
.main-nav { display:flex; align-items:center; gap:24px; color:#344156; font-size:.92rem; font-weight:700; }
.main-nav>a:not(.button):hover { color:var(--blue); }
.nav-login { padding-inline-start:22px; border-inline-start:1px solid var(--line); }
.menu-toggle { display:none; border:0; background:var(--blue-light); color:var(--navy); border-radius:10px; width:42px; height:42px; font-size:1.2rem; }
.hero { min-height:650px; position:relative; overflow:hidden; background:var(--navy); }
.hero-slide { position:absolute; inset:0; opacity:0; visibility:hidden; background-size:cover; background-position:center; transition:opacity .8s ease,visibility .8s ease; }
.hero-slide--active { opacity:1; visibility:visible; }
.hero-content { min-height:650px; display:flex; justify-content:center; flex-direction:column; align-items:flex-start; color:white; position:relative; }
.hero-kicker { border:1px solid rgba(255,255,255,.3); background:rgba(255,255,255,.08); padding:8px 14px; border-radius:99px; font-size:.82rem; font-weight:700; }
.hero h1,.hero h2 { max-width:720px; font-size:clamp(3rem,6vw,5.4rem); line-height:.98; margin:26px 0 22px; letter-spacing:-.04em; font-weight:900; }
.hero p { max-width:640px; font-size:1.35rem; line-height:1.8; color:rgba(255,255,255,.83); margin:0 0 30px; }
.hero-actions { display:flex; gap:12px; flex-wrap:wrap; }
.hero-dots { position:absolute; z-index:4; bottom:30px; right:50%; transform:translateX(50%); display:flex; gap:8px; }
.hero-dots button { width:9px; height:9px; border-radius:9px; border:0; background:rgba(255,255,255,.45); padding:0; cursor:pointer; transition:.2s; }
.hero-dots button.active { width:30px; background:var(--gold); }
.inquiry-strip { background:linear-gradient(120deg,var(--blue),#0b3e76); color:white; padding:42px 0; }
.inquiry-strip__grid { display:grid; grid-template-columns:1fr 1.2fr; gap:60px; align-items:center; }
.inquiry-strip h2 { font-size:2rem; margin:0 0 8px; }
.inquiry-strip p { margin:0; color:rgba(255,255,255,.76); }
.inquiry-form label { display:block; font-weight:700; margin-bottom:8px; }
.inquiry-form__row { display:flex; gap:10px; }
.inquiry-form input { min-width:0; flex:1; border:1px solid var(--line); border-radius:999px; padding:14px 20px; outline:none; background:white; color:var(--ink); }
.inquiry-form input:focus { border-color:var(--gold); box-shadow:0 0 0 4px rgba(215,162,63,.18); }
.inquiry-form--compact label { color:white; }
.form-note { font-size:.82rem; margin:8px 10px 0; color:inherit; }
.section-heading { display:flex; align-items:end; justify-content:space-between; gap:24px; margin-bottom:38px; }
.section-heading h2,.feature-copy h2,.branch-intro h2,.page-hero h1 { margin:0; color:var(--navy); font-size:clamp(2.1rem,4vw,3.2rem); line-height:1.15; letter-spacing:-.025em; }
.service-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.service-card { position:relative; padding:28px; border:1px solid var(--line); border-radius:22px; background:white; transition:.24s ease; overflow:hidden; }
.service-card::after { content:""; position:absolute; left:-30px; bottom:-30px; width:100px; height:100px; border-radius:50%; background:var(--blue-light); transition:.24s; }
.service-card:hover { transform:translateY(-6px); border-color:#bfd2e7; box-shadow:var(--shadow); }
.service-card:hover::after { transform:scale(1.25); }
.service-card__icon { width:54px; height:54px; display:grid; place-items:center; background:var(--blue-light); border-radius:16px; font-size:1.55rem; margin-bottom:22px; }
.service-card__category { color:var(--gold-dark); font-size:.76rem; font-weight:800; }
.service-card h3 { color:var(--navy); font-size:1.3rem; margin:9px 0; }
.service-card p { color:var(--muted); line-height:1.75; min-height:56px; }
.service-card a { color:var(--blue); font-weight:800; position:relative; z-index:2; }
.split-feature { display:grid; grid-template-columns:1fr 1fr; gap:80px; align-items:center; }
.feature-photo { min-height:540px; border-radius:38px 12px 38px 12px; background:linear-gradient(180deg,transparent 45%,rgba(7,27,54,.7)),url("../images/airplane.jpg") center/cover; position:relative; box-shadow:var(--shadow); }
.experience-badge { position:absolute; left:-28px; bottom:38px; width:154px; height:154px; border-radius:50%; background:var(--gold); display:flex; align-items:center; justify-content:center; flex-direction:column; border:8px solid var(--sand); color:var(--navy); text-align:center; }
.experience-badge strong { font-size:2.5rem; line-height:1; }
.experience-badge span { font-weight:700; font-size:.82rem; margin-top:7px; }
.feature-copy>p { color:var(--muted); line-height:2; font-size:1.05rem; }
.feature-list { display:grid; gap:13px; margin:27px 0 32px; }
.feature-list div { display:flex; align-items:center; gap:15px; padding:14px 0; border-bottom:1px solid #e7ded0; }
.feature-list b { color:var(--gold-dark); font-size:.82rem; }
.feature-list span { color:var(--muted); }
.feature-list strong { color:var(--ink); }
.branch-grid { display:grid; grid-template-columns:1.15fr 1fr 1fr; gap:20px; align-items:stretch; }
.branch-intro { padding:28px 0; }
.branch-intro p { color:var(--muted); line-height:1.8; }
.branch-card { padding:32px; background:var(--navy); color:white; border-radius:26px 8px 26px 8px; display:flex; flex-direction:column; justify-content:space-between; min-height:230px; }
.branch-card--accent { background:var(--gold); color:var(--navy); }
.branch-card>span { font-size:.76rem; font-weight:800; opacity:.75; }
.branch-card h3 { font-size:1.45rem; line-height:1.5; }
.branch-card a { font-size:1.15rem; font-weight:800; align-self:flex-start; }
.site-footer { background:#05162d; color:rgba(255,255,255,.76); padding:70px 0 20px; }
.footer-grid { display:grid; grid-template-columns:1.5fr repeat(3,1fr); gap:45px; }
.footer-grid h2 { color:white; margin:18px 0 8px; }
.footer-grid h3 { color:white; font-size:1rem; margin:0 0 18px; }
.footer-grid a,.footer-grid p { display:block; margin:9px 0; line-height:1.7; }
.footer-grid a:hover { color:white; }
.footer-bottom { border-top:1px solid rgba(255,255,255,.1); margin-top:50px; padding-top:20px; display:flex; justify-content:space-between; font-size:.8rem; }
.page-hero { padding:90px 0 80px; background:linear-gradient(125deg,#edf5fb,#f8f4ec); text-align:center; }
.page-hero p { max-width:680px; margin:18px auto 0; color:var(--muted); line-height:1.9; }
.page-shell { min-height:100vh; background:#f5f7fa; }
.form-card { background:white; border:1px solid var(--line); border-radius:26px; padding:32px; box-shadow:var(--shadow); }
.form-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:18px; }
.field { display:grid; gap:8px; }
.field--full { grid-column:1/-1; }
.field label { font-weight:700; color:var(--ink); }
.field input,.field textarea,.field select { width:100%; border:1px solid var(--line); border-radius:12px; padding:13px 14px; background:#fff; outline:none; }
.field textarea { min-height:130px; resize:vertical; }
.field input:focus,.field textarea:focus,.field select:focus { border-color:var(--blue); box-shadow:0 0 0 3px rgba(12,76,145,.1); }
.login-page { min-height:100vh; display:grid; grid-template-columns:1fr 1fr; background:var(--sand); }
.login-visual { padding:65px; background:linear-gradient(150deg,rgba(7,27,54,.95),rgba(12,76,145,.78)),url("../images/dubai.jpg") center/cover; color:white; display:flex; flex-direction:column; justify-content:space-between; }
.login-visual .brand strong { color:white; }
.login-visual .brand small { color:rgba(255,255,255,.65); }
.login-visual h1 { font-size:clamp(2.5rem,5vw,4.4rem); max-width:600px; line-height:1.1; margin:0 0 18px; }
.login-visual p { color:rgba(255,255,255,.75); max-width:560px; line-height:1.8; }
.login-panel { display:grid; place-items:center; padding:35px; }
.login-box { width:min(440px,100%); }
.login-box h2 { color:var(--navy); font-size:2.1rem; margin-bottom:7px; }
.login-box>p { color:var(--muted); margin-bottom:30px; }
.login-box .field { margin-bottom:16px; }
.login-box .button { width:100%; margin-top:8px; }
.login-help { margin-top:20px; padding:15px; border-radius:12px; background:#fff7e8; color:#7f5a17; font-size:.82rem; line-height:1.7; }
.dashboard-layout { min-height:100vh; display:grid; grid-template-columns:250px 1fr; background:#f4f7fa; }
.dashboard-sidebar { background:var(--navy); color:rgba(255,255,255,.72); padding:25px 18px; position:sticky; top:0; height:100vh; }
.dashboard-sidebar .brand { color:white; margin-bottom:35px; padding:0 7px; }
.dashboard-sidebar .brand strong { color:white; }
.dashboard-sidebar .brand small { color:rgba(255,255,255,.55); }
.dashboard-nav { display:grid; gap:7px; }
.dashboard-nav a { padding:12px 14px; border-radius:10px; font-weight:700; }
.dashboard-nav a:hover,.dashboard-nav a.active { background:rgba(255,255,255,.1); color:white; }
.dashboard-role { margin-top:30px; padding:14px; background:rgba(255,255,255,.07); border-radius:12px; font-size:.8rem; line-height:1.7; }
.dashboard-main { padding:30px; min-width:0; }
.dashboard-top { display:flex; justify-content:space-between; align-items:center; gap:20px; margin-bottom:28px; }
.dashboard-top h1 { margin:0; color:var(--navy); }
.dashboard-top p { margin:5px 0 0; color:var(--muted); }
.user-chip { display:flex; align-items:center; gap:10px; background:white; border:1px solid var(--line); border-radius:99px; padding:7px 12px 7px 18px; }
.user-avatar { width:38px; height:38px; border-radius:50%; display:grid; place-items:center; background:var(--blue-light); color:var(--blue); font-weight:900; }
.metric-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.metric-card { background:white; border:1px solid var(--line); border-radius:17px; padding:21px; }
.metric-card span { color:var(--muted); font-size:.82rem; }
.metric-card strong { display:block; color:var(--navy); font-size:2rem; margin:8px 0; }
.metric-card small { color:var(--green); }
.dashboard-grid { display:grid; grid-template-columns:1.5fr 1fr; gap:18px; margin-top:18px; }
.panel { background:white; border:1px solid var(--line); border-radius:17px; padding:22px; min-width:0; }
.panel-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:18px; }
.panel-header h2 { margin:0; font-size:1.15rem; color:var(--navy); }
.table-wrap { overflow-x:auto; }
table { width:100%; border-collapse:collapse; font-size:.86rem; }
th { text-align:right; color:var(--muted); font-weight:700; background:#f7f9fb; }
th,td { padding:13px 12px; border-bottom:1px solid #edf0f3; white-space:nowrap; }
.status { display:inline-flex; border-radius:99px; padding:5px 9px; font-size:.72rem; font-weight:800; background:#fff4d9; color:#8a620f; }
.status--green { background:#e4f7ef; color:#12694d; }
.activity-list { display:grid; gap:16px; }
.activity-item { display:grid; grid-template-columns:9px 1fr; gap:12px; }
.activity-dot { width:9px; height:9px; border-radius:50%; background:var(--gold); margin-top:7px; }
.activity-item p { margin:0; font-size:.86rem; line-height:1.7; }
.activity-item small { color:var(--muted); }
.slider-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:17px; }
.slider-card { background:white; border:1px solid var(--line); border-radius:17px; overflow:hidden; }
.slider-card__image { aspect-ratio:16/9; background-size:cover; background-position:center; }
.slider-card__body { padding:17px; }
.slider-card__body h3 { margin:0 0 6px; color:var(--navy); }
.slider-actions { display:flex; gap:7px; margin-top:14px; }
.chip-button { border:1px solid var(--line); background:white; border-radius:8px; padding:8px 10px; cursor:pointer; }
.upload-box { margin-bottom:20px; background:white; border:2px dashed #b9c9d9; border-radius:17px; padding:28px; text-align:center; color:var(--muted); }
.upload-box strong { color:var(--blue); }
@media (max-width:980px) {
  .main-nav { position:absolute; top:78px; right:18px; left:18px; display:none; flex-direction:column; align-items:stretch; gap:0; padding:14px; background:white; border:1px solid var(--line); box-shadow:var(--shadow); border-radius:16px; }
  .main-nav--open { display:flex; }
  .main-nav a { padding:11px 12px; }
  .nav-login { border:0; padding-inline-start:12px; }
  .menu-toggle { display:block; }
  .service-grid { grid-template-columns:repeat(2,1fr); }
  .split-feature { grid-template-columns:1fr; gap:50px; }
  .feature-photo { min-height:440px; }
  .branch-grid { grid-template-columns:1fr 1fr; }
  .branch-intro { grid-column:1/-1; }
  .footer-grid { grid-template-columns:1fr 1fr; }
  .dashboard-layout { grid-template-columns:82px 1fr; }
  .dashboard-sidebar .brand span:last-child,.dashboard-nav span,.dashboard-role { display:none; }
  .dashboard-nav a { text-align:center; }
  .metric-grid { grid-template-columns:repeat(2,1fr); }
  .dashboard-grid { grid-template-columns:1fr; }
  .slider-grid { grid-template-columns:repeat(2,1fr); }
}
@media (max-width:680px) {
  .section { padding:65px 0; }
  .hero,.hero-content { min-height:600px; }
  .hero h1,.hero h2 { font-size:3rem; }
  .hero p { font-size:1.05rem; }
  .inquiry-strip__grid,.login-page { grid-template-columns:1fr; }
  .login-visual { min-height:350px; padding:35px 24px; }
  .inquiry-form__row { flex-direction:column; }
  .section-heading { align-items:flex-start; flex-direction:column; }
  .service-grid,.branch-grid,.footer-grid,.form-grid { grid-template-columns:1fr; }
  .branch-intro { grid-column:auto; }
  .experience-badge { left:10px; bottom:20px; width:126px; height:126px; }
  .footer-bottom { flex-direction:column; gap:7px; }
  .dashboard-layout { display:block; }
  .dashboard-sidebar { position:static; width:100%; height:auto; display:flex; align-items:center; overflow-x:auto; padding:12px; }
  .dashboard-sidebar .brand { margin:0 0 0 12px; }
  .dashboard-sidebar .brand-mark { width:42px; height:42px; }
  .dashboard-nav { display:flex; }
  .dashboard-nav a { min-width:50px; }
  .dashboard-main { padding:20px 14px; }
  .dashboard-top { align-items:flex-start; }
  .user-chip span:not(.user-avatar) { display:none; }
  .metric-grid,.slider-grid { grid-template-columns:1fr; }
}

/* PHP/MySQL application extensions */
.site-icon { width:24px; height:24px; flex-shrink:0; }
.whatsapp-float { position:fixed; left:max(16px,env(safe-area-inset-left)); bottom:max(16px,env(safe-area-inset-bottom)); width:54px; height:54px; display:grid; place-items:center; border-radius:50%; background:var(--green); color:white; border:2px solid white; box-shadow:0 6px 22px rgba(7,27,54,.25); z-index:60; transition:transform .2s,background .2s; }
.whatsapp-float .site-icon { width:30px; height:30px; }
.whatsapp-float:hover { transform:translateY(-3px); background:#12694d; }
.whatsapp-float:focus-visible,.contact-socials a:focus-visible { outline:3px solid var(--gold); outline-offset:4px; }
.site-footer { padding-bottom:90px; }
.dashboard-main { padding-bottom:90px; }
.branch-card .branch-phones { display:flex; flex-wrap:wrap; align-items:center; justify-content:flex-end; gap:5px; font-weight:800; line-height:1.8; }
.branch-card .branch-phones a { font-size:1rem; white-space:nowrap; }
.contact-socials { display:grid; gap:10px; margin:18px 0; }
.contact-socials a { display:flex; align-items:center; gap:10px; padding:12px; border:1px solid rgba(255,255,255,.2); border-radius:12px; }
.contact-socials a:hover { background:rgba(255,255,255,.1); }
.contact-socials span { min-width:0; overflow-wrap:anywhere; }
.contact-grid>* { min-width:0; }
.result-card dd { overflow-wrap:anywhere; white-space:pre-wrap; }
.result-notes { grid-column:1/-1; }
@media (prefers-reduced-motion:reduce) { .whatsapp-float { transition:none; } }
.flash { width:min(1180px,calc(100% - 36px)); margin:14px auto; padding:14px 18px; border-radius:12px; font-weight:700; line-height:1.7; }
.flash--success { background:#e4f7ef; color:#12694d; border:1px solid #bfe9d7; }
.flash--error { background:#fff0f0; color:#9b2c2c; border:1px solid #f3c4c4; }
.narrow { width:min(800px,100%); }
.contact-grid { display:grid; grid-template-columns:1.4fr .8fr; gap:24px; align-items:start; }
.contact-details { padding:32px; border-radius:26px; color:white; background:var(--navy); }
.contact-details h2 { margin-top:0; }
.contact-details p { line-height:1.9; }
.gallery-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.gallery-card { margin:0; border-radius:20px; overflow:hidden; background:white; box-shadow:var(--shadow); }
.gallery-card img { width:100%; aspect-ratio:4/3; object-fit:cover; display:block; }
.gallery-card figcaption { display:grid; gap:5px; padding:17px; }
.gallery-card figcaption strong { color:var(--navy); }
.gallery-card figcaption span { color:var(--muted); }
.empty-state { text-align:center; padding:45px; color:var(--muted); }
.result-card { margin-top:24px; padding:25px; border:1px solid var(--line); border-radius:18px; background:#f8fafc; }
.result-card h2 { color:var(--navy); }
.result-card dl { display:grid; grid-template-columns:repeat(2,1fr); gap:12px; }
.result-card dl div { padding:13px; background:white; border-radius:10px; }
.result-card dt { color:var(--muted); font-size:.78rem; }
.result-card dd { margin:5px 0 0; font-weight:800; }
.dashboard-page { background:#f4f7fa; }
.dashboard-nav a b { display:inline-block; min-width:20px; }
.user-chip small { display:block; color:var(--muted); font-size:.7rem; }
.user-chip form,.row-actions form,.slider-actions form { margin:0; }
.form-panel { margin-bottom:18px; }
.row-actions,.inline-form { display:flex; align-items:center; gap:7px; }
.inline-form select { border:1px solid var(--line); border-radius:8px; padding:8px; }
.chip-button { display:inline-flex; align-items:center; justify-content:center; color:var(--ink); font-weight:700; }
.chip-button.danger { color:#a12b2b; border-color:#efc2c2; }
.table-note { display:block; color:var(--muted); margin-top:4px; max-width:240px; overflow:hidden; text-overflow:ellipsis; }
.message-cell { white-space:normal; min-width:260px; max-width:430px; line-height:1.7; }
.check-field { display:flex; align-items:center; gap:9px; font-weight:700; }
.check-field input { width:18px; height:18px; accent-color:var(--blue); }
.image-preview { display:block; max-width:300px; max-height:170px; border-radius:12px; margin:14px auto 0; object-fit:cover; }
.image-preview[hidden] { display:none; }
.installer-page { min-height:100vh; display:grid; place-items:center; margin:0; padding:24px; background:linear-gradient(140deg,#edf5fb,#f6f1e8); }
.installer-box { width:min(620px,100%); padding:34px; border-radius:24px; background:white; box-shadow:var(--shadow); }
.installer-box>.brand { margin-bottom:28px; }
.installer-box h1 { color:var(--navy); }
.installer-box form { display:grid; gap:16px; }
.installer-box form .button { width:100%; margin-top:8px; }
.security-note { margin-top:22px; padding:13px; border-radius:10px; background:#fff7e8; color:#7f5a17; }
@media (max-width:980px) { .gallery-grid { grid-template-columns:repeat(2,1fr); } }
@media (max-width:680px) {
  .contact-grid,.gallery-grid,.result-card dl { grid-template-columns:1fr; }
  .dashboard-top { flex-wrap:wrap; }
  .row-actions,.inline-form { min-width:220px; }
  .installer-box { padding:24px 18px; }
}