.ipo {
    --clr-gold-50: hsl(40.3 66.2% 59.4%);
    --clr-gold-90: hsl(40.3 66.2% 75.0%);
    --clr-gold-90-transparent: hsl(40.3 66.2% 75.0% / 25%);
    --clr-gray: hsl(220 0% 80%);
    --clr-dark-blue-50: hsl(214.3 60.9% 9%);
    --clr-dark-blue-90: hsl(214.3 60.9% 20%);
    --clr-white: hsl(0 100% 100%);

    line-height: 1.50;
    background-color: var(--clr-dark-blue-50);
    color: var(--clr-gray);
}

.ipo h2,
.ipo h3,
.ipo h4,
.ipo h5 {
    margin-bottom: 0.50em;
    color: var(--clr-gold-50);
}

.ipo h1 {
    font-size: 1.50em;
    color: var(--clr-gold-50);
}

.ipo h1 img {
    display: inline-block;
    width: 5.00em;
    height: auto;
}

.ipo h2 {
    font-size: 3.00em;
}

.ipo h3 {
    font-size: 2.50em;
}

.ipo h4 {
    font-size: 2.00em;
}

.ipo h5 {
    font-size: 1.50em;
}

.ipo section {
    padding-block: 2.50em;
}

.ipo p:last-child {
    margin-bottom: 0.00em;
}

.ipo__header {
    position: sticky;
    top: 0;
    padding-inline: 4.00rem;
    background-color: var(--clr-dark-blue-50);
    z-index: 10;
}

.ipo__header__inner {
    display: grid;
    grid-template-columns: 0.25fr 1fr 0.25fr;
    justify-content: space-between;
    align-items: center;
    padding-block: 0.50em;
    border-bottom: 1px solid var(--clr-dark-blue-90);
}

.navigation ul {
    display: flex;
    gap: 3.00em;
    justify-content: center;
    padding-inline: 0.00em;
    list-style-type: none;
    font-size: 1.25em;
}

.navigation a {
    color: var(--clr-gray);
}

@media (max-width: 60em) {
    .ipo__header__inner {
        display: flex;
        flex-direction: column;
        align-items: center;
    }
}

.disclaimer {
    margin-inline: 4.00rem;
}

.ipo__footer {
    grid-area: "footer";
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 1.00em;
    padding-bottom: 6.00em;
    padding-inline: 4.00rem;
}

.ipo__footer h1 {
    font-size: 1.25em;
}

@media (max-width: 60em) {
    .ipo__footer {
        flex-direction: column;
    }

    .ipo__footer > h1,
    .ipo__footer > p {
        text-align: center;
    }
}

.hero {
    position: relative;
    background-image: url('/wp-content/themes/mercurius/assets/images/hero-background.webp');
    background-position: center;
    background-size: cover;
}

.hero__title {
    margin-bottom: 0.50em;
    font-size: 6.00em;
    text-align: center;
    color: var(--clr-gold-50);
    line-height: 1.50;
}

.hero__content {
    max-width: 95ch;
    margin-inline: auto;
}

.hero__description {
    font-size: 1.50rem;
}

.hero__content img {
    display: inline-block;
    width: auto;
    max-height: 16.00rem;
}

.hero__banner {
    position: relative;
    margin-top: 2.00em;
}

.hero__banner img {
    display: block;
    width: 100%;
    height: 250px;
    object-fit: cover;
    object-position: center center;
}

.hero__banner .description {
    position: absolute;
    top: 1.00em;
    left: 2.00em;
}

.statistics {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.00em;
    padding-inline: 8.00rem;
    font-size: 1.50em;
}

.statistics__column {
    text-align: center;
}

.statistics strong {
    display: block;
    font-size: 2.00em;
    color: var(--clr-gold-50);
}

@media (max-width: 60em) {
    .statistics {
        grid-template-columns: repeat(1, 1fr);
    }
}

.profiles {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.00em;
    padding-inline: 4.00rem;
}

.profiles__title {
    grid-column: span 2;
    text-align: center;
}

.profiles__profile h3 {
    font-size: 1.50em;
}

.profiles__profile:nth-child(2) {
    grid-column: span 2;
}

.profiles__profile .description {
    font-size: 1.25em;
}

.profiles__profile .info {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.00em;
    padding-top: 1.00em;
    border-top: 2px solid var(--clr-dark-blue-50);
}

.profiles__profile .info p {
    margin: 0;
}

@media (max-width: 60em) {
    .profiles {
        grid-template-columns: 1fr;
    }

    .profiles__title,
    .profiles__profile:nth-child(2) {
        grid-column: auto;
    }
}

.info {
    padding-inline: 16.00rem;
}

.info__title {
    text-align: center;
}

.info__cards {
    display: flex;
    flex-direction: column;
    gap: 1.00rem;
    margin-top: 2.00rem;
}

