:root {
    --font-family: "Rubik", sans-serif;
    --content-width: 1180px;
    --container-offset: 15px;
    --container-width: calc(var(--content-width)  + (var(--container-offset) * 2));
}

html {
    box-sizing: border-box;
    tab-size: 4;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    -webkit-tap-highlight-color: #0000;
    line-height: 1.15;
    position: relative;
}

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

ul, ol, li {
    list-style: none;
}

html:focus-within {
    scroll-behavior: smooth;
}

html, body {
    scroll-behavior: smooth;
    margin: 0;
}

body {
    font-family: var(--font-family);
    text-rendering: optimizespeed;
    line-height: 1.5;
    background: #1E1E1E;
    color: #fff;
}

a:not([class]) {
    -webkit-text-decoration-skip-ink: auto;
    text-decoration-skip-ink: auto;
}

img, object, picture, video, canvas, svg {
    height: auto;
    max-width: 100%;
    object-fit: cover;
    display: block;
}

p, h1, h2, h3, h4, h5, h6 {
    overflow-wrap: break-word;
}

a {
    color: inherit;
    text-decoration: none;
}

b, strong {
    font-weight: 900;
}

section {
    display: block;
}

select {
    -webkit-appearance: none;
    appearance: none;
    text-transform: none;
    border: 0;
    outline: 0;
}

select::-ms-expand {
    display: none;
}

address {
    font-style: normal;
}

details summary::-webkit-details-marker {
    display: none;
}

button {
    font-family: inherit;
    font-size: 100%;
    line-height: inherit;
    text-transform: none;
    cursor: pointer;
    border-color: #0000;
    margin: 0;
}

button:disabled {
    cursor: default;
}

button, [type="button"], [type="reset"], [type="submit"] {
    -webkit-appearance: button;
}

::-moz-focus-inner {
    border-style: none;
    padding: 0;
}

:-moz-focusring {
    outline: 1px dotted ButtonText;
}

:-moz-ui-invalid {
    box-shadow: none;
}

::-webkit-inner-spin-button, ::-webkit-outer-spin-button {
    height: auto;
}

input {
    -webkit-appearance: none;
    appearance: none;
    background-color: #0000;
    border: none;
    border-radius: 0;
}

input::-webkit-search-decoration, input::-webkit-search-cancel-button, input::-webkit-search-results-button, input::-webkit-search-results-decoration {
    display: none;
}

input[type="search"]::-ms-clear {
    width: 0;
    height: 0;
    display: none;
}

input[type="search"]::-ms-reveal {
    width: 0;
    height: 0;
    display: none;
}

input[type="search"]::-webkit-search-decoration, input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-results-button, input[type="search"]::-webkit-search-results-decoration {
    display: none;
}

input::-webkit-outer-spin-button, input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

input[type="number"] {
    -moz-appearance: textfield;
}

table {
    border-color: inherit;
    text-indent: 0;
}

[type="search"] {
    -webkit-appearance: textfield;
    outline-offset: -2px;
}

::-webkit-search-decoration {
    -webkit-appearance: none;
}

::-webkit-file-upload-button {
    -webkit-appearance: button;
    font: inherit;
}

summary {
    display: list-item;
}

details > summary {
    list-style: none;
}

.container {
    padding: 0 var(--container-offset);
    width: 100%;
    max-width: var(--container-width);
    margin: 0 auto;
}

.header {
    display: block;
    padding-top: 31px;
    padding-bottom: 71px;
    position: relative;

}

.header-bg {
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    z-index: -1;
    background: url("../img/header-bg.png") no-repeat center;
}

.header-title {
    font-weight: 500;
    font-size: 50px;
    line-height: 130%;
    text-align: center;
    max-width: 950px;
    margin: 189px auto 0;
}

.header-btn {
    display: block;
    margin: 114px auto
}

.navbar {
    display: grid;
    grid-template-columns: max-content 1fr;
}

.logo {
    display: grid;
    grid-template-columns: max-content 1fr;
    grid-gap: 10px;
    font-weight: 500;
    font-size: 20px;
    line-height: 130%;
    align-items: center;
}

.links {
    display: grid;
    grid-template-columns: repeat(4, max-content);
    justify-content: end;
    align-items: center;
    grid-gap: 48px;
    font-weight: 500;
    font-size: 18px;
    line-height: 130%;
}

