/* ---------- Bardhi Wellness Style  ---------- */
:root{
  --brand:#006039; 
  --brand-600:#004d2e; 
  --brand-700:#003d25;
  --accent:#22c55e; 
  --ink:#0f172a; 
  --ink-700:#334155;
  --muted:#64748b; 
  --surface:#ffffff; 
  --surface-2:#f8fafc;
  --ring: rgba(0,96,57,.35); 
  --nav-h:64px;
}

/* No horizontal scroll */
html,body{overflow-x:hidden}

/* Jep hapësirë nën navbar që të mos fshihet përmbajtja */
body{ padding-top: var(--nav-h,64px); }
 

/* ===== NAVBAR ===== */
.main-nav{
  height: var(--nav-h);
  backdrop-filter: saturate(140%) blur(6px);
  -webkit-backdrop-filter: saturate(140%) blur(6px);
  background: color-mix(in srgb, var(--surface) 88%, rgba(255,255,255,.8));
  border-bottom: 1px solid rgba(15,23,42,.06);
}
.main-nav .navbar-brand{ color:var(--ink); font-weight:800; letter-spacing:.2px; }
.main-nav .brand-logo{ height:28px; width:auto; }
.main-nav .nav-link{
  color: var(--ink-700);
  font-weight:600;
  padding: .5rem .75rem;
  border-radius: .75rem;
  transition: background-color .18s ease, color .18s ease, transform .18s ease;
}
.main-nav .nav-link:hover{ background: rgba(0,96,57,.06); color:var(--brand-700); transform: translateY(-1px); }
.main-nav .nav-link.active,
.main-nav .nav-link[aria-current="page"]{
  color: var(--brand-700);
  background: rgba(0,96,57,.12);
}

/* Toggler icon (custom color) */
.navbar-toggler{
  border-color: rgba(15,23,42,.15);
  border-radius: 12px;
  padding: .4rem .55rem;
}
.navbar-toggler-icon{
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(15,23,42,0.9)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

/* ===== OFFCANVAS FULLSCREEN ===== */
#mobileNav.fs-overlay{
  width:100vw!important; max-width:100vw!important; height:100dvh;
  inset:0 auto 0 0; border:0; box-shadow:none;
  background: color-mix(in srgb, var(--surface) 86%, rgba(255,255,255,.85));
  backdrop-filter: blur(22px) saturate(140%);
  -webkit-backdrop-filter: blur(22px) saturate(140%);
  display:flex; flex-direction:column;
  overflow: hidden; /* scroll vetëm brenda body-it */
}

/* Header */
#mobileNav .offcanvas-header{
  position: sticky; top: 0; z-index: 3;
  padding: 16px clamp(16px, 4vw, 24px);
  background: linear-gradient(180deg, color-mix(in srgb, var(--brand) 6%, transparent), transparent 70%);
  border-bottom: 1px solid rgba(15,23,42,.06);
  padding-top: calc(env(safe-area-inset-top) + 12px);
}
#mobileNav .offcanvas-logo{ height:36px; width:auto; }
.btn-ghost{ border:1px solid rgba(15,23,42,.12); background:transparent; }
.btn-ghost:hover{ background: rgba(15,23,42,.06); }

/* Body scroll */
#mobileNav .offcanvas-body{
  flex:1 1 auto;
  overflow:auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  padding: clamp(14px, 3.6vw, 24px);
  padding-bottom: calc(env(safe-area-inset-bottom) + 24px);
}

/* Lista e linkëve (cards) */
.nav-stack{ display:flex; flex-direction:column; gap:10px; }
.stack-item{
  display:flex; align-items:center; gap:12px;
  padding: 16px; border-radius: 16px;
  background: var(--surface);
  border: 1px solid rgba(15,23,42,.06);
  text-decoration:none; color: var(--ink);
  transition: background .18s ease, border-color .18s ease, transform .18s ease;
}
.stack-item:hover{ background: color-mix(in srgb, var(--brand) 6%, var(--surface)); transform: translateX(2px); }
.stack-item i:first-child{
  font-size:1.2rem; color: var(--brand);
  width: 36px; height: 36px; border-radius: 10px;
  display:flex; align-items:center; justify-content:center;
  background: color-mix(in srgb, var(--brand) 12%, transparent);
}
.stack-item .label{ font-weight: 700; }
.soft-sep{ height: 1px; margin: 12px 0 18px; background: rgba(15,23,42,.08); }

/* Footer */
.menu-footer{
  display:flex; align-items:center; justify-content:space-between;
  gap:12px; margin-top: 18px; padding-top: 14px;
  border-top:1px solid rgba(15,23,42,.06);
  position: sticky; bottom: 0;
  background: linear-gradient(180deg, rgba(255,255,255,0), rgba(255,255,255,.92) 40%);
  backdrop-filter: blur(6px);
}
.menu-footer .social{
  width:38px; height:38px; border-radius:12px;
  display:flex; align-items:center; justify-content:center;
  background: var(--surface);
  border: 1px solid rgba(15,23,42,.06);
  color: var(--ink);
  text-decoration:none;
  transition: background .18s ease, transform .18s ease, border-color .18s ease;
}
.menu-footer .social:hover{
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--brand) 20%, rgba(15,23,42,.12));
}

/* Backdrop */
.offcanvas-backdrop.show{
  background: rgba(15,23,42,.55);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}

/* Animime */
#mobileNav.fs-overlay.offcanvas-end{ transform: translateX(100%); }
#mobileNav.fs-overlay.show:not(.hiding){
  transform: translateX(0);
  transition: transform .32s cubic-bezier(.22,.61,.36,1);
}
#mobileNav.fs-overlay.hiding{
  transform: translateX(100%);
  transition: transform .26s cubic-bezier(.4,0,.2,1);
}
 
/* ==================== OFFCANVAS HEADER ALIGN ==================== */
#mobileNav .offcanvas-header{
  display: flex;
  justify-content: space-between;  /* brand majtas, X djathtas */
  align-items: center;
  gap: 0;
}

/* Grupi i logos */
#mobileNav .offcanvas-header .d-flex.align-items-center.gap-2{
  flex-shrink: 0;
  min-width: 0;
}

#mobileNav .offcanvas-logo{
  height: 36px;
  width: auto;
  border-radius: 50%;
  object-fit: contain;
}

/* Butoni “X” */
#mobileNav .offcanvas-header .btn-ghost{
  margin-left: auto;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  color: var(--ink);
  border: 1px solid rgba(15,23,42,.12);
  background: transparent;
  transition: background .18s ease, transform .18s ease;
}
#mobileNav .offcanvas-header .btn-ghost:hover{
  background: rgba(15,23,42,.05);
  transform: rotate(90deg);
}

/* Offcanvas si kontejner fleks me lartësi të sigurt në iOS */
#mobileNav.fs-overlay{
  height: 100svh;                /* më i saktë në iOS se 100vh */
  display: flex;
  flex-direction: column;
  overflow: hidden;              /* blloko scroll jashtë body-it */
}

/* Vetëm kjo zonë scrollon */
#mobileNav .offcanvas-body{
  flex: 1 1 auto;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  padding: clamp(14px, 3.6vw, 24px);
  padding-bottom: 18px;          /* mos u fut nën footer */
}

/* Footer qëndron jashtë scroll-it, pa sticky/overlay */
#mobileNav .menu-footer{
  border-top: 1px solid rgba(15,23,42,.06);
  padding: 12px clamp(14px, 3.6vw, 24px);
  padding-bottom: max(12px, env(safe-area-inset-bottom));
  background: color-mix(in srgb, var(--surface) 92%, rgba(255,255,255,.9));
  backdrop-filter: blur(6px);
}

/* (Opsionale) për iOS: siguro panim vertikal në zonën e scroll-it */
#mobileNav .offcanvas-body{ touch-action: pan-y; }

   
 
/* ============================================= 1- HERO ============================================= */
.hero.bg-cover {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: #fff;
  overflow: hidden;
  background-color: #000;
}

/* Foto e background-it */
.hero-bg {
  position: absolute;
  inset: 0;
  background: url('../images/hero-bardhi.jpg') center top/cover no-repeat;
  z-index: 0;
  transform: scale(1.05); /* pak zoom për efekt estetik */
  filter: brightness(0.55) contrast(1.15) saturate(1.1); /* errësim & gjallëri ngjyrash */
  will-change: transform, filter;
}

/* Gradient i butë për kontrast më të mirë të tekstit */
.hero-bg::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(0, 96, 57, 0.10) 0%,
    rgba(0, 0, 0, 0.30) 100%
  );
  z-index: 1;
}

/* Overlay shtesë (opsionale, për efekt më “depth”) */
.hero-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
}

/* Përmbajtja brenda */
.hero .container {
  position: relative;
  z-index: 3;
  max-width: 780px;
  padding: 0 1rem;
}

/* Titulli */
.hero h1 {
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: #fff;
  text-shadow: 0 4px 30px rgba(0,0,0,0.7);
}

/* Paragrafi */
.hero .lead {
  color: rgba(255,255,255,0.9);
  font-size: 1.1rem;
  text-shadow: 0 2px 20px rgba(0,0,0,0.6);
}

/* Butonat */
.hero .btn-brand {
  background: var(--brand);
  border: none;
  color: #fff;
  font-weight: 600;
  padding: 0.75rem 1.5rem;
  box-shadow: 0 4px 15px rgba(0,96,57,0.35);
  transition: all 0.3s ease;
}
.hero .btn-brand:hover {
  background: var(--brand-600);
  box-shadow: 0 6px 18px rgba(0,96,57,0.45);
}

.hero .btn-outline-light {
  border: 1px solid rgba(255,255,255,0.9);
  color: #fff;
  font-weight: 600;
  transition: all 0.3s ease;
}
.hero .btn-outline-light:hover {
  background: rgba(255,255,255,0.12);
}

/* Responsivitet */
@media (max-width: 991.98px){
  .hero { min-height: 85vh; padding-top: 5rem; }
  .hero h1 { font-size: 2rem; }
  .hero .lead { font-size: 1rem; }
}


.btn-equal {
  padding-top: 12px !important;
  padding-bottom: 12px !important;
  height: 52px !important;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ========================== HERO STATS ========================== */
.hero-stats {
  margin-top: 3rem;
}

.hero-stats .stat-card {
  text-align: center;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 1rem;
  padding: 1.5rem 1rem;
  backdrop-filter: blur(6px);
  transition: transform 0.3s ease, background 0.3s ease;
}
.hero-stats .stat-card:hover {
  transform: translateY(-5px);
  background: rgba(255, 255, 255, 0.2);
}

/* Ikonat */
.hero-stats .stat-icon {
  font-size: 2.4rem;
  line-height: 1;
  display: inline-block;
  margin-bottom: 0.3rem;
  transform: scale(1);
  transition: transform 0.3s ease, filter 0.3s ease;
}
.hero-stats .stat-card:hover .stat-icon {
  transform: scale(1.25);
  filter: drop-shadow(0 0 8px rgba(255,255,255,0.4));
}

/* Vlerat & Label-at */
.hero-stats .stat-value {
  color: #ffffff;
  position: relative;
  display: inline-block;
  overflow: hidden;
}
.hero-stats .stat-value::after {
  content: "";
  position: absolute;
  top: 0; left: -120%;
  width: 120%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.35), transparent);
  animation: shimmer 2.8s linear infinite;
}
.hero-stats .stat-label {
  color: #f8f9fa;
  letter-spacing: 0.5px;
  font-weight: 500;
}

