/* -------------------------
   Omar Zaky — Clean Agency
   RTL-ready • Off-White • Strong Contrast
   ------------------------- */

:root{
  --bg: #eff1f2;            /* slightly darker white (Premium off-white) */
  --card: #ffffff;
  --black: #000000;
  --muted: #505050;
  --accent: #0f766e;
  --radius-lg: 18px;
  --gap: 22px;
}

*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  font-family: 'Cairo', sans-serif;
  background: var(--bg);
  color: var(--black);
  line-height:1.8;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  direction: rtl;
}

/* SITE WRAPPER */
.site{
  max-width:1100px;
  margin:48px auto;
  padding:0 18px 60px;
}

/* PROFILE */
.profile{
  background: var(--card);
  border-radius: var(--radius-lg);
  padding:40px;
  text-align:center;
  box-shadow: 0 22px 50px rgba(10,10,10,0.06);
}

/* avatar */
.avatar{
  width:160px;height:160px;margin:0 auto 14px;border-radius:50%;overflow:hidden;border:6px solid rgba(15,118,110,0.08);
}
.avatar img{width:100%;height:100%;object-fit:cover;display:block}

/* name & role */
.full-name{
  font-size:28px;
  font-weight:800;
  letter-spacing:0.4px;
  margin-bottom:6px;
}
.role{
  font-size:14px;
  color:var(--muted);
  margin-bottom:18px;
}

/* BIO */
.bio{max-width:820px;margin:0 auto;text-align:right;padding:0 6px}
.bio .lead{font-weight:700;margin-bottom:8px;font-size:16px}
.bio .tagline{color:var(--accent);font-weight:700;margin-bottom:14px}
.bio p{margin-bottom:12px;color:var(--muted);font-size:15px}

/* Section titles inside bio */
.bio h3{margin-top:18px;margin-bottom:8px;font-size:16px;color:#222;font-weight:700}

/* platforms small note */
.platforms{color:var(--muted);margin-bottom:8px;font-size:14px}

/* custom list style (bullets on the right for RTL) */
.features-list{
  list-style:none;
  padding-right:0;
  margin-bottom:8px;
}
.features-list li{
  position:relative;
  padding-right:30px; /* space for bullet on right */
  margin-bottom:10px;
  color:var(--muted);
  font-size:15px;
  direction: rtl;
  unicode-bidi: isolate;
}
/* bullet on the right */
.features-list li::before{
  content: "•";
  position:absolute;
  right:8px;
  top:0;
  color:var(--accent);
  font-weight:700;
  font-size:18px;
}

/* GALLERY - CENTER CHANGE: 2 per row, large, show full without cropping */
.gallery{margin-top:36px}
.section-title{
  text-align:right;
  margin-bottom:18px;
  font-size:18px;
  font-weight:700;
  color:#222;
}

/* portfolio-grid: two columns, images fill width and keep full height (no crop) */
.portfolio-grid{
  display:grid;
  grid-template-columns: repeat(2, 1fr); /* صورتين جنب بعض */
  gap:18px;
  width:100%;
  align-items:start;
}

/* each work item keeps caption below; image inside a container to preserve aspect ratio */
.work{
  background:var(--card);
  border-radius:12px;
  overflow:visible; /* allow caption to show */
  box-shadow: 0 14px 34px rgba(10,10,10,0.04);
  transition: transform .28s ease, box-shadow .28s ease;
  text-align:right;
}
.work:hover{transform: translateY(-6px);box-shadow: 0 28px 60px rgba(10,10,10,0.07)}

/* image wrapper to avoid cropping; keeps image centered and fully visible */
.work img{
  width:100%;
  height:auto;        /* important: auto height to keep full image */
  display:block;
  object-fit: contain; /* ensure image is not cropped; shows full image */
  background-color: #f8f8f8;
}

/* caption */
.work figcaption{
  padding:12px 14px;
  font-weight:600;
  color:var(--black);
  font-size:14px;
}

/* ensure the two images take the full available width on large screens */
@media (min-width:1100px){
  .site{max-width:1200px}
}

/* MOBILE: one column */
@media (max-width: 768px){
  .portfolio-grid{
    grid-template-columns: 1fr; /* image per row on mobile */
  }
}

/* CONTACT / WhatsApp CTA */
.contact{margin-top:36px;text-align:center}
.whatsapp{
  display:inline-block;
  background: linear-gradient(135deg,#25d366,#128c7e);
  color:#fff;
  padding:14px 30px;
  border-radius:999px;
  font-weight:700;
  text-decoration:none;
  box-shadow: 0 18px 48px rgba(18,140,126,0.28);
  transition: transform .25s ease, box-shadow .25s ease;
}
.whatsapp:hover{transform: translateY(-4px);box-shadow: 0 28px 72px rgba(18,140,126,0.36)}

/* footer */
.footer{text-align:center;margin-top:28px;color:var(--muted);font-size:13px}

/* helpers: English / numbers isolation */
.ltr{direction:ltr;unicode-bidi:isolate;display:inline-block}

/* small screens */
@media (max-width:480px){
  .site{margin:18px auto;padding:0 14px 40px}
  .profile{padding:20px}
  .avatar{width:120px;height:120px}
}