html{
    scroll-behavior: smooth;
}

.g-recaptcha{
    width: 70%;
    margin: 5px 0;
    position: absolute;
}


@media screen and (min-width: 1200px){

    body{
        width: 100%;
        background: rgb(44,44,44);
        background-image: radial-gradient( rgba(24,24,24,1) 1%, rgba(44,44,44,1) 95%);
        background-position: 0px 0px;
        background-size: 3000px 2000px;
        background-repeat: repeat-y repeat-x;
        margin: 0;
    }

    h2{
        margin: 0;
    }

    #whole-page{
        width: 80%;
        margin: 0 auto;
    }

    #tlo{
        position: absolute;
        z-index: -2;
        width: 100%;
        margin-top: -2vw;
        background-repeat: repeat;
    }

    #background{
        z-index: -1;
        position: absolute;
        width: 50vw;
        top: 10vw;
        right: 3%;
        transform: rotateY(180deg);
    }
    /* 
    #background-pt2{
        width: 100%;
        height: 100vh;
        position: absolute;
        z-index: -2;
        margin-top: 100vh;
        background: rgb(44,44,44);
        background-image: linear-gradient(121deg, rgba(44,44,44,1) 0%, rgba(24,24,24,1) 100%);
        transform: rotateX(180deg);
    }

    #background-pt3{
        width: 100%;
        height: 100vh;
        position: absolute;
        z-index: -2;
        margin-top: 200vh;
        background: rgb(44,44,44);
        background-image: linear-gradient(121deg, rgba(44,44,44,1) 0%, rgba(24,24,24,1) 100%);
    }

    #background-pt4{
        width: 100%;
        height: 100vh;
        position: absolute;
        z-index: -2;
        margin-top: 300vh;
        background: rgb(44,44,44);
        background-image: linear-gradient(121deg, rgba(44,44,44,1) 0%, rgba(24,24,24,1) 100%);
        transform: rotateX(180deg);
    }

    #background-pt5{
        width: 100%;
        height: 30vh;
        position: absolute;
        z-index: -2;
        margin-top: 400vh;
        background: rgb(44,44,44);
        background-image: linear-gradient(121deg, rgba(44,44,44,1) 0%, rgba(24,24,24,1) 100%);
    } */


    #navbar{
        width: 100%;
        height: 8vw;
        background-color: transparent;
        display: flex;
        align-items: center;
        justify-content: space-between;
        
    }

    #logo-mobile{
        display: none;
    }

    #menu-icon{
        display: none;
    }

    #nav-options-mobile{
        display: none;
    }

    #logo{
        margin-top: 2vw;
        height: 9vw;
        left: 0;
    }

    #nav-options{
        width: content;
        display: flex;
        gap: 12vw;
        
    }

    .nav-items{
        margin: 0;
        font-family: 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
        font-size: 1.4vw;
        text-decoration: none;
        color: #DAE2E7;
    }

    a{
        font-size: 16px;
    }

    #title-text{
        /* position: absolute; */
        margin: 12vw 0 0 0;
        font-size: 3.2vw;
        font-family: sans-serif;
        color: #DAE2E7;
    }

    #perfekcja-text{
        color: #306282;
    }

    #zobacz-oferte{
        padding: 1.1vw 2.1vw;
        margin-top: 2vw;
        font-family: 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
        font-size: 1.4vw;
        background-color: #306282;
        border: none;
        border-radius: 3px;
        text-decoration: none;
        color: #111;
    }

    #zobacz-oferte:hover{
        background-color: #3d7eb344;
    }

    #oferta{
        margin-top: 19vw;
        font-size: 4vw;
        font-family: 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
        color: #DAE2E7;
        justify-self: center;
        text-align: center;
    }

    #oferta-items-placement{
        display: flex;
        flex-wrap: wrap;
        gap: 5vw;
        justify-content: center;
    }

    .oferta-card{
        background-color: #DAE2E7;
        width: min(350px, 25vw);
        height: 230px;
        position: relative;
        display: flex;
        flex-direction: column;
        justify-content: end;
    }

    .card-title{
        background-color: #306282;
        padding: 0.7em 0;
        margin: 0;
        font-size: 2vw;
    }

    .oferta-pics{
        width: min(350px, 25vw);
        background-color: #DAE2E7;
        padding: 0 auto;
        margin: 0 auto 1rem auto;
        
    }

    #sekcja-o-firmie{
        margin-top: 5vw;
        color: #DAE2E7;
        font-family: 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    }

    #o-firmie-title{
        font-size: 4vw;
        justify-self: center;
        text-align: center;
    }

    .o-firmie-layout{
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 3vw;
        margin-bottom: 2vw;
    }

    .o-firmie-image-mobile{
        display: none;
    }

    .o-firmie-image{
        width: 35vw;
        height: 25vw;
    }

    .o-firmie-text, .o-firmie-text2{
        width: 40vw;
        font-size: 2vw;
        line-height: 3vw;
        margin: 0;
    }

    #footer{
        background-color: #111;
        width: 100%;
        height: 100%;
        color:#DAE2E7;
        display: flex;
        justify-content: space-around;
        font-family: 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
        padding: 0 0 30px 0;
    }

    .footer-titles{
        font-size: 2em;
        margin: 30px 0;
    }

    .footer-info{
        font-family: sans-serif;
    }

    #footer-line{
        width: 90%;
        height: 2px;
        background-color: #DAE2E7;
        margin: 40px 0;
    }

    #form{
        display: flex;
        flex-direction: column;
        text-align: center;
    }

    .input-areas{
        padding: 10px 20px;
        margin: 10px 0;
        background-color: rgb(44,44,44);
        border: none;
        color: #DAE2E7;
    }

    .wiadomosc{
        padding: 10px 20px 100px 10px;
    }

    .wiadomosc-submit{
        width: 100px;
        padding: 10px 20px;
        border: 2px solid #111;
        background-color: #306282;
        border-radius: 5px;
    }
}



/* wwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwww*/




@media screen and (max-width: 1200px){

    body{
        width: 100%;
        background: rgb(44,44,44);
        background-image: radial-gradient( rgba(24,24,24,1) 1%, rgba(44,44,44,1) 95%);
        background-position: 0px 0px;
        background-size: 3000px 2000px;
        background-repeat: repeat-y repeat-x;
        margin: 0;
    }

    h2{
        margin: 0;
    }

    #whole-page{
        width: 80%;
        margin: 0 auto;
    }

    #tlo{
        position: absolute;
        z-index: -2;
        width: 100%;
        margin-top: -2vw;
        background-repeat: repeat;
    }

    #background{
        z-index: -1;
        position: absolute;
        width: 50vw;
        top: 10vw;
        right: 3%;
        transform: rotateY(180deg);
    }


    #navbar{
        width: 100%;
        height: 8vw;
        background-color: transparent;
        display: flex;
        align-items: center;
        justify-content: space-between;
        
    }

    #logo-mobile{
        display: none;
    }

    #menu-icon{
        display: none;
    }

    #nav-options-mobile{
        display: none;
    }


    #logo{
        margin-top: 2vw;
        height: 9vw;
        left: 0;
    }

    #nav-options{
        width: content;
        display: flex;
        gap: 12vw;
    }

    .nav-items{
        margin: 0;
        font-family: 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
        font-size: 1.4vw;
        text-decoration: none;
        color: #DAE2E7;
    }

    a{
        font-size: 16px;
    }

    #title-text{
        /* position: absolute; */
        margin: 12vw 0 0 0;
        font-size: 3.2vw;
        font-family: sans-serif;
        color: #DAE2E7;
    }

    #perfekcja-text{
        color: #306282;
    }

    #zobacz-oferte{
        padding: 1.1vw 2.1vw;
        margin-top: 2vw;
        font-family: 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
        font-size: 1.4vw;
        background-color: #306282;
        border: none;
        border-radius: 3px;
        text-decoration: none;
        color: #111;
    }

    #zobacz-oferte:hover{
        background-color: #3d7eb344;
    }

    #oferta{
        margin-top: 19vw;
        font-size: 4vw;
        font-family: 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
        color: #DAE2E7;
        justify-self: center;
        text-align: center;
    }

    #oferta-items-placement{
        display: flex;
        flex-wrap: wrap;
        gap: 5vw;
        justify-content: center;
    }

    .oferta-card{
        background-color: #DAE2E7;
        width: min(350px, 25vw);
        height: 20vw;
        position: relative;
        display: flex;
        flex-direction: column;
        justify-content: end;
    }

    .card-title{
        background-color: #306282;
        padding: 0.7em 0;
        margin: 0;
        font-size: 2vw;
    }

    .oferta-pics{
        width: min(350px, 25vw);
        background-color: #DAE2E7;
        padding: 0 auto;
        margin: 0 auto 1rem auto;
        
    }

    #sekcja-o-firmie{
        margin-top: 5vw;
        color: #DAE2E7;
        font-family: 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    }

    #o-firmie-title{
        font-size: 4vw;
        justify-self: center;
        text-align: center;
    }

    .o-firmie-layout{
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 3vw;
        margin-bottom: 2vw;
    }

    .o-firmie-image-mobile{
        display: none;
    }

    .o-firmie-image{
        width: 35vw;
        height: 25vw;
    }

    .o-firmie-text, .o-firmie-text2{
        width: 40vw;
        font-size: 2vw;
        line-height: 3vw;
        margin: 0;
    }

    #footer{
        background-color: #111;
        width: 100%;
        height: 100%;
        color:#DAE2E7;
        display: flex;
        justify-content: space-around;
        font-family: 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
        padding: 0 0 20px 0;
    }

    .footer-titles{
        font-size: 1.5em;
        margin: 30px 0;
    }

    .footer-info{
        font-family: sans-serif;
    }

    #footer-line{
        width: 90%;
        height: 2px;
        background-color: #DAE2E7;
        margin: 30px 0;
    }

    #form{
        display: flex;
        flex-direction: column;
        text-align: center;
    }

    .input-areas{
        padding: 10px 20px;
        margin: 10px 0;
        background-color: rgb(44,44,44);
        border: none;
        color: #DAE2E7;
    }

    .wiadomosc{
        padding: 10px 20px 100px 10px;
    }

    .wiadomosc-submit{
        width: 100px;
        padding: 10px 20px;
        border: 2px solid #111;
        background-color: #306282;
        border-radius: 5px;
    }
}


/* wwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwww */



@media screen and (max-width: 768px){

    body{
        width: 100%;
        background: rgb(44,44,44);
        background-image: radial-gradient( rgba(24,24,24,1) 1%, rgba(44,44,44,1) 95%);
        background-position: 0px 0px;
        background-size: 3000px 2000px;
        background-repeat: repeat-y repeat-x;
        margin: 0;
    }

    h2{
        margin: 0;
    }

    #whole-page{
        width: 90%;
        margin: 0 auto;
    }

    #tlo{
        position: absolute;
        z-index: -2;
        width: 100%;
        margin-top: -2vw;
        background-repeat: repeat;
    }

    #background{
        z-index: -1;
        position: absolute;
        width: 50vw;
        top: 20vw;
        right: 3%;
        transform: rotateY(180deg);
    }
   
    #navbar{
        width: 100%;
        height: 8vw;
        background-color: transparent;
        display: flex;
        align-items: center;
        justify-content: space-between;
        display: none;
    }

    #logo-mobile{
        display: block;
        margin-top: 2vw;
        height: 18vw;
        left: 0;
    }

    #menu-icon{
        display: block;
        position: absolute;
        width: 11vw;
        top: 7vw;
        right: 15vw;
    }

    #nav-options-mobile{
        display: none;
        position: absolute;
        width: 80%;
        background-color: #111111cc;
        justify-items: center;
        left: 50%;
        transform: translateX(-50%);
        z-index: 1;
    }

    .nav-items-mobile{
        margin: 0;
        font-family: 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
        font-size: 6vw;
        display: grid;
        text-decoration: none;
        color: #DAE2E7;
        text-align: center;
        margin: 4vw 0 10vw 0;
        padding: 2vw 4vw;
    }

    #close-icon{
        width: 10vw;
        margin: 3vw 0 0 58vw;
    }
