@import url('https://fonts.googleapis.com/css2?family=Roboto+Condensed:wght@300&display=swap');

* {
    margin: 0;
    padding: 0;
    font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}

:root {
    --background: #001136;
    --backgroundBlur: #12121210;
    --backgroundBlur2: #12121250;
    --primary: #727272;
    --secondary: #175673;
    --porcent: #00aeff;; 

}

body {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    min-height: 100vh;
    color: white;
    background-color: var(--background);
}

#WhatsappSection {
    position: fixed;
    font-size: 20px;
    z-index: 99999;
    right: 0;
    bottom: 10px;
    display: flex;
    align-items: center;
}

#WhatsappSection p {
    white-space: nowrap;
    display: inline-block;
    animation: deslizar 2s alternate ease-in-out;
}

@keyframes deslizar {
    from { transform: translateX(100%); opacity: 0; }
    to   { transform: translateX(0); opacity: 1; }
}

#whatsapp {
    color: rgb(0, 179, 0);
    font-size: 70px;
    cursor: pointer;
    animation: pulsar 2s infinite ease-in-out;
}

@keyframes pulsar {
    0%   { transform: scale(1); }
    50%  { transform: scale(1.2); }
    100% { transform: scale(1); }
}

header {
    width: 100%;
    height: 932px;
    background: 
        linear-gradient(
            to bottom,
            rgba(0, 17, 54, 0) 0%,   /* transparente até 60% da altura */
            rgba(23, 86, 115, 0.85) 65%, /* começa a escurecer */
            rgba(23, 86, 115, 1) 95%   /* totalmente sólido no rodapé */
        ),
        url('/IMG/DR LUCAS FRENTE.JPG');
    background-size: cover;
    background-position: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

main {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    flex-direction: column;
    background-color: var(--background);
    font-weight: 600;
}

main section {
    display: flex;
    align-items: center;
    flex-direction: column;
}

.qualificacoes p {
    text-align: center;
    margin-top: 1em;
    font-size: 18px;
    font-weight: 600;
    color: white;
}

.qualificacoes {
    color: var(--secondary);
}

.agendeConsulta {
    height: 80px;
    width: 250px;
    padding: 0.5em;
    background-color: rgba(0, 17, 53, 0.986);
    color: white;
    margin-top: 1em;
    font-size: 20px;
    border: none;
    border-radius: 10px;
}

.agendeConsulta:focus {
    background-color: var(--secondary);
}

.agendeConsulta:last-child {
    margin-bottom: 2em;
}

.nomeDr {
    font-size: 40px;
    text-align: center;
    margin-top: 1em;
    font-weight: 600;
    color: white;
}

header h4 {
    font-size: 28px;
    text-align: center;
    font-weight: 400;
    color: white;
}

header h1 {
    font-size: 20px;
    text-align: center;
    margin-top: 1em;
    font-weight: 500;
    color: white;
}

strong.detalhe {
    color: var(--porcent);
    font-weight: 700;
}

main .sobre {
    margin-top: 2em;
    display: flex;
    align-items: center;
    flex-direction: column;
}

.imgDr {
    margin-top: 1em;
    width: 95%;
    height: 632px;
    background: 
        linear-gradient(to top, 
        rgb(0, 17, 53) 0%,
        rgba(0, 17, 53, 0.219) 50% ), 
        url('/IMG/DR\ LUCAS\ PNG.png');
    background-size: cover;
    background-position: center;
}

.tituloH2 {
    font-weight: 500;
}

.tituloH2Desktop {
    display: none;
}

.tituloH2.space {
    margin-top: 1em;
}

main .sobre div {
    width: 95%;
    background-color: #12121210;
    display: flex;
    align-items: flex-start;
    flex-direction: column;
    justify-content: center;
    margin-bottom: 2em;
}

.titulo {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-direction: row;
    margin-bottom: 0.5em;
    margin-left: 0.5em;
}

.titulo.space {
    margin-top: 1em;
}

.titulo i {
    font-size: 32px;
    color: var(--porcent);
}

.titulo h4 {
    font-size: 24px;
    font-weight: 600;
    color: var(--porcent);
    margin: 0;
}

main .sobre div p {
    width: 95%;
    margin-left: 0.5em;
    margin-bottom: 1em;
}

main .sobre div p:last-child {
    margin-bottom: 1em;
}

main .sobre h3 {
    margin-top: 1em;
    text-align: center;
    font-size: 20px;
    font-weight: 600;
    width: 90%;
    height: 80px;
    background-color: #4da6ff;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
}

.especialiedades {
    background-color: #175673;
    width: 100%;
    display: flex;
    align-items: center;
    flex-direction: column;
}

.especialiedade {
    color: var(--porcent);
    margin-top: 1em;
    border: solid 2px var(--porcent);
    width: 80%;
    height: 180px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    text-align: center;
    padding: 1em;
    border-radius: 10px;
    background-color: whitesmoke;
}

.especialiedade:last-child {
    margin-bottom: 2em;
}

.especialiedade i {
    font-size: 50px;
}

.especialiedade h5 {
    font-size: 25px;
    font-weight: 750;
}

.especialiedade p {
    font-size: 15px;
    font-weight: 500;
}

.casos {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.casos section h5 {
    font-size: 22px;
    font-weight: 750;
}

.casos section p {
    font-size: 15px;
}

.casos section {
    margin-top: 2em;
    margin-bottom: 1em;
    border: 2px solid var(--porcent);
    border-radius: 5px;
    width: 22em;
    height: 8em;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    cursor: pointer;
}

.casosDesktop {
    display: none;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.casosDesktop section h5 {
    font-size: 22px;
    font-weight: 750;
}

.casosDesktop section p {
    font-size: 15px;
}

.casosDesktop section {
    margin-top: 2em;
    margin-bottom: 1em;
    border: 2px solid var(--porcent);
    border-radius: 5px;
    width: 22em;
    height: 8em;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    cursor: pointer;
}

.depoimento {
    background-color: #175673;
    width: 100%;
    margin-top: 1em;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    flex-direction: column;
}

.depoimento h2 {
    margin-top: 1em;
    margin-bottom: 1em;
}

.depoimento iframe {
    margin-bottom: 2em;
}

.depoimentosDesktop {
    width: 100%;
    margin-top: 1em;
    display: none;
    align-items: center;
    justify-content: center;
    text-align: center;
    flex-direction: column;
}

.depoimentosDesktop h2 {
    margin-top: 1em;
    margin-bottom: 1em;
}

.depoimentosDesktop iframe {
    margin-bottom: 2em;
}

footer {
    width: 100%;
    background-color: var(--porcent);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

footer h1 {
    font-size: 30px;
    margin-top: 1em;
    margin-bottom: 0.5em;
}

footer div {
    color: var(--porcent);
    margin-top: 1em;
    border: solid 2px var(--porcent);
    max-width: 80%;
    min-width: 50%;
    display: flex;
    align-items: center;
    flex-direction: column;
    padding: 1em;
    border-radius: 10px;
    background-color: whitesmoke;
    margin-bottom: 0em;
}

footer div:last-child {
    margin-bottom: 2em;
}

footer div section {
    display: flex;
    width: 100%;
}

footer div p {
    display: flex;
    width: 100%;
}

footer div section i {
    font-size: 20px;
    margin-right: 0.3em;
}

.scroll-animate {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.scroll-animate.show {
  opacity: 1;
  transform: translateY(0);
}

footer label {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 2em;
}

footer label i {
    font-size: 25px;
    color: transparent;
    background: linear-gradient(135deg, #8a2be2, #ff66cc);
    background-clip: text;
    -webkit-background-clip: text;
}

footer label #zap2 {
    font-size: 25px;
    color: transparent;
    background: green;
    background-clip: text;
    -webkit-background-clip: text;
}

footer label p {
    font-size: 25px;
    font-weight: 600;
}


@media (min-width: 1024px) {
    header {
        background-position: center 20%;
        background-size: cover;
        background-repeat: no-repeat;
    }

    main .sobre {
        flex-direction: row;
    }

    .tituloH2Desktop {
        display: flex;
        margin-top: 2em;
    }

    #textoOff {
        display: none;
    }

    .imgDr {
        background-position: top;
    }

    .depoimento {
        display: none;
    }

    .casos {
        display: none;
    }

    .casosDesktop {
        display: flex;
    }

    .depoimentosDesktop {
        display: flex;
    }

    .casosEdepoimentos {
        display: flex;
    }

    .casosDesktop {
        margin-right: 2em;
    }
    
}