* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "comfortaa", sans-serif;
}

html {
    font-size: 10px;
    max-width: 1920px;
}

/*rozmiar fontu*/
body h1 {
    font-size: 115px;
    color: #222222;
}

body h2 {
    font-size: 55px;
    font-weight: normal;
    line-height: 100%;
    color: #222222;
}

body h3 {
    font-size: 35px;
    color: #222222;
    font-weight: normal;
}

body h4 {
    font-size: 25px;
    color: #222222;
    font-weight: normal;
}

body p {
    font-size: 17px;
    color: #222222;
    font-weight: normal;
    line-height: 180%;
}


header {
    position: fixed;
    width: 100%;
    height: 180px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 0.5px solid #a4a4a4;
    padding-bottom: 15px;
    padding-left: 40px;
    padding-top: 20px;
    padding-right: 20px;
    top: 0;
    background: #fff;
}

/*logotyp*/
header .logotyp img {
    max-width: 100%;
    height: auto;
}

header nav {
    padding-top: 80px;
}

header ul {
    position: relative;
}

header ul li {
    position: relative;
    list-style: none;
    float: left;
}

header ul li a {
    color: black;
    font-size: 160%;
    padding: 15px;
    text-decoration: none;
    display: flex;
    justify-content: space-between;
    text-transform: uppercase;
}

header ul li a:hover {
    color: #004225;
}

/* sekcja-pierwsza*/
.lewa-kolumna {
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    padding-top: 300px;
    border-bottom: 0.5px solid #a4a4a4;
}

/*h1*/
body h1 {
    padding-left: 60px;
    padding-right: 60px;
    text-transform: uppercase;
}

/*h2*/
body h2 {
    padding-top: 30%;
    padding-left: 60px;
    padding-right: 15%;
    padding-bottom: 5%;
}

/*img-y*/
.img-y {
    padding-right: 60px;
    max-width: 100%;
    height: auto;
}


/*drugi*/
.drugi {
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    margin-top: 120px;
    border-bottom: 0.5px solid #a4a4a4;
}

/*img-2*/
.img-z {
    padding-left: 60px;
    max-width: 100%;
    height: auto;
}

/*strzalka*/
.strzalka {
    margin-left: -9%;
}

/*naglowek*/
.naglowek h2 {
    text-transform: uppercase;
    padding-top: 100px;
    padding-bottom: 80px;
    padding-left: 0px;
}


.naglowek .tresc {
    padding-right: 100px;
    margin-top: -30px;
    padding-bottom: 60px;
}

/*trzeci*/
.trzeci {
    background-color: #004225;
    margin-top: 120px;
    padding-left: 60px;
    padding-right: 60px;
}

/*naglowek-h3*/
.naglowek-trzeci h3 {
    padding-top: 120px;
    text-align: center;
    text-transform: uppercase;
    color: #fff;
}

/*naglowek-h2*/
.naglowek-tytul h2 {
    padding-top: 100px;
    text-align: center;
    text-transform: uppercase;
    color: #fff;
    padding-left: 300px;
    padding-right: 300px;
    line-height: 120%;
}

/*kolumny*/
.kolumny {
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    padding-top: 120px;
    padding-bottom: 120px;
}

.naglowek-kolumny p {
    color: #fff;
    text-align: center;
    padding-left: 60px;
    padding-right: 60px;
}



.kolumna-tytul h3 {
    color: #fff;
    text-align: center;

}

.btn1 {
    padding-top: 40px;
    text-align: center;
}

.numer h3 {
    text-align: center;
    color: #fff;
    padding-bottom: 120px;
}

/*sekacja - czwarta*/

.czwarty {
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    padding-top: 120px;
    padding-left: 60px;
    padding-right: 60px;
}

/*bol-naglowek*/
.tck-naglowek h2 {
    padding-top: 100px;
    text-transform: uppercase;
    padding-left: 0px;
}

.tck-tresc {
    padding-top: 60px;
    padding-right: 60px;
}


/*strzalka-btn*/
.strzalka-btn {
    padding-top: 60px;
}

/*sekcja - piata*/
.piata {
    background-color: #f0f2f1;
    margin-top: 120px;
    text-align: center;
    padding-bottom: 120px;


}