.development {
    padding-inline: 16.00rem;
}

@media (max-width: 60rem) {
    .development {
        padding-inline: 4.00rem;
    }
}

.why-invest {
    padding-inline: 4.00rem;
}

.why-invest .reasons {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.00em
}

.why-invest .reasons__item__header {
    display: flex;
    gap: 0.50em;
    align-items: center;
}

.why-invest .reasons__item__header h3 {
    font-size: 1.50em;
    color: var(--clr-white);
}

.why-invest .reasons__item__icon {
    padding-inline: 0.25em;
    padding-block: 0.25em;
    margin-bottom: 0.50em;
    border-radius: 0.25em;
    background-color: var(--clr-gold-50);
    color: var(--clr-dark-blue-50);
    font-size: 1.25em;
}

.why-invest .reasons__item p {
    font-size: 1.15em;
}

@media (max-width: 60em) {
    .why-invest .reasons {
        grid-template-columns: 1fr;
    }

    .why-invest .reasons__item {
        text-align: center;
    }
}

.how_invest {
    padding-inline: 4.00rem;
}

.how-invest__item {
    display: grid;
    grid-template-columns: min-content 1fr;
    align-items: center;
    margin-bottom: 1.00em;
    margin-inline: auto;
    max-width: 80ch;
}

.how-invest__item__number {
    padding-right: 0.50em;
    color: var(--clr-gold-50);
    font-size: 3.00em;
}

.how-invest__item__content h3 {
    color: var(--clr-white);
    font-size: 1.50em;
}

.how-invest__item__content p {
    font-size: 1.15em;
}

.contact-form {
    margin-inline: 4.00rem;
}

.contact-form .cf-turnstile {
    text-align: center;
}

.contact-form .uacf7-form-wrapper-container {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2.00em;
    padding-inline: 4.00em;
}

.contact-form .wpcf7-form input.wpcf7-form-control {
    padding-block: 1.00rem;
    padding-inline: 1.50rem;
    border: 1px solid var(--clr-dark-blue-90);
    border-radius: 0.50em;
    background-color: var(--clr-dark-blue-50);
    color: var(--clr-gray);
}

.contact-form .wpcf7-form input.wpcf7-form-control::placeholder {
    color: var(--clr-gray) !important;
}

.contact-form .wpcf7-form input.wpcf7-form-control:focus-visible {
    outline: 1px solid var(--clr-gold-90);
    background-color: var(--clr-dark-blue-50) !important;
    color: var(--clr-gray);
}

.contact-form__button {
    grid-column: span 2;
}

.contact-form__button .button {
    display: block;
    width: 100%;
    padding-block: 0.75em;
    font-size: 1.25em;
}

@media (max-width: 60em) {
    .contact-form .uacf7-form-wrapper-container {
        grid-template-columns: 1fr;
        gap: 0.50em;
    }

    .contact-form .uacf7-form-wrapper-container {
        padding-inline: 0.00em;
    }

    .contact-form__button {
        grid-column: auto;
    }
}

.additional-content {
    display: flex;
    justify-content: center;
    padding-inline: 4.00rem;
}

.social-links ul {
    display: flex;
    justify-content: center;
    list-style-type: none;
    gap: 3.00em;
    margin: 0;
    padding: 0;
    font-size: 3.00em;
}

@media (max-width: 60em) {
    .social-links ul {
        gap: 1.00em;
    }
}

button,
.button {
    width: fit-content;
    padding-inline: 2.00em;
    padding-block: 0.50em;
    border: 1px solid var(--clr-gold-50);
    border-radius: 0.25em;
    background-color: var(--clr-gold-50);
    color: var(--clr-dark-blue-50);
    text-align: center;
    cursor: pointer;
}

button:hover,
.button:hover {
    opacity: 0.75;
    color: var(--clr-dark-blue-50);
}

.button--cta {
    padding-inline: 1.25em;
    padding-block: 0.25em;
    font-size: 1.50em;
}

.banner-badge {
    width: fit-content;
    padding-inline: 1.00em;
    padding-block: 0.50em;
    margin-inline: auto;
    border: 1px solid var(--clr-dark-blue-90);
    border-radius: 100.00em;
    background-color: var(--clr-dark-blue-90);
}

.simple-card {
    padding-inline: 2.00em;
    padding-block: 2.00em;
    border: 1px solid var(--clr-dark-blue-90);
    border-radius: 1.00em;
    background-color: var(--clr-dark-blue-90);
}

