/* Importa a fonte Open Sans do Google Fonts para usar no site */
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap');

/* Importa a fonte Audiowide do Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Audiowide&display=swap');

/* Seletor universal: aplica em TODOS os elementos da página */
*{
    margin: 0; /* Remove a margem padrão de todos os elementos */
    padding: 0; /* Remove o espaçamento interno padrão de todos os elementos */
    box-sizing: border-box; /* Faz width e height incluírem padding e border no cálculo */
    
}

/*####### MENU SUPERIOR ########*/

/* Aplica estilo ao corpo inteiro da página */
body{
    font-family: 'Open Sans', sans-serif; /* Define Open Sans como fonte principal do site */
}

/*######## BOTÃO DO MENU ########*/

#botao{
    position: fixed;
    top: 20px;
    left: 210px;
    z-index: 2000;
    background-color: white;
    color: rgb(26, 0, 121);
    border: none;
    border-radius: 8px;
    padding: 10px 14px;
    font-size: 22px;
    cursor: pointer;
    box-shadow: 0px 4px 10px rgba(0,0,0,0.2);
    transition: 0.4s;
}
#botao:hover{
    background-color: rgb(0, 88, 189);
}


/* ######## botão movido ##### */

.botao-movido{
    left: 80px;
}

/* Estiliza o header */
header{
    position: fixed; /* Faz o header "grudar" no topo quando rolar a página */
    left: 0;
    top: 0; /* Define que ele ficará colado no topo */
    z-index: 1000; /* Garante que o header fique por cima de outros elementos */
}

/* Estiliza o nav com id menu-h */
#menu-h{
    font-family: 'Open Sans', sans-serif; /* Define a fonte do menu */
    display: flex; /* Coloca os elementos filhos lado a lado */
    flex-direction: column; /* centraliza horizontalmente */
    align-items: flex-start; /* Alinha verticalmente os itens no centro */
    background-color: rgb(26, 0, 121); /* Define a cor de fundo azul escuro */
    width: 200px; /* Faz o menu ocupar toda a largura da tela */
    height: 100vh;
    box-shadow: 0px 10px 15px rgb(0, 2, 37);
    transition: width 2s ease;
    overflow: visible;
}
#menu-h.menu-fechado{
    width: 70px;
    overflow: hidden;
}

/* Caixa da logo */
.logo{
    width: 190px; /* Define a largura da área da logo */
    margin-left: 5px; /* Dá um espaço da logo até a borda esquerda */
    padding: 0px; /* Cria espaço interno ao redor da logo */
    position: relative;
    z-index: 2001;
    overflow: visible; /* MOstra qualquer parte da imagem que ultrapassar a caixa */
    margin-top: 80px;
    transition: 2s;
}


/* Logo quando o menu estiver fechado */
.menu-fechado .logo{
    width: 55px;
    margin-top: 80px;
    margin-left: 8px;
}

/* Imagem dentro da logo */
.logo img{
    width: 100%; /* Faz a imagem ocupar 100% da largura da caixa .logo */
    display: block; /* Remove espaços estranhos que imagens inline podem ter */
    transition: transform 2.8s ease, box-shadow 0.3s ease; /* Anima suavemente escala e sombra */
    transform: translateZ(0); 
    will-change: transform; /* Avisa ao navegador que transform será animado, melhorando desempenho */
    padding-left: 0;
}

/* Efeito quando o mouse passa sobre a imagem da logo */
.logo img:hover{
    /*box-shadow: 0px 0px 10px rgb(0, 11, 19); /* Cria sombra azul abaixo da imagem */
    filter: drop-shadow(0px 10px 15px rgba(108, 132, 238, 0.63));
    transform: scale(1.6); /* Aumenta a imagem levemente */
    cursor: pointer; /* Troca o cursor para a mãozinha */
}

/* Lista do menu */
#menu-h ul{
    list-style: none; /* Remove as bolinhas da lista */
    padding: 0; /* Dá um pequeno espaço interno */
    position: relative;
    top: 0;
    display: flex; /* Coloca os itens da lista em linha */
    flex-direction: column; /* menu em coluna */
    padding-right: 5px; /* Dá um espaço à direita do menu */
    gap: 20px; /* Cria distância entre os itens do menu */
    margin-top: 100px; /* Empurra a lista para a direita dentro do flex */
}

