/* =========================
   KB SHKUPI FULL CSS
========================= */

/* --- VARIABLES --- */
:root {
    --bg-body: #050505;
    --bg-card: #0f0f0f;
    --glass-bg: rgba(10,10,10,0.85);
    --glass-blur: 15px;

    --accent-blue: #0033cc;
    --accent-glow: #0055ff;

    --text-main: #ffffff;
    --text-muted: #b0b0b0;

    --font-head: 'Oswald', sans-serif;
    --font-body: 'Montserrat', sans-serif;
}

/* --- RESET --- */
* { margin:0; padding:0; box-sizing:border-box; }
body { background:var(--bg-body); color:var(--text-main); font-family:var(--font-body); line-height:1.6; overflow-x:hidden; }
img { max-width:100%; display:block; }
a { text-decoration:none; color:inherit; transition:0.3s; }
ul { list-style:none; }

/* --- TYPOGRAPHY --- */
h1,h2,h3,h4 { font-family:var(--font-head); text-transform:uppercase; font-weight:700; letter-spacing:1px; }
.section-title { font-size:2.5rem; margin-bottom:40px; display:inline-block; position:relative; }
.section-title::after { content:''; display:block; width:50%; height:4px; background:var(--accent-blue); margin-top:5px; }

/* --- UTILITY --- */
.container { max-width:1200px; margin:0 auto; padding:0 20px; }
.section-padding { padding:80px 0; }
.blue-text { color:var(--accent-blue); }

/* --- BUTTONS --- */
.btn { display:inline-block; padding:14px 35px; background:var(--accent-blue); color:white; font-family:var(--font-head); font-weight:700; text-transform:uppercase; border:1px solid var(--accent-blue); cursor:pointer; transition:all 0.3s ease; text-align:center; }
.btn:hover { background:transparent; color:var(--accent-glow); border-color:var(--accent-glow); box-shadow:0 0 20px rgba(0,85,255,0.4); }
.btn-outline { background:transparent; border:1px solid white; }
.btn-outline:hover { background:white; color:black; }

/* HEADER */
header {
    position: fixed;
    top:10px; left:50%;
    transform:translateX(-50%);
    width:95%;
    max-width:1200px;
    padding:18px 30px;
    background:var(--glass-bg);
    backdrop-filter:blur(var(--glass-blur));
    -webkit-backdrop-filter:blur(var(--glass-blur));
    border-radius:6px;
    border:1px solid #ffffff1a; /* stroke */
    z-index:1000;
    box-shadow:0 10px 30px rgba(0,0,0,0.5);
}

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

.logo img { height:38px; width:auto; transition:0.3s; }
.logo:hover img { opacity:0.8; }

/* NAV LINKS */
.nav-menu { display:flex; align-items:center; gap:30px; }
.nav-link { font-family:var(--font-body); font-weight:600; font-size:0.9rem; text-transform:uppercase; letter-spacing:0.5px; }
.nav-link:hover { color:var(--accent-glow); }
.nav-link.active { color:var(--accent-blue); }

/* LANGUAGE DROPDOWN */
.lang-dropdown {
    position: relative;
    display: flex;
    align-items: center;
    padding-left: 20px;
    margin-left: 20px;
    border-left:1px solid rgba(255,255,255,0.2);
}

.lang-btn-trigger {
    background:transparent;
    border:none;
    color:var(--text-muted);
    font-family:var(--font-body);
    font-weight:600;
    font-size:0.9rem;
    cursor:pointer;
    display:flex;
    align-items:center;
    gap:5px;
    padding:5px 10px;
    transition:0.3s;
}
.lang-btn-trigger:hover { color:white; }

/* DROPDOWN MENU */
.lang-menu-content {
    display:none;
    position:absolute;
    top:120%;
    right:0;
    background:var(--glass-bg);
    border-radius:6px; /* rounded */
    border:1px solid #ffffff1a; /* same stroke as topbar */
    min-width:160px;
    flex-direction:column;
    z-index:100;
    padding:7px 0; /* top & bottom */
}

.lang-menu-content button {
    display:flex;
    align-items:center;
    gap:8px;
    width:100%;
    padding:8px 12px;
    background:transparent;
    border:none;
    color:var(--text-main);
    font-family:var(--font-body);
    font-weight:600;
    font-size:0.9rem;
    cursor:pointer;
    text-align:left;
    white-space:nowrap;
    transition:0.2s;
    border-radius:0;
}

/* CURRENT SELECTED LANGUAGE */
.lang-menu-content button.active-lang {
    background: rgba(0, 51, 204, 0.2); /* transparent accent-blue */
}

/* HOVER */
.lang-menu-content button:hover { background: var(--accent-blue); color:white; }

.lang-dropdown.show .lang-menu-content { display:flex; }

/* HERO */
.hero { height:100vh; background:linear-gradient(to right, rgba(0,0,0,0.9), rgba(0,0,0,0.3)), url('https://images.unsplash.com/photo-1549719386-74dfcbf7dbed?q=80&w=1920&auto=format&fit=crop'); background-size:cover; background-position:center; display:flex; align-items:center; padding-top:80px; }
.hero-content h1 { font-size:5rem; line-height:1; margin-bottom:30px; text-align:left; }
.hero-btns { display:flex; gap:20px; flex-wrap:wrap; justify-content:center; margin-top:20px; }

/* CARDS */
.grid-3 { display:grid; grid-template-columns: repeat(auto-fit, minmax(300px,1fr)); gap:30px; }
.card { background:var(--bg-card); border:1px solid #222; transition:0.3s; }
.card:hover { transform:translateY(-5px); border-color:var(--accent-blue); }
.card-img-top { height:220px; width:100%; object-fit:cover; filter:grayscale(30%); transition:0.3s; }
.card:hover .card-img-top { filter:grayscale(0%); }
.card-body { padding:25px; }

/* FOOTER */
footer { background:#000; border-top:1px solid #111; padding:60px 20px 20px; text-align:center; }
.footer-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(200px,1fr)); gap:40px; margin-bottom:40px; }
.footer-logo-img { height:70px; width:auto; margin-bottom:20px; margin-left:auto; margin-right:auto; }
.footer-col h4 { color:var(--accent-blue); margin-bottom:20px; }
.footer-col ul li { margin-bottom:10px; color:#888; }
.footer-col ul li a:hover { color:white; }
.social-icons { display:flex; justify-content:center; gap:20px; }

/* HAMBURGER */
.hamburger { display:none; flex-direction:column; cursor:pointer; gap:5px; }
.hamburger span { height:3px; width:25px; background:white; border-radius:2px; transition:0.3s; }

/* MOBILE */
@media(max-width:768px){
    header { top:10px; left:50%; transform:translateX(-50%); width:calc(100% - 20px); padding:15px; } /* small padding on edges */
    .nav-flex { flex-direction:row; justify-content:space-between; align-items:center; }
    .nav-menu { display:none; flex-direction:column; background:var(--glass-bg); backdrop-filter:blur(var(--glass-blur)); -webkit-backdrop-filter:blur(var(--glass-blur)); border-radius:6px; border:1px solid #ffffff1a; padding:20px; position:absolute; top:65px; left:0; width:100%; z-index:999; gap:15px; }
    .nav-menu.show { display:flex; }
    .nav-link { font-size:1rem; color:#ccc; }
    .lang-dropdown { margin-left:0; padding-left:0; border-left:none; justify-content:flex-start; }
    .hero-content h1 { font-size:3rem; }
    .hero-btns { flex-direction:row; justify-content:center; width:100%; margin-top:15px; }
    .btn { width:auto; }
    .hamburger { display:flex; }
}