:root {
    --primary-color: #272F3A;
    --text-light: #a8aebb;
}

body {
    background-color: var(--bs-body-bg);
}

#auth {
    height: 100vh;
    overflow-x: hidden;
}

#auth-right {
    background: url('/assets/mazer/images/jpg/background.jpg') no-repeat left center;
    background-size: cover;
    height: 100vh;
    width: 100%;
}



/* Lado esquerdo */
#auth #auth-left {
    padding: 5rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    
}




/* Ajuste do logo */
#auth #auth-left .auth-logo {
    margin-bottom: 4rem;
    
    width: 100%;
}

#auth #auth-left .auth-logo img {
    height: 4rem; /* Aumentado o tamanho */
    max-width: 100%;
    width: auto;
}

/* Se o logo for SVG, podemos aplicar a cor diretamente */
#auth #auth-left .auth-logo svg {
    width: 700px; /* Define um tamanho melhor */
    height: auto;
    fill: var(--primary-color); /* Aplica a cor ao logo SVG */
}

/* Título */
#auth #auth-left .auth-title {
    
    margin-bottom: 1rem;
    color: var(--primary-color);
    
}

/* Subtítulo */
#auth #auth-left .auth-subtitle {
   
    line-height: 2.5rem;
    color: var(--text-light);
   
}

/* Responsividade */
@media screen and (max-width: 1399.9px) {
    #auth #auth-left {
        padding: 3rem;
    }
}

@media screen and (max-width: 767px) {
    #auth #auth-left {
        padding: 4rem;
    }

    #auth #auth-left .auth-logo img {
        height: 3rem;
    }
}

@media screen and (max-width: 576px) {
    #auth #auth-left {
        padding: 3rem;
    }

    #auth #auth-left .auth-logo img {
        height: 2.5rem;
    }
}

/* Tema escuro */
html[data-bs-theme=dark] #auth-right {
    background: url(/assets/compiled/png/4853433.png), linear-gradient(90deg, var(--primary-color), #3f5491);
}