/* 
    #nav-options{
        width: content;
        display: flex;
        gap: 12vw;
        
    }

    .nav-items{
        margin: 0;
        font-family: 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
        font-size: 1.4vw;
        text-decoration: none;
        color: #DAE2E7;
    }

    a{
        font-size: 16px;
    } */

    #title-text{
        /* position: absolute; */
        margin: 7vw 0 0 0;
        font-size: 5vw;
        font-family: sans-serif;
        color: #DAE2E7;
    }

    #perfekcja-text{
        color: #306282;
    }

    #zobacz-oferte{
        display: none;
        padding: 2vw 3vw;
        margin-top: 2vw;
        font-family: sans-serif;
        font-size: 2vw;
        background-color: #306282;
        border: none;
        border-radius: 3px;
        text-decoration: none;
        color: #111;
    }

    #zobacz-oferte:hover{
        background-color: #3d7eb344;
    }

    #oferta{
        margin-top: 19vw;
        font-size: 8vw;
        font-family: 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
        color: #DAE2E7;
        justify-self: center;
        text-align: center;
        width: 90%;
    }

    #oferta-items-placement{
        display: flex;
        flex-wrap: wrap;
        gap: 5vw;
        justify-content: center;
        flex-direction: column;
    }

    .oferta-card{
        background-color: #DAE2E7;
        width: 80vw;
        height: 60vw;
        position: relative;
        display: flex;
        flex-direction: column;
    }

    .card-title{
        background-color: #306282;
        padding: 0.7 0;
        margin: 0;
        font-size: 6vw;
    }

    .oferta-pics{
        width: 100%;
        background-color: #DAE2E7;
        padding: 0 auto;
        margin: 0 auto 1rem auto;
        
    }

    #sekcja-o-firmie{
        margin-top: 5vw;
        color: #DAE2E7;
        font-family: 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    }

    #o-firmie-title{
        font-size: 8vw;
        justify-self: center;
        text-align: center;
    }

    .o-firmie-layout{
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
        gap: 0;
        margin-bottom: 2vw;
    }

    .o-firmie-image-mobile{
        display: block;
        width: 48%;
        height: 48%;
        margin-bottom: 10px;
    }

    .o-firmie-image{
        display: none;
    }

    .o-firmie-text, .o-firmie-text2{
        width: 100%;
        font-size: 5vw;
        line-height: 6vw;
        margin: 10px 0;
    }

    #google-map{
        height: 300px;
    }

    #footer{
        background-color: #111;
        width: 100%;
        height: 100%;
        color:#DAE2E7;
        display: flex;
        justify-content: space-around;
        font-family: 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
        flex-direction: column;
    }

    .footer-all-info{
        padding: 0 0 0 20px;
    }

    .footer-titles{
        font-size: 1.5em;
        margin: 30px 0;
    }

    .footer-info{
        font-family: sans-serif;
    }

    #footer-line{
        width: 90%;
        height: 2px;
        background-color: #DAE2E7;
        margin: 30px 0;
    }

    #form{
        display: flex;
        flex-direction: column;
        text-align: center;
        width: 70%;
        align-self: center;
    }

    .input-areas{
        padding: 10px 20px;
        margin: 10px 0;
        background-color: rgb(44,44,44);
        border: none;
        color: #DAE2E7;
    }

    .wiadomosc{
        padding: 10px 20px 100px 10px;
    }

    .wiadomosc-submit{
        width: 100px;
        padding: 10px 20px;
        border: 2px solid #111;
        background-color: #306282;
        border-radius: 5px;
    }
}