/* Itens da lista */
#menu-h ul li{
    padding: 0; /* Remove qualquer padding extra do item da lista */
}

/* Links do menu */
#menu-h ul li a{
    
    display: inline-block;
    color: aliceblue;
    padding: 30px;
    text-decoration: none;
    font-size: 15px;
    margin-left: 20px;
    white-space: nowrap;
    
}
/* Esconde textos quando menu fechar */
.menu-fechado ul li a{
    opacity: 0;
    transform: translateX(-120px);
    pointer-events: none;
    transition:
        opacity 1s ease,
        transform 1s ease;
}

#menu-h:not(.menu-fechado) ul li:nth-child(1) a{
    transition-delay: 0.6s;
}

#menu-h:not(.menu-fechado) ul li:nth-child(2) a{
    transition-delay: 0.7s;
}

#menu-h:not(.menu-fechado) ul li:nth-child(3) a{
    transition-delay: 0.8s;
}

/* Efeito quando o mouse passa em cima dos links do menu */
#menu-h ul li a:hover{
    background-color: rgba(11, 1, 66, 0.788); /* Muda o fundo do link no hover */
    box-shadow: 0px 4px 10px rgba(59, 170, 243, 0.616); /* Adiciona sombra azul */
    border-radius: 50px; /* Deixa os cantos bem arredondados */
    color: rgb(248, 230, 230); /* Muda um pouco a cor do texto */
}

/*######### MAIN ######## */

main{
    margin-left: 250px; /* mesma largura do menu */
    transition: 1s;
}

/* Quando o menu estiver fechado */
.main-expandido{
    margin-left: 100px;
}

/* Card principal da seção my */
.my{
    background-color: rgba(10, 1, 65, 0.027); /* Fundo bem suave e quase transparente */
    display: flex; /* Ativa flexbox */
    flex-direction: column; /* Coloca os elementos um embaixo do outro */
    align-items: center; /* Centraliza os itens horizontalmente */
    text-align: center; /* Centraliza o texto */
    border-radius: 20px; /* Arredonda os cantos da caixa */
    width: 600px; /* Define a largura do card */
    margin: 80px auto; /* Dá espaço em cima/baixo e centraliza horizontalmente */
    padding: 50px; /* Cria espaço interno entre borda e conteúdo */
    box-shadow: 0px 0px 80px rgba(0, 11, 56, 0.336); /* Cria uma sombra espalhada em volta do card */
    transition: 1s; /* Faz mudanças visuais acontecerem com animação suave */

}

/* Efeito quando o mouse passa sobre o card */
.my:hover{
    box-shadow: 0px 0px 20px rgb(2, 155, 160); /* Troca a sombra por um brilho azul mais forte */
    cursor: pointer; /* Mostra a mãozinha ao passar o mouse */
}

/* Imagem dentro do card */
.my img{    
    width: 500px; /* Define a largura da imagem */
    border-radius: 30px; /* Arredonda as bordas da imagem */
    transition: 1.5s; /* Faz a animação da imagem acontecer suavemente */
}

/* Efeito quando o mouse passa na imagem do card */
.my img:hover{
    box-shadow: 0px 4px 10px rgba(1, 46, 77, 0.733); /* Adiciona sombra escura azulada na imagem */
    
}

/* Título dentro do card */
.my h1{
    margin-top: 20px; /* Cria espaço acima do título */
    font-size: 32px; /* Define o tamanho da fonte do nome */
}

/* Parágrafo dentro do card */
.my p{
    font-size: 18px; /* Define o tamanho da fonte do texto */
    color: #555; /* Define uma cor cinza escura */
}
.btn-whats {
    margin-top: 25px;
    padding: 12px 25px;
    background-color: #25D366;
    color: white;
    font-size: 18px;
    text-decoration: none;
    border-radius: 10px;
    transition: 0.3s;
}

.btn-whats:hover{
    background-color: #0d9744de;
    transform: scale(1.05);
    box-shadow:  0px 0px 20px rgba(1, 78, 36, 0.719);
}