/* RESET */

*{
box-sizing:border-box;
margin:0;
padding:0;
}


/* BODY */

body{

font-family: 'Segoe UI', sans-serif;

background: linear-gradient(
135deg,
#0f2027,
#203a43,
#2c5364
);

min-height:100vh;

color:white;

}



/* HEADER */

.header{

padding:15px;

}



/* NAV */

.nav-container{

background: rgba(255,255,255,0.1);

backdrop-filter: blur(10px);

border-radius:50px;

display:flex;

align-items:center;
justify-content:space-between;

padding:15px 25px;

max-width:1200px;

margin:auto;

width:95%;

box-shadow:0 10px 30px rgba(0,0,0,0.3);

}



/* LOGO */

.logo{

font-size:22px;

font-weight:bold;

color:white;
}
.logo span{
color:#a17ec9;
}
/* MENU */
.menu{
display:flex;
align-items:center;
}
.menu a{
margin:0 15px;
text-decoration:none;
color:white;
font-weight:500;
font-size:15px;
transition:0.3s;
}
.menu a:hover{
color:#a17ec9;
}
/* HAMBURGUER */

.hamburguer{

display:none;

font-size:28px;

cursor:pointer;

color:white;

}



/* HERO */

.hero{

padding:80px 20px;

text-align:center;

width:100%;

margin:auto;

}

.tag{

background:white;

color:black;

padding:6px 15px;

border-radius:20px;

font-size:13px;

display:inline-block;

}

.hero h1{

font-size:48px;

margin:20px 0;

line-height:1.2;

}

.hero p{

color:#eeeeee;

max-width:600px;

margin:auto;

font-size:16px;

}



/* BOTÃO */

