/* header */

header {
    background: #ffffff;
    color: #ffffff;
    display: flex;
    padding: 1em;
    position: fixed;
    width: 100%;
    height: 38px;
    z-index: 2; /* Coloca a imagem na frente */
    border-radius: 1  rem;
  }
  
  
  body
  {
    margin: 0;
    padding: 0;
    position: relative;
    display: block;
    /* make it look decent enough */
  background-color: #183153;
    color: #ffffff00;
    font-family: "Avenir Next", "Avenir", sans-serif;
    background-image: image(lovepik);
    max-width: 100%; /* Largura máxima da div de conteúdo */
    margin: 0 auto; /* Centralizar a div */
    overflow-x: hidden; /* Impede a rolagem horizontal */
  
  }
  
  #menuToggle1
  {
    display: block;
    position: fixed;
    top: 25px;
    left: 30px;
    z-index: 2;
    max-width: 100%; /* Largura máxima da div de conteúdo */
    margin: 0 auto; /* Centralizar a div */
    -webkit-user-select: none;
    user-select: none;
    height: 30px;
    
  }
  
  #menuToggle1 a
  {
    text-decoration: none;
    color: #232323;
    
    transition: color 0.3s ease;
  }
  
  #menuToggle1 a:hover
  {
    color: #00fffd;
  }
  
  
  #menuToggle1 input
  {
    display: block;
    width: 40px;
    height: 32px;
    position: absolute;
    top: -7px;
    left: -5px;
    cursor: pointer;
    
    opacity: 0; /* hide this */
    z-index: 2; /* and place it over the hamburger */
    
    -webkit-touch-callout: none;
  }
  
  /*
   * Just a quick hamburger
   */
  #menuToggle1 span
  {
    display: block;
    width: 33px;
    height: 4px;
    margin-bottom: 5px;
    position: relative;
    
    background: #183153;
    border-radius: 50px;  
    z-index: 1;
    
    transform-origin: 4px 0px;
    
    transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
                background 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
                opacity 0.55s ease;
  }
  
  #menuToggle1 span:first-child
  {
    transform-origin: 0% 0%;
  }
  
  #menuToggle1 span:nth-last-child(2)
  {
    transform-origin: 0% 100%;
  }
  
  
  #menuToggle1 input:checked ~ span
  {
    opacity: 1;
    transform: rotate(45deg) translate(-2px, -1px);
    background: #00fffd;
  }
  
  
  #menuToggle1 input:checked ~ span:nth-last-child(3)
  {
    opacity: 0;
    transform: rotate(0deg) scale(0.2, 0.2);
  }
  
  
  #menuToggle1 input:checked ~ span:nth-last-child(2)
  {
    transform: rotate(-45deg) translate(0, -1px);
  }
  
  
  #menu
  {
    position: absolute;
    width: 104px;
    margin: -100px 0 0 -50px;
    padding: 30px;
    padding-top: 145px;
    border-radius: 2rem;
    background: #ffffffe0;
    list-style-type: none;
    -webkit-font-smoothing: antialiased;
    /* to stop flickering of text in safari */
    height: 800px;
    transform-origin: 0% 0%;
    transform: translate(-100%, 0);
    
    transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0);
  }
  
  #menu li
  {
    padding: 10px 0;
    font-size: 22px;
  }
  
  #menuToggle1 input:checked ~ ul
  {
    transform: none;
  }
  
 
  
    /* Botão menu 1*/ 
    .button01 {
      position: fixed;
      left: 84%;      /* Centraliza o botão horizontalmente */
      transform: translateX(-50%); /* Centraliza o botão horizontalmente */
      top: 10px;      /* Posiciona o botão na parte inferior da tela */
      display: flex;
      justify-content: center;
      align-items: center;
      border-radius: 4px;
      background: transparent;
      font-family: "Montserrat", sans-serif;
      color: rgb(0, 0, 0);
      z-index: 2;
      overflow: hidden;
      transition: all 0.5s;
      border: none;
      width: 100px;
      padding: 5px; /* Adicione algum espaço interno para torná-lo mais acessível em dispositivos móveis */
      cursor: pointer;
      max-width: 100%; /* Largura máxima da div de conteúdo */
      margin: 0 auto; /* Centralizar a div */
      width: 100px;
      height: 5%;

    }
    
    /* Adicione uma regra de media query para dispositivos móveis */
    @media (max-width: 768px) {
      .button01 {
        left: 20%;; /* Posiciona o botão no canto superior esquerdo */
        top: 10px;
        /* Ajusta a posição vertical */
        width: auto; /* Deixa a largura do botão ajustar automaticamente ao conteúdo */
        padding: 5px 10px; /* Aumenta o espaço interno para torná-lo mais acessível em dispositivos móveis */
      }
    }
    



   .button01::after,
   .button01::before {
   content: '';
   position: absolute;
   bottom: 0;
   right: 0;
   z-index: -99999;
   transition: all .4s;
  }
    
  .button01::before {
   transform: translate(0%, 0%);
   width: 100%;
   height: 100%;
   background: #ffffff;
   border-radius: 50px;
  }
    
  .button01::after {
   transform: translate(0px, 0px);
   width: 10px;
   height: 10px;
   background: #f2f2f28d;
   backdrop-filter: blur(5px);
   border-radius: 50px;
  }
    
  .button01:hover::before {
   transform: translate(5%, 20%);
   width: 10px;
   height: 10px;
  }
    
  .button01:hover::after {
   border-radius: 50px;
   transform: translate(0, 0);
   width: 100%;
   height: 100%;
  }
  
  .button01:active::after {
   transition: 0s;
   transform: translate(0, 5%);
  }
    /* Botão menu 1*/ 
  
    /* Botão menu 2*/ 

   .button02 {
    position: fixed;
    left: 92%;    /* Centraliza o botão horizontalmente */
    transform: translateX(-50%); /* Centraliza o botão horizontalmente */
    top: 10px;      /* Posiciona o botão na parte inferior da tela */
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 4px;
    background: transparent;
    font-family: "Montserrat", sans-serif;
    color: rgb(0, 0, 0);
    z-index: 2;
    overflow: hidden;
    transition: all 0.5s;
    border: none;
    width: 100px;
    padding: 5px; /* Adicione algum espaço interno para torná-lo mais acessível em dispositivos móveis */
    cursor: pointer;
    max-width: 100%; /* Largura máxima da div de conteúdo */
    margin: 0 auto; /* Centralizar a div */
    width: 100px;
    height: 5%;

  }
  
  /* Adicione uma regra de media query para dispositivos móveis */
  @media (max-width: 768px) {
    .button02 {
      left: 38%;; /* Posiciona o botão no canto superior esquerdo */
      top: 10px;
      /* Ajusta a posição vertical */
      width: auto; /* Deixa a largura do botão ajustar automaticamente ao conteúdo */
      padding: 5px 10px; /* Aumenta o espaço interno para torná-lo mais acessível em dispositivos móveis */
    }
  }
  
   .button02::after,
   .button02::before {
   content: '';
   position: absolute;
   bottom: 0;
   right: 0;
   z-index: -99999;
   transition: all .4s;
  }
    
  .button02::before {
   transform: translate(0%, 0%);
   width: 100%;
   height: 100%;
   background: #ffffff;
   border-radius: 50px;
  }
    
    
  .button02::after {
   transform: translate(0px, 0px);
   width: 10px;
   height: 10px;
   background: #f2f2f28d;
   backdrop-filter: blur(5px);
   border-radius: 50px;
  }
    
  .button02:hover::before {
   transform: translate(5%, 20%);
   width: 10px;
   height: 10px;
  }
    
  .button02:hover::after {
   border-radius: 50px;
   transform: translate(0, 0);
   width: 100%;
   height: 100%;
  }
  
  .button02:active::after {
   transition: 0s;
   transform: translate(0, 5%);
  }
  /* Botão menu 2*/ 
  

  /* imagens de inicio*/
  .imagem-de-logo{
   width: 130px; /* Largura desejada */
   height:80px; /* Altura desejada */
   top: 2px;
   right: 89%;
   border-radius: 0.3rem;
   position:fixed;
   background-image: url('Logo.png'); /* Substitua pelo caminho da sua imagem */
   background-size: cover; /* Para redimensionar a imagem para cobrir a div */
   max-width: 100%; /* Largura máxima da div de conteúdo */
   max-height: auto;
   margin: 0 auto; /* Centralizar a div */
   cursor: pointer;
   z-index: 2; /* Coloca a imagem na frente */
  
  }
  /* Adicione uma regra de media query para dispositivos móveis */
  @media (max-width: 768px) {
    .imagem-de-logo {
      left: 80%;; /* Posiciona o botão no canto superior esquerdo */
      top: 10px;
      /* Ajusta a posição vertical */
      width: auto; /* Deixa a largura do botão ajustar automaticamente ao conteúdo */
      padding: 5px 10px; /* Aumenta o espaço interno para torná-lo mais acessível em dispositivos móveis */
    }
  }
  
  
  
  
  .imagem-de-fundo2{
   width: 400px; /* Largura desejada */
   height: 46. 9px; /* Altura desejada */
   top: -9px;
   left: 52%;
   border-radius: 1.5rem;  
   position:absolute;
   background-image: url('o.png'); /* Substitua pelo caminho da sua imagem */
   background-size: cover; /* Para redimensionar a imagem para cobrir a div */
   max-width: 100%; /* Largura máxima da div de conteúdo */
   margin: 0 auto; /* Centralizar a div */
  }
  
  
  
  /*----------------------------------------------------------------------*/
  
   /*----frase home1----*/
   .word {
  position: absolute;
  top:450px;
  text-align: left;
  line-height: 28px;
  width: 460px;
  font-size: 14px; /* Tamanho da fonte em pixels */
  left: 8%;
  color: black;
  word-wrap: break-word; /* Quebra de palavras */
  max-width: 450px; /* Largura máxima do contêiner */
  overflow: hidden; /* Esconde o texto que ultrapassa a largura */
  letter-spacing: 1px; /* Espaçamento entre letras em pixels */
  max-width: 100%; /* Largura máxima da div de conteúdo */
  margin: 0 auto; /* Centralizar a div */
  height: auto; /* Mantém a proporção da imagem */
  z-index: 1; /* Coloca a imagem na frente */
   }
  
   .word p {
    text-align: left;
    width: 100%;
    margin: 10px auto;
    display: block;
    max-width: 100%; /* Largura máxima da div de conteúdo */
  margin: 0 auto; /* Centralizar a div */
  height: auto; /* Mantém a proporção da imagem */
  z-index: 1; /* Coloca a imagem na frente */
   }
    /*----frase home1----*/
  
  
    /*----Card frase----*/
  
    .card {
      position: absolute;
      width: 460px;
      height: 76px;
      left: 7.5%;
      top: 455px;
      box-sizing: border-box;
      background-color: #ffffffd2;
  display: block;
      border-radius: 8px;
      flex-direction: column;
      transition: all ease-in-out 0.3s;
      max-width: 100%; /* Largura máxima da div de conteúdo */
      margin: 0 auto; /* Centralizar a div */
      
    }
    
    .card:hover {
      box-shadow:#18fef6;
      border: 5px solid #18fef6;
    }
  
    
    @keyframes textanimate {
      0% {
        right: 20px;
      }
    
      100% {
        right: 10px;
      }
    }
  





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


    header {
      max-width: 100%;
      padding: 44px 0;
      color: #fff;
      background-color: #f6f6f60b;
      border-radius: .5rem;
      .header-wrapper {
        
        margin: 0 auto;
        text-align: center;
        
        p {font-size: 21px;}
        
      }
    }
    
    .navbar-fixed-top {
    
      position: fixed;
      top: 0;
      right: 0;
      left: 0;
      z-index: 1;
      
    }
    
    .container {
     
      width: 100%;
      max-width: 100%;
      height: 600px;
      position: absolute;
      padding: 80px 0 0 20px; 
         text-align: center;
        color: #ffffff;      
      h1 {font-size: 36px;}
       
    }
    
    
    #myInput {
      
      background-image: url('/css/searchicon.png');
      background-position: 10px 12px;
      background-repeat: no-repeat;
      width: 95%;
      font-size: 16px;
      padding: 12px 20px 12px 40px;
       border: 1px solid #080505;
      margin-bottom: 12px;
        
    }
      
    #myUL {
        
      width: 95%;
      list-style-type: none;
      letter-spacing: 1px;
      

      li a {
        
        border: solid 1px #eee;
        margin-top: -1px;
        background-color: #f6f6f6;
        padding: 12px;
        text-decoration: none;
        font-size: 18px;
        color: black;
        display: block; 

        &:not(.header):hover {
          background-color: #ddd;
        }
          
      }
    
    }
    
    a {
      text-decoration: none;
      color: #000000;
      font-weight: bold;
  }
    
    #btn-top {
      
      position: fixed;
      bottom: 4%;
      right: 1%;
      z-index: 99; /* Acima de tudo! */
      outline: none;
      background-color: #040103;
      color: white;
      cursor: pointer;
      padding: 15px;
      border-radius: 10px;
      
      transition: ease .5s;
      display: none; /* Oculto por padrão. */
      
      &:hover {background-color: #000000;}
      
    }





     .ctn {
      display: block;
      margin: auto;
      text-align: center;
    }
    footer {
      position: fixed;
      bottom: 5px;
      right: 5px;
      color: #FFF;
    }
    footer a, footer a:after {
      font-size: 1em !important;
    }
    /*END BODY*/
    
    /*GRADIENTS*/
    
      /*BLUE*/
      .b-blue, .b-blue:before {
        background: #183153;
        background: -moz-linear-gradient(45deg, #183153 0%, #183153 100%);
        background: -webkit-gradient(left bottom, right top, color-stop(0%, #183153), color-stop(100%, rgb(2, 255, 248, 1)));
        background: -webkit-linear-gradient(45deg, #183153 0%, #183153 100%);
        background: -o-linear-gradient(45deg, rgba(5,118,255,1) 0%, rgba(36,248,255,1) 100%);
        background: -ms-linear-gradient(45deg, rgb(2, 255, 248, 1) 0%, #183153 100%);
        background: linear-gradient(45deg, #183153 0%, rgb(17, 51, 50) 100%);
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0576ff', endColorstr='#24f8ff', GradientType=5 );
      }
    /*END GRADIENTS*/
    /*BASE BUTTON*/
    .button {
      display: inline-block;
      position: relative;
      border-radius: 3px;
      text-decoration: none;
      padding: .5em;
      margin: .5em;
      font-size: 2em;
      font-weight: bold;
      transition: all .5s;
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }
    .button:hover {
      text-shadow: 0px 0px 0px rgba(255, 255, 255, .75);
    }
    .button:hover:after {
      left: 100%;
      top: 100%;
      bottom: 100%;
      right: 100%;
    }
    .button:before {
      content: '';
      display: block;
      position: absolute;
      left: 0;
      top: 0;
      bottom: 0;
      right: 0;
      z-index: -1;
      border-radius: 5px;
      transition: all .5s;
    }
    .button:after {
      content: '';
      display: block;
      position: absolute;
      left: 2px;
      top: 2px;
      bottom: 2px;
      right: 2px;
      z-index: -1;
      border-radius: 5px;
      transition: all .5s;
    }
    .button2 {
      display: inline-block;
      font-size: 1.7em;
      margin: .5em;
      padding: .5em;
      border-radius: 14px;
      transition: all .5s;
      filter: hue-rotate(0deg);
      color: #FFF;
      text-decoration: none;
      width: 90%;
      height: 70px;
    }
    /*END BASE BUTTON*/
    /*ROTATE*/
    .rot-360-noscoop:hover {
      filter: hue-rotate(360deg);
      transform: rotate(360deg);
    }
    .rot-135:hover {
      filter: hue-rotate(135deg);
    }
    .rot-90:hover {
      filter: hue-rotate(90deg);
    }
    /*END ROTATE*/

    
    .contact-me {
        width: 100vw;
        padding: 90px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
       position: absolute;
       top: 3950%;      
       max-width: 100%; /* Largura máxima da div de conteúdo */
       margin: 0 auto; /* Centralizar a div */
       height: auto; /* Mantém a proporção da imagem */
      }
      
      .contact-me h1 {
        font-size: 56px;
        color: #fbfbfb;
        font-family: "Libre Baskerville", serif;
        font-weight: 700;
        position: absolute;
        bottom:-15%;
      
      }
      
      .contact {
        display: flex;
        gap: 24px;
        position: absolute;
        bottom:-50%;
        
      }
      
      .contact-card {
color: #000000;        padding: 10px;
background-color: #ffffff;
        border-radius: 8px;
        display: flex;
        gap: 10px;
        margin-top: 7.5vh;
      }