footer {

    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 40px;

    padding: 40px 100px;

    background-color: var(--blue-darker);
    color: white;
    font-weight: 400;

    .footer-container {
        display: flex;
        justify-content: space-between;


        .logo-container {
            display: flex;
            gap: 40px;

            width: max-content;
            height: 100%;

            .logo-criciuma {
                width: 150px;
                max-width: 100%;
                height: fit-content;
            }

            .logo-texto {
                display: flex;
                flex-direction: column;
                gap: 10px;

                p {
                    font-size: 1rem;
                    margin: 0;
                    width: max-content;
                }

                .logo-escola-saude {
                    width: 150px;
                    max-width: 100%;
                    height: auto;
                }

                .telefone-saude,
                .instagram-saude {
                    color: inherit;
                    text-decoration: none;
                }
            }

        }

        .lista-links-container {
            display: flex;
            gap: 100px;
            width: min-content;

            .lista-links {
                display: flex;
                flex-direction: column;
                gap: 32px;
                width: max-content;

                h3,
                summary {
                    text-align: start;
                    font-weight: 600;
                    font-size: 1.25rem;
                    color: inherit;

                    margin: 0;
                }

                summary {
                    pointer-events: none;
                    cursor: default;

                    &::marker {
                        display: none;
                    }
                }

                .marcador-customizado {
                    display: none;
                }

                ul {
                    display: flex;
                    flex-direction: column;
                    gap: 16px;

                    width: 100%;
                    height: 100%;
                    max-height: 300px;

                    padding: 0;
                    margin: 0;

                    list-style-type: none;
                    overflow: hidden;
                    transition: var(--delay-default);

                    li {
                        margin: 0;
                        text-align: start;

                        a {
                            color: inherit;
                            text-decoration: none;

                            --reversed-link-gap: min(100%, 1.35em);
                            background: linear-gradient(to right, currentColor, currentColor) 0 var(--reversed-link-gap)/0 1px no-repeat;
                            background-position-x: right;
                            transition: background-size .5s cubic-bezier(.3, 1, .3, 1);

                            &:hover {
                                background-position-x: left;
                                background-size: 100% 1px;
                            }
                        }
                    }
                }
            }

            .linha {
                height: 100%;
                width: 1px;
                background-color: white;
                margin: 0 20px;
            }
        }

    }


    hr {
        background-color: white;
        margin: 0;
    }

    .texto-copyright {
        text-align: center;
        margin: 0;
        font-size: 1rem;
    }
}


@media (max-width: 1400px) {

    footer {

        .footer-container {

            .lista-links-container {
                gap: 25px;

            }
        }
    }
}

@media (max-width: 1100px) {

    footer {
        align-items: center;

        .footer-container {
            flex-direction: column;
            row-gap: 60px;

            width: 100%;

            .logo-container {
                justify-content: space-evenly;

                width: 100%;
            }

            .lista-links-container {
                justify-content: space-evenly;

                width: 100%;

                .linha {
                    display: none;
                }
            }
        }
    }
}

@media (max-width: 768px) {

    footer {
        padding-inline: 40px;
    }
}

@media (max-width: 425px) {


    footer {
        padding-inline: 20px;
        gap: 0px;

        .footer-container {
            row-gap: 60px;

            width: 100%;

            .logo-container {
                justify-content: space-between;
                gap: 10px;

                width: 100%;

                h1 {
                    width: 40%;
                    margin: 0;
                }

                .logo-criciuma {
                    width: 100%;
                }

                .logo-texto {
                    width: 50%;

                    p {
                        font-size: 1rem;
                        width: 100%;
                    }

                    .telefone-saude,
                    .instagram-saude {
                        display: flex;
                        align-items: center;
                        gap: 10px;

                        i {
                            font-size: 1.25rem;
                        }
                    }
                }
            }

            .lista-links-container {
                flex-direction: column;
                justify-content: center;
                gap: 30px;

                .lista-links {
                    width: 100%;

                    summary {
                        width: 100%;
                        pointer-events: auto;
                        cursor: pointer;

                        padding-bottom: 10px;

                        border-bottom: 1px solid white;

                        &::marker {
                            display: auto;
                        }
                    }

                    h3 {
                        display: flex;
                        justify-content: space-between;
                        width: 100%;

                        padding-bottom: 10px;

                        border-bottom: 1px solid white;

                        .marcador-customizado {
                            display: inline-block;
                            padding-inline: 5px;
                            transition: var(--delay-default);
                        }

                        .rotacionar-marcador {
                            transform: rotate(180deg);
                        }
                    }

                    .esconder-links {
                        max-height: 0px;
                    }

                }
            }
        }
    }
}