/* Shimmer anim */
@keyframes shimmer {
  0% { left: -120%; }
  100% { left: 120%; }
}

/* Responsive ikonat më të mëdha në desktop */
@media (min-width: 768px){
  .hero-stats .stat-icon { font-size: 2.8rem; }
}

/* Për përdorues me "reduced motion" */
@media (prefers-reduced-motion: reduce){
  .hero-stats .stat-value::after { animation: none !important; }
  .hero-stats .stat-card, .hero-stats .stat-icon { transition: none !important; }
}

 /* ===== Wipe Reveal + Gradient Glow ===== */
.reveal-wipe {
  position: relative;
  display: inline-block;
  color: #fff;
  opacity: 0;
  transform: translateY(8px);
  animation: rw-fade 0.6s ease forwards 0.15s; /* dalja e tekstit */
}
.reveal-wipe::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,0.8) 50%,
    rgba(255,255,255,0) 100%
  );
  filter: blur(1px);
  transform: translateX(-105%);
  animation: rw-sweep 1.1s cubic-bezier(.22,.61,.36,1) forwards;
}

/* Animime reveal */
@keyframes rw-sweep { to { transform: translateX(105%); } }
@keyframes rw-fade  { to { opacity: 1; transform: translateY(0); } }

/* Gradient glow pas reveal-it */
.glow-gradient {
  background: linear-gradient(90deg, #ffffff 0%, #b7f5ce 50%, #ffffff 100%);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: 0 4px 25px rgba(0,0,0,0.4);
  animation: gg-move 4s ease-in-out infinite alternate;
  animation-delay: 1.2s; /* fillon pasi mbaron wipe */
}

/* Gradient që lëviz butë */
@keyframes gg-move {
  from { background-position: 0% 50%; }
  to   { background-position: 100% 50%; }
}

/* Reduktim për përdorues që nuk duan animime */
@media (prefers-reduced-motion: reduce) {
  .reveal-wipe,
  .reveal-wipe::after,
  .glow-gradient {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
  .glow-gradient {
    color: #fff !important;
    background: none !important;
    text-shadow: none !important;
  }
}


/* ===== Shimmer edhe për tekst statik (UEFA B) ===== */
/* njësoj si .stat-value, por pa u prekur nga count-up */
.hero-stats .stat-text {
  position: relative;
  display: inline-block;
  overflow: hidden;
  color: #fff;
}
.hero-stats .stat-text::after {
  content: "";
  position: absolute;
  top: 0; left: -120%;
  width: 120%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.35), transparent);
  animation: shimmer 2.8s linear infinite;
}


/* ===== HERO TITLE – Wipe Reveal + Gradient Glow (all-in-one, stable) ===== */
.hero-title{
  position: relative;
  display: inline-block;
  /* Faza 1: shfaqje e butë (fade + slide nga poshtë) */
  opacity: 0;
  transform: translateY(8px);
  animation: ht-fade .6s ease forwards .15s;
  will-change: opacity, transform;
}

/* Faza 2: gradient glow i lehtë dhe i vazhdueshëm */
.hero-title{
  background: linear-gradient(90deg, #ffffff 0%, #b7f5ce 50%, #ffffff 100%);
  background-size: 200% 100%;
  background-clip: text;
  -webkit-background-clip: text;           /* Safari/Chrome */
  color: transparent;
  -webkit-text-fill-color: transparent;     /* Safari fix që teksti të jetë i dukshëm me gradientin */
  text-shadow: 0 4px 25px rgba(0,0,0,0.35);
  animation: ht-fade .6s ease forwards .15s, ht-glow 4s ease-in-out 1.2s infinite alternate;
}

/* Shiriti i “wipe reveal” që kalon sipër tekstit në hyrje */
.hero-title::after{
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.85) 50%, rgba(255,255,255,0) 100%);
  filter: blur(1px);
  transform: translateX(-110%);
  animation: ht-wipe 1.1s cubic-bezier(.22,.61,.36,1) forwards;
}

/* Animime */
@keyframes ht-fade {
  to { opacity: 1; transform: translateY(0); }
}
@keyframes ht-wipe {
  to { transform: translateX(110%); }
}
@keyframes ht-glow {
  from { background-position: 0% 50%; }
  to   { background-position: 100% 50%; }
}

/* Reduced motion: pa animime, tekst i bardhë i pastër */
@media (prefers-reduced-motion: reduce){
  .hero-title,
  .hero-title::after{
    animation: none !important;
  }
  .hero-title{
    background: none !important;
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
    text-shadow: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}

/* ========================================= 2) PROOF ================================================= */

/* Numra të vogla sipër ikonave (1–4) */
#how .how-ico {
  position: relative;
}

#how .how-ico::after{
  content: "";
  position: absolute;
  top: -8px; left: -8px;
  width: 26px; height: 26px;
  border-radius: 50%;
  background: #fff;
  color: var(--brand, #006039);
  box-shadow: 0 6px 18px rgba(2, 6, 23, 0.12), 0 0 0 3px rgba(0,96,57,.12);
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 0.9rem;
}

/* Vendos numrat me nth-child */
#how .row .col-6:nth-child(1) .how-ico::after { content: "1"; }
#how .row .col-6:nth-child(2) .how-ico::after { content: "2"; }
#how .row .col-6:nth-child(3) .how-ico::after { content: "3"; }
#how .row .col-6:nth-child(4) .how-ico::after { content: "4"; }

/* Pak më i madh në desktop */
@media (min-width: 768px){
  #how .how-ico::after { width: 28px; height: 28px; font-size: 1rem; }
}

 
/* ============================================= 2- SI FUNKSIONON ============================================= */
#how {
  background: var(--surface-2, #f8fafc);
  position: relative;
  overflow: hidden;
}

/* Titulli & përshkrimi */
#how .section-title {
  color: var(--brand, #006039);
  font-weight: 800;
  font-size: clamp(1.8rem, 4vw, 2.4rem);
  margin-bottom: .25rem;
}
#how .section-lead {
  color: var(--muted, #64748b);
  font-size: 1rem;
  letter-spacing: .3px;
}

/* Karta */
#how .how-card {
  background: #fff;
  border-radius: 1rem;
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.06);
  padding: 2rem 1.2rem 1.6rem;
  transition: transform 0.35s ease, box-shadow 0.35s ease, background 0.35s ease;
  position: relative;
  overflow: hidden;
}

#how .how-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 12px 30px rgba(0,96,57,0.12);
  background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
}

/* Ikonat */
#how .how-ico {
  width: 70px;
  height: 70px;
  border-radius: 50%;
  margin: 0 auto 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 2rem;
  box-shadow: 0 4px 12px rgba(0, 96, 57, 0.25);
  transition: transform 0.35s ease, box-shadow 0.35s ease;
}

/* Gradient për çdo hap (si kombinim me përfitimet) */
#how .col-6:nth-child(1) .how-ico {
  background: linear-gradient(135deg, #22c55e, #15803d);
}
#how .col-6:nth-child(2) .how-ico {
  background: linear-gradient(135deg, #3b82f6, #1e40af);
}
#how .col-6:nth-child(3) .how-ico {
  background: linear-gradient(135deg, #f59e0b, #b45309);
}
#how .col-6:nth-child(4) .how-ico {
  background: linear-gradient(135deg, #ec4899, #9d174d);
}

/* Hover efekt në ikonë */
#how .how-card:hover .how-ico {
  transform: scale(1.12) rotate(4deg);
  box-shadow: 0 8px 24px rgba(0,96,57,0.35);
}

/* Teksti */
#how .how-card h6 {
  font-weight: 700;
  color: var(--ink, #0f172a);
  letter-spacing: 0.3px;
}
#how .how-card p {
  color: var(--muted, #64748b);
  font-size: 0.9rem;
  margin-bottom: 0;
}

/* Efekt "shine" i lehtë */
#how .how-card::after {
  content: "";
  position: absolute;
  top: 0; left: -120%;
  width: 120%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.25), transparent);
  transition: opacity .3s ease;
  opacity: 0;
}
#how .how-card:hover::after {
  animation: shine 1.2s linear;
  opacity: 1;
}

/* Badge me numra për rendin e hapave */
#how .how-ico {
  position: relative;
}
#how .how-ico::after {
  content: "";
  position: absolute;
  top: -8px; left: -8px;
  width: 26px; height: 26px;
  border-radius: 50%;
  background: #fff;
  color: var(--brand, #006039);
  box-shadow: 0 6px 18px rgba(2, 6, 23, 0.12), 0 0 0 3px rgba(0,96,57,.12);
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 0.9rem;
}

/* Numrat 1–4 */
#how .row .col-6:nth-child(1) .how-ico::after { content: "1"; }
#how .row .col-6:nth-child(2) .how-ico::after { content: "2"; }
#how .row .col-6:nth-child(3) .how-ico::after { content: "3"; }
#how .row .col-6:nth-child(4) .how-ico::after { content: "4"; }

/* Animim hyrës (fade-up) */
#how .how-card {
  opacity: 0;
  transform: translateY(25px);
  animation: fadeUp 0.6s ease forwards;
}
#how .col-6:nth-child(1) .how-card { animation-delay: 0.1s; }
#how .col-6:nth-child(2) .how-card { animation-delay: 0.25s; }
#how .col-6:nth-child(3) .how-card { animation-delay: 0.4s; }
#how .col-6:nth-child(4) .how-card { animation-delay: 0.55s; }

@keyframes fadeUp {
  to { opacity: 1; transform: translateY(0); }
}
@keyframes shine {
  0% { left: -120%; }
  100% { left: 120%; }
}

/* Responsivitet */
@media (max-width: 767.98px) {
  #how .how-card {
    padding: 1.6rem 1rem;
  }
  #how .how-ico {
    width: 60px;
    height: 60px;
    font-size: 1.7rem;
  }
  #how .how-ico::after { width: 24px; height: 24px; font-size: 0.8rem; }
}


/* ============================================= 3- PËRFITIMET ============================================= */
#benefits {
  background: var(--surface, #fff);
  position: relative;
  overflow: hidden;
}

/* Titulli & përshkrimi */
#benefits .section-title {
  color: var(--brand, #006039);
  font-weight: 800;
  font-size: clamp(1.8rem, 4vw, 2.4rem);
  margin-bottom: .25rem;
}
#benefits .section-lead {
  color: var(--muted, #64748b);
  font-size: 1rem;
  letter-spacing: .3px;
}

