@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');

@font-face {
    font-family: 'Footlight MT Pro';
    font-style: normal;
    font-weight: 300;
    src: local('Footlight MT Pro'), url('https://fonts.cdnfonts.com/s/45042/FootlightMTProLight.woff') format('woff');
}

:root{
    --kolor-uzupelniajacy:#9B2A17;
    --kolor-jasny: #CABDAD;
    --kolor-ciemny: #161616;
}

/* GLOBALNE */
*{
    transition: 1s;
    box-sizing: border-box;
}
html{
    scroll-behavior: smooth;/*płynne przewijane*/
    font-size: 10px; /*nowy bazowy rozmiar fontu*/
} 
body{
    font-size: 1.6rem;
    font-family: "Inter", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
}
input{
    font-family: inherit;
    width: 100%;
}
p{
    line-height: 140%;
    font-size: clamp(1.5rem);
}
h1{
    font-family: 'Footlight MT Pro';
    font-weight: 300;
    text-align: left;
    font-size: 5rem;
}
h2{
    font-size: 3rem;
    font-family: "Inter" sans-serif;
    font-optical-sizing: auto;
    font-weight: 500;
    font-style: normal;
    text-transform: uppercase;
}
h3{
    font-size: 2.4rem;
    font-family: "Inter" sans-serif;
    font-optical-sizing: auto;
    font-weight: 500;
    font-style: normal;
    text-transform: uppercase;
}
h4{
    font-family: 'Footlight MT Pro';
    font-weight: 300;
    text-align: center;
    font-size: 4rem;
    text-transform: uppercase;
}
h5{
    font-size: 1.8rem;
    font-family: "Inter" sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
    text-transform: uppercase;
}
h6{
    font-size: 1.6rem;
    font-family: "Inter" sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
    text-transform: uppercase;
}
img{
    max-width: 100%;
    /* width: 100%; */
}
.button
a.button {
    font-family: "Inter", sans-serif;
    font-size: 1.8rem;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;          
  text-transform: uppercase;
}

.burger{
    display: none;
    position: fixed;
    top: 2rem;
    right: 2rem;

    background-color: var(--kolor-ciemny);
    color: var(--kolor-jasny);
    font-size: 2.5rem;
    padding: .25rem .7rem .75rem;

    cursor: pointer;

    /*kolejność warstw*/
    z-index: 10;/*domyślnie jest 0, zmieniając na 1 element będzie ponad wszystkimi co mają 0 (z-index może też być ujemne, żeby przesunąć pod spód*/
}
.burger:hover{
    color:var(--kolor-jasny);
    opacity: 50%;
}
.nakladka{
    background-color: var(--kolor-uzupelniajacy);
    position: fixed;
    width: 0; /*szerokość będzie dynamicznie zmieniana skryptrem w html*/
    height: 100%;
    overflow: hidden; /*ukrywa wszystko co wystaje poza box*/
    right: 0;

    z-index:20;

    display: flex;
    justify-content: center;
    align-items: center;
}
.zamknijX{
    color: var(--kolor-jasny);
    position: absolute;
    top: 2rem;
    right: 2rem;

    cursor: pointer;

    font-size: 3rem;
    padding: .5rem 1.2rem;
}
.zamknijX:hover{
    color: var(--kolor-jasny);
    opacity: 50%;
}
.nakladka ol{
    width: 100%;
}
.nakladka ol li{
    margin-bottom: 2vh;
}
.nakladka ol li a{
    /*background-color: yellow;*/
    display: block;
    text-align: center;
    text-decoration: none;
    font-size: 1.5rem;
    padding: 1rem 0;
    max-width: 1160px;

    color: var(--kolor-jasny);
}
.nakladka ol li.button a:hover{
    background-color: var(--kolor-ciemny);
    color: var(--kolor-uzupelniajacy);
}
.logo-mobile{
    display: flex;
    justify-content: center;
    margin-bottom: 2rem;
}

.logo-mobile a{
    display: inline-block;
}

.logo-mobile img{
    width: 180px; /* lub tyle ile chcesz */
    height: auto;
    display: block;
}