.btn-hero{

margin-top:25px;

background: linear-gradient(45deg,#667eea,#764ba2);

color:white;

border:none;

padding:12px 30px;

border-radius:30px;

font-size:15px;

cursor:pointer;

transition:0.3s;

}

.btn-hero:hover{

transform:scale(1.1);

}

/* ================================= */

/* SOBRE - FUNDO */

/* ================================= */

.hero-bg{

min-height:100vh;

background:

linear-gradient(
rgba(0,0,0,0.6),
rgba(0,0,0,0.6)
),

url("img/fundo.jpg");

background-size:cover;

background-position:center;

display:flex;

align-items:center;

justify-content:center;

padding:20px;

}

/* CARD */

.hero-card{

background:white;

border-radius:30px;

padding:60px;

max-width:1100px;

width:100%;

box-shadow:

0 30px 60px rgba(0,0,0,0.4);

}

/* TEXTO */

.hero-card h1{

font-size:42px;

font-weight:bold;

color:#222;

}

.hero-card p{

color:#555;

margin:20px 0;

font-size:16px;

line-height:1.6;

}

/* IMAGEM PROFISSIONAL */

.hero-img{

width:100%;

max-width:480px;

height:550px;

object-fit:cover;

border-radius:25px;

box-shadow:0 30px 60px rgba(0,0,0,0.4);

transition:0.3s;

}

.hero-img:hover{

transform:scale(1.03);

}

/* CENTRALIZAR IMAGEM */
.col-md-6.text-center{
display:flex;
justify-content:center;
align-items:center;

}

/* ================================= */

/* MOBILE */

/* ================================= */

@media(max-width:768px){



.nav-container{

padding:12px 20px;

}



/* MENU MOBILE */

.menu{

display:none;

flex-direction:column;

background: rgba(0,0,0,0.9);

position:absolute;

top:70px;

right:20px;

padding:20px;

border-radius:10px;

}

.menu.active{

display:flex;

}

.menu a{

margin:10px 0;

}

.hamburguer{

display:block;

}



/* HERO MOBILE */

.hero{

padding:50px 20px;

}

.hero h1{

font-size:28px;

}

.hero p{

font-size:14px;

}



/* SOBRE CARD MOBILE */

.hero-card{

padding:30px;

text-align:center;

}



/* IMAGEM MOBILE */

.hero-img{

max-width:280px;

height:350px;

margin-top:20px;

}

}

/* CELULAR PEQUENO */

@media(max-width:480px){

.hero h1{

font-size:22px;

}

.hero p{

font-size:13px;

}

}
/*habilidades*/
.habilidades{

padding:80px 20px;
background:#000000;
text-align:center;

}


.titulo-habilidades{

color:white;
font-size:32px;
margin-bottom:50px;

}


/* CONTAINER */

.skills-container{

display:flex;
justify-content:center;
flex-wrap:wrap;
gap:30px;

}


/* CARD */

.skill{

width:140px;
height:140px;

background:#0c0c2c;

border-radius:15px;

display:flex;
flex-direction:column;

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

color:#00ff88;

font-size:40px;

box-shadow:0 0 15px rgba(8, 8, 8, 0.3);

transition:0.3s;

}


.skill span{

font-size:14px;
margin-top:10px;
color:white;

}


.skill:hover{

transform:translateY(-10px);

box-shadow:0 0 25px rgba(0,255,136,0.7);

}


/* ======================= */
/* CELULAR */
/* ======================= */

@media(max-width:768px){

.skills-container{

gap:15px;
justify-content:center;

}


.skill{

width:110px;
height:110px;

font-size:30px;

}


.skill span{

font-size:12px;

}

}


/* CELULAR PEQUENO */

@media(max-width:480px){

.skills-container{

gap:12px;

}


.skill{

width:95px;
height:95px;

font-size:26px;

}

}

/*habilidades*/
/*Minha Trajetória*/
.trajetoria{

padding:100px 20px;

background: linear-gradient(
135deg,
#0f2027,
#203a43,
#2c5364
);

color:white;

}


.titulo-trajetoria{

text-align:center;

font-size:38px;

margin-bottom:70px;

font-weight:bold;

}


/* GRID */

.timeline{

display:flex;

justify-content:center;

gap:80px;

position:relative;

}


/* LINHA CENTRAL */

.timeline::before{

content:"";

position:absolute;

width:4px;

height:100%;

background:#00ff88;

left:50%;

transform:translateX(-50%);

}


/* COLUNAS */

.coluna{

width:420px;

}


.coluna h3{

margin-bottom:30px;

font-size:26px;

color:#00ff88;

}


/* CARD */

.card-trajetoria{

background:white;

color:black;

padding:25px;

border-radius:12px;

margin-bottom:25px;

box-shadow:0 10px 30px rgba(0,0,0,0.4);

transition:0.3s;

}


.card-trajetoria:hover{

transform:translateY(-5px);

}


.card-trajetoria span{

font-size:14px;

color:#666;

display:block;

margin-bottom:8px;

}


.card-trajetoria h4{

margin-bottom:10px;

font-size:20px;

}


.card-trajetoria p{

font-size:15px;

margin-bottom:5px;

}



/* RESPONSIVO */

@media(max-width:768px){

.timeline{

flex-direction:column;

align-items:center;

}


.timeline::before{

display:none;

}


.coluna{

width:100%;

max-width:400px;

}

}

/*Minha Trajetória*/
/*Projeto*/
/* ================================================= */
/* PROJETOS - SLIDER 3D RESPONSIVO PROFISSIONAL */
/* ================================================= */

.projetos {
  padding: 120px 20px;
  text-align: center;
}

.titulo-projetos {
  font-size: 38px;
  margin-bottom: 70px;
  font-weight: bold;
}

/* CONTAINER */
.slider-container {
  width: 100%;
  height: 550px;
  perspective: 1000px;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

/* SLIDER */
.slider {
  position: relative;
  width: 300px;
  height: 450px;
  transform-style: preserve-3d;
  transition: transform 0.8s ease;
}

/* CARD */
.card {
  position: absolute;
  width: 300px;
  height: 450px;
  border-radius: 20px;
  overflow: hidden;
  cursor: grab;
  box-shadow: 0 20px 40px rgba(0,0,0,0.5);
  transition: transform 0.6s ease, opacity 0.6s ease;
}

.card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
  border-radius: 20px;
}

/* ======================= */
/* RESPONSIVO */
/* ======================= */

@media(max-width: 992px) {

  .slider-container {
    height: 450px;
  }

  .slider {
    width: 260px;
    height: 380px;
  }

  .card {
    width: 260px;
    height: 380px;
  }
}

@media(max-width: 768px) {

  .slider-container {
    height: 380px;
  }

  .slider {
    width: 220px;
    height: 320px;
  }

  .card {
    width: 220px;
    height: 320px;
  }
}

@media(max-width: 480px) {

  .slider-container {
    height: 320px;
  }

  .slider {
    width: 180px;
    height: 260px;
  }

  .card {
    width: 180px;
    height: 260px;
  }
}
.card {
  text-decoration: none;
  color: inherit;
}
.slider-container {
  max-width: 1200px;
  margin: auto;
}
/*Projeto*/
/*servicos*/
#servicos {
    padding: 80px 20px;
    background: #f4f6f9;
}