/* Karta individuale */
#benefits .benefit {
  background: #fff;
  border-radius: 1rem;
  padding: 2rem 1.5rem 1.6rem;
  box-shadow: 0 4px 14px rgba(15,23,42,0.06);
  transition: transform 0.35s ease, box-shadow 0.35s ease;
  position: relative;
  overflow: hidden;
}

#benefits .benefit:hover {
  transform: translateY(-6px);
  box-shadow: 0 12px 30px rgba(0,96,57,0.12);
}

/* Ikonat */
#benefits .benefit-ico {
  width: 70px;
  height: 70px;
  border-radius: 50%;
  margin: 0 auto 1.1rem;
  background: linear-gradient(135deg, var(--brand,#006039), var(--accent,#22c55e));
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 2rem;
  box-shadow: 0 4px 12px rgba(0,96,57,0.25);
  transition: transform 0.35s ease, box-shadow 0.35s ease;
}

/* Hover: rrotullim i lehtë + glow */
#benefits .benefit:hover .benefit-ico {
  transform: scale(1.12) rotate(5deg);
  box-shadow: 0 8px 24px rgba(0,96,57,0.35);
}

/* Teksti */
#benefits .benefit h6 {
  font-weight: 700;
  color: var(--ink, #0f172a);
  font-size: 1.05rem;
  letter-spacing: 0.3px;
}
#benefits .benefit p {
  color: var(--muted, #64748b);
  font-size: 0.9rem;
  margin-bottom: 0;
}

/* Efekt "shine" i lehtë gjatë hover */
#benefits .benefit::after {
  content: "";
  position: absolute;
  top: 0; left: -120%;
  width: 120%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.25), transparent);
  transition: opacity .3s ease;
  opacity: 0;
}
#benefits .benefit:hover::after {
  animation: shine 1.2s linear;
  opacity: 1;
}

@keyframes shine {
  0% { left: -120%; }
  100% { left: 120%; }
}

/* Animim hyrës (fade-up) */
#benefits .benefit {
  opacity: 0;
  transform: translateY(25px);
  animation: fadeUp 0.6s ease forwards;
}
#benefits .col-sm-6:nth-child(1) .benefit { animation-delay: 0.1s; }
#benefits .col-sm-6:nth-child(2) .benefit { animation-delay: 0.25s; }
#benefits .col-sm-6:nth-child(3) .benefit { animation-delay: 0.4s; }
#benefits .col-sm-6:nth-child(4) .benefit { animation-delay: 0.55s; }
#benefits .col-sm-6:nth-child(5) .benefit { animation-delay: 0.7s; }
#benefits .col-sm-6:nth-child(6) .benefit { animation-delay: 0.85s; }

@keyframes fadeUp {
  to { opacity: 1; transform: translateY(0); }
}

/* Responsivitet */
@media (max-width: 767.98px) {
  #benefits .benefit {
    padding: 1.6rem 1rem;
  }
  #benefits .benefit-ico {
    width: 60px;
    height: 60px;
    font-size: 1.7rem;
  }
  #benefits .benefit h6 {
    font-size: 1rem;
  }
}

/* Ngjyra të ndryshme për ikonat në seksionin e përfitimeve */
#benefits .col-sm-6:nth-child(1) .benefit-ico {
  background: linear-gradient(135deg, #22c55e, #15803d); /* jeshile */
}
#benefits .col-sm-6:nth-child(2) .benefit-ico {
  background: linear-gradient(135deg, #3b82f6, #1e40af); /* blu */
}
#benefits .col-sm-6:nth-child(3) .benefit-ico {
  background: linear-gradient(135deg, #f59e0b, #b45309); /* portokalli */
}
#benefits .col-sm-6:nth-child(4) .benefit-ico {
  background: linear-gradient(135deg, #ec4899, #9d174d); /* rozë */
}
#benefits .col-sm-6:nth-child(5) .benefit-ico {
  background: linear-gradient(135deg, #8b5cf6, #5b21b6); /* violet */
}
#benefits .col-sm-6:nth-child(6) .benefit-ico {
  background: linear-gradient(135deg, #0ea5e9, #0369a1); /* blu e çelët */
}


/* ============================================= 4- PRICING ============================================= */
/* Sfond i errët elegant për gjithë seksionin */
#pricing.pricing-dark {
  background: radial-gradient(1200px 600px at 20% -10%, rgba(34,197,94,.09), transparent 50%),
              radial-gradient(1000px 500px at 100% 10%, rgba(0,96,57,.08), transparent 55%),
              #0b1220; /* bazë e errët blu-gjelbër */
  color: #e7edf6;
}

/* Titujt */
#pricing .section-title {
  color: #fff;
  font-weight: 800;
  letter-spacing: .2px;
}
#pricing .section-lead {
  color: rgba(231,237,246,.8);
}

/* Karta bazë */
#pricing .pkg {
  border-radius: 1rem;
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  border: 1px solid rgba(255,255,255,.1);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease, background .35s ease;
}

#pricing .pkg:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 50px rgba(0,0,0,.35);
  border-color: rgba(255,255,255,.18);
}

/* Variant “ghost” (pak më transparent) */
#pricing .pkg--ghost {
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.015));
}

/* Elevation util (opsionale) */
#pricing .elevation { box-shadow: 0 14px 30px rgba(0,0,0,.25); }

/* Media me CSS var */
#pricing .pkg__media {
  --img: url('../images/placeholder.jpg');
  background: var(--img) center/cover no-repeat;
  border-top-left-radius: 1rem;
  border-top-right-radius: 1rem;
  filter: saturate(1.05) contrast(1.05);
}

/* Titulli + pika e gjelbër */
#pricing .card-title { color: #fff; }
#pricing .pkg__dot{
  width: .6rem; height: .6rem; border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, #34d399, #10b981);
  box-shadow: 0 0 0 4px rgba(16,185,129,.18), 0 0 14px rgba(16,185,129,.45);
  display: inline-block;
}

/* Çmimi */
#pricing .h4 strong { font-weight: 800; }

/* Lista e veçorive */
#pricing .pkg__features li{
  display: flex; align-items: center;
  gap: .5rem;
  padding: .3rem 0;
  color: rgba(231,237,246,.95);
  position: relative;
}

/* Tika “✔” automatikisht për elementet normale */
#pricing .pkg__features li::before{
  content: "✔";
  font-weight: 900;
  font-size: .85rem;
  color: #22c55e;
  width: 1.2rem; text-align: center;
}

/* Veçoritë e mungura */
#pricing .pkg__features .feat-miss{
  color: rgba(231,237,246,.55);
  text-decoration: line-through;
}
#pricing .pkg__features .feat-miss::before{
  content: "—";
  color: rgba(231,237,246,.45);
}

/* Butoni dark brand */
#pricing .btn-brand-dark{
  background: linear-gradient(135deg, var(--brand,#006039), #109e6f);
  color: #fff; border: 0; border-radius: .9rem;
  font-weight: 700;
  padding: .75rem 1.1rem;
  box-shadow: 0 10px 24px rgba(16,158,111,.25);
  transition: transform .2s ease, box-shadow .25s ease, filter .25s ease;
}
#pricing .btn-brand-dark:hover{
  filter: brightness(1.03);
  transform: translateY(-1px);
  box-shadow: 0 14px 32px rgba(16,158,111,.32);
}

/* Karta Featured */
#pricing .pkg--featured{
  background: linear-gradient(180deg, rgba(34,197,94,.12), rgba(34,197,94,.05));
  border: 1px solid rgba(34,197,94,.35);
  box-shadow: 0 24px 60px rgba(34,197,94,.18), inset 0 0 24px rgba(34,197,94,.06);
  position: relative;
}

/* Ribbon “Më i përzgjedhur” */
#pricing .pkg__ribbon{
  position: absolute; top: 12px; right: -40px;
  background: linear-gradient(135deg, #22c55e, #0e9f6e);
  color: #fff; font-weight: 800; font-size: .8rem;
  letter-spacing: .3px;
  padding: .35rem 2.2rem;
  transform: rotate(35deg);
  box-shadow: 0 10px 20px rgba(34,197,94,.25);
  z-index: 2;
}

/* Abonimi mujor (karta horizontale në md+) */
#pricing .pkg--sub{
  background: linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.02));
  border: 1px solid rgba(255,255,255,.12);
}
@media (min-width: 768px){
  #pricing .pkg--sub .pkg__media{
    min-width: 45%; /* media në të majtë, përmasa e bukur */
    border-top-right-radius: 0;
    border-bottom-left-radius: 1rem;
  }
}

/* Hover shimmer i lehtë mbi kartë */
#pricing .pkg::after{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.1), transparent);
  transform: translateX(-120%);
  transition: opacity .3s ease;
  opacity: 0; pointer-events: none;
  border-radius: inherit;
}
#pricing .pkg:hover::after{
  animation: pricingShine 1.2s linear;
  opacity: 1;
}
@keyframes pricingShine{
  to{ transform: translateX(120%); }
}

/* Animim hyrës i kartave */
#pricing .pkg{
  opacity: 0;
  transform: translateY(25px);
  animation: priceFade .6s ease forwards;
}
#pricing .col-md-6:nth-child(1) .pkg { animation-delay: .1s; }
#pricing .col-md-6:nth-child(2) .pkg { animation-delay: .25s; }
#pricing .col-md-6:nth-child(3) .pkg { animation-delay: .4s; }
@keyframes priceFade{ to{ opacity:1; transform: translateY(0);} }

/* Tekste ndihmëse */
#pricing .card .text-white{ color:#fff !important; }
#pricing .opacity-75{ opacity:.75 !important; }

/* Responsivitet i përgjithshëm */
@media (max-width: 575.98px){
  #pricing .pkg__ribbon{ transform: rotate(28deg) scale(.9); right: -46px; }
  #pricing .btn-brand-dark{ padding: .7rem 1rem; }
}

/* Accessibility: redukto animimet nëse kërkohet */
@media (prefers-reduced-motion: reduce){
  #pricing .pkg, #pricing .btn-brand-dark { transition: none !important; }
  #pricing .pkg, #pricing .pkg::after { animation: none !important; }
}


/* =========================== 5) SHOP – Premium single product =========================== */
/* ============================================= 5- SHOP ============================================= */
#shop {
  background: var(--surface-2, #f8fafc);
}

/* Titujt */
#shop h2 { color: var(--ink, #0f172a); }
#shop .text-brand { color: var(--brand, #006039) !important; }

/* Karta kryesore e produktit */
#shop .shop-card{
  background:#fff;
  border: 1px solid rgba(15,23,42,.06);
  box-shadow: 0 12px 30px rgba(15,23,42,.08);
  transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease;
}
#shop .shop-card:hover{
  transform: translateY(-6px);
  box-shadow: 0 20px 50px rgba(15,23,42,.12);
  border-color: rgba(15,23,42,.12);
}

