/************************KOLORY************************/
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@100..900&display=swap');


:root {
  color-scheme: light;
  --kolor1: #f4f4f4;
  --kolor2: #1c1c1c;
  --niebieski1: #5E94FF;
  --niebieski2: #6398FF;
  --niebieski3: #4958D5;
  --niebieski4: #232C68;
  --niebieski5: #e8ecf5;
  --fioletowy: #9747FF;
  --kolor_kratka: #cbdefe;

  --gradient1: linear-gradient(#6398FF, #4E5FFF);
  --gradient2: linear-gradient(#4E5FFF, #6398FF);
  --gradient3: linear-gradient(#4E5FFF, #232C68);

  --czcionka_mala: 14px;
  --czcionka_srednia: 17px;
  --czcionka_duza: 22px;
  --czcionka_b_duza: 35px;

  --margines_maly: 10px;
  --margines_sredni: 15px;
  --margines_duzy: 20px;
  --margines_b_duzy: 30px;

  --zaokraglenie_male: 5px;
  --zaokraglenie_srednie: 10px;
  --zaokraglenie_duze: 15px;
  --zaokraglenie_b_duze: 20px;


  --padding_naglowek: 10px;
  --szerokosc_naglowek: calc(100% - 2 * var(--padding_naglowek));
  --wysokosc_naglowek: 70px;


  --szerokosc_sekcja: calc(100% - 2 * var(--padding_sekcja));
  --wysokosc_sekcja: calc(100dvh - var(--wysokosc_naglowek) - 2 * var(--padding_naglowek));
  --padding_sekcja: 5%;

  --szerokosc_element: 300px;
  --wysokosc_element: auto;
  --padding_element: 20px;
  --szerokosc_details: 300px;
}

@media (max-width: 1100px) {
  :root {
    --padding_sekcja: 0px;
    --padding_element: 10px;
    --szerokosc_element: calc(80%);
  }
}

@media (max-width: 700px) {
  :root {

    --szerokosc_element: calc(100% - 2 * 20px);
    --wysokosc_naglowek: 70px;
  }
}




/************************OGÓLNE************************/

html{
    height: 100dvh;
    overflow: hidden;
}

body {
    color: var(--kolor2);
    margin: 0;
    padding: 0;
    font-family: "Outfit", serif;
    overflow: hidden;
    background-image: url('zdjecia/1_tlo.png');
    background-size: cover;
    background-position: center;
    background-repeat: repeat;
    background-attachment: fixed;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    height: 100%;
    color: aliceblue;
}

p {
  white-space: pre-wrap;
  text-wrap: wrap;
  margin: 1%;
}


a {
  white-space: pre;
}

img {
  margin: 0;
  padding: 0;
}

.bold {
  font-weight: bold;
}

.link {
  color: var(--kolor2);
  text-decoration: none;
}

.link:hover {
  text-decoration: underline;
}


/************************NAGŁÓWEK I MENU************************/

#naglowek{
    width: 100%;
    height: var(--wysokosc_naglowek);
    display: flex;
    justify-content: space-between;
    flex-direction: row;
    align-items: start;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9999;
    margin-top: var(--margines_duzy);
}
#naglowek>*{
    margin: 0 30px;
}

#naglowek>div{

    min-width: 100px;
    display: flex;
    align-items: start;
    justify-content: space-between;

}

#naglowek>div>*{
    margin-right: 20px;
    border: 1px solid aliceblue;
    border-radius: 17px;
    text-decoration: none;
    cursor: pointer;
    color: aliceblue;
    transition: 0.5s;
}

#naglowek>div>a{
    height: 20px;
    padding: 7px 25px 7px 25px;
}


#naglowek>div>*:hover{
    background-color: rgba(240, 248, 255, 0.256);
}

#naglowek>a{
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-radius: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    width: 70px;
}

#naglowek>a>img{
    width: 100%;
    height: 100%;
    border-radius: 100%;
}

