@charset "utf-8";
/* CSS Document */

/* http://meyerweb.com/eric/tools/css/reset/
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
    display: block;
}
body {
    line-height: 1;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}

/*============================================*/

html {
    font-size: 62.5%; /* 1rem = 10px */
}
body {
    font-family: 'Montserrat', sans-serif;
    color: #000000;
    line-height: 1.5;
    overflow-x: hidden;
    padding: 0;
}

*,
*::before,
*::after {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
main {
    display: block;
}

.skip-link {
    position: absolute;
    left: -9999px;
}
.skip-link:focus {
    left: 1rem;
    top: 1rem;
}

.container {
    position: relative;
    margin: 0 auto;
    padding-left: 15px;
    padding-right: 15px;
    max-width: 1400px;
}
img {
    max-width: 100%;
    height: auto;
    aspect-ratio: attr(width) / attr(height);
    vertical-align: middle;
}
strong {
    font-weight: 600;
}
em {
    font-style: italic;
}
a {
    color: #009beb;
    transition: all .5s ease;
    -webkit-transition: all .5s ease;
    -moz-transition: all .5s ease;
    -o-transition: all .5s ease;
}
p {
    font-size: 1.8rem;
    font-weight: 400;
    margin-bottom: 1em;
}
.btn {
    display: inline-block;
    color: #fff;
    background-color: #000;
    font-size: 1.6rem;
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    text-decoration: none;
    text-align: center;
    text-transform: uppercase;
    padding: .75em 1.5em;
    -webkit-appearance: none;
    border: 2px solid #000;
    border-radius: 5px;
}
.btn:hover,
.btn:focus,
.btn:active {
    color: #1a1818;
    background-color: #ffdc00;
    border: 2px solid #ffdc00;
}
.btn-white {
    background-color: #fff;
    color: #000;
    border: 2px solid #677f88;
}
.btn-blue {
    background-color: #009deb;
    color: #fff;
    border: 2px solid #009deb;
}
.btn-pinkborder {
    background-color: #fff;
    color: #df0079;
    border: 2px solid #df0079;
}
.align-center {
    text-align: center;
}
.transition {
    transition: all 300ms ease;
}
/* header */
.main-header {
    background-color: #fff;
}
.main-header .container {
    max-width: 1600px;
    margin: 0 auto;
    padding: 30px 15px 15px 15px;
}
.header-inner {
    display: flex;
    flex-direction: column;
}
.header--phone-desktop {
    display: none;
}
.header-logo {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-end;
    padding-bottom: 15px;
    border-bottom: 2px solid #e1e1e1;
    margin-bottom: 10px;
}
.header-logo > div {
    width: 50%;
}
.header-logo > div:first-of-type img {
    max-width: 150px;
}
.header-logo > div:last-of-type {
    text-align: right;
}
.header--phone {
    color: #000;
    font-size: 1.6rem;
    font-weight: 500;
}
.header--phone:hover,
.header--phone:focus,
.header--phone:active {
    color: #df0079;
}
.header-nav {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}
.header--socials > li {
    display: inline-block;
}
.header--socials > li + li {
    margin-left: 10px;
}
.btn-header {
    background-color: #009deb;
    border: 2px solid #000;
    border-radius: 5px;
    padding: 4px 20px;
}
@media (min-width: 901px) {
    .sticky {
        position: fixed;
        top: 0;
        width: 100%;
        z-index: 1;
        box-shadow: 1px 1px 16px 2px rgba(0, 0, 0, .15);
    }
    .main-header.sticky .container  {
        padding-top: 5px;
        padding-bottom: 5px;
    }
    .header-inner {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }
    .header--phone-mobile {
        display: none;
    }
    .header--phone-desktop {
        display: block;
    }
    .header-logo {
        width: 100%;
        padding-bottom: 0;
        border-bottom: none;
        margin-bottom: 0;
    }
    .header-logo > div:first-of-type img {
        max-width: initial;
    }
    .main-header.sticky .header-logo > div:first-of-type img {
        max-width: 200px;
    }
    .header-nav {
        width: 100%;
        flex-direction: column;
        justify-content: initial;
        align-items: flex-end;
    }
    .header-logo > div {
        width: 100%;
    }
    .header--contact {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
    }
    .main-header.sticky .header--contact {
        display: none;
    }
    .header--phone {
        font-size: 1.8rem;
    }
    .header--socials {
        margin-right: 15px;
    }
    .header--button {
        width: 100%;
        max-width: 400px;
        margin-top: 10px;
    }
    .header--button .btn-header {
        width: 100%;
        font-size: 3.2rem;
    }
    .main-header.sticky .header--button {
        margin-top: 0;
        max-width: 300px;
    }
    .main-header.sticky .btn-header {
        font-size: 2rem;
    }
}
/* Home */

.publishers-banner {
    background: #40c3f4;
    padding: 4em 0 0 0;
}
.publishers-banner--inner {
    display: flex;
    flex-direction: column;
}
.publishers-banner--text {
    text-align: center;
    padding: 0 15px;
}
.publishers-banner--overline {
    text-transform: uppercase;
    font-size: 1.8rem;
    font-weight: 600;
}
.publishers-banner--title {
    font-size: 3.4rem;
    font-weight: 600;
    line-height: 1.2;
    margin-bottom: .35em;
}
.publishers-banner--title > span {
    color: #fff;
}
.publishers-banner--bottom {
    text-align: right;
    margin-top: 1em;
}
.publishers-banner--bottom > p {
    color: #fff;
    margin: 0;
    font-size: 1.6rem;
}
.section {
    margin: 3em 0;
}
.title-36 {
    font-size: 2.4rem;
    font-weight: 600;
    margin-bottom: .5em;
}
.title-24 {
    font-size: 2rem;
    font-weight: 600;
    margin-bottom: .5em;
}
.section--subtitle {
    font-size: 2.2rem;
}
.flex-row {
    display: flex;
    flex-direction: column;
}
.col-flex-33 {
    width: 100%;
}
.col-flex-50 {
     width: 100%;
 }
.col-flex-66 {
    width: 100%;
}
.section--products .col-flex-33 {
    padding: 15px;
}
.section--products .col-flex-33 > img {
    max-width: 320px;
}
.img-title {
    font-size: 2.2rem;
    font-weight: 600;
    line-height: 1;
    margin: 1em 0 .5em 0;
}
.section-contactform .col-flex-50 {
    padding: 20px 0;
    /*text-align: center;*/
}
.contact-calendar-wrap {
    margin-top: 4em;
    margin-bottom: 4em;
}
.section-contactform .btn {
    width: 100%;
    max-width: 300px;
    margin-top: 1em;
}
@media (max-width: 500px) {
    .mcrl-two-buttons .btn {
        width: 100%;
        max-width: 320px;
    }
    .mcrl-two-buttons .btn + .btn {
        margin-top: .75em;
    }
}
@media (min-width: 901px) {
    .publishers-banner {
        background: #40c3f4 url("../images/publishers-01-1024.webp") top center no-repeat;
        background-size: cover;
        padding: 5em 0;
    }
    .publishers-banner--mobile > picture {
        display: none;
    }
    .publishers-banner--inner {
        width: 100%;
        max-width: 1400px;
        margin: 0 auto;
    }
    .publishers-banner--text {
        text-align: left;
        width: 60%;
    }
    .publishers-banner--bottom {
        text-align: left;
        margin-top: 2em;
    }
    .publishers-banner--overline {
        font-size: 2.4rem;
    }
    .publishers-banner--title {
        font-size: 4.6rem;
    }
    .publishers-banner--subtitle {
        font-size: 2.4rem;
        font-weight: 500;
    }
    .section {
        margin: 4em 0;
    }
    .title-36 {
        font-size: 3.6rem;
    }
    .title-24 {
        font-size: 2.4rem;
    }
    .section--subtitle {
        font-size: 2.8rem;
        font-weight: 500;
    }
    .flex-row {
        flex-direction: row;
        flex-wrap: wrap;
    }
    .col-flex-33 {
        width: 50%;
    }
    .col-flex-33 > img {
        max-width: 100%;
    }
    .col-flex-50 {
        width: 50%;
    }
    .col-flex-66 {
        width: 50%;
    }
    .section-contactform .col-flex-50 {
        padding: 20px;
        text-align: left;
    }
}
@media (min-width: 1025px) {
    .publishers-banner {
        background: #40c3f4 url("../images/publishers-01-1440.webp") top center no-repeat;
        background-size: cover;
        padding: 6em 0;
    }
    .publishers-banner--title {
        font-size: 5.2rem;
    }
    .col-flex-33 {
        width: 33.3333%;
    }
    .col-flex-66 {
        width: 66.6666%;
    }
    .img-title {
        font-size: 2.4rem;
        line-height: 1;
        margin: 1.25em 0 .5em 0;
    }
    .img-description {
        font-size: 2rem;
    }
    .section-contactform .col-flex-50 {
        padding: 20px 60px;
    }
    .contact-calendar-wrap {
        margin-top: 4em;
        margin-bottom: 4em;
    }
}
@media (min-width: 1441px) {
    .publishers-banner {
        background: #40c3f4 url("../images/publishers-01-1920.webp") top center no-repeat;
        background-size: cover;
    }
}
@media (min-width: 1921px) {
    .publishers-banner {
        background: #40c3f4 url("../images/publishers-01.webp") top center no-repeat;
        background-size: cover;
    }
}
.benefits-list {
    max-width: 935px;
    margin: 0 auto;
}
.benefits-item {
    display: flex;
    align-items: center;
    padding: 2em 0;
    border-bottom: 2px solid #919191;
}
.benefits-icon {
    max-width: 80px;
}
.benefits-content {
    margin-left: 15px;
    text-align: left;
}
.benefits-content .title-36 {
    margin-bottom: 0;
}
.benefits-content p {
    font-size: 1.8rem;
    margin-bottom: 0;
}
.benefits-footer {
    margin-top: 3em;
}
.benefits-footer p {
    margin-bottom: 0;
}
.divider {
    background-color: #40b9f2;
    padding: 6em 1em;
    color: #fff;
}
@media (min-width: 1025px) {
    .benefits-item {
        padding: 3em 100px 3em 100px;
    }
    .benefits-content {
        margin-left: 30px;
    }
    .benefits-content p {
        font-size: 2.4rem;
    }
    .divider {
        padding: 8em 0;
    }
    .divider h2 {
        margin-bottom: 0;
    }
    .btn-big {
        font-size: 2rem;
    }
}

/* testimonials */

.LP--testimonials-row {
    display: flex;
    flex-direction: column;
    align-items: start;
}
.LP--testimonials-row:first-of-type {
    align-items: center;
}
.LP--testimonials-row + .LP--testimonials-row {
    margin-top: 5em;
}
.LP--testimonials-col-left {
    width: 100%;
    text-align: center;
}
.LP--testimonials-col-right {
    width: 100%;
}
.LP--testimonials-col-right hr {
    width: 100%;
    height: 3px;
    background-color: #3c3c3c;
}
.LP--testimonials-col-left h3 {
    font-size: 2.2rem;
    font-weight: 300;
    text-transform: uppercase;
    margin-bottom: .5em;
}
.testimonial-box-avatar {
    margin-bottom: 15px;
}
.testimonial-box-avatar > img {
    border-radius: 50%;
    border: 2px solid #3c3c3c;
}
.LP--testimonials-col-right img {
    margin-bottom: 1.5em;
}
.LP--testimonials-col-right p {
    margin-bottom: 0;
    font-size: 1.8rem;
}
.featured-project {
    margin-top: 5em;
    margin-bottom: 5em;
}
.featured-project h4 {
    font-size: 2.4rem;
    font-weight: 500;
    margin-bottom: .25em;
}
.featured-project p {
    font-size: 2rem;
    margin-bottom: 0;
    margin-top: .35em;
}
.featured-project--note > span {
    display: block;
    font-size: 1.6rem;
}
.featured-project--note > span > span {
    font-weight: 600;
}
.section-responsibility h2 {
    margin-bottom: 1em;
}
@media (min-width: 768px) {
    .LP--testimonials-row {
        flex-direction: row;
    }
    .LP--testimonials-col-left {
        width: 20%;
        padding-right: 5%;
    }
    .LP--testimonials-row:first-of-type > .LP--testimonials-col-left {
        width: 35%;
    }
    .LP--testimonials-col-right {
        width: 80%;
    }
    .LP--testimonials-col-left h3 {
        font-size: 2.8rem;
    }
    .testimonial-box-avatar {
        margin-bottom: 0;
    }
    .LP--testimonials-col-right p {
        font-size: 2.2rem;
    }
    .featured-project h4 {
        font-size: 2.8rem;
    }
    .featured-project p {
        font-size: 2.2rem;
    }
    .featured-project--note > span {
        font-size: 1.8rem;
    }
    .featured-project .flex-row > .col-flex-66 {
        padding-left: 20px;
    }
}
@media (min-width: 1025px) {
    .featured-project .flex-row {
        align-items: center;
    }
    .featured-project .flex-row > .col-flex-66 {
        padding-left: 5%;
    }
    .section-responsibility {
        margin-bottom: 6em;
    }
}

/* footer */
#main-footer {
    padding: 45px 0;
    background-color: #000;
    color: #fff;
}
.footer-top-row {
    margin-left: -15px;
    margin-right: -15px;
}
.footer-top-row .col-flex-33 {
    padding: 15px;
}
.footer-wrap-why {
    margin-bottom: 40px;
}
.footer-wrap-why > h2 {
    position: relative;
    font-size: 22px;
    font-weight: 500;
    text-align: center;
    text-transform: uppercase;
    color: #fff;
    margin-bottom: 40px;
    z-index: 1;
}
.footer-wrap-why > h2::after {
    position: absolute;
    content: '';
    width: 100%;
    height: 1px;
    background-color: #fff;
    left: 0;
    top: calc(50% - 1px);
    z-index: -1;
}
.footer-wrap-why > h2 > span {
    display: inline-block;
    padding: 0 15px;
    background-color: #000;
}
.wrap-why-title {
    font-size: 1.6rem;
    font-weight: 600;
    text-transform: uppercase;
    text-align: center;
    color: #fff;
    margin-bottom: 1em;
}
.wrap-why-title.align-center {
    text-align: center;
}
.wrap-why-title > a {
    color: #fff;
    text-decoration: none;
}
.wrap-why-par {
    font-size: 1.6rem;
    text-align: center;
}
.footer-wrap-contact {
    text-align: center;
    text-transform: uppercase;
    margin-bottom: 30px;
}
.footer-wrap-contact > h3 {
    margin: 0;
}
.footer-wrap-contact > h3 > a {
    font-size: 3.2rem;
    font-weight: 500;
    color: #fff;
    text-decoration: underline;
    margin-bottom: .2em;
}
.footer-wrap-contact > p {
    font-size: 2rem;
}
.footer-wrap-contact > p > a {
    color: #fff;
    font-weight: 500;
    text-decoration: none;
}
.footer-nav {
    margin-top: 1em;
}
.footer-nav > ul > li {
    position: relative;
    display: block;
    font-size: 1.5rem;
}
.footer-nav ul > li + li {
    margin-top: .5em;
}
.footer-nav ul > li > a {
    display: inline-block;
    font-size: 1.5rem;
    /*padding: 0 10px;*/
    font-weight: 400;
    text-decoration: none;
    color: #fff;
}
.footer-nav > ul > li > a:hover,
.footer-nav > ul > li > a:active,
.footer-nav > ul > li > a:focus {
    color: #e0007a;
}
.footer-trees--desktop {
    display: none;
}
.footer-trees--mobile {
    margin-bottom: 5em;
}
.footer-wrap-bottom {
    text-align: center;
}
.footer-wrap-bottom a {
    color: #fff;
    font-weight: 400;
    opacity: .4;
    text-decoration: none;
    margin: 10px 5px;
}
.footer-nav-terms {
    margin-top: 2em;
    margin-bottom: 2em;
}
.footer-nav-terms ul {
    list-style: none;
    padding-left: inherit;
    margin-bottom: 0;
}
.footer-nav-terms ul > li {
    display: inline-block;
}
.footer-nav-terms ul > li > a {
    color: #fff;
    font-size: 1.2rem;
    font-weight: 400;
    opacity: .8;
}
.footer-wrap-bottom small {
    font-size: 1.2rem;
    display: block;
    margin-bottom: 2em;
}
.footer-wrap-bottom a {
    color: #fff;
    font-weight: 400;
    opacity: .4;
    text-decoration: none;
    margin: 10px 5px;
}
.footer-wrap-bottom a:hover,
.footer-wrap-bottom a:focus,
.footer-wrap-bottom a:active {
    opacity: 1;
}
.footer-wrap-bottom a > img {
    vertical-align: calc(-.6rem);
}
.footer-middle-row > .col-flex-33:first-of-type,
.footer-middle-row > .col-flex-33:last-of-type {
    text-align: center;
}
.footer-middle-row > .col-flex-33:first-of-type {
    margin-bottom: 4em;
}
.footer-middle-row > .col-flex-33:last-of-type {
    margin-top: 4em;
}
.footer-wrap-socials {
    margin-bottom: 40px;
    margin-top: 20px;
}
.footer-wrap-socials li {
    display: inline-block;
    margin: 0 10px;
}
@media (min-width: 451px) {
    .footer-wrap-contact > p {
        font-size: 3.6rem;
    }
}
@media (min-width: 768px) {
    .footer-trees--mobile {
        display: none;
    }
    .footer-trees--desktop {
        display: block;
        margin-top: 4em;
    }
    .wrap-why-title {
        text-align: left;
    }
    .wrap-why-par {
        font-size: 1.4rem;
        text-align: justify;
    }
    #main-footer .col-flex-33 {
        width: 33.3333%;
    }
    .footer-middle-row > .col-flex-33:first-of-type,
    .footer-middle-row > .col-flex-33:last-of-type {
        text-align: left;
    }
    .footer-middle-row > .col-flex-33:first-of-type {
        margin-bottom: auto;
    }
    .footer-middle-row > .col-flex-33:last-of-type {
        margin-top: auto;
    }
}
#toTop {
    width: 30px;
    height: 30px;
    background: #40b9f2 url("../images/arrow-toTop.png") center center no-repeat;
    background-size: contain;
    text-align: center;
    padding: 10px;
    line-height: 20px;
    position: fixed;
    bottom: 10px;
    right: 10px;
    cursor: pointer;
    display: none;
    z-index: 40;
    border: 1px solid #40b9f2;
    border-radius: 3px;
}

