@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&family=Inter+Tight:ital,wght@0,100..900;1,100..900&display=swap');

@font-face {
    font-family: "InterTight-Regular";
    src:
        url("https://bucket-seed.s3.us-east-2.amazonaws.com/raeduca.com.br/lp/fonts/inter_tight_regular.ttf") format("ttf");
}


@media (pointer: coarse) {
    * {
        cursor: initial !important;
    }
}

html {
    scroll-behavior: smooth;
    /* scrollbar-width: thin;
    scrollbar-color: #888 #f1f1f1; */
}

body {
    display: flex;
    justify-content: center;
    margin: 0;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    font-family: "DM Sans", sans-serif;
    line-height: 1.2;
    letter-spacing: normal;
    font-weight: 400;
    color: var(--font-color-default);
    background-color: var(--background-color-white-1);
}

::-webkit-scrollbar {
    width: 5px;
}

::-webkit-scrollbar-track {
    background: var(--background-scroll-color);
}

::-webkit-scrollbar-thumb {
    background: var(--secondary-color);
    border-radius: 8px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--primary-color-hover);
}

:root {
    --primary-color: #052e16;
    --secondary-color: #14532d;
    --primary-color-hover: #166534;
    --background-scroll-color: #f0f5e0;
    --font-color-default: #f0f5e0;
    --font-color-white: #fbfeff;
    --font-color-header: #f0f5e0;
    --font-color-question: #166534;
    --font-color-answer: #555555;
    --black-1: #000;
    --black-2: #1a1a1a;
    --black-3: #393939;
    --white-1: #fff;
    --white-2: #F9F7F2;
    --white-3: #F9F9FB;
    --gray-1: #555555;
    --blue-1: #788EB4;
    --blue-2: #243568;
    --blue-3: #fff;
    --green-1: #052e16;
    --green-2: #14532d;
    --green-3: #166534;
    --green-lime: #90b823;
    --shadow-header: 0px 24.58px 58.52px 0px #95959514;
}

* {
    box-sizing: border-box;
}

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

img {
    -webkit-user-drag: none;
    object-fit: contain;
    width: 100%;
}

.container-area {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    min-height: 1080px;
}

.container {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    max-width: 1600px;
    margin: 0px 5%;
    height: 100%;
}

.button {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    transition: all 0.3s;
    font-size: 14px;
    border-radius: 10px;
    padding-top: 11px;
    padding-right: 32px;
    padding-bottom: 11px;
    padding-left: 32px;
    width: fit-content;
    font-family: "InterTight-Regular", sans-serif;
    font-weight: 600;

    &.light {
        color: var(--green-1);
        background: var(--font-color-default);
    }

    &.dark {
        color: var(--font-color-default);
        background: var(--green-1);

        @media screen and (max-width:890px) {
            font-size: 16px;
        }
    }

    &:hover {
        opacity: 0.6;
    }
}

h1,
h2,
h3,
h4,
h5,
h6,
p {
    margin: 0px;
    line-height: 1.2;
    -webkit-font-smoothing: antialiased;
}

p {
    font-family: "InterTight-Regular", sans-serif;
    line-height: 1.55;
}

section,
header,
footer {
    display: flex;
    justify-content: center;
    width: 100%;
}


.area-1 {
    padding: 10px 0;

    .container {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        width: 80%;

        img {
            width: 130px;
            height: 24px;
        }
    }
}

.area-2 {
    background-color: var(--green-1);

    @media screen and (max-width:890px) {}

    .container {
        display: flex;
        flex-direction: row;

        @media screen and (max-width: 1090px) {
            flex-direction: column;
        }

        img {
            width: 50%;
            aspect-ratio: 628 / 495;
            object-fit: cover;
            object-position: center;

            @media screen and (max-width: 1090px) {
                width: 100%;
                max-width: 860px;
            }
        }

        .box-text {
            width: 50%;
            display: flex;
            flex-direction: column;
            gap: 25px;
            padding: 35px 50px;
            color: var(--font-color-default);

            @media screen and (max-width: 1090px) {
                width: 100%;
            }

            h1 {
                font-size: 48px;
                line-height: 1.2;
                font-weight: bold;
                max-width: 507px;

                @media screen and (max-width: 1090px) {
                    max-width: 800px;
                }

                @media screen and (max-width: 425px) {
                    font-size: 38px;
                }
            }

            p {
                line-height: 1.55;
                letter-spacing: 0;
                font-size: 20px;
                text-align: left;
                max-width: 563px;
                color: var(--white-1);
            }

            .button {
                background-color: var(--green-lime);
                color: var(--green-1);

                &:hover {
                    opacity: 0.6;
                }
            }
        }
    }
}

