:root {
    --kolorPasku: #ffde59a2;
    --kolorSekcji: rgb(225, 230, 229);
}

*,
html {

    scroll-behavior: smooth !important;
}

body {
    margin: 0;
    padding: 0;
    background-color: rgb(210, 210, 206);
    overflow-x: hidden;


}


header {
    background-color: rgba(92, 225, 230, 0.6);
    width: 100%;
    height: 9vw;
    display: flex;
    border-bottom: solid 0.2vh;
    position: relative;
    z-index: 1000;
    position: sticky;
    top: 0;

}

nav {
    display: flex;
    align-items: start;
    justify-content: center;
    width: 100%;


}


#t1 {
    margin-top: 1vw;
    width: 100%;
}

#przyciski_nav_table {
    display: flex;
    align-items: start;
    justify-content: space-around;
    width: 100%;
}

.przyciski_nav {
    font-size: 1.9vw;
    border-right-style: solid;
    border-width: 0.17vw;
    border-radius: 2px;

    margin: 0;
    padding-right: 3vw;
    /*font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
*/
    font-family: 'Montserrat';
    font-weight: 600;
}

.przyciski_nav:hover {
    transition: 0.4s;
    color: #7e7c1a8a;
    transform: scale(1.02);
}

/* 
.spc{
    opacity: 0;
    width: auto;
    height: 100%;
    object-fit: contain; 
}
 */

#logo_zdj {

    width: auto;
    height: 100%;
    object-fit: contain;

}

#zolty_pasek {
    background-color: var(--kolorPasku);
    margin-top: 15vw;

    width: 100%;
    height: 10vw;
    display: flex;
    justify-content: space-around;

    align-items: center;
    font-size: 8.2vw;
    letter-spacing: 0.4vw;
    font-family: 'Roboto Conde', 'Times New Roman', Times, serif;
    font-weight: 400;
}

#zolty_pasek b {
    font-weight: 100;
}

.zolty_trapez {
    background-color: var(--kolorPasku);
    width: 100vw;
    /* Pełna szerokość okna przeglądarki */
    height: 7.5vw;
    /* Wysokość prostokąta, możesz dostosować */
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    /* Usuń domyślne marginesy */
    padding: 0;
    /* Usuń padding */
    margin-top: 1vh;
    margin-bottom: 1vh;

}

@keyframes fadeInUp {
    0% {
        transform: translateY(100%);
        opacity: 0;
    }

    100% {
        transform: translateY(0%);
        opacity: 1;
    }
}

.fadeInUp-animation {
    animation: 4s fadeInUp;
}

.o_nas_paragrafy {
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    border-bottom-style: solid;
    padding-bottom: 2vh;
    border-width: 1px;
}

.zolty_trapez h1 {
    font-family: 'Montserrat';
    font-size: 5.5vw;
    /* Rozmiar czcionki */
    color: #000;
    /* Czarny kolor tekstu */
    font-weight: bold;
    margin: 0;
    /* Usuń marginesy wokół tekstu */
}



#bg {
    background-image: url(assety/salon2-blur0.webp);
    width: 100vw;
    /* lub inna wartość */
    height: 40vw;
    /* lub inna wartość */
    background-size: cover;
    /* lub inne wartości, np. contain */
    background-position: center;
    /* centrowanie tła */
    z-index: 1;
    /* Ustaw wyższy z-index, jeśli to konieczne */
    border-bottom: solid;
    border-width: 0.1vw;

}

#o1 {
    font-size: 2.3vw;
    margin-left: 3vw;
    letter-spacing: 0.1vw;
    font-family: 'Lexend Giga';
}

#sekcja1 {
    display: flex;
    flex-direction: row;
}

#pierwszy_opis {
    margin-left: 10vw;
    margin-right: 3vw;
    font-size: 1.5vw;
    font-family: 'Montserrat';

}

#zdj_opis {
    background-color: rgb(189, 189, 187);
    ;
    margin-right: 5vw;
    width: 20vw;
    height: 25vw;
    padding: 0.8vw;
    border-style: solid;
    border-width: 0.1vw;

}


#paragraf_ostatni {
    font-size: 1.6vw;
    border-bottom-style: hidden;
}

#opis_uslug {
    font-size: 1.4vw;
    margin-left: 13vw;
    margin-right: 13vw;
    font-weight: 400;

    font-family: 'Montserrat';
}