@media screen and (min-width: 320px) and (max-width: 767px) {

    header {
        height: 110px;
    }

    /*rozmiar fontu - telefon*/
    body h1 {
        font-size: 35px;

    }

    body h2 {
        font-size: 25px;
    }

    body h3 {
        font-size: 20px;
    }

    body h4 {
        font-size: 17px;
    }

    body p {
        font-size: 15px;
    }



    /*menu -telefon*/
    header ul li a {

        font-weight: normal;
    }

    header nav {
        padding-top: 40px;
        padding-left: 5px;
        padding-right: 5px;
    }

    /* sekcja-pierwsza - telefon*/
    .lewa-kolumna {
        grid-template-columns: 1fr;
        padding-top: 50%;
    }


    /*h1*/
    body h1 {
        padding-left: 20px;
        padding-right: 20px;
    }


    /*h2*/
    body h2 {
        padding-top: 40px;
        padding-left: 20px;
        padding-bottom: 40px;
        padding-right: 30px;
    }


    /*img-y*/
    .img-y {
        width: 100%;
        padding-left: 20px;
        padding-right: 20px;
    }

    /*sekcja-druga*/
    .druga {
        grid-template-columns: 1fr;
        margin-top: 60px;
    }


    /*drugi-telefon*/
    .drugi {
        grid-template-columns: 1fr;
        margin-top: 60px;
    }

    /*img-2*/
    .img-2 {
        padding-left: 20px;
    }

    /*img-z*/
    .img-z {
        padding-left: 5px;
        width: 80%;
    }

    /*strzalka*/
    .strzalka {
        width: 20%;
        padding-left: -16%;
    }

    /*naglowek-telefon*/
    .naglowek h2 {
        padding-top: 40px;
        padding-bottom: 40px;
        padding-left: 20px;
        padding-right: 20px;
    }


    .naglowek .tresc {
        padding-right: 20px;
        padding-left: 20px;
        margin-top: 10px;
        padding-bottom: 40px;
    }

    /*trzeci-telefon*/
    .trzeci {
        margin-top: 40px;
        padding-left: 20px;
        padding-right: 20px;
    }

    /*naglowek-h3*/
    .naglowek-trzeci h3 {
        padding-top: 60px;

    }

    /*naglowek-h2*/
    .naglowek-tytul h2 {
        padding-top: 40px;
        padding-left: 20px;
        padding-right: 20px;
    }

    /*kolumny-telefon*/
    .kolumny {
        grid-template-columns: 1fr;
        padding-top: 40px;
        padding-bottom: 20px;
    }

    .naglowek-kolumny p {
        padding-left: 15px;
        padding-right: 15px;
    }

    .cyfra p {
        font-size: 10px;
        padding-bottom: 20px;

    }

    /*btn*/
    .btn1 {
        padding-top: 20px;
        padding-bottom: 40px;
    }

    /*czwarty-telefon*/

    .czwarty {
        grid-template-columns: 1fr;
        padding-top: 40px;
        padding-left: 20px;
        padding-right: 20px;
        padding-bottom: 20px;
    }

    /*img-x*/
    .img-x {
        width: 100%;

    }

    /*bol-naglowek*/
    .tck-naglowek h2 {
        padding-bottom: 40px;
        padding-left: 0px;
        padding-right: 0px;
    }

    /*strzalka-btn*/
    .strzalka-btn {
        top: 30px;
    }

    .tck-tresc {
        padding-top: 20px;
        padding-bottom: 5px;
        padding-right: 15px;
    }






}

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

    header {
        height: 200px;
    }

    /*rozmiar fontu*/
    body h1 {
        font-size: 75px;
    }

    body h2 {
        font-size: 40px;
    }

    body h3 {
        font-size: 30px;
    }

    body h4 {
        font-size: 20px;
    }

    body p {
        font-size: 17px;
    }

    /*menu */
    header ul li a {

        font-weight: normal;
    }

    header nav {
        margin-top: 100px;
        padding-left: 60px;
        padding-bottom: 60px;
    }

    /*logotyp - telefon*/
    header .logotyp {
        padding-left: 60px;
        padding-right: 350px;
    }

    /* sekcja-pierwsza - tablet*/
    .lewa-kolumna {
        grid-template-columns: 1fr;
        padding-top: 40%;
    }

    /*h1*/
    body h1 {
        padding-left: 60px;
        padding-right: 60px;
    }

    /*h2*/
    body h2 {
        padding-top: 100px;
        padding-left: 60px;
        padding-right: 80px;
        padding-bottom: 60px;
    }

    /*img-y*/
    .img-y {
        padding-right: 60px;
        padding-left: 60px;
        width: 100%
    }



    /*drugi*/
    .drugi {
        grid-template-columns: 1fr;
        margin-top: 100px;
    }

    /*img-2*/
    .img-z {
        padding-left: 60px;
        width: 80%;
    }

    /*strzalka*/
    .strzalka {
        width: 16%;
        margin-left: -8%;
    }

    /*naglowek*/
    .naglowek h2 {
        padding-top: 100px;
        padding-bottom: 80px;
        padding-left: 60px;
    }


    .naglowek .tresc {
        padding-right: 60px;
        padding-left: 60px;
        margin-top: -30px;
    }

    /*trzeci*/
    .trzeci {
        margin-top: 100px;
        padding-right: 60px;
        padding-left: 60px;
    }

    /*naglowek-h3*/
    .naglowek-trzeci h3 {
        padding-top: 100px;
    }

    /*naglowek-h2*/
    .naglowek-tytul h2 {
        padding-top: 100px;
        padding-left: 100px;
        padding-right: 100px;
    }

    /*kolumny*/
    .kolumny {
        grid-template-columns: 1fr;
        padding-top: 60px;
        padding-bottom: 80px;
        padding-right: 60px;
        padding-left: 60px;
    }

    .naglowek-kolumny p {
        padding-left: 40px;
        padding-right: 40px;
    }

    .cyfra p {
        padding-top: 60px;
        padding-bottom: 40px;
    }

    .kolumna-tytul h3 {
        padding-bottom: 60px;
    }

    .btn1 {
        padding-top: 40px;
    }

    /*sekcja-czwarta*/

    .czwarty {
        grid-template-columns: 1fr;
        padding-top: 100px;
        padding-left: 60px;
        padding-right: 60px;
        padding-bottom: 100px;
    }

    /*img*/
    .img-x {
        height: 80%;
    }

    /*bol-naglowek*/
    .tck-naglowek h2 {
        padding-bottom: 60px;
    }





}