.area-3 {
    background-color: var(--font-color-default);
    color: var(--green-1);
    padding: 100px 0 80px;

    @media screen and (max-width: 425px) {
        padding: 60px 0 80px;
    }

    .container {
        gap: 25px;

        h2 {
            font-size: 38px;
            line-height: 1.2;
            font-weight: 700;
        }

        p {
            font-size: 20px;
            font-weight: 400;
            line-height: 1.55;
            margin-bottom: 25px;
        }

        .card_container {
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: center;
            gap: 20px;
            flex-wrap: wrap;

            .card {
                display: flex;
                flex-direction: column;
                padding: 30px 20px;
                background-color: var(--green-1);
                width: 363px;
                min-width: 363px;
                height: 220px;
                min-height: 220px;
                border-radius: 8px;
                gap: 20px;

                @media screen and (max-width: 425px) {
                    width: 90%;
                    min-width: unset;
                }

                .box_title {
                    display: flex;
                    flex-direction: row;
                    gap: 14px;
                    justify-content: flex-start;

                    svg {
                        width: 25px;
                        height: 25px;
                    }

                    h3 {
                        color: var(--font-color-default);
                        font-size: 20px;
                        font-weight: 700;
                        line-height: 1.4;
                    }
                }

                p {
                    line-height: 1.55;
                    font-size: 18px;
                    font-weight: 400;
                    color: rgb(247, 247, 249);
                }
            }
        }
    }
}

.area-4 {
    background: var(--green-2);
    padding: 100px 0;

    @media screen and (max-width: 425px) {
        padding: 80px 5px;
    }

    .container {
        @media screen and (max-width: 1090px) {
            gap: 15px;
        }

        h2 {
            font-size: 38px;
            font-weight: 700;
            line-height: 1.2;
            color: var(--font-color-default);

            @media screen and (max-width: 1090px) {
                text-align: center;
            }
        }

        p {
            color: var(--white-1);
            font-size: 20px;
            font-weight: 400;
            line-height: 1.55;

            @media screen and (max-width: 1090px) {
                text-align: center;
            }
        }
    }
}

.area-5 {
    background: var(--green-1);

    .container {
        display: flex;
        flex-direction: row;
        margin: 0;

        @media screen and (max-width: 1090px) {
            flex-direction: column-reverse;
        }

        img {
            width: 50%;
            aspect-ratio: 678 / 543;
            object-fit: cover;
            object-position: center;

            @media screen and (max-width: 1090px) {
                width: 90%;
            }
        }

        .text_container {
            display: flex;
            flex-direction: column;
            justify-content: center;
            padding: 50px 50px;
            gap: 25px;

            @media screen and (max-width: 425px) {
                padding: 50px 18px;
            }

            h2 {
                color: var(--font-color-default);
                font-size: 38px;
                font-weight: 700;
                line-height: 1.2;

                @media screen and (max-width: 1090px) {
                    text-align: center;
                }
            }

            p {
                font-size: 18px;
                font-weight: 400;
                color: var(--white-1);

                @media screen and (max-width: 1090px) {
                    text-align: center;
                }
            }

            .button {
                @media screen and (max-width: 1090px) {
                    align-self: center;
                }
            }
        }
    }
}

.area-6 {
    background-color: var(--green-3);

    .container {
        display: flex;
        flex-direction: column;
        gap: 25px;
        padding: 120px 0;

        @media screen and (max-width: 1090px) {
            padding: 80px 0;
        }

        h2 {
            color: var(--background-scroll-color);
            font-size: 38px;
            line-height: 1.2;
            font-weight: 700;
        }

        .card_container {
            display: flex;
            flex-direction: row;
            justify-content: center;
            gap: 18px;
            flex-wrap: wrap;

            .card {
                display: flex;
                flex-direction: column;
                gap: 5px;
                width: 377px;
                max-width: 377px;
                height: 321px;
                max-height: 321px;
                padding: 25px;
                background-color: var(--green-1);
                border-radius: 10px;

                @media screen and (max-width: 425px) {
                    width: 90%;
                    max-width: unset;
                    height: auto;
                    max-height: fit-content;
                }

                img {
                    width: 25px;
                    height: 25px;
                    align-self: flex-start;
                }

                .text1 {
                    font-size: 16px;
                    font-weight: 400;
                    line-height: 1.55;
                    color: var(--white-1);
                    padding: 12px 0px;
                }

                h3 {
                    font-size: 18px;
                    font-weight: 700;
                    line-height: 1.55;
                    color: var(--font-color-default);
                }

                .text2 {
                    font-size: 14px;
                    line-height: 1.55;
                    font-weight: 400;
                    color: var(--white-1);
                }
            }
        }
    }
}

