.text-roxo{
    color: rgba(205 201 201,1);
}

/*=======SECTION 1=================================================================== */
:root {
    --bg-black: #0d0d0d;
    --text-white: #ffffff;
}

/* Ativa a rolagem suave no navegador inteiro */
html {
    scroll-behavior: smooth;
    overflow-x: hidden; /* Evita rolagem lateral por elementos flutuantes */
}

body {
    margin: 0;
    padding: 0;
    background-color: var(--bg-black);
    font-family: 'Inter', sans-serif;
    color: white;
 
}

/* --- SEÇÃO HERO --- */
.hero-section {
    height: 100vh;
    width: 100%;
    position: relative;
    background-color: var(--bg-black);
    /*background-image: url(../img/chat\ horizontal\ .png);*/
}

/* Título com fonte ultra-bold e responsiva */
.main-title {
    font-size: clamp(4rem, 9vw, 9rem); /* Ajusta entre 4rem e 15rem dependendo da tela */
    font-weight: 900;
    letter-spacing: -0.05em;
    margin: 0;
    line-height: 1;
    opacity: 0.8;
}

/* Botão Start Presentation */
.btn-start {
    /*background-color: var(--text-white);*/
    color: #ffffff;
    text-decoration: none;
    padding: 12px 30px;
    border-radius: 50px;
    font-weight: 700;
    font-size: 1.1rem;
    display: inline-block;
    transition: 0.3s;
}

.btn-start:hover {
    background-color: #e0e0e0;
    transform: scale(1.05);
}

.site-url {
    font-size: 1rem;
    opacity: 0.8;
    margin-left: 15px;
}

/* --- ELEMENTOS GRÁFICOS (CÍRCULOS) --- */
.mask-circle {
    position: absolute;
    border-radius: 50%;
    background-size: cover;
    background-position: center;
    border: 1px solid rgba(255,255,255,0.05);
}

/* Círculo Superior Esquerdo (Nuvem) */
.top-left {
    width: 35vw;
    height: 35vw;
    top: -10vw;
    left: -10vw;
    background-image: url(''); /* Placeholder Nuvem */
    filter: grayscale(1);
}

/* Círculo Inferior Direito (Nuvem) */
.bottom-right {
    width: 40vw;
    height: 40vw;
    bottom: -15vw;
    right: -5vw;
    background-image: url(''); /* Placeholder Nuvem */
    filter: grayscale(1);
}

/* Círculo Escuro Decorativo */
.middle-right {
    position: absolute;
    width: 25vw;
    height: 25vw;
    background: rgba(205, 197, 191, 0.1);	
    border-radius: 50%;
    top: 20%;
    right: 5%;
    z-index: 1;
}

.bg-dark{
    background: rgba(205, 197, 191, 0.1)!important;
}

/* --- RESPONSIVIDADE (BREAKPOINTS) --- */

@media (max-width: 768px) {
    .navbar-nav {
        background: rgba(0,0,0,0.9);
        padding: 20px;
        border-radius: 10px;
    }
    
    .site-url {
        display: block;
        margin: 10px 0 0 0;
        text-align: center;
    }

    /* Ajuste dos círculos no mobile para não poluir */
    .top-left { width: 60vw; height: 60vw; top: -20vw; left: -20vw; }
    .bottom-right { width: 70vw; height: 70vw; }
}
/*=======SECTION 1=============================================================== */

/*=========SECTION 2=============================================================*/

:root {
    --bg-color-about: #0d0d0d;
    --text-white: #ffffff;
    --text-gray: #b0b0b0;
    --line-color: rgba(255, 255, 255, 0.2);
}

/* --- SEÇÃO ABOUT --- */
.about-section {
    min-height: 100vh; /* Altura total da tela para o conteúdo */
    background-color: var(--bg-color-about);
}

.header-liceria {
    font-size: 1.2rem;
    font-weight: 500;
    letter-spacing: 1px;
}

