@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;700");

:root {
    --mp-white: #fff;
    --mp-black: #000;
    --mp-gray: #424242;
    --mp-lightgray: #fafafa;
    --mp-green: #65cc9b;
    --mp-turquoise: #65b9cc;
    --mp-blue: #658ecc;
    --mp-yellow: #deda6e;
    --mp-pink: #cc6590;
    --mp-red: #cc6565;
}

*,
*:before,
*:after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

*:focus { outline: 0; }

[v-cloak] > * { display: none !important; }

[v-cloak] {
    display: grid;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100vh;
    background: var(--mp-white);
    overflow: hidden;
}

[v-cloak]:after {
    content: "";
    display: block;
    width: 50px;
    height: 50px;
    border-radius: 100%;
    border: 5px solid;
    border-color: var(--mp-green) transparent var(--mp-green) transparent;
    animation: cloak 1.2s linear infinite;
}

@keyframes cloak {
    from { transform: rotate(0deg); }

    to { transform: rotate(360deg); }
}

.d-grid { display: grid !important; }

.g-0 { gap: 0; }

.g-1 { gap: 4px; }

.g-2 { gap: 8px; }

.g-3 { gap: 12px; }

.g-4 { gap: 16px; }

.g-5 { gap: 20px; }

.g-6 { gap: 24px; }

.g-7 { gap: 28px; }

.g-8 { gap: 32px; }

.g-9 { gap: 36px; }

.g-10 { gap: 40px; }

.g-11 { gap: 44px; }

.g-12 { gap: 48px; }

.g-13 { gap: 52px; }

.g-14 { gap: 56px; }

.g-15 { gap: 60px; }

.g-16 { gap: 64px; }

html { scroll-behavior: smooth; }

html,
.v-application {
    color: var(--mp-black);
    font-size: 16px;
    font-family: montserrat;
    background: var(--mp-white);
    overflow-x: hidden;
}

.v-application p { margin: 0; }

.v-application a { color: inherit; }

.v-application__wrap { padding: 0; }

img,
svg { display: block; }

.website-header {
    width: 100%;
    transition: .3s;
    position: fixed;
    z-index: 2;
}

.scrolled .website-header {
    background: var(--mp-white);
    box-shadow: 0 0 10px #ccc;
}

.website-header > nav {
    display: grid;
    grid-template-columns: repeat(2, auto);
    align-items: center;
    justify-content: space-between;
    max-width: 1250px;
    margin: auto;
    padding: 20px;
}

.website-header img {
    height: 90px;
    transition: .3s;
}

.scrolled .website-header img { height: 40px; }

.website-header ul {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: auto;
    gap: 20px;
    margin-top: 5px;
    list-style: none;
}

.website-header li {
    display: flex;
    align-items: center;
    justify-content: center;
}

.website-header li:not(:last-child):after {
    content: "";
    display: block;
    width: 1px;
    height: 30px;
    margin-top: -5px;
    margin-left: 20px;
    background: var(--mp-black);
}

.website-header ul a {
    text-transform: uppercase;
    text-decoration: none;
    font-weight: 500;
    line-height: 1;
}

.website-header ul a:after {
    content: "";
    display: block;
    width: 0;
    height: 1px;
    margin: 5px auto 0 auto;
    background: var(--mp-green);
    transition: .3s;
}

.website-header ul a:hover:after { width: 75%; }

.menu-button { display: none; }

.website-footer {
    color: var(--mp-white);
    font-weight: 300;
    background: var(--mp-gray);
}

.website-footer > div {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    align-items: center;
    max-width: 1250px;
    margin: auto;
    padding: 50px 20px;
}

.website-footer img {
    grid-area: 1/2;
    height: 70px;
    margin: auto;
}

.website-footer p:last-child { text-align: right; }

.website-footer a {
    text-decoration: none;
    transition: .3s;
}

.website-footer a:hover { opacity: .5; }

.website-main {
    flex-grow: 1;
    background: url(../images/bg-body.svg) center 300px/cover no-repeat;
}

hr[id] {
    height: 80px;
    margin-top: -80px;
    border: 0;
    visibility: hidden;
}

#sluzby { margin-top: -180px; }

.intro { background: url(../images/bg-top.webp) center/cover no-repeat; }

.intro > div {
    display: grid;
    align-items: center;
    max-width: 1250px;
    min-height: 800px;
    margin: auto;
    padding: 210px 20px 100px 20px;
}

.intro article {
    max-width: 800px;
    line-height: 1.25;
}

.intro h1 {
    margin-bottom: 20px;
    color: var(--mp-pink);
    font-size: 40px;
    font-weight: 500;
    text-transform: uppercase;
}

