* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}
body {
    background-color: #454545;
}

header {
    width: 100%;
    height: 300px;
    animation: slideDown 1.5s forwards;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    background-color: transparent;
    position: relative;
    z-index: 0;
    background-color: #333;
}


@keyframes slideDown {
    from { height: 0; }
    to { height: 300px; }
}


.logo {
    width: 140px;
    opacity: 0;
    position: absolute;
    bottom: 20px;
    animation: logoUp 2s forwards 1.5s;
    object-fit: cover;
    font-weight: 700;
}

@keyframes logoUp {
    from { bottom: -150px; opacity: 0; }
    to { bottom: 100px; opacity: 1; }
}

.slogan {
    font-family: "league spartan", sans-serif;
     text-transform: uppercase;
     font-size: 28px;
     color: white;
     opacity: 0;
     position: absolute;
     bottom: 50px;
     animation: sloganUp 2s forwards 3s;
     font-weight: 700;
 }
 
 @keyframes sloganUp {
     from { opacity: 0; }
     to { opacity: 1; }
 }





/* MENU DE NAVEGAÇÃO */
header nav {
    font-family: "league spartan", sans-serif;
     width: 100%;
     display: flex;
     justify-content: center;
     padding: 10px 50px;
     position: absolute;
     top: 20px;
     gap: 500px;
 }
 
 header nav ul {
     list-style: none;
     display: flex;
     gap: 40px;
     opacity: 0;
     animation: fadeInMenu 2s forwards 0.5s;
 }
 

a {
    text-decoration: none;
}



/* Estilo para os itens do carrossel */
.owl-carousel .item {
    position: relative;
    overflow: hidden;
    transition: all 0.3s ease-in-out;
}

/* Cria uma cobertura preta no hover */
.owl-carousel .item::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0); /* Transparente inicialmente */
    z-index: 1; /* Posição atrás do texto */
    transition: background-color 0.3s ease-in-out;
    pointer-events: none; /* Certifica que o hover não seja bloqueado */
}

/* Quando o mouse passa por cima, a cor de fundo fica preta */
.owl-carousel .item:hover::before {
    background-color: rgba(0, 0, 0, 0.384);
    filter: blur(50px); /* Cor preta sólida com um pouco de transparência */
}

/* O conteúdo do item (texto), que ficará sobre a cobertura preta */
.owl-carousel .item .content {
    position: relative;
    z-index: 2; /* Certifique-se de que o texto esteja acima da cobertura preta */
    transition: opacity 0.3s ease-in-out;
}


 header nav ul li {
     color: white;
     font-size: 16px;
     white-space: nowrap;
     font-weight: 500;
 }

 header nav ul li a {
    color: #e0e0e0; /* Cor inicial */
    transition: color 0.5s ease; /* Adiciona uma transição suave de 0.5 segundos na mudança de cor */
}

header nav ul li a:hover {
    color: #089eb7; /* Cor ao passar o mouse */
}

 header a {
     font-weight: 500;
     color: white;
     font-size: 16px;
     text-decoration: none;
     text-transform: uppercase;
 }
 
 @keyframes fadeInMenu {
     from { opacity: 0; }
     to { opacity: 1; }
 }
 
 @media (max-width: 910px) {
    header nav { gap: 300px; }
 }
 
 @media (max-width: 695px) {
    header nav { display: none; }
 }
 
 @media (max-width: 695px) {
     .hamburger-menu {
         display: block !important;
         position: absolute;
         top: 20px;
         right: 20px;
         font-size: 30px;
         cursor: pointer;
         z-index: 3000;
     }
 }


/* Ícone de hambúrguer oculto inicialmente */
.menu-hamburguer {
    display: block; /* Mostra o ícone para telas pequenas */
    font-size: 30px;
    cursor: pointer;
    color: #089eb7;
    position: absolute;
    z-index: 9999; /* Fica sempre à frente de todos os elementos */
    top: 20px;
    right: 20px;
    opacity: 0; /* Começa invisível */
}

/* Keyframe para fazer o ícone aparecer gradativamente */
@keyframes fadeInHamburger {
    0% {
        opacity: 0; /* Começa invisível */
    }
    100% {
        opacity: 1; /* Aparece completamente */
    }
}

/* Quando a tela for menor ou igual a 694px */
@media (max-width: 694px) {
    .menu-hamburguer {
        animation: fadeInHamburger 1.0s ease forwards; /* Aplica a animação de opacidade */
    }


    nav ul {
        display: none; /* Esconde o menu padrão em telas pequenas */
    }

    nav ul.open {
        display: flex; /* Mostra o menu quando o ícone for clicado */
        flex-direction: column;
        position: absolute;
        top: 80px; /* Abaixo do ícone de hambúrguer */
        right: 20px;
        background-color: #333;
        z-index: 9998; /* Menu fica logo abaixo do ícone */
    }
}

/* Menu Lateral */
.menu-lateral {
    height: 100vh; 
    width: 0;
    position: fixed ;
    z-index: 9998; /* Um nível abaixo do ícone de hambúrguer */
    top: 0;
    right: 0;
    background-color: #333;
    overflow-x: hidden;
    transition: 0.5s;
    padding-top: 80px;
}