ul {
    border-left-style: solid;
    border-width: 0.2vw;

}

li {
    margin-bottom: 2vw;
}

#opis_uslug p {
    color: #dd0b0b;
    font-weight: 500;
}

#uslugi_parent {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-around;
    padding: 1vw;
    background-color: var(--kolorSekcji);
    margin-left: 5vw;
    margin-right: 5vw;
    border-radius: 20px;
}

.usluga {
    user-select: none;
    width: 26vw;
    height: 32vw;
    margin: 1vw;
    margin-bottom: 8vw;
    border-style: solid;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    background-color: rgb(210, 210, 206);
    box-shadow: 1px 4px 5px rgb(65, 65, 65);
}

.nazwa_uslugi_container {
    display: flex;
    justify-content: center;
    align-items: center;
}

.nazwa_uslugi {
    font-size: 1.8vw;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}

.zdjecie_uslugi {
    border-style: solid;
    border-width: 0.1vw;
    margin: 1vw;
    width: auto;
    height: 30vw;
}

#sekcja_opinie {
    padding-top: 3vh;
    margin-left: 3vw;
    margin-right: 3vw;
    margin-bottom: 3vh;
    background-color: var(--kolorSekcji);
    border-radius: 10px;

}

#sekcja_kontakt {
    background: linear-gradient(to right, #f0e68c, #b8860b);

    display: flex;
    flex-direction: row;
    align-items: center;
    margin-top: 10vh;
    clear: both;
    padding: 3vw;
}

#p_zainteresowany {
    margin-left: 5vw;
    font-size: 1.5vw;
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
}

#p_odp {
    text-decoration: underline;
    float: right;
    margin-right: 5vw;
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    font-size: 1.5vw;
}

.doGory {
    font-size: 1vw;
    clear: both;
    text-decoration: none;
    float: right;
    margin-right: 5vw;
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
}

.doGory a {
    text-decoration: underline;
}

.form-container {
    background: #d2b48c;
    border-radius: 15px;
    box-shadow: 1px 4px 8px rgba(0, 0, 0, 0.2);
    padding: 1vw;
    width: 25vw;
    height: 20vw;
    max-width: 90%;
    border: 0.1vw solid black;
    position: relative;
    margin-right: 5vw;
    float: left;
}




.form-container input[type="text"],
.form-container textarea {
    width: 60%;
    padding: 0.5vw;
    margin: 0.5vw;
    border: none;
    border-radius: 20px;
    outline: none;
    font-size: 0.7vw;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

#tresc {
    width: 80%;
}

footer {
    background-color: #281c24;
    height: 20vw;
    width: 100%;
}

.form-container textarea {
    resize: none;
    height: 10vw;
}

.form-container button {
    width: 7vw;
    padding: 0.6vw;
    margin-top: 0.3vw;

    background: white;
    border: solid black;
    border-width: 0.2vw;
    border-radius: 20px;
    font-weight: bold;
    font-size: 0.8vw;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    position: relative;
}

.form-container button::after {
    content: "➜";
    font-size: 0.7vw;
    margin-left: 0.5vw;
}

.form-container button:hover {
    background: #f0e68c;
    transition: 0.3s;
    transform: scale(1.02);
}

#logoStopka {

    width: auto;
    height: 7vw;
    box-shadow: 4px 5px 5px #130e11;
    margin: 1vw;
    margin-left: 1.5vw;
}

#stopkaParent {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

.stopkaTekst {
    color: rgb(255, 255, 255);
    margin: 0.4vw;
    font-size: 1vw;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

#prawaZastrzezone,
#podpis {
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    color: rgb(201, 205, 224);
    margin-left: 4vw;
    font-size: 1.0vw;

}

footer a {
    color: rgb(135, 135, 136);
    font-size: 1.05vw;
}

#listaStopka {
    list-style-type: none;
    border-left: white solid;
    border-radius: 5px;
    font-size: 1.5vw;
}

#logoinfo {
    display: flex;
}

#stopkaKontakt {
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    letter-spacing: 0.5vw;
    color: #474747;
    margin: 0;
    padding: 0;
    font-size: 1.5vw;
}

#partnerzyTekst {
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    letter-spacing: 0.5vw;
    color: #474747;
    font-size: 1.5vw;

    margin-right: 9vw;
}

#prp {
    font-size: 0.5vw;
}

#partnerzyParent {
    display: flex;
    flex-direction: column;
    align-content: center;
}

