:root {
    --dark-green: #00ad6a;
    --bright-green: #1fe374;
    --gray: #d6dae5;
    --light-gray: #eafaf1;
    --blackish: #080c16;
    --whitish: #fcfcfc;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: Arial, sans-serif;
}

main {
    background-color: #eafaf1;
    height: 82em;
}

main header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 30px 8em;
}

header nav ul {
    display: flex;
    list-style-type: none;
}

header ul li {
    padding-inline: 30px;
}

header ul li a {
    text-decoration: none;
    color: var(--dark-green);
    font-weight: bold;
}

header ul li a:hover {
    color: #000;
}

header ul>li:nth-child(3) a {
    color: #000;
}

header ul>li:nth-last-child(1) a {
    padding: 10px;
    border: 2px #00ad6a solid;
}

header ul>li:nth-last-child(1) a:hover {
    color: #00ad6a;
    box-shadow: -5px 5px #00ad6a;
}

/* SECTION QUOTE */
.quote {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-bottom: 4em;
}

.quote>* {
    margin: 10px 0;
}

.quote h2 {
    font-size: 3rem;
    text-align: center;
    width: 9em;
}

.quote p {
    width: 34em;
    line-height: 2em;
    text-align: center;
}

/* Article Cards */
article .cards-container {
    display: flex;
    justify-content: center;
    height: fit-content;
}

.cards-container .card {
    /* outline: #35ca17 solid 2px; */
    width: 25.4em;
}

/* card 1 */
.card-one {
    display: flex;
    justify-content: center;
    align-items: center;
}

.card-one .container {
    display: flex;
    flex-direction: column;
    width: 17em;
}

.container>* {
    padding: 10px 0;
}

.card-one .container ul li {
    padding: 5px 0;
    margin-left: 15px;
}

/* card 2 */
.card-two .banner {
    background-color: #00ad6a;
    text-align: center;
    color: #fff;
    font-size: 14px;
    padding: 5.5px;
    margin-bottom: 1em;
}

.card-two {
    border: #00ad6a 2px solid;
    height: 38.5em;
    border-radius: 8px 8px 0 0;
    background-color: var(--whitish);
}

.card-two .perk-title {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 1em;
}

.perk-title>* {
    margin: 5px 0;
}

.perk-title h2 {
    width: 5em;
    text-align: center;
    font-size: 3em;
    color: var(--dark-green);
}

.perk-title p {
    color: gray;
    font-size: 20px;
}

.card-two .content {
    display: flex;
    flex-direction: column;
}

.perk-title a {
    text-decoration: none;
    color: var(--blackish);
    font-weight: bold;
    background-color: var(--bright-green);
    padding: 15px 30px;
    border-radius: 10px;
    transition: padding 0.1s;
}

.perk-title a:hover {
    padding: 20px 35px;
    border-radius: 50px;
}

.perk-wrapper {
    display: flex;
    flex-direction: column;
    padding: 0 20px;
    align-items: center;
    /* outline: red solid 2px; */
}

.perk-wrapper #benefit {
    font-size: 12px;
    margin-bottom: 5px;
}

.perks {
    width: 20em;
}

.perk-wrapper .perks ul {
    list-style-type: none;
    width: 18em;
}

.perk-wrapper .perks ul li {
    padding: 10px 0;
    margin-left: -30px;
    text-align: justify;
    display: flex;
    gap: 10px;
}

.perks ul li p {
    opacity: .7;
}

.fa-check {
    color: var(--bright-green);
}

/* card 3 */
.card-three {
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 32em;
    /* outline: red solid 2px; */
    border: 1px solid #bababe;
    background-color: #fff;
    margin-top: 5em;
}

.card-three .desc {
    background-color: var(--gray);
    border: 1px solid #bababe;
    padding: 20px;
}

.desc p {
    font-size: 15px;
    text-align: center;
}

.card-three .wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 2em 0;
}

.wrapper h3 {
    font-size: 2em;
    font-weight: lighter;
    color: var(--dark-green);
}

.wrapper> :nth-child(2) {
    color: gray;
    font-size: 20px;
}

.wrapper a {
    text-decoration: none;
    color: var(--blackish);
    font-weight: bold;
    background-color: var(--bright-green);
    padding: 15px 30px;
    border-radius: 10px;
    transition: padding 0.1s;
    margin-top: 10px;
}