@media screen and (min-width: 1280px) and (max-width: 1650px) {

    /*menu*/

    header ul li a {
        font-size: 119%;
        padding-top: 26px;
        padding-right: 10px;
        padding: 10px;
    }

    header nav {

        padding-left: -80px;
    }

    /*logotyp - telefon*/
    header .logotyp {
        max-width: 90%;
    }


    /*rozmiar fontu*/
    body h1 {
        font-size: 80px;
    }

    body h2 {
        font-size: 40px;
    }

    body h3 {
        font-size: 35px;
    }

    body h4 {
        font-size: 25px;
    }

    body p {
        font-size: 17px;
    }

    /* sekcja-pierwsza */
    .lewa-kolumna {
        grid-template-columns: 1fr 1fr;
        padding-top: 300px;
    }

    /*h1*/
    body h1 {
        padding-left: 60px;
    }

    /*h2*/
    body h2 {
        padding-top: 30%;
        padding-right: 60px;
    }


    /*img-y*/
    .img-y {
        padding-right: 60px;
        width: 100%;
    }


    /*drugi*/
    .drugi {
        grid-template-columns: 1fr 1fr;
        margin-top: 100px;
    }

    /*img-2*/
    .img-2 {
        padding-left: 40px;
    }

    /*img-z*/
    .img-z {
        width: 90%;
    }

    /*strzalka*/
    .strzalka {
        width: 16%;
        margin-left: -8%;
    }

    /*naglowek*/
    .naglowek h2 {
        padding-top: 80px;
        padding-bottom: 60px;
        padding-right: 60px;

    }

    .tresc-cyfry {
        padding-left: -40px;

    }

    .naglowek .tresc {
        padding-right: 60px;
        padding-left: 60px;
        margin-top: -30px;
        padding-bottom: 60px;
    }

    /*trzeci*/
    .trzecia {
        margin-top: 120px;
        padding-left: 60px;
        padding-right: 60px;
    }

    /*naglowek-h3*/
    .naglowek-trzeci h3 {
        padding-top: 120px;
        text-align: center;
        text-transform: uppercase;
        color: #fff;
    }

    /*naglowek-h2*/
    .naglowek-tytul h2 {
        padding-top: 100px;
        text-align: center;
        text-transform: uppercase;
        color: #fff;
        padding-left: 200px;
        padding-right: 200px;
    }

    /*kolumny*/
    .kolumny {
        margin: 0 auto;
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        padding-top: 120px;
        padding-bottom: 120px;
    }

    .naglowek-kolumny p {
        padding-left: 60px;
        padding-right: 60px;
    }

    .cyfra p {
        font-size: 14px;
        padding-bottom: 60px;
    }

    .kolumna-tytul h3 {
        color: #fff;
        padding-bottom: 60px;
    }

    .btn1 {
        padding-top: 40px;
    }

    /*czwarty*/
    .czwarty {
        padding-top: 100px;
        padding-left: 60px;
        padding-right: 20px;

    }

    /*bol-naglowek*/
    .tck-naglowek h2 {
        padding-top: 80px;
    }



    .tck-tresc {
        padding-top: 40px;
        padding-bottom: 5px;
    }


    .img-x {
        width: 100%;
        padding-right: 60px;
    }


    /*strzalka-btn*/
    .strzalka-btn {
        padding-top: 40px;
    }


}