.hamburgerMenu {
    width: 20px;
    height: 20px;
    padding: 7px;
    overflow: hidden;
    cursor: pointer;
    transform-origin: top center;
    transition: height 0.6s ease;
    position: relative;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}

.hamburgerMenu span {
    display: block;
    width: 20px;
    height: 2px;
    background-color: aliceblue;
    margin-left: auto;
    position: relative;
    top: 9px;
    transition: transform 0.3s ease;
}
.hamburgerMenu span::before, 
.hamburgerMenu span::after {
    content: "";
    display: block;
    width: 20px;
    height: 2px;
    background-color: aliceblue;
    position: absolute;
    left: 0;
    transition: transform 0.3s ease;
}
.hamburgerMenu span::before {
    top: -6px;
}
.hamburgerMenu span::after {
    top: 6px;
}

.hamburgerMenu.active span {
    transform: rotate(90deg);
}

@media (max-width: 900px) {
    #naglowek>div>a{
        display: none;
    }
    #naglowek>div{
       justify-content: end;

  }
  .hamburgerMenu{
    transform: translateY(15px);
  }

  .hamburgerMenu.active{
    transform: translateY(15px);
  }
  #naglowek{
    align-items: start;
  }

  
}

#menu {
    opacity: 0;
    pointer-events: none;
    transform: translateY(-20px);
    transition: opacity 0.3s ease 0.6s, transform 0.3s ease 0.6s;
    display: none;
    flex-direction: column;
    margin-top: 20px;
}

#menu>a{
    text-decoration: none;
    cursor: pointer;
    color: aliceblue;
    margin-top: 5px;
}

.hamburgerMenu.active {
    width: 130px;
    height: 180px;
}
.hamburgerMenu.active #menu {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
    display: flex;
}

/************************PRZYCISK************************/

.przycisk{
    border: 1px solid aliceblue;
    border-radius: 17px;
    text-decoration: none;
    cursor: pointer;
    color: aliceblue;
    transition: 0.5s;
    height: 20px;
    padding: 7px 25px 7px 25px;
    width: 120px;
}

.przycisk:hover{
    background-color: rgba(240, 248, 255, 0.256);
}


/************************SEKCJA + MENU SCROLL************************/

.menuScroll {
    position: fixed;
    right: 30px;
    top: 50%;
    transform: translateY(-50%);
    width: 230px;
    flex-direction: column;
    display: flex;
    justify-content: center;
    align-items: end;
    text-decoration: none;
    overflow: hidden;
    min-height: 190px;
    transition: transform 0.3s ease-out, opacity 0.3s ease-out;
}


@media (max-width: 1100px) {
    .menuScroll {
      display: none;
    }
  }


.menuScroll a {
    text-decoration: none;
    margin: 5px 0;
    cursor: pointer;
    opacity: 0.5;
    font-size: 22px;
    color: aliceblue;
    position: absolute;
    left: 0;
    width: 100%;
}


.menuScroll a:nth-child(1) {
    opacity: 1;
}

.menuScroll a:nth-child(2) {
    opacity: 0.5;

}

.menuScroll a:nth-child(3) {
    opacity: 0.4;
}

.menuScroll a:nth-child(4+n) {
    opacity: 0.2;
}


@keyframes slideOutRight {
    0% {
        transform: translateX(0) translateY(-50%);
        opacity: 1;
    }
    100% {
        transform: translateX(100%) translateY(-50%);
        opacity: 0;
    }
}

@keyframes slideInLeft {
    0% {
        transform: translateX(-100vw) translateY(-50%);
        opacity: 0;
    }
    100% {
        transform: translateX(0) translateY(-50%);
        opacity: 1;
    }
}

@keyframes slideOutLeft {
    0% {
        transform: translateX(0) translateY(-50%);
        opacity: 1;
    }
    100% {
        transform: translateX(-100%) translateY(-50%);
        opacity: 0;
    }
}

@keyframes slideInRight {
    0% {
        transform: translateX(100%) translateY(-50%);
        opacity: 0;
    }
    100% {
        transform: translateX(0) translateY(-50%);
        opacity: 1;
    }
}