.ipo--alt {
    .hero {
        background-image: none;
    }

    .hero__title {
        max-width: 32ch;
        margin-inline: auto;
        line-height: 1.25;
    }

    .hero p {
        margin-bottom: 1.00rem;
    }

    .statistics {
        padding-top: 1.00rem;
        padding-bottom: 2.50rem;

        .statistics__title {
            grid-column: 1 / -1;
            text-align: center;
            font-size: 3.00rem;
        }

        .statistics__description {
            grid-column: 1 / -1;
        }

        .statistics__column {
            display: flex;
            flex-direction: column;
            justify-content: center;
        }

        .statistics__column:nth-child(5) {
            grid-column: 2 / 4;
        }

        .statistics__column > p:nth-child(1) {
            color: var(--clr-gold-50);
            font-size: 1.15rem;
            font-weight: bold;
        }

        .statistics__column > p:nth-child(2) {
            color: var(--clr-white);
            font-size: 1.85rem;
            font-weight: bold;
        }

        .statistics__column > div:nth-of-type(1) {
            padding-top: 1.00rem;
            border-top: 2px solid var(--clr-gold-50);
            color: var(--clr-gray);
            font-size: 1.00rem;
        }
    }

    @media (max-width: 80em) {
        .statistics {
            grid-template-columns: repeat(2, 1fr);

            .statistics__column:nth-child(5) {
                grid-column: auto;
            }
        }
    }

    @media (max-width: 60em) {
        .statistics {
            grid-template-columns: 1fr;
        }
    }

    .profiles {
        padding-inline: 8.00rem;

        .profiles__description {
            grid-column: 1 / -1;

        }

        .profiles__profile:nth-of-type(1) {
            grid-column: 1 / -1;
        }

        .profiles__profile .description > p {
            margin-bottom: 1.00rem;
        }
    }

    .development {
        display: grid;
        grid-template-columns: 1fr 0.50fr;
        align-items: start;
        gap: 1.00rem;

        .development__title {
            grid-column: 1 / -1;
        }

        .development__cards {
            display: flex;
            flex-direction: column;
            gap: 1.00rem;
            text-align: center;

            h3 {
                font-size: 1.50rem;
            }

            .development__card {
                display: flex;
                flex-direction: column;
                gap: 1.50rem;

                div:nth-of-type(1) {
                    color: var(--clr-white);
                    font-size: 1.75rem;
                    font-weight: bold;
                }
            }
        }
    }

    @media (max-width: 80em) {
        .development {
            grid-template-columns: 1fr;
        }
    }

    .why-invest {
        padding-inline: 8.00rem;

        .why-invest__description {
            margin-bottom: 2.00rem;
            font-size: 1.25rem;
        }

        .reasons__item__header {
            h3 {
                color: var(--clr-gold-50);
                font-size: 1.50em;
            }
        }
    }

    .questions {
        padding-inline: 8.00rem;

        .questions__description {
            margin-bottom: 2.00rem;
            font-size: 1.25rem;
        }

        .reasons {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 1.00em;

            h3 {
                color: var(--clr-gold-50);
                font-size: 1.50em;
            }
        }
    }

    @media (max-width: 60em) {
        .questions {
            .reasons {
                grid-template-columns: 1fr;
            }
        }
    }

    .how-invest {
        .how-invest__description {
            margin-bottom: 2.00rem;
            font-size: 1.25rem;
        }
    }

    .contact-form {
        margin-inline: 8.00rem;

        .contact-form__description {
            margin-bottom: 2.00rem;
            font-size: 1.25rem;
        }
    }

    .additional-content {
        video {
            max-height: 100vh;
        }
    }

    .disclaimer {
        font-size: 0.75rem;

        h4 {
            font-size: 1.25rem;
        }

        p {
            margin-bottom: 1.00rem;
        }
    }

    .source-links {
        margin-inline: 8.00rem;
        font-size: 0.85rem;

        h2 {
            font-size: 1.75rem;
            text-align: center;
        }

        li:target {
            background-color: var(--clr-gold-90-transparent);
        }
    }

    .source-link {
        font-size: 1.00rem;

        a {
            color: var(--clr-gold-90);
        }
    }
}

@media (max-width: 60em) {
    .ipo--alt {
        .statistics,
        .profiles,
        .info,
        .development,
        .why-invest,
        .questions {
            padding-inline: 2.00rem;
        }

        .contact-form {
            margin-inline: 2.00rem;
        }
    }
}

html,
body {
    min-height: 100%;
}

.ipo-thanks {
    display: grid;
    grid-template-rows: 1fr min-content;
    grid-template-areas: "main" "footer";
}

.ipo-thanks__main {
    grid-area: main;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 1.00em;
    max-width: 90ch;
    margin-inline: auto;
}

[data-align="center"] {
    text-align: center;
}

[data-align="right"] {
    text-align: right;
}

[data-color="white"] {
    color: var(--clr-white);
}

[data-color="gray"] {
    color: var(--clr-gray);
}

[data-color="gold"] {
    color: var(--clr-gold-50);
}

[data-size="small"] {
    font-size: 0.65em;
}

[data-size="big"] {
    font-size: 1.25em;
}