@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Barlow:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');



:root{
    --kolor-glowny: #63A9C3;
    --kolor-uzupelniajacy: #236B85;
    --kolor-szary: #817b7bff;
    --kolor-czarny: #222222;
    --kolor-biały: #e2e2e2;
    --gradient1: linear-gradient(180deg, var(--kolor-szary) 0%, var(--kolor-czarny) 100%)
}

*{
    transition: 0.3s;
    box-sizing: border-box;

    /* outline-style: dashed;
    outline-width: 1px;
    outline-color: red; */
}

html{
    
    font-family: "Barlow"; 
    background-color: var(--kolor-czarny);
    scroll-behavior: smooth;
}

body{}

p{}

a{
    text-decoration: none;
}

img{
    max-width: 100%;
}

nav{
    background: url(../img/nav.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    width: 33vw;
    height: 100vh;
    z-index: 1;

    display: flex;
    justify-content: right;
    align-items: center;
    position: fixed;
}

nav .menu{
    /* background-color: yellowgreen; */

    height: 70vh;
    width: 70%;

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

nav .menu h1{
    display: flex;
    align-self: flex-end;
    margin: 1vw;

    color: var(--kolor-biały);
    text-align: center;
    font-family: "Barlow Condensed";
    font-size: 20vh;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
}

nav .menu ol{
    display: flex;
    flex-direction: column;
    /* align-items: flex-start; */
    align-items: center;
    gap: 10px;
    width: 100%;
    /* min-width: 350px; */
}

nav .menu ol li{
    display: flex;
    justify-content: center;
    gap: 35px;
    flex-direction: row;

    background-color: var(--kolor-czarny);
    width: 90%;
    padding: 15px;
    border-radius: 10px;

    font-family: "Barlow Condensed";
    font-size: 24px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
}

nav .menu ol li:hover{
    background-color: var(--kolor-biały);
    width: 100%;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

nav .menu ol li:hover a{
    color: var(--kolor-czarny);
}

nav .menu ol li a{
    color: var(--kolor-biały);
    width: fit-content;
    text-align: center;
    height: fit-content;
}

nav .menu ol .icons{
    background: none;

    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: space-around;
}

nav .menu ol .icons:hover{
    background: none;
    width: 90%;
}

nav .menu ol .icons a{
}

nav .menu ol .icons a:hover{

}

section{
    display: flex;
    align-items: center;
    justify-content: flex-start;

    padding: 20px;
    padding-left: 33vw;
}

.zawartosc{
    max-width: 1200px;
    width: 100%;
}

#pierwsza{
    min-height: 100vh;
    background: url(../img/S2_original_4.jpg), var(--kolor-czarny);
    background-blend-mode: darken, normal;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: 25vw -55vh;

}

#pierwsza .zawartosc{
    display: flex;
    flex-direction: column;
    gap: 4vh;
    align-items: flex-start;
    justify-content: center;
    margin: 13vh 20px 20px 20px;
}

#pierwsza .zawartosc h3{
    font-family: "Barlow Condensed";
    font-size: 8.5vh;
    letter-spacing: 2vw;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    color: var(--kolor-biały);

    margin-bottom: 15vh;
}

#pierwsza .zawartosc article{
    display: flex;
    flex-direction: column;
    gap: 15px;
}

#pierwsza .zawartosc p{
    background-color: var(--kolor-biały);
    border-radius: 15px;
    padding: 20px;
    min-width: 300px;
    max-width: 75%;

    color: #606060;
    font-family: Barlow;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

#pierwsza .zawartosc .programy{
    width: fit-content;
}

#pierwsza .zawartosc .programy img{
    height: 50px;
    margin: 0px 15px;
}


#divider1{
    background: url(../img/gallery_bg.jpg) no-repeat top center fixed;
    background-position: 0px -10vh;
    background-size: cover;
    height: 45vh;
    width: 100%;
}

#divider1 .zawartosc{
    font-family: "Barlow Condensed";
    font-size: 8.5vh;
    letter-spacing: 2vw;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    text-align: center;
    mix-blend-mode: difference;
    color: var(--kolor-szary);
    text-align: right;
}

#druga{
    min-height: 100vh;
    /* background: url(../img/S2_original_4.jpg), var(--kolor-czarny); */
    background: url(../img/S2_original_2.jpg), var(--gradient1);
    background-blend-mode: multiply, normal;
    background-size: cover;
    background-repeat: no-repeat;

    display: flex;
    align-items: center;
}

#druga .zawartosc h4{
    margin: 35px 0px 15px 20px;
    background-color: var(--kolor-czarny);

    font-family: "Barlow Condensed";
    font-size: 4.5vh;
    letter-spacing: 1.6vw;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    text-align: end;
    color: var(--kolor-biały);
}

#druga .zawartosc article{
    margin-left: 20px;
    /* background-color: burlywood; */
    display: flex;
    /* flex: 0 1 300px; */
        /* elementy mają max 300 px */
    flex-wrap: wrap;
    flex-direction: column;
}

#druga .zawartosc article img{
    max-width: 33%;
}

.divider2{
    background: url(../img/gallery_bg.jpg) no-repeat top center fixed;
    background-position: 0px -10vh;
    background-size: cover;
    height: 15vh;
    width: 100%;
}

.divider2 .zawartosc{
    font-family: "Barlow Condensed";
    font-size: 8.5vh;
    letter-spacing: 2vw;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    text-align: center;
    mix-blend-mode: difference;
    color: var(--kolor-szary);
    text-align: right;
}

#trzecia{
    min-height: 20vh;
    display: flex;
}

#trzecia .zawartosc{
    display: flex;
    flex-wrap: wrap;
    gap: 40px;
}

#trzecia article{
    display: flex;
    justify-content: center;
    flex-wrap: wrap;

    width: 100%;
    padding: 50px 10px;
}

#trzecia article form{
    display: flex;
    justify-content: center;
    flex-direction: column;
    gap: 20px;
    flex: 0 1 500px; 
}

#trzecia article form h5{
    color: var(--kolor-biały);
    padding-bottom: 10px;
    text-align: center;
}

#trzecia article form .name{
    display: flex;
    justify-content: center;
    gap: 20px;
    width: 100%;
}

#trzecia article form input{
    display: block;
    margin-bottom: 10px;
    padding: 10px;
    background: none;
    border: 0;
    border-bottom: 1px solid var(--kolor-uzupelniajacy);
    width: 100%;
    color: var(--kolor-biały);
    font-size: 15px;
}

#trzecia article form input:focus{
    outline: 0;
    border: 0;
    background-color: var(--kolor-uzupelniajacy);
    color: var(--kolor-biały);
}

#trzecia article form .msg{
    height: fit-content;
    word-break: break-all;
}

#trzecia article form input[type=submit]{
    display: flex;
    padding: 10px 20px;
    border: none;
    background-color: var(--kolor-czarny);
    color: var(--kolor-biały);
    font-weight: 600;
    font-size: 15pt;
    border-radius: 10px;
}

#trzecia article form input[type=submit]:hover{
    background-color: var(--kolor-uzupelniajacy);
    color: var(--kolor-biały);
}

/* STOPKA */
#stopka{
color: var(--kolor-szary);
font-size: 14px;
text-align: center;
}