@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700;800&display=swap');
:root{
  --primary:#3b82f6;--secondary:#8b5cf6;--dark:#0b1222;--darker:#070c18;--muted:#a3adc2;
  --card:rgba(255,255,255,.06);--bd:rgba(255,255,255,.1);--radius:16px;--shadow:0 10px 30px rgba(0,0,0,.45);
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{font-family:'Inter',sans-serif;background:var(--dark);color:#fff;line-height:1.7}
a{color:inherit;text-decoration:none}
.container{width:92%;max-width:1200px;margin:0 auto}
/* NAV */
.navbar{position:sticky;top:0;z-index:1000;background:rgba(7,12,24,.85);backdrop-filter:blur(12px);border-bottom:1px solid rgba(255,255,255,.06)}
.navbar .wrap{display:flex;align-items:center;justify-content:space-between;padding:14px 0}
.logo{display:flex;align-items:center;gap:10px;font-weight:800;letter-spacing:.4px}
.logo i{color:var(--primary)}
.nav-links{display:flex;align-items:center;gap:18px;font-weight:600}
.nav-links a{color:#e8ecff;opacity:.9}
.nav-links a:hover{color:#fff}
.lang{display:flex;align-items:center;gap:10px;margin-left:8px}
.lang a{opacity:.8;border:1px solid rgba(255,255,255,.15);padding:6px 10px;border-radius:12px;display:flex;align-items:center;gap:8px}
.lang a:hover{opacity:1;border-color:var(--primary)}
.flag{width:18px;height:12px;border-radius:2px;box-shadow:0 0 0 1px rgba(0,0,0,.2) inset}
.flag.al{background:linear-gradient(#e03131,#d21f3c)}
.flag.mk{background:radial-gradient(circle at 50% 50%,#ffd43b 0 12px,#c92a2a 12px 100%)}
/* HERO */
.hero{min-height:520px;display:flex;align-items:center;background:url('assets/hero-bg.svg') center/cover no-repeat}
.hero .content{padding:90px 0;text-align:left}
.hero h1{font-size:3rem;font-weight:800;margin-bottom:12px}
.hero p{max-width:700px;color:#d7e0ff;margin-bottom:22px}
.cta{display:flex;flex-wrap:wrap;gap:12px}
.btn{display:inline-flex;align-items:center;gap:10px;padding:12px 22px;border-radius:14px;font-weight:700;border:1px solid transparent;cursor:pointer;background:#fff;color:var(--primary)}
.btn:hover{background:var(--primary);color:#fff}
.btn.ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.25)}
.btn.ghost:hover{border-color:var(--primary)}
/* SECTIONS */
.section{padding:90px 0}
.section-title{text-align:center;font-size:2.1rem;font-weight:800;margin-bottom:14px}
.section-sub{text-align:center;color:var(--muted);margin-bottom:28px}
.grid{display:grid;gap:26px;grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.card{background:var(--card);border:1px solid var(--bd);border-radius:var(--radius);padding:24px;box-shadow:var(--shadow);transition:transform .35s ease, box-shadow .35s ease}
.card:hover{transform:translateY(-8px);box-shadow:0 20px 40px rgba(59,130,246,.35)}
.card h3{margin:6px 0 6px 0}
.muted{color:var(--muted)}
/* PROJECTS GALLERY */
.gallery{display:grid;gap:20px;grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.gallery figure{position:relative;overflow:hidden;border-radius:14px;border:1px solid var(--bd)}
.gallery img{width:100%;height:190px;object-fit:cover;display:block;transform:scale(1);transition:transform .4s ease}
.gallery figure:hover img{transform:scale(1.08)}
.gallery figcaption{position:absolute;inset:auto 0 0 0;background:linear-gradient(transparent, rgba(0,0,0,.7));padding:10px 12px;font-weight:700}
/* MODAL */
.modal{position:fixed;inset:0;background:rgba(0,0,0,.85);display:none;align-items:center;justify-content:center;padding:20px;z-index:2000}
.modal.active{display:flex}
.modal img{max-width:95vw;max-height:85vh;border-radius:14px;border:1px solid rgba(255,255,255,.2)}
.modal .close{position:fixed;top:18px;right:18px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.25);padding:10px 14px;border-radius:12px;cursor:pointer}
/* PRICING/VPS */
.pricing .plan{display:flex;flex-direction:column;gap:12px;align-items:flex-start}
.plan img{width:100%;height:160px;object-fit:cover;border-radius:12px;border:1px solid var(--bd)}
.plan .price{font-size:1.6rem;font-weight:800}
/* TESTIMONIALS */
.testimonials{display:grid;gap:22px;grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.quote{padding:20px;border-radius:14px;background:var(--card);border:1px solid var(--bd)}
/* FOOTER */
.footer{background:var(--darker);padding:40px 0;text-align:center;border-top:1px solid rgba(255,255,255,.06)}
.footer .social a{margin:0 8px;color:#aab4ce}
.footer .social a:hover{color:#fff}
/* RESPONSIVE */
@media(max-width:768px){.hero h1{font-size:2.3rem}.nav-links{flex-wrap:wrap}}

/* --- Language flags --- */
.flag-img{width:22px;height:16px;border-radius:3px;object-fit:cover;box-shadow:0 0 0 1px rgba(0,0,0,.2) inset}
.navbar .lang a{padding:6px 10px;border-radius:12px;border:1px solid rgba(255,255,255,.15)}

/* --- Hero overlay for Skopje photo --- */
.hero{position:relative;min-height:580px;background:url('assets/shkupi.jpg') center/cover no-repeat}
.hero::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(7,12,24,.55),rgba(7,12,24,.85));}
.hero .content{position:relative}

/* --- Bigger auth forms --- */
.auth{display:flex;align-items:center;justify-content:center;padding:90px 0}
.auth .card{max-width:520px;width:100%}
.auth form{display:flex;flex-direction:column;gap:14px}
.auth input{padding:14px;border-radius:12px;border:1px solid rgba(255,255,255,.2);background:rgba(255,255,255,.06);color:#fff;font-size:1rem}
.auth button.btn{width:100%;justify-content:center}

/* --- Feature tiles with images --- */
.features.grid .card{padding:0}
.features .thumb{height:160px;border-bottom:1px solid var(--bd);background:#0f162c}
.features .thumb img{width:100%;height:100%;object-fit:cover;border-top-left-radius:var(--radius);border-top-right-radius:var(--radius)}
.features .body{padding:18px}

/* --- Stats with icons --- */
.stats .stat .icon{height:70px;margin-bottom:10px}
.stats .stat .icon img{height:100%;}

/* --- About page --- */
.about-hero{min-height:320px;background:url('assets/shkupi.jpg') center/cover no-repeat;position:relative}
.about-hero::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(7,12,24,.5),rgba(7,12,24,.85));}
.about-hero .container{position:relative;padding:80px 0}
.timeline{display:grid;gap:16px}
.timeline .card{display:flex;gap:16px;align-items:flex-start}
.timeline .card i{font-size:22px;color:var(--primary)}

/* --- Navbar improvements when logged in --- */
.badge{background:rgba(255,255,255,.1);padding:4px 10px;border-radius:999px;border:1px solid var(--bd);font-size:.85rem}

/* --- Buttons group --- */
.btn-group{display:flex;gap:10px;flex-wrap:wrap}

/* --- FIX: Improve hero readability & CTA visibility --- */
.hero{position:relative;min-height:640px;background:url('assets/shkupi.jpg') center/cover no-repeat}
.hero::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(7,12,24,.45),rgba(7,12,24,.78));}
.hero .content{position:relative;z-index:2;max-width:980px;padding:140px 0 120px;}
.hero h1{color:#fff;line-height:1.15;text-shadow:0 2px 18px rgba(0,0,0,.55);}
.hero p{color:#e9eefc;max-width:760px;margin-top:10px;font-size:1.1rem;text-shadow:0 1px 10px rgba(0,0,0,.45);}
.btn{background:var(--primary,#6c8cff);color:#0b1020;border:0;}
.btn.ghost{background:transparent;color:#fff;border:1px solid rgba(255,255,255,.7);}
.btn:hover{filter:brightness(1.07)}
.btn.ghost:hover{background:rgba(255,255,255,.08)}

/* ensure navbar doesn't overlap hero text */
.navbar{position:sticky;top:0;z-index:50}

/* --- FIX: Pse SkopjeCloud layout --- */
.advantages.grid, .grid.advantages{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:24px}
.advantages .card{text-align:center;padding:24px;display:flex;flex-direction:column;align-items:center;justify-content:flex-start}
.advantages .card img.icon{height:80px;margin-bottom:12px}

/* --- FIX: video sizing --- */
.video-section video{max-width:880px;width:100%;border-radius:16px;box-shadow:0 6px 22px rgba(0,0,0,.5);margin:auto;display:block}
.video-section{padding-top:20px;text-align:center}

/* --- FIX: Pse SkopjeCloud & Statistika cards uniform --- */
.advantages .card{text-align:center;padding:28px;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;background:rgba(255,255,255,.02);border:1px solid rgba(255,255,255,.08);border-radius:16px;transition:.3s}
.advantages .card:hover{transform:translateY(-4px);border-color:rgba(255,255,255,.2)}
.advantages .card img.icon{height:72px;margin-bottom:14px}

.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:24px;margin-top:24px}
.stats .stat{text-align:center;padding:28px;background:rgba(255,255,255,.02);border:1px solid rgba(255,255,255,.08);border-radius:16px;transition:.3s}
.stats .stat:hover{transform:translateY(-4px);border-color:rgba(255,255,255,.2)}
.stats .stat h3{font-size:2rem;color:#fff;margin-bottom:8px}
.stats .stat p{color:#cbd5e1}

/* --- FIX: Pse SkopjeCloud card image alignment --- */
.advantages{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:24px}
.advantages .card{position:relative;overflow:hidden;text-align:center;padding:28px 20px;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;background:rgba(255,255,255,.02);border:1px solid rgba(255,255,255,.08);border-radius:16px;transition:.3s}
.advantages .card img.icon{display:block;max-width:80px;height:auto;margin:0 auto 14px auto}
.advantages .card h3{margin:6px 0;font-size:1.25rem;color:#fff}
.advantages .card p{color:#cbd5e1;font-size:.95rem}

/* --- FIX: Hero smaller & clearer --- */
.hero{position:relative;min-height:440px;background:url('assets/shkupi.jpg') center/cover no-repeat}
.hero::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(7,12,24,.35),rgba(7,12,24,.65));}
.hero .content{position:relative;z-index:2;max-width:860px;padding:100px 0 80px;}
.hero h1{font-size:2.2rem;color:#fff;text-shadow:0 2px 14px rgba(0,0,0,.5)}
.hero p{font-size:1.05rem;color:#e9eefc;text-shadow:0 1px 10px rgba(0,0,0,.45)}

/* --- FIX: Main Services with professional icons/photos --- */
.services{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:28px;margin-top:32px}
.services .card{background:rgba(255,255,255,.02);border:1px solid rgba(255,255,255,.08);border-radius:16px;text-align:center;padding:28px;transition:.3s;display:flex;flex-direction:column;align-items:center}
.services .card:hover{transform:translateY(-5px);border-color:rgba(255,255,255,.2)}
.services .card img{height:90px;margin-bottom:16px;object-fit:contain}
.services .card h3{color:#fff;margin-bottom:8px;font-size:1.2rem}
.services .card p{color:#cbd5e1;font-size:.95rem}

/* --- HERO BACKGROUND --- */
.hero{position:relative;min-height:440px;background:url('assets/shkupi.jpg') center/cover no-repeat}
.hero::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(7,12,24,.25),rgba(7,12,24,.45));}
.hero .content{position:relative;z-index:2;max-width:860px;padding:100px 0 80px}

/* --- MAIN SERVICES & FEATURES --- */
.services{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:28px;margin-top:32px}
.services .card{background:rgba(255,255,255,.02);border:1px solid rgba(255,255,255,.08);border-radius:16px;text-align:center;padding:28px;transition:.3s;display:flex;flex-direction:column;align-items:center}
.services .card:hover{transform:translateY(-5px);border-color:rgba(255,255,255,.2);box-shadow:0 0 12px rgba(59,130,246,.3)}
.services .card img{height:80px;width:auto;margin-bottom:16px;object-fit:contain}
.services .card h3{color:#fff;margin-bottom:8px;font-size:1.2rem}
.services .card p{color:#cbd5e1;font-size:.95rem}

/* --- Pse SkopjeCloud --- */
.advantages{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:24px;margin-top:24px}
.advantages .card{background:rgba(255,255,255,.02);border:1px solid rgba(255,255,255,.08);border-radius:16px;padding:28px;text-align:center;transition:.3s;display:flex;flex-direction:column;align-items:center}
.advantages .card:hover{transform:translateY(-5px);border-color:rgba(255,255,255,.2);box-shadow:0 0 12px rgba(59,130,246,.3)}
.advantages .card img{height:72px;width:auto;margin-bottom:12px;object-fit:contain}
.advantages .card h3{color:#fff;margin-bottom:8px;font-size:1.1rem}
.advantages .card p{color:#cbd5e1;font-size:.95rem}

/* --- Statistika --- */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:24px;margin-top:24px}
.stats .stat{background:rgba(255,255,255,.02);border:1px solid rgba(255,255,255,.08);border-radius:16px;padding:28px;text-align:center;transition:.3s}
.stats .stat:hover{transform:translateY(-5px);border-color:rgba(255,255,255,.2);box-shadow:0 0 12px rgba(59,130,246,.3)}
.stats .stat h3{font-size:2rem;color:#fff;margin-bottom:8px}
.stats .stat p{color:#cbd5e1;font-size:.95rem}

/* --- Login & Register Forms --- */
.auth-form{max-width:460px;margin:60px auto;padding:32px;background:rgba(255,255,255,.02);border:1px solid rgba(255,255,255,.08);border-radius:16px;box-shadow:0 0 20px rgba(0,0,0,.45)}
.auth-form h2{text-align:center;color:#fff;margin-bottom:20px;font-size:1.5rem}
.auth-form input{width:100%;padding:14px 16px;margin-bottom:16px;border-radius:10px;border:1px solid rgba(255,255,255,.2);background:rgba(0,0,0,.35);color:#fff;font-size:1rem}
.auth-form button{width:100%;padding:14px;border-radius:10px;background:#2563eb;color:#fff;font-weight:600;font-size:1rem;cursor:pointer;transition:.3s}
.auth-form button:hover{background:#1d4ed8}

/* --- HERO HOMEPAGE BACKGROUND --- */
.hero{position:relative;height:400px;background:url('assets/shkupibackground.jpg') center/cover no-repeat;display:flex;justify-content:center;align-items:center;text-align:center;color:#fff}
.hero .overlay{position:absolute;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.45)}
.hero-content{position:relative;z-index:2;max-width:800px;padding:20px}
.hero-content h1{font-size:3rem;margin-bottom:20px;font-weight:700}
.hero-content p{font-size:1.2rem;margin-bottom:30px}
.hero-content .btn{background:#ff6600;color:#fff;padding:12px 25px;margin:5px;border-radius:8px;text-decoration:none;transition:background .3s ease}
.hero-content .btn:hover{background:#e55b00}
.hero-content .btn-secondary{background:#0066cc}
.hero-content .btn-secondary:hover{background:#004d99}

/* --- FIX: Advantages & Stats uniform --- */
.advantages{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:24px;margin-top:24px}
.advantages .card{background:rgba(255,255,255,.02);border:1px solid rgba(255,255,255,.08);border-radius:16px;padding:32px;text-align:center;transition:.3s;display:flex;flex-direction:column;align-items:center;justify-content:flex-start}
.advantages .card:hover{transform:translateY(-5px);border-color:rgba(255,255,255,.2);box-shadow:0 0 12px rgba(59,130,246,.3)}
.advantages .card img{max-height:80px;width:auto;margin-bottom:16px;object-fit:contain}
.advantages .card h3{color:#fff;margin-bottom:10px;font-size:1.3rem}
.advantages .card p{color:#cbd5e1;font-size:1rem}

/* --- Statistika uniform --- */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:28px;margin-top:24px}
.stats .stat{background:rgba(255,255,255,.02);border:1px solid rgba(255,255,255,.08);border-radius:16px;padding:36px;text-align:center;transition:.3s;display:flex;flex-direction:column;align-items:center;justify-content:center}
.stats .stat:hover{transform:translateY(-5px);border-color:rgba(255,255,255,.2);box-shadow:0 0 12px rgba(59,130,246,.3)}
.stats .stat h3{font-size:2.4rem;color:#fff;margin-bottom:10px}
.stats .stat p{color:#cbd5e1;font-size:1.05rem}

/* --- Bigger Login & Register --- */
.auth-form{max-width:540px;margin:100px auto;padding:48px;background:rgba(255,255,255,.03);backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.1);border-radius:18px;box-shadow:0 0 28px rgba(0,0,0,.55)}
.auth-form h2{text-align:center;color:#fff;margin-bottom:28px;font-size:2rem}
.auth-form input{width:100%;padding:16px 18px;margin-bottom:20px;border-radius:12px;border:1px solid rgba(255,255,255,.25);background:rgba(0,0,0,.35);color:#fff;font-size:1.05rem;transition:.3s}
.auth-form input:focus{border-color:#3b82f6;box-shadow:0 0 0 3px rgba(59,130,246,.4);outline:none}
.auth-form button{width:100%;padding:16px;border-radius:12px;background:#2563eb;color:#fff;font-weight:700;font-size:1.1rem;cursor:pointer;transition:.3s}
.auth-form button:hover{background:#1d4ed8}

/* Vetëm card-at brenda seksionit Pse SkopjeCloud */
h2.section-title + .grid .card {
    background: #070c18; /* sfond i lehtë për këto card */
    border-radius: 10px;
    padding: 1.5rem;
    text-align: center;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

h2.section-title + .grid .card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 16px rgba(0,0,0,0.15);
}

h2.section-title + .grid .card .icon {
    width: 250px;
    height: 150px;
    margin-bottom: 1rem;
}

h2.section-title + .grid .card h3 {
    font-size: 1.2rem;
    margin-bottom: 0.5rem;
    color: #fff;
}

h2.section-title + .grid .card .muted {
    color: #fff;
    font-size: 0.95rem;
    line-height: 1.4;
}

/* Siguro që teksti të jetë mbi çdo gjë tjetër */
.about-hero .container {
    position: relative; /* vendos pozicion relativ për layering */
    z-index: 1;         /* siguro që të jetë mbi sfond ose elemente tjera */
}

/* Siguro që të mund të klikohen elementët */
.about-hero .section-title,
.about-hero .section-sub {
    color: #fff !important;  /* ngjyra e bardhë */
    pointer-events: auto;    /* bën tekstin klikues nëse është link ose select */
}

/* Footer i gjerë dhe i organizuar */
.footer {
    background: #111;
    color: #fff;
    padding: 3rem 2rem 1rem;
    font-size: 0.9rem;
}

.footer a {
    color: #fff;
    text-decoration: none;
    transition: color 0.3s;
}

.footer a:hover {
    color: #00aaff;
}

/* Grid për kolona horizontale */
.footer-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 2rem;
    margin-bottom: 2rem;
}

/* Secili seksion brenda footer */
.footer-about,
.footer-links,
.footer-social {
    flex: 1 1 200px; /* siguron që të zgjerohet në mënyrë proporcionale */
}

.footer-links ul {
    list-style: none;
    padding: 0;
    display: flex;        /* i rendit horizontalisht */
    flex-wrap: wrap;
    gap: 1.5rem;
}

.footer-links li {
    margin-bottom: 0.5rem;
}

.footer-social a {
    margin-right: 1.5rem;
    font-size: 1.3rem;
}

/* Footer bottom center */
.footer-bottom {
    text-align: center;
    border-top: 1px solid #222;
    padding-top: 1rem;
    font-size: 0.85rem;
    color: #aaa;
}

/* =========================
   Contact Page Styles
   ========================= */

/* Container i kontaktit */
.contact-grid {
    display: flex;
    flex-direction: column; /* Rendit vertikalisht në mobile */
    align-items: center;
    text-align: center;
    gap: 40px;
    padding: 40px 20px;
}

/* Informacioni i kontaktit */
.contact-info {
    max-width: 500px;
}

.contact-info h2 {
    font-size: 2rem;
    margin-bottom: 20px;
    color: #00aaff;
}

.contact-info p {
    font-size: 1rem;
    margin: 8px 0;
    line-height: 1.5;
}

.contact-info a {
    color: #00aaff;
    text-decoration: none;
    transition: color 0.3s;
}

.contact-info a:hover {
    color: #0088cc;
}

/* Ikonat sociale */
.contact-info .social {
    margin-top: 20px;
}

.contact-info .social a {
    margin: 0 10px;
    font-size: 1.5rem;
    color: #00aaff;
    transition: color 0.3s;
}

.contact-info .social a:hover {
    color: #0088cc;
}

/* Forma e kontaktit */
.contact-form {
    width: 100%;
    max-width: 500px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.contact-form h2 {
    font-size: 2rem;
    margin-bottom: 20px;
    color: #00aaff;
    text-align: center;
}

.contact-form label {
    align-self: flex-start; /* label majtas input-it për qartësi */
    margin-bottom: 5px;
    font-weight: 500;
}

/* Input & textarea */
.contact-form input,
.contact-form textarea {
    width: 100%;
    padding: 12px 15px;
    margin-bottom: 15px;
    font-size: 1rem;
    border: 1px solid #ccc;
    border-radius: 6px;
    box-sizing: border-box;
    transition: border-color 0.3s, box-shadow 0.3s;
}

/* Efekt fokus */
.contact-form input:focus,
.contact-form textarea:focus {
    border-color: #00aaff;
    box-shadow: 0 0 5px rgba(0,170,255,0.5);
    outline: none;
}

/* Butoni */
.contact-form button {
    padding: 12px 25px;
    font-size: 1rem;
    border: none;
    border-radius: 6px;
    background-color: #00aaff;
    color: #fff;
    cursor: pointer;
    transition: background 0.3s, transform 0.2s;
}

.contact-form button:hover {
    background-color: #0088cc;
    transform: translateY(-2px);
}


}
/* CSS për navbar responsive */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.navbar {
  background-color: #0b1222;
  color: #ffffff;
  padding: 15px 0;
  position: sticky;
  top: 0;
  z-index: 1000;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.wrap {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.logo {
  font-size: 1.5rem;
  font-weight: bold;
  display: flex;
  align-items: center;
  color: #ffffff;
}

.logo i {
  margin-right: 10px;
  font-size: 1.8rem;
  color: #3b82f6;
}

/* Menyja e rregullt për desktop */
.nav-links {
  display: flex;
  align-items: center;
  gap: 10px;
}

.nav-links a {
  color: #ffffff;
  text-decoration: none;
  display: flex;
  align-items: center;
  padding: 8px 12px;
  border-radius: 4px;
  transition: background-color 0.3s;
  font-weight: 500;
}

.nav-links a:hover {
  background-color: #ffffff;
  color: #ffffff;
}

.nav-links a i {
  margin-right: 8px;
  color: #ffffff;
}

.lang {
  display: flex;
  gap: 8px;
  margin-left: 10px;
}

.flag-img {
  width: 24px;
  height: 16px;
  object-fit: cover;
  border-radius: 2px;
}

/* Butoni hamburger për mobile */
.hamburger {
  display: none;
  flex-direction: column;
  justify-content: space-between;
  width: 30px;
  height: 21px;
  cursor: pointer;
}

.hamburger span {
  height: 3px;
  width: 100%;
  background-color: #ffffff;
  border-radius: 3px;
  transition: all 0.3s;
}

/* Stilizimi për mobile */
@media (max-width: 968px) {
  .hamburger {
    display: flex;
  }
  
  .nav-links {
    position: fixed;
    top: 69px;
    left: -100%;
    width: 100%;
    height: calc(100vh - 69px);
    background-color: #000000;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding-top: 30px;
    gap: 0;
    transition: left 0.3s ease;
    overflow-y: auto;
  }
  
  .nav-links.active {
    left: 0;
  }
  
  .nav-links a {
    width: 80%;
    text-align: center;
    padding: 15px;
    margin-bottom: 10px;
    border: 1px solid rgba(0, 0, 0, 0.1);
    color: #ffffff;
  }
  
  .lang {
    margin-top: 20px;
    margin-left: 0;
  }
  
  /* Animimi i hamburger-it kur menu është e hapur */
  .hamburger.active span:nth-child(1) {
    transform: translateY(9px) rotate(45deg);
  }
  
  .hamburger.active span:nth-child(2) {
    opacity: 0;
  }
  
  .hamburger.active span:nth-child(3) {
    transform: translateY(-9px) rotate(-45deg);
  }
}
/* Seksioni i rishikimeve */
.testimonials {
  padding: 60px 20px;
  background: ##1C1736;
  text-align: center;
}

.testimonials .section-title {
  font-size: 2rem;
  margin-bottom: 10px;
}

.testimonials .section-sub {
  color: #666;
  margin-bottom: 40px;
}

.testimonials .grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 30px;
}

.testimonials .card {
  background: #DEDCE4;
  padding: 25px 20px;
  border-radius: 15px;
  box-shadow: 0 4px 15px rgba(0,0,0,0.1);
  width: 100%;
  max-width: 350px; /* kartat nuk e kalojnë këtë madhësi */
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.testimonials .card p {
  font-style: italic;
  color: #333;
  margin-bottom: 15px;
}

.testimonials .card h4 {
  font-size: 1.1rem;
  margin-bottom: 5px;
  color: #222;
}

.testimonials .card span {
  font-size: 0.9rem;
  color: #777;
}

/* Yjet për vlerësim */
.testimonials .stars {
  color: green; /* këtu vendosim jeshile */
  margin-bottom: 10px;
}

.testimonials .stars i {
  margin: 0 2px;
}

/* Responsivitet për mobile */
@media (max-width: 768px) {
  .testimonials .grid {
    flex-direction: column;
    align-items: center;
  }
}