.container {
    max-width: 1200px;
    margin: auto;
}

#servicos h2 {
    text-align: center;
    font-size: 36px;
    margin-bottom: 50px;
    color: #222;
    position: relative;
}

#servicos h2::after {
    content: "";
    width: 80px;
    height: 4px;
    background: #007bff;
    display: block;
    margin: 15px auto 0;
    border-radius: 5px;
}

.servicos-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 30px;
}

.servico-card {
    background: #ffffff;
    padding: 40px 25px;
    border-radius: 15px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.05);
    transition: 0.3s ease;
    cursor: pointer;
}

.servico-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 40px rgba(0,0,0,0.08);
}

.servico-card i {
    font-size: 40px;
    color: #007bff;
    margin-bottom: 20px;
}

.servico-card h4 {
    font-size: 20px;
    margin-bottom: 15px;
    color: #333;
}

.servico-card p {
    color: #666;
    font-size: 15px;
    line-height: 1.6;
}

@media (max-width: 768px) {
    #servicos {
        padding: 60px 15px;
    }

    #servicos h2 {
        font-size: 28px;
    }
}
/*servicos*/
/*Contact*/
/* FUNDO */

.contato-section{

background: linear-gradient(135deg,#f5f2eb,#e6dfd2);

padding:80px 20px;

}


/* CARD */

.card-contato{

background: linear-gradient(145deg,#ffffff,#e6dfd2);

padding:30px;

border-radius:15px;

box-shadow:

10px 10px 20px rgba(0,0,0,0.15),

-5px -5px 15px rgba(255,255,255,0.7);

transition:0.4s;

transform-style: preserve-3d;

}


/* EFEITO LEVANTAR */

.card-contato:hover{

transform:

rotateY(5deg)

rotateX(5deg)

translateY(-10px)

scale(1.02);

box-shadow:

20px 20px 40px rgba(0,0,0,0.2);

}


/* TITULO */

.card-contato h3{

margin-bottom:25px;

font-weight:bold;

color:#333;

}



/* ITEM */

.item{

display:flex;

align-items:center;

margin-bottom:15px;

background: linear-gradient(145deg,#ffffff,#f0ece4);

padding:15px;

border-radius:10px;

text-decoration:none;

color:#333;

box-shadow:

5px 5px 10px rgba(0,0,0,0.1),

-3px -3px 8px rgba(255,255,255,0.8);

transition:0.3s;

transform-style: preserve-3d;

}



/* HOVER ITEM */

.item:hover{

transform:

translateX(10px)

translateZ(10px)

scale(1.03);

box-shadow:

10px 10px 20px rgba(0,0,0,0.2);

background: linear-gradient(145deg,#ffffff,#e8e2d8);

}



/* ICON */

.item i{

font-size:22px;

margin-right:15px;

color:#070706;

width:35px;

text-align:center;

}



/* TEXTO */

.item span{

font-weight:500;

}



/* RESPONSIVO */

@media(max-width:768px){

.card-contato{

margin-bottom:20px;

}

}
/*Contact*/
/*rodapé*/

/* FOOTER */

.footer{

background: linear-gradient(145deg,#1a1a1a,#000);

color:#fff;

padding:50px 20px;

margin-top:50px;

box-shadow:

0 -10px 20px rgba(243, 242, 242, 0.5),

inset 0 5px 10px rgba(12, 11, 11, 0.05);

}


/* LOGO */

.logo-footer{

font-weight:bold;

}


.logo-footer span{

color:#495e85;

}



/* TEXTO */

.footer p{

color:#ccc;

margin-top:10px;

}



/* ICONES */

.social-footer a{

color:#fff;

font-size:22px;

margin-left:15px;

transition:0.3s;

display:inline-block;

}



/* EFEITO 3D ICON */

.social-footer a:hover{

transform:

translateY(-8px)

scale(1.2);

color:#0a0a07;

text-shadow:

0 10px 20px rgba(12, 12, 10, 0.5);

}



/* LINHA */

.footer hr{

border-color:#333;

margin:30px 0;

}



/* COPYRIGHT */

.copy{

color:#aaa;

font-size:14px;

}



/* RESPONSIVO */

@media(max-width:768px){

.social-footer{

margin-top:20px;

text-align:center;

}

}
/*rodapé*/
.whatsapp-float {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 999;
}

.whatsapp-float img {
  border-radius: 50%;
  box-shadow: 0 4px 10px rgba(0,0,0,0.3);
  transition: transform 0.3s;
}

.whatsapp-float img:hover {
  transform: scale(1.1);
}