/* Basic reset */

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Arabic:wght@100..900&family=Righteous&display=swap');

:root{
  --bg:#000; /* dark */
  --card:#002141;
  --muted:#fff;
  --accent:dodgerblue; /* pop color */
  --glass: rgba(255,255,255,0.04);
  --max-width:1100px;
  --radius:12px;
}
*{box-sizing:border-box; text-decoration: none;}
html,body{height:100%;margin:0;font-family:Inter,system-ui,-apple-system,"Segoe UI",Roboto,'Helvetica Neue',Arial;background:var(--bg);color:#e6e6e6}
img,video{max-width:100%;display:block}
.container{max-width:var(--max-width);margin:0 auto;padding:48px 20px}
.no-decoration {text-decoration: none !important; color: #fff;}
h2 {margin:0 0 20px}


/* Header / Nav */
.site-header{position:relative}
.nav{display:flex;justify-content:space-between;align-items:center;padding:20px 30px}
.brand{letter-spacing:0.6px;  font-family: "Righteous", sans-serif; font-weight: 400; font-style: normal; font-size: 1.5rem}
.cta-small{background:var(--accent); border:1px solid rgba(255,255,255,0.06);padding:10px 14px;border-radius:8px;color:var(--muted);text-decoration:none}

/* Hero */
.hero{min-height:68vh;display:grid;align-items:center;position:relative;overflow:hidden}
.hero-media{position:absolute;inset:0}
.hero-video{width:100%;height:100%;object-fit:cover;filter:brightness(0.7)}
.hero-overlay{position:absolute;inset:0;background:linear-gradient(180deg, rgba(15,17,19,0.15), rgba(15,17,19,0.0.05));}
.hero-content{position:relative;z-index:2;padding:40px;text-align:center}
.hero h1{font-size:clamp(20px,4.6vw,40px);margin:0 0 12px; text-shadow: 1px 1px 2px #000;}
.lead{color:var(--muted);margin-bottom:18px;text-shadow: 1px 1px 2px #000;}
.btn{display:inline-block;padding:12px 22px;border-radius:10px;text-decoration:none}
.btn.primary{background:var(--accent); color:#fff; border:none;  }

/* Problems */

.problems{padding:40px 0}
.problems .container{display:flex;gap:20px;justify-content:space-between}
.problem{flex:1;background:var(--card);padding:28px;border-radius:10px;text-align:center;color:var(--muted)}

/* Portfolio */
.portfolio h2{margin:0 0 20px}

.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:18px}
.thumb{background:var(--card);border-radius:10px;padding:0;border:none;cursor:pointer;overflow:hidden;text-align:left}
.thumb img{width:100%;height:150px;object-fit:cover;display:block}
.thumb-label{padding:12px;font-weight:600; color: var(--muted);}

/* Services */
.service-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:18px}
.service-card{background:var(--card);padding:20px;border-radius:12px}
.price{margin-top:12px;color:var(--muted);font-weight:600}

/* Review */
.reviews h1{margin:0 0 20px}
.embedsocial-widget {background-color: var(--card); border-radius: var(--radius); max-width: 720px; margin-left: auto; margin-right: auto;}

/* About */
#my-picture {border-radius: var(--radius); overflow: hidden; width:12rem; border: 2px solid white;}
.about-grid{display:grid;grid-template-columns:1fr 260px;gap:20px}
.cred{margin:10px 0 0;padding-left:18px;color:var(--muted)}
.cred li {margin: 5px 0}

/* Contact */
.contact form{display:grid;gap:12px}
input,textarea,select{background:transparent;border:1px solid rgba(255,255,255,0.06);padding:12px;border-radius:8px;color:inherit}
.form-actions{display:flex;gap:12px;align-items:center}
.btn.ghost{background:transparent;border:1px solid rgba(255,255,255,0.06);color:var(--muted);padding:10px 14px;border-radius:8px;text-decoration:none}
.whatsapp-button{ background-color: #075E54; border: 1px solid white;}
#or {margin: 10px;}


/* Footer */
.site-footer{padding:28px 20px;border-top:1px solid rgba(255,255,255,0.03);color:var(--muted); background-color: var(--card);}
.foot-wrap{display:flex;justify-content:space-between;align-items:center}

/* Modal */
.modal{position:fixed;inset:0;background:rgba(0,0,0,0.6);display:none;align-items:center;justify-content:center;padding:20px}
.modal[aria-hidden="false"]{display:flex}
.modal-body{background:var(--card);padding:18px;border-radius:12px;overflow:auto; width:360px;}
.modal-video{max-height:100%}
.modal-close{background:transparent;border:none;color:var(--muted);font-size:28px;position:absolute;right:22px;top:18px}
.modal-placeholder{padding:60px;text-align:center;color:var(--muted)}

/* Utilities */
.no-scroll{overflow:hidden}
.visually-hidden{position:absolute;left:-9999px}

/* Responsive tweaks */
@media(max-width:800px){
  .problems .container{flex-direction:column}
  .about-grid{grid-template-columns:1fr}
}

/* Accessibility focus */
button:focus, a:focus, input:focus{outline:2px solid rgba(255,159,28,0.25);outline-offset:2px}