.slide-out-right {
    animation: slideOutRight 0.2s forwards;
}

.slide-in-left {
    animation: slideInLeft 0.2s forwards;
}

.slide-out-left {
    animation: slideOutLeft 0.2s forwards;
}

.slide-in-right {
    animation: slideInRight 0.2s forwards;
}



#zawartosc{
    height: 100dvh;
    overflow-y: scroll;
    overflow-x: hidden;
    scroll-behavior: smooth;
    scroll-snap-type: y mandatory; 
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain; /* ważne, aby nie “wyskoczyć” ze snapa */
}

.container {
    width: 100%;
    height: 100dvh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 0;
    position: relative;
    scroll-snap-align: start;
    scroll-snap-stop: always;
}



.container:not(:first-of-type) {
    padding-left: 320px;
    width: calc(100% - 320px);
    flex-direction: row;
    align-items: center;
}





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

#tytul>h1,
#tytul>h2{
    margin: 0 0 0 40px;
}

#tytul>h1{
    font-size: 13dvh;
}

#tytul>h2{
    font-size: 3dvh;
}

@media (max-width: 900px) {
    #tytul{
        text-align: center;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    #tytul>h1{
        font-size: 7dvh;
        margin-left: auto;
        margin-right: auto;
    }
    
    #tytul>h2{
        font-size: 2dvh;
        margin-left: auto;
        margin-right: auto;
    }


}

/************************ZABEZPIECZENIA************************/
.main {
    position: absolute; 
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

}

.main img.zdjecie {
    z-index: 20;
    transition: transform 0.8s ease;
    display: block;
}

.wiecej {
    display: block;
    margin-top: calc(-30svh - 20px);
    transition: margin-top 0.8s ease, opacity 0.8s ease;
    opacity: 0;
    width: 80%;
    z-index: 10;
    text-align: center;
    background-color: rgba(240, 248, 255, 0.256);
    padding: 10px;
    border-radius: 15px;
    height: 30svh;
    overflow-y: auto;
    border: 7px solid rgba(240, 248, 255, 0);
}


.wiecej.active {
    margin-top: 20px; /* odsunięcie od obrazka po aktywacji */
    opacity: 1;
}

.przycisk {
    margin: 0 auto 0; /* zmniejszony margines, przycisk bliżej obrazka */
    display: inline-block;
    transition: margin 0.8s ease;
    z-index: 10000;
    margin-top: 20px;
}

.main:has(.wiecej.active) + .zdjecie,
.main:has(.wiecej.active) .zdjecie {
    opacity: 0.5;
}

.opis{
    position: absolute;
    top: 50%;
    right: 50px;
    transform: translateY(-50%);
    width: 20vw;
}


.zdjecie{
    width: 40vw;
}


@media (max-width: 1100px) {
    .wiecej {
        display: block;
        margin-top: calc(-50svh - 20px);
        transition: margin-top 0.8s ease, opacity 0.8s ease;
        opacity: 0;
        width: 80%;
        z-index: 10;
        text-align: center;
        background-color: rgba(240, 248, 255, 0.256);
        padding: 10px;
        border-radius: 15px;
        height: 50svh;
        overflow-y: auto;
    }

}

/************************MAPA************************/

#mapa>div{
    width: 60vw;
    position: absolute; 
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    background-color: rgba(240, 248, 255, 0.256);
    padding: 10px;
    border-radius: 15px;
    flex-direction: row;
    border: none;
}


.mapaIframe{
    width: 60%;
    border: none;
    position: relative;
    margin: auto;
}

.mapaOpis{
    margin-right: 10px;
    text-align: center;
    position: relative;
    width: 40%;
}

.mapaIframe>iframe{
    width: 100%;
    min-height: 60dvh;
    border-radius: 10px;
    height: 100%;
    border: none;
}

