/* Estilo automático para a página: contato */
.cinza {
    background-color: #EFEFEF;
}

section.contato {
    margin: 0 82px;
    padding: 72px 0;
    background-color: #EFEFEF;

    .form-input {
        flex: 1 1 auto;
        min-width: 500px;
        label {
            color: #00687C;
            margin-bottom: 8px;
            font-weight: 500;
        }
        input.form-control, .form-select, option, textarea {
            color: #323A3C;
            font-size: 16px;
            font-family: 'Montserrat';
            padding: 14px;
            border: none;
        }
    }

    .form-check {
        label {
            color: #323A3C;
            font-size: 16px;
            font-family: 'Montserrat';
            border: none;
            a {
                text-decoration: underline;
                color: #00687C;
            }
        }
    }

    .form-check {
        display: flex;
        align-items: baseline;
        gap: 8px;
        padding-left: 0;
    }

    button.cta {
        pointer-events: auto;
        background-color: #00687C;
        color: #FFFFFF;
        border: none;
        font-weight: 600;
        text-decoration: none;
        padding: 14px 92px;
        border-radius: 8px;
        display: inline-block;
        transition: 300ms all ease-in-out;
        width: fit-content;
        font-size: 16px;
        font-weight: 600;
        font-family: 'Linear Grotesk';

        &:hover {
            background-color: #005a6b;
        }
    }
}

section.info {
    .cards-contato {
        display: flex;
        flex-wrap: wrap;
        gap: 33px;
    }

    .card {
        flex: 1 1 calc(30% - 8px);
        padding: 24px;
        background-color: #f5f5f5;

        .card-title {
            display: flex;
            flex-direction: row;
            align-items: center;
            gap: 8px;
            margin-bottom: 16px;

            .num-card {
                /* padding: 10px; */
                font-size: 18px;
                font-weight: 700;
                color: #fff;
                background-color: #00687e;
                border-radius: 4px;
                width: 38px;
                height: 38px;
                align-content: center;
                text-align: center;
            }

            h3 {
                font-weight: 600;
                font-size: 22px;
                line-height: 160%;
                letter-spacing: 0;
                text-wrap-mode: nowrap;
                margin: 0;
            }
        }

        .info {
            display: flex;
            max-width: 100%;
            row-gap: 0;
            column-gap: 24px;
            flex-wrap: wrap;

            a {
                color: #3B4749;

                &:hover {
                    color: #455356;
                }
            }

            p {
                margin: 0;
            }
        }
    }

    .rede-card {
        display: flex;
        width: 45px;
        height: 45px;
        background-color: #00687C;
        border-radius: 5px;
        justify-content: center;
        align-items: center;
    }

    .social-icons {
        display: flex;
        flex-direction: row;
        gap: 16px;
    }
}

section.mapa {
    h5 {
        font-weight: 600;
        font-size: 18px;
        line-height: 135%;
        letter-spacing: 2px;
        color: #fff;
    }

    .card {
        border: 1px solid #81B4BE;
        border-radius: 10px;
        padding: 24px;
        background: linear-gradient(#006A7E, #006A7E) padding-box, linear-gradient(135deg, #006A7E 0%, #0091A0 35%, #44A9B5 70%, #44A9B5 100%) border-box;

        p {
            font-weight: 400;
            font-size: 16px;
            line-height: 145%;
            letter-spacing: 2px;
            color: #fff;
            margin: 0;
        }
    }

    .rota {
        display: flex;
        flex-direction: column;
        gap: 16px;
        text-align: center;

        .card {
            padding: 14px;
            flex-direction: row;
            justify-content: center;
            align-items: center;
            gap: 8px;

            h5 {
                margin: 0;
            }
        }

        h5 {
            margin-bottom: 10px;
        }
    }
}

@media (width <=992px) {
    section.title {
        padding: 48px 0;
    }

    section.contato {
        margin: 0 16px;
        padding: 48px 16px;
        border-radius: 10px;

        .form-input {
            min-width: 100%;
        }

        button.cta {
            width: 100%;
        }
    }

    section.info {
        .card {
            flex: 1 1 auto;
            padding: 24px;
            background-color: #f5f5f5;
        }
    }
}