/* ==============================
   Global / Tokens
============================== */
:root {
  --primary:#0d6efd;
  --primary-600:#0b5ed7;
  --secondary:#6c757d;
  --light:#ffffff;
  --dark:#212529;
  --muted:#f6f7f9;
  --border:#e9ecef;
  --panel:#ffffff;
  --text:#212529;
  --nav-h: 56px;
}

* { box-sizing:border-box; }

body, .card, .edu-card, .contact-card, .project-card, footer, .tags-card, .cert {
  transition:background .25s ease,color .25s ease,border-color .25s ease;
}

html,body {
  margin:0;
  padding:0;
  min-height:100%;
  width:100%;
  overflow-x:hidden;
}

body {
  font-family:"Poppins",system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  background:var(--light);
  color:var(--text);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  padding-top: var(--nav-h);
}

img { max-width:100%; height:auto; display:block }

h1,h2,h3,h4,h5 { margin:0 0 14px; font-weight:600 }
a { color:var(--primary); text-decoration:none }
a:hover { text-decoration:underline }

.container {
  width:92%;
  max-width:1200px;
  margin:auto;
  overflow-x:hidden;
}

section {
  padding:80px 20px;
  scroll-margin-top:calc(var(--nav-h) + 12px);
}
.section-title {
  font-size:2rem;
  margin:0 0 28px;
  text-align:center;
}

body.modal-open { overflow: hidden; }

/* إظهار اللوجو المناسب حسب الوضع */
.logo.light-only { display: inline; }
.logo.dark-only { display: none; }

body.dark .logo.light-only { display: none; }
body.dark .logo.dark-only { display: inline; }


/* ==============================
   Page Loader
============================== */
#pageLoader {
  position: fixed;
  top: 0;
  left: 0;
  height: 4px;
  width: 0;
  background: linear-gradient(90deg, #0d6efd, #20c997);
  z-index: 2000;
  transition: width 0.3s ease;
}

/* ==============================
   Navbar
============================== */
.navbar {
  background: var(--panel);
  border-bottom: 1px solid var(--border);
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
  box-shadow: 0 4px 16px rgba(0,0,0,.05);
}

.nav-wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: var(--nav-h);
  padding: 4px 0;
}

.brand {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 1rem;
  font-weight: 700;
  color: inherit;
  white-space: nowrap;
  line-height: 1.2;
}

/* ==============================
   Dark Mode
============================== */
body.dark {
  --light:#0f1215;
  --text:#f5f6f7;
  --panel:#1b1f24;
  --border:#3a404a;
  --muted:#111418;
}

body.dark p,
body.dark .edu-meta,
body.dark .issuer,
body.dark .cert-sub,
body.dark .project-desc {
  color:#adb5bd;
}

body.dark .tag.monitor {
  background:#3b2e00;
  color:#ffe066;
}

body.dark a,
body.dark .btn-outline {
  color:#4dabf7;
}
body.dark a:hover { color:#74c0fc; }

body.dark .navbar,
body.dark .card,
body.dark .edu-card,
body.dark .contact-card,
body.dark .project-card,
body.dark .modal-content,
body.dark footer,
body.dark .cert,
body.dark .tags-card {
  background:var(--panel);
  color:var(--text);
  border-color:var(--border);
}

body.dark .lead,
body.dark .fact,
body.dark .about-tags .tag,
body.dark .timeline-item p,
body.dark .timeline-item ul li {
  color: #adb5bd !important;
}

body.dark .progress { background:var(--border); }

body.dark .certs-tab {
  background:var(--panel);
  color:var(--text);
  border:1px solid var(--border);
}
body.dark .certs-tab.active {
  background:var(--primary);
  color:#fff;
}

body.dark #backToTop {
  background:#4dabf7;
  color:#000;
}

/* ==============================
   Navigation Links
============================== */
.nav-links {
  display:flex;
  gap:20px;
  align-items:center;
  transition:max-height 0.3s ease,opacity 0.3s ease;
}
.nav-links a {
  color:inherit;
  font-weight:500;
  opacity:.9;
  position:relative;
  transition:opacity 0.2s ease;
}
.nav-links a:hover { opacity:1; }
.nav-links a.active::after {
  content:"";
  position:absolute;
  bottom:-6px; left:0; right:0;
  height:3px; border-radius:2px;
  background:var(--primary);
}