.about-title {
    font-family: 'Bebas Neue', sans-serif;
    font-size: clamp(5rem, 5vw, 5rem); /* Fluido: min, pref, max */
    line-height: 0.9;
    letter-spacing: -2px;
}

.intro-block {
    max-width: 500px; /* Evita que o texto fique muito longo e quebre o layout */
}

.intro-title {
    font-weight: 700;
    font-size: 1.4rem;
    margin-bottom: 1rem;
}

.intro-text {
    font-size: 1.1rem;
    line-height: 1.6;
    text-align: justify;
}

/* --- COLUNA DA FOTO --- */
.image-wrapper {
    position: relative;
    z-index: 10;
}

.about-photo {
    border-radius: 30px; /* Cantos arredondados como na imagem */
    width: 90%; /* Ajuste fino do tamanho na tela */
    height: auto;
    object-fit: cover;
    display: block;
}

/* --- ELEMENTOS GRÁFICOS (LINHAS E CÍRCULOS) --- */
.line-graphic {
    position: absolute;
    border: 1px solid var(--line-color);
    border-radius: 50%;
    z-index: 1;
}

.background-circle-about {
    position: absolute;
    background-color: rgba(205, 197, 191, 0.1); /* Círculo transparente */
    border-radius: 50%;
    z-index: 0;
}

/* Linha Superior Esquerda */
.top-left-line {
    width: 60vw;
    height: 60vw;
    top: -20vw;
    left: -20vw;
}

/* Linha Inferior Direita */
.bottom-right-line {
    width: 40vw;
    height: 40vw;
    bottom: -15vw;
    right: -10vw;
}

/* Círculo Transparente Superior Direito */
.top-right-circle {
    width: 25vw;
    height: 25vw;
    top: 5%;
    right: 5%;
}

/* Círculo Escuro Decorativo Inferior Esquerdo (atrás do texto) */
.bottom-left-circle-large {
    width: 60vw;
    height: 60vw;
    bottom: -10%;
    left: -10%;
    background-color: rgba(255, 255, 255, 0.02);
}

/* --- RESPONSIVIDADE (BREAKPOINTS) --- */

/* Telas Médias/Grandes (Ajustes finos para o layout de colunas) */
@media (min-width: 992px) {
    .text-col {
        padding-right: 5vw;
    }
}

/* Telas Pequenas (Mobile) */
@media (max-width: 991px) {
    .about-section {
        text-align: center; /* Centraliza tudo no celular */
        padding-top: 10vh !important;
        min-height: auto;
    }
    
    .intro-block {
        max-width: 100%;
        margin-left: auto;
        margin-right: auto;
    }

    .img-col {
        margin-top: 5rem; /* Dá espaço entre texto e foto */
    }

    .about-photo {
        width: 100%; /* Foto ocupa a largura total no mobile */
    }

    /* Reduz o tamanho das linhas decorativas no mobile */
    .line-graphic {
        width: 100vw;
        height: 100vw;
        top: -10vh;
        left: -10vh;
    }
}

/*=========SECTION 2=============================================================*/

/*=======SECTION 3================================================================*/

/* --- CONFIGURAÇÕES DA SEÇÃO 3 --- */
.details-section {
    background-color: #0d0d0d;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;

}

.grayscale {
    filter: grayscale(100%);
    transition: filter 0.4s ease;
}

.grayscale:hover {
    filter: grayscale(0%);
}

.section-title-big {
    font-family: 'Bebas Neue', sans-serif;
    font-size: clamp(4rem, 12vw, 8rem);
    color: white;
    margin: 0;
    line-height: 1;
}

.text-sobremim{
    text-align: justify;
}

/* Ajuste de altura das imagens para manter a proporção da foto */
.small-img img {
    height: 300px;
    width: 100%;
    object-fit: cover;
}

.large-img img {
    height: 400px;
    width: 100%;
    object-fit: cover;
}

