* {
    margin: 10;
    box-sizing: border-box;
    border:none;
    outline:none;
    text-decoration:none;
    scroll-behavior: smooth;
    font-family: 'Inter', sans-serif;
}
html{scrollbar-color: rgb(64 200 215)  rgb(4 25 35);}
:root {
    --main-color:#47e7f5;
    --main-bg: #011921;
    --second-bg: #082d39;
}
body {
    margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: center; 
  background-color: var(--main-bg);
  font-size: 16px;
  color: rgba(255, 255, 255, 0.877);
}
h1, h2, .title{
    font-weight:100;
}

h1, h2, h3, .title, .subtitle {
  font-family: 'Space Grotesk', sans-serif;
}

.site-wrapper {
 max-width: 1200px;
  width: 100%;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center; 
}

@media (max-width: 768px){.site-wrapper{max-width: 100%; padding-left:4vw; padding-right:4vw;overflow-x:hidden;}}
@media (max-width: 380px){.site-wrapper{padding-left:0vw; padding-right:0vw;}}
@media (max-width: 915px){header, section, footer{max-width: 95% !important;}}

header {
    width: 100%;
    max-width: 1200px;
    margin: 0 0;
    position: fixed;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    font-weight: 400;
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 100;
    font-size: 1.1em;
    padding: 10px 0vw 15px 0vw;
}

@media (max-width: 768px){
    header{
        max-width: 92vw;
    }}

/* Fundo de largura total */
header::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100vw;
    height: 100%;
    background-color: var(--main-bg);
    z-index: -1;
    background: rgba(1, 25, 33, 0.59);
    backdrop-filter: blur(4px);
}

header #portfolio{
    text-align:left; 
    align-items:center;
    width:30%;
    color:white;  
    font-size:1.2em;
    z-index:99;
    display:inline-flex;
    margin-top:5px;
    font-weight:700;
}

@media (max-width: 450px){
    header #portfolio{
        font-size:1em;     
    }}

header #portfolio .logo{
    display:flex;
    align-content:center;
}
header #portfolio .logo img{
    height:30px;
    width:30px;
}
nav{
    width:70%;
    text-decoration:none;
}
nav a:hover{color:var(--main-color);} 
nav a{
        text-transform:capitalize;
       margin-left:2rem;
        color:rgba(253, 253, 253, 0.877);
        cursor:pointer;
    }
    nav ol { 
        display:inline-flex;
        color:rgb(132, 204, 252);
        list-style-type:none;    
        align-items: right;
        float:right;
        margin:0;
    }
    .item1{
        margin-top:-2px;
    }
    nav li{transition:300ms;}

  label #simb1,
  label #simb2{
      font-size:30px;
      color:#fff;
      float:right;
      line-height:50px;  
      cursor:pointer;
      display:none;
      z-index:10;
      background:none;
      padding-left:10px;
      padding-right:10px;
      margin-top:-3px;
      border-radius:50%;
      margin-bottom:-10px;
  } 
  #res-menu{ display:none; }
/* --- MENU MOBILE --- */
  @media (max-width: 868px){
      nav{
          float:right;
          top:1vh;
          width:70%;
          z-index:75;
          background:none;
          border:none;
          box-shadow:none;
      }
      nav ol{
        flex-direction:column;
        margin-right:1vw;
        text-decoration:none;
        display:inline-flex;
        color:var(--main-color);
        position:fixed;
        top:70px;
        right:-100%;
        text-align:right;
        transition:.3s;
        z-index:9;
    }
    nav ol li{
        display:block;
        margin-top:20px;
        margin-bottom:20px;
        line-height: 10px;
    }
    nav ol li a{
          align-items:right;
          text-align:right;
          padding:10px;
          list-style-type:none;
          background-color:var(--second-bg);
          box-shadow:1px 1px 2px #0000008a;
          font-size:.8em;
            border-radius:10px;
            border: solid 1px var(--main-color);
      } 
      label #simb1{display:block;}
      nav a{
          font-size: 1.1em;
          text-decoration:none;
          text-transform:uppercase;
          color:rgba(255, 255, 255, 0.877);
          cursor:pointer;
      }  
      #res-menu:checked ~ ol{ right:0px; top:70px;}
      #res-menu:checked ~ label #simb1{ display:none; }
      #res-menu:checked ~ label #simb2{
          display:block;
          color:white;
          font-size:40px;
          box-shadow: inset 0em 0em 1em red;
          background-color:transparent;
          z-index:6;        
      }
  } 
