@import url(https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;700&display=swap);

:root {
    --hue-color: 173;
    --primary: #08226e;
    --primary-decent: #08226e;
    --primary-hover: #08226e;
    --rgb-primary: 0, 186, 184;
    --yellow: #ffdc06;
    --download: #666666;
    --download-hover: #919191;
    --body-bg: #f5f5f5;
    --img-scale: 1.2;
    --fixed-header: 99;
    --header-height: 68px
}

* {
    margin: 0;
    padding: 0
}

html {
    height: 100%
}

body {
    font-family: Roboto, sans-serif;
    font-weight: 300;
    display: flex;
    flex-direction: column;
    min-height: 100%;
    background-color: var(--body-bg);
    padding-top: var(--header-height)
}

main {
    flex-grow: 1
}

img {
    max-width: 100%;
    height: auto
}

svg {
    width: 100%;
    height: 100%
}

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

.center {
    text-align: center
}

.d-flex {
    display: flex
}

.mx-auto {
    margin-left: auto;
    margin-right: auto
}

.scale {
    overflow: hidden
}

.scale img {
    transform: scale(1);
    transition: .5s
}

.scale:hover img {
    transform: scale(var(--img-scale))
}

.layout {
    display: grid;
    grid-template-columns: 1fr 24px minmax(0, 1280px) 24px 1fr
}

.layout>div {
    grid-column: 3/-3;
    width: 100%;
    margin-left: auto;
    margin-right: auto
}

.header {
    position: fixed;
    top: 0;
    left: 0;
    z-index: var(--fixed-header);
    background-color: #fff;
    width: 100%;
    height: var(--header-height);
    transition: .28s
}

.header.scroll {
    box-shadow: 0 1px 4px rgba(0, 0%, 0%, 10%)
}

.header-inner {
    display: flex;
    align-items: center
}

.header .logo img {
    width: 150px
}

.header nav {
    display: flex;
    gap: 48px;
    margin-left: 48px
}

.header nav a {
    font-size: 16px;
    color: #333
}

.header nav a.active-link,
.header nav a:hover {
    color: var(--primary);
    transform: skewX(-18deg)
}

footer {
    background-color: #2d2d2d;
    padding-top: 60px;
    padding-bottom: 60px
}

footer .content {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    text-align: center
}

footer .content .right {
    display: flex;
    flex-direction: column
}

footer .content .right>div {
    margin-top: 30px
}

footer h3 {
    color: #fff;
    font-size: 18px;
    margin-bottom: 32px;
    font-weight: 400
}

footer p,
footer p a {
    color: #737373;
    font-size: 15px;
    line-height: 1.6
}

footer p a:hover {
    color: #999
}

.download {
    background-color: var(--download);
    padding: 0 20px;
    font-size: 20px;
    display: inline-flex;
    align-items: center;
    color: #fff;
    height: 54px;
    border-radius: 10px
}

.download>:not(:last-child) {
    margin-right: 18px
}

.download:hover {
    background-color: var(--download-hover)
}

.download i {
    flex: 0 0 auto
}

.download span {
    flex: 1
}

.download svg {
    fill: #fff
}

.download .icon-android {
    width: 32px;
    height: 34px
}

.download .icon-download {
    width: 24px;
    height: 24px
}

@media screen and (max-width:768px) {
    .header nav {
        display: none !important
    }
}

@media screen and (min-width:992px) {
    :root {
        --header-height: 80px
    }

    .header .logo img {
        width: 172px;
        margin-left: 100px
    }

    .header nav {
        gap: 68px;
        margin-left: 68px
    }

    .header nav a {
        font-size: 20px
    }

    footer h3 {
        font-size: 20px
    }

    footer p,
    footer p a {
        font-size: 16px
    }

    footer .content,
    footer .content .right {
        flex-direction: row;
        text-align: right
    }

    footer .content .right>div {
        margin-left: 102px;
        margin-top: 0
    }
}

@media screen and (min-width:1560px) {
    :root {
        --header-height: 116px
    }

    .layout {
        grid-template-columns: 1fr 24px minmax(0, 1440px) 24px 1fr
    }

    .header .logo img {
        width: 247px
    }

    .header nav {
        gap: 88px;
        margin-left: 88px
    }

    .header nav a {
        font-size: 24px
    }

    footer h3 {
        font-size: 24px
    }

    footer p,
    footer p a {
        font-size: 18px
    }
}