/* ==========================================================
   SP44MS
   HEADER.CSS
   ========================================================== */

#header{

    position:fixed;

    top:0;
    left:0;

    width:100%;

    z-index:var(--z-header);

    transition:all .4s ease;

    background:transparent;

}

#header.scrolled{

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

    backdrop-filter:blur(0.9375vw);

    -webkit-backdrop-filter:blur(0.9375vw);

    box-shadow:0 0.4167vw 1.8229vw rgba(0,0,0,.08);

}

#header .container{

    display:flex;

    justify-content:space-between;

    align-items:center;

    min-height:4.9479vw;

}

/* =======================================
   LOGO
   ======================================= */

.logo{

    display:flex;

    align-items:center;

    gap:0.9375vw;

    flex-shrink:0;

}

.logo img{

    height:3.4375vw;

    width:auto;

    transition:.35s;

}

#header.scrolled .logo img{

    height:2.9167vw;

}

/* =======================================
   MENU
   ======================================= */

#navigation{

    display:flex;

    align-items:center;

}

#navigation ul{

    display:flex;

    align-items:center;

    gap:2.0833vw;

}

#navigation li{

    position:relative;

}

#navigation a{

    position:relative;

    font-size:.96rem;

    font-weight:600;

    color:#ffffff;

    letter-spacing:.03em;

    transition:.3s;

}

#header.scrolled #navigation a{

    color:var(--text);

}

/* =======================================
   ANIMOWANE PODKREŚLENIE
   ======================================= */

#navigation a::after{

    content:"";

    position:absolute;

    left:0;

    bottom:-0.4167vw;

    width:0;

    height:0.1562vw;

    border-radius:1.0417vw;

    background:var(--accent);

    transition:.35s;

}

#navigation a:hover{

    color:var(--accent);

}

#navigation a:hover::after{

    width:100%;

}

/* =======================================
   PRAWA STRONA
   ======================================= */

.header-buttons{

    display:flex;

    align-items:center;

    gap:0.9375vw;

}

/* =======================================
   BUTTON
   ======================================= */

.btn-primary{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    height:2.9167vw;

    padding:0 1.7708vw;

    border-radius:52.0312vw;

    font-weight:700;

    color:#fff;

    background:var(--gradient-primary);

    box-shadow:0 0.625vw 1.8229vw rgba(0,87,184,.28);

    transition:.35s;

}

.btn-primary:hover{

    transform:translateY(-0.2083vw);

    box-shadow:0 1.0417vw 2.0833vw rgba(0,87,184,.35);

}

/* =======================================
   DRUGI PRZYCISK
   ======================================= */

.btn-secondary{
	
	font-size: 1.5em;
	
	/*font-weight: bold;*/
	
	font-family: "Cantora One", sans-serif;
	font-weight: 400;
	font-style: normal;

    display:inline-flex;

    align-items:center;

    justify-content:center;

    height:2.9167vw;

    padding:0 1.7708vw;
	
	margin: 0 0.5208vw;

    border-radius:52.0312vw;

    border:0.1042vw solid rgba(255,255,255,.75);

    color:#fff;

    transition:.35s;

}

.btn-secondary:hover{

    background:#fff;

    color:var(--primary);

}

#header.scrolled .btn-secondary{

    color:var(--primary);

    border-color:var(--primary);

}

/* =======================================
   HAMBURGER
   ======================================= */

#mobile-button{

    display:none;

    width:2.5vw;

    height:2.5vw;

    position:relative;

}

#mobile-button span{

    position:absolute;

    left:0.5208vw;

    width:1.4583vw;

    height:0.1562vw;

    border-radius:0.5208vw;

    background:#fff;

    transition:.35s;

}

#header.scrolled #mobile-button span{

    background:var(--text);

}

#mobile-button span:nth-child(1){

    top:0.7292vw;

}

#mobile-button span:nth-child(2){

    top:1.1458vw;

}

#mobile-button span:nth-child(3){

    top:1.5625vw;

}

/* =======================================
   HOVER LOGO
   ======================================= */

.logo:hover img{

    transform:scale(1.05);

}

/* =======================================
   RESPONSIVE
   ======================================= */

@media(max-width:57.2917vw){

#navigation{

display:none;

}

#mobile-button{

display:block;

}

.btn-primary{

display:none;

}

}

@media(max-width:40.0vw){

#header .container{

min-height:4.1667vw;

}

.logo img{

height:2.8125vw;

}

}













.site-header{

    position:fixed;

    top:0;

    left:0;

    width:100%;

    z-index:1000;

    transition:var(--transition);

}

.header-container{

    /*max-width:72.9167vw;*/

    height:var(--header-height);

    margin:auto;

    display:flex;

    align-items:center;

    justify-content:space-between;

}

/*.site-header{

    background:rgba(5,18,40,.62);

    backdrop-filter:blur(0.9375vw);

    -webkit-backdrop-filter:blur(0.9375vw);

}*/

.site-header{

    background:rgba(8,18,38,.01);

    backdrop-filter:blur(0.9375vw);

    -webkit-backdrop-filter:blur(0.9375vw);

    border-bottom:0.0521vw solid rgba(255,255,255,.12);

}

/*.header-scrolled*/

.site-header.header-scrolled{

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

    box-shadow:0 0.5208vw 2.0833vw rgba(0,0,0,.12);

}

.logo{

    display:flex;

    align-items:center;

}

.logo img{

    height:3.3333vw;

    transition:.25s;

}

.header-scrolled .logo img{

    height:2.9167vw;

}