.intro p { font-size: 24px; }

.services > div {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
    max-width: 1250px;
    margin: auto;
    padding: 100px 20px;
}

.services > div > div:nth-child(2) {
    display: grid;
    align-items: center;
}

.services > div > div:last-child { grid-column: span 3; }

.services h2 {
    max-width: 700px;
    height: 100px;
    margin: 0 auto 0 auto;
    padding: 30px;
    font-size: 40px;
    font-weight: 500;
    text-align: center;
    text-transform: uppercase;
    line-height: 1;
    background: var(--mp-white);
    border-radius: 20px 20px 0 0;
}

.services h2:after {
    content: "";
    display: block;
    margin: 10px auto 0 auto;
    width: 0;
    height: 0;
    border-left: 20px solid transparent;
    border-right: 20px solid transparent;
    border-top: 20px solid var(--mp-green);
}

.services img {
    width: 70px;
    margin: 0 0 20px -10px;
}

.services article { margin-left: 10px; }

.services article:last-child:not(:only-child) { margin-top: 100px; }

.services article div {
    padding: 20px 0 20px 20px;
    border-left: 1px solid var(--mp-black);
}

.services h3 {
    font-size: 14px;
    text-transform: uppercase;
}

.green { color: #65cc9b; }

.turquoise { color: #65b9cc; }

.blue { color: #658ecc; }

.yellow { color: #deda6e; }

.pink { color: #cc6590; }

.default-text > *:not(:last-child) { margin-bottom: 20px; }

.who-we-are { background: var(--mp-gray); }

.who-we-are > div {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    max-width: 1250px;
    margin: auto;
    padding: 100px 20px;
}

.who-we-are > div > div { position: relative; }

.who-we-are img {
    max-height: calc(100% + 100px);
    position: absolute;
    right: 0;
}

.who-we-are article {
    padding: 100px;
    background: var(--mp-lightgray);
}

.who-we-are article div {
    padding: 20px 0 20px 20px;
    border-left: 1px solid var(--mp-black);
}

.who-we-are h2 {
    color: var(--mp-pink);
    font-size: 14px;
    text-transform: uppercase;
}

.about-us > div {
    max-width: 1250px;
    margin: auto;
    padding: 100px 20px;
}

.privacy h1 { margin-bottom: 20px; }

.privacy > div {
    max-width: 1250px;
    margin: auto;
    padding: 100px 20px;
}

.privacy p { margin: 10px; }

.privacy ul {
    padding-left: 20px;
    margin: 10px;
}

.privacy li {
    margin-top: 20px;
    padding-left: 10px;
}

.about-us figure {
    max-width: 550px;
    margin: 0 auto 100px auto;
    font-size: 24px;
    text-align: center;
    position: relative;
}

.about-us figure:before,
.about-us figure:after {
    content: "";
    display: block;
    width: calc(100% / 2 - 110px);
    height: 1px;
    background: var(--mp-black);
    position: absolute;
    top: 88px;
}

.about-us figure:after { right: 0; }

.about-us img {
    width: 175px;
    margin: 0 auto 20px auto;
}

.timeline {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    padding: 100px 40px;
    list-style: none;
}

.timeline li {
    border-top: 12px solid;
    position: relative;
}

.timeline li:after {
    content: "";
    width: 4px;
    height: 70px;
    position: absolute;
    top: 0;
    right: 0;
}

.timeline strong {
    display: grid;
    align-items: center;
    justify-content: center;
    width: 80px;
    height: 80px;
    font-size: 20px;
    font-weight: 500;
    border: 8px solid;
    border-radius: 100%;
    position: absolute;
    top: 70px;
    right: -40px;
}

.timeline p {
    display: grid;
    align-content: end;
    width: 100%;
    height: 74px;
    padding: 10px;
    font-size: 12px;
    text-align: right;
    text-transform: uppercase;
    position: absolute;
    top: -86px;
}

.timeline li:nth-child(odd):after { top: -82px; }

.timeline li:nth-child(odd) strong { top: -162px; }

.timeline li:nth-child(odd) p {
    align-content: start;
    top: 0;
}

.timeline li:nth-child(1),
.timeline li:nth-child(1) strong { border-color: var(--mp-red); }

.timeline li:nth-child(1):after { background: var(--mp-red); }

.timeline li:nth-child(2),
.timeline li:nth-child(2) strong { border-color: var(--mp-yellow); }

.timeline li:nth-child(2):after { background: var(--mp-yellow); }

.timeline li:nth-child(3),
.timeline li:nth-child(3) strong { border-color: var(--mp-green); }

.timeline li:nth-child(3):after { background: var(--mp-green); }

.timeline li:nth-child(4),
.timeline li:nth-child(4) strong { border-color: var(--mp-turquoise); }

.timeline li:nth-child(4):after { background: var(--mp-turquoise); }

.timeline li:nth-child(5),
.timeline li:nth-child(5) strong { border-color: var(--mp-blue); }

.timeline li:nth-child(5):after { background: var(--mp-blue); }

.timeline li:nth-child(6),
.timeline li:nth-child(6) strong { border-color: var(--mp-pink); }

.timeline li:nth-child(6):after { background: var(--mp-pink); }

.contact-details {
    padding: 100px 20px 0 20px;
    background: var(--mp-gray);
}

.contact-details article {
    max-width: 1210px;
    margin: auto;
    padding: 100px 20px;
    background: var(--mp-lightgray);
}

.contacts h2 {
    font-size: 40px;
    font-weight: 500;
    text-align: center;
    text-transform: uppercase;
}

.contacts p { text-align: center; }

.contacts ul {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
    max-width: 600px;
    margin: 50px auto 0 auto;
    text-align: center;
    list-style: none;
}

.contacts ul svg {
    width: 70px;
    margin: 0 auto 10px auto;
}

.contacts ul a,
.contacts ul span {
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
    transition: .3s;
}

.contacts ul a:hover { opacity: .5; }

.contacts form {
    max-width: 900px;
    margin: auto;
    padding: 100px 20px;
}

.contacts form h2 { margin-bottom: 50px; }

.contacts .form-50-50 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px 40px;
    margin-bottom: 20px;
}

.contacts button { margin-top: 20px; }

@media (max-width: 1150px) {
    .who-we-are > div {
        grid-template-columns: 1fr;
        padding: 0;
    }

    .who-we-are > div > div { grid-area: 2/1; }

    .who-we-are img {
        max-width: 100%;
        max-height: 100%;
        position: static;
    }
}

@media (max-width: 950px) {
    .website-footer > div {
        grid-template-columns: 1fr;
        gap: 20px;
        text-align: center;
    }

    .website-footer p:last-child { text-align: center; }

    .website-footer img { grid-area: 1/1; }

    .services > div { grid-template-columns: 1fr; }

    .services article:last-child:not(:only-child) { margin-top: 40px; }

    .services > div > div:last-child { grid-column: span 1; }

    .who-we-are article { padding: 30px; }

    .timeline {
        grid-template-columns: 1fr;
        gap: 40px;
        padding: 0;
    }

    .timeline li {
        display: grid;
        border-top: 0;
    }

    .timeline li:after,
    .timeline li:nth-child(odd):after {
        height: 20px;
        margin: auto;
        top: -20px;
        left: 0;
    }

    .timeline strong {
        margin: auto;
        position: static;
    }

    .timeline p {
        grid-area: 1/1;
        height: auto;
        padding: 10px 0;
        text-align: center;
        position: static;
    }

    .contact-details { padding: 0; }
}

@media (max-width: 750px) {
    .website-header img { height: 40px; }

    .menu-button {
        display: grid;
        align-items: center;
        justify-content: center;
        padding: 10px;
        color: var(--mp-white);
        background: var(--mp-green);
    }

    .menu-button svg {
        width: 20px;
        height: 20px;
    }

    .website-header.menu-closed ul,
    .website-header.menu-closed .menu-button svg:last-of-type,
    .website-header.menu-opened .menu-button svg:first-of-type { display: none; }

    .website-header ul {
        grid-auto-flow: row;
        grid-auto-columns: auto;
        width: 250px;
        margin: 0;
        padding: 20px;
        color: var(--mp-white);
        background: var(--mp-green);
        position: absolute;
        top: 80px;
        right: 20px;
    }

    .website-header ul a:after { background: var(--mp-white); }

    .website-header li:not(:last-child):after { display: none; }

    .intro > div {
        min-height: 0;
        margin: auto;
        padding: 160px 20px 100px 20px;
    }

    .intro h1 { font-size: 20px; }

    .intro p { font-size: 16px; }

    #sluzby { margin-top: -80px; }

    .services h2 {
        margin: 0 auto;
        padding: 100px 20px 0 20px;
        font-size: 20px;
    }

    .services h2:after {
        border-left: 10px solid transparent;
        border-right: 10px solid transparent;
        border-top: 10px solid var(--mp-green);
    }

    .contacts h2 { font-size: 20px; }

    .contacts ul { grid-template-columns: 1fr; }

    .contacts .form-50-50 {
        grid-template-columns: 1fr;
        gap: 0;
        margin-bottom: 0;
    }

    .contacts button { margin-top: 0; }
}