:root{
  --accent:#006699;
  --accent-dark:#00394a;
  --bg:#f4f7f9;
  --card:#ffffff;
  --muted:#65747f;
  --radius:14px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:'Cairo',sans-serif;
  background:var(--bg);
  color:#222;
  line-height:1.8;
}

.container{
  display:grid;
  grid-template-columns:320px 1fr;
  gap:28px;
  max-width:1200px;
  margin:40px auto;
  padding:20px;
}

.sidebar{
  position:sticky;
  top:20px;
  align-self:start;
}

.profile-card{
  background:var(--card);
  border-radius:var(--radius);
  box-shadow:0 6px 20px rgba(0,0,0,0.08);
  padding:20px;
  text-align:center;
}

.img-wrap{
  width:130px;height:130px;margin:0 auto;border-radius:50%;
  border:5px solid var(--accent);
  overflow:hidden;
  transition:all .3s ease;
}
.img-wrap:hover{transform:scale(1.05);}
.img-wrap img{width:100%;height:100%;object-fit:cover;}

.profile-card h1{margin:10px 0 5px;font-size:22px;}
.title{color:var(--muted);margin-bottom:10px;}

.contact{text-align:right;font-size:14px;color:var(--muted);}
.contact p{margin:4px 0;}

.skills-card{
  margin-top:15px;
  background:linear-gradient(180deg,#e8f7fc,#f9fcff);
  padding:12px;border-radius:10px;
}
.skills-card h3{color:var(--accent);}
.skills-list{list-style:square;padding-right:20px;margin:0;text-align:right;}
.skills-list li{margin-bottom:5px;}

.download{margin-top:15px;}
#printBtn{
  width:100%;border:none;
  background:var(--accent);color:#fff;
  padding:10px;border-radius:8px;
  cursor:pointer;font-weight:600;
  transition:all .3s ease;
}
#printBtn:hover{background:var(--accent-dark);transform:translateY(-2px);}

/* Main */
.main .card{
  background:var(--card);
  border-radius:var(--radius);
  box-shadow:0 6px 18px rgba(0,0,0,0.05);
  padding:20px;
  margin-bottom:20px;
}
.main h2{color:var(--accent);margin-top:0;}

.job-head{display:flex;justify-content:space-between;flex-wrap:wrap;}
.date{color:var(--muted);font-size:13px;}

ul{padding-right:20px;margin:0;}
.card ul li{margin:6px 0;color:#333;}

/* Progress Bars */
.bars .bar{margin:12px 0;}
.bars .bar span{display:block;margin-bottom:6px;color:var(--muted);}
.progress{background:#e5eff2;border-radius:10px;overflow:hidden;height:12px;}
.fill{height:100%;width:0;background:linear-gradient(90deg,var(--accent),var(--accent-dark));transition:width 1.4s ease;}

/* Reveal Animation */
.reveal{opacity:0;transform:translateY(15px);transition:all 0.8s ease-out;}
.reveal.visible{opacity:1;transform:translateY(0);}

/* Footer */
.site-footer{
  background:var(--accent-dark);
  color:#fff;
  text-align:center;
  padding:18px 10px;
  border-top:5px solid var(--accent);
  font-size:14px;
}
.site-footer p{margin:3px 0;}

/* Responsive */
@media(max-width:900px){
  .container{grid-template-columns:1fr;gap:20px;padding:15px;}
  .sidebar{position:static;}
  .contact{text-align:center;}
  .skills-list{text-align:center;padding:0;}
}