/* Fonts */
@import url(../css/outfit.css);
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap');



/* Variables */
:root {
    --c-dark: #212529;
    --c-brand: #6c63ff;
    --c-brand-light: #6970dd;
    --c-brand-rgb: 78, 87, 212;
    --c-brand-rgba: 78, 87, 212;
    --c-green: #009970;
    --c-body: #727272;
    --font-base: "Outfit";
    --box-shadow: 0px 15px 25px rgba(0,0,0,0.08);
    --transition: all 0.5s ease;

}



/*Footer*/
footer {
    padding-top: 100px;
    
}

.footer-color {
    background-color: var(--c-dark);
    margin-top: 40px;
    padding-bottom: 40px;
    
}


.footer-top {
    padding-bottom: 40px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
   background-color:rgba(248, 248, 248, 0.425);
}

.footer-botton {
    margin-top: 40px;
    padding-bottom: 40px;
 
    
}

a {
    text-decoration: none;
}

.navbar-scrolled {
    background-color: black !important;
    transition: background-color 0.3s ease-in-out;
}

.navbar-scrolled .nav-link {
    color: white !important;
}

.navbar-scrolled .navbar-brand {
    color: white !important;
}

footer li, footer p, footer a {
    color: var(--c-body)
}

footer ul {
    list-style: none;
    padding: 0;
}

footer .line {
    width: 40px;
    height: 4px;
    background-color: var(--c-brand);
    margin-top: 12px;
    margin-bottom: 24px;
}

.social-icons a {
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(255, 255, 255, 0.1);
    border-radius: 100px;
    

}

.social-icons a:hover {
    background-color: var(--c-brand);
    color: black
}

/* Media query para telas menores que 768px (versão mobile) */
@media (max-width: 768px) {
    .carousel-caption, .mobile h1,
    .carousel-caption, .mobile p {
      display: block; /* Garante que os textos apareçam */
      font-size: 2.5rem; /* Ajusta o tamanho do texto H1 */
      line-height: 1.5; /* Ajusta o espaçamento das linhas */
      color: #0d0101; /* Certifica-se de que a cor do texto seja visível */
      font-weight: 700; /* Deixa o texto mais destacado */
      font-style: italic; /* Deixa o texto em itálico */
      text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); /* Adiciona uma sombra para destacar a fonte */
    }

    .carousel-caption, .mobile p {
      font-size: 1.2rem; /* Aumenta o tamanho do parágrafo */
      opacity: 1; /* Remove a opacidade para aumentar a legibilidade */
      font-style: italic; /* Deixa o parágrafo em itálico */
      font-weight: 500; /* Aumenta a ênfase no parágrafo */
    }
}