/* ==========================================================
   SP44MS
   HERO.CSS
   ========================================================== */
   
   
#hero{

    position:relative;

    width:100%;

    overflow:hidden;
	
	height: 47vw;
	
	/*background:red;*/

}   

.godlo {
    background-image: url(../img/godlo150.png);
    background-size: 5.8vw;
    width: 5.8vw;
    height: 5.8vw;
    position: absolute;
    right: 2vw;
    top: 5.5vw;
	z-index:5;
}
/*.logo {
    background-image: url(../img/logo.png);
    background-size: 12vw;
    width: 12vw;
    height: 12vw;
    position: absolute;
    left: 2vw;
    top: 2vw;
	z-index:1000;
}*/


.logo{

    background-image:url(../img/logo.png);
    background-size:12vw;
    width:12vw;
    height:12vw;
    position:absolute;
    left:2vw;
    top:2vw;
    z-index:1000;

    opacity:1;
    filter:blur(0);
    transform:scale(1);

    transition:
        opacity .05s ease,
        transform .05s ease,
        filter .05s ease;
}

.logo.hide{

    opacity:0;
    filter:blur(0.4167vw);
    transform:scale(.9);

    pointer-events:none;
}

/*
.logo{
    background-image:url(../img/logo.png);
    background-size:12vw;
    width:12vw;
    height:12vw;
    position:absolute;
    left:2vw;
    top:2vw;
    z-index:1500;

    opacity:1;
    transform:scale(1);
    transition:
		opacity .05s ease,
		transform .05s ease;
}

.logo.hide{
    opacity:0;
    transform:scale(.8);
    pointer-events:none;
}
*/

/*
.logo.hide{
    opacity:0;
    transform:translateY(-1.0417vw);
}
/*
.logo.hide{
    opacity:0;
    transform:translateY(-0.7812vw) scale(.85);
}
*/

/* ==========================================
   TŁO Z BANNEREM
   ========================================== */
   
   
  .hero-background{

    position:absolute;

    inset:0;

    overflow:hidden;

    z-index:1;
	
	height:45vw;

}

.hero-background img{

    display:block;

    width:100%;

    height:auto;
	
	display:block;
    transform-origin:center center;
    animation:heroZoom 20s ease-in-out infinite alternate;
    will-change:transform;

}

/* ==========================================
   CIEMNA NAKŁADKA
   ========================================== */

.hero-overlay{

    position:absolute;

    inset:0;

    background:
    linear-gradient(
        90deg,
        rgba(4,18,40,.30) 0%,
		rgba(4,18,40,.20) 20%,
        rgba(4,18,40,.10) 40%,
		rgba(4,18,40,.10) 60%,
        rgba(4,18,40,.20) 80%,
        rgba(4,18,40,.30) 100%
    );

    z-index:2;

}

/* ==========================================
   ŚWIATŁO
   ========================================== */

#hero::before{

    content:"";

    position:absolute;

    width:46.875vw;

    height:46.875vw;

    right:-13.0208vw;

    top:-13.0208vw;

    border-radius:50%;

    background:

    radial-gradient(
        circle,
        rgba(255,255,255,.22),
        transparent 70%
    );

    filter:blur(3.125vw);

    z-index:2;

}

/* ==========================================
   NIEBIESKIE ŚWIATŁO
   ========================================== */

#hero::after{

    content:"";

    position:absolute;

    left:-18.2292vw;

    bottom:-18.2292vw;

    width:36.4583vw;

    height:36.4583vw;

    border-radius:50%;

    /*background:

    radial-gradient(
        circle,
        rgba(0,174,239,.25),
        transparent 75%
    );*/

    filter:blur(4.1667vw);

    z-index:2;

}

/* ==========================================
   KONTENER
   ========================================== */

.hero-content{

    position:relative;

    z-index:5;

    width:100%;

    /*min-height:100vh;*/

    color:#fff;
	
	/*background:gold;*/
	
	height:48vw;

}

.hero-content .container{

    position:absolute;

    left:50%;

    top:63%;

    transform:translate(-50%,-50%);

    width:100%;

}

/* ==========================================
   TYTUŁ
   ========================================== */

.hero-title{

    font-size:clamp(3.5rem,5vw,6rem);

}

.hero-subtitle{

    font-size:clamp(2rem,3vw,3.8rem);

}

.hero-content h1{

    font-family:"Cantora One",sans-serif;
    font-weight:400;
    line-height:1.1;
    color:#fff;
    text-align:center;
	font-size:4.8vw;
}

.hero-content h2{

    font-family:"Cantora One",sans-serif;
    font-weight:400;
    line-height:1.1;
    color:#fff;
    text-align:center;
	font-size:3.0vw;
}