/* --- FIM DO MENU MOBILE --- */ 
section {
    padding-top: 9rem;
    padding-bottom: 8rem;
}

@media (max-width:400px){
    section{
        padding: 40% 2% 8rem;
        padding-top: 20%;
        padding-bottom: 20%;
    }
}
section:nth-child(odd){background-color:var(--second-bg);}
/* --- CHAMADA --- */

#_chamada{
    display:flex;
    justify-content:center;
    align-items:center;
    line-height:0;
}
#_chamada img {
  border-radius:50%;
  overflow:hidden;
}
#_chamada h2{
    display:none;
    font-size:1.8rem;
    line-height:1;
}
#_chamada h1{
    max-width:100%;
}
#_chamada p{ padding-top:20px; padding-bottom:20px; padding-right:70px; line-height:1.6;}

@media (min-width:700px){#_chamada p{width:80%;}}
@media (max-width:500px){
    #_chamada h1{font-size: 35px;}
    #_chamada {  margin-top:40px;}
    #_chamada p{ font-size:1.1rem; padding-right:20px;}
    .skills-column .titulo{text-align:center; }
}
@media (max-width:768px){#_chamada h2{ font-size: 1.2rem !important; line-height:1.2; margin-top:30px;}}
@media (max-width:868px){
    #_chamada, #_sobre{
        flex-direction:column;
    }
    #_chamada img {
        width:80vw;
        height:auto;
        margin-top:4rem;
    }
}

#_chamada h2 span, .title span{ color:var(--main-color);}
#portfolio span{ color:var(--main-color);}

.smiley{
    color:var(--main-color);
    display:inline-flex;
    margin-left:20px;
    font-size: 1.1em; /* 55px */
    animation: _rotation 3s normal 4s infinite;
    animation-delay: 3s;
    animation-direction:alternate;
}
@keyframes _rotation {
	0% { transform: rotate(0);}
    100% { transform: rotate(90deg);}
}  
.call_content {
    color:white;
    font-size:11px; /*11px*/
}
.call_content h1 {
    font-size:44px;
}
.call_content p {
    font-size: 1rem; 
    color: rgba(255, 255, 255, 0.68);
}

.call_img{
    position:relative;
}
.call_img img{
    display: block;
    position:relative;
    z-index:2;
}

#_social{
    margin-bottom:1rem;
    margin-top:50px;
}
#_social a{
    display:inline-flex;
    text-decoration:none;
    width:2.5rem;
    height:2.5rem;
    font-size:1.2rem;
    margin:0.5rem 0.7rem 0.5rem 0;
    border: 1px solid #0c99a6;
    background-color:#47e7f51c;
    justify-content:center;
    align-items: center;
    color:#0c99a6;
    text-shadow:none;
    transition: .5s ease;
    border-radius:7px;
}

#_social a:hover{
    transform: scale(1.05);
    transition: 0.3s;
    color:#051b21;
    cursor:pointer;
}

.btn{
    display:inline-block;
    padding: 1rem 1.4rem;
    border-radius: 7px;
    background-color:#47e7f559;
    font-size:1rem;
    font-weight:400;
    letter-spacing:0.5px;
    transition: 0.5s ease;
    text-decoration:none;
    color:white;
    box-shadow:none;
    line-height:1;
    margin-top:30px;
    margin-right:20px;
    border: 1px solid var(--main-color);
}
.btn:hover {
    transform: scale(1.05);
    transition: 0.3s;
}

.btn-whatsapp {
  background-color: #175c6700;
  border: 1px solid #47e7f554;
}
/* --- FIM DA CHAMADA --- */
/* --- SOBRE --- */
#_sobre{
    display:flex;
    justify-content:center;
    align-items:center;
    gap:2rem;
}
#_sobre p{font-size:1rem; line-height:1.6;}

