*{box-sizing:border-box}
html,body{margin:0;padding:0}
:root{
  --el-red:#ee2e2e; /* EL-PLUS red */
}
body{
  font-family: Arial, Helvetica, sans-serif;
  color:#111;
  background:#fafafa;
}
a{color:inherit;text-decoration:none}
code{background:#f1f1f1;padding:2px 6px;border-radius:6px}
.muted{opacity:.75}
.small{font-size:13px}
.no-scroll{overflow:hidden}

.topbar{
  position:sticky; top:0; z-index:10;
  display:flex; align-items:center; justify-content:space-between;
  padding:12px 18px; background:#fff; border-bottom:1px solid #eee;
}
.brand{display:flex; align-items:center; gap:14px}
.logo{height:44px}
.nav a{margin:0 10px; font-weight:700; opacity:.86}
.nav a:hover{opacity:1}
.adminlink{padding:8px 12px;border:1px solid #ddd;border-radius:10px;background:#fff}

.lang a{padding:6px 10px;border-radius:10px;border:1px solid #ddd;margin-left:6px;background:#fff}
.lang a.active{background:#111;color:#fff;border-color:#111}

.hero{
  min-height:78vh;
  background-size:cover;
  background-position:center;
  position:relative;
}
.overlay{
  min-height:78vh;
  padding:90px 18px;
  background:rgba(0,0,0,.55);
  color:#fff;
  display:flex; justify-content:center;
}
.hero-inner{
  width:100%;
  max-width:1100px;
}
.hero-inner h1{font-size:44px; margin:0 0 12px}
.hero-inner p{font-size:18px; line-height:1.65; max-width:780px; margin:0 0 18px}

.section{padding:64px 18px; max-width:1100px; margin:0 auto}
.section-head{
  display:flex;align-items:flex-end;justify-content:space-between;
  gap:14px;margin-bottom:18px
}
.section h2{font-size:32px; margin:0}

.card{
  background:#fff;
  border:1px solid #eee;
  border-radius:18px;
  padding:18px;
  box-shadow:0 8px 24px rgba(0,0,0,.05);
}

.btn{
  display:inline-flex; align-items:center; justify-content:center;
  gap:8px;
  padding:10px 14px;
  border-radius:12px;
  border:1px solid #111;
  background:#111;
  color:#fff;
  cursor:pointer;
  font-weight:800;
}
.btn:hover{opacity:.92}
.btn:disabled{opacity:.4;cursor:not-allowed}
.btn-ghost{
  background:transparent;
  color:#fff;
  border-color:rgba(255,255,255,.55);
}
.btn-ghost:hover{border-color:#fff}
.btn-small{padding:9px 12px;border-radius:12px;font-size:14px}
.hero-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:10px}

.input{
  width:100%;
  padding:12px;
  margin:8px 0;
  border:1px solid #ddd;
  border-radius:12px;
  background:#fff;
}
textarea.input{resize:vertical}

.link{font-weight:800;text-decoration:underline;text-underline-offset:3px}

.divider{height:1px;background:#eee;margin:14px 0}

/* =========================
   SERVICES (Outline Red)
========================= */
.service-grid{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:12px;
  margin-bottom:14px;
}
.service-card{
  background:#fff;
  border:2px solid var(--el-red);
  border-radius:18px;
  padding:16px;
  box-shadow:0 10px 22px rgba(0,0,0,.05);
  transition: all .25s ease;
}
.service-card .icon{
  width:44px;height:44px;
  border-radius:14px;
  border:1px solid rgba(0,0,0,.08);
  display:flex;align-items:center;justify-content:center;
  margin-bottom:10px;
  background:#fff;
  transition: all .25s ease;
}
.service-card .icon svg{
  width:22px;height:22px;
  fill:var(--el-red);
  transition: all .25s ease;
}
.service-title{font-weight:900;margin-bottom:6px; transition:color .25s ease;}
.service-text{opacity:.8;line-height:1.55; transition:color .25s ease;}

.service-card:hover{
  background:var(--el-red);
  transform: translateY(-6px);
}
.service-card:hover .service-title,
.service-card:hover .service-text{ color:#ee2e2e; opacity:1; }
.service-card:hover .icon{ background:rgba(255,255,255,.12); border-color:rgba(255,255,255,.35); }
.service-card:hover .icon svg{ fill:#fff; }

/* =========================
   PARTNERS (Outline + Auto scroll)
========================= */
.partners-slider{
  border:1px solid rgba(0,0,0,.08);
  background:#fff;
  border-radius:18px;
  overflow:hidden;
  box-shadow:0 8px 24px rgba(0,0,0,.06);
  padding:14px 0;
}

.partners-track{
  display:flex;
  gap:18px;
  align-items:center;
  width:max-content;
  animation: partnersScroll 28s linear infinite;
}

.partners-slider:hover .partners-track{
  animation-play-state: paused;
}

.partner-item{
  width:170px;
  height:84px;
  border-radius:16px;
  border:2px solid var(--el-red);
  background:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:10px;
  flex:0 0 auto;
  text-decoration:none;
  transition: all .25s ease;
}

.partner-item img{
  max-width:100%;
  max-height:100%;
  object-fit:contain;
  display:block;
  filter: grayscale(20%);
  opacity:.95;
  transition: all .25s ease;
}

.partner-item:hover{
  background: var(--el-red);
  transform: translateY(-2px);
  box-shadow:0 10px 26px rgba(0,0,0,.10);
}
.partner-item:hover img{
  filter:none;
  opacity:1;
}

@keyframes partnersScroll{
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

@media (max-width: 600px){
  .partner-item{ width:140px; height:74px; }
  .partners-track{ animation-duration: 22s; }
}

/* =========================
   CONTACT (Red + Fix phones + hide honeypot)
========================= */
.contact-grid{
  display:grid;
  grid-template-columns:1.1fr .9fr;
  gap:14px;
}

#contact .section-head h2,
#contact h3{ color: var(--el-red); }

.contact-lines { display:flex; flex-direction:column; gap:16px; margin-top:10px; }
.contact-line  { display:flex; gap:12px; align-items:flex-start; }
.contact-line .label {
  font-size:12px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:#6b7280;
  margin-bottom:6px;
}

.ci { 
  width: 44px;
  height: 44px;
  border-radius: 14px;
  border: 1px solid rgba(0,0,0,.10);
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 44px;
  overflow: hidden;
}
.ci svg{
  width:20px;
  height:20px;
  fill: var(--el-red);
  display:block;
}

/* ✅ Numrat e telefonit një poshtë tjetrit (fix total) */
#contact .contact-line a.contact-link{
  display:block !important;
  margin-top:6px;
  white-space:nowrap;
  color: var(--el-red);
  font-weight:800;
}
#contact .contact-line a.contact-link:hover{ text-decoration:underline; }

/* Locations */
.locations{
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:12px;
  margin-top:10px;
}
.location-card{
  border:1px solid #eee;
  border-radius:16px;
  padding:14px;
  background:#fafafa;
}
.location-title{font-weight:900;margin-bottom:6px}
.location-address{opacity:.85;line-height:1.5}
.map-wrap{
  margin-top:12px;
  border-radius:14px;
  overflow:hidden;
  border:1px solid #eee;
  background:#fff;
}
.map-wrap iframe{
  width:100%;
  height:220px;
  border:0;
  display:block;
}

/* ✅ Honeypot field – fshehet komplet */
.hp{
  position:absolute !important;
  left:-9999px !important;
  top:auto !important;
  width:1px !important;
  height:1px !important;
  overflow:hidden !important;
  opacity:0 !important;
  pointer-events:none !important;
}

/* FOOTER */
.footer{
  padding:22px 18px;
  border-top:1px solid #eee;
  text-align:center;
  background:#fff;
}
.footer-inner{
  max-width:1100px;
  margin:0 auto;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
}

/* PROJECTS GRID */
.project-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:12px;
}
.project-card{
  background:#fff;
  border:1px solid #eee;
  border-radius:18px;
  overflow:hidden;
  box-shadow:0 10px 22px rgba(0,0,0,.05);
}
.project-thumb{
  position:relative;
  width:100%;
  padding:0;
  border:0;
  background:#111;
  cursor:pointer;
  display:block;
}
.project-thumb img,
.project-thumb video{
  width:100%;
  height:240px;
  object-fit:cover;
  display:block;
}
.project-thumb-empty{
  height:240px;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#fff;
  opacity:.8;
}
.project-overlay{
  position:absolute; inset:0;
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:10px;
  padding:12px;
  background:linear-gradient(to top, rgba(0,0,0,.72), rgba(0,0,0,0));
  color:#fff;
}
.project-title{font-weight:900}
.project-year{opacity:.85;font-size:13px}
.project-open{
  background:rgba(255,255,255,.14);
  border:1px solid rgba(255,255,255,.22);
  padding:8px 10px;
  border-radius:12px;
  font-weight:800;
}
.project-video-badge{
  position:absolute;
  top:12px; left:12px;
  background:rgba(0,0,0,.45);
  border:1px solid rgba(255,255,255,.25);
  color:#fff;
  padding:6px 10px;
  border-radius:12px;
  font-weight:900;
  font-size:12px;
}
.project-info{padding:14px}
.project-title-line{display:flex;justify-content:space-between;gap:10px;align-items:baseline}
.project-desc{margin-top:6px;opacity:.9;line-height:1.55}

/* PROJECT MODAL */
.proj-modal{
  position:fixed; inset:0;
  background:rgba(0,0,0,.85);
  display:none;
  align-items:center;
  justify-content:center;
  padding:18px;
  z-index:9999;
}
.proj-modal.open{display:flex}
.proj-modal-inner{
  width:min(1100px, 96vw);
  background:#0f0f0f;
  border:1px solid rgba(255,255,255,.15);
  border-radius:18px;
  overflow:hidden;
  box-shadow:0 20px 70px rgba(0,0,0,.6);
  position:relative;
}
.proj-close{
  position:absolute;
  top:12px; right:12px;
  width:44px;height:44px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.25);
  background:rgba(0,0,0,.25);
  color:#fff;
  font-size:28px;
  cursor:pointer;
  z-index:10000;
}
.proj-head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  padding:14px 16px;
  background:rgba(255,255,255,.04);
  color:#fff;
}
.proj-title{font-weight:900;font-size:16px}
.proj-sub{font-size:13px}
.proj-nav{display:flex;gap:8px}
.proj-stage{
  background:#000;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:10px;
  touch-action: pan-y;
}
.proj-media{
  max-width:100%;
  max-height:70vh;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.18);
  background:#111;
}
.proj-caption{
  padding:12px 16px;
  color:#fff;
  opacity:.9;
  font-size:14px;
  min-height:20px;
}

/* Responsive */
@media (max-width:1100px){
  .service-grid{grid-template-columns:repeat(2, 1fr)}
}
@media (max-width:980px){
  .contact-grid{grid-template-columns:1fr}
  .locations{grid-template-columns:1fr}
  .project-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:900px){
  .hero-inner h1{font-size:36px}
}
@media (max-width:560px){
  .nav{display:none}
  .overlay{padding:72px 16px}
  .service-grid{grid-template-columns:1fr}
  .project-grid{grid-template-columns:1fr}
}
/* Hover: tekstet e bardha -> të kuqe (EL-PLUS) */
.hero-inner:hover h1,
.hero-inner:hover p{
  color: var(--el-red) !important;
}
.hero-inner h1,
.hero-inner p{
  transition: color .25s ease;
}

.hero:hover .hero-inner h1,
.hero:hover .hero-inner p{
  color: var(--el-red) !important;
}
.hero-badges .badge{
  font-weight: 600;
  letter-spacing: .02em;
}