/*TRANSAÇÃO DE DARK MODE*/

/* GERAL */

*.light {
    transition: .9s ease-out;
}

body.light {
    background-color: #d7e0e3;
}

body.light h1,
body.light h2,
body.light h3,
body.light h4,
body.light p {
    color: #212121;
}

body.light p,
a {
    font-weight: 600;
}

body.light h1 span,
h2 span {
    -webkit-text-stroke: 1px black;
}

/* TRILHO */

.trilho.light {
    background-color: #d7e0e3;
    border: 0.5px solid #212121;
}

.trilho.light .indicador {
    left: 22px;
    background-color: #212121;
    margin: -1px;
}

/* CABEÇALHO */

#inicio.light {
    background-color: #003b0a;
}

#inicio.light a p {
    color: #d7e0e3;
    -webkit-text-stroke: 0.3px black;
}

nav.light a {
    color: whitesmoke;
}

nav.light a:hover {
    color: #212121;
    transition: 0.3s ease-in-out;
}

body.light button {
    background-color: #d7e0e3;
    color: #212121;
    border: 1px solid;
}

/* INICIO */

body.light .span-light {
    color: #000000;
    text-shadow: 4px 5px 5px #4a4949;
}

body.light .span3.span-light{
    text-shadow: 4px 5px 4px #4a4949;
    color: #126712;
    -webkit-text-stroke: 2px rgb(0, 0, 0);
}

body.light .textos-dinamicos li::after {
    background-color: #d7e0e3;
}


@media screen and (min-width: 320px) and (max-width: 479px) {
    .trilho.light .indicador {
        position: relative;
        left: auto;
        margin-left: auto;
        background-color: #212121;
    }

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

    ::-webkit-scrollbar-thumb {
        background-color: #000000;
        border-radius: 7px;
        border: 3px solid #000000;
    }

    ::-webkit-scrollbar-track {
        background-color: #000000;
    }

    *.light {
        scrollbar-width: thin;
        scrollbar-color: #000000c7 #000000;
    }

    body.light .aba-menu .span-menu {
        background: #fff;
    }

    body.light .menu li a {
        color: rgba(255, 255, 255, 0.751);
        font-weight: 100;
    }
}

/* ESPECIALIDADES */

body.light .especialidades {
    background-color: whitesmoke;
    box-shadow: 0 0 20px 10px whitesmoke;
}

body.light .especialidades .website-box {
    background-color: #d7e0e348;
}

body.light .especialidades .website-box:hover {
    box-shadow: 0 0 15px #212121;
}

/* BENEFICIOS */

body.light .beneficios .beneficios-box {
    background-color: whitesmoke;
    border: solid 2px #21212159;
}

body.light .beneficios .beneficios-box:hover {
    box-shadow: 0 0 15px #212121;
}

/* SOBRE */

body.light .sobre {
    background-color: whitesmoke;
    box-shadow: 0 0 20px 10px whitesmoke;
}

body.light .sobre-informacao #icones-sobre {
    color: black;
}

/* FORMLUARIO */

body.light .formulario {
    background-color: whitesmoke;
    box-shadow: 0 0 20px 10px whitesmoke;
}

body.light .formalurio-container .form-informacao input {
    color: #000000;
    background-color: #ffffff;
    border: 1px solid#000000;
}

body.light .form .bi-whatsapp {
    color: #212121;
}

/* FOOTER */

body.light footer {
    background-color: #003b0a;
}

body.light .line-footer p {
    color: #d7e0e3;
    -webkit-text-stroke: 0.3px black;
    font-size: 23.5px;
}

body.light footer #icones-sobre {
    color: #d7e0e3;
}

body.light footer .borda {
    border-top: 2px solid #ffffff;
}

body.light .a-footer {
    color: #ffffff;
    margin-top: auto;
}

body.light footer .bi-envelope,
body.light footer .bi-whatsapp {
    color: white;
    font-size: 18px;
}

body.light .copyright {
    color: #d7e0e3;
}

@media (min-width: 480px) and (max-width: 768px) {
    .trilho.light .indicador {
        position: relative;
        left: auto;
        margin-left: auto;
    }
}

@media (min-width: 769px) and (max-width: 1024px) {
    .trilho.light .indicador {
        position: relative;
        left: auto;
        margin-left: auto;
    }
}

@media (min-width: 1025px) and (max-width: 1440px) {
    .trilho.light .indicador {
        position: relative;
        left: auto;
        margin-left: auto;
    }
}

@media (min-width: 1441px) {
    .trilho.light .indicador {
        position: relative;
        left: auto;
        margin-left: auto;
    }
}