#body1{
    background-color: hsl(0, 0%, 3%);
}

#body2{
    background-color: hsl(0, 0%, 3%);
}

#body3{
    background-color: hsl(0, 0%, 3%);
}

#body4{
    background-color: hsl(0, 0%, 3%);
}

input{
    width: 30vw;
}

button{
    font-size: 1.5rem;
}

.textW{
    font-size: 0.9rem;
    color: white;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    padding-left: 5%;
    margin: 2px 0;
    line-height: 1.3;
    word-wrap: break-word;
    overflow: visible;
}


.linkNav{
    font-size: 1rem;
    text-decoration: none;
    color: #e9e9e9;
    padding: 8px 12px;
    transition: color 0.2s ease, background-color 0.2s ease;
}

.menu{
    background: transparent;
    border-radius: 6px;
}

/* compact nav list when inside fixed header */
.topNavList{
    display: flex;
    gap: 18px;
    align-items: center;
    background: transparent;
}

/* Navigation visual — hover interactions will be handled by JavaScript for smoother control */
.topNavList .linkNav{
    padding:6px 8px;
    color: #e9e9e9;
}

/* Header integrated navigation layout */
.header-left{ display:flex; align-items:center; gap:14px; flex: 1; min-width: 0; }
.logo img{ height:36px; display:block; flex-shrink: 0; }
.titleWrap{ flex: 1; min-width: 0; }

/* hamburger for mobile (hidden on desktop) */
.hamburger{ display:none; background:none; border:none; color:#fff; font-size:1.3rem; cursor:pointer; flex-shrink: 0; }

@media (max-width: 880px){
    .topNavList{ display:none; position:absolute; top:90px; right:16px; flex-direction:column; gap:12px; background:#070707; padding:14px; border-radius:8px; box-shadow:0 8px 30px rgba(0,0,0,0.6); }
    .hamburger{ display:block; }
    .pageContainer{ padding-top: 20px; margin-top: 110px; }
    .textW{ font-size: 0.85rem; }
}

/* Site header / top navigation */
body{
    margin: 0;
    font-family: 'Inter', Verdana, Geneva, Tahoma, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

#first{
    background-color: hsl(0, 0%, 3%);
    height: auto;
    min-height: 64px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 28px;
    box-sizing: border-box;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    border-radius: 0;
}

#bv{
    font-size: 2rem;
    font-weight: 600;
}

#containerNav{
    background-color: hsl(0, 0%, 3%);
    margin-top: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
    padding: 18px 20px;
}

#name{
    font-size: 4rem;
    color: white;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    font-weight: bold;
    margin: 0%;
}

.heroSubtitle{
    font-size: 5rem;
    color: hsl(0, 0%, 85%);
    margin-bottom: 30px;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
}
#abtMe{
    font-size: 2em;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    color: white;
    background-color: hsl(0, 0%, 15%);
    height: fit-content;
    width: 50dvw;
    padding-top: 30px;
    padding-bottom: 30px;
    padding-left: 5%;
    padding-right: 5%;
    overflow: hidden;
}

#empresa{
    display: flexbox;
    float: left;
    color: white;
    background-color: hsl(0, 0%, 15%);
    height: fit-content;
    width: 50dvw;
    padding-left: 5%;
    padding-right: 5%;
    margin-top: 10px;
    margin-bottom: 30px;
    overflow: hidden;
}

#imgMe{
    display: flexbox;
    float: right;
    padding-left: 3%;
    padding-right: 3%;
    width: auto;
    height: 400px;
}

#logo{
    display: flexbox;
    float: inline-start;
    height: 300px;
    margin-right: 40px;
    width: auto;
    align-self: center;
}

#empresaText{
    font-size: 2em;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
}

#listFaculs{
    font-size: 1.8rem;
    font-style: italic;
}

#heroSection{
    background: rgba(8,8,8,0.45);
    backdrop-filter: blur(6px);
    color: white;
    padding: 28px;
    border-radius: 10px;
    display: flexbox;
    align-items: left;
}

/* Profile hero (used on About/Identidade) */
#profileHero{
    height: 700px;
    margin-top: 24px;
    background-image: linear-gradient(rgba(6,6,6,0.55), rgba(6,6,6,0.55)), url('Images/19 years.jpg');
    background-size: cover;
    background-position: center right;
    border-radius: 8px;
    display: flex;
    align-items: center;
    position: relative;
    overflow: hidden;
}

.hero-content {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    justify-content: space-between;
    padding: 0 28px;
    box-sizing: border-box;
}

.aboutOverlay {
    background: rgba(8,8,8,0.45);
    backdrop-filter: blur(6px);
    color: white;
    padding: 28px;
    border-radius: 10px;
    max-width: 500px;
}