/* Kolona e fotos */
#shop .shop-card .col-md-5{
  padding: 1.25rem;
}
#shop .shop-card img{
  width: 100%;
  height: 100%;
  object-fit: contain; /* ruan proporcione, s’pritet */
  display: block;
  filter: saturate(1.05) contrast(1.05);
}

/* Titulli i produktit + çmimi */
#shop .card-body .text-uppercase.small{
  letter-spacing: .08em;
}
#shop .card-body h3{
  line-height: 1.2;
  letter-spacing: .2px;
}
#shop #priceLabel{
  font-weight: 800;
}

/* Alert promo (kupon) */
#shop .alert{
  border: 1px solid rgba(16,185,129,.25);
  background: linear-gradient(180deg, rgba(34,197,94,.12), rgba(34,197,94,.06));
  color: #065f46;
}
#shop .alert .btn{
  border-radius: .6rem;
}

/* Pulse për kuponin */
#shop #couponCode{
  display: inline-block;
  position: relative;
}
#shop #couponCode.pulse{
  animation: couponPulse 1.8s ease-in-out infinite;
}
@keyframes couponPulse{
  0%,100%{ transform: scale(1); text-shadow: 0 0 0 rgba(34,197,94,0); }
  50%    { transform: scale(1.06); text-shadow: 0 0 16px rgba(34,197,94,.45); }
}

/* Butoni Copy (ikonë clipboard) */
#shop #copyBtn{
  border-color: rgba(15,23,42,.2);
}
#shop #copyBtn:hover{
  background:#0f172a; color:#fff; border-color:#0f172a;
}

/* CTA brand (nëse s’e ke .btn-brand globale, ky e forcon brenda #shop) */
#shop .btn-brand{
  background: linear-gradient(135deg, var(--brand,#006039), #109e6f);
  color:#fff; border:0; border-radius:.9rem;
  font-weight:700; padding:.8rem 1.1rem;
  box-shadow: 0 12px 28px rgba(16,158,111,.22);
  transition: transform .2s ease, box-shadow .25s ease, filter .25s ease;
}
#shop .btn-brand:hover{
  transform: translateY(-1px);
  filter: brightness(1.03);
  box-shadow: 0 16px 36px rgba(16,158,111,.28);
}

/* Lista e pikave poshtë CTA */
#shop .list-inline .text-brand{
  color: var(--brand, #006039) !important;
}
#shop .list-inline i{
  vertical-align: -1px;
}

/* Karta e dytë (informacionet e hollësishme) */
#shop .card.shadow-sm{
  border: 1px solid rgba(15,23,42,.06);
  background:#fff;
  border-radius:1rem;
}
#shop .card.shadow-sm h6{
  letter-spacing: .2px;
}
#shop .card.shadow-sm p a{
  color: var(--brand, #006039);
  text-decoration: underline;
}

/* Spacing & container tweaks */
#shop .container[max-width~="980px"]{ /* vetëm si shënim vizual */
  /* ruan fokusin në një kolonë të gjerë e të lexueshme */
}
#shop .card-body{
  padding: 1.25rem;
}
@media (min-width: 992px){
  #shop .card-body{
    padding: 2rem 2.5rem;
  }
}

/* Responsive */
@media (max-width: 991.98px){
  #shop .shop-card .col-md-5{ padding: 1rem; }
  #shop .shop-card img{ max-height: 360px; }
}
@media (max-width: 575.98px){
  #shop .shop-card img{ max-height: 300px; }
}

/* Reduced motion accessibility */
@media (prefers-reduced-motion: reduce){
  #shop .shop-card, #shop .btn-brand { transition: none !important; }
  #shop #couponCode.pulse{ animation: none !important; }
}

/* =============================================
   Efekti "Kuponi u kopjua!" (copyMsg animation)
   ============================================= */
#shop #copyMsg {
  position: relative;
  display: inline-block;
  color: #16a34a;
  font-weight: 600;
  font-size: 0.9rem;
  margin-top: -0.25rem;
  animation: fadeSlideIn 0.6s ease forwards;
}

/* Animimi hyrës */
@keyframes fadeSlideIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

/* (Opsionale) për ta bërë më “pop” – glow efekt i lehtë */
#shop #copyMsg::before {
  content: "✨";
  margin-right: 0.4rem;
  animation: sparkle 1.2s ease-in-out infinite;
}
@keyframes sparkle {
  0%,100% { opacity: 0.3; transform: scale(0.9); }
  50% { opacity: 1; transform: scale(1.1); }
}


#shop #copyBtn.copied {
  background: var(--brand,#006039);
  color: #fff;
  border-color: var(--brand,#006039);
  transform: scale(1.05);
  box-shadow: 0 0 14px rgba(34,197,94,.35);
  transition: all 0.3s ease;
}




 /* ======================================================= 6 ) SUCCESS STORIES   ======================================================= */
:root{
  --brand:#006039;
  --brand-600:#004d2e;
}

#success-stories{
  background:
    radial-gradient(1100px 620px at 85% -10%, rgba(0,96,57,.18), transparent 60%),
    linear-gradient(180deg,#0b1220 0%,#0f172a 100%);
  color:#fff;
}
#success-stories .section-title{ font-weight:800; letter-spacing:.2px; color:#fff; }
#success-stories .section-lead{ color:rgba(255,255,255,.82); max-width:56ch; margin:0 auto; }

/* Carousel shell */
#success-stories .carousel.stories{ position:relative; }
#success-stories .carousel-inner{
  background:#0f172a;
  border:1px solid rgba(255,255,255,.08);
  border-radius:1rem;
  box-shadow:0 16px 48px rgba(0,0,0,.45);
  overflow:hidden;
}

/* Frame & image */
#success-stories .story-frame{
  aspect-ratio:3/4;
  width:100%;
  position:relative;
  display:flex; align-items:center; justify-content:center;
  background:#0b1220; /* letterbox e errët për raportet jo 3:4 */
}
#success-stories .story-img{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:contain;             /* FOTO E PLOTË */
  object-position:center;
  transition:transform .6s ease;
  filter:contrast(1.06) saturate(1.06);
}
#success-stories .carousel-item.active .story-img{ transform:scale(1.01); }

/* Caption – panel i lexueshëm */
#success-stories .story-caption{
  position:absolute; left:0; right:0; bottom:.6rem;
  padding:.65rem .8rem; margin:0 .6rem;
  border-radius:.75rem;
  background:linear-gradient(180deg, rgba(0,0,0,.25) 0%, rgba(0,0,0,.55) 100%);
  backdrop-filter:blur(4px);
  border:1px solid rgba(255,255,255,.12);
  box-shadow:0 10px 24px rgba(0,0,0,.25);
  text-align:left;
}
#success-stories .story-caption .title{
  font-weight:800; color:#fff; letter-spacing:.2px;
  text-shadow:0 2px 8px rgba(0,0,0,.6);
  font-size:1.05rem; margin-bottom:.15rem;
}
#success-stories .story-caption .desc{
  color:rgba(255,255,255,.92); font-size:.9rem; line-height:1.25;
  text-shadow:0 1px 6px rgba(0,0,0,.55);
}

/* Controls */
#success-stories .carousel-control-prev,
#success-stories .carousel-control-next{
  width:3rem; height:3rem; top:50%; transform:translateY(-50%); opacity:1;
}
#success-stories .ctrl{
  width:2.4rem; height:2.4rem; border-radius:999px;
  background:rgba(0,0,0,.35);
  border:1px solid rgba(255,255,255,.25);
  box-shadow:0 6px 14px rgba(0,0,0,.35);
  position:relative; display:inline-block;
}
#success-stories .ctrl::before{
  content:""; position:absolute; inset:0; margin:auto;
  width:.7rem; height:.7rem; border-top:2px solid #fff; border-right:2px solid #fff;
}
#success-stories .ctrl-prev::before{ transform:rotate(-135deg); left:.15rem; }
#success-stories .ctrl-next::before{ transform:rotate(45deg); right:.15rem; }
#success-stories .carousel-control-prev:hover .ctrl,
#success-stories .carousel-control-next:hover .ctrl{ background:rgba(0,0,0,.5); }

/* Indicators – jashtë fotos, sipër */
#success-stories .carousel-indicators{
  position:static; margin:.8rem 0 .2rem 0; gap:.45rem;
}
#success-stories .carousel-indicators [data-bs-target]{
  width:.5rem; height:.5rem; border-radius:999px;
  background:rgba(255,255,255,.45); border:0; opacity:1;
}
#success-stories .carousel-indicators .active{ background:#fff; transform:scale(1.15); }

/* CTA */
#success-stories .btn-success{
  background:var(--brand); border:none;
  box-shadow:0 12px 30px rgba(0,96,57,.28);
  transition:transform .2s ease, box-shadow .2s ease, background .2s ease;
}
#success-stories .btn-success:hover{ background:var(--brand-600); transform:translateY(-2px); }

/* Responsive */
@media (max-width:575.98px){
  #success-stories .story-caption{ padding:.55rem .7rem; margin:0 .5rem; bottom:.5rem; }
  #success-stories .story-caption .title{ font-size:1rem; }
  #success-stories .story-caption .desc{ font-size:.84rem; }
}


/* Masonry columns */
.masonry{ column-count:1; column-gap:1rem; }
@media (min-width:576px){ .masonry{ column-count:2; } }
@media (min-width:992px){ .masonry{ column-count:3; } }

