:root {
    --bg-body-color: #1D193B;

    --def-text-color: #fff;
    --def-text2-color: #434343;
    --def-text-primary-zie: #08C1C1;
    --def-text-primary-roz: #FF2275;
    --def-text-primary-zol: #FED43D;
    --def-text-primary-cza: #1D193B;
    --def-text-orange: #f07d00;
    --def-text-white: #ffffff;
    --def-text-black: #212121;
    --def-text-red: #db0500;
    --def-text-green: #068000;
    --def-text-primary2: #354259;

    --def-text-size: 20px;
    --def-text-weight: 300;

    --def-color-grey0: #f1f1f1;
    --def-color-grey1: #e5e5e5;
    --def-color-grey2: rgb(176, 176, 176);
    --def-color-grey3: #777777;
    --def-color-grey4: #5b5b5b;
    --def-color-grey5: #363636;

    --a-color: #FED43D;
    --a-hover-color: #FF2275;

    --input-btn-bg: #FF2275;
    --input-btn-bg-hover: #FF2275;
    --input-btn-border-radius: 0px;
    --input-btn-textcolor-hover: #fff;

    --input-bg: #ffffff;
    --input-border: #e0e0e0;
    --input-border-radius: 0px;
    --input-border-color-focus: #FF2275;

    --def-text-header-color: #FF2275;
    --def-text-title-color: #696868;

    --def-border-image-color: #dcdcdc;

    --def-table-border-color: #f1f1f1;
    --def-table-bg-hover-color: #f7f7f7;
}

h1, .h1 { font-size: 130px; color: var(--def-text-primary-roz);  text-transform: uppercase; font-weight: normal; font-family: "Anton", sans-serif; line-height: 105%; }
h2 { font-size: 60px; color: var(--def-text-primary-zol); text-transform: uppercase; font-weight: normal; font-family: "Anton", sans-serif; line-height: 105%; }
h3 { font-size: 30px; color: var(--def-text-primary-zie);  text-transform: uppercase; font-weight: normal; font-family: "Anton", sans-serif; line-height: 105%; }
h4 { font-size: 30px; color: var(--def-text-primary-zie);  font-weight: normal;  }
h2 span { display: block; color: var(--def-text-primary-zie);}


/* main */

body {
    background:   repeat-x center 698px;
    background-color: #1D193B ;
}

.main {
    width: 1320px;
    margin-left: auto;
    margin-right: auto;
    display: block;
    position: relative;
}

#header {
    width: 100%;
    text-align: center;
}

#logo {
    position: absolute;
    top: 10px;
    left: 50%;
    margin-left: -105px;
    text-align: center;
    margin-top: 10px;
}

#logo img {
    width: 210px;
    height: auto;
}

#menu {
    display: flex;
    width: 100%;
    gap: 70px;
    justify-content: center;
    margin-top: 60px;
}


#menu a {
    font-size: 19px;
    font-weight: 300;
}

#menu #przerwa {
    width: 250px;
}

#area {
    position: absolute;
    right: calc(50% - 900px);
    display: flex;
    gap: 20px;
    top:60px;
}



#banner {
    margin-top: 180px;
    position: relative;
}

#banner h4 {
    margin-bottom: 60px;
}

#twojemiasto {
    display: flex;
    margin-top: 160px;
    gap:   35px;
}

#twojemiasto #logocontent {
    margin-left:-50px;
}

#twojemiasto #logocontent img {
    width: 700px;
    height: auto;
}

#twojemiasto .opis h2 {
    margin-bottom: 40px;
}

#korzysci,
#korzysci2 {
    display: flex;
    gap: 40px;
    margin-top: 160px;
}

.korzysciLi {
    display: flex;
    flex-direction: column;
    gap: 20px;
    align-items: center;
    text-align: center;
    font-size: 20px;
}

#korzysciopis {
    text-align: center;
    margin-top: 140px;
}

h5 {
    font-size: 40px;
    color: var(--def-text-primary-zol);
    font-weight: 300;
}

#zasiegi {
    margin-top: 220px;
}

#sociale {
    display: flex;
    flex-wrap: wrap;
    gap: 100px;
}


#sociale h2 {
    color: var(--def-text-primary-zol);
    line-height: 120%;
}

.sociale {
    margin-top: 120px;
}

#pakiety {
    background: url(../img/bg2.png) no-repeat center top;
    padding-top: 480px;
    margin-top: 100px;
}

#pakiety .white {
    color: #fff;
    font-size: 120px;
    margin-bottom: 160px;
}