#_sobre img{
    border-radius: 10%;
}

@media (max-width:868px){
    .sobre_img img{
        width:55vw;
        height:auto;
    }
}
.title{
    color:white;
    font-size:2.3rem;
    text-align:center;
    margin-bottom:2rem;
}

.subtitle{
    text-align:center;
    justify-content: center;
    margin-top:-30px;
    margin-bottom:60px;
    font-size:1.3rem;
    color:#59727a;
}

.sobre_conteudo .title{
    text-align:left;
    margin-bottom:0;
}
.sobre_conteudo h2{
    margin:0;
    color:white;
}

.ocup{ color: rgba(255, 255, 255, 0.68);}

/*  FIM DE SOBRE  */
/*  CONTEUDO LIVRE  */

::-webkit-scrollbar {
    height: 10px;
    }
    ::-webkit-scrollbar-track {
    background:rgb(4 25 35);
    }
    ::-webkit-scrollbar-thumb {
    background: rgb(64 200 215);
    border-radius:7px;
    box-shadow: 0 0 1em rgb(44, 147, 158);
    }

/* FIM DE CONTEUDO LIVRE  */
/*  PROJETOS  */ 

#title{ margin-bottom:2rem; }

.portcontainer{
    display:grid;
    grid-template-columns: repeat(4, 1fr);
    align-items:center;
    justify-items: center;
    justify-content:center;
    width:100%;
    row-gap:5px;
    column-gap:25px;
}
@media (max-width:1000px){.portcontainer{grid-template-columns: repeat(3, 1fr);}} 
@media (max-width:868px){.portcontainer{grid-template-columns: repeat(2, 1fr);}}
@media (max-width:500px){.portcontainer{grid-template-columns: auto; row-gap:40px;}}

.portcontainer .portbox{
    border-radius:5px;
    overflow:hidden;
    display:flex;
    box-shadow: 0 0 12px rgba(71, 231, 245, 0.15);
    justify-content: center;
}

@media (max-width:500px){.portcontainer .portbox{max-width:85vw;}}

#_portfolio .portbox img{ width:100%; object-fit:cover; transition:.5s ease;  filter: brightness(25%); }
#_portfolio .portbox:hover img{ transform:scale(1.1); filter: brightness(45%); }

.portbox .camada{
    position:absolute;
    bottom: 0;
    left: 0;
    width:100%;
    height:100%;
    background:linear-gradient(rgba(0, 0, 0, 0), var(--main-color));
    display:flex;
    justify-content:center;
    align-items:center;
    flex-direction:column;
    text-align:center;
    padding: 0 2rem;
    transform:translateY(45%);
    transition: .5s ease;
}

.portbox {
    width:100%;
    height:90%;
}
@media (max-width:500px){.portbox { width:350px; height:230px}}

.portbox:hover .camada{ transform:translateY(0);}

.camada h3{ font-size:1rem; margin:0; }
.camada p{  font-size:.8rem;  margin: .15rem 0 .5rem; margin-bottom:30px;}