/* Karta */
.masonry-item{
  break-inside: avoid;
  margin: 0 0 1rem;
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  background: var(--surface,#fff);
  box-shadow: 0 10px 28px rgba(2,6,23,.10);
  opacity: 0;
  transform: translateY(12px);
  transition: opacity .4s ease, transform .4s ease;
}
.masonry-item.is-visible{ opacity:1; transform: translateY(0); }

.masonry-item img{ width:100%; height:auto; display:block; }

/* Overlay hover */
.m-over{
  position:absolute; inset:0; display:flex; flex-direction:column; justify-content:flex-end;
  padding:14px; color:#fff;
  background: linear-gradient(to top, rgba(15,23,42,.72), rgba(15,23,42,0));
  opacity:0; transition:opacity .25s ease;
}
.masonry-item:hover .m-over{ opacity:1; }

.m-title{ font-weight:800; font-size:1.125rem; line-height:1.1; }
.m-desc{ font-size:.92rem; opacity:.95; }

/* Hidden për "Shfaq më shumë" */
.masonry-item.is-hidden{ display:none; }

/* ===== VIP Clients Strip – Light Version ===== */
.vip-strip {
  --vip-bg: #f9fafb;           /* gri shumë e lehtë */
  --vip-border: rgba(0,0,0,.05);
  --vip-ink: #0f172a;          /* tekst i errët */
  --vip-accent: #00a37a;       /* jeshile brand */
  background: var(--vip-bg);
  color: var(--vip-ink);
}

.vip-strip .section-title { color: var(--vip-ink); }
.vip-strip .section-lead { color: #64748b; }

.vip-kicker .vip-crown { font-size: 1rem; line-height: 1; }
.vip-kicker { opacity: .85; }

/* Karta VIP */
.vip-card {
  background: #ffffff;
  border: 1px solid var(--vip-border);
  border-radius: 18px;
  overflow: hidden;
  transition: transform .2s ease, box-shadow .2s ease;
  box-shadow: 0 4px 10px rgba(0,0,0,.04);
}
.vip-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 28px rgba(0,0,0,.08);
}

.vip-media {
  position: relative;
  aspect-ratio: 4/5;
  background: #f3f4f6;
}
.vip-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.vip-badge {
  position: absolute;
  top: 10px;
  left: 10px;
  background: linear-gradient(135deg, var(--vip-accent), #34d399);
  color: #fff;
  font-weight: 700;
  font-size: .72rem;
  padding: .35rem .6rem;
  border-radius: 999px;
  letter-spacing: .4px;
  box-shadow: 0 4px 10px rgba(0,163,122,.3);
}

.vip-body {
  padding: 14px 14px 16px 14px;
}
.vip-body h6 {
  color: var(--vip-ink);
  font-weight: 700;
}
.vip-desc {
  color: #64748b !important;
  font-size: .875rem;
}

/* Responsivitet i lehtë */
@media (max-width: 575.98px) {
  .vip-body { padding: 12px; }
}

 
/* =========================== 7) ABOUT SECTION =========================== */
/* ============================================= 7- ABOUT / RRETH MEJE ============================================= */
.about-section {
  background: var(--surface-2, #f8fafc);
  position: relative;
  overflow: hidden;
}

/* Titulli + nën-titulli */
.about-section h3 {
  font-size: clamp(1.6rem, 3.6vw, 2.2rem);
  letter-spacing: .2px;
  color: var(--ink, #0f172a);
}
.about-section .about-lead {
  color: var(--ink, #0f172a);
  font-weight: 600;
}
.about-section .text-muted { color: var(--muted, #64748b) !important; }

/* ===== Foto – kornizë “soft”, hover parallax, glow i lehtë */
.about-photo{
  position: relative;
  border-radius: 1.25rem;
  background: #fff;
  border: 1px solid rgba(15,23,42,.06);
  box-shadow: 0 14px 36px rgba(15,23,42,.08);
  transform: translateZ(0);
  transition: transform .45s cubic-bezier(.22,.61,.36,1), box-shadow .45s, border-color .35s;
  overflow: hidden;
}
.about-photo img{
  display:block;
  width:100%;
  height:auto;
  transform: scale(1.02);
  transition: transform 1s ease, filter .6s ease;
  filter: saturate(1.05) contrast(1.03);
}
.about-photo::after{
  /* highlight i butë diagonalisht (glass) */
  content:"";
  position:absolute; inset:0;
  background: radial-gradient(60% 60% at 10% 10%, rgba(255,255,255,.45), transparent 60%);
  pointer-events:none;
  mix-blend-mode: screen;
  opacity:.6;
  transition: opacity .35s ease;
}
.about-photo:hover{
  transform: translateY(-6px);
  box-shadow: 0 22px 60px rgba(15,23,42,.16);
  border-color: rgba(15,23,42,.12);
}
.about-photo:hover img{ transform: scale(1.06); }
.about-photo:hover::after{ opacity:.8; }

/* Badge “UEFA Licensed” opsional (komento nëse s’e do) */
.about-photo .badge-uefa{
  position: absolute;
  top: 12px; left: 12px;
  background: linear-gradient(135deg, #2edb6e, #046e4b);
  color:#000000; font-weight:800; font-size:.75rem;
  letter-spacing:.3px; padding:.35rem .6rem;
  border-radius:.6rem;
  box-shadow: 0 10px 22px rgba(34,197,94,.25);
  z-index:2;
}

/* ===== Copy – përmbajtja me theks brand */
.about-copy { position: relative; }

.about-copy .about-p{
  color: var(--muted, #64748b);
  font-size: 1rem;
  margin-bottom: .9rem;
  line-height: 1.7;
}
 

/* Lista / fjali me ikonë “check” (nëse shton pika) */
.about-copy .bullet{
  display:flex; gap:.6rem; align-items:flex-start;
  color: var(--ink, #0f172a);
  margin-bottom: .5rem;
}
.about-copy .bullet::before{
  content: "✔";
  color: #22c55e; font-weight: 900; line-height: 1.2;
  margin-top: .1rem;
}

/* Butoni */
.about-copy .btn.btn-brand{
  background: linear-gradient(135deg, var(--brand,#006039), #109e6f);
  color:#fff; border:0; border-radius:.9rem;
  font-weight:700; padding:.75rem 1.1rem;
  box-shadow: 0 12px 28px rgba(16,158,111,.22);
  transition: transform .2s ease, box-shadow .25s ease, filter .25s ease;
}
.about-copy .btn.btn-brand:hover{
  transform: translateY(-1px);
  filter: brightness(1.03);
  box-shadow: 0 16px 36px rgba(16,158,111,.28);
}

/* ===== Animim hyrës i butë (fade-up) */
.about-section .about-photo,
.about-section .about-copy{
  opacity: 0;
  transform: translateY(22px);
  animation: aboutFadeUp .7s ease forwards;
}
.about-section .about-photo{ animation-delay: .1s; }
.about-section .about-copy{ animation-delay: .25s; }

@keyframes aboutFadeUp{
  to { opacity:1; transform: translateY(0); }
}

/* ===== Mikro-efekte dekorative (opsionale) */
.about-section::before{
  content:"";
  position:absolute; top:-120px; right:-120px;
  width: 260px; height: 260px; border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, rgba(34,197,94,.18), rgba(34,197,94,0));
  filter: blur(8px);
  pointer-events:none;
}
.about-section::after{
  content:"";
  position:absolute; bottom:-140px; left:-140px;
  width: 320px; height: 320px; border-radius: 50%;
  background: radial-gradient(circle at 70% 70%, rgba(0,96,57,.15), rgba(0,96,57,0));
  filter: blur(8px);
  pointer-events:none;
}

/* ===== Responsivitet */
@media (max-width: 991.98px){
  .about-section .about-photo{ margin-bottom: .5rem; }
}
@media (max-width: 575.98px){
  .about-copy .btn{ width: 100%; }
}

/* ===== Reduced motion accessibility */
@media (prefers-reduced-motion: reduce){
  .about-section .about-photo,
  .about-section .about-copy{
    animation: none !important; opacity:1 !important; transform:none !important;
  }
  .about-photo, .about-photo img { transition: none !important; }
  .about-copy h3::after { transition: none !important; transform: scaleX(1); }
}
 


/* =========================== 8) FAQ  =========================== */
#faq.faq-board{
  background:
    radial-gradient(1200px 600px at 20% -10%, rgba(34,197,94,.09), transparent 50%),
    radial-gradient(1000px 500px at 100% 10%, rgba(0,96,57,.08), transparent 55%),
    #0b1220;
  color:#e7edf6;
}

/* Aside */
#faq .section-title{
  color:#fff; font-weight:800; letter-spacing:.2px;
  font-size:clamp(1.8rem,4vw,2.2rem);
}
#faq .text-muted{ color:rgba(231,237,246,.8) !important; }
#faq a{ color:#9ae6b4; text-decoration:underline; }
#faq a:hover{ color:#bff7d7; }

/* search */
#faq .search-wrap{
  position:relative; margin-top:.5rem;
}
#faq .search-wrap i{
  position:absolute; left:.75rem; top:50%; transform:translateY(-50%);
  opacity:.75;
}
#faq .search-wrap .form-control{
  background: rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.12);
  color:#e7edf6;
  padding-left:2.2rem; border-radius:.8rem;
}
#faq .search-wrap .form-control::placeholder{ color:rgba(231,237,246,.65); }

/* index */
#faq .faq-index ul li{ margin:.15rem 0; }
#faq .faq-index a{
  display:block; padding:.4rem .55rem; border-radius:.6rem;
  color:#e7edf6; text-decoration:none; border:1px solid transparent;
  transition:background .2s,border-color .2s,transform .2s;
}
#faq .faq-index a:hover{
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.12);
  transform: translateX(2px);
}
#faq .faq-index a.is-active{
  background: rgba(34,197,94,.12);
  border-color: rgba(34,197,94,.35);
}

/* cards */
#faq .faq-card{
  background: linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.12);
  border-radius:1rem;
  box-shadow:0 16px 44px rgba(0,0,0,.45);
  padding:1.1rem 1.15rem 1.2rem;
  margin-bottom:1rem;
  transition:transform .25s, box-shadow .25s, border-color .25s;
}
#faq .faq-card:hover{
  transform: translateY(-3px);
  box-shadow:0 22px 60px rgba(0,0,0,.55);
  border-color: rgba(255,255,255,.18);
}
#faq .faq-q{
  display:flex; align-items:center; gap:.6rem;
  margin:0 0 .4rem; color:#fff; font-weight:800; font-size:1.15rem;
}
#faq .q-dot{
  display:inline-flex; align-items:center; justify-content:center;
  width:28px; height:28px; border-radius:50%;
  background: linear-gradient(135deg, #22c55e, #109e6f); color:#0b1220; font-weight:900;
  box-shadow: 0 0 0 4px rgba(0,96,57,.12), 0 10px 22px rgba(34,197,94,.25);
}
#faq .faq-a{ color:rgba(231,237,246,.9); line-height:1.7; }

/* list checks re-use */
#faq .list-check{ list-style:none; padding-left:0; }
#faq .list-check li{
  position:relative; padding-left:1.35rem; margin-bottom:.5rem;
}
#faq .list-check li::before{
  content:"✔"; position:absolute; left:0; top:.1rem;
  color:#22c55e; font-weight:900; font-size:.9rem;
}

/* appear animation */
#faq .faq-card{ opacity:0; transform:translateY(12px); animation:faqBoardIn .5s ease forwards; }
#faq .faq-card:nth-child(1){ animation-delay:.05s }
#faq .faq-card:nth-child(2){ animation-delay:.1s }
#faq .faq-card:nth-child(3){ animation-delay:.15s }
#faq .faq-card:nth-child(4){ animation-delay:.2s }
#faq .faq-card:nth-child(5){ animation-delay:.25s }
#faq .faq-card:nth-child(6){ animation-delay:.3s }
#faq .faq-card:nth-child(7){ animation-delay:.35s }
#faq .faq-card:nth-child(8){ animation-delay:.4s }
#faq .faq-card:nth-child(9){ animation-delay:.45s }
@keyframes faqBoardIn{ to{ opacity:1; transform:none } }

/* responsive */
@media (max-width: 575.98px){
  #faq .faq-q{ font-size:1.05rem; }
  #faq .q-dot{ width:26px; height:26px; }
}

/* smooth scroll nav offset (për navbar fixed) */
html{
  scroll-padding-top: calc(var(--nav-h,64px) + 12px);
}

