/* Estilos para a imagem de espaço reservado (placeholder) */
.bd-placeholder-img {
    font-size: 1.125rem;
    text-anchor: middle;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
}

/* Estilos personalizados para a imagem de espaço reservado (placeholder) em telas grandes */
@media (min-width: 768px) {
    .bd-placeholder-img-lg {
        font-size: 3.5rem;
    }
}

/* Ajustes para telas menores (responsivas) */
@media (max-width: 768px) {
    /* Margem à direita dos links na barra de navegação responsiva */
    .navbar-nav .nav-item .custom-link {
        margin-right: 5px;
    }

    /* Estilos personalizados para links responsivos */
    .navbar-nav .nav-item .custom-link::before {
        content: '';
        position: absolute;
        bottom: 5px;
        left: 0;
        width: 100%;
        height: 3px;
        background-color: orange;
        transform: scaleX(0);
        transform-origin: left;
        transition: transform 0.3s;
        z-index: -1;
    }

    /* Mostra a barra laranja quando o mouse passar por cima dos links responsivos */
    .navbar-nav .nav-item .custom-link:hover::before,
    .navbar-nav .nav-item .custom-link.active::before {
        transform: scaleX(1);
    }
}

/* Estilos personalizados para links ativos na tela normal */
.navbar-nav .nav-item .custom-link.active::before {
    content: '';
    position: absolute;
    bottom: 3px;
    left: 0;
    width: 100%;
    height: 3px;
    background-color: orange;
    transform: scaleX(1);
    transform-origin: left;
    transition: none;
    z-index: -1;
}

/* Estilos personalizados para links ativos na tela responsiva */
.navbar-nav .nav-item .custom-link.active.responsive-active::before {
    bottom: 3px;
}

/* Estilos para a barra de navegação */
.navbar {
    background-color: white;
    border-bottom: 8px solid orange;
    box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.5); /* Valores da sombra */
}

/* Classe personalizada para estilizar o botão */
.btn-custom {
    color: white;
    background-color: orange;
    border-color: orange;
    font-weight: bold;
    transition: box-shadow 0.3s;
}

/* Estiliza o botão quando o mouse passa por cima */
.btn-custom:hover {
    color: white;
    background-color: darkorange;
    border-color: darkorange;
    font-weight: bold;
}

/* Estiliza o botão quando estiver em foco */
.btn-custom:focus {
    box-shadow: 0 0 0 0.25rem darkorange;
    outline: none;
}

/* Estilos personalizados para os links da barra de navegação */
.custom-link {
    color: black;
    text-decoration: none;
    display: inline-block;
    margin-right: 10px;
    line-height: 2.5;
    position: relative;
}

/* Estiliza os links quando o mouse passa por cima (hover) */
.custom-link:hover {
    color: orange;
}

/* Adiciona a barra laranja na parte inferior do link ao passar o mouse sobre ele */
.custom-link::before {
    content: '';
    position: absolute;
    bottom: -15px;
    left: 0;
    width: 0;
    height: 3px;
    background-color: orange;
    transition: width 0.3s;
}

/* Estiliza a barra laranja quando o mouse passa por cima dos links */
.custom-link:hover::before {
    width: 100%;
}

/* Estilos personalizados para links ativos na tela normal */
.navbar-nav .nav-item .custom-link.normal-active::before {
    bottom: -15px;
}

/* Estilos personalizados para links ativos na tela responsiva */
.navbar-nav .nav-item .custom-link.active.responsive-active::before {
    bottom: 50px;
}

       /* Ajuste para reduzir a distância entre o carrossel e a barra de menu */
    #header-carousel {
        margin-top: -15px; /* Ajuste o valor conforme necessário */
    }


/* Estilize a barra laranja */
.custom-link-footer {
    position: relative; /* Para permitir posicionar a barra em relação ao link */
    display: inline-block;
    color: inherit; /* Mantenha a cor original do link */
    text-decoration: none; /* Remova o sublinhado do link */
    padding-bottom: 1px; /* Distância entre o link e a barra laranja */
}

.custom-link-footer::after {
    content: ''; /* Crie um elemento fictício para a barra */
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 3px; /* Altura da barra laranja */
    background-color: orange;
    transform: scaleX(0); /* Comece com a barra invisível */
    transform-origin: bottom left; /* Origem da transformação */
    transition: transform 0.3s ease; /* Animação da barra laranja */
}

.custom-link-footer:hover::after {
    transform: scaleX(1); /* Animação para mostrar a barra laranja ao passar o mouse */
}

.texto-linha-abaixo {
    border-bottom: 3px solid orange; /* Adiciona uma borda vermelha na parte inferior */
    display: inline-block; /* Faz a borda ficar apenas no tamanho do texto */
}


.orange-bar {
    background-color: orange;
    height: 10px;
}


.orange-bar-carosel {
    width: 100%;
    height: 10px; /* Ajuste a altura conforme necessário */
    background-color: orange;
    box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.5); /* Valores da sombra */
}
.orange-bar-footer {
    width: 100%;
    height: 10px; /* Ajuste a altura conforme necessário */
    background-color: orange;
    box-shadow: 0px -10px 20px rgba(0, 0, 0, 0.5); /* Valores da sombra */
}

.bgcolor-orange {
    background-color: #FED766; /* Laranja claro */
}

.text-blue {
    color: #007BFF; /* Azul para o texto "Segurança" */
}



/* Show it is fixed to the top */
body {
    min-height: 75rem;
    padding-top: 6rem;
}
 

  .styled-icon {
            display: inline-block;
            background-color: #007bff;
            padding: 10px;
            border-radius: 50%;
            box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
	  		
        }

        .styled-icon img {
            width: 30px;
            height: 30px;
            fill: white;
			 filter: brightness(0) invert(1); /* Isso inverte as cores e ajusta o brilho para simular a cor branca */
        }





/* Estilos para os containers div (ajuste conforme necessário) */
.container {
    background-color: #f0f0f0; /* Cor de fundo dos containers */
    padding: 20px;
    margin-bottom: 20px; /* Espaçamento entre os containers */
    border-radius: 5px; /* Arredondamento das bordas dos containers */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Sombra para dar profundidade */
}

.titulo-esquerda {
        text-align: left;
    }

    .texto-justificado {
        text-align: left;
    }

/* Classe para criar a sombra projetada para cima */
.shadow-line {
    width: 100%;
    height: 10px; /* Ajuste a altura da linha e da sombra conforme necessário */
    box-shadow: 0px -5px 10px rgba(0, 0, 0, 0.5); /* Valores da sombra */
}

.custom-rounded-div {
  border-radius: 30px !important; /* Ajuste este valor para arredondar mais ou menos */
  background-color: #f0f0f0 !important;
  padding: 20px !important;
}

.custom-paragraph {
    margin-bottom: 3px; /* Defina a distância vertical desejada */
}

.custom-image-size {
    max-width: 130%;
    height: auto;
    max-height: 450px;
    margin-top: 10px; /* Adicione a margem superior desejada */
}

.border-shadow {
    border: 1px solid rgba(0, 0, 0, 0.125); /* Cor da borda */
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2); /* Sombra */
    border-radius: 10px; /* Arredondamento da borda */
}


/* Cor laranja para fundo do submenu quando um item é clicado */
.dropdown-item:active {
    background-color: #FFA500 !important; /* Cor de fundo laranja */
    color: #ffffff !important; /* Cor do texto branco */
}