@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Niconne&display=swap');

html {
    scroll-behavior: smooth;
}


.hero{
    min-height: 100vh;
    background-image: url("/images/hero-pierwszy-taniec.jpg");
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    
}

.krokpokroku{ 
    background-color: #F6F6F6;
    padding-top: 50px;
    padding-bottom: 50px;
    padding-left: 10%;
    padding-right: 10%;
}

.kwiatekClass{ 
    display: block;
    height: 80%;
}

.cennik{
    padding-top: 50px;
    padding-bottom: 50px;
    padding-left: 10%;
    padding-right: 10%;
    background-color: white;
}

.strony-internetowe-lublin-cennik-niebieski-kafelek{
    background-color: #BC7C00;
    color: white;
    border-radius: 10px;
    padding-top: 40px;
    padding-left: 20px;
    padding-right: 20px;
    padding-bottom: 10px;
    margin-top: 20px;
}

.strony-internetowe-lublin-cennik-szary-kafelek{
    background-color: #F8F8F8;
    border-radius: 10px;
    padding-top: 40px;
    padding-left: 20px;
    padding-right: 20px;
    padding-bottom: 10px;
    margin-top: 100px;
}

.oferta-button-niebieski{
    
    position: relative;
    border: 2px solid transparent;
    border-radius: 10px;
    background-clip: padding-box;
    width: 100%;
    background-color: rgb(255, 255, 255);
    color: rgb(0, 0, 0);
    font-size: 16px;
    font-weight: 600;
    padding: 10px 15px;

    -webkit-transition-duration: 0.4s; /* Safari */
    transition-duration: 0.4s;
}

.oferta-button-niebieski:hover {
    
    background-color: #000000;
    color: #BC7C00;
    -webkit-transition-duration: 0.4s; /* Safari */
    transition-duration: 0.4s;
}


.oferta-button{
    
    position: relative;
    border: 2px solid transparent;
    border-radius: 15px;
    background-clip: padding-box;
    width: 100%;
    background-color: rgb(24, 24, 24);
    color: white;
    font-size: 16px;
    padding: 10px 15px;

    -webkit-transition-duration: 0.4s; /* Safari */
    transition-duration: 0.4s;
}

.oferta-button:hover {
    
    background-color: #BC7C00;
    color: white;
    -webkit-transition-duration: 0.4s; /* Safari */
    transition-duration: 0.4s;
}



.nazwa-pakietu{

}
.cena-pakietu{
    padding-top: 20px;
    padding-bottom: 20px;
    font-size: 80px;
    font-weight: 600;
}
.czas-realizacji-pakietu{
    font-weight: 600;
}

.najpopularniejszy-pakiet{
    font-weight: 600;
    padding-top: 0px;
    padding-bottom: 20px;
}

.faqsec{
    background-image: url("/images/faqBG.jpg");
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    padding-top: 50px;
    padding-bottom: 50px;
    padding-left: 10%;
    padding-right: 10%;
}


.dropdown-menu{
    background-color: red;
}

.nav-bottom-border{
    padding-top: 10px;
    padding-bottom: 10px;
    border-bottom: 1px solid white;
}

.hero-text{
    padding-left: 10%;
    padding-right: 10%;
    padding-top: 8%;

    color: rgb(0, 0, 0);
}

.hero-h1{
    font-weight: 400;
    font-size: 4.1rem;
}


.hero-button{
    width: 100%;
    border: 0;
    padding: 10px 20px;
    background-color: #DCB040;
    color: black;
    font-weight: 700;
    border-radius: 5px;
}

.hero-button-inst-fb{
    width: 100%;
    border: 0;
    padding: 10px 20px;
    background-color: #1f1f1f;
    color: rgb(255, 255, 255);
    font-weight: 700;
    border-radius: 5px;
} 


.Oferta{
    
    padding-left: 10%;
    padding-right: 10%;
    padding-top: 100px;
}

.img-oferta{
    display: block;
}

.oNasStyle{
    
    padding-left: 10%;
    padding-right: 10%;
    padding-top: 150px;
}

.KontaktStyle{
    padding-left: 10%;
    padding-right: 10%;
    padding-top: 150px;
}

.kontakt-tel{
    padding-top: 20px;
}

#map {
    margin-top: 50px;
    border-radius: 5px;
    height: 300px;
    /* The height is 400 pixels */
    width: 100%;
    /* The width is the width of the web page */
  }


.footer{
    background-color: #F6F6F6;
    padding-left: 10%;
    padding-right: 10%; 
}


@media screen and (max-width: 992px) {
 
    .krokpokroku{
        margin-top: 100px;
        background-color: #F6F6F6;
        padding-top: 50px;
        padding-bottom: 50px;
        padding-left: 10%;
        padding-right: 10%;
    }

    .Oferta{
    
        padding-left: 10%;
        padding-right: 10%;
        padding-top: 30px;
    }

    .strony-internetowe-lublin-cennik-niebieski-kafelek{
        background-color: #BC7C00;
        color: white;
        border-radius: 10px;
        padding-top: 40px;
        padding-left: 20px;
        padding-right: 20px;
        padding-bottom: 10px;
        margin-top: 40px;
    }

    .strony-internetowe-lublin-cennik-szary-kafelek{
        background-color: #F8F8F8;
        border-radius: 10px;
        padding-top: 40px;
        padding-left: 20px;
        padding-right: 20px;
        padding-bottom: 10px;
        margin-top: 40px;
    }

    .kwiatekClass{ 
        display: none;
    }


    .img-oferta{
        display: none;
    }

    .oNasStyle{ 
        padding-top: 20px;
    }

    .KontaktStyle{ 
        padding-top: 50px;
    }

    .kontakt-tel{
        padding-top: 50px;
    }
}