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

html, body {
    scroll-behavior: smooth;
    font-family: "Ubuntu", sans-serif;
}

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

header {
    padding: 16px 200px 0;

    display: flex;
    flex-direction: column;
    gap: 16px;
}

.header-logo {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.header-logo img {
    height: 40px;
}

.header-button {
    display: flex;
    justify-content: flex-end;
}

.header-button a {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
padding: 4px 16px;
gap: 10px;

background: #99FF74;
border-radius: 16px;

font-weight: 700;
font-size: 14px;
line-height: 16px;
text-transform: uppercase;

color: #150A00;
}


footer {
    padding: 40px 200px;
    background: #020A41;

    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 36px;
}

.copyright {
font-weight: 300;
font-size: 14px;
line-height: 16px;
text-align: center;

color: #ABA8A8;
}

.bold-footer-text {
font-weight: 700;
font-size: 16px;
line-height: 18px;

color: #FFFFFF;
}

.footer-text, .footer-list {
font-weight: 300;
font-size: 14px;
line-height: 16px;

color: #FFFFFF;
}

.text-container, .text-column {
    display: flex;
    flex-direction: column;
    gap: 16px;
}


.footer-list {
    display: flex;
    flex-direction: column;
    gap: 8px;

    list-style: none;
}

.footer-columns {
    display: flex;
    gap: 20px;

}

.text-column-small {
    width: 25%;
}

.text-column-big {
    width: 50%;
}


@media (max-width: 900px) {
    

    header {
    padding: 16px 16px 0;
}



footer {
    padding: 40px 16px;
}

.footer-columns {
    flex-direction: column;
}

.text-column-big {
    width: 100%;
}

.text-column-small {
    width: 245px;
}




}


main {
    padding: 36px 16px 60px;

    display: flex;
    justify-content: center;
}

.main-container {
    max-width: 1040px;

     display: flex;
    align-items: center;
    flex-direction: column;
    gap: 60px;
}

.main-top-part {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.headline-1 {
font-weight: 700;
font-size: 40px;
line-height: 46px;

color: #01033E;
}

.main-top-part img {
    width: 100%;
}

.main-top-part p {
font-weight: 400;
font-size: 24px;
line-height: 28px;

color: #231F1F;
}

.main-cards {
    display: flex;
    flex-direction: column;
    gap: 40px;
}

.card {
    padding: 24px;

    border: 1px solid #0078F080;
    border-radius: 4px;
}

.card-title-container {
    display: flex;
    align-items: center;
    gap: 16px;
}

.card-number {
font-weight: 900;
font-size: 48px;
line-height: 65px;

color: rgba(0, 120, 240, 0.25);
}

.card-title {
font-weight: 700;
font-size: 28px;
line-height: 32px;

color: #020A41;
}

.card img {
    width: 100%;
    margin: 24px 0 16px;
}

.card-text-container {
    display: flex;
    flex-direction: column;
    gap: 40px;
}

.card-text-container p {
font-weight: 400;
font-size: 20px;
line-height: 23px;

color: #332F2F;
}

.card-text-container a {
font-weight: 500;
font-size: 16px;
line-height: 18px;
text-decoration-line: underline;
text-transform: uppercase;

color: #0078F0;
}

@media (max-width: 900px) {

.main-container {
    gap: 24px;
}

.headline-1 {
font-size: 32px;
line-height: 37px;
}

.main-top-part p {

font-size: 20px;
line-height: 23px;
}

.main-cards {
    gap: 16px;
}

.card-title {
font-size: 24px;
line-height: 130%;
}


.card-text-container {
    display: flex;
    flex-direction: column;
    gap: 40px;
}

.card-text-container p {
font-size: 18px;
line-height: 21px;
}

}