/* --- ELEMENTOS DE DESIGN (LINHAS E CURVAS) --- */
.top-left-curve {
    position: absolute;
    width: 50vw;
    height: 50vw;
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 50%;
    top: -25vw;
    left: -10vw;
}

.bottom-right-curve {
    position: absolute;
    width: 30vw;
    height: 30vw;
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 50%;
    bottom: -15vw;
    right: -5vw;
}

.bg-circle-detail {
    position: absolute;
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, rgba(255,255,255,0.03) 0%, transparent 70%);
    bottom: 10%;
    right: -100px;
    border-radius: 50%;
}

/* --- RESPONSIVIDADE (BREAKPOINTS) --- */

@media (max-width: 991px) {
    .large-img img, .small-img img {
        height: 250px; /* Reduz altura em tablets */
    }
}

@media (max-width: 767px) {
    .details-section {
        padding: 80px 0;
    }
    
    .section-title-big {
        font-size: 5rem;
        text-align: center;
        margin-bottom: 30px;
    }

    .content-box {
        text-align: center;
    }

    .small-img img, .large-img img {
        height: auto;
        aspect-ratio: 16/9;
    }
}
/*=======SECTION 3================================================================*/

/*========SECTION 4================================================================*/

/* --- CONFIGURAÇÕES DA SEÇÃO 4 --- */
.education-section {
    background-color: #0d0d0d;
    min-height: 100vh;
    display: flex;
    align-items: center;
    
}

.education-main-title {
    font-family: 'Bebas Neue', sans-serif;
    font-size: clamp(3.5rem, 8vw, 7rem);
    color: white;
    line-height: 0.9;
}

.grayscale-img {
    filter: grayscale(100%);
    width: 100%;
    aspect-ratio: 4/5; /* Mantém as fotos verticais e iguais */
    object-fit: cover;
}

/* Linha conectora entre nome e ano */
.edu-line {
    height: 1px;
    background-color: rgba(255, 255, 255, 0.4);
}

.edu-year {
    font-size: 1.5rem;
    color: white;
}

/* --- ELEMENTOS GRÁFICOS --- */
.top-left-curve-alt {
    position: absolute;
    width: 60vw;
    height: 60vw;
    border-right: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    top: -30vw;
    left: -20vw;
    z-index: 1;
}

.bg-circle-dark-right {
    position: absolute;
    width: 50vw;
    height: 50vw;
    background-color: rgba(255, 255, 255, 0.02);
    border-radius: 50%;
    right: -10vw;
    top: 10%;
    z-index: 1;
}

.bottom-right-curve-small {
    position: absolute;
    width: 30vw;
    height: 30vw;
    /*background-color: rgba(138,43,226,1);*/
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    bottom: -15vw;
    right: -5vw;
    z-index: 1;
}

/* --- RESPONSIVIDADE --- */

@media (max-width: 991px) {
    .education-section {
        padding: 100px 0;
    }
    
    .education-main-title {
        text-align: center;
        font-size: 4.5rem;
    }

    .edu-year {
        font-size: 1.2rem;
    }
}

@media (max-width: 576px) {
    .edu-line {
        display: none; /* Remove a linha no celular para não amontoar */
    }
    
    .edu-item {
        text-align: center;
    }
    
    .edu-item .d-flex {
        flex-direction: column;
        gap: 10px;
    }
}

/*========SECTION 4================================================================*/

/*=========SECTION 5================================================================*/

/* --- CONFIGURAÇÕES DA SEÇÃO 5 --- */
.skills-section {
    background-color: #0d0d0d;
    min-height: 100vh;
    display: flex;
    align-items: center;
   
}

.skills-main-title {
    font-family: 'Bebas Neue', sans-serif;
    font-size: clamp(4rem, 10vw, 8rem);
    color: white;
    letter-spacing: 2px;
}

.grayscale-skill {
    filter: grayscale(100%);
    width: 100%;
    height: 350px; /* Altura fixa para manter o padrão da foto */
    object-fit: cover;
    transition: 0.5s ease;
}

