@import url('https://fonts.googleapis.com/css2?family=Fira+Sans+Extra+Condensed:wght@300;400;500;700&family=Inter:wght@400;500;700&family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Fira+Sans+Extra+Condensed:wght@300;400;500;700&family=Inter:wght@100;200;300;400;500;600;700;800;900&family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

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

:root {
    /* colors */
    --verde-plent: #559139;
    --preto-plent: #1E1E1E;
    --branco-plent: #FFFFFF;

    /* text */
    --text-font-size: 13px;
    --text-family: "Montserrat", sans-serif, roboto;

    /* button */
    --button-border-radius: 42px;

    /* text input */
    --input-text-border-radius: 16px;
    --input-text-inner-padding: 18px; 
    --input-text-border: 1px solid var(--preto-plent);
    --input-text-font-family: "Inter", var(--text-family);
}

body {
    color: var(--preto-plent);
    font-size: var(--text-font-size);
    font-family: var(--text-family);
}

a {
    font-size: var(--text-font-size);
    color: var(--preto-plent);
    text-decoration: none;
}

p {
    font-size: var(--text-font-size);
}

h1 {
    font-size: 48px;
}

img {
    height: 100%;
    object-fit: contain;
}

input[type=text],
input[type=tel] {
    outline: none;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0.7px;
    color: var(--verde-plent);
    border: var(--input-text-border);
    padding: var(--input-text-inner-padding);
    font-family: var(--input-text-font-family);
    border-radius: var(--input-text-border-radius);
}
input[type=text]::placeholder,
input[type=tel]::placeholder {
    color: var(--verde-plent);
}

button,
input[type=submit],
a.button {
    border: none;
    cursor: pointer;
    font-size: var(--text-font-size);
    font-weight: 700;
    padding: 1rem 2rem;
    letter-spacing: 1.04px;
    text-transform: uppercase;
    font-family: var(--input-text-font-family);
    border-radius: var(--button-border-radius);
}
.plent-btn-1 {
    color: var(--branco-plent);
    transition: .1s background-color ease-in, .1s color ease-in;
    background-color: var(--preto-plent);
}
.plent-btn-1:hover {
    color: var(--branco-plent);
    background-color: var(--verde-plent);
}
.plent-btn-2 {
    color: var(--branco-plent);
    transition: .1s background-color ease-in, .1s color ease-in;
    background-color: var(--verde-plent);
}
.plent-btn-2:hover {
    color: var(--verde-plent);
    background-color: var(--branco-plent);
}
.plent-btn-3 {
    color: var(--preto-plent);
    transition: .1s background-color ease-in, .1s color ease-in;
    background-color: var(--branco-plent);
}
.plent-btn-3:hover {
    color: var(--preto-plent);
    background-color: var(--preto-plent);
}

main,
section,
div,
form,
footer {
    display: flex;
}

.grid {
    display: grid;
}

.flex-center {
    align-items: center;
    justify-content: center;
}

main {
    flex-direction: column;
}
main > div.banner {
    gap: 5rem;
    margin: 0 auto;
    overflow: hidden;
    padding: 3rem;
    grid-template-rows: 1fr;
    grid-template-columns: 1fr 1fr;
}
main > div.banner > .text {
    padding-left: 8rem;
    flex-direction: column;
}
main > div.banner > .text > h1 {
    font-size: 48px;
    margin-top: 9.75rem;
    margin-bottom: 12rem;
}
main > div.banner > .text > div {
    gap: 1.6rem;
    font-size: 1rem;
    max-width: 40ch;
    flex-direction: column;
}
main > div.banner > :nth-child(2) {
    width: 100%;
    height: 48rem;
}
main > div.banner > :nth-child(2) > img {
    width: 100%;
    height: auto;
    object-fit: cover;
    margin-left: auto;
    margin-right: 1.75rem;
}

main > div.coming-soon {
    gap: 2rem;
    flex-wrap: wrap;
    padding: 3rem 0rem;
    min-height: 16rem;
    flex-direction: column;
    color: var(--branco-plent);
    background-color: var(--verde-plent);
}
main > div.coming-soon a {
    color: var(--branco-plent);
}
main > div.coming-soon > div {
    font-size: 14px;
    flex-direction: column;
}
main > div.coming-soon > :nth-child(3) {
    gap: 1rem;
    flex-direction: row;
}

form {
    gap: 1rem;
    padding: 6rem 24vw;
    flex-direction: column;
}
form > p {
    font-size: 16px;
}
form > input[type=text],
form > input[type=tel] {
    width: 100%;
}
form > input[type=submit] {
    width: 170px;
    margin-left: auto;
}

footer {
    gap: 4rem;
    height: 14rem;
    background-color: var(--preto-plent);
}
footer > img {
    filter: invert(1);
}

@media (max-width: 480px) {
    main > div.coming-soon > :nth-child(3) {
        flex-wrap: wrap;
        text-align: center;
        flex-direction: column;
    }
}

@media (orientation: portrait)
{
    main > div.banner {
        gap: 2rem;
        padding-left: 2rem;
        padding-right: 2rem;
        grid-template-columns: 1fr;
        grid-template-rows: auto;
    }
    main > div.banner > .text {
        width: 100%;
        padding: 0;
    }
    main > div.banner > .text + div > img {
        margin: 0;
    }
    main > div.banner > .text > h1 {
        margin-top: 8rem;
        margin-bottom: 2rem;
    }
    form {
        padding: 4rem;
    }

    main > div.coming-soon {
        text-align: center;
        padding: 3rem 2rem;
    }

    footer {
        gap: 2rem;
        padding-top: 4rem;
        padding-bottom: 4rem;
        height: auto;
        flex-wrap: wrap;
    }
}