/* Posiciona cards de forma explícita */
.aboutOverlay:nth-child(1),
.aboutOverlay:nth-child(3) {
    grid-column: 1; /* Coluna esquerda: "Quem Sou" e "Educação" */
    justify-self: start;
}

.aboutOverlay:nth-child(2),
.aboutOverlay:nth-child(4) {
    grid-column: 2; /* Coluna direita: "Hábitos" e "Foco" */
    justify-self: end;
}

.aboutOverlay h2{ 
    margin-top: 0; 
    color: #fff; 
}

/* Trajectory / timeline */
.trajectory {
    max-width: 1100px;
    margin: 28px auto;
    padding: 28px;
    background: linear-gradient(180deg, rgba(10,10,10,0.95), rgba(15,15,15,0.95));
    border-radius: 10px;
    color: #eaeaea;
}

.timeline {
    position: relative;
    margin-top: 24px;
    padding: 20px 0 10px 0;
}

.timeline:before{
    content: '';
    position: absolute;
    left: 40px;
    top: 10px;
    bottom: 10px;
    width: 4px;
    background: linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0.02));
    border-radius: 2px;
}

.timeline .event {
    position: relative;
    margin-left: 80px;
    padding: 18px 14px;
    background: rgba(255,255,255,0.03);
    border-radius: 8px;
    margin-bottom: 18px;
}

.timeline .event:before{
    content: '';
    position: absolute;
    left: -56px;
    top: 24px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 0 0 6px rgba(255,255,255,0.04);
}

/* Clean card styles for portfolio placeholders */
.placeholder-card{
    min-height: 160px;
    border-radius: 12px;
    background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
    display: flex;
    align-items: center;
    justify-content: center;
    color: hsl(0,0%,72%);
    font-size: 1rem;
    padding: 18px;
}

/* small adjustments for spacing under the fixed header */
.pageContainer{ padding-top: 20px; margin-top: 90px; }



.skillType{
    font-size: 3rem;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    color: white;
    align-items: center;
}

.descSkill{
    font-size: 1.8rem;
    font-style: italic;
}

.contBlock0{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 30vw;
    height: fit-content;
    padding-left: 100px;
    padding-right: 100px;
    border: none;
    border-radius: 30px;
    margin: 20px auto; /* Centraliza o bloco também */
    overflow: hidden;
}

.listPoint{
    color: white;
    font-size: 2rem;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
}

.skillLink{
    color: white;
    text-decoration: none;
}
.skillLink:hover{
    color: hsl(205, 100%, 62%);
    font-size: 2.1rem;
    text-decoration: none;
}

#workBox{
    display: flex;
    justify-content: space-evenly;
    height: fit-content;
    padding-top: 40px;
    padding-bottom: 40px;
    background-color: hsl(0, 0%, 15%);
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    box-shadow: 3px 3px 25px 25px hsl(0, 0%, 15%);
}



.contBlock{
    display: flex;
    flex-direction:row;
    flex-wrap:wrap;
    align-items: center;
    justify-content: space-evenly;
    width: 25vw;
    height: fit-content;
    background-color: hsl(0, 0%, 30%);
    border: 3px solid whitesmoke;
    margin: 20px;
    overflow: hidden;
} 

.hobbies{
    height: 15vh;
    width: 20vh;
}

.hobbieName{
    color: white;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    font-size: 2rem;
}

.listName{
    color: white;
    text-decoration: none;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    font-style: italic;
    font-size: 1.6rem;
}

.descSubT{
    color: white;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    font-size: 1.8rem;
}



.contBlock2{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    width: vw;
    background-color: hsl(0, 0%, 30%);
    padding: 15px;
    border: 3px solid whitesmoke;
    margin: 20px;
    overflow: hidden;
} 

.formT{
    font-size: 1.6rem;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    color: white;
}

.icons{
    height: 80px;
    margin-left: 20px;
}

#instaIndex{
    float: inline-start;
}

#linkedinIndex{
    float: left;
}

#form{
    width: 40vw;
    background-color: hsl(0, 0%, 35%);
    border: 3px solid whitesmoke;
    border-radius: 30px;
    margin-top: 25px;
    margin-left: 20px;
    padding: 40px;
    float: left;
}

#bodyHob{
    display: flex;
    justify-content: space-evenly;
    height: fit-content;
    padding-top: 40px;
    padding-bottom: 40px;
    background-color: hsl(0, 0%, 45%);
    border-radius: 30px;
    box-shadow: 3px 3px 25px hsl(0, 0%, 35%);
}