.skill-card:hover .grayscale-skill {
    filter: grayscale(0%);
    transform: scale(1.02);
}

/* Estilo do Ícone Circular */
.skill-icon {
    position: absolute;
    bottom: -25px; /* Metade para fora da imagem */
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 60px;
    background-color: white;
    color: black;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 10px 20px rgba(0,0,0,0.5);
    z-index: 10;
}

/* --- ELEMENTOS DE DESIGN --- */
.top-left-curve-skills {
    position: absolute;
    width: 50vw;
    height: 50vw;
    border-left: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    top: -10vw;
    left: -10vw;
}

.bg-circle-left-dark {
    position: absolute;
    width: 40vw;
    height: 40vw;
    background-color: rgba(205, 197, 191, 0.1);
    border-radius: 50%;
    left: -15vw;
    top: 20%;
}

.bottom-right-curve-skills {
    position: absolute;
    width: 30vw;
    height: 30vw;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    bottom: -10vw;
    right: -5vw;
}

.text-hardkill{
    text-align: justify;
}

/* --- RESPONSIVIDADE (BREAKPOINTS) --- */

@media (max-width: 991px) {
    .grayscale-skill {
        height: 250px;
    }
}

@media (max-width: 767px) {
    .skills-main-title {
        font-size: 3.5rem;
    }
    
    .skill-card {
        margin-bottom: 30px;
    }
    
    .skills-section {
        padding: 80px 0;
    }
}

/*========SECTION 5================================================================*/

/*=========SECTION 6================================================================*/
/* --- CONFIGURAÇÕES DA SEÇÃO 6 --- */
.experience-section {
    background-color: #0d0d0d;
    min-height: 100vh;
    display: flex;
    align-items: center;
}

.experience-main-title {
    font-family: 'Bebas Neue', sans-serif;
    font-size: clamp(3.5rem, 8vw, 6.5rem);
    color: white;
    line-height: 1;
    letter-spacing: -1px;
}

.header-liceria {
    color: white;
    font-weight: 700;
    letter-spacing: 2px;
}

.grayscale-exp {
    filter: grayscale(100%);
    width: 100%;
    height: 600px; /* Altura imponente conforme a imagem */
    object-fit: cover;
    border-radius: 40px; /* Cantos bem arredondados */
    transition: 0.6s ease;
}

.experience-img-wrapper:hover .grayscale-exp {
    filter: grayscale(0%);
}

/* Círculo decorativo que "vaza" atrás da foto */
.floating-dark-circle {
    position: absolute;
    width: 300px;
    height: 300px;
    background-color: rgba(255, 255, 255, 0.05);
    border-radius: 50%;
    top: -50px;
    right: -50px;
    z-index: -1;
}

/* --- ELEMENTOS DE DESIGN --- */
.top-curve-experience {
    position: absolute;
    width: 70vw;
    height: 70vw;
    border-left: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    top: -35vw;
    left: -10vw;
}

.bg-circle-left-faint {
    position: absolute;
    width: 45vw;
    height: 45vw;
    background-color: rgba(255, 255, 255, 0.02);
    border-radius: 50%;
    left: -15vw;
    bottom: 10%;
}

.middle-right-curve {
    position: absolute;
    width: 30vw;
    height: 30vw;
    /*background-color: rgba(138,43,226,1);*/
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    top: 50%;
    right: -15vw;
}

.text-experiencia{
    text-align: justify;
}
/* --- RESPONSIVIDADE (BREAKPOINTS) --- */

@media (max-width: 991px) {
    .experience-section {
        padding: 80px 0;
    }
    
    .experience-main-title {
        font-size: 4rem;
        text-align: center;
    }

    .header-liceria {
        text-align: center;
    }

    .grayscale-exp {
        height: 400px;
        margin-top: 30px;
    }

    .exp-item {
        text-align: center;
    }
}

