:root{
      --primary:#0c2c70;     /* blu e thellë */
      --accent:#2aa7ff;      /* blu e lehtë */
      --bg:#f6f8fc;
      --text:#0b1220;
      --muted:#6b7280;
      --radius:18px;
      --shadow:0 14px 34px rgba(2,6,23,.10);
      --maxw:1100px;
    }
    *{box-sizing:border-box}
    html,body{height:100%}
    body{
      margin:0; background:var(--bg); color:var(--text);
      font-family:Inter,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif; line-height:1.55;
    }
    a{color:var(--accent); text-decoration:none}
    a:hover{text-decoration:underline}
    .wrap{max-width:var(--maxw); margin-inline:auto; padding:0 20px}

    /* Header */
    .header{
      position:sticky; top:0; z-index:40; background:#fff;
      box-shadow:0 1px 0 #e5e7eb;
    }
    .nav{display:flex; align-items:center; justify-content:space-between; min-height:72px}
    .brand{display:flex; align-items:center; gap:12px}
    .brand-logo{
      width:42px; height:42px; border-radius:12px; background:var(--primary);
      color:#fff; font-weight:900; display:grid; place-items:center;
      box-shadow:0 6px 16px rgba(12,44,112,.3);
    }
    .brand-title{font-weight:900; letter-spacing:.3px; color:#0b1d49}
    .nav a.btn{
      display:inline-flex; align-items:center; justify-content:center; gap:8px;
      padding:.65rem 1rem; border-radius:12px; background:var(--primary); color:#fff; box-shadow:var(--shadow)
    }
    .nav a.btn:hover{filter:brightness(1.06)}

    /* Hero */
    .hero{
      color:#fff; padding:84px 0 70px;
      background:
        radial-gradient(1200px 600px at 80% -10%, rgba(42,167,255,.30), transparent 60%),
        linear-gradient(135deg, #0c2c70 0%, #17469f 55%, #2aa7ff 120%);
    }
    .hero-grid{
      display:grid; grid-template-columns:1.1fr .9fr; gap:40px; align-items:center;
    }
    .eyebrow{color:#bfe1ff; font-weight:700; letter-spacing:.14em; text-transform:uppercase}
    h1{margin:.25em 0 .3em; font-size:clamp(38px,6vw,66px); line-height:1.05; font-weight:900; letter-spacing:.4px}
    .slogan{font-size:clamp(22px,2.6vw,28px); font-weight:700; color:#e9f4ff}
    .hero p{color:#d7e8ff}
    .cta-row{display:flex; gap:10px; flex-wrap:wrap; margin-top:16px}
    .btn{
      display:inline-flex; align-items:center; justify-content:center; gap:8px;
      padding:12px 16px; border-radius:12px; border:0; cursor:pointer;
      background:#fff; color:var(--primary); font-weight:800; box-shadow:var(--shadow)
    }
    .btn.secondary{background:rgba(255,255,255,.14); color:#fff; border:1px solid rgba(255,255,255,.2)}
    .btn:focus-visible{outline:3px solid #cde6ff; outline-offset:2px}

    /* Cards / forms */
    section{padding:70px 0}
    .section-title{margin:0 0 18px; text-align:center; font-size:clamp(22px,2.6vw,32px)}
    .grid-2{display:grid; grid-template-columns:1fr 1fr; gap:22px}
    .card{
      background:#fff; border:1px solid #e9eef5; border-radius:var(--radius); padding:22px; box-shadow:var(--shadow)
    }
    .card h3{margin:0 0 10px}
    .muted{color:var(--muted)}
    form label{display:block; font-weight:600; margin:12px 0 6px}
    input, select, textarea{
      width:100%; padding:12px 14px; border:1px solid #dbe1ea; border-radius:12px; outline:none; background:#fff
    }
    textarea{min-height:120px; resize:vertical}
    form .btn-submit{
      background:var(--accent); color:#002046; margin-top:14px; width:100%; font-weight:900
    }

    /* Footer */
    footer{background:#0b1d49; color:#cfd9ff; padding:30px 0}
    .foot{display:grid; grid-template-columns:1fr auto; gap:20px; align-items:center}
    .social a{display:inline-block; margin-right:12px; color:#cfd9ff; opacity:.9}
    .social a:hover{opacity:1}

    /* Responsive */
    @media (max-width:960px){
      .hero-grid{grid-template-columns:1fr; gap:22px}
      .grid-2{grid-template-columns:1fr}
    }

  .fb-page, .fb-page iframe, .fb-page span {
    max-width: 100% !important;
  }

  /* Kandidatët */
  .kand-section{padding:70px 0}
  .kand-head{display:flex;align-items:end;justify-content:space-between;gap:16px;margin-bottom:18px}
  .kand-title{margin:0;font-size:clamp(22px,2.6vw,32px)}
  .kand-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:16px}
  .kard{
    position:relative; background:#fff; border:1px solid #e9eef5; border-radius:var(--radius);
    overflow:hidden; box-shadow:var(--shadow); cursor:pointer; transition:transform .12s ease
  }
  .kard:hover{transform:translateY(-2px)}
  .kard img{width:100%;height:180px;object-fit:cover;display:block}
  .kard-body{padding:12px 14px}
  .kard-name{font-weight:800;color:#0b1d49;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .kard-num{
    position:absolute; top:10px; left:10px; background:rgba(12,44,112,.92); color:#fff;
    font-weight:900; padding:6px 10px; border-radius:12px; font-size:14px; box-shadow:var(--shadow)
  }
  .kard-muted{color:var(--muted);font-size:13px}

		  /* Shefi i Shtabit (responsive) */
/* Shefi i Shtabit – foto katrore si te kandidatët */
#shefi-shtabit .ss-grid{
  display:grid; grid-template-columns:180px 1fr; gap:18px; align-items:start;
}
#shefi-shtabit .ss-photo-wrap{
  width:180px; height:180px; border-radius:12px; overflow:hidden;
  border:1px solid #e9eef5; box-shadow:0 4px 10px rgba(0,0,0,.05);
}
#shefi-shtabit .ss-photo{
  width:100%; height:100%; display:block;
  object-fit:cover;               /* mbush kornizën pa u shtrembëruar */
  object-position:center 30%;     /* lëviz fokusin pak nga lart (ndrysho sipas fotos) */
}

/* Responsive */
@media (max-width:900px){
  #shefi-shtabit .ss-grid{ grid-template-columns:1fr; }
  #shefi-shtabit .ss-photo-wrap{ width:220px; height:220px; margin:0 auto; }
}
@media (max-width:600px){
  #shefi-shtabit .ss-photo-wrap{ width:180px; height:180px; }
}

	  /* === MODAL (fixed, mobile-friendly, scroll enabled) === */
.modal-backdrop{
  position:fixed;
  inset:0;
  background:rgba(2,6,23,.55);
  display:none;                      /* fshihet derisa të hapet */
  align-items:center;
  justify-content:center;
  z-index:9999;
  padding:20px;                      /* hapësirë në anë në ekrane të vegjël */
  overflow-y:auto;                   /* LEJO SCROLL brenda overlay-it */
  -webkit-overflow-scrolling:touch;  /* smooth në iOS */
}
.modal-backdrop.show{ display:flex; } /* shto/hiq këtë klasë me JS kur hapet/mbyllet */

/* Blloko scroll-in e faqes kur modali është hapur */
body.no-scroll{
  overflow:hidden;
  height:100%;
}

/* Kutia e modalit */
.modal{
  width:min(860px,100%);
  background:#fff;
  border-radius:20px;
  box-shadow:0 30px 70px rgba(2,6,23,.35);
  overflow:hidden;                   /* fsheh rrjedhjen e brendshme të skajeve */
  margin:auto;                       /* qendro në ekran */
  max-height:90vh;                   /* MOS e kalon lartësinë e ekranit */
  display:flex;
  flex-direction:column;             /* që trupi të mund të scrollojë */
}

/* Koka */
.modal-head{
  display:flex; justify-content:space-between; align-items:center;
  padding:16px 18px;
  border-bottom:1px solid #eef2f7;
}
.modal-title{ margin:0; font-size:22px; font-weight:900; color:#0b1d49; }

/* Butoni i mbylljes */
.modal-close{
  background:#f2f5fb;
  border:0; border-radius:10px;
  padding:8px 10px; cursor:pointer;
  font-weight:800; color:#0b1d49;
}

/* Trupi – bëje scroll kur ka shumë përmbajtje */
.modal-body{
  padding:18px;
  overflow:auto;                     /* SCROLL i trupit */
}

/* Layout default (desktop) */
.modal-body{ display:grid; grid-template-columns:280px 1fr; gap:20px; }
.modal-body img{
  width:100%; height:320px; object-fit:cover;
  border-radius:16px; border:1px solid #e9eef5;
}
.modal-meta{ display:grid; gap:8px; }

/* Badge opsional (ruaj ngjyrat e tua) */
.badge{
  display:inline-block;
  background:var(--accent, #e7f0ff);
  color:#002046;
  padding:6px 10px; border-radius:999px;
  font-weight:900; font-size:12px;
}

/* Mobile-first tweaks */
@media (max-width: 700px){
  .modal{
    width:100%;
    border-radius:16px;
    max-height:92vh;                 /* pak më i lartë në mobile */
  }
  .modal-body{
    display:block;                   /* heq grid-in në mobile */
  }
  .modal-body img{
    height:auto; max-height:40vh;    /* mos zë shumë hapësirë */
    margin-bottom:12px;
  }
}

		  .modal-backdrop{opacity:0; transition:opacity .2s ease;}
.modal-backdrop.show{opacity:1;}