/* Seções de conteúdo */
.sectionContent {
    max-width: 1200px;
    height: fit-content;
    margin: 40px auto;
    padding: 30px;
    background-color: hsl(0, 0%, 45%);
    border-radius: 30px;
    box-shadow: 3px 3px 25px hsl(0, 0%, 35%);
    color: white;
    box-sizing: border-box;
}

/* Contato específico */
#contactContent {
    margin: 40px auto;
    padding: 0;
    background-color: transparent;
    box-shadow: none;
    box-sizing: border-box;
}

/* Hero image para Contato — full-width com cards sobrepostos */
#contactHero {
    height: 280px;
    margin-top: 80px;
    margin-left: calc(-50vw + 50%);
    margin-right: calc(-50vw + 50%);
    width: 100vw;
    background-image: linear-gradient(rgba(6,6,6,0.45), rgba(6,6,6,0.45)), url('Images/gaming.png');
    background-size: cover;
    background-position: center;
    border-radius: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    padding: 0;
}

/* Cards sobrepostos no hero — HORIZONTAL */
#contactHero #contactList {
    display: flex;
    gap: 20px;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: nowrap;
    padding: 0 30px;
    position: relative;
    z-index: 10;
    width: 100%;
    overflow-x: auto;
}

#contactHero .aboutOverlay {
    background: rgba(8,8,8,0.55);
    backdrop-filter: blur(8px);
    padding: 28px 36px;
    border-radius: 12px;
    width: 240px;
    min-width: 240px;
    text-align: center;
    transition: all 0.3s ease;
    flex: 0 0 240px;
    min-height: 160px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

#contactHero .aboutOverlay:hover {
    background: rgba(8,8,8,0.75);
    transform: translateY(-8px);
}

#contactHero .aboutOverlay a {
    font-size: 1.3rem;
    color: #e9e9e9;
    text-decoration: none;
    transition: color 0.3s ease;
}

#contactHero .aboutOverlay a:hover {
    color: hsl(160, 100%, 57%);
}

/* Remove generic #contactList styling - using #contactHero #contactList instead */

/* Imagem gaming com mesmo width que sectionContent */
#heroContact {
    width: 100%;
    height: 250px;
    object-fit: cover;
    display: block;
    border-radius: 10px;
}

#contactForm {
    max-width: 600px;
    margin: 40px auto;
    padding: 30px;
    background-color: hsl(0, 0%, 45%);
    border-radius: 30px;
    box-shadow: 3px 3px 25px hsl(0, 0%, 35%);
    box-sizing: border-box;
}

.sectionContent h2 {
    font-size: 3rem;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    text-align: center;
    margin-bottom: 40px;
    color: white;
}

/* Hero Section */
.heroContent {
    max-width: 1200px;
    margin: 40px auto;
    padding: 60px 30px;
    background-color: hsl(0, 0%, 45%);
    border-radius: 30px;
    box-shadow: 3px 3px 25px hsl(0, 0%, 35%);
    text-align: center;
}

.heroText h1 {
    font-size: 4rem;
    color: white;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    margin: 0 0 20px 0;
}

.heroSubtitle {
    font-size: 2rem;
    color: hsl(0, 0%, 85%);
    margin-bottom: 30px;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
}

.heroDescription {
    font-size: 1.3rem;
    color: white;
    max-width: 600px;
    margin: 0 auto 40px;
    line-height: 1.6;
}

.ctaButtons {
    display: flex;
    gap: 20px;
    justify-content: center;
    flex-wrap: wrap;
}

.btnPrimary, .btnSecondary {
    padding: 15px 40px;
    font-size: 1.2rem;
    border: none;
    border-radius: 25px;
    cursor: pointer;
    text-decoration: none;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    font-weight: bold;
    transition: all 0.3s ease;
    display: inline-block;
}

.btnPrimary {
    background-color: white;
    color: hsl(0, 0%, 0%);
}

.navCTA{
    color: hsl(0, 0%, 0%) !important;
}

.btnPrimary:hover {
    background-color: hsl(0, 0%, 90%);
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}

.btnSecondary {
    background-color: transparent;
    color: white;
    border: 2px solid white;
}

.btnSecondary:hover {
    background-color: white;
    color: hsl(143, 100%, 45%);
    transform: translateY(-2px);
}

.highlightsGrid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 30px;
    margin-top: 40px;
}

.highlightCard {
    background-color: hsl(0, 0%, 30%);
    padding: 30px;
    border-radius: 20px;
    text-align: center;
    transition: all 0.3s ease;
    border: 2px solid transparent;
}

.highlightCard:hover {
    transform: translateY(-10px);
    border-color: hsl(143, 100%, 45%);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
}

.highlightCard h3 {
    font-size: 1.8rem;
    margin: 15px 0;
    color: white;
}