/* =========================== 9) CONTACT =========================== */ 
#contact{
  background: var(--surface-2, #f8fafc);
  color: var(--ink, #0f172a);
}

/* --------- Titujt --------- */
#contact .section-title{
  color: var(--brand, #006039);
  font-weight: 800;
  letter-spacing: .2px;
}
#contact .section-lead{ color: var(--muted, #64748b); }

/* ================================== Info Cards (Email / WhatsApp / Orar) ================================== */
#contact .contact-cards{
  display: grid;
  gap: .9rem;
}

#contact .contact-card{
  display: flex;
  align-items: center;
  gap: .9rem;
  background: #fff;
  border: 1px solid rgba(15,23,42,.08);
  border-radius: 1rem;
  padding: .9rem 1rem;
  box-shadow: 0 10px 24px rgba(15,23,42,.06);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease, background .25s ease;
}
#contact .contact-card:hover{
  transform: translateY(-3px);
  box-shadow: 0 18px 40px rgba(15,23,42,.10);
  border-color: rgba(15,23,42,.12);
}

/* Ikonat e kartave */
#contact .contact-card > i{
  font-size: 1.6rem;
  line-height: 1;
  color: var(--brand, #006039);
  width: 2.2rem; /* për align */
  text-align: center;
}

/* Titujt brenda kartave */
#contact .contact-card .title{
  font-weight: 800;
  letter-spacing: .2px;
  color: var(--ink, #0f172a);
  margin-bottom: .1rem;
}

/* Link-u kryesor brenda kartës */
#contact .link-ink{
  color: var(--brand, #006039);
  text-decoration: underline;
  text-underline-offset: 2px;
}
#contact .link-ink:hover{
  color: var(--brand-600, #004d2e);
}

/* Butoni “copy” */
#contact .copy-btn{
  margin-left: auto;
  border: 1px solid rgba(15,23,42,.15);
  background: linear-gradient(180deg, rgba(255,255,255,.9), rgba(255,255,255,.7));
  color: var(--ink, #0f172a);
  box-shadow: 0 6px 16px rgba(15,23,42,.08);
  transition: transform .2s ease, box-shadow .25s ease, background .25s ease, border-color .25s ease;
}
#contact .copy-btn:hover{
  transform: translateY(-1px);
  background: #0f172a;
  color: #fff;
  border-color: #0f172a;
  box-shadow: 0 10px 24px rgba(15,23,42,.14);
}
#contact .copy-btn:active{ transform: translateY(0); }

/* Badge 24/7 */
#contact .badge.bg-light{
  border: 1px solid rgba(15,23,42,.12);
  background: rgba(15,23,42,.04) !important;
}

/* WhatsApp rreshti – ngjyrë e lehtë karakteristike (ops.) */
#contact .contact-card .bi-whatsapp{
  color: #25D366;
}

/* ================================== Karta e Formës ================================== */
#contact .card{
  background: #fff;
  border: 1px solid rgba(15,23,42,.08);
  border-radius: 1rem;
  box-shadow: 0 16px 44px rgba(15,23,42,.10);
}

/* Header i formës */
#contact h4{
  color: var(--ink, #0f172a);
  font-weight: 800;
  letter-spacing: .2px;
}

/* ================================== Form Controls ================================== */
#contact .form-label{
  font-weight: 700;
  color: var(--ink, #0f172a);
}
#contact .form-control,
#contact .form-select{
  background: #fff;
  border: 1px solid rgba(15,23,42,.12);
  color: var(--ink, #0f172a);
  border-radius: .8rem;
  padding: .7rem .9rem;
  box-shadow: 0 0 0 0 rgba(0,96,57,0);
  transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
#contact .form-control::placeholder{ color: rgba(15,23,42,.45); }

/* Fokus i bukur jeshil */
#contact .form-control:focus,
#contact .form-select:focus{
  border-color: var(--brand, #006039);
  box-shadow: 0 0 0 .25rem var(--ring, rgba(0,96,57,.35));
  outline: none;
}

/* Validim Bootstrap – ngjyrime më të buta */
#contact .form-control.is-invalid,
#contact .form-select.is-invalid{
  border-color: #dc3545;
  box-shadow: 0 0 0 .2rem rgba(220,53,69,.15);
}
#contact .form-control.is-valid,
#contact .form-select.is-valid{
  border-color: #22c55e;
  box-shadow: 0 0 0 .2rem rgba(34,197,94,.18);
}

/* Checkbox GDPR */
#contact .form-check-input{
  border-radius: .4rem;
  border: 1.5px solid rgba(15,23,42,.25);
}
#contact .form-check-input:checked{
  background-color: var(--brand, #006039);
  border-color: var(--brand, #006039);
  box-shadow: 0 0 0 .2rem rgba(34,197,94,.18);
}

/* Butoni i dërgimit */
#contact .btn.btn-brand{
  background: linear-gradient(135deg, var(--brand,#006039), #109e6f);
  color:#fff; border:0; border-radius:.9rem;
  font-weight:700; padding:.9rem 1.2rem;
  box-shadow: 0 12px 28px rgba(16,158,111,.22);
  transition: transform .2s ease, box-shadow .25s ease, filter .25s ease;
}
#contact .btn.btn-brand:hover{
  transform: translateY(-1px);
  filter: brightness(1.03);
  box-shadow: 0 16px 36px rgba(16,158,111,.28);
}

/* Mesazhi i suksesit */
#contact #cFormMsg{
  border: 1px solid rgba(34,197,94,.35);
  background: linear-gradient(180deg, rgba(34,197,94,.12), rgba(34,197,94,.06));
  color: #065f46;
  border-radius: .8rem;
}

/* GDPR info poshtë */
#contact .small.text-muted{
  color: var(--muted, #64748b) !important;
}

/* ================================== Micro-interactions ================================== */
/* highlight i lehtë kur fokusohet rreshti */
#contact .form-control:hover,
#contact .form-select:hover{
  border-color: rgba(15,23,42,.22);
}

/* ================================== Responsive ================================== */
@media (max-width: 991.98px){
  #contact .copy-btn{ display: none; } /* thjeshto kartat në mobile */
}
@media (max-width: 575.98px){
  #contact .contact-card{ padding: .85rem .9rem; }
  #contact .contact-card > i{ font-size: 1.5rem; width: 2rem; }
  #contact .btn.btn-brand{ width: 100%; }
}

/* ================================== Reduced Motion ================================== */
@media (prefers-reduced-motion: reduce){
  #contact .contact-card,
  #contact .btn.btn-brand{
    transition: none !important;
  }
}

 
/***** ========== FOOTER (Dark / Modern) ========== *****/
.site-footer{
  --footer-bg: #0b1220;                 /* deep navy */
  --footer-bg-2: #0e182b;               /* slightly lighter */
  --footer-ink: #e6eefc;                /* primary text */
  --footer-ink-muted: #a9b4c7;          /* secondary text */
  --footer-line: rgba(255,255,255,.08); /* borders */
  --footer-card: rgba(255,255,255,.04); /* cards / btn outlines */
  --brand: #006039;                     /* your green */
  --brand-2: #15a56f;                   /* accent green */
  --focus: rgba(21,165,111,.35);

  color: var(--footer-ink);
  background:
    radial-gradient(1200px 600px at 10% -10%, rgba(0,96,57,.25), transparent 60%),
    radial-gradient(1000px 500px at 100% 0%, rgba(21,165,111,.15), transparent 60%),
    linear-gradient(180deg, var(--footer-bg), var(--footer-bg-2));
}

/* container breathing room handled by your HTML */

/* ---------- Brand row ---------- */
.site-footer .footer-logo{
  width: 40px;
  height: 40px;
  object-fit: contain;
  filter: drop-shadow(0 2px 10px rgba(0,0,0,.25));
}

.site-footer .footer-brand:hover{
  opacity: .95;
  transform: translateY(-1px);
}

/* ---------- Social Buttons ---------- */
.site-footer .footer-ico{
  border-color: var(--footer-card) !important;
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease, background .22s ease;
}
.site-footer .footer-ico i{ font-size: 1rem; line-height: 1; }
.site-footer .footer-ico:hover{
  transform: translateY(-2px);
  border-color: rgba(255,255,255,.25) !important;
  box-shadow: 0 6px 18px rgba(0,0,0,.25), inset 0 0 0 1px rgba(255,255,255,.04);
}
.site-footer .footer-ico:active{ transform: translateY(0); }

/* ---------- Headings ---------- */
.site-footer h6{
  letter-spacing: .04em;
  color: #eaf3ff;
  margin-bottom: .85rem;
}

/* ---------- Links list ---------- */
.site-footer .footer-links li{ margin-bottom: .5rem; }
.site-footer .footer-links a{
  position: relative;
  color: var(--footer-ink);
  opacity: .88;
  text-decoration: none !important;
  transition: color .18s ease, opacity .18s ease;
}
.site-footer .footer-links a::after{
  content: "";
  position: absolute;
  left: 0; bottom: -2px;
  width: 0%;
  height: 2px;
  background: linear-gradient(90deg, var(--brand), var(--brand-2));
  transition: width .22s ease;
  border-radius: 2px;
}
.site-footer .footer-links a:hover{
  color: #ffffff;
  opacity: 1;
}
.site-footer .footer-links a:hover::after{ width: 100%; }

/* ---------- Body copy ---------- */
.site-footer p,
.site-footer .text-white-50{
  color: var(--footer-ink-muted) !important;
}

/* ---------- Newsletter form ---------- */
.site-footer .input-group-lg .form-control,
.site-footer .input-group .form-control{
  color: var(--footer-ink);
  border-color: var(--footer-line);
  background: rgba(255,255,255,.03);
}
.site-footer .input-group-text{
  border-color: var(--footer-line);
  background: rgba(255,255,255,.03);
  color: var(--footer-ink-muted);
}
.site-footer .form-control::placeholder{ color: #94a3b8; opacity: .65; }

.site-footer .form-control:focus,
.site-footer .input-group-text:has(+ .form-control:focus){
  border-color: transparent;
  box-shadow:
    0 0 0 4px var(--focus),
    inset 0 0 0 1px rgba(255,255,255,.06);
  outline: none;
}

/* Success / error text */
.site-footer #nlError{ color: #ff9aa2 !important; }
.site-footer #nlMsg{
  border: 1px solid rgba(21,165,111,.35);
  background: rgba(21,165,111,.08);
  color: #c8ffe7;
}

/* ---------- Brand button (reuse if you already have .btn-brand) ---------- */
.site-footer .btn-brand{
  --btn-bg: linear-gradient(180deg, var(--brand-2), var(--brand));
  --btn-shadow: 0 10px 24px rgba(21,165,111,.2);
  background: var(--btn-bg);
  border: 0;
  color: #fff;
  font-weight: 600;
  border-radius: .75rem;
  box-shadow: var(--btn-shadow);
  transition: transform .15s ease, box-shadow .2s ease, filter .2s ease;
}
.site-footer .btn-brand:hover{
  transform: translateY(-1px);
  filter: saturate(1.05);
  box-shadow: 0 16px 32px rgba(21,165,111,.28);
}
.site-footer .btn-brand:active{ transform: translateY(0); }

