*{
    padding: 0;
    margin: 0;
    font-family: Arial, Helvetica, sans-serif;
    box-sizing: border-box;
    scroll-behavior: smooth;
}

body{
    width: 100%;
    height: 100vh;
    background-color: black;
    overflow-y: auto; 
}

nav{
    width: 100%;
    height: 10vh;
    position: relative; /* garante contexto de empilhamento */
    z-index: 9999; /* o nav inteiro vai ficar no topo */
}

.nav-container{
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.logo{
    color: white;
    position: absolute;
    top: 18px;
    left: 15px;
    font-size: 2rem;
    font-weight: bold;
}

.logo span{
    color: #1E90FF;
    text-shadow: 0 0 10px #1E90FF;
}

.hamburg,
.cancel{
    cursor: pointer;
    position: absolute;
    right: 15px;
    top: 10px;
    color: white;
    display: none;
    font-size: clamp(2.5rem, 0.5rem + 5vw, 3rem);

}

.nav-container .links a{
    font-size: 1.2rem;
    color: white;
    margin: 0 20px;
    text-decoration: none;
    transition: 0.3s linear;
}

.nav-container .links a:hover{
    color: #1E90FF;
    border-bottom: 2px solid #1E90FF;
}

.dropdown{
     z-index: 99999; /* garante que o dropdown fique acima de outros elementos */
    position: absolute;
    left: 0;
    top: 0;
    transform: translateY(-500px);
    width: 100%;
    height: auto;
    backdrop-filter: blur(4px) brightness(40%);
    box-shadow: 0 0 20px black;
    transition: 0.3s linear;
}

.dropdown .links a{
    display: flex;
    color: white;
    text-decoration: none;
    padding: 15px 0;
    justify-content: center;
    align-items: center;
}

.dropdown .links a{
    justify-content: center;
    align-items: center;
    transition: 0.3s linear;
}

.dropdown .links a:hover{
    background-color: #1E90FF;
}

section{
width: 100%;
height: 90vh;
}

.main-container{ /* Starded Section home*/
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
}

.main-container .content{
    color: white;
    width: 40%;
    min-height: 100px;
    box-shadow: 0 0 120px 50px black;
}


.content h1{
    font-size: clamp(1rem, 1rem + 5vw, 1.8rem);
}

.content h1 span{
    font-weight: 700;
    text-shadow: 0 0 10px #1E90FF;
    color: #1E90FF;
}

.content .typewriter{
    font-size: clamp(1rem, 1rem + 5vw, 2.5rem);
    font-weight: 700;
    margin: 10px 0;
}
/*Finish the section home*/



.main-container-about-services{ /* Starded Section About me and Services*/
    background-color: #1C1C1C;
    width: 100%;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    flex-wrap: wrap;
    padding: 50px 20px;
    box-sizing: border-box;
    min-height: 100vh; /* garante que ocupe a altura total da tela */
}

.main-container-about-services .content-about-services{
    color: white;
    width: 40%;
    min-height: 300px; /* altura mínima igual para todas */
    margin: 10px;
    padding: 20px;
    box-sizing: border-box;
    border-radius: 12px;
}

.content-about-services h1{
    font-size: clamp(1rem, 1rem + 5vw, 1.8rem);
}

.content-about-services h1 span{
    font-weight: 700;
    text-shadow: 0 0 10px #1E90FF;
    color: #1E90FF;
}

.content-about-services .typewriter{
    font-size: clamp(1rem, 1rem + 5vw, 2.5rem);
    font-weight: 700;
    margin: 10px 0;
} 

.typewriter span{
    color: #1E90FF;
    text-shadow: 0 0  10px #1E90FF;
}

.content-about-services p{
    font-size: clamp(0.8rem, 0.5rem + 3vw, 1.1rem);
    margin: 20px 0;
}
/*Finish the section about me and Services*/


.typewriter span{
    color: #1E90FF;
    text-shadow: 0 0  10px #1E90FF;
}

.content p{
    font-size: clamp(0.8rem, 0.5rem + 3vw, 1.1rem);
    margin: 20px 0;
}

.social-links a{
    color: #1E90FF;
    margin: 0 15px;
    font-size: 1.8rem;
    transition: 0.3s linear;
    text-decoration: none; /* remove sublinhado */
    outline: none;         /* remove borda de foco */
    border: none;          /* remove qualquer borda */
}

.social-links i:hover{
    filter: drop-shadow(0 0 10px #1E90FF);
    scale: 1.3;
}

.content button{
    width: 50%;
    height: 6vh;
    margin: 30px;
    background-color: #1E90FF;
    color: white;
    border: none;
    outline: none;
    font-size: 120%;
    font-weight: 700;
    border-radius: 5px;
    transition: 0.2s linear;
}

.content button:hover{
    scale: 1.1;
    border: 2px solid #1E90FF;
    background-color: transparent;
    font-weight: 700;
    box-shadow: 0 0 40px 5px #1E90FF;
}

.main-container .image{
    width: 500px; /* largura padrão */
    height: 500px; /* altura igual à largura para manter círculo */
    border-radius: 50%; /* círculo perfeito */
    overflow: hidden;
    box-shadow: 0 0 50px #1E90FF;
    display: flex;
    justify-content: center;
    align-items: center;
}

.main-container .image img{
    width: 100%;
    height: 100%;
    object-fit: cover; /* mantém proporção da imagem e preenche o círculo */
}

/* Media Queries para telas médias */
@media (max-width:884px) {
    /* Seção principal */
    .main-container {
        display: flex;
        flex-direction: column-reverse;
    }

    .nav-container .links {
        display: none;
    }

    .hamburg,.cancel {
        display: block;
    }

    .main-container .content {
        width: 80%;
    }

    .main-container .image {
        width: 60%;
        height: 70%;
    }

    .content button {
        margin: 15px 25%;
    }

    /* Seção About Me / Services */
    .main-container-about-services {
        flex-direction: column; /* empilha verticalmente */
        align-items: center;
        padding: 30px 20px;
    }

    .main-container-about-services .content-about-services {
        width: 80%;
        min-height: 300px; /* altura mínima uniforme */
        margin: 10px 0;
        padding: 20px;
    }
}

/* Media Queries para telas pequenas */
@media (max-width:440px) {
    /* Seção principal */
    .main-container .image {
        width: 70%;
        height: 60%;
    }

    .main-container .content {
        width: 80%;
    }

    /* Seção About Me / Services */
    .main-container-about-services {
        flex-direction: column; /* garante empilhamento */
        align-items: center;
        padding: 20px 10px;
    }

    .main-container-about-services .content-about-services {
        width: 100%; /* ocupa toda a largura */
        min-height: 300px; /* altura mínima igual às outras seções */
        margin: 10px 0;
        padding: 15px;
    }
}



.Title{
    color: white;
    text-align: center;
    margin: 20px 0;
    font-size: clamp(1.5rem, 1rem + 5vw, 2.5rem);
    font-weight: 700;
}

.footer {
background-color: #1C1C1C; /* fundo cinza */
  color: #FFFFFF; /* texto branco */
  padding: 20px 0;
  text-align: center;
  font-family: 'Roboto', sans-serif;
  border-radius: 10px;
}

.footer .footer-content {
  max-width: 1000px;
  margin: 0 auto;
}

.footer a{
    color: #1E90FF;
    margin: 0 15px;
    font-size: 1.8rem;
    transition: 0.3s linear;
    text-decoration: none; /* remove sublinhado */
    outline: none;         /* remove borda de foco */
    border: none;          /* remove qualquer borda */
}

.socials i:hover{
    filter: drop-shadow(0 0 10px #1E90FF);
    scale: 1.3;
}


/* button fixed */
#backToTop { 
  position: fixed; /* fica sempre no mesmo lugar */
  bottom: 30px; /* distância do rodapé */
  right: 30px;  /* distância da lateral direita */
  z-index: 100; /* acima de outros elementos */
  background-color: #1E90FF; /* azul masculino */
  color: #fff;
  border: none;
  padding: 12px 16px;
  border-radius: 20%;
  font-size: 20px;
  cursor: pointer;
  box-shadow: 0 4px 6px rgba(0,0,0,0.3);
  transition: background-color 0.3s, transform 0.3s;
}

#backToTop:hover {
  background-color: #90E0EF; /* muda a cor no hover */
  transform: translateY(-2px); /* leve animação ao passar o mouse */
}

:root{
    --color-main: #0455BF;
    --color-bg:#FBFAFA;


    --color-sub-title:#0455BF;
    --color-third-title:#263140;
    --color-paragrafo: #828282;
    --color-nav-text:#36465C;

    --font-size-sub-title:26px;
    --font-size-third-title:23px;
    --font-size-paragrafo:20px;
}
.lista-skills{
    margin-top:20px;
    display:flex;
    flex-direction:column;
    gap:40px;
}
.box-skill{
    display:flex;
    flex-direction:row;
    gap:20px;
    align-items:center;
    justify-content: space-around;

    background-color: #fff;
    border-radius:12px;
    border-bottom:5px solid var(--color-main);

    padding:15px;
    width:100%;
    font-weight:bold;
    
    cursor:pointer;
}
.tag-skill{
    background-color:#0455bf3f;
    padding:4px;
    font-size:0.5em !important;
    border-radius:5px;
    color:var(--color-paragrafo);
}
.flex{
    display:flex;
    flex-direction:column;
    gap:15px;

    align-items:center;
    justify-content:center;
    text-align:center;
}

.sub-title-inicio{
    font-size: 1.5em;
    color:#263140bb;
}
.sub-title{
color: var(--color-sub-title);
font-size: var(--font-size-sub-title);
}


/* Section Skills */
.skills {
  width: 100%;
  background-color: black;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  padding: 60px 20px;
  box-sizing: border-box;
  min-height: auto;   /* <--- não força 100vh */
  height: auto;       /* <--- altura acompanha o conteúdo */
}

.skills .main-container {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 40px; /* espaço entre título e lista */
}

.skills .content {
    width: 100%;
    max-width: 900px; /* limita largura em telas grandes */
    text-align: center;
    color: white;
}

.lista-skills {
  margin: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* duas colunas */
  gap: 20px; /* espaço entre as caixas */
  width: 100%;
  max-width: 800px; /* limita largura total */
}

.box-skill {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 10px;

  background-color: #111; /* contraste com fundo preto */
  border-radius: 12px;
  border-bottom: 5px solid var(--color-main);

  padding: 20px;
  font-weight: bold;
  cursor: pointer;

  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.box-skill:hover {
  transform: translateY(-5px);
  box-shadow: 0 0 15px #1E90FF;
}

/* Responsivo para telas pequenas: volta para 1 coluna */
@media (max-width: 600px) {
  .lista-skills {
    grid-template-columns: 1fr;
  }
}

.my-skills-h1 {
    font-size: clamp(1.5rem, 1rem + 5vw, 2.5rem);
    font-weight: 700;
    margin-bottom: 20px;
}

.lista-contatos{
    margin-top:20px;
    display:flex;
    flex-direction:column;
    gap:40px;
}

.box-contato{
    display:flex;
    gap:20px;
    align-items:center;
    justify-content:center;

    background-color: #fff;
    border-radius:12px;

    padding:15px;
    font-weight:bold;
    cursor:pointer;

    width:400px;
}

.box-contato:hover{
    background: rgba(4, 85, 191, 0.178);
    transition: 0.5s;
    
}

.icon-contato{
    width:20%;
}

.box-contato > a{
    color:var(--color-paragrafo);
    display: flex;
    flex-direction:row-reverse;
    align-items:center;
    justify-content:center;
    gap:20px;
}
.sub-title-contato{
    font-weight: 700;
    margin-bottom: -10px;
    text-shadow: 0 0 10px #1E90FF;
    color: #1E90FF;
    margin-top: 10px;
}