body {
    font-family: "RobotoFlex", "Arial", sans-serif;
    font-size: 18px;
    line-height: 1.5;
    background: #fff;
    color: #000;
    margin: 0;
    text-align: center;
}
html {
    scrollbar-color: #00a550 #000;
    scrollbar-width: thin;
    font-size: 18px;
}
* {
    box-sizing: border-box;
}

/* scrollbar */
::-webkit-scrollbar {
    width: 8px;
}
::-webkit-scrollbar-track {
    background: var(--kwbodycolor);
}
::-webkit-scrollbar-thumb {
    background: var(--kwprimary);
}
::-webkit-scrollbar-thumb:hover {
    background: var(--kwprimary);
    opacity: 0.8;
}

/* selection */
*::-moz-selection { background:#B5FFD2; color:#094580; }
*::-webkit-selection { background:#B5FFD2; color:#094580; }
*::selection { background:#B5FFD2; color:#094580; }

/* fonts */
@font-face {
    font-family: "RobotoFlex";
    src: url("fonts/roboto-flex.ttf") format("truetype");
    font-weight: 100 1000;
    font-stretch: 100%;
    font-style: normal;
}
@font-face {
    font-family: "RobotoSerif";
    src: url("fonts/roboto-serif.ttf") format("truetype");
    font-weight: 100 900;
    font-stretch: 100%;
    font-style: normal;
}
@font-face {
    font-family: "RobotoSerif";
    src: url("fonts/roboto-serif-italic.ttf") format("truetype");
    font-weight: 100 900;
    font-stretch: 100%;
    font-style: italic;
}
p {
    margin: 20px 0 0;
}
.kwH2Style {
    font-size: 1.7rem;
    font-weight: 700;
    font-family: "RobotoSerif", "Arial", sans-serif;
    line-height: 1.35;
    margin-top: 70px;
}

/* header */
header {
    height: 136px;
    padding: 0 70px;
}
.kwImgHeader {
    padding: 28px 0;
    border-bottom: 2px solid #000;
    text-align: center;
    height: 136px;
    display: grid;
    align-content: center;
}
.kwLogo {
    height: 60px;
    width: auto;
    margin: auto;
}

/* body */
.kwBody {
    padding: 70px calc((100% - 1140px)/2);
}
.kwServizi {
    display: flex;
    padding: 0;
    column-gap: 20px;
    row-gap: 20px;
    margin: 20px 0 0;
    flex-wrap: wrap;
    justify-content: center;
}
.kwServizi > li {
    counter-increment: step;
    background: #f4f4f4;
    color: #000;
    text-align: center;
    display: grid;
    align-content: center;
    justify-content: center;
    border-radius: 20px;
    padding: 20px;
    width: 23%;
}
.kwServizi > li::before {
    content: counter(step);
    color: #00a550;
    font-size: 1.8em;
    z-index: 1;
    background: #fff;
    height: 1.5em;
    width: 1.5em;
    line-height: 1.5em;
    text-align: center;
    margin: 0 auto 10px;
    border-radius: 100%;
    font-weight: 500;
}

/* footer */
footer {
    padding: 70px calc((100% - 1140px)/2);
    display: grid;
    justify-content: center;
    text-align: center;
    background-color: #00a550;
    color: #fff
}
footer a {
    color: #fff;
    text-decoration: none;
}

:first-child {
    margin-top: 0;
}

@media screen and (max-width: 1200px) {
    footer,
    .kwBody {
        padding: 70px calc((100% - 940px)/2);
    }
}

@media screen and (max-width: 991px) {
    body, html {
        font-size: 16px;
    }
    footer,
    .kwBody {
        padding: 50px calc((100% - 720px)/2);
    }
    .kwH2Style  {
        margin-top: 50px;
    }
    header {
        padding: 0 50px;
        height: 78px;
    }
    .kwImgHeader {
        height: 78px;
        padding: 0;
    }
    .kwLogo {
        height: 40px;
    }
    .kwServizi > li{
        width: 46%;
    }
}

@media screen and (max-width: 767px) {
    footer,
    .kwBody {
        padding: 50px 15px;
    }
    .kwH2Style {
        font-size: 1.5rem;
    }
    header {
        padding: 0 15px;
    }
}