/* ---------- Bottom bar ---------- */
.site-footer .footer-bottom{
  border-top: 1px solid var(--footer-line) !important;
  background: linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,0));
}
.site-footer .footer-bottom .small{
  color: var(--footer-ink-muted);
}

/* ---------- Utilities ---------- */
.site-footer .link-light{
  color: var(--footer-ink) !important;
  opacity: .9;
}
.site-footer .link-light:hover{ opacity: 1; }

/* Make the brand row feel clickable but subtle */
.site-footer .footer-brand{
  transition: transform .18s ease, opacity .18s ease;
}

/* ---------- Responsive tweaks ---------- */
@media (max-width: 991.98px){
  .site-footer .footer-logo{ width: 36px; height: 36px; }
  .site-footer .footer-ico{ padding-inline: .65rem; }
}
@media (max-width: 575.98px){
  .site-footer .footer-links li{ margin-bottom: .6rem; }
  .site-footer .input-group-lg .form-control{ font-size: 1rem; }
}

/* Optional: subtle animated starry noise (very light) */
.site-footer::before{
  content:"";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    radial-gradient(1px 1px at 20% 30%, rgba(255,255,255,.08), transparent 60%),
    radial-gradient(1px 1px at 80% 10%, rgba(255,255,255,.06), transparent 60%),
    radial-gradient(1px 1px at 60% 80%, rgba(255,255,255,.06), transparent 60%);
  opacity: .25;
}
.site-footer{ position: relative; overflow: hidden; }

.site-footer .row {
  justify-content: center !important;
  text-align: center !important;
}

.site-footer .footer-links {
  text-align: center;
}

/* ===== Rregullim i madhësisë së tekstit në input-in e email-it ===== */
.site-footer .input-group-lg .form-control {
  font-size: 0.95rem;        /* madhësi më e vogël e tekstit */
  padding-top: 0.6rem;
  padding-bottom: 0.6rem;
}

/* Edhe ikona @ që të mos duket e madhe */
.site-footer .input-group-lg .input-group-text {
  font-size: 0.95rem;
  padding-top: 0.6rem;
  padding-bottom: 0.6rem;
}



@media (min-width: 992px) {
  .site-footer .input-group-lg .form-control {
    max-width: 280px;
    margin: 0 auto;
  }
}


/* ===== Titujt e seksioneve në footer me ngjyrë si butoni "Abonohu" ===== */
.site-footer h6 {
  background: linear-gradient(90deg, #15a56f, #006039); /* e njëjta paletë si btn-brand */
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-transform: uppercase;
  font-weight: 700;
  letter-spacing: .6px;
}

.site-footer h6 {
  background: linear-gradient(90deg, #15a56f, #006039);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 0 8px rgba(21,165,111,0.25);
}

 
/* ======================= COOKIE CONSENT – ULTRA RESPONSIVE ======================= */
#cookieConsent{
  /* layout */
  position: fixed;
  inset: auto env(safe-area-inset-right) calc(12px + env(safe-area-inset-bottom)) env(safe-area-inset-left);
  left: 50%;
  transform: translateX(-50%);
  display: none;               /* shfaqet nga JS me .show */
  z-index: 2147483000;         /* mbi çdo gjë (navbar/offcanvas) */
  max-width: clamp(300px, 92vw, 520px);
  max-height: calc(100svh - 24px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
  overflow: auto;
  padding: 16px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(17,24,39,.92); /* #111827 */
  -webkit-backdrop-filter: blur(14px) saturate(130%);
  backdrop-filter: blur(14px) saturate(130%);
  box-shadow:
    0 10px 30px rgba(0,0,0,.35),
    inset 0 1px 0 rgba(255,255,255,.05);
  color: #e5e7eb; /* text-gray-200 */
  line-height: 1.5;
  font-synthesis-weight: none;
}

/* Shfaqja me animim të butë */
#cookieConsent.show{
  display: block !important;
  animation: cc-slide-up .45s cubic-bezier(.2,.7,.2,1) both;
}
@keyframes cc-slide-up{
  from{ transform: translate(-50%, 8px); opacity: 0; }
  to  { transform: translate(-50%, 0);   opacity: 1; }
}

/* Titulli + ikona */
#cookieConsent h6{
  font-size: 1rem;
  letter-spacing: .25px;
}
#cookieConsent .bi-cookie{
  filter: drop-shadow(0 2px 6px rgba(245,158,11,.4));
}

/* Teksti dhe linku */
#cookieConsent #cookieText{
  font-size: .92rem;
}
#cookieConsent a{
  color: #93c5fd; /* blue-300 */
  text-decoration: underline;
  text-underline-offset: 2px;
}
#cookieConsent a:hover{
  color: #bfdbfe; /* blue-200 */
}

/* Butonat */
#cookieConsent .btn{
  border-radius: 12px;
  font-weight: 600;
  padding: .55rem .8rem;
  transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease, color .18s ease, border-color .18s ease;
  box-shadow: 0 1px 0 rgba(255,255,255,.05) inset;
}
#cookieConsent .btn:active{
  transform: translateY(1px);
}

/* Primary (Prano) – gradient i lehtë smerald */
#cookieConsent .btn-success{
  --cc-green1: #10b981; /* emerald-500 */
  --cc-green2: #059669; /* emerald-600 */
  background-image: linear-gradient(180deg, var(--cc-green1), var(--cc-green2));
  border: 1px solid rgba(16,185,129,.35);
  color: #052e2b;
  text-shadow: 0 1px 0 rgba(255,255,255,.15);
}
#cookieConsent .btn-success:hover{
  filter: brightness(1.05);
  box-shadow: 0 6px 16px rgba(16,185,129,.35);
}

/* Secondary (Refuzo) – outline i dukshëm në dark glass */
#cookieConsent .btn-outline-light{
  border: 1px solid rgba(229,231,235,.35);
  color: #e5e7eb;
  background: rgba(255,255,255,.02);
}
#cookieConsent .btn-outline-light:hover{
  background: rgba(255,255,255,.08);
}

/* Butoni i gjuhës */
#cookieConsent #langToggle{
  opacity: .75;
}
#cookieConsent #langToggle:hover{
  opacity: 1;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Fokus i aksesueshëm (keyboard) */
#cookieConsent .btn:focus-visible,
#cookieConsent a:focus-visible,
#cookieConsent #langToggle:focus-visible{
  outline: 0;
  box-shadow:
    0 0 0 3px rgba(59,130,246,.55),          /* blu i jashtëm */
    0 0 0 6px rgba(59,130,246,.25);          /* halo */
}

/* ======================= LIGHT MODE ======================= */
@media (prefers-color-scheme: light){
  #cookieConsent{
    background: rgba(255,255,255,.92);
    border-color: rgba(15,23,42,.08);
    color: #0f172a;
    box-shadow:
      0 12px 30px rgba(2,8,23,.12),
      inset 0 1px 0 rgba(255,255,255,.75);
  }
  #cookieConsent a{ color: #0ea5e9; }           /* sky-500 */
  #cookieConsent a:hover{ color: #0284c7; }     /* sky-600 */
  #cookieConsent .btn-outline-light{
    border-color: rgba(15,23,42,.18);
    color: #0f172a;
    background: rgba(2,6,23,.03);
  }
}

/* ======================= EKRANE SHUMË TË VEGJËL ======================= */
@media (max-width: 380px){
  #cookieConsent{ padding: 14px; border-radius: 14px; }
  #cookieConsent h6{ font-size: .95rem; }
}

/* ======================= REDUKTIM I LËVIZJEVE ======================= */
@media (prefers-reduced-motion: reduce){
  #cookieConsent{ animation: none !important; }
  #cookieConsent *{ transition: none !important; }
}

/* ======================= HIGH CONTRAST (Windows) ======================= */
@media (forced-colors: active){
  #cookieConsent{
    background: Canvas;
    color: CanvasText;
    border: 1px solid ButtonText;
    box-shadow: none;
  }
  #cookieConsent .btn{ forced-color-adjust: none; }
  #cookieConsent .btn-success{
    background: Highlight;
    color: HighlightText;
    border-color: Highlight;
  }
  #cookieConsent .btn-outline-light{
    border-color: ButtonText;
    color: ButtonText;
    background: Canvas;
  }
}

/* Opsional: klasë për ta ankoruar majtas në desktop (nëse ndonjëherë e do) */
@media (min-width: 992px){
  #cookieConsent.cc-left{
    left: auto;
    right: 24px;
    transform: none;
  }
}

/* ======================= BUTON "REFUZO" / ABLEHNEN ======================= */
#cookieConsent .btn-outline-light {
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #d1d5db; /* gri e qetë */
  background: rgba(255, 255, 255, 0.04);
}
#cookieConsent .btn-outline-light:hover {
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  border-color: rgba(255, 255, 255, 0.18);
}
#cookieConsent .btn-outline-light:active {
  background: rgba(255, 255, 255, 0.2);
  transform: translateY(1px);
}

/* ======================= BUTON I GJUHËS ======================= */
#cookieConsent #langToggle {
  color: #a1a1aa; /* e butë */
  background: rgba(255,255,255,0.04);
  border-radius: 10px;
  padding: 3px 10px;
  font-weight: 600;
  transition: all 0.2s ease;
}
#cookieConsent #langToggle:hover {
  color: #10b981; /* jeshile si “Prano” */
  background: rgba(16,185,129,0.08);
  text-decoration: none;
}
#cookieConsent #langToggle:active {
  transform: translateY(1px);
}

/* ======================= MOBILE FIXES ======================= */
@media (max-width: 576px){
  /* Vendosje & përmasa */
  #cookieConsent{
    inset: auto 12px calc(14px + env(safe-area-inset-bottom)) 12px !important;
    left: auto !important;
    transform: none !important;    /* mos e zhvendos me translateX */
    width: auto !important;
    max-width: none !important;
    border-radius: 16px;
    padding: 14px 14px 12px;
    box-shadow: 0 10px 28px rgba(0,0,0,.35);
  }

  /* Tipografia – më lexueshme */
  #cookieConsent h6{ font-size: 1rem; line-height: 1.2; }
  #cookieConsent #cookieText{ font-size: .95rem; line-height: 1.45; }

  /* Butonat – një poshtë tjetrit, të plotë- gjerësi */
  #cookieConsent .d-flex.mt-2{ flex-direction: column !important; gap: 8px !important; }
  #cookieConsent .btn{
    width: 100%;
    padding: .8rem 1rem;
    font-size: 1rem;
    border-radius: 12px;
  }

  /* “Ablehnen/Refuzo” – kontrast i qartë në mobile */
  #cookieConsent .btn-outline-light{
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.18);
    color: #e7e7e7;
  }
  #cookieConsent .btn-outline-light:hover{ background: rgba(255,255,255,.12); }

  /* Butoni i gjuhës – i dallueshëm, i vogël por prekshëm */
  #cookieConsent #langToggle{
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    font-size: .9rem;
    border-radius: 10px;
    background: rgba(255,255,255,.06);
    color: #cbd5e1;  /* gri e butë */
  }
  #cookieConsent #langToggle:hover{
    background: rgba(16,185,129,.10); /* i lidhur me “Prano” */
    color: #10b981;
    text-decoration: none;
  }
}