.wrapper .perk-list {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 22.7em;
    margin-top: 2em;
}

.perk-list p {
    font-size: 12px;
    margin-bottom: 10px;
}

.perk-list ul {
    list-style-type: none;
}

.perk-list ul li {
    padding: 10px 0;
    /* margin-left: -30px; */
    text-align: justify;
    display: flex;
    gap: 10px;
}

/* testimo */
article {
    display: flex;
    flex-direction: column;
    align-items: center;
}

article .testimo {
    margin-top: 5em;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.testimo q {
    font-size: 1.5rem;
    width: 34em;
    text-align: center;
}

.testimo p {
    color: #1fe374;
    padding-top: 10px;
    font-weight: bold;
}

/* ASIDE FAQ */
.faq-container {
    display: flex;
    flex-direction: column;
    padding: 5em;
    gap: 1.5em;
}

.faq-container h1 {
    font-size: 3rem;
}

.questions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2em;
}

.questions .quest>* {
    padding: 5px 0;
}

.quest>* {
    font-size: 1.3em;
}

.quest p {
    opacity: 0.7;
}

/* footer */
footer {
    background-color: var(--blackish);
}

footer #legal {
    color: #bababe;
    font-size: 12px;
    width: 52em;
    padding: 1em 5em;
}

.footer-wrapper {
    display: flex;
    justify-content: space-between;
    padding: 5em;
    background-color: var(--blackish);
}

.footer-wrapper .brand {
    display: flex;
    flex-direction: column;
    gap: 2em;
}

.brand img {
    max-width: 10em;
}

.brand a {
    padding: 20px;
    background-color: #00ad6a;
    color: #000;
    text-decoration: none;
    font-weight: bold;
}

.brand a:hover {
    box-shadow: -5px 5px gray;
}

.footer-links {
    width: 40em;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
}

.footer-links ul {
    list-style-type: none;
}

.footer-links ul li {
    padding: 15px 0;
}

.footer-links ul a {
    text-decoration: none;
    color: var(--bright-green);
    font-weight: bold;
}

.footer-links ul li:nth-child(1) {
    color: var(--whitish);
    font-weight: bold;
}

/* MEDIA QUERIES */

@media (max-width: 768px) {

    /* header */
    main {
        background-color: #eafaf1;
        height: fit-content;
        padding: 20px 0;
        /* outline: #1222b3 solid 2px; */
    }

    main header {
        display: flex;
        padding: 0;
        flex-direction: column;
        align-items: center;
        gap: 1em;
    }

    header nav ul {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 1.5em;
    }

    /* section quote */
    .quote {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        margin-bottom: 4em;
        margin-top: 3em;
    }

    .quote h2 {
        font-size: 2rem;
        text-align: center;
        width: 9em;
    }

    .quote p {
        width: 20em;
        line-height: 2em;
        text-align: center;
    }

    /* Cards container */
    article .cards-container {
        display: flex;
        flex-direction: column;
        justify-content: center;
        height: fit-content;
        gap: 2em;
    }

    .cards-container .card {
        /* outline: #35ca17 solid 2px; */
        width: 18em;
        height: fit-content;
    }

    /* card 2 */
    .perks{
        width: fit-content;
    }
    .perk-wrapper .perks ul {
        width: 17em;
        padding: 0 20px;
        flex-direction: column;
        /* card sizing */
    }

    .perk-wrapper .perks ul li {
        margin: 0;
    }

    /* card three */
    .card-three {
        margin: 0;
    }

    .card-one h3 {
        text-align: center;
    }

    .wrapper h3 {
        font-size: 1.5em;
    }

    .wrapper .perk-list {
        width: 17em;
        padding: 0 20px;
    }

    /* testimo */
    article .testimo {
        width: 18em;
        margin-top: 2em;
        /* outline: red solid 2px; */
    }

    .testimo q {
        font-size: 1.5rem;
        width: 12em;
    }

    /* FAQ */
    .faq-container {
        display: flex;
        flex-direction: column;
        padding: 5em;
        gap: 1.5em;
        align-items: center;
    }

    .questions {
        display: grid;
        grid-template-columns: 1fr;
        gap: 2em;
    }

    /* footer */
    .footer-wrapper {
        flex-direction: column;
    }

    .footer-links {
        grid-template-columns: 1fr;
        width: fit-content;
    }

    .brand a {
        width: 10em;
        padding: 8px;
        text-align: center;
    }
}