/* zamiana menu*/
@media (max-width:1279px) {

    header {
        position: absolute;
        padding: 10px 15px;
    }



    header ul li a {
        font-size: 150%;
        font-weight: normal;
        color: #222222;
    }

    header ul li a:hover {
        text-decoration-line: overline;
    }



    header nav {
        position: absolute;
        width: 100%;
        top: 110px;
        left: 0;
        background: #fff;
        display: none;
    }


    header.active nav {
        display: initial;
    }


    header nav ul li {
        width: 100%;
    }

    header nav ul li ul {
        position: relative;
        width: 100%;
    }

    .menuToggle {
        position: relative;
        width: 40px;
        height: 50px;
        cursor: pointer;
        display: flex;
        justify-content: center;
        align-items: center;

    }

    .menuToggle::before {
        content: '';
        position: absolute;
        width: 100%;
        height: 2px;
        background: #000;
        transform: translateY(-12px);
        box-shadow: 0 12px #000;
    }

    .menuToggle::after {
        content: '';
        position: absolute;
        width: 100%;
        height: 2px;
        background: #000;
        transform: translateY(12px);
    }

    header.active .menuToggle::before {
        transform: rotate(45deg);
        box-shadow: 0 0 #000;
    }

    header.active .menuToggle::after {
        transform: rotate(315deg);


    }

}



/*footer*/
.stopka {
    text-align: center;
    margin-top: 120px;
}

/*logo*/
.logo {
    margin: 0 auto;
    padding-bottom: 100px;
}

/*dane*/
.dane {
    border-top: 0.5px solid #c8c8c8c8;
    padding-top: 80px;
    padding-bottom: 80px;
    text-transform: uppercase;
}

/*mail*/
.mail {
    padding-top: 60px;
}

.mail a {
    text-decoration: none;
    color: #004225;
    font-size: 18px;
}


/*akedo*/
.akedo {
    border-top: 0.5px solid #c8c8c8c8;
    padding-top: 40px;
}

.akedo p {
    margin-left: 60px;
    font-size: 14px;
    text-transform: uppercase;
    color: #666;
}

.created a {
    margin-left: 60px;
    font-size: 14px;
    text-transform: uppercase;
    color: #666;
    padding-bottom: 40px;
}

@media screen and (min-width: 320px) and (max-width: 767px) {

    /*footer*/
    .stopka {
        margin-top: 60px;
    }

    /*logo*/
    .logo {
        padding-bottom: 40px;
    }

    /*dane*/
    .dane {
        padding-top: 40px;
        padding-bottom: 40px;
    }

    /*mail*/
    .mail {
        padding-top: 40px;
    }

    .mail a {
        font-size: 14px;
    }

    /*akedo*/
    .akedo p {
        margin-left: 20px;
        font-size: 12px;
    }

    .created a {
        margin-left: 20px;
        font-size: 12px;
        padding-bottom: 40px;
    }
}