#big-numbers .content {
    padding: 2rem 1rem;

    .items {
        --qtd-col-big-numbers: 4;
        --gap-big-numbers: 2rem;

        gap: var(--gap-big-numbers);

        .item {
            width: calc((100% - (var(--gap-big-numbers) * (var(--qtd-col-big-numbers) - 1))) / var(--qtd-col-big-numbers));
            padding: 1.5rem 1rem 1.2rem;
            background-color: var(--white);
            box-shadow: 0 0 6px 2px rgba(0, 0, 0, .1);
            border-radius: 12px;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: .4rem;

            .icon svg {
                width: 40px;
                height: 40px;
                fill: var(--clr1);
            }

            .texts {
                display: flex;
                flex-direction: column;
                align-items: center;
                gap: .3rem;

                .count {
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    gap: .4rem;

                    .value-big-number {
                        font-size: 36px;
                        font-weight: 600;
                    }

                    span {
                        font-size: 32px;
                        text-align: center;
                    }
                }

                p {
                    color: var(--clr-dark-paragraph);
                    font-size: 15px;
                }
            }
        }
    }
}

#about .content .items {
    --gap-big-about: 2rem;
    --qtd-col-about: 3;

    gap: var(--gap-big-about);

    .item {
        width: calc((100% - (var(--gap-big-about) * (var(--qtd-col-about) - 1))) / var(--qtd-col-about));
        display: flex;
        flex-direction: column;
        gap: 1rem;
        border-radius: 12px;
        border: 1px solid rgba(0, 0, 0, .3);
        padding: 1.5rem 1.2rem 1.2rem;

        .icon svg {
            width: 36px;
            height: 36px;
            fill: var(--clr1);
        }

        .texts {
            display: flex;
            flex-direction: column;
            gap: .7rem;

            h3 {
                font-size: 17px;
                font-weight: 600;
            }

            .paragraphs p {
                line-height: 26px;
                font-size: 15px;
                color: var(--clr-dark-paragraph);
            }
        }
    }
}

#services .content .items {
    --gap-services: 1.5rem;
    --qtd-col-services: 3;

    gap: calc(var(--gap-services) * 1.3) var(--gap-services);

    .item {
        background-color: var(--white);
        width: calc((100% - (var(--gap-services) * (var(--qtd-col-services) - 1))) / var(--qtd-col-services));
        border-radius: 12px;
        box-shadow: 0 0 6px 3px rgba(0, 0, 0, .1);
        display: flex;
        flex-direction: column;
        gap: .2rem;

        &:nth-child(1) .image { background-image: var(--img-services-1); }
        &:nth-child(2) .image { background-image: var(--img-services-2); }
        &:nth-child(3) .image { background-image: var(--img-services-3); }
        &:nth-child(4) .image { background-image: var(--img-services-4); }
        &:nth-child(5) .image { background-image: var(--img-services-5); }

        .image {
            background-position: center;
            background-repeat: no-repeat;
            background-size: cover;
            height: 250px;
            width: 100%;
            border-radius: 10px 10px 0 0;
        }

        .about {
            padding: 1rem;
            display: flex;
            flex-direction: column;
            gap: .6em;

            h3 {
                font-size: 16px;
                font-weight: 600;
            }

            .paragraphs p {
                font-size: 15px;
                line-height: 24px;
                color: var(--clr-dark-paragraph);
            }
        }
    }
}

#feedbacks .content .items .item {
    padding: 1.5rem 1.2rem 1.2rem;
    box-shadow: 0 0 6px 2px rgba(0, 0, 0, .1);

    .top .note svg { fill: var(--yellow-star); }

    .about .image {
        width: 40px;
        height: 40px;
    }
}

#contact .content .balloons .balloon {
    padding: 1.5rem 1.2rem 1.2rem;
    box-shadow: 0 0 6px 2px rgba(0, 0, 0, .1);

    &.form { width: 65%; }
    &.other {  width: 35%; }

    .methods .method {
        display: flex;
        align-items: center;
        gap: .7rem;

        .icon {
            padding: .7rem;
            border-radius: 50%;
            background-color: var(--clr1);
            width: fit-content;
            display: flex;
            align-items: center;
            justify-content: center;

            svg {
                width: 24px;
                height: 24px;
                fill: var(--white);
                display: flex;
            }
        }

        .texts {
            display: flex;
            flex-direction: column;
            gap: .3rem;

            h4 {
                font-size: 15px;
                font-weight: 500;
            }

            a {
                font-size: 14px;
                color: var(--clr-dark-paragraph);
                font-weight: 400;

                &:hover { text-decoration: underline; }
            }
        }
    }
}

@media (max-width: 1024px) {
    #banner .content .subcontent { width: 100%; }

    #big-numbers .content .items {
        --qtd-col-big-numbers: 2;
        --gap-big-numbers: 1.5rem;
    }

    #about .content .items {
        --gap-big-about: 1.5rem;
        --qtd-col-about: 2;
    }

    #services .content .items {
        --gap-services: 1.5rem;
        --qtd-col-services: 2;
    }

    #contact .content .balloons {
        flex-direction: column;
        gap: 1.5rem;

        .balloon {
            width: 100% !important;
        }
    }
}

@media (max-width: 600px) {
    #banner .content .subcontent {
        align-items: center;

        .texts {
            align-items: center;

            h1, p {
                text-align: center;
            }
        }

        .actions {
            flex-direction: column;
            align-items: center;
            width: 100%;
            gap: .6rem;
        }
    }

    #big-numbers .content .items {
        --qtd-col-big-numbers: 1;
        --gap-big-numbers: 1rem;
    }

    #about .content .items {
        --qtd-col-about: 1;
        --gap-big-about: 1rem;
    }

    #services .content .items {
        --qtd-col-services: 1;
        --gap-services: 1rem;
    }
}