.camada a{
    display:inline-flex;
    justify-content:center;
    align-items:center;
    width:2.5rem;
    height:2.5rem;
    background-color:white;
    border-radius:50%;
    color:black;
}
.camada a i {
    color:black;
    font-size:1rem;   
}
/* FIM DE PROJETOS */
/* SKILLS */
#_skills{
    min-height:auto;
    padding-bottom:6rem;
}
 .skills-row{
    display:flex;
    flex-wrap:wrap;
    gap:5rem;
}
.skills-row .skills-column{
    flex: 1 1 20rem;
}
.skills-column .titulo{
    font-size:1.5rem;
    margin: 0 0 1rem;
}
.skills-box .skills-content{
    position:relative;
    border: .05rem solid var(--main-color);
    border-radius: 7px;
    padding: 0 1rem;
}
.skills-content .progress h4{
    font-size:.9rem;
    display:flex;
    justify-content:space-between;
    margin:0;
    margin-top:15px;
}
.skills-content .progress .barra{
    height:1rem;
    border-radius:5px;
    border: .05rem solid var(--main-color);
    margin: .5rem 0;
    padding: .3rem;
    margin-bottom:20px;
    border-top: none;
    border-bottom: none;
    background-color: #19616b4a;
 }
 .skills-content .progress .barra span{
    display:block;
    height:100%;
    border-radius:.3rem;
    background: linear-gradient(to right, #47e7f596, #47e7f5);
 }
.skills-column:nth-child(1) .skills-content .progress:nth-child(1) .barra span{ width:90%; }
.skills-column:nth-child(1) .skills-content .progress:nth-child(2) .barra span{ width:50%; }
.skills-column:nth-child(1) .skills-content .progress:nth-child(3) .barra span{ width:85%; }
.skills-column:nth-child(1) .skills-content .progress:nth-child(4) .barra span{ width:75%; }

.skills-column:nth-child(2) .skills-content .progress:nth-child(1) .barra span{ width:90%; }
.skills-column:nth-child(2) .skills-content .progress:nth-child(2) .barra span{ width:60%; }
.skills-column:nth-child(2) .skills-content .progress:nth-child(3) .barra span{ width:70%; }
.skills-column:nth-child(2) .skills-content .progress:nth-child(4) .barra span{ width:45%; }
@media (max-width:868px){.skills-container{grid-template-columns: repeat(2, 1fr);}}
@media (max-width:500px){.skills-container{grid-template-columns: repeat(1, 1fr);}}
/* FIM DE SKILLS */
/* DEPOIMENTOS */
#depoimentos{
    min-width:100%;
    display:grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
    align-items:center;
    justify-content:center;
    padding-bottom:70px;
    padding-top:30px;
    color:rgba(255, 255, 255, 0.658);
}
@media (max-width:800px){#depoimentos{grid-template-columns:auto;}}

.depo{
    background-color:#06222b8a;
    padding:10px;
    font-style:italic;
    box-shadow: 2px 2px 8px #0000008a;
    max-width:100%;
    height:100%;
    border-radius:8px;
    background:rgba(6, 34, 43, 0.856);
backdrop-filter: blur(5px);
-webkit-backdrop-filter: blur(5px);
border: 1px solid rgba(255, 255, 255, 0.171);
}
#frase{
    border-top: 1px solid white;
}
.autor{
    font-size:0.8em;
    float:right;
}
.border_{
    width:100%;
    display:inline-flex;
    border-top: 1px solid rgba(192, 209, 240, 0.404);
    background-color:rgba(0, 128, 0, 0);
    max-height:30px;
    float:right;
    max-width:85vw;
    margin:auto;
    margin-right:-8%;
}
#depoimentos .border_{
    margin:auto;
    margin-top:-10px;
    margin-bottom:0;
}
.checked{
    letter-spacing:5px;
    font-size:0.8em;
    color:orange;
    text-shadow: 0em 0em 1em orange;  
}
/* FIM DE DEPOIMENTOS */
footer {
    display:block;
    justify-content:center;
    align-items:center;
    padding:20px;
    font-size:0.8em;
    background-color:var(--second-bg);
    text-align:center;
}
header, section, footer {
    width: 100%;
}
footer, #_sobre, #_skills{
    box-shadow: 0 0 0 100vmax var(--second-bg);
    clip-path: inset(0 -100vmax);
}

/* Seção de CTA */

.icon-call {
    text-decoration:none;
    background:transparent;
    text-shadow:none;
    font-size: 2rem;
    color: var(--main-color);
    transition: transform 0.3s ease;
    border: 2px solid var(--main-color);
    border-radius: 9px;
    width:3.5rem;
    height:3.5rem;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    margin-right:20px;
}

.icon-call i {
    font-size: 2rem;
    color: var(--main-color);
    transition: transform 0.3s ease;
    border-radius: 9px;
    width:3.5rem;
    height:3.5rem;
    display:inline-flex;
    align-items:center;
    justify-content:center;
}

#cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 20vh;
    text-align: left;
    border-radius: 10px;
    margin: 0 auto 20px;
}

@media (max-width:500px){
    #cta {
        text-align:center;
        display:block;
        padding-bottom:20px;
    }
    footer label #simb1{
        display:none;
    }
}