.highlightCard p {
    font-size: 1rem;
    color: hsl(0, 0%, 80%);
    line-height: 1.5;
}

/* Services Container */
#servicesContainer {
    background-color: hsl(0, 0%, 0%);
    margin-top: 100px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 30px;
}

.serviceCard {
    background-color: hsl(0, 0%, 30%);
    padding: 30px;
    border-radius: 20px;
    transition: all 0.3s ease;
    border: 2px solid transparent;
}

.serviceCard:hover {
    transform: translateY(-10px);
    border-color: hsl(143, 100%, 45%);
    background-color: hsl(0, 0%, 35%);
}

.serviceIcon {
    font-size: 3rem;
    text-align: center;
    margin-bottom: 15px;
}

.serviceCard h3 {
    font-size: 1.8rem;
    color: white;
    margin: 15px 0;
    text-align: center;
}

.serviceCard p {
    color: hsl(0, 0%, 85%);
    font-size: 1rem;
    line-height: 1.5;
}

.serviceList {
    list-style: none;
    padding: 20px 0;
    color: white;
}

.serviceList li {
    padding: 8px 0;
    padding-left: 20px;
    position: relative;
}

.serviceList li:before {
    content: "✓";
    position: absolute;
    left: 0;
    color: hsl(160, 100%, 57%);
    font-weight: bold;
}

.serviceDescription {
    font-style: italic;
    color: hsl(0, 0%, 75%);
    margin-top: 15px;
    font-size: 0.95rem;
}

/* CTA Section */
.ctaSection {
    max-width: 900px;
    margin: 40px auto;
    padding: 50px 30px;
    background-color: hsl(0, 0%, 30%);
    border-radius: 30px;
    text-align: center;
    box-shadow: 3px 3px 25px hsl(0, 0%, 35%);
}

.ctaSection h2 {
    font-size: 2.5rem;
    color: white;
    margin-bottom: 15px;
}

.ctaSection p {
    font-size: 1.2rem;
    color: hsl(0, 0%, 85%);
    margin-bottom: 30px;
}

/* Footer */
#footerSection {
    background-color: hsl(0, 0%, 15%);
    color: hsl(0, 0%, 70%);
    text-align: center;
    padding: 30px;
    margin-top: 60px;
    border-radius: 30px 30px 0 0;
    font-size: 1rem;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
}

#footerSection p {
    margin: 10px 0;
}

/* Responsividade */
@media (max-width: 768px) {
    .textW {
        font-size: 1.5rem;
    }
    
    .linkNav {
        font-size: 1.5rem;
    }
    
    .menu {
        padding-left: 30px;
        padding-right: 30px;
    }
    
    #containerNav {
        flex-direction: column;
        height: auto;
        gap: 10px;
    }
    
    .heroText h1 {
        font-size: 2.5rem;
    }
    
    .heroSubtitle {
        font-size: 1.3rem;
    }
    
    .ctaButtons {
        flex-direction: column;
        align-items: center;
    }
    
    #profileBox {
        flex-direction: column;
    }
    
    #abtMe, #empresa {
        width: 100%;
    }
    
    #workBox, #bodyHob {
        flex-direction: column;
        align-items: center;
    }
    
    .contBlock0 {
        width: 90%;
        padding-left: 20px;
        padding-right: 20px;
    }
    
    input {
        width: 80vw;
    }
    
    #contactHero {
        height: 450px;
    }
    
    #contactHero #contactList {
        flex-wrap: wrap;
        gap: 20px;
        justify-content: center;
    }
    
    #contactHero .aboutOverlay {
        min-width: 200px;
        width: 200px;
        flex: 0 0 200px;
    }
    
    #heroContact {
        height: 180px;
    }
    
    .sectionContent {
        padding: 15px;
    }
}

@media (max-width: 480px) {
    .textW {
        font-size: 1.2rem;
        padding-left: 3%;
    }
    
    .linkNav {
        font-size: 1.1rem;
    }
    
    .menu {
        padding-left: 15px;
        padding-right: 15px;
    }
    
    .heroText h1 {
        font-size: 2rem;
    }
    
    .serviceCard h3 {
        font-size: 1.3rem;
    }
    
    .serviceIcon {
        font-size: 2.5rem;
    }
    
    #contactHero {
        height: 350px;
    }

    #contactHero #contactList {
        flex-direction: column;
        gap: 15px;
    }
    
    #contactHero .aboutOverlay {
        padding: 20px 28px;
        min-width: 150px;
        width: 220px;
    }
    
    #contactHero .icons {
        height: 60px;
    }
    
    #heroContact {
        height: 150px;
    }
}