/* Brackets effect */
.brackets ul li a{
    color:#8e8e8e;
    font-size: 1.0em;
    font-weight: bolder;
}
.brackets ul li a::before,
.brackets ul li a::after {
    display: inline-block;
    opacity: 0;
    -webkit-transition: -webkit-transform 0.3s, opacity 0.2s;
    -moz-transition: -moz-transform 0.3s, opacity 0.2s;
    transition: transform 0.3s, opacity 0.2s;
}
.brackets ul li a::before {
    margin-right: 10px;
    content: '[';
    -webkit-transform: translateX(20px);
    -moz-transform: translateX(20px);
    transform: translateX(20px);
}
.brackets ul li a::after {
    margin-left: 10px;
    content: ']';
    -webkit-transform: translateX(-20px);
    -moz-transform: translateX(-20px);
    transform: translateX(-20px);
}
.brackets ul li a:hover::before,
.brackets ul li a:hover::after,
.brackets ul li a:focus::before,
.brackets ul li a:focus::after {
    opacity: 1;
    -webkit-transform: translateX(0px);
    -moz-transform: translateX(0px);
    transform: translateX(0px);
}

.brackets ul li button{
    color:#8e8e8e;
    font-size: 1.0em;
    font-weight: bolder;
}
.brackets ul li button::before,
.brackets ul li button::after {
    display: inline-block;
    opacity: 0;
    -webkit-transition: -webkit-transform 0.3s, opacity 0.2s;
    -moz-transition: -moz-transform 0.3s, opacity 0.2s;
    transition: transform 0.3s, opacity 0.2s;
}
.brackets ul li button::before {
    margin-right: 10px;
    content: '[';
    -webkit-transform: translateX(20px);
    -moz-transform: translateX(20px);
    transform: translateX(20px);
}
.brackets ul li button::after {
    margin-left: 10px;
    content: ']';
    -webkit-transform: translateX(-20px);
    -moz-transform: translateX(-20px);
    transform: translateX(-20px);
}
.brackets ul li button:hover::before,
.brackets ul li button:hover::after,
.brackets ul li button:focus::before,
.brackets ul li button:focus::after {
    opacity: 1;
    -webkit-transform: translateX(0px);
    -moz-transform: translateX(0px);
    transform: translateX(0px);
}
/* Brackets effect */

/* Blur effect */
.blur-background {
    filter: blur(5px); /* O valor 5px controla a intensidade do desfoque, ajuste conforme necessário */
    transition: filter 0.5s; /* Adicione uma transição suave ao filtro */
}
/* Blur effect */


.mt-6 {
    margin-top: 150px;
}
.mt-middle {
    margin-top: 330px;
}
.mb-6 {
    margin-bottom: 150px;
}

.mb-main  {
    margin-bottom: 220px;
}

.loading {
    background: rgba(0, 0, 0, 0.6);
    position: fixed;
    z-index: 99999;
    width: 100%;
    height: 100%;
}

.vdc-icon { 
    padding: .5rem 1rem; 
    color:#dad5d5;
}
.vdc-text {
    color:#dad5d5;
}

/* Cor de fundo para a página ativa */
.pagination .page-item.active .page-link {
    background-color: #dad5d5;
    border-color: #dad5d5;
    color: #000; /* Cor do texto ativo, ajuste conforme necessário */
}

/* Cor do ícone ativo, substitua pelo ícone real que você está usando */
.pagination .page-item.active .page-link i {
    color: #000; /* Cor do ícone ativo, ajuste conforme necessário */
}

/* Cor de fundo para os itens de página inativos (opcional) */
.pagination .page-item:not(.active) .page-link {
    background-color: #fff; /* Substitua pela cor desejada para os itens inativos */
    color: #000; /* Cor do texto nos itens inativos, ajuste conforme necessário */
}


#app iframe {
    width: 100%;
    height: 600px;
}

#clock {
    font-family: 'Orbitron', sans-serif;
}

/** Formatação das galerias de imagens */
.gallery img {
    width:250px;
    padding:5px;
    filter:grayscale(100%);
    transition:1s;
}
.gallery img:hover{
    filter: grayscale(0);
    transform: scale(1.1);
}