.cta-content h2 {
    font-size: 2rem;
    color: var(--main-color);
    margin-bottom: -20px;
    text-transform:uppercase;
}

@media (max-width: 768px) {
    .cta-content h2 {font-size:1.8rem;} 
    .cta-content p{font-size:1rem; margin-top:25px;}
}

.cta-content p {
    font-size: 1rem;
    line-height:1.6;
    text-transform:uppercase;
    color: rgba(255, 255, 255, 0.69);
    margin-bottom: 2rem;
}

@media (max-width: 768px) {.cta-content p{display:none;}}

.cta-button {
    display: block;
    align-content:center;
    background-color:#47e7f559;
    letter-spacing:0.5px;
    transition: 0.5s ease;
    text-decoration:none;
    color:white;
    box-shadow:none;
    text-shadow: 
        0.5px 0.5px 0px #424242, 
        -0.5px -0.5px 0px #424242, 
        0.5px -0.5px 0px #424242, 
        -0.5px 0.5px 0px #424242; 
    padding: 0.4rem 1rem;
    border-radius: 7px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    width:40%;
    margin: -20px auto 30px auto;
    animation: pulse 1s infinite ease-in-out;
}
@media (max-width: 768px) {.cta-button {width:100%;font-size:0.9rem;}}

@keyframes pulse {
    0% {
        box-shadow: 0 0 0.5rem rgba(255, 255, 255, 0.3);
    }
    50% {
        box-shadow: 0 0 1rem var(--main-color);
    }
    100% {
        box-shadow: 0 0 0.5rem rgba(255, 255, 255, 0.3);
    }
}
@media (max-width: 768px) {.cta-button {animation: pulse 2s infinite ease-in-out;}}

.cta-button:hover {
    background-color: #47e7f5;
    transform: scale(1.1);
    box-shadow: 0 0 1rem var(--main-color);
}

/* MENU DO RODAPÉ */

.footer-menu {
    align-items: center;
    justify-content:center;
}

.footer-menu a {
    color: #fff;
    text-decoration: none;
}

.footer-menu a:hover {
    text-decoration: underline;
}

.footer-menu a:hover{color:var(--main-color);} 
.footer-menu a{
        text-transform:capitalize;
        margin-right:10px;
        color:rgba(253, 253, 253, 0.877);
        cursor:pointer;
    }
    .footer-menu ol { 
        display:inline-flex;
        color:rgb(132, 204, 252);
        list-style-type:none;    
        align-items: center;
        margin-bottom:-20px;
    }
    .item1{
        margin-top:-2px;
    }
    .footer-menu li{transition:300ms;}

/* RESPONSIVO */
@media (max-width:370px){
    * { margin: 10;}
    body {
        max-width:95vw;
        padding:0;
        margin:auto;
        display:flex;
        flex-direction:column;
        align-items:center;
        background-repeat:repeat-y;
    }

    .cta-button {margin-left:38%;}
}

.mobile-break {
  display: none;
}

@media (max-width: 768px) { /* só no mobile */
  .mobile-break {
    display: block;
    margin-top:40px;
  }
  body{max-width:95w;}
}
                       
@keyframes float{
	0%,100%{
		transform:translatey(10px)
	}
	50%{
		transform:translatey(-25px)
	}
}
.efeito-flutuante-infinito {
     animation: float 3.5s ease-in-out infinite;
}
@font-face {
  font-family: 'Font Awesome 5 Brands';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('https://ka-f.fontawesome.com/releases/v5.15.4/webfonts/free-fa-brands-400.woff2') format('woff2');
}

@font-face {
  font-family: 'Font Awesome 5 Free';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url('https://ka-f.fontawesome.com/releases/v5.15.4/webfonts/free-fa-solid-900.woff2') format('woff2');
}

@font-face {
  font-family: 'Font Awesome 7 Free';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url('https://ka-f.fontawesome.com/releases/v7.0.0/webfonts/free-fa-solid-900.woff2') format('woff2');
}

@font-face {
  font-family: 'Font Awesome 7 Brands';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('https://ka-f.fontawesome.com/releases/v7.0.0/webfonts/free-fa-brands-400.woff2') format('woff2');
}