.hero-content h3{

    font-family:"Cantora One",sans-serif;
    font-weight:400;
    line-height:1.1;
    color:#fff;
    text-align:center;
	font-size:1.7vw;
	margin-top:2vw;
}

/* ==========================================
   OPIS
   ========================================== */

.hero-content p{

    max-width:29.1667vw;

    font-size:1.25rem;

    line-height:1.9;

    color:rgba(255,255,255,.92);

    margin-bottom:2.3438vw;

}
/* ==========================================
   PRZYCISKI HERO
   ========================================== */

.hero-buttons{

    width:100%;

}

.hero-buttons-kontener{

    display:flex;

    justify-content:center;

    align-items:center;

    flex-wrap:wrap;

    gap:0.9375vw;

}

.hero-buttons-kontener{
	
	margin:4vw auto 0 auto;
	
}

.hero-buttons .btn-primary{

    min-width:11.4583vw;

    height:3.2292vw;

    font-size:1rem;

    font-weight:700;

    letter-spacing:.03em;

}

.hero-buttons .btn-secondary{

    min-width:11.4583vw;

    height:3.2292vw;

    background:rgba(173,60,82,.6);

}

.hero-buttons .btn-secondary:hover{

    background:#ffffff;

    color:var(--primary);

}

/* ==========================================
   PŁYWAJĄCE OKRĘGI
   ========================================== */

.hero-circle{

    position:absolute;

    border-radius:50%;

    backdrop-filter:blur(0.4167vw);

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

    border:0.0521vw solid rgba(255,255,255,.18);

    animation:floatCircle 9s ease-in-out infinite;

    z-index:3;

}

.hero-circle.one{

    width:6.7708vw;
    height:6.7708vw;

    top:18%;

    right:18%;

}

.hero-circle.two{

    width:3.6458vw;
    height:3.6458vw;

    top:62%;

    right:10%;

    animation-delay:2s;

}

.hero-circle.three{

    width:9.375vw;
    height:9.375vw;

    bottom:-3.125vw;

    right:34%;

    animation-delay:4s;

}

/* ==========================================
   SCROLL
   ========================================== */

.hero-scroll{

    position:absolute;

    left:50%;

    bottom:1.8229vw;

    transform:translateX(-50%);

    z-index:5;

    display:flex;

    flex-direction:column;

    align-items:center;

    color:#fff;

    font-size:.85rem;

    letter-spacing:.2em;

    text-transform:uppercase;

    opacity:.8;

}

.hero-scroll::after{

    content:"";

    width:0.1042vw;

    height:2.8646vw;

    margin-top:0.625vw;

    background:#ffffff;

    animation:scrollLine 2s infinite;

}

/* ==========================================
   UKOŚNY SEPARATOR
   ========================================== */

#hero .hero-shape{

    position:absolute;

    left:0;

    right:0;

    bottom:-0.0521vw;

    height:8.8542vw;

    background:#ffffff;

    clip-path:polygon(
        0 70%,
        100% 0,
        100% 100%,
        0 100%
    );

    z-index:4;

}

/* ==========================================
   ANIMACJA WEJŚCIA
   ========================================== */

.hero-top{

    animation:fadeDown .9s ease;

}

.hero-content h1{

    animation:fadeLeft 1s ease;

}

.hero-content h2{

    animation:fadeRight 1s ease;

}

.hero-content p{

    animation:fadeLeft 1.2s ease;

}

.hero-buttons{

    animation:fadeUp 1.4s ease;

}

/* ==========================================
   ANIMACJE
   ========================================== */

@keyframes heroZoom{

    from{
        transform:scale(1);
    }

    to{
        transform:scale(1.04);
    }

}

@keyframes floatCircle{

    0%{

        transform:translateY(0.0vw);

    }

    50%{

        transform:translateY(-1.0417vw);

    }

    100%{

        transform:translateY(0.0vw);

    }

}

@keyframes fadeLeft{

    from{

        opacity:0;

        transform:translateX(-3.125vw);

    }

    to{

        opacity:1;

        transform:translateX(0);

    }

}

@keyframes fadeRight{

    from{

        opacity:0;

        transform:translateX(3.125vw);

    }

    to{

        opacity:1;

        transform:translateX(0);

    }

}

@keyframes fadeDown{

    from{

        opacity:0;

        transform:translateY(-2.0833vw);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

@keyframes fadeUp{

    from{

        opacity:0;

        transform:translateY(2.6042vw);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

@keyframes scrollLine{

    0%{

        transform:scaleY(0);

        transform-origin:top;

    }

    50%{

        transform:scaleY(1);

        transform-origin:top;

    }

    51%{

        transform-origin:bottom;

    }

    100%{

        transform:scaleY(0);

        transform-origin:bottom;

    }

}