header {
    .container {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    nav ul {
        display: flex;
        gap: 60px;
    }

    .nav_container {
        display: flex;
        gap: 100px;
    }
    
    a {
        text-decoration: none;
    }
}

.top {
    > .container {
        max-width: min(800px, 100%);
        margin-left: 0;
    }
    *[grid] *[fluid] {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-align: center;
    }

    *[grid] {
        svg path {
            stroke: var(--monza);
        }
        
        div[col]:nth-of-type(3) svg path {
            stroke: initial;
            fill: var(--monza)
        }
    }

    .background_image {
        position: absolute;
        /* left: calc((100vw - 100%) / -2); */
        right: calc((100vw - 100%) / -2);
        bottom: 0;
        z-index: -1;

        img {
            width: max-content;
            height: max-content;
        }
    }
}

.profluidable {
    *[grid] {
        gap: 33px 12px;

        .card {
            padding: 37px 24px;
            justify-content: space-between;

            .item_text {
                display: flex;
                flex-direction: column;
                gap: 14px;
            }
        }
    }
}

.four_steps {
    *[grid] {
        gap: 12px;

        .step {
            display: flex;
            flex-direction: column;
            gap: 36px;

            .circle {
                position: relative;
                h2 {
                    width: 80px;
                    height: 80px;
                    color: #fff;
                    background-color: var(--monza);
                    border-radius: 50%;
                }
            }
            .circle::after {
                content: "";
                position: absolute;
                left: 50%;
                top: 50%;
                transform: translateY(-50%);
                height: 4px;
                width: 100%;
                background-color: var(--monza);
                z-index: -1;
            }
                
            .card {
                transition-duration: var(--td-fast);
                padding: 44px 22px 0px;
                min-height: 328px;
                flex-direction: column;

                .title {
                    min-height: max-content;
                    height: 50%;
                    display: flex;
                    flex-direction: column;
                    gap: 18px;
                    align-items: center;
                    text-align: center;
                }
                .info {
                    height: 50%;
                    text-align: center;
                    display: flex;
                    flex-direction: column;
                    gap: 14px;
                }
            }
        }

        .step:last-of-type .circle::after {
            display: none;
        }
    }
}

.bottom {

    .map_container {
        border-radius: 32px;
        overflow: hidden;

        picture {
            width: 100%;
            height: 100%;
        }
    }

    .socials {
        position: relative;
        display: flex;
        flex-direction: column;
        gap: 20px;

        .item {
            display: flex;
            gap: 34px;
            text-decoration: none;
            align-items: center;
        }
        .social_networks {
            display: flex;
            gap: 20px;
            svg {
                width: 50px;
                height: 50px;
            }
        }
    }

    .logo {
        position: absolute;
        top: -30px;
        right: 0;

        img {
            width: max-content;
            height: max-content;
        }
    }
}

.faq {
    *[expanded] {
        overflow: hidden;
        max-height: 0;
        margin-top: 0;
    }
    *[expanded="true"] {
        max-height: 100vh;
        margin-top: calc(4 * var(--space-step));
    }

    .question {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .faq_list {
        display: flex;
        flex-direction: column;
        gap: 10px;

        > li {
            padding: 18px 32px;
            border-radius: 32px;;
            border: 1px solid var(--gray);
            cursor: pointer;
            transition-duration: var(--td-medium);
        }

        > li:has(*[expanded="true"]) {
            border: 1px solid var(--gray_dark_dark);
            svg {
                transform: rotate(180deg);
            }
        }
}
}

footer {

    a {
        display: block;
    }
    .contact {text-decoration: none;}
    li a {
        text-decoration: none;
    }

    ul {
        display: flex;
        flex-direction: column;
        gap: 20px;
    }

    .logo {
        position: absolute;
        top: -20px;
        right: 0;

        img {
            width: max-content;
            height: max-content;
        }
    }
}


.modal {
    width: 800px;

    background-color: #fff;
    border-radius: 32px;
    padding: 28px 34px;

    .logo {
        margin: auto;
        display: block;
        width: max-content;

        picture {
            max-width: max-content;
        }
    }

    label { position: relative }

    input[type="file"] {
        display: none;
    }

    div[action='close'] {
        position: absolute;
        top: 34px;
        right: 34px;
    }

    label input[type='file'] ~ svg {
        position: absolute;
        right: 32px;
        top: 50%;
        transform: translateY(-50%);
    }

    input + *[checkbox] {
        border-radius: 4px;
        border: 1px solid var(--gray_dark);
        svg { opacity: 0 }
    }

    input:checked + *[checkbox] {
        border-color: transparent;
        background-color: var(--monza);
        svg { opacity: 100 }
    }

    *[checkbox] {
        vertical-align: bottom !important;
        margin-right: 5px !important;
        width: 2rem !important;
        height: 2rem !important;
    }

    .checkbox__text {
        flex: 1;
        color: var(--gray_dark);
    }

    select {
        font-size: 1.6rem;
    }

    .socials {
        padding: 10px 20px 20px;
        gap: 10px;

        width: 400px;
        max-width: 100%;
        .green {
            background-color: #3adc49;
        }
        .blue {
            background-color: #2aa1dd;
        }

        a {
            border-radius: 7px;
            padding: 16px;
            display: block;
        }
        svg {
            width: 24px;
            height: 24px;
        }
    }

    .form {
        display: flex;
        flex-direction: column;

        *[grid] {
            gap: 15px;

            label {
                --padding: 18px;
                padding: var(--padding) 32px;
                border: 1px solid var(--gray);
                border-radius: 32px;
                transition: all var(--td-fast);
                cursor: pointer;

                .error {
                    right: var(--padding);
                    position: absolute;
                    width: max-content;
                    top: 50%;
                    transform: translateY(-50%);
                    color: var(--monza);
                    opacity: 0;
                    transition: inherit;
                }
            }

            label:has(input:focus-visible) {
                border-color: var(--gray_dark);
            }

            input::placeholder, .empty {
                color: var(--gray_dark);
                font-size: var(--fs-p);
            }
        }

        label:has(input[invalid]) {
            border-color: var(--monza) !important;
            .error {
                opacity: 100%;
            }
        }
    }
}

.modal_container {
    display: flex;
    align-items: center;
    height: 100vh;

    will-change: transform, opacity, max-height;
}

.modal_container:has(.modal.slidein) {
    will-change: max-height;
}

.modal.slidein {
    will-change: opacity, transform;
}

[state="hidden"] .modal_container .modal.slidein {
    transform: translateY(-100%);
    opacity: 0;
}

[state="shown"] .modal_container {
    overflow-y: auto;
}

[state="shown"] .modal_container .modal.slidein {
    transform: translateY(0);
    opacity: 100%;
}

[state="hiding"] .modal_container .modal.slidein {
    transform: translateY(100%);
    opacity: 0;
}

[state="hidden"] .modal_container:has(.modal.slidein) { max-height: 100% }
[state="shown"] .modal_container:has(.modal.slidein) { max-height: max-content }
[state="hidden"] .modal_container:has(.modal.slidein) { max-height: 100% }

[state="hidden"] overlay {
    opacity: 0;
}

[state="shown"] overlay {
    opacity: 100%;
}

[state="shown"] overlay {
    opacity: 100%;
}

[state="hiding"] overlay {
    opacity: 0;
}

.label_container {
    display: flex;
    align-items: center;
}

label.simple-select {
    width: 100%;
    gap: 10px;
    align-items: center;


    .checkbox__text {
        flex: 1;
        color: var(--gray_dark);
        display: flex;
        align-items: center;
        gap: 10px;
    }
}

#button_container--float {
    position: fixed;
    bottom: 5%;
    right: 5%;
    z-index: 1000;
    transition: all var(--td-fast);

    .button {
        padding: 15px 30px;

        h3 {
            font-size: 1.5rem;
        }
    }
}

#button_container--float.hidden {
    opacity: 0;
    .button {
        margin: 0;
    }
}