/* slider */
.section-slider {
    max-width: 1920px;
    margin: 0 auto;
    margin-bottom: 8em;
}
.hero-slider {
    width: 100%;
}
.hero-slider__track {
    position: relative;
    width: 100%;
    overflow: hidden;
    transition: height 300ms ease;
}
.hero-slide {
    position: absolute;
    inset: 0;
    width: 100%;
    display: flex;
    align-items: stretch;
    background-color: #e8f4fb;
    opacity: 0;
    pointer-events: none;
    transition: opacity 500ms ease;
}
.hero-slide.is-active {
    opacity: 1;
    pointer-events: auto;
}
.hero-slide__text {
    flex: 1 1 50%;
    padding: 3em 5vw;
    background-color: #e8f4fb;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.hero-slide__text h3 {
    margin: 0 0 .25em;
    font-size: clamp(3.2rem, 3vw, 5.4rem);
    line-height: 1.2;
    font-weight: 600;
}
.hero-slide__text p {
    margin: 0;
    font-size: clamp(2rem, 1.8vw, 2.8rem);
}
.hero-slide__image {
    flex: 1 1 50%;
}
.hero-slide__image img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
    border: 2px solid #707070;
}
.hero-slider__dots {
    position: relative;
    z-index: 2;
    display: flex;
    justify-content: center;
    gap: 0.75rem;
    margin-top: -4em;
}
.hero-slider__dot {
    width: 25px;
    height: 25px;
    border-radius: 50%;
    border: 2px solid #00a1ec;
    background: #000;
    cursor: pointer;
}

.hero-slider__dot.is-active {
    background: #fff;
    border: 2px solid #000;
}

.hero-slider__dot:focus-visible {
    outline: 2px solid #005fcc;
    outline-offset: 2px;
}
@media (max-width: 767px) {
    .hero-slide {
        flex-direction: column-reverse;
    }
    .hero-slide__text {
        padding: 2rem 1.5rem 3rem;
    }
    .hero-slide__image img {
        aspect-ratio: 1 / 1;
        object-fit: cover;
        width: 100%;
        height: auto;
    }
    .hero-slider__dots {
        padding-top: 2em;
        padding-bottom: 2em;
        margin-top: 0;
        background-color: #eaf6fc;
    }
}