.menu-lateral a {
    font-family: "League Spartan", sans-serif;
    padding: 10px 15px;
    text-decoration: none;
    font-size: 16px;
    color: #fff;
    display: block;
    transition: 0.3s;
    text-transform: uppercase;
    text-align: right;
    margin-right: 7px;
    font-weight: 500;
}

.menu-lateral a:hover {
    background-color: #089eb7;
}

/* Overlay para o blur no fundo */
.overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 9997; /* Um nível abaixo do menu lateral */
    display: none;
    backdrop-filter: blur(5px); /* Aplicação de blur */
}


/* CAROUSEL 

.tela_preta {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #000000; /* Cor preta *
    z-index: 9999; /* Alta prioridade para cobrir todo o conteúdo *
    opacity: 1; /* Totalmente visível *
    transition: opacity 1s ease; /* Transição suave de 1 segundo *
}

/* Quando a classe esconder é adicionada, a tela some *
.tela_preta.esconder {
    opacity: 0; /* Invisível após 1 segundo *
    pointer-events: none; /* Remove interações com a tela preta 
}
*/


/* CAROUSEL */
.item {
    opacity: 0;
    transform: translateY(50px); /* Inicia o item mais abaixo */
    animation: slideUp 1s forwards; /* Duração da animação */
    position: relative;
    height: 500px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    display: flex;
    justify-content: flex-end;
    align-items: flex-end;
    padding: 20px;
    color: #e0e0e0;
    font-family: Arial, sans-serif;
}

@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(50px); /* Inicia a animação com o item mais abaixo */
    }
    to {
        opacity: 1;
        transform: translateY(0); /* O item volta para sua posição original */
    }
}

.item::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #089db746; /* Preto com 50% de opacidade */
    z-index: 1;
}

/* Animações para diferentes itens do carousel */
.item.first {
    animation-delay: 2.5s; /* O primeiro item aparece com um pequeno atraso */
}

.item.second {
    animation-delay: 3s;
}

.item.third {
    animation-delay: 3.5s;
}

.item.fourth {
    animation-delay: 4s;
}

.item.fifth {
    animation-delay: 4.5s;
}

/* CONTEÚDO DO CAROUSEL */
.content {
    position: relative;
    z-index: 2; /* Garantir que o conteúdo fique acima da capa preta */
    width: 100%;
    text-align: left;
    height: 110px;
}

.content h4 {
    background-color: #089eb7;
    color: rgb(230, 230, 230);
    padding-left: 35px;
    padding-top: 5px;
    padding-bottom: 3px;
    padding-right: 35px;
    margin: 0;
    font-size: 20px;
    display: inline-block;
   font-family: "league spartan", sans-serif;
    clip-path: polygon(8% 0, 100% 0, 92% 100%, 0 100%);
}

.content p {
   font-family: "league spartan", sans-serif;
    font-size: 20px;
    margin: 10px 0 0;
    color: rgb(230, 230, 230);
    text-shadow: 2px 2px 3px #000000;
    font-weight: 500;
}

/* IMAGENS DE FUNDO PARA CADA ITEM DO CAROUSEL */
.first {
    background-image: url('/images/server.jpg');
    background-position-x: 30%;
    background-position-y: 40%;
}

.second {
    background-image: url('/images/cabos.jpg');
    background-position-x: 70%;
}

.third {
    background-image: url('/images/nuvem.jpg');
}

.fourth {
    background-image: url('/images/backup.jpg');
}

.fifth {
    background-image: url('/images/csf-firewall.jpg');
}

.sixth {
    background-image: url('/images/hospedagem.png');
}

.owl-dots {
    opacity: 0; /* Inicia invisível */
    animation: fadeInDots 1s ease-in-out forwards; /* Animação de 1 segundo */
    animation-delay: 3s; /* Inicia após 3 segundos */
}

/* Keyframe para o fade-in das dots */
@keyframes fadeInDots {
    from {
        opacity: 0; /* Totalmente invisível */
    }
    to {
        opacity: 1; /* Totalmente visível */
    }
}

.bloco_sobre_inicial {
    background-color: #089eb7;
    padding: 20px;
    max-width: 1000px;
    margin: 0 auto;
    margin-top: 120px;
    font-family: "league spartan", sans-serif;
    font-size: 22px;
    font-weight: 500;
    color: white;
    margin-bottom: 120px;
    text-align: justify;
    border: none;
    opacity: 0; /* Começa invisível */
    transform: translateY(50px); /* Começa um pouco abaixo da posição normal */
    transition: opacity 1s ease-out, transform 1s ease-out; /* Animação suave */
}

.bloco_sobre_inicial.visible {
    opacity: 1; /* Torna visível */
    transform: translateY(0); /* Move para a posição original */
}









/* FUNDO BINÁRIO */
.binary-background {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    overflow: hidden;
}

.binary {
    position: absolute;
    font-size: 15px;
    color: rgba(203, 203, 203, 0.156);
    animation: fade 3s infinite ease-in-out;
}

@keyframes fade {
    0% { opacity: 0; }
    50% { opacity: 1; }
    100% { opacity: 0; }
}