/* NAV DESKTOP */
nav{
    background-color: var(--kolor-ciemny);
    padding: 2rem;

    display: flex;
    justify-content: center;
    align-items: center;

    /* sledzaca nawigacja */
    position: fixed;
    width: 100%;
    z-index: 10;
}
nav .zawartosc{
    display: flex;
    justify-content: space-between;
    align-items: center;
}
nav a{
    /* background-color: green; */
    display: block;
    text-transform: uppercase;
    text-decoration: none;
}
nav ol{
    /* background-color: red; */
    display: flex;
    gap: 1vw;
}
nav ol a{
    /* background-color: yellow; */
    color: var(--kolor-jasny);
    
    padding: 1rem 2vw;
}
nav ol a:hover{
opacity: 40%;
}

.buy-menu{
    background-color: var(--kolor-uzupelniajacy);
    color: var(--kolor-jasny);
    padding: 1rem 2rem;
    font-weight: 400;
    text-align: center;
}
.buy-menu:hover{
    background-color:var(--kolor-ciemny);
   color: var(--kolor-uzupelniajacy);
}


/*WSZYSTKIE SEKCJE*/
section{
   min-height: 100vh;/*vh = viewport height = % wys. okna przygl.*/

   display: flex;
   flex-direction: row; /*domyslnie*/
   flex-direction: column;

   justify-content: center;
   align-items: center;

   scroll-margin-top: 93px;/*zeby nav nie zaslaniala zawartosci sekcji*/
    padding: 40px 20px;
}
.zawartosc{
    /*FLEX ITEMS*/
    max-width: 1400px;
    width: 100%; /*przywracamy max szerokości*/

    display: flex;
}
/* POSZCZEGÓLNE SEKCJE */
#hero{
    /* max-height: 940px; */
    background: url(../img/Hero_BG.jpg);
    background-size: cover;
    background-position: center bottom;
    background-repeat: no-repeat;
    position: relative;

  /* min-height: 940px; */
}
.sun{
    position: absolute;
    right: 0;
    top: 93px;
    width: clamp(150px, 50vw, 350px);
    /* transform: translateX(207%) translateY(-60%); */
}

#hero .zawartosc{
    /* background-color: red; */
    color: var(--kolor-jasny);
    display: flex;
    flex-direction: column;
    gap: 2vh;
    justify-content: left;/*nie dziala = row column to zmienia justify/align*/
    margin-top: 50px;
    margin-bottom: 50px;
}

.logo{
    /* background-color: green; */
    /* max-width: 250px; */
    /* max-height: 250px; */
    min-width: 100%;
    /* display: flex;
    justify-content: center;
    align-items: center; */
    margin-bottom: 30px;
    /* margin-top: 200px; */
    z-index: 2;
}
.logo img{
    max-width: none;
    max-width: 200%;
}

#hero h3{
    text-align: left;
    margin-bottom: -5px;
    color: var(--kolor-uzupelniajacy);
}
#hero h2{
text-align: left;
margin-bottom: 15px;
color: var(--kolor-jasny);
}
#hero .buttony{
    display: flex;
    align-items: center;
    
    gap: 2rem;
}
#hero .buy a{
display: block;
text-decoration: none;
background-color: var(--kolor-uzupelniajacy);
padding: 1.3rem 1.3rem;
align-items: center;
justify-content: center;
max-width: 217px;
text-align: center;
color: var(--kolor-jasny);
}
#hero .buy a:hover{
   background-color:var(--kolor-ciemny);
   color: var(--kolor-uzupelniajacy);
}

#hero .trailer a{
    border: 1px solid var(--kolor-jasny);
    display: flex;
    gap: 10px;
    align-items: center;
    padding: 10px 20px;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--kolor-jasny);
}

#hero .trailer img{
    height: 20px;
    display: block;
}
#hero .trailer a:hover{
    background-color: var(--kolor-uzupelniajacy);

}

/* LINE UP SEKCJA */
#lineup{
    /* max-height: 708px; */
    background: url(../img/LINEUP_BG.png);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    text-justify: left;

    min-height: 940px;

    position: relative;

    padding-top: 0;
}

.pattern{
    background: url(../img/LINEUP_PATTERN.svg) center top;
    background-repeat: repeat-x;
    height: 60px;
    width: 100%;
    /* background-color: blue; */

    position: absolute;
    top: 0;
}
.pattern img{
    width: 100%;
position: absolute;
top: 0;
right: 0;
}

