/* ======================================================
   AeroŽďár 2.0
   Design System
   Autor: Jiří Klíma 
   ====================================================== */

/* ===== Google Font ===== */

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&display=swap');

/* ===== Proměnné ===== */

:root{

    --bg:#07111d;
    --bg2:#0d1b2f;

    --primary:#2bb5ff;
    --primary2:#008cff;

    --success:#00d084;
    --warning:#ffb703;
    --danger:#ff4d6d;

    --white:#ffffff;
    --text:#d8e6f3;
    --muted:#9fb5ca;

    --glass:rgba(255,255,255,.10);
    --glassBorder:rgba(255,255,255,.15);

    --radius:22px;

    --shadow:
        0 15px 45px rgba(0,0,0,.35);

    --transition:.35s ease;

}

/* ===== Reset ===== */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
}

body{

    font-family:'Poppins',sans-serif;

    color:var(--white);

    background:
        radial-gradient(circle at top,#0d2748 0%,#07111d 60%,#03070c 100%);

    overflow-x:hidden;

}

/* Scrollbar */

::-webkit-scrollbar{
    width:10px;
}

::-webkit-scrollbar-track{
    background:#08131f;
}

::-webkit-scrollbar-thumb{
    background:var(--primary);
    border-radius:20px;
}

/* ===== Odkazy ===== */

a{

    color:inherit;

    text-decoration:none;

    transition:var(--transition);

}

img{

    max-width:100%;

    display:block;

}

.container{

    position:relative;

    z-index:2;

}
/* ======================================================
   HEADER
====================================================== */

.main-header{

    position:fixed;

    top:0;

    left:0;

    width:100%;

    padding:18px 0;

    z-index:9999;

    transition:.4s;

    background:rgba(6,16,28,.35);

    backdrop-filter:blur(20px);

    border-bottom:1px solid rgba(255,255,255,.08);

}

.main-header.scrolled{

    padding:10px 0;

    background:rgba(4,10,18,.88);

    box-shadow:0 10px 35px rgba(0,0,0,.35);

}

.navbar{

    padding:0;

}

.logo{

    display:flex;

    align-items:center;

    gap:15px;

}

.logo-icon{

    width:58px;

    height:58px;

    border-radius:50%;

    display:flex;

    justify-content:center;

    align-items:center;

    background:linear-gradient(135deg,#35c5ff,#006dff);

    font-size:24px;

    color:white;

    box-shadow:0 12px 30px rgba(0,140,255,.45);

}

.logo-text{

    display:flex;

    flex-direction:column;

}

.logo-text .title{

    font-size:25px;

    font-weight:700;

    letter-spacing:.5px;
        color:#ffffff;

}

.logo-text .subtitle{

    font-size:12px;

    color:var(--muted);

}

.navbar-nav{

    gap:8px;

}

.nav-item{

    position:relative;

}

.nav-link{

    color:white !important;

    font-weight:500;

    padding:12px 18px !important;

    border-radius:30px;

    transition:.3s;

}

.nav-link:hover{

    color:white !important;

    background:rgba(255,255,255,.08);

}

.nav-link.active{

    background:linear-gradient(135deg,#29b8ff,#0078ff);

}

.nav-link::after{

    content:"";

    position:absolute;

    bottom:4px;

    left:50%;

    width:0;

    height:2px;

    transform:translateX(-50%);

    background:white;

    transition:.3s;

}

.nav-link:hover::after{

    width:50%;

}

.btn-login{

    display:flex;

    align-items:center;

    gap:10px;

    padding:12px 22px;

    border-radius:40px;

    background:linear-gradient(135deg,#29b8ff,#006cff);

    color:white;

    font-weight:600;

    transition:.35s;

    box-shadow:0 12px 25px rgba(0,140,255,.35);

}

.btn-login:hover{

    transform:translateY(-3px);

    color:white;

}

.navbar-toggler{

    border:none;

    color:white;

    font-size:28px;

}

.navbar-toggler:focus{

    box-shadow:none;

}

/* Mobile */

@media(max-width:991px){

.main-header{

    padding:15px;

}

.logo-text .subtitle{

    display:none;

}

.navbar-collapse{

    margin-top:20px;

    border-radius:20px;

    padding:20px;

    background:rgba(10,22,40,.96);

}

.navbar-nav{

    gap:15px;

}

.btn-login{

    justify-content:center;

}