.actions-nav { display:flex; align-items:center; gap:12px; }
.mode-toggle {
  font-size:1.3rem; background:transparent; border:none;
  cursor:pointer; line-height:1;
  transition:transform 0.2s ease;
}
.mode-toggle:hover { transform:rotate(20deg); }
.burger { display:none; cursor:pointer; font-size:24px; }

@media (max-width:768px) {
  .nav-links {
    flex-direction:column;
    position:absolute;
    top:62px; right:0;
    background:var(--panel);
    border:1px solid var(--border);
    border-radius:10px;
    padding:14px;
    min-width:220px;
    box-shadow:0 10px 30px rgba(0,0,0,.08);
    overflow:hidden;
    max-height:0; opacity:0;
  }
  .nav-links.active { max-height:500px; opacity:1; }
  .burger { display:block; }
}

body.dark footer {
  color: #adb5bd;
}

/* ==============================
   Hero
============================== */
.hero {
  text-align: center;
  padding: 72px 20px 80px;
  background: radial-gradient(1200px 400px at 50% -10%, rgba(13,110,253,.18), transparent 60%),
              linear-gradient(180deg, var(--muted), transparent 60%);
}

.hero .avatar {
  width: 180px;
  height: 180px;
  max-width: 40vw;
  border-radius: 50%;
  object-fit: cover;
  margin: 0 auto 18px;
  box-shadow: 0 8px 24px rgba(0,0,0,.12);
}

.hero-name {
  font-size: 2.6rem;
  font-weight: 700;
  margin: 12px 0;
}

.subtitle {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 1.2rem;
  font-weight: 500;
  color: var(--text);
  min-height: 40px;      /* مساحة مرنة بدل height ثابت */
  margin-top: 10px;
  text-align: center;
}

#typed {
  display: inline-block;
  white-space: nowrap;    /* يمنع الكسر */
}




.typed-cursor {
  display: inline-block;
  margin-left: 2px;
  color: var(--primary);
  font-weight: bold;
  animation: blink 0.7s infinite;
}

@keyframes blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}