@media (max-width: 576px) {
    .experience-main-title {
        font-size: 3rem;
    }
    
    .floating-dark-circle {
        display: none; /* Simplifica o mobile */
    }
}

.shopee{
    color: orange !important;
}
/*=========SECTION 6================================================================*/

/*=========SECTION 7================================================================*/
.projects-section {
    background-color: #0d0d0d;
    min-height: 100vh;
}

.section-main-title {
    font-family: 'Bebas Neue', sans-serif;
    font-size: clamp(3rem, 7vw, 6rem);
    color: white;
    line-height: 0.9;
}

.project-img-container {
    width: 100%;
    border-radius: 40px;
    overflow: hidden;
}

.grayscale-img {
    filter: grayscale(100%);
    width: 100%;
    height: 350px; /* Altura fixa para manter o estilo panorama */
    object-fit: cover;
    transition: 0.5s ease;
}

.project-img-container:hover .grayscale-img {
    filter: grayscale(0%);
    transform: scale(1.02);
}

.link-icon-circle {
    width: 40px;
    height: 40px;
    background-color: white;
    color: black;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.text-projeto{
    text-align: justify;
}
/* Responsividade: No mobile, a imagem diminui para não ocupar espaço demais */
@media (max-width: 991px) {
    .grayscale-img {
        height: 250px;
    }
    .project-info-box {
        text-align: center;
        margin-top: 20px;
    }
    .project-info-box .d-flex {
        justify-content: center;
    }
}
/*=========SECTION 7================================================================*/

/*=========SECTION 8================================================================*/
/* --- CONFIGURAÇÕES DA SEÇÃO 8 --- */
.strategy-section {
    background-color: #0d0d0d;
    min-height: 100vh;
    display: flex;
    align-items: center;
}

.strategy-main-title {
    font-family: 'Bebas Neue', sans-serif;
    font-size: clamp(3rem, 7vw, 6rem);
    color: white;
    line-height: 0.9;
    max-width: 500px;
}

.grayscale-strategy {
    filter: grayscale(100%);
    border-radius: 30px;
    height: 400px;
    width: 100%;
    object-fit: cover;
}

/* Ícone Circular Branco */
.strategy-icon-circle {
    min-width: 65px;
    height: 65px;
    background-color: white;
    color: black;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0; /* Impede o círculo de achatar no flexbox */
}

/* --- ELEMENTOS DE DESIGN --- */
.top-left-curve-8 {
    position: absolute;
    width: 50vw;
    height: 50vw;
    border-left: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    top: -10vw;
    left: -10vw;
}

.bg-circle-right-large {
    position: absolute;
    width: 60vw;
    height: 60vw;
    background-color: rgba(205, 197, 191, 0.1);
    border-radius: 50%;
    right: -20vw;
    bottom: -10vw;
    z-index: 1;
}

.text-free{
    text-align: justify;
}

/* --- RESPONSIVIDADE (BREAKPOINTS) --- */

@media (max-width: 991px) {
    .strategy-section {
        padding: 80px 0;
    }
    
    .strategy-main-title {
        text-align: center;
        margin: 0 auto 40px auto;
    }

    .header-liceria {
        text-align: center;
    }

    .strategy-item {
        flex-direction: column;
        align-items: center !important;
        text-align: center;
    }

    .strategy-icon-circle {
        margin-right: 0 !important;
        margin-bottom: 20px;
    }

    .grayscale-strategy {
        height: 300px;
    }
}
/*=========SECTION 8================================================================*/

/*=========SECTION 9================================================================*/
/* --- CONFIGURAÇÕES DA SEÇÃO 9 --- */
.contact-section {
    background-color: #0d0d0d;
    min-height: 80vh;
    display: flex;
    align-items: center;
}

.contact-main-title {
    font-family: 'Bebas Neue', sans-serif;
    font-size: clamp(3rem, 8vw, 6.5rem);
    color: white;
}

/* Banner de Imagem */
.contact-image-wrapper {
    width: 100%;
    height: 600px;
    /*overflow: hidden;*/
    border-radius: 40px;
}

.grayscale-contact {
    filter: grayscale(100%);
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Card Branco Flutuante */
.contact-info-card {
    background-color: white;
    border-radius: 60px; /* Bordas ultra arredondadas como na imagem */
    padding: 30px 50px;
    width: 90%;
    position: absolute;
    bottom: -40px; /* Faz o card flutuar para fora da imagem */
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    justify-content: center;
    z-index: 10;
}

.contact-icon-black {
    width: 40px;
    height: 40px;
    background-color: transparent;
    color: black;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Elementos de Fundo */
.top-left-curve-9 {
    position: absolute;
    width: 50vw;
    height: 50vw;
    border-left: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    top: -10vw;
    left: -10vw;
}

.bg-circle-contact {
    position: absolute;
    width: 40vw;
    height: 40vw;
    background-color: rgba(255, 255, 255, 0.02);
    border-radius: 50%;
    right: -10vw;
    top: 10%;
}

/* --- RESPONSIVIDADE (BREAKPOINTS) --- */

@media (max-width: 991px) {
    .contact-info-card {
        padding: 40px 20px;
        bottom: -150px; /* Espaço para empilhar itens */
        border-radius: 30px;
    }

    .contact-section {
        padding-bottom: 200px !important; /* Compensa o card flutuante */
    }
}

@media (max-width: 767px) {
    .contact-main-title {
        font-size: 3rem;
    }
    
    .contact-image-wrapper {
        height: 250px;
    }

    .contact-info-card {
        width: 95%;
        border-radius: 20px;
    }
}
/*=========SECTION 9================================================================*/

/*=========SECTION 10================================================================*/
/* --- CONFIGURAÇÕES DA SEÇÃO 10 --- */
/*.thank-you-section {
    /*background-color: #0d0d0d;
    min-height: 100vh; /* Ocupa a tela inteira */
    /*width: 100%;
}*/

.thank-you-title {
    font-family: 'Bebas Neue', sans-serif;
    font-size: clamp(5rem, 20vw, 15rem); /* Tamanho massivo para impacto */
    color: white;
    line-height: 0.8;
    letter-spacing: -2px;
    margin: 0;
}

.thank-you-text {
    font-size: 1.1rem;
    line-height: 1.6;
    max-width: 700px;
    margin: 0 auto;
}

/* --- ELEMENTOS DE DESIGN (Consistência Visual) --- */
.top-left-curve-final {
    position: absolute;
    width: 60vw;
    height: 60vw;
    border-left: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    top: -20vw;
    left: -10vw;
}

.bg-circle-left-faint {
    position: absolute;
    width: 40vw;
    height: 40vw;
    background-color: rgba(255, 255, 255, 0.02);
    border-radius: 50%;
    left: -10vw;
    top: 10%;
}

.bg-circle-right-dark {
    position: absolute;
    width: 35vw;
    height: 35vw;
    background-color: rgba(205, 197, 191, 0.1);
    border-radius: 50%;
    right: 10%;
    top: 15%;
}

.bottom-right-curve-final {
    position: absolute;
    width: 40vw;
    height: 40vw;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    bottom: -15vw;
    right: -10vw;
}

/* --- RESPONSIVIDADE (BREAKPOINTS) --- */

@media (max-width: 991px) {
    .thank-you-title {
        font-size: 15vw;
    }
}

@media (max-width: 767px) {
    .thank-you-title {
        font-size: 5rem;
    }
    
    .thank-you-text {
        font-size: 1rem;
        padding: 0 15px;
    }
}
/*=========SECTION 10================================================================*/

.btn-light {
    background-color: rgba(138,43,226,1)!important;
    color: white;
    padding: 10px 20px;
    border-radius: 5px;
    text-decoration: none;
    transition: 0.3s;
}

.btn-download:hover {
    background-color: #0056b3;
}