.links a {
    text-decoration: none;
}

section {
    margin: 100px auto;
}

section h2 {
    display: block;
    font-weight: 500;
    font-size: 44px;
    line-height: 130%;

}

.financial-planning h2 {
    text-align: center;
}

.cards {
    display: grid;
    grid-template-columns: repeat(2, max-content);
    justify-content: center;
    grid-gap: 1rem;
    margin-top: 40px;
}

.card {
    display: block;
    align-items: center;
    width: 100%;
    height: 100%;
    margin: auto;
    max-width: 580px;
    position: relative;
    padding: 40px;
    box-sizing: border-box;
    background: #1E1E1E;
    background-clip: padding-box;
    border: solid 2px transparent;
    border-radius: 1em;
}

.card:before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: -1;
    margin: -2px;
    border-radius: inherit;
    background: linear-gradient(266.63deg, rgba(255, 255, 255, 0.1) -6.77%, rgba(212, 159, 255, 0.1) 11.11%, rgba(170, 64, 255, 0.1) 29%, rgba(138, 75, 255, 0.1) 60%, rgba(106, 86, 255, 0.1) 89.81%, rgba(86, 96, 234, 0.1) 101.74%, rgba(66, 107, 212, 0.1) 112.47%);
}

.card h3 {
    font-weight: 600;
    font-size: 26px;
    line-height: 31px;
    margin-top: 40px;
}

.card p {
    font-weight: 400;
    font-size: 18px;
    line-height: 28px;
    color: #9D9D9D;
    margin-top: 16px;
}

.card img {
    max-height: 230px;
    margin: 0 auto;
}

.search-loan {
    display: grid;
    grid-template-columns: max-content 1fr;
    grid-gap: 124px;
    margin: 200px auto;
}

.search-loan__content {
    text-align: left;
}

.search-loan__content h2, .planning-revenues h2, .saving h2 {
    margin-bottom: 32px;
}

.search-loan__content p, .planning-revenues__content p, .saving__content p {
    font-weight: 400;
    font-size: 18px;
    line-height: 28px;
    color: #9D9D9D;
}

.search-loan__image {
    max-height: 440px;
    max-width: 440px;
    width: 100%;
}

.planning-revenues {
    display: grid;
    grid-template-columns: 1fr max-content;
    grid-gap: 94px;
    margin: 200px auto;
}

.planning-revenues__image {
    max-height: 340px;
}

.saving {
    display: grid;
    grid-template-columns: max-content 1fr;
    grid-gap: 100px;
    margin: 200px auto 140px;
}

.saving__image {
    max-height: 347px;
}

.saving__content {
    align-self: center;
}

.footer {
    text-align: center;
    padding: 40px 0;
    font-weight: 500;
    font-size: 16px;
    line-height: 26px;
}

.footer-links {
    display: grid;
    grid-template-columns: repeat(6, max-content);
    grid-gap: 40px;
    justify-content: center;
    margin-top: 20px;
}

@media(max-width: 1180px) {
    .header.container{
        padding: 31px 0 20px;
    }
    :root {
        --container-offset: 24px;
    }
    .navbar {
        grid-template-columns: auto;
    }
    .logo {
        margin: 0 auto;
    }
    .header-title {
        font-size: 28px;
        margin: 56px auto 0;
        max-width: 32rem;
    }
    .header-btn {
        margin: 43px auto;
    }
    .header-bg {
        background-size: cover;
    }
    section h2 {
        font-size: 24px;
    }
    section {
        margin: 100px auto;
    }
    .financial-planning {
        margin-top: 20px;
    }
    .links {
        display: none;
    }

    .cards {
        grid-template-columns: auto;
    }

    .card {
        padding: 24px;
    }

    .card h3 {
        font-size: 20px;
    }

    .card p, .search-loan__content p, .planning-revenues__content p, .saving__content p {
        font-size: 16px;
    }

    .search-loan, .planning-revenues, .saving {
        grid-template-columns: auto;
        grid-gap: 30px;
        margin: 128px auto;
        justify-items: center;
    }

    .planning-revenues__content {
        order: 2;
        display: block;
    }

    .footer-links {
        grid-template-columns: auto;
        grid-gap: 16px;
    }

    .footer {
        padding: 64px 0 40px;
    }

    .saving {
        grid-template-columns: auto;
        margin: 128px auto 0;
    }
}