#lineup h1{
    color: var(--kolor-jasny);
   
    text-align: left;
    justify-content: left;
    margin-top: 50px;
    
}
#lineup .zawartosc{
    text-align: left;
    flex-wrap: wrap;
    gap: 2vh;
    justify-content: left;/*nie dziala = row column to zmienia justify/align*/
    margin-top: 50px;
    margin-bottom: 50px;
}
#lineup article{
    /* background-color: pink; */
    flex: 1 1 300px;
    text-align: center;
    scroll-snap-align: center;
    position: relative;
    text-align: left;

}
#lineup h4{
    position: absolute;
    bottom: 2rem;
    left: 50%;
    transform: translateX(-50%);

    color: var(--kolor-jasny);
}
#lineup img{
    max-width: auto;
    width: 100%;
}

 
#schedule{
    background: url(../img/SCHEDULE_BG.png);
    background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  text-justify: left;
  position: relative;
}
.obiekt1 img{
    position: absolute;
    top: clamp(5rem, 10vw, 5rem);
    right: clamp(1rem, 3vw, 10rem);

    width: clamp(120px, 20vw, 200px);
}
.obiekt2 img{
    position: absolute;

    left: clamp(0rem, 0vw, 0rem);
    bottom: clamp(-2rem, -3vw, -5rem);

    width: clamp(130px, 17vw, 250px);
}

#schedule h1{
    color: var(--kolor-jasny);
}
#schedule .zawartosc{
     text-align: left;
    flex: 1 1 300px;

    
    flex-wrap: wrap;
    gap: 10vh;
    justify-content: space-evenly;/*nie dziala = row column to zmienia justify/align*/
    margin-top: 50px;
    margin-bottom: 50px;
   
}
#schedule h5{
    color: var(--kolor-jasny);
}

#schedule .tabela{
    flex: 1;
    max-height: 500px;
    background-color: var(--kolor-ciemny);
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 70px;
}
.wiersz{
    color: var(--kolor-jasny);
display: grid;
grid-template-columns: 80px 1fr;
gap: 15px;

padding: 10px 0;
border-bottom: 1px solid var(--kolor-jasny);
}
.wiersz span:last-child{
    overflow-wrap: break-word;
}

#info{
    position: relative;
    background-color: var(--kolor-ciemny);
    color: var(--kolor-jasny);
    padding: 50px 0;
}
.container-info{
    width: min(1400px, 90%);
    margin: 0 auto;

    display: flex;
    gap: 5rem;
    align-items: flex-start;
}
.about{
    flex: 1.4;
    min-width: 0;
}

.right-column{
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3rem;
}

.right-column img,
.tancerki img{
    width: 100%;
    height: auto;
    display: block;
}

.about,
.location{
    text-align: left;
    z-index: 2;
    max-width: 1400px;
    
}
#info h1{
    margin-bottom: 1.5rem;
}
#info p{
    line-height: 1.6;
}
.about P:not(:last-child){
    margin-bottom: 1.5rem;
}

.sponsors{
    overflow: hidden;
    background-color: var(--kolor-uzupelniajacy);
    padding: 1rem 0;
    margin-top: 0;
}

.przesuwany-pasek{
    overflow: hidden;
    background-color: var(--kolor-uzupelniajacy);
    padding: 2rem;
}

.track{
    display: flex;
    align-items: center;
    gap: 5rem;

    width: max-content;

    animation: scroll 20s linear infinite;
}

.track img{
    height: 60px;
    width: auto;
    flex-shrink: 0;
}

@keyframes scroll{
    from{
        transform: translateX(0);
    }

    to{
        transform: translateX(-20%);
    }
}

#faq{
    position: relative;
    background: var(--kolor-ciemny);
    padding: 50px 0;
    align-items: center;
    justify-content: center;
}

#faq .pattern2{
    background: url(../img/FAQ_PATTERN.svg) center bottom;
    background-repeat: repeat-x;
    width: 100%;
    height: 60px;

    position: absolute;
    bottom: 0;
}

