/*------------ RESET ------------*/
*, *::before, *::after {
    box-sizing: border-box;
}

* {
    margin: 0;
}

body {
    -webkit-font-smoothing: antialiased;
}

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

input, button, textarea, select {
    font: inherit;
}

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

/*------------ FONTS ------------*/
@font-face {
    font-family: "Open Sans";
    src: url("assets/fonts/OpenSans-Regular.ttf");
    font-weight: 400;
}

@font-face {
    font-family: "Open Sans";
    src: url("assets/fonts/OpenSans-SemiBold.ttf");
    font-weight: 600;
}

@font-face {
    font-family: "Open Sans";
    src: url("assets/fonts/OpenSans-Bold.ttf");
    font-weight: 700;
}

/*------------ NORMAL STYLING ------------*/
body {
    background: #EEEEEE;
    padding: 1rem;
    display: flex;
    justify-content: center;
    align-self: center;
    color: #383838;
    font-weight: 400;
    font-family: "Open Sans", sans-serif;
    font-size: 1rem;
    line-height: 1.375;
    min-height: 100dvh;
}

:is(h1, h2, h3, h4, h5, h6) {
    font-weight: 700;
}

h1 {
    font-weight: 400;
    font-size: clamp(1.125em, 2vw, 1.375em);
    margin-bottom: 1.45em;
}

h2 {
    font-size: 1em;
    margin-bottom: 0;
}

strong {
    font-weight: 700;
}

a {
    color: #0098A7;
    font-weight: 400;
    transition: .3s ease;

    &:is(:hover, :focus, :active) {
        color: #383838;
    }
}

.card {
    max-width: 766px;
    background: #FFFFFF;
    height: auto;
    padding: clamp(3em, 7vw, 6.75em) clamp(1em, 7vw, 6em) clamp(3em, 6vw, 5.81em);
    align-self: center;
}

.card__logo-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 3.375em;

    &::before {
        content: "";
        mask-image: url("assets/img/arrow-right.svg");
        mask-repeat: no-repeat;
        mask-size: contain;
        mask-position: center;
        background: #D9D9D9;
        width: 4.25em;
        height: 2.375em;
        order: 2;
    }

    @media (max-width: 500px) {
        flex-direction: column;
        margin-bottom: 2.5em;

        &::before {
            rotate: 90deg;
            height: 4.25em;
            width: 2.375em;
        }
    }

    img {
        height: clamp(2.5em, 8vw, 3.9375em);
        order: 3;

        &:first-child {
            order: 1;
        }
    }
}

.card__contact a {
    font-weight: 600;
}