/* ==============================
   Buttons
============================== */
.btn { display:inline-flex; align-items:center; gap:6px; padding:10px 18px; border-radius:999px; font-weight:600; cursor:pointer; user-select:none; min-height:44px; transition:transform .15s ease, box-shadow .2s ease, background .25s ease, color .25s ease; }
.btn:hover { transform:translateY(-2px); box-shadow:0 8px 22px rgba(0,0,0,.10) }
.btn:active { transform:translateY(0) }
.btn-primary { background:var(--primary); color:#fff; border:none }
.btn-primary:hover { background:var(--primary-600) }
.btn-outline { border:1px solid var(--primary); color:var(--primary); background:transparent }
.btn-outline:hover { background:var(--primary); color:#fff }
.btn-secondary { background:var(--secondary); color:#fff; border:none }
.btn-gradient { background:linear-gradient(45deg,#0d6efd,#6610f2); color:#fff; border:none }
.btn-whatsapp { background:#25D366; color:#fff; border:none }
.btn-sm { padding:6px 14px; font-size:0.85rem; border-radius:8px }
.btn-text { padding:8px 16px; border-radius:999px; font-weight:600; font-size:0.9rem; background:var(--border); color:var(--secondary); }
.btn-group { display:flex; justify-content:center; gap:12px; margin-top:12px; flex-wrap:wrap; }

.btn-request {
  background: var(--border);
  color: var(--text);
  border: none;
  padding: 10px 16px;
  border-radius: 8px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.2s ease;
}

/* الرسالة تظهر كبادج صغير أنيق بجانب الزر */
.request-msg {
  display: inline-flex;          /* يضمن المحاذاة في خط واحد */
  align-items: center;           /* يوسّط النص عمودياً */
  justify-content: center;       /* يوسّط النص أفقياً */
  margin-left: 10px;             /* مسافة عن الزر */
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--secondary);
  background: var(--muted);
  padding: 4px 12px;
  border-radius: 20px;           /* يخليها على شكل badge */
  box-shadow: 0 2px 6px rgba(0,0,0,0.08);
  animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
  from { opacity:0; transform:translateY(-4px); }
  to   { opacity:1; transform:translateY(0); }
}

/* تأكد أن الزر + الرسالة في خط واحد */
.btn-group.cert-buttons {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;  /* لو الشاشة صغيرة ينزلوا تحت بعض بشكل منظم */
}


.btn-group.cert-buttons {
  justify-content: center;
}

/* تأكيد أولوية تصميم أزرار الشهادات */
.btn-group .btn-cert {
  font-size: 0.8rem !important;
  padding: 6px 12px !important;
  border-radius: 20px !important;
  min-height: auto !important; /* يلغي 44px من btn الأساسي */
}

/* ==============================
   Cards / Grids
============================== */
.card { background:var(--panel); padding:20px; border-radius:14px; box-shadow:0 4px 16px rgba(0,0,0,.06); }
.grid-2 { display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:22px }
.grid-3 { display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:22px }
.edu-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:22px }

/* ==============================
   Skills
============================== */
.skill { margin-bottom:16px }
.skill-name { display:flex; justify-content:space-between; font-weight:600; margin-bottom:8px; }
.skill-name i { color:var(--primary); margin-right:6px; font-size:0.95rem; }
.progress { background:var(--border); border-radius:999px; overflow:hidden; height:8px }
.progress-bar { background:linear-gradient(90deg,#0d6efd,#20c997); width:0; height:100%; transition:width 1.5s ease; }

/* ==============================
   Experience Timeline
============================== */
.timeline { position:relative; display:grid; gap:40px; margin-top:40px; padding-left:40px; }
.timeline::before { content:""; position:absolute; left:20px; top:0; bottom:0; width:3px; background:var(--border); }
.timeline-item { position:relative; margin-left:30px; padding:20px; border-radius:12px; background:var(--panel); box-shadow:0 6px 18px rgba(0,0,0,.04); border:1px solid var(--border); }
.timeline-item::before { content:"💼"; position:absolute; left:-38px; top:20px; font-size:20px; }
#education .timeline-item.education::before { content:"🎓"; }
#education .timeline-item.membership::before { content:"🪪"; }
.timeline-item h3 { display:flex; align-items:center; flex-wrap:wrap; gap:8px; margin-bottom:8px; font-size:1.2rem; font-weight:600; }
.timeline-item strong { font-size:1rem; font-weight:600; color:var(--text); }
.timeline-item p, .timeline-item ul li { font-size:0.9rem; line-height:1.5; color:var(--secondary); }
.timeline .btn-group { justify-content:flex-start; }

@media (max-width: 600px) {
  .hero .avatar {
    width: 120px;
    height: 120px;
  }
  .hero-name {
    font-size: 1.8rem;
  }
  .timeline {
    padding-left: 20px;
  }
  .timeline-item {
    margin-left: 10px;
    padding: 14px;
  }
}

/* ==============================
   Education & Membership
============================== */
.edu-card { display:flex; justify-content:space-between; gap:16px; background:var(--panel); border:1px solid var(--border); border-radius:12px; padding:18px; box-shadow:0 4px 12px rgba(0,0,0,.05); align-items:flex-start; transition:transform 0.2s ease, box-shadow 0.2s ease; }
.edu-card:hover { transform:translateY(-3px); box-shadow:0 8px 18px rgba(0,0,0,.1); }
.edu-meta { flex:1; }
.edu-logo { width:84px; height:84px; object-fit:contain; border-radius:8px; background:#fff; padding:4px; border:1px solid var(--border); }

.edu-detail {
  font-size: 0.85rem;   /* ⬅️ أصغر من النص العادي */
  color: var(--secondary);
  margin-top: 4px;
  line-height: 1.4;
}

.edu-meta ul li {
  font-size: 0.85rem;   /* ⬅️ أصغر من العادي */
  line-height: 1.5;     /* تباعد مريح */
  color: var(--secondary);
}

/* ==============================
   Tags
============================== */
.tag { display:inline-block; padding:4px 10px; border-radius:20px; font-size:0.8rem; font-weight:500; background:var(--muted); color:var(--text); border:1px solid var(--border); margin:2px; white-space:nowrap; }
.tag.network { background:#e7f1ff; color:#0d6efd; }
.tag.systems { background:#f3e8ff; color:#6610f2; }
.tag.backup { background:#e8fff3; color:#198754; }
.tag.cyber { background:#fff3e8; color:#fd7e14; }
.tag.infra { background:#f0f9ff; color:#0dcaf0; }
.tag.domain { background:#f9e8ff; color:#d63384; }
.tag.support { background:#eaf7ff; color:#20c997; }
.tag.monitor { background:#fff5e6; color:#ffc107; }
.tag.erp { background:#e6f9f0; color:#0dcaf0; }
.tag.tools { background:#f3f3f3; color:#6c757d; }
.tag.category { font-weight:600; }

/* ==============================
   Certifications
============================== */
.certs-tabs { display:flex; gap:12px; justify-content:center; margin-bottom:28px; flex-wrap:wrap; }
.certs-tab { padding:10px 18px; border-radius:999px; background:var(--muted); font-weight:600; font-size:0.95rem; color:var(--text); cursor:pointer; border:1px solid var(--border); transition:all .3s ease; }
.certs-tab:hover { background:var(--border); }
.certs-tab.active { background:var(--primary); color:#fff; border-color:var(--primary); }
.certs-tab .count { font-weight:400; font-size:0.85rem; opacity:0.8; }
.certs-panel { display:none; }
.certs-panel.active { display:block; }
.certs-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:20px; }
.cert { background:var(--panel); padding:20px; border-radius:14px; text-align:center; border:1px solid var(--border); display:flex; flex-direction:column; justify-content:space-between; min-height:360px; box-shadow:0 4px 12px rgba(0,0,0,.06); transition:transform .25s ease, box-shadow .25s ease; }
.cert:hover { transform:translateY(-5px); box-shadow:0 10px 24px rgba(0,0,0,.1); }
.cert-badge { font-size:32px; margin-bottom:12px; }
.cert-body h3 { font-size:1.1rem; font-weight:600; margin-bottom:6px; color:var(--text); }
.cert-sub { font-size:0.9rem; font-weight:500; color:var(--secondary); margin:4px 0; }
.issuer { font-size:0.85rem; color:var(--secondary); margin-bottom:14px; }
.btn-certificate.view { display:inline-flex; justify-content:center; align-items:center; gap:6px; padding:8px 16px; border-radius:8px; font-weight:600; font-size:0.9rem; background:var(--primary); color:#fff; border:none; text-decoration:none; transition:background 0.25s ease, transform 0.2s ease; }
.btn-certificate.view:hover { background:var(--primary-600); transform:translateY(-2px); }

/* ==============================
   Projects
============================== */
.project-card { background:var(--panel); border:1px solid var(--border); padding:16px; border-radius:12px; box-shadow:0 6px 16px rgba(0,0,0,.05); text-align:center; display:flex; flex-direction:column; justify-content:space-between; min-height:360px; transition:transform .25s ease, box-shadow .25s ease; }
.project-card:hover { transform:translateY(-6px); box-shadow:0 12px 28px rgba(0,0,0,.12); }
.project-card img { flex-shrink:0; width:100%; height:180px; object-fit:cover; border-radius:10px; margin-bottom:12px; transition:transform .3s ease; }
.project-card:hover img { transform:scale(1.05); }
.project-card h3 { margin:10px 0 6px; flex-grow:0; font-size:1.2rem; font-weight:600; display:flex; align-items:center; justify-content:center; gap:8px; color:var(--text); }
.project-card h3 i { color:var(--primary); font-size:1.1rem; }
.project-desc { font-size:0.9rem; color:var(--secondary); margin-bottom:12px; line-height:1.5; text-align:center; }
.project-card button { margin-top:auto; align-self:center; }

/* ==============================
   Modals
============================== */
.modal {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.6);
  align-items: center;
  justify-content: center;
  padding: 16px;
  z-index: 1100;
  transition: opacity 0.3s ease;
}

/* حالة الفتح */
.modal.open {
  display: flex;
  animation: fadeIn 0.3s ease;
}

.modal-content {
  background: var(--panel);
  max-width: 780px;
  width: 100%;
  border-radius: 14px;
  padding: 24px;
  position: relative;
  max-height: 85vh;
  overflow: auto;
  border: 1px solid var(--border);
  box-shadow: 0 6px 18px rgba(0,0,0,.08);
  animation: slideUp 0.3s ease;
}

.modal .close {
  position: absolute;
  top: 10px;
  right: 12px;
  font-size: 24px;
  cursor: pointer;
  color: var(--secondary);
  transition: color 0.2s ease;
}
.modal .close:hover { color: var(--primary); }

.modal h2 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
}
.modal h2 i { color: var(--primary); }

/* Tech Logos داخل المودال */
.tech-logos {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 20px;
  align-items: center;
}
.tech-logos img {
  height: 34px;
  max-width: 100px;
  object-fit: contain;
  filter: grayscale(40%);
  opacity: 0.85;
  transition: filter 0.3s ease, transform 0.3s ease, opacity 0.3s ease;
  background: #fff;
  padding: 4px 6px;
  border-radius: 6px;
  border: 1px solid var(--border);
  box-shadow: 0 2px 6px rgba(0,0,0,0.05);
}
.tech-logos img:hover {
  filter: grayscale(0%);
  opacity: 1;
  transform: scale(1.05);
  box-shadow: 0 4px 12px rgba(0,0,0,0.12);
}

/* Scrollbar أنعم */
.modal-content::-webkit-scrollbar {
  width: 6px;
}
.modal-content::-webkit-scrollbar-thumb {
  background: var(--border);
  border-radius: 10px;
}

/* Animations */
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes slideUp {
  from { transform: translateY(20px); opacity: 0; }
  to   { transform: translateY(0); opacity: 1; }
}


/* ==============================
   Tags Section
============================== */
.tags-section { display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:24px; margin-top:30px; }
.tags-card { background:var(--panel); border:1px solid var(--border); border-radius:14px; padding:20px; box-shadow:0 4px 12px rgba(0,0,0,.05); transition:transform 0.2s ease, box-shadow 0.2s ease; }
.tags-card:hover { transform:translateY(-3px); box-shadow:0 8px 18px rgba(0,0,0,.1); }
.tags-card h3 { display:flex; align-items:center; gap:8px; font-size:1.2rem; margin-bottom:14px; }
.tags-group { display:flex; flex-wrap:wrap; gap:8px; }

/* ==============================
   Contact
============================== */
.contact-head { text-align:center; margin:-4px auto 26px; color:var(--secondary); font-size:15px; }
.contact-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:20px; }
@media (max-width:768px) { .contact-grid { grid-template-columns:1fr; } }
.contact-card { display:flex; align-items:center; justify-content:space-between; gap:16px; background:var(--panel); border:1px solid var(--border); border-radius:14px; padding:16px 20px; box-shadow:0 4px 12px rgba(0,0,0,.05); transition:transform 0.2s ease, box-shadow 0.2s ease; }
.contact-card:hover { transform:translateY(-3px); box-shadow:0 6px 18px rgba(0,0,0,.1); }
.contact-card .big-icon { flex:0 0 44px; height:44px; width:44px; display:flex; align-items:center; justify-content:center; border-radius:12px; background:linear-gradient(180deg,#eef3ff,#e9eefc); color:#2b5fd6; font-size:18px; }
.contact-meta { flex:1; display:flex; flex-direction:column; justify-content:center; min-width:0; line-height:1.4; }
.contact-meta strong { font-size:0.95rem; margin-bottom:4px; color:var(--text); }
.contact-meta a, .contact-meta span { color:var(--text); font-size:0.85rem; text-decoration:none; word-break:break-word; opacity:.9; }
.contact-meta a:hover { opacity:1; text-decoration:underline; }
.contact-actions { display:flex; flex-direction:column; gap:6px; }
.contact-actions button, .contact-actions a { font-size:0.75rem; padding:4px 10px; border-radius:6px; border:1px solid var(--border); background:var(--light); color:var(--text); cursor:pointer; transition:background 0.2s ease, color 0.2s ease; }
.contact-actions button:hover, .contact-actions a:hover { background:var(--primary); color:#fff; text-decoration:none; }
.copied-msg { font-size:0.75rem; margin-top:6px; color:var(--primary); }

/* ==============================
   Footer
============================== */
footer { text-align:center; padding:12px; font-size:14px; background:var(--panel); border-top:1px solid var(--border); }
footer p { margin:2px 0; line-height:1.4 }
footer .quote { font-style:italic; color:var(--secondary); font-size:12.5px }

/* ==============================
   Back-to-Top Button
============================== */
#backToTop { position:fixed; bottom:20px; right:20px; width:44px; height:44px; border-radius:50%; background:var(--primary); color:#fff; font-size:18px; border:none; cursor:pointer; display:none; align-items:center; justify-content:center; box-shadow:0 6px 16px rgba(0,0,0,.2); transition:opacity .3s ease, transform .2s ease; z-index:1200; }
#backToTop:hover { background:var(--primary-600); transform:translateY(-3px); }
#backToTop:active { transform:translateY(0); }

/* ==============================
   Toast
============================== */
#copyToast { position:fixed; bottom:30px; left:50%; transform:translateX(-50%); background:var(--primary); color:#fff; padding:10px 20px; border-radius:8px; font-size:0.85rem; box-shadow:0 4px 12px rgba(0,0,0,.2); opacity:0; pointer-events:none; transition:opacity 0.3s ease, bottom 0.3s ease; z-index:9999; }
#copyToast.show { opacity:1; bottom:50px; }

/* ==============================
   About Me
============================== */
.about-photo { display:flex; justify-content:center; align-items:center; }
.about-photo .about-img { width:100%; max-width:520px; height:auto; border-radius:16px; border:5px solid var(--border); background:#fff; padding:8px; box-shadow:0 6px 18px rgba(0,0,0,0.15); object-fit:cover; }
@media (min-width:992px) { .about-photo .about-img { max-width:560px; } }
.about-content .lead { font-size:1rem; line-height:1.7; margin-bottom:20px; }
.about-facts { display:flex; flex-wrap:wrap; gap:8px; margin:16px 0; }
.about-facts .fact { display:inline-flex; align-items:center; gap:6px; font-size:0.85rem; font-weight:500; padding:6px 12px; border-radius:20px; white-space:nowrap; transition:transform 0.2s ease, box-shadow 0.2s ease; }
.fact.network { background:#e7f1ff; color:#0d6efd; }
.fact.systems { background:#f3e8ff; color:#6610f2; }
.fact.backup { background:#e8fff3; color:#198754; }
.fact.domain { background:#f0f9ff; color:#0dcaf0; }
.fact.infra { background:#fff3e8; color:#fd7e14; }
.fact.cyber { background:#f9e8ff; color:#d63384; }
.about-facts .fact:hover { transform:translateY(-2px); box-shadow:0 4px 10px rgba(0,0,0,0.08); }
.about-tags { margin:20px 0; text-align:center; }

/* ==============================
   Appreciation Letter & Experience Certificate
============================== */
/* زر الشهادات (تصغير الحجم + شكل أنيق) */
.btn-cert, 
.btn-cert.btn-appreciation, 
.btn-cert.btn-experience {
  padding: 6px 12px !important;
  font-size: 0.8rem !important;
  min-height: auto !important;
  border-radius: 20px !important;
}

.btn-cert {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;       /* حجم أصغر */
  font-size: 0.8rem;       /* خط أصغر */
  font-weight: 500;
  border-radius: 20px;     /* دائري أكثر */
  cursor: pointer;
  border: none;
  transition: all 0.2s ease;
}

/* زر شهادة التقدير */
.btn-appreciation {
  background: linear-gradient(45deg, #20c997, #0dcaf0);
  color: #fff;
}
.btn-appreciation:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

/* زر شهادة الخبرة */
.btn-experience {
  background: #f1f3f5;
  color: #495057;
  border: 1px solid #dee2e6;
}
.btn-experience:hover {
  background: #e9ecef;
  transform: translateY(-2px);
}