#faq h1{
    width: min(1400px, 90%);
    margin: 50px auto;
    text-align: left;
    color: var(--kolor-jasny);
}

.container {
    width: min(1400px, 90%);
    margin: 0 auto;
}


.faq-item {
    border-top: 1px solid var(--kolor-jasny);
}

.faq-item:last-child {
    border-bottom: 1px solid var(--kolor-jasny);
}

.faq-question {
    width: 100%;
    background: transparent;
    border: none;
    color: var(--kolor-jasny);
    cursor: pointer;

    display: flex;
    justify-content: space-between;
    align-items: center;

    padding: 18px 0;

    text-align: left;
    font-size: 1rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.icon {
    font-size: 3rem;
    line-height: 2;
    transition: transform .3s ease;
}

.faq-item.active .icon {
    transform: rotate(45deg);
}

.faq-answer {
    max-height: 0;
    overflow: hidden;

    color: var(--kolor-jasny);
    line-height: 1.8;

    transition:
        max-height .35s ease,
        padding .35s ease;

    padding: 0;
}

.faq-item.active .faq-answer {
    max-height: 200px;
    padding: 0 0 24px;
}

#stopka{
    background: var(--kolor-ciemny);
    padding: 70px 0;

}

.stopka-kontener{
    width: min(1400px, 90%);
    margin: 0 auto;

    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr 1.8fr;
    gap: 60px;
}

.logo{
    width: 220px;
    height: auto;
    display: block;
    margin-bottom: 25px;
    min-width: 20%;
}

.sociale{
    display: flex;
    gap: 25px;
}

.sociale img{
    width: 28px;
    height: 28px;
    display: block;
    transition: opacity .3s;
}

.sociale img:hover{
    opacity: .7;
}

.stopka-menu{
    display: flex;
    flex-direction: column;
    gap: 18px;
}
.stopka-menu h6 {
    color: var(--kolor-jasny);
}
.stopka-menu a{
    color: var(--kolor-jasny);
    text-decoration: none;
    letter-spacing: .03em;
    transition: color .3s;
}

.stopka-menu a:hover{
    opacity: 50%;
}

.newsletter h6{
    color: var(--kolor-jasny);
    margin: 0 0 15px;
    line-height: 1.2rem;
}

.newsletter p{
    color: var(--kolor-jasny);
    line-height: 1.4;
    margin-bottom: 25px;
    max-width: 300px;
}

.newsletter-form{
    display: flex;
    width: 100%;
}

.newsletter-form input{
    flex: 1 1 auto;
    min-width: 0;

    height: 52px;

    background: transparent;
    border: 1px solid var(--kolor-jasny);

    color: var(--kolor-jasny);

    padding: 0 20px;
    outline: none;
}

.newsletter-form input::placeholder{
    color: var(--kolor-jasny);
}

.newsletter-form button{
    flex: 0 0 auto;
    border: none;
    cursor: pointer;
    white-space: nowrap;

    font-size: 1.6rem;
    font-family: "Inter" sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
    text-transform: uppercase;
    padding: 1rem 3rem;

    background: var(--kolor-uzupelniajacy);
    color: var(--kolor-jasny);

    transition: .3s;
}

.newsletter-form button:hover{
    background-color:var(--kolor-ciemny);
    color: var(--kolor-uzupelniajacy);
}
.copyright{
    display: flex;
    justify-content: center;
    align-items: center;

    width: 100%;
    margin-top: 40px;
    color: var(--kolor-jasny);
}

/* ****************  RWD  ***************** */
/* od największej szerokości do najmniejszej */
 /*@media (max-width: 1000px) {} /*koniec 1000px */

 @media (max-width: 750px){
    body{
        font-size: 2rem;
    }
    /*Odkrywamy nav mobile*/
    .burger{
        display: block;
    }
    /*Ukrywamy nav desktop*/
    nav{
        display: none;
    }

    #hero{
        background: url(../img/HERO_BG_mobile.jpg);
    }
    .container-info{
        flex-direction: column;
        gap: 5rem;
    }

    .about,
    .right-column{
        width: 100%;
    }

    .stopka-kontener{
        grid-template-columns: 1fr;
        gap: 40px;
    }
    .buttony{
        flex-direction: column;
    }
}