@media (max-width: 900px) {
    #mapa>div{
        flex-direction: column-reverse;
        height: calc(100dvh - 170px);
        width: 90vw;
        top: 110px;
        transform: translate(-50%, 0);

 

    }
    .mapaIframe{
        width: 100%;
        min-height: 50%;
        position: relative;
        margin: auto;
    }
    .mapaIframe>iframe{
        min-height: initial;

    }

    .mapaOpis{
        width: 100%;
        height: 50%;
        position: relative;
        margin: auto;
        overflow: auto;
    }
    
}

/************************KONTAKT************************/


#kontakt {
    flex-direction: column !important;
}

#kontakt .slider {
    display: flex;
    flex-direction: row;
    position: absolute; 
    top: 50%;
    left: 50%;
    transform: translate(-17%, -50%);
    gap: 20px;
    padding: 20px;
}

#kontakt .card {
    width: 300px;
    height: 350px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center; /* Center vertically */
    text-align: center;
    padding: 20px;
    background-color: rgba(240, 248, 255, 0.256);
    border-radius: 15px;
    transition: all 0.3s ease;
    gap: 20px; /* Equal spacing between elements */
}

#kontakt .card:hover {
    transform: scale(1.05);
    background-color: rgba(240, 248, 255, 0.356);
}

@media (max-width: 900px) {
    #kontakt .card {
        width: 200px;
        height: 250px;
    }
    #kontakt img{
        width: 90px;
    }

    #kontakt h1{
        font-size: 30px;
        margin: 0;
    }
    
}

/************************KURSY************************/

#kursy .slider {
    display: flex;
    flex-direction: row;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-10%, -50%);
    gap: 20px;
    padding: 20px;
}

#kursy .card {
    width: 300px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: stretch;
    text-align: center;
    padding: 10px;
    background-color: rgba(240, 248, 255, 0.256);
    border-radius: 15px;
    transition: all 0.5s ease;
    position: relative;
    transform: translateY(0);
    height: 65svh;
}

#kursy .card.info-active {
    transform: translateY(-100%);
}

#kursy .wiecej {
    position: absolute;
    left: 0;
    width: 100%;
    background-color: rgba(240, 248, 255, 0.256);
    border-radius: 15px;
    padding: 10px;
    box-sizing: border-box;
    transition: transform 0.5s ease;
    transform: translateY(0);
    opacity: 0;
    pointer-events: none;
    height: 65svh;
    bottom: -20px;
    overflow: auto;
    border: 7px solid rgba(240, 248, 255, 0);
}

#kursy .wiecej.active {
    transform: translateY(calc(100% - 10px));
    opacity: 1;
    pointer-events: all;

}


#kursy .zdjecie_kursy {
    height: 60%;
    transition: transform 0.8s ease;
    border-radius: 5%;
}

#kursy .przycisk{
    margin-top: 0;
}

#kursy .wiecej .przycisk{
    margin-top: 20px;
}


/************************STOPKA************************/

#stopka{
    width: 100%;
    height: 35px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: #0b141a;
    font-size: 10px;
    color: gray;
    position: absolute;
    bottom: 0;
    left: 0;
    text-align: center;
}

.top-line {
    width: 100%;
    text-align: center;
    margin-bottom: 2px;
    height: 15px;
}

.top-line a {
    color: gray;
    text-decoration: none;
    margin-top: 10px;
}

.bottom-line {
    width: 100%;
    display: flex;
    gap: 10px;
    justify-content: center; 
}

.bottom-line p {
    margin: 0px;
}

.mobile {
    display: none;
}

@media (max-width: 900px) {
    .zdjecie{
        width: 80vw;
        max-width: 500px;
    }
    

    .wiecej{
        width: calc(80vw - 20px);
        max-width: 480px;

    }



}

@media (max-width: 1100px) {
    .opis{
        display: none;
    }

    .mobile{
        text-align: center;
        display: block;
        max-width: 80vw;
    }

    p.mobile {
        margin-top: 20px;
    }

    .main:has(.wiecej.active) + .mobile,
    .main:has(.wiecej.active) .mobile {
        opacity: 0;
        transition: opacity 0.3s ease;
    }

}