#psfsLogo {
    width: 10vw;
    height: auto;
    border-style: solid;
    border-width: 0.1vw;
    border-color: #000;
}

.message-status {
    margin-top: 0.5vw;
    font-weight: bold;
    color: #ff0000;
}

.message-status.success {
    color: #008000;
}

.opis_uslugi {
    font-family: 'Montserrat';
    font-size: 1.3vw;
    color: #333;
    background-color: #cdceca;
    padding: 1vw;
    border: 0.2vw solid #ddd;
    border-radius: 5px;
    text-align: left;
    margin: 0 1vw 1vw 1vw;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
    cursor: pointer;
    transition: all 0.3s ease;
}


.opis_uslugi:hover {
    background-color: #e6e6e6;
    transform: scale(1.02);
}
#Iglogo{
    width: 10vw;
    height: 10vw;
    color: rgba(255, 255, 255, 0);
    
}

@media (max-width: 768px) {
    #bg {
        background-image: url(assety/salon2-blur0.webp);
        width: 100vw;
        height: 70vw;
        background-size: cover;
        background-position: center;
        z-index: 1;
        border-bottom: solid;
        border-width: 0.1vw;

    }

    #o1 {
        font-size: 6vw;
        margin-left: 5vw;
    }

    .przyciski_nav {
        font-size: 2.4vw;

    }

    .form-container {
        clear: both;
        width: 60vw;
        height: 70vw;
    }

    #sekcja_kontakt {
        justify-content: center;
        align-items: center;
    }

    header {
        margin-bottom: 5vw;
    }

    #zolty_pasek {
        background-color: var(--kolorPasku);
        margin-top: 1vw;

        width: 100%;
        height: 30vw;
        display: flex;


        align-items: flex-start;
        align-content: space-around;
        flex-direction: column;

        font-size: 9vw;
        letter-spacing: 0.6vw;
        font-weight: 400;

    }

    .stopkaTekst {}

    #zolty_pasek b {
        font-weight: 600;
    }

    #zolty_pasek div {
        margin: 0;
        margin-left: 10vw;
        padding: 0;
    }

    .form-container input[type="text"],
    .form-container textarea {
        width: 60%;
        padding: 1.5vw;
        margin: 0.6vw;
        border: none;
        border-radius: 20px;
        outline: none;
        font-size: medium;
        box-shadow: 1px 4px 6px rgba(0, 0, 0, 0.1);
    }

    #tresc {
        height: 40vw;

    }

    .form-container button {
        height: 7vw;
        width: 25vw;
        font-size: 3vw;
    }

    .usluga {
        width: 80vw;
        height: 95vw;
        margin-bottom: 20vw;

    }

    .zdjecie_uslugi {
        width: auto;
        height: 65vw;

    }
#lista_stopka{
        font-size: 2.5vw;
}
    .nazwa_uslugi {
        font-size: 5.5vw;
        display: flex;
        justify-content: center;
        align-items: center;
        text-align: center;
        font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;

    }

    .opis_uslugi {
        font-size: 3.3vw;
    }

    .o_nas_paragrafy {
        font-size: 3.8vw;
    }

    #opis_uslug {
        font-size: 3.8vw;
    }

    #zdj_opis {
        display: none;
    }

    #prawaZastrzezone,
    #podpis {
        font-size: 2.4vw;
    }

    footer {
        height: 30vw;
    }

    #paragraf_ostatni {
        font-size: 3.6vw;
    }

    #opis_uslug {
        font-size: 3.5vw;
        margin-left: 4vw;
        margin-right: 7vw;
        font-weight: 400;

        font-family: 'Montserrat';
    }

    .zolty_trapez {
        background-color: var(--kolorPasku);
        width: 100vw;
        /* Pełna szerokość okna przeglądarki */
        height: 15vw;
        /* Wysokość prostokąta, możesz dostosować */
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0;
        /* Usuń domyślne marginesy */
        padding: 0;
        /* Usuń padding */
        margin-top: 1vh;
        margin-bottom: 1vh;

    }

    .zolty_trapez h1 {
        font-size: 10vw;
    }

    #skontaktuj_h1 {
        font-size: 7vw;
    }

    ul {
        border-left-style: solid;
        border-width: 0.2vw;

    }

    li {
        margin-bottom: 5vw;
    }

    #logoStopka {
        height: 14vw;
        width: auto;

    }

}