:root {
    --text-main: #ffffff;
    --text-muted: #cfcfcf;
    --accent: #c00000;
    --font-primary:'Orbitron', 'Helvetica Neue', Arial, sans-serif;


}

/* RESET */
* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior: smooth; }
body { font-family: var(--font-primary); color: var(--text-main); background: #000; }

/* HEADER */
.header {
    position: fixed; top:0; width:100%;
    background: rgba(0,0,0,0.7); backdrop-filter: blur(6px); z-index:1000;
}
.nav-container { 
    max-width: 1200px; 
    margin: auto; 
    padding: 1.8rem 2rem; /* taller header */
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
}

.logo { 
    color: white; 
    text-decoration: none; 
    font-weight: 900;       /* thicker */
    font-size: 1.8rem;      /* bigger logo */
    letter-spacing: 2px; 
}

nav a { 
    color: white; 
    text-decoration: none; 
    margin-left: 2.5rem; 
    font-size: 1.1rem;      /* bigger nav links */
    font-weight: 600;       /* thicker links */
}

nav a:hover { color: var(--accent); }

/* FULLSCREEN SECTIONS */
.section-bg { min-height:100vh; position:relative; display:flex; align-items:center; }
.section-bg::before { 
    content:""; position:absolute; inset:-1px; 
    background: linear-gradient(to bottom, rgba(0,0,0,0.95), rgba(0,0,0,0.55), rgba(0,0,0,0.95)); 
    z-index:1; 
}

/* CONTENT AREA */
.section-content {
    position: relative; z-index:2; max-width:1200px; margin:auto;
    padding:6rem 2.5rem; backdrop-filter:blur(6px); border-radius:14px;
    box-shadow:0 20px 60px rgba(0,0,0,0.6); background: rgba(0,0,0,0.55);
}

/* HERO: move text slightly up */
.hero .section-content {
    padding-top: 4rem; /* reduced top padding to move frame up */
}

/* TEXT */
.section-content h1, .section-content h2 { font-size:3rem; margin-bottom:1rem; }
.section-content p { color: var(--text-muted); max-width:750px; font-size:1.05rem; }

/* BACKGROUNDS */
.hero { background:url("Slike/slika71.jpg") center/cover no-repeat; }
.about { background:url("Slike/slika7.jpg") center/cover no-repeat; }
.team { background:url("Slike/slika59.jpg") center/cover no-repeat; }
.gallery { background:url("Slike/slika9.jpg") center/cover no-repeat; }
.contact { background:url("Slike/slika69.jpg") center/cover no-repeat; }

/* GRID */
.grid { display:grid; gap:2rem; }

/* TEAM 2x2 BIG CARDS */
#team .grid {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(2, auto);
    gap:3rem;
    justify-items:center; align-items:start;
}
#team .card {
    background: rgba(0,0,0,0.6);
    padding:1.5rem; border-radius:14px; text-align:center;
    width:100%; max-width:300px; box-shadow:0 12px 28px rgba(0,0,0,0.6);
    cursor:pointer; transition: transform 0.3s ease;
}
#team .card:hover { transform: translateY(-5px); }
#team .card img { width:100%; height:250px; object-fit:cover; border-radius:14px; margin-bottom:1rem; }

/* MODAL */
.modal {
    display:none; position:fixed; z-index:2000; left:0; top:0; width:100%; height:100%;
    overflow-y:auto; background: rgba(0,0,0,0.85);
}
.modal-content {
    background:#1c1c1c; color:#fff; margin:5% auto; padding:2rem;
    border-radius:12px; width:90%; max-width:600px; text-align:left; position:relative;
}
.modal-content h2 { margin-bottom:1rem; }
.close { color:#fff; position:absolute; top:10px; right:20px; font-size:2rem; cursor:pointer; }

/* ===== GALLERY SCROLL AREA ===== */
.gallery-wrapper {
    margin-top: 2rem;
    max-height: calc((200px + 1.5rem) * 4); /* 4 visible rows */
    overflow-y: auto;
    padding-right: 10px;
}

/* GRID: 4 columns per row */
.gallery-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
}

.gallery-grid img {
    width: 100%;
    height: 200px;      /* fixed height for uniformity */
    object-fit: cover;  /* crop image if needed */
    border-radius: 12px;
    transition: transform 0.4s ease;
}

.gallery-grid img:hover { transform: scale(1.05); }

.more-images { display: none; margin-top: 2rem; }

/* SEE MORE BUTTON */
.gallery-btn {
    display:block; margin:2.5rem auto 0 auto; padding:0.9rem 2.8rem;
    background: rgba(0,0,0,0.4); border:1px solid white; color:white;
    font-size:0.9rem; letter-spacing:1px; text-transform:uppercase;
    border-radius:999px; cursor:pointer; transition: all 0.3s ease;
}
.gallery-btn:hover { background:white; color:black; }

/* FOOTER */
.footer { background:black; text-align:center; padding:2rem; font-size:0.9rem; color:var(--text-muted); }