#pakietmicro {
    position: relative;
    margin-top: 40px;
    background: url(../img/drzewka.png) no-repeat right 800px;
}

#pakietmicro::before {
    content: "";
    background: url(../img/gw2.png) no-repeat;
    width: 142px;
    height: 254px;
    position: absolute;
    top: 90px;
    left: 750px;
}

#pakietmicro::after {
    content: "";
    background: url(../img/gw1.png) no-repeat;
    width: 151px;
    height: 394px;
    position: absolute;
    bottom:-135px;
    left: -190px;
}

#pakietmicro h2,
#pakietgiga h2,
#pakietmega h2 {
    color: var(--def-text-primary-zie);
    font-size: 300px;
    line-height: 90%;
}

#pakietmega h2 {
    margin-bottom: -20px;
    margin-left:-15px;
}


#pakietmicro h6,
#pakietgiga h6,
#pakietmega h6 {
    color: #fff;
    font-size: 60px;
    line-height: 90%;
    font-weight: bold;
    font-family: "Anton", sans-serif;
    margin-bottom: 100px;
}


.lista {
    font-family: "Anton", sans-serif;
    font-size: 50px;
    font-weight: 300;
    color: var(--def-text-primary-zol);
    position: relative;
    margin-top: 40px;
    line-height: 130%;
    width: 70%;
}

.lista::before {
    content: "";
    position: absolute;
    top: -35px;
    left: -57px;
    width: 57px;
    height: 57px;
    background: url(../img/glista.png) no-repeat left top;
}

#pakietmega {
    display: flex;
    margin-top: 200px;
    gap: 60px;
}

#pakietmega .fotoll {
    margin-left:-250px;
}
#pakietmega h2 {
    line-height: 100%;
    margin-top: 50px;
    position: relative;
    color: var(--def-text-primary-roz);

}
#pakietmega h2::before {
    content: "";
    background: url(../img/gw3.png) no-repeat;
    width: 896px;
    height: 369px;
    position: absolute;
    top: -100px;
    left: -100px;
}

#pakietmega h2 span  {
    font-size: 346px;

    color: var(--def-text-primary-roz);
}

#pakietmega .lista,
#pakietgiga .lista {
    width: 100%;
}

#pakietgiga .fotoll {
    margin-top:-100px;
    margin-left: -100px;
}


#pakietgiga {
    display: flex;
    margin-top: 200px;
    position: relative;
}

#pakietgiga::before {
    content: "";
    background: url(../img/gw4.png) no-repeat;
    width: 181px;
    height: 1590px;
    position: absolute;
    top: 300px;
    left: -200px;
}

#pakietgiga h2 {
    line-height: 112%;
    margin-top: 50px;
    position: relative;
    margin-left: -5px;
    color: var(--def-text-primary-zol);

}

#pakietgiga h2 span {
    font-size: 440px;
    color: var(--def-text-primary-zol);
}

#pakietgiga h6 {
    margin-top:-40px;
}

.infoLimit {
    font-size: 60px;
    font-family: "Anton", sans-serif;
    color: var(--def-text-primary-zie);
    margin-top: 180px;
    line-height: 110%;
}

.infoLimit a {
    font-family: "Lexend", sans-serif;
}

#lokalizacja {
    margin-top: 200px;
}

#lokalizacja h4 {
    color: var(--def-text-primary-zol);
}

#map {
    margin-top: 100px;
}

#kontakt h4 {
    color: var(--def-text-primary-zol);
    font-size: 34px;
}
#adres {
    margin-top: 50px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

#adres span,
#adres a {
    font-size: 20px;
    color: var(--def-text-primary-zol);
    background: url("/img/ico_adres.png") no-repeat left center;
    padding: 5px 0 5px 40px;
}

#adres a:nth-child(2) {
    background: url("/img/ico_tel2.png") no-repeat left center;
}


#form {
    margin: 80px 0;
}

#form input[type="text"],
#form input[type="email"] {
    padding: 30px;
}

#form textarea {
    padding: 30px;
    width: 100%;
}

#form .formRow label {
    background: none;
    bordeR:none;
}

#form .cols {
    display: flex;
    gap: 40px;
    justify-content: space-between;
    align-items: center;
}


#form .contentFormBase {
    gap: 40px;
    display: flex;
    flex-direction: column;
    width: 50%;
}
footer {
    background: #08C1C1;
    text-align: center;
    padding: 40px;

}
footer   a {
    color:#fff;
}
footer small {
    display: block;
    margin-top: 10px;
}