/* Ekstra i dobishëm për telefona shumë të vegjël */
@media (max-width: 360px){
  #cookieConsent{ padding: 12px; border-radius: 14px; }
  #cookieConsent h6{ font-size: .95rem; }
  #cookieConsent #cookieText{ font-size: .92rem; }
}



 /* ========== BACK TO TOP BUTTON  ========== */
#backToTop {
  position: fixed;
  bottom: 32px;
  right: 28px;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  border: none;
  background: linear-gradient(135deg, var(--brand, #006039), var(--brand-600, #004d2e));
  color: #fff;
  font-size: 1.9rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  box-shadow: 0 8px 24px rgba(0,96,57,.25), inset 0 0 0 2px rgba(255,255,255,.1);
  transform: translateY(50px) scale(.95);
  transition: all .4s cubic-bezier(.4,.14,.3,1.02);
  z-index: 999;
}

/* Shfaq kur scroll >= 200px */
#backToTop.show {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
}

/* Hover: efekt glow & rotate */
#backToTop:hover {
  background: linear-gradient(135deg, var(--brand-600, #004d2e), var(--brand-700, #00331f));
  box-shadow: 0 12px 30px rgba(0,96,57,.35), 0 0 10px rgba(0,96,57,.3);
  transform: translateY(-4px) scale(1.05) rotate(-4deg);
}

/* Pulsim i lehtë (animacion automatik) */
@keyframes pulseGlow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(0,96,57,.35); }
  50% { box-shadow: 0 0 0 10px rgba(0,96,57,.0); }
}
#backToTop.show {
  animation: pulseGlow 2.5s infinite;
}

/* Tooltip “Lart” */
#backToTop::after {
  content: "Lart";
  position: absolute;
  bottom: 115%;
  font-size: 0.75rem;
  background: rgba(15,23,42,.85);
  color: #fff;
  padding: 3px 7px;
  border-radius: 4px;
  opacity: 0;
  transform: translateY(4px);
  transition: all .25s ease;
  pointer-events: none;
}
#backToTop:hover::after {
  opacity: 1;
  transform: translateY(0);
}

/* Responsive tweaks */
@media (max-width: 576px) {
  #backToTop {
    width: 52px;
    height: 52px;
    font-size: 1.6rem;
    bottom: 20px;
    right: 20px;
  }
}


 
/* ============================ EFECTE – animime & hover (universal) ============================ */
:root{
  --fx-duration: .85s;
  --fx-ease: cubic-bezier(.2,.65,.2,1);
}

/* Delay helpers */
.delay-0{animation-delay:0s!important;}
.delay-1{animation-delay:.15s!important;}
.delay-2{animation-delay:.30s!important;}
.delay-3{animation-delay:.45s!important;}

/* Fade-up hyrës */
.fade-up{
  opacity:0; transform:translateY(26px);
  animation:fadeUp var(--fx-duration) var(--fx-ease) forwards;
}
@keyframes fadeUp{to{opacity:1; transform:translateY(0);}}

/* Pop-in i lehtë (logo/ikona/butona) */
.pop-in{
  opacity:0; transform:scale(.96);
  animation:popIn var(--fx-duration) var(--fx-ease) forwards;
}
@keyframes popIn{
  60%{opacity:1; transform:scale(1.02);}
  100%{opacity:1; transform:scale(1);}
}

/* Hover lift (universale) */
.hover-lift{
  transition: transform .25s ease, box-shadow .25s ease, filter .25s ease;
  will-change: transform;
}
.hover-lift:hover{
  transform: translateY(-4px);
  box-shadow: 0 10px 24px rgba(0,0,0,.22);
}
.hover-lift:active{
  transform: translateY(-1px) scale(.99);
  box-shadow: 0 6px 16px rgba(0,0,0,.18);
}

/* Sheen për .btn-brand (shkëlqim diagonal në hover) */
.btn-brand{ position:relative; overflow:hidden; }
.btn-brand::after{
  content:"";
  position:absolute; inset:0 -60% 0 -60%;
  background: linear-gradient(120deg, transparent 20%, rgba(255,255,255,.18) 40%, transparent 60%);
  transform: translateX(-120%) skewX(-20deg);
  transition: transform .6s ease;
  pointer-events:none;
}
.btn-brand:hover::after{ transform: translateX(0) skewX(-20deg); }

/* Bonus i butë për HERO title */
.hero:hover h1{
  text-shadow: 0 6px 40px rgba(0,0,0,.7), 0 0 18px rgba(0,192,112,.18);
}

/* Respecto preferencat e përdoruesit */
@media (prefers-reduced-motion: reduce){
  .fade-up, .pop-in{ animation:none!important; opacity:1!important; transform:none!important; }
  .hover-lift, .btn-brand::after{ transition:none!important; }
}




/* =========================== BMI / Kalori / Ujë  =========================== */

.calc-section {
  min-height: calc(100vh - var(--nav-h));
  background: var(--surface-2);
}

.calc-card {
  background: var(--surface);
  border-radius: 1.5rem;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.05);
  max-width: 700px;
}

.calc-card .title {
  color: var(--brand);
  font-weight: 800;
  font-size: 1.8rem;
}

/* Etiketat dhe inputet */
.calc-card .label {
  font-weight: 700;
  color: var(--ink-700);
  margin-bottom: 0.4rem;
}

.calc-card .input,
.calc-card select {
  border: 1.5px solid #e2e8f0;
  border-radius: 2rem;
  padding: 0.8rem 1rem;
  font-size: 1rem;
  background: #fff;
  transition: border 0.2s, box-shadow 0.2s;
}

.calc-card .input:focus,
.calc-card select:focus {
  border-color: var(--brand);
  box-shadow: 0 0 0 4px var(--ring);
}

/* Butoni */
.calc-card .btn {
  background: linear-gradient(90deg, var(--brand), var(--brand-700));
  border: none;
  border-radius: 0.75rem;
  color: #fff;
  font-weight: 700;
  padding: 1rem;
  transition: filter 0.2s, transform 0.1s;
}

.calc-card .btn:hover { filter: brightness(1.1); }
.calc-card .btn:active { transform: translateY(1px); }

/* Rezultatet */
.calc-card .results {
  margin-top: 1.5rem;
  padding: 1.5rem;
  background: var(--surface);
  border-radius: 1rem;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.04);
  animation: fadeInUp 0.5s ease;
}

.calc-card .res-item {
  display: flex;
  justify-content: space-between;
  padding: 0.6rem 0;
  border-bottom: 1px dashed #e5e7eb;
}

.calc-card .res-item:last-child { border-bottom: 0; }

.calc-card .res-label { font-weight: 700; color: var(--ink-700); }
.calc-card .res-value { font-weight: 700; }

.calc-card .small {
  font-size: 0.875rem;
  color: var(--muted);
}

.calc-card .error {
  display: none;
  margin-top: 0.5rem;
  color: #dc2626;
  font-weight: 700;
  text-align: center;
}

@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(15px); }
  to { opacity: 1; transform: translateY(0); }
}

/** =========================== QUIZ MODAL =========================== */
.quiz-modal {
  position: fixed;
  inset: 0;
  display: none;
  justify-content: center;
  align-items: center;
  background: rgba(0, 0, 0, 0.78);
  z-index: 99999;
}

.quiz-content {
  background: #111827;
  padding: 28px;
  border-radius: 16px;
  width: 92%;
  max-width: 420px;
  text-align: center;
  color: white;
  animation: fadeIn .3s ease;
}

.quiz-btn {
  width: 100%;
  padding: 12px;
  margin: 6px 0;
  background: #222;
  border: 1px solid #333;
  border-radius: 10px;
  color: white;
  cursor: pointer;
  transition: .2s;
}

.quiz-btn:hover {
  background: #16a34a;
  border-color: #16a34a;
}

.quiz-input {
  width: 100%;
  padding: 12px;
  background: #1f2937;
  border: none;
  color: white;
  border-radius: 10px;
}

@keyframes fadeIn {
  from { opacity: 0; transform: scale(.95); }
  to   { opacity: 1; transform: scale(1); }
}



/* Seksioni i planit të rekomanduar */
.recommended-section {
  background: #f5f7fb;              /* gri shumë e lehtë */
  padding: 64px 16px;
}

.recommended-section h2 {
  color: #0f172a;                    /* blu e errët / e lexueshme */
  font-weight: 700;
}

.recommended-section p {
  color: #64748b;                    /* gri e butë për tekstin dytësor */
}

/* Kutia e planit */
.recommended-box {
  background: #ffffff;
  border-radius: 20px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  padding: 32px;
  max-width: 480px;
  margin: 24px auto 0 auto;
  box-shadow: 0 18px 45px rgba(15, 23, 42, 0.12);
  text-align: center;
}

.recommended-box h3 {
  color: #0f172a;
  font-size: 1.6rem;
  font-weight: 700;
}

.recommended-box p {
  color: #64748b;
}

/* Butoni */
.recommended-box .btn.btn-brand-dark {
  background-color: #16a34a;
  border-color: #16a34a;
  color: #ffffff;
  border-radius: 999px;
  padding: 10px 28px;
  font-weight: 600;
  transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease;
}

.recommended-box .btn.btn-brand-dark:hover {
  background-color: #15803d;
  box-shadow: 0 10px 25px rgba(22, 163, 74, 0.35);
  transform: translateY(-1px);
}

/* Teksti i zbritjes */
.recommended-box .text-danger {
  color: #dc2626 !important;
  margin-top: 12px;
}

.recommended-section h2,
.recommended-section h3,
.recommended-section p {
  color: inherit !important;
}


.quiz-modal {
  position: fixed;
  inset: 0;
  display: none;
  justify-content: center;
  align-items: center;
  background: rgba(0, 0, 0, 0.78);
  z-index: 99999;
}

.quiz-content {
  position: relative;           /* KJO E RENDESISHME */
  background: #0b1220;
  padding: 28px 24px 24px;
  border-radius: 18px;
  width: 92%;
  max-width: 420px;
  text-align: center;
  color: #fff;
}


.quiz-close {
  position: absolute;
  top: 10px;
  right: 10px;
  background: rgba(255,255,255,0.1);
  border: none;
  color: #fff;
  font-size: 18px;
  width: 32px;
  height: 32px;
  border-radius: 999px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: .2s;
}

.quiz-close:hover {
  background: rgba(255,255,255,0.25);
  transform: scale(1.05);
}