.area-7 {
    padding: 30px 0 50px;
    background-color: var(--green-2);

    .container {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 45px;

        img {
            width: 120px;
            height: 20px;
        }

        h2 {
            font-size: 38px;
            color: var(--font-color-default);
            font-weight: 700;
            line-height: 1.2;
        }

        .card_container {
            display: flex;
            flex-direction: row;
            gap: 18px;
            justify-content: center;
            flex-wrap: wrap;

            .card {
                display: flex;
                flex-direction: column;
                padding: 40px;
                width: 377px;
                max-width: 377px;
                min-height: 116px;
                border-radius: 10px;
                border: 0.8px solid #fff;

                @media screen and (max-width: 425px) {
                    width: 90%;
                    min-width: unset;
                }

                h3 {
                    font-size: 38px;
                    font-weight: 700;
                    line-height: 1.2;
                    color: var(--font-color-default);
                }

                p {
                    color: var(--white-1);
                    line-height: 1.55;
                    font-size: 18px;
                    font-weight: 400;

                }
            }
        }
    }
}


.area-faq {
    background: var(--font-color-default);

    .container {
        padding: 80px 0px;

        @media screen and (max-width:890px) {
            padding: 45px 0px;
        }

        .faq-title {
            font-family: Inter;
            font-weight: 300;
            font-style: Light;
            font-size: 40px;
            line-height: 113.99999999999999%;
            letter-spacing: 0%;
            text-align: center;
            color: var(--primary-color);
        }

        .faq-title {
            font-weight: 300;
            font-size: 40px;
            line-height: 1.3;
            color: var(--primary-color);
            text-align: center;
        }

        h3 {
            font-size: 18px;
            font-weight: 400;
            text-align: center;
        }


        .faq-container {
            max-width: 895px;
            margin: 0 auto;
            display: flex;
            flex-direction: column;
            gap: 5px;
            padding-top: 60px;
            padding-bottom: 25px;
            width: 100%;

            @media screen and (max-width:950px) {
                padding-top: 35px;
            }

            .faq-item {
                border-radius: 4px;
                overflow: hidden;
                height: fit-content;

                &.active {
                    height: fit-content;

                    hr {
                        opacity: 0.4;
                        border-color: rgb(111, 150, 106);
                        transition: border-color 0.4s linear;
                    }

                    .faq-button span {
                        transition: all 0.4s linear;
                        color: rgb(111, 150, 106);
                    }
                }

                .faq-button {
                    width: 100%;
                    padding: 8px 10px;
                    min-height: 36px;
                    display: flex;
                    justify-content: space-between;
                    background-color: var(--white-3);
                    align-items: center;
                    border: none;
                    cursor: pointer;
                    text-align: left;
                    gap: 15px;
                    outline: none;
                    box-shadow: none;
                    position: relative;
                    z-index: 10;

                    span {
                        font-weight: 500 !important;
                        color: var(--font-color-question) !important;
                        font-size: 14px !important;
                        line-height: 1.2 !important;
                    }

                    .toggle-icon {
                        svg {
                            transition: all 0.2s linear;
                            width: 14px;
                            height: 16px;
                        }
                    }
                }

                .answer {
                    padding: 0 20px;
                    width: 100%;
                    font-size: 12px !important;
                    font-weight: 400 !important;
                    color: var(--font-color-answer) !important;
                    position: relative;
                    z-index: 1;
                    top: 0px;
                    max-height: 200px;
                    transition: all 0.4s linear;

                    a,
                    h1,
                    h2,
                    span,
                    td,
                    p {
                        font-size: 12px !important;
                        font-weight: 400 !important;
                        color: var(--font-color-answer) !important;
                        margin: 0px !important;
                        padding: 0px !important;
                    }

                    &.hidden {
                        top: -40px;
                        max-height: 0px;
                        transition: all 0.4s linear;
                    }
                }
            }
        }
    }
}

.area-footer {
    background: #14532d;

    .container {
        .box-footer {
            width: 100%;
            padding: 10px 0px;
            display: flex;
            font-weight: 600;
            justify-content: space-between;
            font-size: 14px;

            @media screen and (max-width:650px) {
                flex-direction: column;
                align-items: center;
                gap: 5px;
            }
        }
    }
}