#loader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
    opacity: 1;
}

/* O logo oscila suavemente */
#loader img {
    width: 150px; /* Ajuste o tamanho conforme necessário */
    opacity: 1; /* O logo começa visível */
    animation: oscillateOpacity 2s infinite; /* Animação de oscilar com opacidade, repetindo indefinidamente */
}

/* Adiciona contorno animado ao SVG */
#loader img.contour {
    stroke: white; /* Define a cor do contorno como branco */
    stroke-width: 2; /* Espessura do contorno */
    fill: none; /* Remove o preenchimento do SVG */
    animation: draw 4s linear infinite; /* Animação para desenhar o contorno */
}

/* Animação para desenhar o contorno do SVG */
@keyframes draw {
    0% {
        stroke-dasharray: 0, 1000; /* Começa sem o contorno desenhado */
    }
    100% {
        stroke-dasharray: 1000, 0; /* Finaliza o desenho completo */
    }
}

/* Animação de oscilar sem desaparecer completamente */
@keyframes oscillateOpacity {
    0% {
        opacity: 1; /* Totalmente visível */
    }
    50% {
        opacity: 0.5; /* Fica parcialmente visível, sem desaparecer */
    }
    100% {
        opacity: 1; /* Volta a ficar totalmente visível */
    }
}




/* Reset de estilos básicos */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}

html {
    line-height: 1.15;
    -webkit-text-size-adjust: 100%;
}


body {
    font-family: "Libre Franklin", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
    margin: 0;
    padding: 0;
    line-height: 1.6;
}

* {
    font-family: "Libre Franklin", sans-serif;
    font-size: 13px;
}

main {
    display: block;
}

h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp, small,
strike, strong, sub, sup, tt, var, b, u, i, center,
dl, dt, dd, ol, ul, li, fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td, article,
aside, canvas, details, embed, figure, figcaption, footer,
header, hgroup, menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}

ol, ul {
    list-style: none;
}

blockquote, q {
    quotes: none;
}

blockquote::before, blockquote::after,
q::before, q::after {
    content: '';
    content: none;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}



/* Estilos Globais */
a {
    text-decoration: none;
    color: inherit;
}





/* Adicione animação fade-in da esquerda para direita para o título */
.fade-in {
    opacity: 0;
    transform: translateX(-50px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.fade-in.active {
    opacity: 1;
    transform: translateX(0);
}

/* Adicione animação fade-in da esquerda para direita para o subtítulo com delay */
.fade-in-slow {
    opacity: 0;
    transform: translateX(-50px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
    transition-delay: 0.3s; /* Delay para começar a animação após o título */
}

.fade-in-slow.active {
    opacity: 1;
    transform: translateX(0);
}